31:T401,viewof board = { const d = Drawer({ width, height: 500, stroke: () => viewof stroke.value, strokeWidth: () => viewof strokeWidth.value }); const undoButton = html``; const redoButton = html``; const controls = html`

${undoButton} ${redoButton} ${viewof strokeWidth} ${viewof stroke}

`; undoButton.onclick = () => d.undo(); redoButton.onclick = () => d.redo(); const container = html`

${controls} ${d}

`; container.value = d.value; // expose strokes for use in reactive cells Object.defineProperty(container, "value", { get: () => d.value }); container.addEventListener("input", () => { container.dispatchEvent(new CustomEvent("input")); }); return container; }32:T79d,// the draw function function Drawer({ width = 640, height = 480, border = 1, curve: Curve = d3.curveBasis, stroke = "black", strokeWidth = 1.5, lineCap = "round", lineJoin = "round" } = {}) { const context = DOM.context2d(width, height); const strokes = (context.canvas.value = []); const curve = Curve(context); const redo = []; context.lineJoin = lineJoin; context.lineCap = lineCap; // Render and report the new value. function render() { context.clearRect(0, 0, width, height); for (const stroke of strokes) { context.strokeStyle = stroke.stroke; context.lineWidth = stroke.strokeWidth; context.beginPath(); curve.lineStart(); for (const point of stroke) { curve.point(...point); } if (stroke.length === 1) curve.point(...stroke[0]); curve.lineEnd(); 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(); }; // Create a new empty stroke at the start of a drag gesture. function dragsubject() { const currentStroke = []; currentStroke.stroke = typeof stroke === "function" ? stroke() : stroke; currentStroke.strokeWidth = typeof strokeWidth === "function" ? strokeWidth() : strokeWidth; strokes.push(currentStroke); redo.length = 0; return currentStroke; } // Add to the stroke when dragging. function dragged({ subject, x, y }) { subject.push([x, y]); } return context.canvas; }33:[] 2f:{"title":"Whiteboard","cells":[{"id":0,"value":"# Whiteboard","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"viewof strokeWidth = Inputs.range([0.5, 20], {\n value: 1.5,\n step: 0.5,\n label: \"Stroke width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"viewof stroke = Inputs.color({ label: \"Color\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}