28:null 29:["$","title",null,{"children":"Draggable Face Input | Mike Stringer | Observable"}] 2e:T288a,function faceInput({ size = 250, strokeWidth = 2, include = new Set(["leftEye", "rightEye", "nose", "mouth"]) } = {}) { const viewBoxSize = 250; // coordinates in SVG are hard-coded assuming a viewBoxSize of 250 let svgParts = ``; } const root = svg`${svgParts}`; let initialValue = { leftEye: { x: 45, y: 70 }, rightEye: { x: 135, y: 70 }, nose: { x: 90, y: 115 }, mouth: { x: 90, y: 170 }, leftEar: { x: 0, y: 115 }, rightEar: { x: 180, y: 115 }, leftBrow: { x: 20, y: 35 }, rightBrow: { x: 120, y: 35 } }; [...Object.entries(initialValue)].forEach(function ([key, value]) { if (!include.has(key)) { delete initialValue[key]; } }); root.value = Object.assign({}, initialValue); const draggableElements = root.querySelectorAll(".drag"); draggableElements.forEach((element) => { const id = element.getAttribute("id"); setValue(element, id, initialValue[id].x, initialValue[id].y); }); function setValue(element, id, x, y) { setTransform(element, "translate", x, y); root.value[id] = { x: (x - initialValue[id].x) / viewBoxSize, y: (y - initialValue[id].y) / viewBoxSize }; root.dispatchEvent(new CustomEvent("input")); } function getMousePosition(evt) { const CTM = root.getScreenCTM(); let x, y; if (evt.touches) { x = evt.touches[0].clientX; y = evt.touches[0].clientY; } else { x = evt.clientX; y = evt.clientY; } return { x: (x - CTM.e) / CTM.a, y: (y - CTM.f) / CTM.d }; } function getTransformCoordinates(element) { const transform = element.getAttribute("transform"); if (!transform) return { x: 0, y: 0 }; const match = transform.match(/translate$([^,]+),([^)]+)$/); if (match) { return { x: parseFloat(match[1]), y: parseFloat(match[2]) }; } return { x: 0, y: 0 }; } function setTransform(element, type, ...values) { const currentTransform = element.getAttribute("transform") || ""; const newTransformValue = `${type}(${values.join(",")})`; // If no transform exists, just set the new transform if (!currentTransform) { element.setAttribute("transform", newTransformValue); return; } // Replace existing transform of same type or append new one const regex = new RegExp(`${type}\$[^)]*\$`); const newTransform = regex.test(currentTransform) ? currentTransform.replace(regex, newTransformValue) : `${currentTransform} ${newTransformValue}`; element.setAttribute("transform", newTransform); } function handleDrag(element) { let isDragging = false; let offset = { x: 0, y: 0 }; let id = element.getAttribute("id"); function onMove(evt) { if (!isDragging) return; evt.preventDefault(); const mousePos = getMousePosition(evt); const newX = mousePos.x - offset.x; const newY = mousePos.y - offset.y; setValue(element, id, newX, newY); } function onEnd() { if (!isDragging) return; isDragging = false; element.classList.remove("active"); root.removeEventListener("mousemove", onMove); root.removeEventListener("mouseup", onEnd); root.removeEventListener("touchmove", onMove); root.removeEventListener("touchend", onEnd); root.removeEventListener("touchcancel", onEnd); } function onStart(evt) { if (evt.type === "mousedown" && evt.button !== 0) return; if (evt.type === "touchstart" && evt.touches.length !== 1) return; isDragging = true; evt.preventDefault(); element.classList.add("active"); const mousePos = getMousePosition(evt); const currentPos = getTransformCoordinates(element); offset.x = mousePos.x - currentPos.x; offset.y = mousePos.y - currentPos.y; root.addEventListener("mousemove", onMove); root.addEventListener("mouseup", onEnd); root.addEventListener("touchmove", onMove, { passive: false }); root.addEventListener("touchend", onEnd); root.addEventListener("touchcancel", onEnd); } element.addEventListener("mousedown", onStart); element.addEventListener("touchstart", onStart, { passive: false }); } draggableElements.forEach(handleDrag); return root; }2f:[] 2c:{"id":"7b6674fbe984c2de","slug":"face-input","title":"Draggable Face Input","thumbnail":"417239efc1ad08cb2ca6b5f45cafc3fe592549b78651d0d0a56ce4cc3328519a","access_level":"public","create_time":"$D2024-10-30T17:45:32.440Z","update_time":"$D2024-11-05T07:58:08.509Z","view_time":null,"first_public_time":"$D2024-10-30T17:59:41.213Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"03c047a4f7c01c7d","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":"starter_2024"},"version":430,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"845474becb001208","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":null}],"members":[{"type":"team","id":"03c047a4f7c01c7d","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":"starter_2024","role":"editor"},{"type":"individual","id":"845474becb001208","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2bb4c46ad0cb53b1","slug":"faces","title":"Faces","owner":{"id":"03c047a4f7c01c7d","login":"stringertheory","name":"Mike Stringer"}},"type":"notebook","body":{"title":"Draggable Face Input","cells":[{"id":0,"value":"# Draggable Face Input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"viewof faceLocations = faceInput({\n size: 350,\n strokeWidth: 3,\n include: new Set([\"leftEye\", \"rightEye\", \"nose\", \"mouth\"])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"faceLocations","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$${Object.entries(faceLocations).map(([name, xy]) => html`${name}: (${xy.x},${xy.y})
`)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"