30:T66d,viewof strokes = { const context = DOM.context2d(width, height); 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(); }; // Create a new empty stroke at the start of a drag gesture. function dragsubject() { const stroke = []; stroke.lineWidth = viewof lineWidth.value; stroke.strokeStyle = viewof strokeStyle.value; 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; }31:[] 2e:{"title":"Draw Me","cells":[{"id":31,"value":"md`# Draw Me\n\nDraw something! Command-Z to undo and Shift-Command-Z to redo.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof lineWidth = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px width`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"viewof strokeStyle = {\n const form = html``;\n form.i.oninput = () => form.value = form.i.value;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"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 addEventListener(\"keydown\", keydowned);\n invalidation.then(() => removeEventListener(\"keydown\", keydowned));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"strokes","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`## Copy points from first line here`","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"string = arrayToCSV(strokes[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"function arrayToCSV (xyArray) {\n // Modified from: http://stackoverflow.com/questions/17836273/\n // export-javascript-data-to-csv-file-without-server-interaction\n if(xyArray){\n var csvRows = [];\n for (var i = 0; i < xyArray.length; ++i) {\n // flip y values since y starts at top, but we think of it as starting at bottom\n csvRows.push([xyArray[i][0], height - xyArray[i][1]].join(','));\n }\n\n return csvRows.join('\\n');\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}