30:T495,function draggable(handleNode, view) { let initialViewValue = null; let dragStartCoord = null; document.addEventListener('mousedown', startDrag); document.addEventListener('mousemove', drag); document.addEventListener('mouseup', endDrag); invalidation.then(() => { document.removeEventListener('mousedown', startDrag); document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', endDrag); }); function startDrag(evt) { if (evt.target === handleNode) { dragStartCoord = {x: +evt.clientX, y: +evt.clientY}; initialViewValue = view.value; } } function drag(evt) { if (dragStartCoord) { const dx = evt.clientX - dragStartCoord.x; const dy = evt.clientY - dragStartCoord.y; const newX = initialViewValue.x + dx; const newY = initialViewValue.y + dy; broadcastNewValue({x: newX, y: newY}); } } function endDrag() { if (dragStartCoord) { initialViewValue = null; dragStartCoord = null; } } function broadcastNewValue(value) { view.value = value; view.dispatchEvent(new CustomEvent('input')); } return handleNode; }31:T485,function grid({major = 10, minor = null, origin = {x: 0, y: 0}, vertical = true, horizontal = true, color = 'lightgray', weight = 1} = {}) { const id = generateId(); const pattern = svg` ${isDefined(minor) ? svg` ${horizontal ? `` : ''} ${vertical ? `` : ''} ` : ''} ${isDefined(minor) ? `` : ''} ${horizontal ? `` : ''} ${vertical ? `` : ''} `; return svg` ${pattern} `; }32:T46c,function dotGrid({major = 10, minor = null, color = 'lightgray', weight = 1} = {}) { const id = generateId(); const pattern = svg` ${isDefined(minor) ? svg` ` : ''} ${isDefined(minor) ? svg`` : ''} `; return svg` ${pattern} `; }33:T5c9,function point(x, y, {minX, minY, maxX, maxY, step = 1} = {}) { const view = new View(enforceBounds({x,y})); const node = draggable(html`${format(view.value)}`, view); function format(value) { return `(${value.x}, ${value.y})`; } function update() { const constrainedValue = enforceBounds(view.value); if (constrainedValue.x !== view.value.x || constrainedValue.y !== view.value.y) { view.value = constrainedValue; } node.innerText = format(view.value); } function roundToStep(num) { return Math.round(num / step) * step; } function ceilToStep(num) { return Math.ceil(num / step) * step; } function floorToStep(num) { return Math.floor(num / step) * step; } function enforceBounds(value) { const newValue = value; newValue.x = roundToStep(newValue.x); newValue.y = roundToStep(newValue.y); if (isDefined(minX) && newValue.x < ceilToStep(minX)) { newValue.x = ceilToStep(minX); } if (isDefined(maxX) && newValue.x > floorToStep(maxX)) { newValue.x = floorToStep(maxX); } if (isDefined(minY) && newValue.y < ceilToStep(minY)) { newValue.y = ceilToStep(minY); } if (isDefined(maxY) && newValue.y > floorToStep(maxY)) { newValue.y = floorToStep(maxY); } return newValue; } view.addEventListener('input', update); invalidation.then(() => view.removeEventListener('input', update)); return bind(node, view); }34:[] 2e:{"title":"SVG Inputs","cells":[{"id":111,"value":"md`\n# SVG Inputs\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof pointA = point(width/2, height/2, {minX: 0, maxX: width, minY: 0, maxY: height, step: 10});","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"html`\n \n`;","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"height = width/3;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"class View {\n constructor(value) {\n Object.defineProperties(this, {\n _list: {value: [], writable: true},\n _value: {value, writable: true}\n });\n }\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent({type: \"input\", value});\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"function bind(inputNode, view) {\n function updateView() {\n view.removeEventListener('input', updateInput);\n view.value = inputNode.value;\n view.dispatchEvent(new CustomEvent('input'));\n Promises.delay().then(() => view.addEventListener('input', updateInput))\n }\n\n function updateInput({value}) {\n inputNode.removeEventListener('input', updateView);\n inputNode.value = view.value;\n inputNode.dispatchEvent(new CustomEvent('input'));\n Promises.delay().then(() => inputNode.addEventListener('input', updateView))\n }\n\n inputNode.value = view.value;\n inputNode.addEventListener('input', updateView);\n view.addEventListener('input', updateInput);\n\n return Generators.disposable(inputNode, () => {\n inputNode.removeEventListener('input', updateView);\n view.removeEventListener('input', updateInput);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"function isDefined(value) { return typeof value !== 'undefined' && value !== null; }","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"function generateId() {\n // Math.random should be unique because of its seeding algorithm.\n // Convert it to base 36 (numbers + letters), and grab the first 9 characters\n // after the decimal.\n return '_' + Math.random().toString(36).substr(2, 9);\n};","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}