25:["$","title",null,{"children":"Drawing API | Jasper Tran O'Leary | Observable"}] 49:T4f8,function initTool(ps) { let tool = ps.tool || new paper.Tool(); tool.hitResult = null; tool.hitOptions = { stroke: true, segments: true, tolerance: 10 }; tool.onMouseDown = (toolEvent) => { tool.hitResult = ps.project.hitTest(toolEvent.point, tool.hitOptions); mutable test = tool.hitResult; mutable toolUseIndicator = Date.now(); if (tool.hitResult) { if ( tool.hitResult.type === "stroke" || tool.hitResult.type === "segment" ) { if (!toolEvent.event.shiftKey) { __clearSelects(ps); } tool.hitResult.item.selected = true; } } else { __clearSelects(ps); } }; tool.onMouseDrag = (toolEvent) => { let maybeItem = tool.hitResult.item; if (maybeItem) { mutable toolUseIndicator = Date.now(); if (tool.hitResult.type === "stroke") { __getSelected(ps).forEach( (c) => (c.position = c.position.add(toolEvent.delta)) ); } else if (tool.hitResult.type === "segment") { if (maybeItem && maybeItem.selected) { if (maybeItem.callParams.op === "circle") { maybeItem.scale(1 + 0.1 * toolEvent.delta.y); } } } } }; tool.onMouseUp = (event) => {}; }4a:[] 29:{"id":"60ead54a8717c46f","slug":null,"title":"Drawing API","thumbnail":"1d5af52e7df7136e73a3c97b3efe8bab887f60efcf04d708cece428a277a2297","access_level":"public","create_time":"$D2023-01-06T19:35:56.251Z","update_time":"$D2023-04-19T17:19:40.051Z","view_time":null,"first_public_time":"$D2023-01-06T19:36:01.962Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bb910cbb860f0cef","login":"jtranoleary","name":"Jasper Tran O'Leary","avatar_url":"https://avatars-next.observableusercontent.com/7b1fca3ec60e80d6d0d1652c3cc957a07a96f4415cca592cee189df0f44ab416","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":265,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f17f6741d5f43f60","login":"jtranoleary","name":"Jasper Tran O'Leary","avatar_url":"https://avatars-next.observableusercontent.com/7b1fca3ec60e80d6d0d1652c3cc957a07a96f4415cca592cee189df0f44ab416","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f17f6741d5f43f60","login":"jtranoleary","name":"Jasper Tran O'Leary","avatar_url":"https://avatars-next.observableusercontent.com/7b1fca3ec60e80d6d0d1652c3cc957a07a96f4415cca592cee189df0f44ab416","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Drawing API","cells":[{"id":0,"value":"# Drawing API","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"_Note: I am now developing this locally and will paste things back here regularly. However, what you see here might not be the most up-to-date version._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"paper = require(\"paper\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"drawingPad = makeDrawingPad()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof cadOperations = Inputs.button(\n [\n [\"Circle\", (value) => value + 1],\n [\"Rectangle\", (value) => value + 1],\n [\"Polyline\", (value) => value - 1],\n [\"BUnion\", (value) => 0],\n [\"BIntersect\", (value) => 0],\n [\"BSubtract\", (value) => 0]\n ],\n { value: 0, label: \"CAD Operations\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"selected = {\n toolUseIndicator;\n return __getSelected(drawingPad.ps);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"{\n let body = selected.map((item) => {\n let op = item.callParams.op;\n if (op === \"circle\") {\n return htl.html`\n

circle

x: ${item.position.x}

y: ${item.position.y}

r: ${item.bounds.width}

\n `;\n } else {\n return `

unknown

`;\n }\n });\n let wrapper = htl.html`

`;\n body.forEach((el) => wrapper.append(el));\n return wrapper;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"makeDrawingPad = () => {\n clearDrawingIndicator;\n let size = 20;\n let canvas = DOM.canvas(720, 480);\n canvas.style.backgroundColor = \"black\";\n let ps = (() => {\n let ps = new paper.PaperScope();\n ps.setup(canvas);\n // Flip Y axis so that it points \"up\" the page to match the Shopbot. This should only occur once to avoid constant flipping.\n ps.view.scale(1, -1);\n return ps;\n })();\n canvas.ps = ps;\n ps.project.activeLayer.removeChildren();\n initTool(ps);\n invalidation.then(() => {\n ps.remove();\n canvas.remove();\n });\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"mutable test = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"mutable clearDrawingIndicator = Date.now()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"mutable toolUseIndicator = Date.now()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"function generateCodeFromCanvas(ps) {\n let cps = ps.project.activeLayer.children.map((c) => c.callParams);\n let replace = (cp) => {\n let obj = cp.obj;\n if (cp.op === \"circle\") {\n return `.circle(${obj.position.x}, ${obj.position.y}, ${obj.bounds.width})`;\n } else {\n return null;\n }\n };\n return cps.map(replace);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"generateCodeFromCanvas(drawingPad.ps)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Todo\n\n- select path, parameters pop up in separate view\n- changing view resynthesizes function render/execute thunk function call","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"md`\n\\`\\`\\`javascript\npolyline([\n line(x1, y1),\n line(x2, y2)\n])\n\\`\\`\\`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"drawingPad.ps","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"class CM {\n constructor() {\n this.thunks = [];\n }\n\n clear() {\n this.thunks = [];\n }\n\n render(ps) {\n __clearCanvas(ps);\n this.thunks.forEach((thunk) => thunk(ps));\n return this;\n }\n circle(x, y, r) {\n let thisCall = `.circle(${x}, ${y}, ${r})`;\n let callParams = {\n op: \"circle\",\n x,\n y,\n r\n };\n let thunk = (ps) => {\n let center = new ps.Point(x, y);\n let radius = r;\n let path = new ps.Path.Circle(center, radius);\n // path.applyMatrix = false;\n path.strokeColor = \"white\";\n callParams.obj = path;\n path.callParams = callParams;\n };\n this.thunks.push(thunk);\n return this;\n }\n\n point(x, y) {}\n\n /* Do I need these? */\n select() {}\n\n deselect() {}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"circle = (x, y, r) => {\n return (ps) => {\n let center = new ps.Point(x, y);\n let radius = r;\n let path = new ps.Path.Circle(center, radius);\n path.strokeColor = \"white\"; \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"renderCM = (drawingPad) => {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"mutable miniCadProgram = (ps) => {\n // circle(50, 50, 20)(ps);\n // circle(100, 100, 20)(ps);\n // return ps.project.activeLayer.children;\n updateMiniCadProgramIndicator;\n return new CM()\n .circle(50, 50, 20)\n .circle(100, 100, 20)\n .circle(200, 200, 40)\n .render(ps);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"miniCadProgram(drawingPad.ps)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"Inputs.button(\"Sabotage\", {\n reduce: () => {\n mutable miniCadProgram = (x) => 42;\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"mutable updateMiniCadProgramIndicator = Date.now()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`\n\\`\\`\\`haskell\ncircle :: int -> int -> int -> canvas -> canvas\ncircle x y r origCanvas = ...\n\nmain :: IO ()\nmain =\n Canvas () >>= circle 50 50 20 >>= circle >>= render\n\nmain = do\n c <- canvas\n circle 50 50 20 c\n circle 100 100 20 c\n render c\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"function __clearCanvas(ps) {\n ps.project.activeLayer.removeChildren();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"function __getSelected(ps) {\n return ps.project.activeLayer.children.filter(c => c.selected);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"function __clearSelects(ps) {\n ps.project.activeLayer.children.forEach((c) => (c.selected = false));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null