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; }