@node-edit-utils/core 1.2.2

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

@@ -0,0 +1,588 @@
+/**
+ * Markup Canvas
+ * High-performance markup canvas with zoom and pan capabilities
+ * @version 1.2.2
+ */
+'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;