@node-edit-utils/core 1.2.2

package/dist/node-edit-utils.umd.js

@@ -0,0 +1,594 @@
+/**
+ * Markup Canvas
+ * High-performance markup canvas with zoom and pan capabilities
+ * @version 1.2.2
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MarkupCanvas = {}));
+})(this, (function (exports) { 'use strict';
+
+    // biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
+    function withRAFThrottle(func) {
+        let rafId = null;
+        let lastArgs = null;
+        const throttled = (...args) => {
+            lastArgs = args;
+            if (rafId === null) {
+                rafId = requestAnimationFrame(() => {
+                    if (lastArgs) {
+                        func(...lastArgs);
+                    }
+                    rafId = null;
+                    lastArgs = null;
+                });
+            }
+        };
+        throttled.cleanup = () => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+                lastArgs = null;
+            }
+        };
+        return throttled;
+    }
+
+    const getCanvasWindowValue = (path) => {
+        // biome-ignore lint/suspicious/noExplicitAny: global window extension
+        const canvas = window.canvas;
+        return path.reduce((obj, prop) => obj?.[prop], canvas);
+    };
+
+    const applyCanvasState = () => {
+        const zoom = getCanvasWindowValue(["zoom", "current"]);
+        document.body.style.setProperty("--zoom", zoom.toFixed(5));
+        document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));
+        document.body.dataset.zoom = zoom.toFixed(5);
+        document.body.dataset.strokeWidth = (2 / zoom).toFixed(3);
+    };
+
+    function createCanvasObserver() {
+        const transformLayer = document.querySelector(".transform-layer");
+        if (!transformLayer) {
+            return {
+                disconnect: () => { },
+            };
+        }
+        const throttledUpdate = withRAFThrottle(() => {
+            applyCanvasState();
+        });
+        const observer = new MutationObserver(() => {
+            throttledUpdate();
+        });
+        observer.observe(transformLayer, {
+            attributes: true,
+            attributeOldValue: true,
+            subtree: true,
+            childList: true,
+        });
+        function disconnect() {
+            throttledUpdate.cleanup();
+            observer.disconnect();
+        }
+        return {
+            disconnect,
+        };
+    }
+
+    const connectResizeObserver = (element, handler) => {
+        const resizeObserver = new ResizeObserver((entries) => {
+            handler(entries);
+        });
+        resizeObserver.observe(element);
+        return resizeObserver;
+    };
+
+    function sendPostMessage(action, data) {
+        window.parent.postMessage({
+            source: "node-edit-utils",
+            action,
+            data,
+            timestamp: Date.now(),
+        }, "*");
+    }
+
+    const bindToWindow = (key, value) => {
+        if (typeof window !== "undefined") {
+            // biome-ignore lint/suspicious/noExplicitAny: global window extension requires flexibility
+            window[key] = value;
+        }
+    };
+
+    const handlePostMessage = (event) => {
+        if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
+            if (event.data.action === "zoom") {
+                const zoom = event.data.data;
+                console.log("zoom", zoom);
+            }
+        }
+    };
+
+    function getHighlightFrameElement(nodeProvider) {
+        return nodeProvider.querySelector(".highlight-frame");
+    }
+
+    const clearHighlightFrame = (nodeProvider) => {
+        if (!nodeProvider) {
+            return;
+        }
+        const highlightFrame = getHighlightFrameElement(nodeProvider);
+        if (highlightFrame) {
+            highlightFrame.remove();
+        }
+    };
+
+    const IGNORED_DOM_ELEMENTS = ["path", "rect", "circle", "ellipse", "polygon", "line", "polyline", "text", "text-noci"];
+
+    const getElementsFromPoint = (clickX, clickY) => {
+        const elements = document.elementsFromPoint(clickX, clickY);
+        return Array.from(elements).reduce((acc, el) => {
+            if (acc.found)
+                return acc;
+            if (el.getAttribute("data-role") === "node-provider") {
+                acc.found = true;
+                return acc;
+            }
+            acc.elements.push(el);
+            return acc;
+        }, { elements: [], found: false }).elements;
+    };
+
+    const targetSameCandidates = (cache, current) => cache.length === current.length && cache.every((el, i) => el === current[i]);
+
+    let candidateCache = [];
+    let attempt = 0;
+    const selectNode = (event, editableNode) => {
+        let selectedNode = null;
+        const clickX = event.clientX;
+        const clickY = event.clientY;
+        const clickThrough = event.metaKey || event.ctrlKey;
+        const candidates = getElementsFromPoint(clickX, clickY).filter((element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()));
+        if (editableNode && candidates.includes(editableNode)) {
+            return editableNode;
+        }
+        if (clickThrough) {
+            candidateCache = [];
+            selectedNode = candidates[0];
+            return selectedNode;
+        }
+        if (targetSameCandidates(candidateCache, candidates)) {
+            attempt <= candidates.length && attempt++;
+        }
+        else {
+            attempt = 0;
+        }
+        const nodeIndex = candidates.length - 1 - attempt;
+        selectedNode = candidates[nodeIndex];
+        candidateCache = candidates;
+        return selectedNode;
+    };
+
+    const handleNodeClick = (event, nodeProvider, editableNode, onNodeSelected) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (nodeProvider && !nodeProvider.contains(event.target)) {
+            clearHighlightFrame(nodeProvider);
+            onNodeSelected(null);
+            return;
+        }
+        const selectedNode = selectNode(event, editableNode);
+        onNodeSelected(selectedNode);
+    };
+
+    const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, getEditableNode) => {
+        const messageHandler = (event) => {
+            handlePostMessage(event);
+        };
+        const documentClickHandler = (event) => {
+            handleNodeClick(event, nodeProvider, getEditableNode(), onNodeSelected);
+        };
+        const documentKeydownHandler = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                onEscapePressed?.();
+            }
+        };
+        window.addEventListener("message", messageHandler);
+        document.addEventListener("click", documentClickHandler);
+        document.addEventListener("keydown", documentKeydownHandler);
+        return () => {
+            window.removeEventListener("message", messageHandler);
+            document.removeEventListener("click", documentClickHandler);
+            document.removeEventListener("keydown", documentKeydownHandler);
+        };
+    };
+
+    function getElementBounds(element, nodeProvider) {
+        const elementRect = element.getBoundingClientRect();
+        const componentRootRect = nodeProvider.getBoundingClientRect();
+        const relativeTop = elementRect.top - componentRootRect.top;
+        const relativeLeft = elementRect.left - componentRootRect.left;
+        const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+        const top = parseFloat((relativeTop / zoom).toFixed(5));
+        const left = parseFloat((relativeLeft / zoom).toFixed(5));
+        const width = Math.max(4, parseFloat((elementRect.width / zoom).toFixed(5)));
+        const height = parseFloat((elementRect.height / zoom).toFixed(5));
+        return {
+            top,
+            left,
+            width,
+            height,
+        };
+    }
+
+    const createHighlightFrame = (node, nodeProvider) => {
+        const { top, left, width, height } = getElementBounds(node, nodeProvider);
+        const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+        document.body.style.setProperty("--zoom", zoom.toString());
+        document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));
+        const frame = document.createElement("div");
+        frame.classList.add("highlight-frame");
+        frame.style.setProperty("--frame-top", `${top}px`);
+        frame.style.setProperty("--frame-left", `${left}px`);
+        frame.style.setProperty("--frame-width", `${width}px`);
+        frame.style.setProperty("--frame-height", `${height}px`);
+        // Create SVG overlay for outline
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.classList.add("highlight-frame-svg");
+        const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        rect.setAttribute("x", "0");
+        rect.setAttribute("y", "0");
+        rect.setAttribute("width", "100%");
+        rect.setAttribute("height", "100%");
+        rect.classList.add("highlight-frame-rect");
+        svg.appendChild(rect);
+        frame.appendChild(svg);
+        const highlightFrame = frame;
+        return highlightFrame;
+    };
+
+    const createTagLabel = (node, nodeTools) => {
+        const tagLabel = document.createElement("div");
+        tagLabel.className = "tag-label";
+        tagLabel.textContent = node.tagName.toLowerCase();
+        nodeTools.appendChild(tagLabel);
+    };
+
+    const createToolsContainer = (node, highlightFrame) => {
+        const nodeTools = document.createElement("div");
+        nodeTools.className = "node-tools";
+        highlightFrame.appendChild(nodeTools);
+        createTagLabel(node, nodeTools);
+    };
+
+    const highlightNode = (node, nodeProvider) => {
+        if (!node)
+            return;
+        const existingHighlightFrame = getHighlightFrameElement(nodeProvider);
+        if (existingHighlightFrame) {
+            existingHighlightFrame.remove();
+        }
+        const highlightFrame = createHighlightFrame(node, nodeProvider);
+        if (node.contentEditable === "true") {
+            highlightFrame.classList.add("is-editable");
+        }
+        createToolsContainer(node, highlightFrame);
+        nodeProvider.appendChild(highlightFrame);
+    };
+
+    const refreshHighlightFrame = (node, nodeProvider) => {
+        const frame = getHighlightFrameElement(nodeProvider);
+        const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+        if (!frame)
+            return;
+        if (zoom >= 0.3) {
+            nodeProvider.style.setProperty("--tool-opacity", `1`);
+        }
+        else {
+            nodeProvider.style.setProperty("--tool-opacity", `0`);
+        }
+        const { top, left, width, height } = getElementBounds(node, nodeProvider);
+        frame.style.setProperty("--frame-top", `${top}px`);
+        frame.style.setProperty("--frame-left", `${left}px`);
+        frame.style.setProperty("--frame-width", `${width}px`);
+        frame.style.setProperty("--frame-height", `${height}px`);
+    };
+
+    const disableCanvasKeyboard = () => {
+        const disable = getCanvasWindowValue(["keyboard", "disable"]);
+        disable?.();
+    };
+
+    const enableCanvasKeyboard = () => {
+        const enable = getCanvasWindowValue(["keyboard", "enable"]);
+        enable?.();
+    };
+
+    const insertLineBreak = () => {
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            range.deleteContents();
+            const br = document.createElement("br");
+            range.insertNode(br);
+            // Move cursor after the br
+            range.setStartAfter(br);
+            range.setEndAfter(br);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+    };
+
+    const setupKeydownHandler = (node) => {
+        const keydownHandler = (event) => {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                event.stopPropagation();
+                insertLineBreak();
+            }
+        };
+        node.addEventListener("keydown", keydownHandler);
+        return () => {
+            node.removeEventListener("keydown", keydownHandler);
+        };
+    };
+
+    const connectMutationObserver = (element, handler) => {
+        const mutationObserver = new MutationObserver((mutations) => {
+            handler(mutations);
+        });
+        mutationObserver.observe(element, {
+            subtree: true,
+            childList: true,
+            characterData: true,
+        });
+        return mutationObserver;
+    };
+
+    const setupMutationObserver = (node, nodeProvider) => {
+        const mutationObserver = connectMutationObserver(node, () => {
+            refreshHighlightFrame(node, nodeProvider);
+        });
+        return mutationObserver.disconnect;
+    };
+
+    const setupNodeListeners = (node, nodeProvider, blur) => {
+        if (!nodeProvider) {
+            return () => { };
+        }
+        node.addEventListener("blur", blur);
+        const keydownCleanup = setupKeydownHandler(node);
+        const mutationCleanup = setupMutationObserver(node, nodeProvider);
+        return () => {
+            node.removeEventListener("blur", blur);
+            keydownCleanup();
+            mutationCleanup?.();
+        };
+    };
+
+    const hasTextContent = (node) => {
+        return Array.from(node.childNodes).some((child) => child.nodeType === Node.TEXT_NODE && child.textContent?.trim());
+    };
+
+    const makeNodeEditable = (node) => {
+        node.contentEditable = "true";
+        node.classList.add("is-editable");
+        node.style.outline = "none";
+    };
+
+    const makeNodeNonEditable = (node) => {
+        node.contentEditable = "false";
+        node.classList.remove("is-editable");
+        node.style.outline = "none";
+    };
+
+    const nodeText = () => {
+        let editableNode = null;
+        let blurInProgress = false;
+        let cleanup = null;
+        const enableEditMode = (node, nodeProvider) => {
+            if (editableNode === node) {
+                return;
+            }
+            if (editableNode && editableNode !== node) {
+                blurEditMode();
+            }
+            const editable = hasTextContent(node);
+            if (editable) {
+                editableNode = node;
+                makeNodeEditable(node);
+                disableCanvasKeyboard();
+                cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
+            }
+        };
+        const getEditableNode = () => {
+            return editableNode;
+        };
+        const isEditing = () => {
+            return editableNode !== null;
+        };
+        const blurEditMode = () => {
+            if (blurInProgress || !editableNode) {
+                return;
+            }
+            blurInProgress = true;
+            const nodeToCleanup = editableNode;
+            makeNodeNonEditable(nodeToCleanup);
+            enableCanvasKeyboard();
+            cleanup?.();
+            editableNode = null;
+            blurInProgress = false;
+        };
+        return {
+            enableEditMode,
+            blurEditMode,
+            getEditableNode,
+            isEditing,
+        };
+    };
+
+    const createNodeTools = (element) => {
+        const nodeProvider = element;
+        let resizeObserver = null;
+        let selectedNode = null;
+        const text = nodeText();
+        const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
+        const handleEscape = () => {
+            if (text.isEditing()) {
+                text.blurEditMode();
+            }
+            if (selectedNode) {
+                if (nodeProvider) {
+                    clearHighlightFrame(nodeProvider);
+                    selectedNode = null;
+                    resizeObserver?.disconnect();
+                }
+            }
+        };
+        const selectNode = (node) => {
+            if (text.isEditing()) {
+                const currentEditable = text.getEditableNode();
+                if (currentEditable && currentEditable !== node) {
+                    text.blurEditMode();
+                }
+            }
+            resizeObserver?.disconnect();
+            if (node && nodeProvider) {
+                text.enableEditMode(node, nodeProvider);
+                resizeObserver = connectResizeObserver(nodeProvider, () => {
+                    throttledFrameRefresh(node, nodeProvider);
+                });
+            }
+            selectedNode = node;
+            sendPostMessage("selectedNodeChanged", node?.getAttribute("data-layer-id") ?? null);
+            highlightNode(node, nodeProvider) ?? null;
+        };
+        // Setup event listener
+        const removeListeners = setupEventListener$1(nodeProvider, selectNode, handleEscape, text.getEditableNode);
+        const cleanup = () => {
+            removeListeners();
+            resizeObserver?.disconnect();
+            text.blurEditMode();
+            throttledFrameRefresh.cleanup();
+        };
+        const nodeTools = {
+            selectNode,
+            getSelectedNode: () => selectedNode,
+            refreshHighlightFrame: () => {
+                throttledFrameRefresh(selectedNode, nodeProvider);
+            },
+            clearSelectedNode: () => {
+                clearHighlightFrame(nodeProvider);
+                selectedNode = null;
+                resizeObserver?.disconnect();
+            },
+            getEditableNode: () => text.getEditableNode(),
+            cleanup,
+        };
+        bindToWindow("nodeTools", nodeTools);
+        return nodeTools;
+    };
+
+    const getCanvasContainer = () => {
+        return document.querySelector(".canvas-container");
+    };
+
+    const DEFAULT_WIDTH = 400;
+    const RESIZE_CONFIG = {
+        minWidth: 320,
+        maxWidth: 1680,
+    };
+
+    const setupEventListener = (resizeHandle, startResize, handleResize, stopResize, blurResize) => {
+        resizeHandle.addEventListener("mousedown", startResize);
+        document.addEventListener("mousemove", handleResize);
+        document.addEventListener("mouseup", stopResize);
+        window.addEventListener("blur", blurResize);
+        return () => {
+            resizeHandle.removeEventListener("mousedown", startResize);
+            document.removeEventListener("mousemove", handleResize);
+            document.removeEventListener("mouseup", stopResize);
+            window.removeEventListener("blur", blurResize);
+        };
+    };
+
+    const createResizeHandle = (container) => {
+        const handle = document.createElement("div");
+        handle.className = "component-resize-handle resize-handle";
+        container.appendChild(handle);
+        return handle;
+    };
+
+    const calcConstrainedWidth = (startWidth, deltaX) => {
+        const newWidth = startWidth + Math.round(deltaX);
+        return Math.max(RESIZE_CONFIG.minWidth, Math.min(RESIZE_CONFIG.maxWidth, newWidth));
+    };
+
+    const calcWidth = (event, startX, startWidth) => {
+        const zoom = parseFloat(document.body.dataset.zoom || "1");
+        const deltaX = (event.clientX - startX) / zoom;
+        const width = calcConstrainedWidth(startWidth, deltaX);
+        return width;
+    };
+
+    const updateWidth = (container, width) => {
+        container.style.setProperty("--container-width", `${width}px`);
+    };
+
+    const createViewport = (container) => {
+        const canvas = getCanvasContainer();
+        const resizeHandle = createResizeHandle(container);
+        container.style.setProperty("--container-width", `${DEFAULT_WIDTH}px`);
+        let isDragging = false;
+        let startX = 0;
+        let startWidth = 0;
+        const startResize = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            isDragging = true;
+            startX = event.clientX;
+            startWidth = container.offsetWidth;
+        };
+        const handleResize = (event) => {
+            if (!isDragging)
+                return;
+            if (canvas) {
+                canvas.style.cursor = "ew-resize";
+            }
+            const width = calcWidth(event, startX, startWidth);
+            updateWidth(container, width);
+        };
+        const throttledHandleResize = withRAFThrottle(handleResize);
+        const stopResize = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (canvas) {
+                canvas.style.cursor = "default";
+            }
+            isDragging = false;
+        };
+        const blurResize = () => {
+            isDragging = false;
+        };
+        const removeListeners = setupEventListener(resizeHandle, startResize, throttledHandleResize, stopResize, blurResize);
+        const cleanup = () => {
+            isDragging = false;
+            throttledHandleResize?.cleanup();
+            removeListeners();
+        };
+        return {
+            setWidth: (width) => {
+                updateWidth(container, width);
+            },
+            cleanup,
+        };
+    };
+
+    exports.createCanvasObserver = createCanvasObserver;
+    exports.createNodeTools = createNodeTools;
+    exports.createViewport = createViewport;
+
+}));

package/dist/node-edit-utils.umd.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).MarkupCanvas={})}(this,function(e){"use strict";function t(e){let t=null,n=null;const o=(...o)=>{n=o,null===t&&(t=requestAnimationFrame(()=>{n&&e(...n),t=null,n=null}))};return o.cleanup=()=>{null!==t&&(cancelAnimationFrame(t),t=null,n=null)},o}const n=e=>{const t=window.canvas;return e.reduce((e,t)=>e?.[t],t)};function o(e){return e.querySelector(".highlight-frame")}const r=e=>{if(!e)return;const t=o(e);t&&t.remove()},s=["path","rect","circle","ellipse","polygon","line","polyline","text","text-noci"];let i=[],d=0;const a=(e,t)=>{let n=null;const o=e.clientX,r=e.clientY,a=e.metaKey||e.ctrlKey,l=((e,t)=>{const n=document.elementsFromPoint(e,t);return Array.from(n).reduce((e,t)=>e.found?e:"node-provider"===t.getAttribute("data-role")?(e.found=!0,e):(e.elements.push(t),e),{elements:[],found:!1}).elements})(o,r).filter(e=>!s.includes(e.tagName.toLowerCase()));if(t&&l.includes(t))return t;if(a)return i=[],n=l[0],n;var c,u;u=l,(c=i).length===u.length&&c.every((e,t)=>e===u[t])?d<=l.length&&d++:d=0;return n=l[l.length-1-d],i=l,n},l=(e,t,n,o)=>{const s=e=>{(e=>{if("markup-canvas"===e.data.source&&"canvas"===e.data.canvasName&&"zoom"===e.data.action){const t=e.data.data;console.log("zoom",t)}})(e)},i=n=>{((e,t,n,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return r(t),void o(null);o(a(e,n))})(n,e,o(),t)},d=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",s),document.addEventListener("click",i),document.addEventListener("keydown",d),()=>{window.removeEventListener("message",s),document.removeEventListener("click",i),document.removeEventListener("keydown",d)}};function c(e,t){const o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=o.top-r.top,i=o.left-r.left,d=n(["zoom","current"])??1;return{top:parseFloat((s/d).toFixed(5)),left:parseFloat((i/d).toFixed(5)),width:Math.max(4,parseFloat((o.width/d).toFixed(5))),height:parseFloat((o.height/d).toFixed(5))}}const u=(e,t)=>{const n=document.createElement("div");n.className="node-tools",t.appendChild(n),((e,t)=>{const n=document.createElement("div");n.className="tag-label",n.textContent=e.tagName.toLowerCase(),t.appendChild(n)})(e,n)},m=(e,t)=>{if(!e)return;const r=o(t);r&&r.remove();const s=((e,t)=>{const{top:o,left:r,width:s,height:i}=c(e,t),d=n(["zoom","current"])??1;document.body.style.setProperty("--zoom",d.toString()),document.body.style.setProperty("--stroke-width",(2/d).toFixed(3));const a=document.createElement("div");a.classList.add("highlight-frame"),a.style.setProperty("--frame-top",`${o}px`),a.style.setProperty("--frame-left",`${r}px`),a.style.setProperty("--frame-width",`${s}px`),a.style.setProperty("--frame-height",`${i}px`);const l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.classList.add("highlight-frame-svg");const u=document.createElementNS("http://www.w3.org/2000/svg","rect");return u.setAttribute("x","0"),u.setAttribute("y","0"),u.setAttribute("width","100%"),u.setAttribute("height","100%"),u.classList.add("highlight-frame-rect"),l.appendChild(u),a.appendChild(l),a})(e,t);"true"===e.contentEditable&&s.classList.add("is-editable"),u(e,s),t.appendChild(s)},p=(e,t)=>{const r=o(t),s=n(["zoom","current"])??1;if(!r)return;s>=.3?t.style.setProperty("--tool-opacity","1"):t.style.setProperty("--tool-opacity","0");const{top:i,left:d,width:a,height:l}=c(e,t);r.style.setProperty("--frame-top",`${i}px`),r.style.setProperty("--frame-left",`${d}px`),r.style.setProperty("--frame-width",`${a}px`),r.style.setProperty("--frame-height",`${l}px`)},f=e=>{const t=e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),(()=>{const e=window.getSelection();if(e&&e.rangeCount>0){const t=e.getRangeAt(0);t.deleteContents();const n=document.createElement("br");t.insertNode(n),t.setStartAfter(n),t.setEndAfter(n),e.removeAllRanges(),e.addRange(t)}})())};return e.addEventListener("keydown",t),()=>{e.removeEventListener("keydown",t)}},y=(e,t)=>((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,()=>{p(e,t)}).disconnect,h=()=>{let e=null,t=!1,o=null;const r=()=>{if(t||!e)return;t=!0;var r;(r=e).contentEditable="false",r.classList.remove("is-editable"),r.style.outline="none",(()=>{const e=n(["keyboard","enable"]);e?.()})(),o?.(),e=null,t=!1};return{enableEditMode:(t,s)=>{if(e===t)return;e&&e!==t&&r();const i=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(t);i&&(e=t,(e=>{e.contentEditable="true",e.classList.add("is-editable"),e.style.outline="none"})(t),(()=>{const e=n(["keyboard","disable"]);e?.()})(),o=((e,t,n)=>{if(!t)return()=>{};e.addEventListener("blur",n);const o=f(e),r=y(e,t);return()=>{e.removeEventListener("blur",n),o(),r?.()}})(t,s,r))},blurEditMode:r,getEditableNode:()=>e,isEditing:()=>null!==e}},v=320,g=1680,b=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(v,Math.min(g,n))})(n,(e.clientX-t)/o);return r},w=(e,t)=>{e.style.setProperty("--container-width",`${t}px`)};e.createCanvasObserver=function(){const e=document.querySelector(".transform-layer");if(!e)return{disconnect:()=>{}};const o=t(()=>{(()=>{const e=n(["zoom","current"]);document.body.style.setProperty("--zoom",e.toFixed(5)),document.body.style.setProperty("--stroke-width",(2/e).toFixed(3)),document.body.dataset.zoom=e.toFixed(5),document.body.dataset.strokeWidth=(2/e).toFixed(3)})()}),r=new MutationObserver(()=>{o()});return r.observe(e,{attributes:!0,attributeOldValue:!0,subtree:!0,childList:!0}),{disconnect:function(){o.cleanup(),r.disconnect()}}},e.createNodeTools=e=>{const n=e;let o=null,s=null;const i=h(),d=t(p),a=e=>{if(i.isEditing()){const t=i.getEditableNode();t&&t!==e&&i.blurEditMode()}var t,r;o?.disconnect(),e&&n&&(i.enableEditMode(e,n),o=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(n,()=>{d(e,n)})),s=e,t="selectedNodeChanged",r=e?.getAttribute("data-layer-id")??null,window.parent.postMessage({source:"node-edit-utils",action:t,data:r,timestamp:Date.now()},"*"),m(e,n)},c=l(n,a,()=>{i.isEditing()&&i.blurEditMode(),s&&n&&(r(n),s=null,o?.disconnect())},i.getEditableNode),u={selectNode:a,getSelectedNode:()=>s,refreshHighlightFrame:()=>{d(s,n)},clearSelectedNode:()=>{r(n),s=null,o?.disconnect()},getEditableNode:()=>i.getEditableNode(),cleanup:()=>{c(),o?.disconnect(),i.blurEditMode(),d.cleanup()}};var f,y;return f="nodeTools",y=u,"undefined"!=typeof window&&(window[f]=y),u},e.createViewport=e=>{const n=document.querySelector(".canvas-container"),o=(e=>{const t=document.createElement("div");return t.className="component-resize-handle resize-handle",e.appendChild(t),t})(e);e.style.setProperty("--container-width","400px");let r=!1,s=0,i=0;const d=t(t=>{if(!r)return;n&&(n.style.cursor="ew-resize");const o=b(t,s,i);w(e,o)}),a=((e,t,n,o,r)=>(e.addEventListener("mousedown",t),document.addEventListener("mousemove",n),document.addEventListener("mouseup",o),window.addEventListener("blur",r),()=>{e.removeEventListener("mousedown",t),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),window.removeEventListener("blur",r)}))(o,t=>{t.preventDefault(),t.stopPropagation(),r=!0,s=t.clientX,i=e.offsetWidth},d,e=>{e.preventDefault(),e.stopPropagation(),n&&(n.style.cursor="default"),r=!1},()=>{r=!1});return{setWidth:t=>{w(e,t)},cleanup:()=>{r=!1,d?.cleanup(),a()}}}});

package/dist/styles.css

@@ -0,0 +1 @@
+.node-provider{::selection{background:transparent}::-moz-selection{background:transparent}::-webkit-selection{background:transparent}}.node-tools{bottom:0;display:flex;gap:.25rem;justify-content:center;left:0;opacity:var(--tool-opacity);padding-top:.25rem;position:absolute;transform:scale(calc(1/var(--zoom))) translate3d(0,100%,0);transform-origin:bottom left;transition:transform 25ms ease,opacity .1s ease;z-index:10000}.highlight-frame{height:var(--frame-height);left:var(--frame-left);pointer-events:none;position:absolute;top:var(--frame-top);width:var(--frame-width);z-index:1000}.highlight-frame-svg{height:100%;left:0;overflow:visible;position:absolute;top:0;width:100%}.highlight-frame-rect{fill:none;stroke:oklch(62.7% .265 303.9);stroke-width:var(--stroke-width)}.tag-label{align-items:center;background-color:oklch(62.7% .265 303.9);border-radius:.375rem;color:#fff;display:flex;font-size:.575rem;font-weight:500;height:1.25rem;justify-content:center;line-height:1;padding:0 .375rem;text-transform:uppercase}.viewport{position:relative;width:var(--container-width)}.resize-handle{align-items:center;cursor:ew-resize;display:flex;height:40px;justify-content:center;opacity:0;pointer-events:auto;position:absolute;right:-12px;top:1.25rem;transform:scale(calc(1/var(--zoom)));transform-origin:top left;transition:transform 25ms ease,opacity .2s ease-in-out;width:12px;z-index:10000}.viewport:hover .resize-handle{opacity:1}.resize-handle:before{background:oklch(55.2% .016 285.938);border-radius:4px;content:"";height:32px;position:relative;right:0;top:0;transition:transform .2s ease-in-out;width:3px}.resize-handle:hover:before{transform:scaleY(1.3)}.is-editable{outline:none;user-select:text;&::selection{background:oklch(62.7% .265 303.9/.3)}&::-moz-selection{background:oklch(62.7% .265 303.9/.3)}&::-webkit-selection{background:oklch(62.7% .265 303.9/.3)}}

package/dist/umd.d.ts

@@ -0,0 +1 @@
+export * from "./index";

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@node-edit-utils/core",
+  "version": "1.2.2",
+  "description": "Utilities for editing nodes in a dom tree.",
+  "type": "module",
+  "main": "dist/node-edit-utils.cjs.js",
+  "module": "dist/node-edit-utils.esm.js",
+  "browser": "dist/node-edit-utils.umd.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/node-edit-utils.esm.js",
+      "require": "./dist/node-edit-utils.cjs.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "clean": "rm -rf dist",
+    "lint": "biome check .",
+    "format": "biome format --write .",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "keywords": [
+    "zoom",
+    "pan",
+    "canvas",
+    "transform",
+    "interactive",
+    "html",
+    "dom"
+  ],
+  "author": "Fritz Benning <mail@fritzbenning.de>",
+  "license": "CC-BY-NC-4.0",
+  "devDependencies": {
+    "@biomejs/biome": "2.3.0",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.9",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "glob": "^11.0.3",
+    "rollup": "^4.52.5",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.8.1",
+    "ttypescript": "^1.5.15",
+    "typescript": "^5.9.3",
+    "typescript-transform-paths": "^3.5.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fritzbenning/node-edit-utils"
+  },
+  "bugs": {
+    "url": "https://github.com/fritzbenning/node-edit-utils/issues"
+  },
+  "homepage": "https://github.com/fritzbenning/node-edit-utils#readme"
+}