@node-edit-utils/core 2.0.5 → 2.0.7

package/dist/lib/canvas/disableCanvasTextMode.d.ts

@@ -0,0 +1 @@
+export declare const disableCanvasTextMode: () => void;

package/dist/lib/canvas/enableCanvasTextMode.d.ts

@@ -0,0 +1 @@
+export declare const enableCanvasTextMode: () => void;

package/dist/lib/node-tools/highlight/updateHighlightFrameVisibility.d.ts

@@ -0,0 +1 @@
+export declare const updateHighlightFrameVisibility: (node: HTMLElement, nodeProvider: HTMLElement) => void;

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.0.5
+ * @version 2.0.7
  */
 'use strict';
 
@@ -100,17 +100,14 @@ const bindToWindow = (key, value) => {
 const processPostMessage = (event, onNodeSelected) => {
     if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
         if (event.data.action === "zoom") {
-            const zoom = event.data.data;
-            console.log("zoom", zoom);
+            event.data.data;
         }
     }
     if (event.data.source === "application") {
         if (event.data.action === "selectedNodeChanged") {
             const nodeId = event.data.data;
-            console.log("selectedNodeChanged in node-edit-utils", nodeId);
             const selectedNode = document.querySelector(`[data-node-id="${nodeId}"]`);
             if (selectedNode) {
-                console.log("selectedNode", selectedNode);
                 onNodeSelected?.(selectedNode);
             }
         }
@@ -156,7 +153,7 @@ const selectNode = (event, editableNode) => {
     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()));
+    const candidates = getElementsFromPoint(clickX, clickY).filter((element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) && !element.classList.contains("select-none"));
     if (editableNode && candidates.includes(editableNode)) {
         return editableNode;
     }
@@ -197,9 +194,8 @@ const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, get
         handleNodeClick(event, nodeProvider, getEditableNode(), onNodeSelected);
     };
     const documentKeydownHandler = (event) => {
+        console.log("Esacpe Handler", event);
         if (event.key === "Escape") {
-            event.preventDefault();
-            event.stopPropagation();
             onEscapePressed?.();
         }
     };
@@ -304,14 +300,22 @@ const refreshHighlightFrame = (node, nodeProvider) => {
     frame.style.setProperty("--frame-height", `${height}px`);
 };
 
-const disableCanvasKeyboard = () => {
-    const disable = getCanvasWindowValue(["keyboard", "disable"]);
-    disable?.();
+const updateHighlightFrameVisibility = (node, nodeProvider) => {
+    const frame = getHighlightFrameElement(nodeProvider);
+    if (!frame)
+        return;
+    const hasHiddenClass = node.classList.contains("hidden") || node.classList.contains("select-none");
+    frame.style.display = hasHiddenClass ? "none" : "";
+};
+
+const disableCanvasTextMode = () => {
+    const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
+    disableTextEditMode?.();
 };
 
-const enableCanvasKeyboard = () => {
-    const enable = getCanvasWindowValue(["keyboard", "enable"]);
-    enable?.();
+const enableCanvasTextMode = () => {
+    const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
+    enableTextEditMode?.();
 };
 
 const insertLineBreak = () => {
@@ -407,7 +411,7 @@ const nodeText = () => {
         if (editable) {
             editableNode = node;
             makeNodeEditable(node);
-            disableCanvasKeyboard();
+            enableCanvasTextMode();
             cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
         }
     };
@@ -424,7 +428,7 @@ const nodeText = () => {
         blurInProgress = true;
         const nodeToCleanup = editableNode;
         makeNodeNonEditable(nodeToCleanup);
-        enableCanvasKeyboard();
+        disableCanvasTextMode();
         cleanup?.();
         editableNode = null;
         blurInProgress = false;
@@ -440,6 +444,7 @@ const nodeText = () => {
 const createNodeTools = (element) => {
     const nodeProvider = element;
     let resizeObserver = null;
+    let mutationObserver = null;
     let selectedNode = null;
     const text = nodeText();
     const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
@@ -452,10 +457,14 @@ const createNodeTools = (element) => {
                 clearHighlightFrame(nodeProvider);
                 selectedNode = null;
                 resizeObserver?.disconnect();
+                mutationObserver?.disconnect();
             }
         }
     };
     const selectNode = (node) => {
+        if (selectedNode === node) {
+            return;
+        }
         if (text.isEditing()) {
             const currentEditable = text.getEditableNode();
             if (currentEditable && currentEditable !== node) {
@@ -463,21 +472,34 @@ const createNodeTools = (element) => {
             }
         }
         resizeObserver?.disconnect();
+        mutationObserver?.disconnect();
         if (node && nodeProvider) {
             text.enableEditMode(node, nodeProvider);
             resizeObserver = connectResizeObserver(nodeProvider, () => {
                 throttledFrameRefresh(node, nodeProvider);
             });
+            mutationObserver = new MutationObserver(() => {
+                throttledFrameRefresh(node, nodeProvider);
+                updateHighlightFrameVisibility(node, nodeProvider);
+            });
+            mutationObserver.observe(node, {
+                attributes: true,
+                attributeFilter: ["class"],
+            });
         }
         selectedNode = node;
         sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
         highlightNode(node, nodeProvider) ?? null;
+        if (node && nodeProvider) {
+            updateHighlightFrameVisibility(node, nodeProvider);
+        }
     };
     // Setup event listener
     const removeListeners = setupEventListener$1(nodeProvider, selectNode, handleEscape, text.getEditableNode);
     const cleanup = () => {
         removeListeners();
         resizeObserver?.disconnect();
+        mutationObserver?.disconnect();
         text.blurEditMode();
         throttledFrameRefresh.cleanup();
     };
@@ -491,6 +513,7 @@ const createNodeTools = (element) => {
             clearHighlightFrame(nodeProvider);
             selectedNode = null;
             resizeObserver?.disconnect();
+            mutationObserver?.disconnect();
         },
         getEditableNode: () => text.getEditableNode(),
         cleanup,
@@ -585,9 +608,7 @@ const calcWidth = (event, startX, startWidth) => {
 };
 
 const updateActivePreset = (container, width) => {
-    console.log("updateActivePreset", width);
     const presetButtons = container.querySelectorAll(".resize-preset-button");
-    console.log("presetButtons", presetButtons);
     presetButtons.forEach((button, index) => {
         if (index < RESIZE_PRESETS.length) {
             const preset = RESIZE_PRESETS[index];

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.0.5
+ * @version 2.0.7
  */
 // biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
 function withRAFThrottle(func) {
@@ -98,17 +98,14 @@ const bindToWindow = (key, value) => {
 const processPostMessage = (event, onNodeSelected) => {
     if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
         if (event.data.action === "zoom") {
-            const zoom = event.data.data;
-            console.log("zoom", zoom);
+            event.data.data;
         }
     }
     if (event.data.source === "application") {
         if (event.data.action === "selectedNodeChanged") {
             const nodeId = event.data.data;
-            console.log("selectedNodeChanged in node-edit-utils", nodeId);
             const selectedNode = document.querySelector(`[data-node-id="${nodeId}"]`);
             if (selectedNode) {
-                console.log("selectedNode", selectedNode);
                 onNodeSelected?.(selectedNode);
             }
         }
@@ -154,7 +151,7 @@ const selectNode = (event, editableNode) => {
     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()));
+    const candidates = getElementsFromPoint(clickX, clickY).filter((element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) && !element.classList.contains("select-none"));
     if (editableNode && candidates.includes(editableNode)) {
         return editableNode;
     }
@@ -195,9 +192,8 @@ const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, get
         handleNodeClick(event, nodeProvider, getEditableNode(), onNodeSelected);
     };
     const documentKeydownHandler = (event) => {
+        console.log("Esacpe Handler", event);
         if (event.key === "Escape") {
-            event.preventDefault();
-            event.stopPropagation();
             onEscapePressed?.();
         }
     };
@@ -302,14 +298,22 @@ const refreshHighlightFrame = (node, nodeProvider) => {
     frame.style.setProperty("--frame-height", `${height}px`);
 };
 
-const disableCanvasKeyboard = () => {
-    const disable = getCanvasWindowValue(["keyboard", "disable"]);
-    disable?.();
+const updateHighlightFrameVisibility = (node, nodeProvider) => {
+    const frame = getHighlightFrameElement(nodeProvider);
+    if (!frame)
+        return;
+    const hasHiddenClass = node.classList.contains("hidden") || node.classList.contains("select-none");
+    frame.style.display = hasHiddenClass ? "none" : "";
+};
+
+const disableCanvasTextMode = () => {
+    const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
+    disableTextEditMode?.();
 };
 
-const enableCanvasKeyboard = () => {
-    const enable = getCanvasWindowValue(["keyboard", "enable"]);
-    enable?.();
+const enableCanvasTextMode = () => {
+    const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
+    enableTextEditMode?.();
 };
 
 const insertLineBreak = () => {
@@ -405,7 +409,7 @@ const nodeText = () => {
         if (editable) {
             editableNode = node;
             makeNodeEditable(node);
-            disableCanvasKeyboard();
+            enableCanvasTextMode();
             cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
         }
     };
@@ -422,7 +426,7 @@ const nodeText = () => {
         blurInProgress = true;
         const nodeToCleanup = editableNode;
         makeNodeNonEditable(nodeToCleanup);
-        enableCanvasKeyboard();
+        disableCanvasTextMode();
         cleanup?.();
         editableNode = null;
         blurInProgress = false;
@@ -438,6 +442,7 @@ const nodeText = () => {
 const createNodeTools = (element) => {
     const nodeProvider = element;
     let resizeObserver = null;
+    let mutationObserver = null;
     let selectedNode = null;
     const text = nodeText();
     const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
@@ -450,10 +455,14 @@ const createNodeTools = (element) => {
                 clearHighlightFrame(nodeProvider);
                 selectedNode = null;
                 resizeObserver?.disconnect();
+                mutationObserver?.disconnect();
             }
         }
     };
     const selectNode = (node) => {
+        if (selectedNode === node) {
+            return;
+        }
         if (text.isEditing()) {
             const currentEditable = text.getEditableNode();
             if (currentEditable && currentEditable !== node) {
@@ -461,21 +470,34 @@ const createNodeTools = (element) => {
             }
         }
         resizeObserver?.disconnect();
+        mutationObserver?.disconnect();
         if (node && nodeProvider) {
             text.enableEditMode(node, nodeProvider);
             resizeObserver = connectResizeObserver(nodeProvider, () => {
                 throttledFrameRefresh(node, nodeProvider);
             });
+            mutationObserver = new MutationObserver(() => {
+                throttledFrameRefresh(node, nodeProvider);
+                updateHighlightFrameVisibility(node, nodeProvider);
+            });
+            mutationObserver.observe(node, {
+                attributes: true,
+                attributeFilter: ["class"],
+            });
         }
         selectedNode = node;
         sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
         highlightNode(node, nodeProvider) ?? null;
+        if (node && nodeProvider) {
+            updateHighlightFrameVisibility(node, nodeProvider);
+        }
     };
     // Setup event listener
     const removeListeners = setupEventListener$1(nodeProvider, selectNode, handleEscape, text.getEditableNode);
     const cleanup = () => {
         removeListeners();
         resizeObserver?.disconnect();
+        mutationObserver?.disconnect();
         text.blurEditMode();
         throttledFrameRefresh.cleanup();
     };
@@ -489,6 +511,7 @@ const createNodeTools = (element) => {
             clearHighlightFrame(nodeProvider);
             selectedNode = null;
             resizeObserver?.disconnect();
+            mutationObserver?.disconnect();
         },
         getEditableNode: () => text.getEditableNode(),
         cleanup,
@@ -583,9 +606,7 @@ const calcWidth = (event, startX, startWidth) => {
 };
 
 const updateActivePreset = (container, width) => {
-    console.log("updateActivePreset", width);
     const presetButtons = container.querySelectorAll(".resize-preset-button");
-    console.log("presetButtons", presetButtons);
     presetButtons.forEach((button, index) => {
         if (index < RESIZE_PRESETS.length) {
             const preset = RESIZE_PRESETS[index];

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.0.5
+ * @version 2.0.7
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -104,17 +104,14 @@
     const processPostMessage = (event, onNodeSelected) => {
         if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
             if (event.data.action === "zoom") {
-                const zoom = event.data.data;
-                console.log("zoom", zoom);
+                event.data.data;
             }
         }
         if (event.data.source === "application") {
             if (event.data.action === "selectedNodeChanged") {
                 const nodeId = event.data.data;
-                console.log("selectedNodeChanged in node-edit-utils", nodeId);
                 const selectedNode = document.querySelector(`[data-node-id="${nodeId}"]`);
                 if (selectedNode) {
-                    console.log("selectedNode", selectedNode);
                     onNodeSelected?.(selectedNode);
                 }
             }
@@ -160,7 +157,7 @@
         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()));
+        const candidates = getElementsFromPoint(clickX, clickY).filter((element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) && !element.classList.contains("select-none"));
         if (editableNode && candidates.includes(editableNode)) {
             return editableNode;
         }
@@ -201,9 +198,8 @@
             handleNodeClick(event, nodeProvider, getEditableNode(), onNodeSelected);
         };
         const documentKeydownHandler = (event) => {
+            console.log("Esacpe Handler", event);
             if (event.key === "Escape") {
-                event.preventDefault();
-                event.stopPropagation();
                 onEscapePressed?.();
             }
         };
@@ -308,14 +304,22 @@
         frame.style.setProperty("--frame-height", `${height}px`);
     };
 
-    const disableCanvasKeyboard = () => {
-        const disable = getCanvasWindowValue(["keyboard", "disable"]);
-        disable?.();
+    const updateHighlightFrameVisibility = (node, nodeProvider) => {
+        const frame = getHighlightFrameElement(nodeProvider);
+        if (!frame)
+            return;
+        const hasHiddenClass = node.classList.contains("hidden") || node.classList.contains("select-none");
+        frame.style.display = hasHiddenClass ? "none" : "";
+    };
+
+    const disableCanvasTextMode = () => {
+        const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
+        disableTextEditMode?.();
     };
 
-    const enableCanvasKeyboard = () => {
-        const enable = getCanvasWindowValue(["keyboard", "enable"]);
-        enable?.();
+    const enableCanvasTextMode = () => {
+        const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
+        enableTextEditMode?.();
     };
 
     const insertLineBreak = () => {
@@ -411,7 +415,7 @@
             if (editable) {
                 editableNode = node;
                 makeNodeEditable(node);
-                disableCanvasKeyboard();
+                enableCanvasTextMode();
                 cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
             }
         };
@@ -428,7 +432,7 @@
             blurInProgress = true;
             const nodeToCleanup = editableNode;
             makeNodeNonEditable(nodeToCleanup);
-            enableCanvasKeyboard();
+            disableCanvasTextMode();
             cleanup?.();
             editableNode = null;
             blurInProgress = false;
@@ -444,6 +448,7 @@
     const createNodeTools = (element) => {
         const nodeProvider = element;
         let resizeObserver = null;
+        let mutationObserver = null;
         let selectedNode = null;
         const text = nodeText();
         const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
@@ -456,10 +461,14 @@
                     clearHighlightFrame(nodeProvider);
                     selectedNode = null;
                     resizeObserver?.disconnect();
+                    mutationObserver?.disconnect();
                 }
             }
         };
         const selectNode = (node) => {
+            if (selectedNode === node) {
+                return;
+            }
             if (text.isEditing()) {
                 const currentEditable = text.getEditableNode();
                 if (currentEditable && currentEditable !== node) {
@@ -467,21 +476,34 @@
                 }
             }
             resizeObserver?.disconnect();
+            mutationObserver?.disconnect();
             if (node && nodeProvider) {
                 text.enableEditMode(node, nodeProvider);
                 resizeObserver = connectResizeObserver(nodeProvider, () => {
                     throttledFrameRefresh(node, nodeProvider);
                 });
+                mutationObserver = new MutationObserver(() => {
+                    throttledFrameRefresh(node, nodeProvider);
+                    updateHighlightFrameVisibility(node, nodeProvider);
+                });
+                mutationObserver.observe(node, {
+                    attributes: true,
+                    attributeFilter: ["class"],
+                });
             }
             selectedNode = node;
             sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
             highlightNode(node, nodeProvider) ?? null;
+            if (node && nodeProvider) {
+                updateHighlightFrameVisibility(node, nodeProvider);
+            }
         };
         // Setup event listener
         const removeListeners = setupEventListener$1(nodeProvider, selectNode, handleEscape, text.getEditableNode);
         const cleanup = () => {
             removeListeners();
             resizeObserver?.disconnect();
+            mutationObserver?.disconnect();
             text.blurEditMode();
             throttledFrameRefresh.cleanup();
         };
@@ -495,6 +517,7 @@
                 clearHighlightFrame(nodeProvider);
                 selectedNode = null;
                 resizeObserver?.disconnect();
+                mutationObserver?.disconnect();
             },
             getEditableNode: () => text.getEditableNode(),
             cleanup,
@@ -589,9 +612,7 @@
     };
 
     const updateActivePreset = (container, width) => {
-        console.log("updateActivePreset", width);
         const presetButtons = container.querySelectorAll(".resize-preset-button");
-        console.log("presetButtons", presetButtons);
         presetButtons.forEach((button, index) => {
             if (index < RESIZE_PRESETS.length) {
                 const preset = RESIZE_PRESETS[index];

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

@@ -1 +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 a=[],d=0;const l=(e,t)=>{let n=null;const o=e.clientX,r=e.clientY,l=e.metaKey||e.ctrlKey,i=((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&&i.includes(t))return t;if(l)return a=[],n=i[0],n;var c,u;u=i,(c=a).length===u.length&&c.every((e,t)=>e===u[t])?d<=i.length&&d++:d=0;return n=i[i.length-1-d],a=i,n},i=(e,t,n,o)=>{const s=e=>{((e,t)=>{if("markup-canvas"===e.data.source&&"canvas"===e.data.canvasName&&"zoom"===e.data.action){const t=e.data.data;console.log("zoom",t)}if("application"===e.data.source&&"selectedNodeChanged"===e.data.action){const n=e.data.data;console.log("selectedNodeChanged in node-edit-utils",n);const o=document.querySelector(`[data-node-id="${n}"]`);o&&(console.log("selectedNode",o),t?.(o))}})(e,t)},a=n=>{((e,t,n,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return r(t),void o(null);o(l(e,n))})(n,e,o(),t)},d=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",s),document.addEventListener("click",a),document.addEventListener("keydown",d),()=>{window.removeEventListener("message",s),document.removeEventListener("click",a),document.removeEventListener("keydown",d)}};function c(e,t){const o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=o.top-r.top,a=o.left-r.left,d=n(["zoom","current"])??1;return{top:parseFloat((s/d).toFixed(5)),left:parseFloat((a/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:a}=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 l=document.createElement("div");l.classList.add("highlight-frame"),l.style.setProperty("--frame-top",`${o}px`),l.style.setProperty("--frame-left",`${r}px`),l.style.setProperty("--frame-width",`${s}px`),l.style.setProperty("--frame-height",`${a}px`);const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.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"),i.appendChild(u),l.appendChild(i),l})(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:a,left:d,width:l,height:i}=c(e,t);r.style.setProperty("--frame-top",`${a}px`),r.style.setProperty("--frame-left",`${d}px`),r.style.setProperty("--frame-width",`${l}px`),r.style.setProperty("--frame-height",`${i}px`)},v=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)}},h=(e,t)=>{const n=((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,()=>{p(e,t)});return()=>n.disconnect()},f=()=>{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 a=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(t);a&&(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=v(e),r=h(e,t);return()=>{e.removeEventListener("blur",n),o(),r?.()}})(t,s,r))},blurEditMode:r,getEditableNode:()=>e,isEditing:()=>null!==e}},y=320,g=1680,b=[{name:"Mobile",rawValue:390,value:"320px"},{name:"Tablet Portrait",rawValue:768,value:"768px"},{name:"Tablet Landscape",rawValue:1024,value:"1024px"},{name:"Notebook",rawValue:1280,value:"1280px"},{name:"Desktop",rawValue:1680,value:"1680px"}],w=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(y,Math.min(g,n))})(n,(e.clientX-t)/o);return r},E=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{console.log("updateActivePreset",t);const n=e.querySelectorAll(".resize-preset-button");console.log("presetButtons",n),n.forEach((e,n)=>{n<b.length&&(b[n].rawValue===t?e.classList.add("is-active"):e.classList.remove("is-active"))})})(e,t)};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 a=f(),d=t(p),l=e=>{if(a.isEditing()){const t=a.getEditableNode();t&&t!==e&&a.blurEditMode()}var t,r;o?.disconnect(),e&&n&&(a.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-node-id")??null,window.parent.postMessage({source:"node-edit-utils",action:t,data:r,timestamp:Date.now()},"*"),m(e,n)},c=i(n,l,()=>{a.isEditing()&&a.blurEditMode(),s&&n&&(r(n),s=null,o?.disconnect())},a.getEditableNode),u={selectNode:l,getSelectedNode:()=>s,refreshHighlightFrame:()=>{d(s,n)},clearSelectedNode:()=>{r(n),s=null,o?.disconnect()},getEditableNode:()=>a.getEditableNode(),cleanup:()=>{c(),o?.disconnect(),a.blurEditMode(),d.cleanup()}};var v,h;return v="nodeTools",h=u,"undefined"!=typeof window&&(window[v]=h),u},e.createViewport=e=>{const n=document.querySelector(".canvas-container"),o=e.querySelector(".resize-handle");o&&o.remove();const r=(e=>{const t=document.createElement("div");return t.className="resize-handle",e.appendChild(t),t})(e);e.style.setProperty("--container-width","400px"),((e,t,n)=>{const o=document.createElement("div");o.className="resize-presets",b.forEach(e=>{const r=document.createElement("button");r.textContent=e.name,r.className="resize-preset-button",r.addEventListener("click",()=>{n(t,e.rawValue)}),o.appendChild(r)}),e.appendChild(o)})(r,e,E);let s=!1,a=0,d=0;const l=t(t=>{if(!s)return;n&&(n.style.cursor="ew-resize");const o=w(t,a,d);E(e,o)}),i=((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)}))(r,t=>{t.preventDefault(),t.stopPropagation(),s=!0,a=t.clientX,d=e.offsetWidth},l,e=>{e.preventDefault(),e.stopPropagation(),n&&(n.style.cursor="default"),s=!1},()=>{s=!1});return{setWidth:t=>{E(e,t)},cleanup:()=>{s=!1,l?.cleanup(),i(),r.remove()}}}});
+!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 a=[],i=0;const d=(e,t)=>{let n=null;const o=e.clientX,r=e.clientY,d=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())&&!e.classList.contains("select-none"));if(t&&l.includes(t))return t;if(d)return a=[],n=l[0],n;var c,u;u=l,(c=a).length===u.length&&c.every((e,t)=>e===u[t])?i<=l.length&&i++:i=0;return n=l[l.length-1-i],a=l,n},l=(e,t,n,o)=>{const s=e=>{((e,t)=>{if("markup-canvas"===e.data.source&&"canvas"===e.data.canvasName&&"zoom"===e.data.action&&e.data.data,"application"===e.data.source&&"selectedNodeChanged"===e.data.action){const n=e.data.data,o=document.querySelector(`[data-node-id="${n}"]`);o&&t?.(o)}})(e,t)},a=n=>{((e,t,n,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return r(t),void o(null);o(d(e,n))})(n,e,o(),t)},i=e=>{console.log("Esacpe Handler",e),"Escape"===e.key&&n?.()};return window.addEventListener("message",s),document.addEventListener("click",a),document.addEventListener("keydown",i),()=>{window.removeEventListener("message",s),document.removeEventListener("click",a),document.removeEventListener("keydown",i)}};function c(e,t){const o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=o.top-r.top,a=o.left-r.left,i=n(["zoom","current"])??1;return{top:parseFloat((s/i).toFixed(5)),left:parseFloat((a/i).toFixed(5)),width:Math.max(4,parseFloat((o.width/i).toFixed(5))),height:parseFloat((o.height/i).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:a}=c(e,t),i=n(["zoom","current"])??1;document.body.style.setProperty("--zoom",i.toString()),document.body.style.setProperty("--stroke-width",(2/i).toFixed(3));const d=document.createElement("div");d.classList.add("highlight-frame"),d.style.setProperty("--frame-top",`${o}px`),d.style.setProperty("--frame-left",`${r}px`),d.style.setProperty("--frame-width",`${s}px`),d.style.setProperty("--frame-height",`${a}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),d.appendChild(l),d})(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:a,left:i,width:d,height:l}=c(e,t);r.style.setProperty("--frame-top",`${a}px`),r.style.setProperty("--frame-left",`${i}px`),r.style.setProperty("--frame-width",`${d}px`),r.style.setProperty("--frame-height",`${l}px`)},v=(e,t)=>{const n=o(t);if(!n)return;const r=e.classList.contains("hidden")||e.classList.contains("select-none");n.style.display=r?"none":""},h=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)=>{const n=((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,()=>{p(e,t)});return()=>n.disconnect()},f=()=>{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","disableTextEditMode"]);e?.()})(),o?.(),e=null,t=!1};return{enableEditMode:(t,s)=>{if(e===t)return;e&&e!==t&&r();const a=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(t);a&&(e=t,(e=>{e.contentEditable="true",e.classList.add("is-editable"),e.style.outline="none"})(t),(()=>{const e=n(["keyboard","enableTextEditMode"]);e?.()})(),o=((e,t,n)=>{if(!t)return()=>{};e.addEventListener("blur",n);const o=h(e),r=y(e,t);return()=>{e.removeEventListener("blur",n),o(),r?.()}})(t,s,r))},blurEditMode:r,getEditableNode:()=>e,isEditing:()=>null!==e}},g=320,b=1680,w=[{name:"Mobile",rawValue:390,value:"320px"},{name:"Tablet Portrait",rawValue:768,value:"768px"},{name:"Tablet Landscape",rawValue:1024,value:"1024px"},{name:"Notebook",rawValue:1280,value:"1280px"},{name:"Desktop",rawValue:1680,value:"1680px"}],E=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(g,Math.min(b,n))})(n,(e.clientX-t)/o);return r},x=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<w.length&&(w[n].rawValue===t?e.classList.add("is-active"):e.classList.remove("is-active"))})})(e,t)};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,a=null;const i=f(),d=t(p),c=e=>{if(a!==e){if(i.isEditing()){const t=i.getEditableNode();t&&t!==e&&i.blurEditMode()}var t,r;o?.disconnect(),s?.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=new MutationObserver(()=>{d(e,n),v(e,n)}),s.observe(e,{attributes:!0,attributeFilter:["class"]})),a=e,t="selectedNodeChanged",r=e?.getAttribute("data-node-id")??null,window.parent.postMessage({source:"node-edit-utils",action:t,data:r,timestamp:Date.now()},"*"),m(e,n),e&&n&&v(e,n)}},u=l(n,c,()=>{i.isEditing()&&i.blurEditMode(),a&&n&&(r(n),a=null,o?.disconnect(),s?.disconnect())},i.getEditableNode),h={selectNode:c,getSelectedNode:()=>a,refreshHighlightFrame:()=>{d(a,n)},clearSelectedNode:()=>{r(n),a=null,o?.disconnect(),s?.disconnect()},getEditableNode:()=>i.getEditableNode(),cleanup:()=>{u(),o?.disconnect(),s?.disconnect(),i.blurEditMode(),d.cleanup()}};var y,g;return y="nodeTools",g=h,"undefined"!=typeof window&&(window[y]=g),h},e.createViewport=e=>{const n=document.querySelector(".canvas-container"),o=e.querySelector(".resize-handle");o&&o.remove();const r=(e=>{const t=document.createElement("div");return t.className="resize-handle",e.appendChild(t),t})(e);e.style.setProperty("--container-width","400px"),((e,t,n)=>{const o=document.createElement("div");o.className="resize-presets",w.forEach(e=>{const r=document.createElement("button");r.textContent=e.name,r.className="resize-preset-button",r.addEventListener("click",()=>{n(t,e.rawValue)}),o.appendChild(r)}),e.appendChild(o)})(r,e,x);let s=!1,a=0,i=0;const d=t(t=>{if(!s)return;n&&(n.style.cursor="ew-resize");const o=E(t,a,i);x(e,o)}),l=((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)}))(r,t=>{t.preventDefault(),t.stopPropagation(),s=!0,a=t.clientX,i=e.offsetWidth},d,e=>{e.preventDefault(),e.stopPropagation(),n&&(n.style.cursor="default"),s=!1},()=>{s=!1});return{setWidth:t=>{x(e,t)},cleanup:()=>{s=!1,d?.cleanup(),l(),r.remove()}}}});

package/dist/styles.css

@@ -1 +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: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:opacity .1s ease-in-out,visibility .1s ease-in-out;visibility:hidden;width:12px;z-index:10000}.viewport:hover .resize-handle{opacity:1;visibility:visible}.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)}.resize-presets{display:flex;flex-direction:column;gap:.25rem;left:0;opacity:0;padding-left:1.25rem;position:absolute;top:0;transition:visibility .1s ease-in-out,opacity .1s ease-in-out;visibility:hidden}.resize-handle:hover .resize-presets{opacity:1;visibility:visible}.resize-preset-button{text-wrap:nowrap;backdrop-filter:blur(8px);background:oklch(55.2% .016 285.938/.7);border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-size:.6875rem;padding:.25rem .5rem;text-align:left;transition:background .1s ease-in-out;width:fit-content;&:hover{background:oklch(55.2% .016 285.938/1)}&.is-active{background:oklch(45.7% .24 277.023)}}.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)}}
+:root{--primary-color:oklch(0.6235 0.22 294);--uncode-color:oklch(45.7% 0.24 277.023);--handle-color:oklch(55.2% 0.016 285.938);--handle-color-transparent:oklch(55.2% 0.016 285.938/0.7);--primary-color-selection:oklch(0.59 0.18 294/0.3);--text-color-white:#fff;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:1.25rem;--transition-fast:0.1s ease-in-out;--transition-medium:0.2s ease-in-out;--z-index-high:10000;--z-index-medium:1000;--letter-spacing:0.02em;--font-family-primary:"Manrope",sans-serif}.node-provider{::selection{background:transparent}::-moz-selection{background:transparent}::-webkit-selection{background:transparent}}.node-tools{bottom:0;display:flex;gap:var(--spacing-xs);justify-content:center;left:0;opacity:var(--tool-opacity);padding-top:var(--spacing-xs);position:absolute;top:0;transform:scale(calc(1/var(--zoom))) translate3d(0,100%,0);transform-origin:bottom left;transition:opacity var(--transition-fast);z-index:var(--z-index-high)}.highlight-frame{font-family:var(--font-family-primary);height:var(--frame-height);left:var(--frame-left);letter-spacing:var(--letter-spacing);pointer-events:none;position:absolute;top:var(--frame-top);width:var(--frame-width);z-index:var(--z-index-medium)}.highlight-frame-svg{height:100%;left:0;overflow:visible;position:absolute;top:0;width:100%}.highlight-frame-rect{fill:none;stroke:var(--primary-color);stroke-width:var(--stroke-width)}.tag-label{align-items:center;background-color:var(--primary-color);border-radius:var(--spacing-sm);color:var(--text-color-white);display:flex;font-size:.575rem;font-weight:500;height:1rem;justify-content:center;line-height:1;padding:.5625rem var(--spacing-sm);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:var(--spacing-lg);transform:scale(calc(1/var(--zoom)));transform-origin:top left;transition:opacity var(--transition-fast),visibility var(--transition-fast);visibility:hidden;width:12px;z-index:var(--z-index-high)}.viewport:hover .resize-handle{opacity:1;visibility:visible}.resize-handle:before{background:var(--handle-color);border-radius:4px;content:"";height:32px;position:relative;right:0;top:0;transition:transform var(--transition-medium);width:3px}.resize-handle:hover:before{transform:scaleY(1.3)}.resize-presets{display:flex;flex-direction:column;font-family:var(--font-family-primary);gap:var(--spacing-xs);left:0;letter-spacing:var(--letter-spacing);opacity:0;padding-left:var(--spacing-lg);position:absolute;top:0;transition:visibility var(--transition-fast),opacity var(--transition-fast);visibility:hidden}.resize-handle:hover .resize-presets{opacity:1;visibility:visible}.resize-preset-button{text-wrap:nowrap;backdrop-filter:blur(8px);background:var(--handle-color-transparent);border:none;border-radius:var(--spacing-md);color:var(--text-color-white);cursor:pointer;font-size:.625rem;padding:var(--spacing-xs) var(--spacing-md);text-align:left;transition:background var(--transition-fast);width:fit-content;&:hover{background:var(--handle-color)}&.is-active{background:var(--uncode-color)}}.is-editable{outline:none;user-select:text;&::selection{background:var(--primary-color-selection)}&::-moz-selection{background:var(--primary-color-selection)}&::-webkit-selection{background:var(--primary-color-selection)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-edit-utils/core",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "Utilities for editing nodes in a dom tree.",
   "type": "module",
   "main": "dist/node-edit-utils.cjs.js",

package/src/lib/canvas/disableCanvasTextMode.ts

@@ -0,0 +1,7 @@
+import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
+
+export const disableCanvasTextMode = () => {
+  const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
+
+  disableTextEditMode?.();
+};

package/src/lib/canvas/enableCanvasTextMode.ts

@@ -0,0 +1,7 @@
+import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
+
+export const enableCanvasTextMode = () => {
+  const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
+
+  enableTextEditMode?.();
+};

package/src/lib/node-tools/createNodeTools.ts

@@ -6,6 +6,7 @@ import { setupEventListener } from "./events/setupEventListener";
 import { clearHighlightFrame } from "./highlight/clearHighlightFrame";
 import { highlightNode } from "./highlight/highlightNode";
 import { refreshHighlightFrame } from "./highlight/refreshHighlightFrame";
+import { updateHighlightFrameVisibility } from "./highlight/updateHighlightFrameVisibility";
 import { nodeText } from "./text/nodeText";
 import type { NodeTools } from "./types";
 
@@ -13,6 +14,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
   const nodeProvider = element;
 
   let resizeObserver: ResizeObserver | null = null;
+  let mutationObserver: MutationObserver | null = null;
   let selectedNode: HTMLElement | null = null;
 
   const text = nodeText();
@@ -29,11 +31,16 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
         selectedNode = null;
 
         resizeObserver?.disconnect();
+        mutationObserver?.disconnect();
       }
     }
   };
 
   const selectNode = (node: HTMLElement | null): void => {
+    if (selectedNode === node) {
+      return;
+    }
+
     if (text.isEditing()) {
       const currentEditable = text.getEditableNode();
       if (currentEditable && currentEditable !== node) {
@@ -42,6 +49,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
     }
 
     resizeObserver?.disconnect();
+    mutationObserver?.disconnect();
 
     if (node && nodeProvider) {
       text.enableEditMode(node, nodeProvider);
@@ -49,11 +57,25 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
       resizeObserver = connectResizeObserver(nodeProvider, () => {
         throttledFrameRefresh(node, nodeProvider);
       });
+
+      mutationObserver = new MutationObserver(() => {
+        throttledFrameRefresh(node, nodeProvider);
+        updateHighlightFrameVisibility(node, nodeProvider);
+      });
+
+      mutationObserver.observe(node, {
+        attributes: true,
+        attributeFilter: ["class"],
+      });
     }
 
     selectedNode = node;
     sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
     highlightNode(node, nodeProvider as HTMLElement) ?? null;
+
+    if (node && nodeProvider) {
+      updateHighlightFrameVisibility(node, nodeProvider);
+    }
   };
 
   // Setup event listener
@@ -62,6 +84,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
   const cleanup = (): void => {
     removeListeners();
     resizeObserver?.disconnect();
+    mutationObserver?.disconnect();
 
     text.blurEditMode();
     throttledFrameRefresh.cleanup();
@@ -77,6 +100,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
       clearHighlightFrame(nodeProvider);
       selectedNode = null;
       resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
     },
     getEditableNode: () => text.getEditableNode(),
     cleanup,

package/src/lib/node-tools/events/setupEventListener.ts

@@ -16,9 +16,9 @@ export const setupEventListener = (
   };
 
   const documentKeydownHandler = (event: KeyboardEvent) => {
+    console.log("Esacpe Handler", event);
+
     if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
       onEscapePressed?.();
     }
   };

package/src/lib/node-tools/highlight/updateHighlightFrameVisibility.ts

@@ -0,0 +1,10 @@
+import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
+
+export const updateHighlightFrameVisibility = (node: HTMLElement, nodeProvider: HTMLElement): void => {
+  const frame = getHighlightFrameElement(nodeProvider);
+  if (!frame) return;
+
+  const hasHiddenClass = node.classList.contains("hidden") || node.classList.contains("select-none");
+  frame.style.display = hasHiddenClass ? "none" : "";
+};
+

package/src/lib/node-tools/select/selectNode.ts

@@ -14,7 +14,7 @@ export const selectNode = (event: MouseEvent, editableNode: HTMLElement | null):
   const clickThrough = event.metaKey || event.ctrlKey;
 
   const candidates = getElementsFromPoint(clickX, clickY).filter(
-    (element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase())
+    (element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) && !element.classList.contains("select-none")
   );
 
   if (editableNode && candidates.includes(editableNode)) {

package/src/lib/node-tools/text/nodeText.ts

@@ -1,5 +1,5 @@
-import { disableCanvasKeyboard } from "../../canvas/disableCanvasKeyboard";
-import { enableCanvasKeyboard } from "../../canvas/enableCanvasKeyboard";
+import { disableCanvasTextMode } from "../../canvas/disableCanvasTextMode";
+import { enableCanvasTextMode } from "../../canvas/enableCanvasTextMode";
 import { setupNodeListeners } from "./events/setupNodeListeners";
 import { hasTextContent } from "./helpers/hasTextContent";
 import { makeNodeEditable } from "./helpers/makeNodeEditable";
@@ -26,7 +26,7 @@ export const nodeText = (): NodeText => {
       editableNode = node;
 
       makeNodeEditable(node);
-      disableCanvasKeyboard();
+      enableCanvasTextMode();
 
       cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
     }
@@ -50,8 +50,7 @@ export const nodeText = (): NodeText => {
     const nodeToCleanup = editableNode;
 
     makeNodeNonEditable(nodeToCleanup);
-    enableCanvasKeyboard();
-
+    disableCanvasTextMode();
     cleanup?.();
 
     editableNode = null;

package/src/lib/post-message/processPostMessage.ts

@@ -2,18 +2,15 @@ export const processPostMessage = (event: MessageEvent, onNodeSelected?: (node:
   if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
     if (event.data.action === "zoom") {
       const zoom = event.data.data;
-      console.log("zoom", zoom);
     }
   }
 
   if (event.data.source === "application") {
     if (event.data.action === "selectedNodeChanged") {
       const nodeId = event.data.data;
-      console.log("selectedNodeChanged in node-edit-utils", nodeId);
       const selectedNode = document.querySelector(`[data-node-id="${nodeId}"]`);
 
       if (selectedNode) {
-        console.log("selectedNode", selectedNode);
         onNodeSelected?.(selectedNode as HTMLElement);
       }
     }

package/src/lib/styles/styles.css

@@ -1,3 +1,28 @@
+:root {
+  --primary-color: oklch(0.6235 0.22 294);
+  --uncode-color: oklch(45.7% 0.24 277.023);
+
+  --handle-color: oklch(55.2% 0.016 285.938);
+  --handle-color-transparent: oklch(55.2% 0.016 285.938 / 0.7);
+  --primary-color-selection: oklch(0.59 0.18 294 / 0.3);
+
+  --text-color-white: white;
+
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.375rem;
+  --spacing-md: 0.5rem;
+  --spacing-lg: 1.25rem;
+
+  --transition-fast: 0.1s ease-in-out;
+  --transition-medium: 0.2s ease-in-out;
+
+  --z-index-high: 10000;
+  --z-index-medium: 1000;
+
+  --letter-spacing: 0.02em;
+  --font-family-primary: "Manrope", sans-serif;
+}
+
 .node-provider {
   ::selection {
     background: transparent;
@@ -16,13 +41,14 @@
   position: absolute;
   left: 0;
   bottom: 0;
-  gap: 0.25rem;
-  z-index: 10000;
+  top: 0;
+  gap: var(--spacing-xs);
+  z-index: var(--z-index-high);
   transform: scale(calc(1 / var(--zoom))) translate3d(0, 100%, 0);
   transform-origin: bottom left;
-  transition: opacity 0.1s ease;
+  transition: opacity var(--transition-fast);
   opacity: var(--tool-opacity);
-  padding-top: 0.25rem;
+  padding-top: var(--spacing-xs);
   display: flex;
   justify-content: center;
 }
@@ -33,9 +59,10 @@
   left: var(--frame-left);
   width: var(--frame-width);
   height: var(--frame-height);
-  z-index: 1000;
+  z-index: var(--z-index-medium);
   pointer-events: none;
-  /* outline: calc(0.125em / var(--zoom)) solid oklch(62.7% 0.265 303.9); */
+  font-family: var(--font-family-primary);
+  letter-spacing: var(--letter-spacing);
 }
 
 .highlight-frame-svg {
@@ -49,20 +76,20 @@
 
 .highlight-frame-rect {
   fill: none;
-  stroke: oklch(62.7% 0.265 303.9);
+  stroke: var(--primary-color);
   stroke-width: var(--stroke-width);
 }
 
 .tag-label {
-  background-color: oklch(62.7% 0.265 303.9);
-  color: white;
+  background-color: var(--primary-color);
+  color: var(--text-color-white);
   font-size: 0.575rem;
   font-weight: 500;
   text-transform: uppercase;
-  height: 1.25rem;
-  padding: 0 0.375rem;
+  height: 1rem;
+  padding: 0.5625rem var(--spacing-sm);
   line-height: 1;
-  border-radius: 0.375rem;
+  border-radius: var(--spacing-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -75,12 +102,12 @@
 
 .resize-handle {
   position: absolute;
-  top: 1.25rem;
+  top: var(--spacing-lg);
   right: -12px;
   width: 12px;
   height: 40px;
   cursor: ew-resize;
-  z-index: 10000;
+  z-index: var(--z-index-high);
   display: flex;
   opacity: 0;
   visibility: hidden;
@@ -90,8 +117,8 @@
   transform: scale(calc(1 / var(--zoom)));
   transform-origin: top left;
   transition:
-    opacity 0.1s ease-in-out,
-    visibility 0.1s ease-in-out;
+    opacity var(--transition-fast),
+    visibility var(--transition-fast);
 }
 
 .viewport:hover .resize-handle {
@@ -106,9 +133,9 @@
   right: 0;
   width: 3px;
   height: 32px;
-  background: oklch(55.2% 0.016 285.938);
+  background: var(--handle-color);
   border-radius: 4px;
-  transition: transform 0.2s ease-in-out;
+  transition: transform var(--transition-medium);
 }
 
 .resize-handle:hover::before {
@@ -119,15 +146,17 @@
   position: absolute;
   top: 0;
   left: 0;
-  padding-left: 1.25rem;
+  padding-left: var(--spacing-lg);
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--spacing-xs);
   visibility: hidden;
   opacity: 0;
+  font-family: var(--font-family-primary);
+  letter-spacing: var(--letter-spacing);
   transition:
-    visibility 0.1s ease-in-out,
-    opacity 0.1s ease-in-out;
+    visibility var(--transition-fast),
+    opacity var(--transition-fast);
 }
 
 .resize-handle:hover .resize-presets {
@@ -136,25 +165,25 @@
 }
 
 .resize-preset-button {
-  background: oklch(55.2% 0.016 285.938 / 0.7);
+  background: var(--handle-color-transparent);
   border: none;
   cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.5rem;
-  font-size: 0.6875rem;
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-radius: var(--spacing-md);
+  font-size: 0.625rem;
   text-wrap: nowrap;
   text-align: left;
   backdrop-filter: blur(8px);
-  transition: background 0.1s ease-in-out;
-  color: white;
+  transition: background var(--transition-fast);
+  color: var(--text-color-white);
   width: fit-content;
 
   &:hover {
-    background: oklch(55.2% 0.016 285.938 / 1);
+    background: var(--handle-color);
   }
 
   &.is-active {
-    background: oklch(45.7% 0.24 277.023);
+    background: var(--uncode-color);
   }
 }
 
@@ -163,14 +192,14 @@
   user-select: text;
 
   &::selection {
-    background: oklch(62.7% 0.265 303.9 / 0.3);
+    background: var(--primary-color-selection);
   }
 
   &::-moz-selection {
-    background: oklch(62.7% 0.265 303.9 / 0.3);
+    background: var(--primary-color-selection);
   }
 
   &::-webkit-selection {
-    background: oklch(62.7% 0.265 303.9 / 0.3);
+    background: var(--primary-color-selection);
   }
 }

package/src/lib/viewport/resize/updateActivePreset.ts

@@ -1,9 +1,7 @@
 import { RESIZE_PRESETS } from "../constants";
 
 export const updateActivePreset = (container: HTMLElement, width: number): void => {
-  console.log("updateActivePreset", width);
   const presetButtons = container.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
-  console.log("presetButtons", presetButtons);
   presetButtons.forEach((button, index) => {
     if (index < RESIZE_PRESETS.length) {
       const preset = RESIZE_PRESETS[index];