@node-edit-utils/core 2.1.7 → 2.1.9

package/dist/lib/helpers/index.d.ts

@@ -1 +1 @@
-export { withRAF, withRAFThrottle } from "./withRAF";
+export { withRAF, withRAFThrottle, withDoubleRAF } from "./withRAF";

package/dist/lib/helpers/withRAF.d.ts

@@ -2,3 +2,6 @@ export declare function withRAF(operation: () => void): () => void;
 export declare function withRAFThrottle<T extends (...args: any[]) => void>(func: T): T & {
     cleanup: () => void;
 };
+export declare function withDoubleRAF<T extends (...args: any[]) => void>(func: T): T & {
+    cleanup: () => 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.1.7
+ * @version 2.1.9
  */
 'use strict';
 
@@ -30,6 +30,42 @@ function withRAFThrottle(func) {
     };
     return throttled;
 }
+// biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
+function withDoubleRAF(func) {
+    let rafId1 = null;
+    let rafId2 = null;
+    let lastArgs = null;
+    const throttled = (...args) => {
+        lastArgs = args;
+        if (rafId1 === null) {
+            rafId1 = requestAnimationFrame(() => {
+                // First RAF: let browser complete layout
+                rafId2 = requestAnimationFrame(() => {
+                    // Second RAF: read bounds after layout is complete
+                    if (lastArgs) {
+                        const currentArgs = lastArgs;
+                        rafId1 = null;
+                        rafId2 = null;
+                        lastArgs = null;
+                        func(...currentArgs);
+                    }
+                });
+            });
+        }
+    };
+    throttled.cleanup = () => {
+        if (rafId1 !== null) {
+            cancelAnimationFrame(rafId1);
+            rafId1 = null;
+        }
+        if (rafId2 !== null) {
+            cancelAnimationFrame(rafId2);
+            rafId2 = null;
+        }
+        lastArgs = null;
+    };
+    return throttled;
+}
 
 const getCanvasWindowValue = (path) => {
     // biome-ignore lint/suspicious/noExplicitAny: global window extension
@@ -102,15 +138,11 @@ const isLocked = (node) => {
 };
 
 const processPostMessage = (event, onNodeSelected) => {
-    // if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
-    //   if (event.data.action === "zoom") {
-    //     // Zoom handling can be implemented here if needed
-    //   }
-    // }
     if (event.data.source === "application") {
         if (event.data.action === "selectedNodeChanged") {
             const nodeId = event.data.data;
             const selectedNode = document.querySelector(`[data-node-id="${nodeId}"]`);
+            console.log("selectedNode", selectedNode);
             if (isLocked(selectedNode)) {
                 onNodeSelected?.(null);
                 return;
@@ -294,6 +326,7 @@ const highlightNode = (node, nodeProvider) => {
 const refreshHighlightFrame = (node, nodeProvider) => {
     const frame = getHighlightFrameElement(nodeProvider);
     const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+    console.log("1. refreshHighlightFrame", node);
     if (!frame)
         return;
     if (zoom >= 0.3) {
@@ -307,6 +340,7 @@ const refreshHighlightFrame = (node, nodeProvider) => {
     frame.style.setProperty("--frame-left", `${left}px`);
     frame.style.setProperty("--frame-width", `${width}px`);
     frame.style.setProperty("--frame-height", `${height}px`);
+    console.log("2. refreshHighlightFrame", top, left, width, height);
 };
 
 const updateHighlightFrameVisibility = (node, nodeProvider) => {
@@ -462,7 +496,7 @@ const createNodeTools = (element) => {
     let mutationObserver = null;
     let selectedNode = null;
     const text = nodeText();
-    const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
+    const throttledFrameRefresh = withDoubleRAF(refreshHighlightFrame);
     const handleEscape = () => {
         if (text.isEditing()) {
             text.blurEditMode();
@@ -501,8 +535,6 @@ const createNodeTools = (element) => {
             });
             mutationObserver.observe(node, {
                 attributes: true,
-                subtree: true,
-                childList: true,
                 characterData: true,
             });
             nodeResizeObserver = connectResizeObserver(node, () => {

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.1.7
+ * @version 2.1.9
  */
 // biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
 function withRAFThrottle(func) {
@@ -28,6 +28,42 @@ function withRAFThrottle(func) {
     };
     return throttled;
 }
+// biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
+function withDoubleRAF(func) {
+    let rafId1 = null;
+    let rafId2 = null;
+    let lastArgs = null;
+    const throttled = (...args) => {
+        lastArgs = args;
+        if (rafId1 === null) {
+            rafId1 = requestAnimationFrame(() => {
+                // First RAF: let browser complete layout
+                rafId2 = requestAnimationFrame(() => {
+                    // Second RAF: read bounds after layout is complete
+                    if (lastArgs) {
+                        const currentArgs = lastArgs;
+                        rafId1 = null;
+                        rafId2 = null;
+                        lastArgs = null;
+                        func(...currentArgs);
+                    }
+                });
+            });
+        }
+    };
+    throttled.cleanup = () => {
+        if (rafId1 !== null) {
+            cancelAnimationFrame(rafId1);
+            rafId1 = null;
+        }
+        if (rafId2 !== null) {
+            cancelAnimationFrame(rafId2);
+            rafId2 = null;
+        }
+        lastArgs = null;
+    };
+    return throttled;
+}
 
 const getCanvasWindowValue = (path) => {
     // biome-ignore lint/suspicious/noExplicitAny: global window extension
@@ -100,15 +136,11 @@ const isLocked = (node) => {
 };
 
 const processPostMessage = (event, onNodeSelected) => {
-    // if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
-    //   if (event.data.action === "zoom") {
-    //     // Zoom handling can be implemented here if needed
-    //   }
-    // }
     if (event.data.source === "application") {
         if (event.data.action === "selectedNodeChanged") {
             const nodeId = event.data.data;
             const selectedNode = document.querySelector(`[data-node-id="${nodeId}"]`);
+            console.log("selectedNode", selectedNode);
             if (isLocked(selectedNode)) {
                 onNodeSelected?.(null);
                 return;
@@ -292,6 +324,7 @@ const highlightNode = (node, nodeProvider) => {
 const refreshHighlightFrame = (node, nodeProvider) => {
     const frame = getHighlightFrameElement(nodeProvider);
     const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+    console.log("1. refreshHighlightFrame", node);
     if (!frame)
         return;
     if (zoom >= 0.3) {
@@ -305,6 +338,7 @@ const refreshHighlightFrame = (node, nodeProvider) => {
     frame.style.setProperty("--frame-left", `${left}px`);
     frame.style.setProperty("--frame-width", `${width}px`);
     frame.style.setProperty("--frame-height", `${height}px`);
+    console.log("2. refreshHighlightFrame", top, left, width, height);
 };
 
 const updateHighlightFrameVisibility = (node, nodeProvider) => {
@@ -460,7 +494,7 @@ const createNodeTools = (element) => {
     let mutationObserver = null;
     let selectedNode = null;
     const text = nodeText();
-    const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
+    const throttledFrameRefresh = withDoubleRAF(refreshHighlightFrame);
     const handleEscape = () => {
         if (text.isEditing()) {
             text.blurEditMode();
@@ -499,8 +533,6 @@ const createNodeTools = (element) => {
             });
             mutationObserver.observe(node, {
                 attributes: true,
-                subtree: true,
-                childList: true,
                 characterData: true,
             });
             nodeResizeObserver = connectResizeObserver(node, () => {

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.1.7
+ * @version 2.1.9
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -34,6 +34,42 @@
         };
         return throttled;
     }
+    // biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
+    function withDoubleRAF(func) {
+        let rafId1 = null;
+        let rafId2 = null;
+        let lastArgs = null;
+        const throttled = (...args) => {
+            lastArgs = args;
+            if (rafId1 === null) {
+                rafId1 = requestAnimationFrame(() => {
+                    // First RAF: let browser complete layout
+                    rafId2 = requestAnimationFrame(() => {
+                        // Second RAF: read bounds after layout is complete
+                        if (lastArgs) {
+                            const currentArgs = lastArgs;
+                            rafId1 = null;
+                            rafId2 = null;
+                            lastArgs = null;
+                            func(...currentArgs);
+                        }
+                    });
+                });
+            }
+        };
+        throttled.cleanup = () => {
+            if (rafId1 !== null) {
+                cancelAnimationFrame(rafId1);
+                rafId1 = null;
+            }
+            if (rafId2 !== null) {
+                cancelAnimationFrame(rafId2);
+                rafId2 = null;
+            }
+            lastArgs = null;
+        };
+        return throttled;
+    }
 
     const getCanvasWindowValue = (path) => {
         // biome-ignore lint/suspicious/noExplicitAny: global window extension
@@ -106,15 +142,11 @@
     };
 
     const processPostMessage = (event, onNodeSelected) => {
-        // if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
-        //   if (event.data.action === "zoom") {
-        //     // Zoom handling can be implemented here if needed
-        //   }
-        // }
         if (event.data.source === "application") {
             if (event.data.action === "selectedNodeChanged") {
                 const nodeId = event.data.data;
                 const selectedNode = document.querySelector(`[data-node-id="${nodeId}"]`);
+                console.log("selectedNode", selectedNode);
                 if (isLocked(selectedNode)) {
                     onNodeSelected?.(null);
                     return;
@@ -298,6 +330,7 @@
     const refreshHighlightFrame = (node, nodeProvider) => {
         const frame = getHighlightFrameElement(nodeProvider);
         const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+        console.log("1. refreshHighlightFrame", node);
         if (!frame)
             return;
         if (zoom >= 0.3) {
@@ -311,6 +344,7 @@
         frame.style.setProperty("--frame-left", `${left}px`);
         frame.style.setProperty("--frame-width", `${width}px`);
         frame.style.setProperty("--frame-height", `${height}px`);
+        console.log("2. refreshHighlightFrame", top, left, width, height);
     };
 
     const updateHighlightFrameVisibility = (node, nodeProvider) => {
@@ -466,7 +500,7 @@
         let mutationObserver = null;
         let selectedNode = null;
         const text = nodeText();
-        const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
+        const throttledFrameRefresh = withDoubleRAF(refreshHighlightFrame);
         const handleEscape = () => {
             if (text.isEditing()) {
                 text.blurEditMode();
@@ -505,8 +539,6 @@
                 });
                 mutationObserver.observe(node, {
                     attributes: true,
-                    subtree: true,
-                    childList: true,
                     characterData: true,
                 });
                 nodeResizeObserver = connectResizeObserver(node, () => {

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)};const o=(e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n};function r(e){return e.querySelector(".highlight-frame")}const s=e=>{if(!e)return;const t=r(e);t&&t.remove()},a=["path","rect","circle","ellipse","polygon","line","polyline","text","text-noci"];let i=[],d=0;const l=(e,t)=>{let n=null;const o=e.clientX,r=e.clientY,s=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=>!a.includes(e.tagName.toLowerCase())&&!e.classList.contains("select-none"));if(t&&l.includes(t))return t;if(s)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},c=(e,t,n,o)=>{const r=e=>{((e,t)=>{if("application"===e.data.source&&"selectedNodeChanged"===e.data.action){const o=e.data.data,r=document.querySelector(`[data-node-id="${o}"]`);if(n=r,n?.classList.contains("select-none"))return void t?.(null);r&&t?.(r)}var n})(e,t)},a=n=>{((e,t,n,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return s(t),void o(null);o(l(e,n))})(n,e,o(),t)},i=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",r),document.addEventListener("click",a),document.addEventListener("keydown",i),()=>{window.removeEventListener("message",r),document.removeEventListener("click",a),document.removeEventListener("keydown",i)}};function u(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 m=(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)},p=(e,t)=>{if(!e)return;const o=r(t);o&&o.remove();const s=((e,t)=>{const{top:o,left:r,width:s,height:a}=u(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 c=document.createElementNS("http://www.w3.org/2000/svg","rect");return c.setAttribute("x","0"),c.setAttribute("y","0"),c.setAttribute("width","100%"),c.setAttribute("height","100%"),c.classList.add("highlight-frame-rect"),l.appendChild(c),d.appendChild(l),d})(e,t);"true"===e.contentEditable&&s.classList.add("is-editable"),m(e,s),t.appendChild(s)},h=(e,t)=>{const o=r(t),s=n(["zoom","current"])??1;if(!o)return;s>=.3?t.style.setProperty("--tool-opacity","1"):t.style.setProperty("--tool-opacity","0");const{top:a,left:i,width:d,height:l}=u(e,t);o.style.setProperty("--frame-top",`${a}px`),o.style.setProperty("--frame-left",`${i}px`),o.style.setProperty("--frame-width",`${d}px`),o.style.setProperty("--frame-height",`${l}px`)},v=(e,t)=>{const n=r(t);if(!n)return;const o=e.classList.contains("hidden")||e.classList.contains("select-none")?"none":"";n.style.display=o;const s=n.querySelector(".tag-label");s&&(s.style.display=o)},y=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)}},f=(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,()=>{h(e,t)});return()=>n.disconnect()},g=()=>{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=y(e),r=f(e,t);return()=>{e.removeEventListener("blur",n),o(),r?.()}})(t,s,r))},blurEditMode:r,getEditableNode:()=>e,isEditing:()=>null!==e}},b=320,w=1680,E=[{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"}],x=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(b,Math.min(w,n))})(n,(e.clientX-t)/o);return r},L=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<E.length&&(E[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 r=null,a=null,i=null,d=null;const l=g(),u=t(h),m=e=>{if(d!==e){if(l.isEditing()){const t=l.getEditableNode();t&&t!==e&&l.blurEditMode()}var t,s;r?.disconnect(),a?.disconnect(),i?.disconnect(),e&&n&&(l.enableEditMode(e,n),r=o(n,()=>{u(e,n)}),i=new MutationObserver(()=>{u(e,n),v(e,n)}),i.observe(e,{attributes:!0,subtree:!0,childList:!0,characterData:!0}),a=o(e,()=>{u(e,n),v(e,n)})),d=e,t="selectedNodeChanged",s=e?.getAttribute("data-node-id")??null,window.parent.postMessage({source:"node-edit-utils",action:t,data:s,timestamp:Date.now()},"*"),p(e,n),e&&n&&v(e,n)}},y=c(n,m,()=>{l.isEditing()&&l.blurEditMode(),d&&n&&(s(n),d=null,r?.disconnect(),a?.disconnect(),i?.disconnect())},l.getEditableNode),f={selectNode:m,getSelectedNode:()=>d,refreshHighlightFrame:()=>{u(d,n)},clearSelectedNode:()=>{s(n),d=null,r?.disconnect(),a?.disconnect(),i?.disconnect()},getEditableNode:()=>l.getEditableNode(),cleanup:()=>{y(),r?.disconnect(),a?.disconnect(),i?.disconnect(),l.blurEditMode(),u.cleanup()}};var b,w;return b="nodeTools",w=f,"undefined"!=typeof window&&(window[b]=w),f},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",E.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,L);let s=!1,a=0,i=0;const d=t(t=>{if(!s)return;n&&(n.style.cursor="ew-resize");const o=x(t,a,i);L(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=>{L(e,t)},cleanup:()=>{s=!1,d?.cleanup(),l(),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)};const o=(e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n};function r(e){return e.querySelector(".highlight-frame")}const s=e=>{if(!e)return;const t=r(e);t&&t.remove()},l=["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,s=e.metaKey||e.ctrlKey,d=((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=>!l.includes(e.tagName.toLowerCase())&&!e.classList.contains("select-none"));if(t&&d.includes(t))return t;if(s)return a=[],n=d[0],n;var c,u;u=d,(c=a).length===u.length&&c.every((e,t)=>e===u[t])?i<=d.length&&i++:i=0;return n=d[d.length-1-i],a=d,n},c=(e,t,n,o)=>{const r=e=>{((e,t)=>{if("application"===e.data.source&&"selectedNodeChanged"===e.data.action){const o=e.data.data,r=document.querySelector(`[data-node-id="${o}"]`);if(console.log("selectedNode",r),n=r,n?.classList.contains("select-none"))return void t?.(null);r&&t?.(r)}var n})(e,t)},l=n=>{((e,t,n,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return s(t),void o(null);o(d(e,n))})(n,e,o(),t)},a=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",r),document.addEventListener("click",l),document.addEventListener("keydown",a),()=>{window.removeEventListener("message",r),document.removeEventListener("click",l),document.removeEventListener("keydown",a)}};function u(e,t){const o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=o.top-r.top,l=o.left-r.left,a=n(["zoom","current"])??1;return{top:parseFloat((s/a).toFixed(5)),left:parseFloat((l/a).toFixed(5)),width:Math.max(4,parseFloat((o.width/a).toFixed(5))),height:parseFloat((o.height/a).toFixed(5))}}const m=(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)},p=(e,t)=>{if(!e)return;const o=r(t);o&&o.remove();const s=((e,t)=>{const{top:o,left:r,width:s,height:l}=u(e,t),a=n(["zoom","current"])??1;document.body.style.setProperty("--zoom",a.toString()),document.body.style.setProperty("--stroke-width",(2/a).toFixed(3));const i=document.createElement("div");i.classList.add("highlight-frame"),i.style.setProperty("--frame-top",`${o}px`),i.style.setProperty("--frame-left",`${r}px`),i.style.setProperty("--frame-width",`${s}px`),i.style.setProperty("--frame-height",`${l}px`);const d=document.createElementNS("http://www.w3.org/2000/svg","svg");d.classList.add("highlight-frame-svg");const c=document.createElementNS("http://www.w3.org/2000/svg","rect");return c.setAttribute("x","0"),c.setAttribute("y","0"),c.setAttribute("width","100%"),c.setAttribute("height","100%"),c.classList.add("highlight-frame-rect"),d.appendChild(c),i.appendChild(d),i})(e,t);"true"===e.contentEditable&&s.classList.add("is-editable"),m(e,s),t.appendChild(s)},h=(e,t)=>{const o=r(t),s=n(["zoom","current"])??1;if(console.log("1. refreshHighlightFrame",e),!o)return;s>=.3?t.style.setProperty("--tool-opacity","1"):t.style.setProperty("--tool-opacity","0");const{top:l,left:a,width:i,height:d}=u(e,t);o.style.setProperty("--frame-top",`${l}px`),o.style.setProperty("--frame-left",`${a}px`),o.style.setProperty("--frame-width",`${i}px`),o.style.setProperty("--frame-height",`${d}px`),console.log("2. refreshHighlightFrame",l,a,i,d)},f=(e,t)=>{const n=r(t);if(!n)return;const o=e.classList.contains("hidden")||e.classList.contains("select-none")?"none":"";n.style.display=o;const s=n.querySelector(".tag-label");s&&(s.style.display=o)},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)}},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,()=>{h(e,t)});return()=>n.disconnect()},g=()=>{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 l=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(t);l&&(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=v(e),r=y(e,t);return()=>{e.removeEventListener("blur",n),o(),r?.()}})(t,s,r))},blurEditMode:r,getEditableNode:()=>e,isEditing:()=>null!==e}},b=320,w=1680,E=[{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"}],x=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(b,Math.min(w,n))})(n,(e.clientX-t)/o);return r},L=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<E.length&&(E[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 t=e;let n=null,r=null,l=null,a=null;const i=g(),d=function(e){let t=null,n=null,o=null;const r=(...r)=>{o=r,null===t&&(t=requestAnimationFrame(()=>{n=requestAnimationFrame(()=>{if(o){const r=o;t=null,n=null,o=null,e(...r)}})}))};return r.cleanup=()=>{null!==t&&(cancelAnimationFrame(t),t=null),null!==n&&(cancelAnimationFrame(n),n=null),o=null},r}(h),u=e=>{if(a!==e){if(i.isEditing()){const t=i.getEditableNode();t&&t!==e&&i.blurEditMode()}var s,c;n?.disconnect(),r?.disconnect(),l?.disconnect(),e&&t&&(i.enableEditMode(e,t),n=o(t,()=>{d(e,t)}),l=new MutationObserver(()=>{d(e,t),f(e,t)}),l.observe(e,{attributes:!0,characterData:!0}),r=o(e,()=>{d(e,t),f(e,t)})),a=e,s="selectedNodeChanged",c=e?.getAttribute("data-node-id")??null,window.parent.postMessage({source:"node-edit-utils",action:s,data:c,timestamp:Date.now()},"*"),p(e,t),e&&t&&f(e,t)}},m=c(t,u,()=>{i.isEditing()&&i.blurEditMode(),a&&t&&(s(t),a=null,n?.disconnect(),r?.disconnect(),l?.disconnect())},i.getEditableNode),v={selectNode:u,getSelectedNode:()=>a,refreshHighlightFrame:()=>{d(a,t)},clearSelectedNode:()=>{s(t),a=null,n?.disconnect(),r?.disconnect(),l?.disconnect()},getEditableNode:()=>i.getEditableNode(),cleanup:()=>{m(),n?.disconnect(),r?.disconnect(),l?.disconnect(),i.blurEditMode(),d.cleanup()}};var y,b;return y="nodeTools",b=v,"undefined"!=typeof window&&(window[y]=b),v},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",E.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,L);let s=!1,l=0,a=0;const i=t(t=>{if(!s)return;n&&(n.style.cursor="ew-resize");const o=x(t,l,a);L(e,o)}),d=((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,l=t.clientX,a=e.offsetWidth},i,e=>{e.preventDefault(),e.stopPropagation(),n&&(n.style.cursor="default"),s=!1},()=>{s=!1});return{setWidth:t=>{L(e,t)},cleanup:()=>{s=!1,i?.cleanup(),d(),r.remove()}}}});

package/package.json

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

package/src/lib/helpers/index.ts

@@ -1 +1 @@
-export { withRAF, withRAFThrottle } from "./withRAF";
+export { withRAF, withRAFThrottle, withDoubleRAF } from "./withRAF";

package/src/lib/helpers/withRAF.ts

@@ -37,3 +37,44 @@ export function withRAFThrottle<T extends (...args: any[]) => void>(func: T): T
 
   return throttled as T & { cleanup: () => void };
 }
+
+// biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
+export function withDoubleRAF<T extends (...args: any[]) => void>(func: T): T & { cleanup: () => void } {
+  let rafId1: number | null = null;
+  let rafId2: number | null = null;
+  let lastArgs: Parameters<T> | null = null;
+
+  const throttled = (...args: Parameters<T>) => {
+    lastArgs = args;
+
+    if (rafId1 === null) {
+      rafId1 = requestAnimationFrame(() => {
+        // First RAF: let browser complete layout
+        rafId2 = requestAnimationFrame(() => {
+          // Second RAF: read bounds after layout is complete
+          if (lastArgs) {
+            const currentArgs = lastArgs;
+            rafId1 = null;
+            rafId2 = null;
+            lastArgs = null;
+            func(...currentArgs);
+          }
+        });
+      });
+    }
+  };
+
+  throttled.cleanup = () => {
+    if (rafId1 !== null) {
+      cancelAnimationFrame(rafId1);
+      rafId1 = null;
+    }
+    if (rafId2 !== null) {
+      cancelAnimationFrame(rafId2);
+      rafId2 = null;
+    }
+    lastArgs = null;
+  };
+
+  return throttled as T & { cleanup: () => void };
+}

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

@@ -1,4 +1,4 @@
-import { withRAFThrottle } from "../helpers";
+import { withDoubleRAF } from "../helpers";
 import { connectResizeObserver } from "../helpers/observer/connectResizeObserver";
 import { sendPostMessage } from "../post-message/sendPostMessage";
 import { bindToWindow } from "../window/bindToWindow";
@@ -19,7 +19,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
   let selectedNode: HTMLElement | null = null;
 
   const text = nodeText();
-  const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
+  const throttledFrameRefresh = withDoubleRAF(refreshHighlightFrame);
 
   const handleEscape = (): void => {
     if (text.isEditing()) {
@@ -68,8 +68,6 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
 
       mutationObserver.observe(node, {
         attributes: true,
-        subtree: true,
-        childList: true,
         characterData: true,
       });
 

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

@@ -6,6 +6,8 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
   const frame = getHighlightFrameElement(nodeProvider);
   const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
 
+  console.log("1. refreshHighlightFrame", node);
+
   if (!frame) return;
 
   if (zoom >= 0.3) {
@@ -20,4 +22,6 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
   frame.style.setProperty("--frame-left", `${left}px`);
   frame.style.setProperty("--frame-width", `${width}px`);
   frame.style.setProperty("--frame-height", `${height}px`);
+
+  console.log("2. refreshHighlightFrame", top, left, width, height);
 };

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

@@ -1,17 +1,13 @@
 import { isLocked } from "../node-tools/select/helpers/isLocked";
 
 export const processPostMessage = (event: MessageEvent, onNodeSelected?: (node: HTMLElement | null) => void) => {
-  // if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
-  //   if (event.data.action === "zoom") {
-  //     // Zoom handling can be implemented here if needed
-  //   }
-  // }
-
   if (event.data.source === "application") {
     if (event.data.action === "selectedNodeChanged") {
       const nodeId = event.data.data;
       const selectedNode = document.querySelector(`[data-node-id="${nodeId}"]`) as HTMLElement | null;
 
+      console.log("selectedNode", selectedNode);
+
       if (isLocked(selectedNode)) {
         onNodeSelected?.(null);
         return;