31:T78b,function makeDrawArea(width, height) { const context = DOM.context2d(width, height); context.canvas.style.border = "1px solid gray"; context.canvas.style.borderRadius = "3px"; const strokes = (context.canvas.value = []); const curve = d3.curveBasis(context); const redo = []; context.lineJoin = "round"; context.lineCap = "round"; // Render and report the new value. function render() { context.clearRect(0, 0, width, height); for (const stroke of strokes) { context.beginPath(); curve.lineStart(); for (const point of stroke) { curve.point(...point); } if (stroke.length === 1) curve.point(...stroke[0]); curve.lineEnd(); context.lineWidth = stroke.lineWidth; context.strokeStyle = stroke.strokeStyle; context.stroke(); } context.canvas.value = strokes; context.canvas.dispatchEvent(new CustomEvent("input")); } d3.select(context.canvas).call( d3 .drag() .container(context.canvas) .subject(dragsubject) .on("start drag", dragged) .on("start.render drag.render", render) ); context.canvas.undo = () => { if (strokes.length === 0) return; redo.push(strokes.pop()); render(); }; context.canvas.redo = stroke => { if (redo.length === 0) return; strokes.push(redo.pop()); render(); }; context.canvas.reset = () => { while (strokes.length) { strokes.pop(); } render(); }; context.canvas.addStrokes = s => { strokes.push(...s); render(); }; // Create a new empty stroke at the start of a drag gesture. function dragsubject() { const stroke = []; stroke.lineWidth = 2; stroke.strokeStyle = "black"; strokes.push(stroke); redo.length = 0; return stroke; } // Add to the stroke when dragging. function dragged({ subject, x, y }) { subject.push([x, y]); } return context.canvas; }32:[] 2f:{"title":"Canvas Pencil area","cells":[{"id":0,"value":"md`# Canvas Pencil area\n\nModifed from [Mike's dragging example](https://observablehq.com/@d3/draw-me?collection=@d3/d3-drag), extra public API methods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"undo = {\n const keydowned = event => {\n if (event.keyCode === 90 && event.metaKey && !event.altKey) {\n if (event.shiftKey) viewof strokes.redo();\n else viewof strokes.undo();\n event.preventDefault();\n }\n };\n const form = html``;\n form.redo.onclick = () => viewof strokes.redo();\n form.undo.onclick = () => viewof strokes.undo();\n form.reset.onclick = () => viewof strokes.reset();\n form.add.onclick = () => viewof strokes.addStrokes([[[1, 1], [5, 5]]]);\n addEventListener(\"keydown\", keydowned);\n invalidation.then(() => removeEventListener(\"keydown\", keydowned));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"viewof strokes = {\n return makeDrawArea(500, 500);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}