@node-edit-utils/core 2.0.3 → 2.0.5

package/dist/lib/post-message/processPostMessage.d.ts

@@ -0,0 +1 @@
+export declare const processPostMessage: (event: MessageEvent, onNodeSelected?: (node: HTMLElement | null) => void) => 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.3
+ * @version 2.0.5
  */
 'use strict';
 
@@ -97,13 +97,24 @@ const bindToWindow = (key, value) => {
     }
 };
 
-const handlePostMessage = (event) => {
+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);
         }
     }
+    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);
+            }
+        }
+    }
 };
 
 function getHighlightFrameElement(nodeProvider) {
@@ -180,7 +191,7 @@ const handleNodeClick = (event, nodeProvider, editableNode, onNodeSelected) => {
 
 const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, getEditableNode) => {
     const messageHandler = (event) => {
-        handlePostMessage(event);
+        processPostMessage(event, onNodeSelected);
     };
     const documentClickHandler = (event) => {
         handleNodeClick(event, nodeProvider, getEditableNode(), onNodeSelected);
@@ -459,7 +470,7 @@ const createNodeTools = (element) => {
             });
         }
         selectedNode = node;
-        sendPostMessage("selectedNodeChanged", node?.getAttribute("data-layer-id") ?? null);
+        sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
         highlightNode(node, nodeProvider) ?? null;
     };
     // Setup event listener

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.3
+ * @version 2.0.5
  */
 // biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
 function withRAFThrottle(func) {
@@ -95,13 +95,24 @@ const bindToWindow = (key, value) => {
     }
 };
 
-const handlePostMessage = (event) => {
+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);
         }
     }
+    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);
+            }
+        }
+    }
 };
 
 function getHighlightFrameElement(nodeProvider) {
@@ -178,7 +189,7 @@ const handleNodeClick = (event, nodeProvider, editableNode, onNodeSelected) => {
 
 const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, getEditableNode) => {
     const messageHandler = (event) => {
-        handlePostMessage(event);
+        processPostMessage(event, onNodeSelected);
     };
     const documentClickHandler = (event) => {
         handleNodeClick(event, nodeProvider, getEditableNode(), onNodeSelected);
@@ -457,7 +468,7 @@ const createNodeTools = (element) => {
             });
         }
         selectedNode = node;
-        sendPostMessage("selectedNodeChanged", node?.getAttribute("data-layer-id") ?? null);
+        sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
         highlightNode(node, nodeProvider) ?? null;
     };
     // Setup event listener

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.3
+ * @version 2.0.5
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -101,13 +101,24 @@
         }
     };
 
-    const handlePostMessage = (event) => {
+    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);
             }
         }
+        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);
+                }
+            }
+        }
     };
 
     function getHighlightFrameElement(nodeProvider) {
@@ -184,7 +195,7 @@
 
     const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, getEditableNode) => {
         const messageHandler = (event) => {
-            handlePostMessage(event);
+            processPostMessage(event, onNodeSelected);
         };
         const documentClickHandler = (event) => {
             handleNodeClick(event, nodeProvider, getEditableNode(), onNodeSelected);
@@ -463,7 +474,7 @@
                 });
             }
             selectedNode = node;
-            sendPostMessage("selectedNodeChanged", node?.getAttribute("data-layer-id") ?? null);
+            sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
             highlightNode(node, nodeProvider) ?? null;
         };
         // Setup event listener

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=[],l=0;const i=(e,t)=>{let n=null;const o=e.clientX,r=e.clientY,i=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=>!s.includes(e.tagName.toLowerCase()));if(t&&d.includes(t))return t;if(i)return a=[],n=d[0],n;var c,u;u=d,(c=a).length===u.length&&c.every((e,t)=>e===u[t])?l<=d.length&&l++:l=0;return n=d[d.length-1-l],a=d,n},d=(e,t,n,o)=>{const s=e=>{(e=>{if("markup-canvas"===e.data.source&&"canvas"===e.data.canvasName&&"zoom"===e.data.action){const t=e.data.data;console.log("zoom",t)}})(e)},a=n=>{((e,t,n,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return r(t),void o(null);o(i(e,n))})(n,e,o(),t)},l=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",s),document.addEventListener("click",a),document.addEventListener("keydown",l),()=>{window.removeEventListener("message",s),document.removeEventListener("click",a),document.removeEventListener("keydown",l)}};function c(e,t){const o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=o.top-r.top,a=o.left-r.left,l=n(["zoom","current"])??1;return{top:parseFloat((s/l).toFixed(5)),left:parseFloat((a/l).toFixed(5)),width:Math.max(4,parseFloat((o.width/l).toFixed(5))),height:parseFloat((o.height/l).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),l=n(["zoom","current"])??1;document.body.style.setProperty("--zoom",l.toString()),document.body.style.setProperty("--stroke-width",(2/l).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",`${a}px`);const d=document.createElementNS("http://www.w3.org/2000/svg","svg");d.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"),d.appendChild(u),i.appendChild(d),i})(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:l,width:i,height:d}=c(e,t);r.style.setProperty("--frame-top",`${a}px`),r.style.setProperty("--frame-left",`${l}px`),r.style.setProperty("--frame-width",`${i}px`),r.style.setProperty("--frame-height",`${d}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(),l=t(p),i=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,()=>{l(e,n)})),s=e,t="selectedNodeChanged",r=e?.getAttribute("data-layer-id")??null,window.parent.postMessage({source:"node-edit-utils",action:t,data:r,timestamp:Date.now()},"*"),m(e,n)},c=d(n,i,()=>{a.isEditing()&&a.blurEditMode(),s&&n&&(r(n),s=null,o?.disconnect())},a.getEditableNode),u={selectNode:i,getSelectedNode:()=>s,refreshHighlightFrame:()=>{l(s,n)},clearSelectedNode:()=>{r(n),s=null,o?.disconnect()},getEditableNode:()=>a.getEditableNode(),cleanup:()=>{c(),o?.disconnect(),a.blurEditMode(),l.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,l=0;const i=t(t=>{if(!s)return;n&&(n.style.cursor="ew-resize");const o=w(t,a,l);E(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,a=t.clientX,l=e.offsetWidth},i,e=>{e.preventDefault(),e.stopPropagation(),n&&(n.style.cursor="default"),s=!1},()=>{s=!1});return{setWidth:t=>{E(e,t)},cleanup:()=>{s=!1,i?.cleanup(),d(),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=[],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()}}}});

package/package.json

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

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

@@ -52,7 +52,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
     }
 
     selectedNode = node;
-    sendPostMessage("selectedNodeChanged", node?.getAttribute("data-layer-id") ?? null);
+    sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
     highlightNode(node, nodeProvider as HTMLElement) ?? null;
   };
 

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

@@ -1,4 +1,4 @@
-import { handlePostMessage } from "../../post-message/handlePostMessage";
+import { processPostMessage } from "@/lib/post-message/processPostMessage";
 import { handleNodeClick } from "./click/handleNodeClick";
 
 export const setupEventListener = (
@@ -8,7 +8,7 @@ export const setupEventListener = (
   getEditableNode: () => HTMLElement | null
 ): (() => void) => {
   const messageHandler = (event: MessageEvent) => {
-    handlePostMessage(event);
+    processPostMessage(event, onNodeSelected);
   };
 
   const documentClickHandler = (event: MouseEvent) => {

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

@@ -0,0 +1,21 @@
+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") {
+      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/dist/lib/post-message/handlePostMessage.d.ts

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

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

@@ -1,8 +0,0 @@
-export const handlePostMessage = (event: MessageEvent) => {
-  if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
-    if (event.data.action === "zoom") {
-      const zoom = event.data.data;
-      console.log("zoom", zoom);
-    }
-  }
-};