viewof freehand = { const height = 600; let currentStrokeElement = undefined; let currentFillElement = undefined; let currentStrokeData = undefined; const strokes = []; const g = htl.svg``; const svg = htl.svg``; svg.addEventListener("pointerdown", handlePointerDown); svg.addEventListener("pointermove", handlePointerMove); svg.addEventListener("pointerup", handlePointerUp); svg.addEventListener("pointercancel", handlePointerCancel); svg.addEventListener("touchstart", preventDefaultHandler); svg.addEventListener("touchend", preventDefaultHandler); svg.addEventListener("touchcancel", preventDefaultHandler); svg.addEventListener("touchmove", preventDefaultHandler); const clearButton = htl.html``; clearButton.addEventListener("click", handleClear); const copyButton = htl.html``; copyButton.addEventListener("click", handleCopy); const multipleStrokesCheckbox = htl.html``; const element = htl.html`

${svg} ${clearButton} Allow Multiple Strokes${multipleStrokesCheckbox}

`; element.value = strokes; initialStrokes.forEach((stroke) => { const strokeElement = htl.svg``; const fillElement = htl.svg``; g.appendChild(strokeElement); g.appendChild(fillElement); updatePath(strokeElement, stroke); updatePath(fillElement, stroke); }); return element; function preventDefaultHandler(e) { e.preventDefault(); } function handlePointerDown(e) { e.preventDefault(); e.target.setPointerCapture(e.pointerId); if (!multipleStrokesCheckbox.checked) { handleClear(); } currentStrokeElement = htl.svg``; currentFillElement = htl.svg``; g.appendChild(currentStrokeElement); g.appendChild(currentFillElement); currentStrokeData = [pointsFromEvent(e)]; updatePath(currentStrokeElement, currentStrokeData); updatePath(currentFillElement, currentStrokeData); strokes.push(currentStrokeData); element.dispatchEvent(new CustomEvent("input")); } function handlePointerMove(e) { e.preventDefault(); if (currentStrokeElement !== undefined) { currentStrokeData.push(pointsFromEvent(e)); updatePath(currentStrokeElement, currentStrokeData); updatePath(currentFillElement, currentStrokeData); strokes[strokes.length - 1] = currentStrokeData; element.dispatchEvent(new CustomEvent("input")); } } function handlePointerUp(e) { e.preventDefault(); if (currentStrokeElement !== undefined) { currentStrokeData.push(pointsFromEvent(e)); updatePath(currentStrokeElement, currentStrokeData); updatePath(currentFillElement, currentStrokeData); strokes[strokes.length - 1] = currentStrokeData; element.dispatchEvent(new CustomEvent("input")); } currentStrokeElement = undefined; } function handlePointerCancel(e) { e.preventDefault(); currentStrokeElement = undefined; } function handleClear() { while (g.firstChild) { g.removeChild(g.firstChild); } strokes.length = 0; } function handleCopy() { pbcopy(JSON.stringify(element.value)); } function pointsFromEvent(e) { return [e.offsetX, e.offsetY, e.pressure]; } function getSvgPathFromStroke(stroke) { if (!stroke.length) return ""; const d = stroke.reduce( (acc, [x0, y0], i, arr) => { const [x1, y1] = arr[(i + 1) % arr.length]; acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2); return acc; }, ["M", ...stroke[0], "Q"] ); d.push("Z"); return d.join(" "); } function updatePath(strokeElement, strokeData) { strokeElement.setAttribute( "d", getSvgPathFromStroke( perfectFreehand.default(strokeData, { size: 9, smoothing: 0.99, thinning: 0.5, streamline: 0.99, start: { taper: 0, cap: true }, end: { taper: 0, cap: true }, last: true }) ) ); } }