@node-edit-utils/core 2.0.2 → 2.0.4

package/dist/lib/viewport/constants.d.ts

@@ -3,3 +3,24 @@ export declare const RESIZE_CONFIG: {
     readonly minWidth: 320;
     readonly maxWidth: 1680;
 };
+export declare const RESIZE_PRESETS: readonly [{
+    readonly name: "Mobile";
+    readonly rawValue: 390;
+    readonly value: "320px";
+}, {
+    readonly name: "Tablet Portrait";
+    readonly rawValue: 768;
+    readonly value: "768px";
+}, {
+    readonly name: "Tablet Landscape";
+    readonly rawValue: 1024;
+    readonly value: "1024px";
+}, {
+    readonly name: "Notebook";
+    readonly rawValue: 1280;
+    readonly value: "1280px";
+}, {
+    readonly name: "Desktop";
+    readonly rawValue: 1680;
+    readonly value: "1680px";
+}];

package/dist/lib/viewport/resize/createResizePresets.d.ts

@@ -0,0 +1 @@
+export declare const createResizePresets: (resizeHandle: HTMLElement, container: HTMLElement, updateWidth: (container: HTMLElement, width: number) => void) => HTMLElement;

package/dist/lib/viewport/resize/updateActivePreset.d.ts

@@ -0,0 +1 @@
+export declare const updateActivePreset: (container: HTMLElement, width: number) => 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.2
+ * @version 2.0.4
  */
 'use strict';
 
@@ -459,7 +459,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
@@ -497,6 +497,33 @@ const RESIZE_CONFIG = {
     minWidth: 320,
     maxWidth: 1680,
 };
+const RESIZE_PRESETS = [
+    {
+        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",
+    },
+];
 
 const setupEventListener = (resizeHandle, startResize, handleResize, stopResize, blurResize) => {
     resizeHandle.addEventListener("mousedown", startResize);
@@ -513,11 +540,27 @@ const setupEventListener = (resizeHandle, startResize, handleResize, stopResize,
 
 const createResizeHandle = (container) => {
     const handle = document.createElement("div");
-    handle.className = "component-resize-handle resize-handle";
+    handle.className = "resize-handle";
     container.appendChild(handle);
     return handle;
 };
 
+const createResizePresets = (resizeHandle, container, updateWidth) => {
+    const presets = document.createElement("div");
+    presets.className = "resize-presets";
+    RESIZE_PRESETS.forEach((preset) => {
+        const button = document.createElement("button");
+        button.textContent = preset.name;
+        button.className = "resize-preset-button";
+        button.addEventListener("click", () => {
+            updateWidth(container, preset.rawValue);
+        });
+        presets.appendChild(button);
+    });
+    resizeHandle.appendChild(presets);
+    return presets;
+};
+
 const calcConstrainedWidth = (startWidth, deltaX) => {
     const newWidth = startWidth + Math.round(deltaX);
     return Math.max(RESIZE_CONFIG.minWidth, Math.min(RESIZE_CONFIG.maxWidth, newWidth));
@@ -530,14 +573,38 @@ const calcWidth = (event, startX, startWidth) => {
     return width;
 };
 
+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];
+            if (preset.rawValue === width) {
+                button.classList.add("is-active");
+            }
+            else {
+                button.classList.remove("is-active");
+            }
+        }
+    });
+};
+
 const updateWidth = (container, width) => {
     container.style.setProperty("--container-width", `${width}px`);
+    updateActivePreset(container, width);
 };
 
 const createViewport = (container) => {
     const canvas = getCanvasContainer();
+    // Remove any existing resize handle to prevent duplicates
+    const existingHandle = container.querySelector(".resize-handle");
+    if (existingHandle) {
+        existingHandle.remove();
+    }
     const resizeHandle = createResizeHandle(container);
     container.style.setProperty("--container-width", `${DEFAULT_WIDTH}px`);
+    createResizePresets(resizeHandle, container, updateWidth);
     let isDragging = false;
     let startX = 0;
     let startWidth = 0;
@@ -574,6 +641,7 @@ const createViewport = (container) => {
         isDragging = false;
         throttledHandleResize?.cleanup();
         removeListeners();
+        resizeHandle.remove();
     };
     return {
         setWidth: (width) => {

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.2
+ * @version 2.0.4
  */
 // biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
 function withRAFThrottle(func) {
@@ -457,7 +457,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
@@ -495,6 +495,33 @@ const RESIZE_CONFIG = {
     minWidth: 320,
     maxWidth: 1680,
 };
+const RESIZE_PRESETS = [
+    {
+        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",
+    },
+];
 
 const setupEventListener = (resizeHandle, startResize, handleResize, stopResize, blurResize) => {
     resizeHandle.addEventListener("mousedown", startResize);
@@ -511,11 +538,27 @@ const setupEventListener = (resizeHandle, startResize, handleResize, stopResize,
 
 const createResizeHandle = (container) => {
     const handle = document.createElement("div");
-    handle.className = "component-resize-handle resize-handle";
+    handle.className = "resize-handle";
     container.appendChild(handle);
     return handle;
 };
 
+const createResizePresets = (resizeHandle, container, updateWidth) => {
+    const presets = document.createElement("div");
+    presets.className = "resize-presets";
+    RESIZE_PRESETS.forEach((preset) => {
+        const button = document.createElement("button");
+        button.textContent = preset.name;
+        button.className = "resize-preset-button";
+        button.addEventListener("click", () => {
+            updateWidth(container, preset.rawValue);
+        });
+        presets.appendChild(button);
+    });
+    resizeHandle.appendChild(presets);
+    return presets;
+};
+
 const calcConstrainedWidth = (startWidth, deltaX) => {
     const newWidth = startWidth + Math.round(deltaX);
     return Math.max(RESIZE_CONFIG.minWidth, Math.min(RESIZE_CONFIG.maxWidth, newWidth));
@@ -528,14 +571,38 @@ const calcWidth = (event, startX, startWidth) => {
     return width;
 };
 
+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];
+            if (preset.rawValue === width) {
+                button.classList.add("is-active");
+            }
+            else {
+                button.classList.remove("is-active");
+            }
+        }
+    });
+};
+
 const updateWidth = (container, width) => {
     container.style.setProperty("--container-width", `${width}px`);
+    updateActivePreset(container, width);
 };
 
 const createViewport = (container) => {
     const canvas = getCanvasContainer();
+    // Remove any existing resize handle to prevent duplicates
+    const existingHandle = container.querySelector(".resize-handle");
+    if (existingHandle) {
+        existingHandle.remove();
+    }
     const resizeHandle = createResizeHandle(container);
     container.style.setProperty("--container-width", `${DEFAULT_WIDTH}px`);
+    createResizePresets(resizeHandle, container, updateWidth);
     let isDragging = false;
     let startX = 0;
     let startWidth = 0;
@@ -572,6 +639,7 @@ const createViewport = (container) => {
         isDragging = false;
         throttledHandleResize?.cleanup();
         removeListeners();
+        resizeHandle.remove();
     };
     return {
         setWidth: (width) => {

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.2
+ * @version 2.0.4
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -463,7 +463,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
@@ -501,6 +501,33 @@
         minWidth: 320,
         maxWidth: 1680,
     };
+    const RESIZE_PRESETS = [
+        {
+            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",
+        },
+    ];
 
     const setupEventListener = (resizeHandle, startResize, handleResize, stopResize, blurResize) => {
         resizeHandle.addEventListener("mousedown", startResize);
@@ -517,11 +544,27 @@
 
     const createResizeHandle = (container) => {
         const handle = document.createElement("div");
-        handle.className = "component-resize-handle resize-handle";
+        handle.className = "resize-handle";
         container.appendChild(handle);
         return handle;
     };
 
+    const createResizePresets = (resizeHandle, container, updateWidth) => {
+        const presets = document.createElement("div");
+        presets.className = "resize-presets";
+        RESIZE_PRESETS.forEach((preset) => {
+            const button = document.createElement("button");
+            button.textContent = preset.name;
+            button.className = "resize-preset-button";
+            button.addEventListener("click", () => {
+                updateWidth(container, preset.rawValue);
+            });
+            presets.appendChild(button);
+        });
+        resizeHandle.appendChild(presets);
+        return presets;
+    };
+
     const calcConstrainedWidth = (startWidth, deltaX) => {
         const newWidth = startWidth + Math.round(deltaX);
         return Math.max(RESIZE_CONFIG.minWidth, Math.min(RESIZE_CONFIG.maxWidth, newWidth));
@@ -534,14 +577,38 @@
         return width;
     };
 
+    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];
+                if (preset.rawValue === width) {
+                    button.classList.add("is-active");
+                }
+                else {
+                    button.classList.remove("is-active");
+                }
+            }
+        });
+    };
+
     const updateWidth = (container, width) => {
         container.style.setProperty("--container-width", `${width}px`);
+        updateActivePreset(container, width);
     };
 
     const createViewport = (container) => {
         const canvas = getCanvasContainer();
+        // Remove any existing resize handle to prevent duplicates
+        const existingHandle = container.querySelector(".resize-handle");
+        if (existingHandle) {
+            existingHandle.remove();
+        }
         const resizeHandle = createResizeHandle(container);
         container.style.setProperty("--container-width", `${DEFAULT_WIDTH}px`);
+        createResizePresets(resizeHandle, container, updateWidth);
         let isDragging = false;
         let startX = 0;
         let startWidth = 0;
@@ -578,6 +645,7 @@
             isDragging = false;
             throttledHandleResize?.cleanup();
             removeListeners();
+            resizeHandle.remove();
         };
         return {
             setWidth: (width) => {

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 i=[],d=0;const a=(e,t)=>{let n=null;const o=e.clientX,r=e.clientY,a=e.metaKey||e.ctrlKey,l=((e,t)=>{const n=document.elementsFromPoint(e,t);return Array.from(n).reduce((e,t)=>e.found?e:"node-provider"===t.getAttribute("data-role")?(e.found=!0,e):(e.elements.push(t),e),{elements:[],found:!1}).elements})(o,r).filter(e=>!s.includes(e.tagName.toLowerCase()));if(t&&l.includes(t))return t;if(a)return i=[],n=l[0],n;var c,u;u=l,(c=i).length===u.length&&c.every((e,t)=>e===u[t])?d<=l.length&&d++:d=0;return n=l[l.length-1-d],i=l,n},l=(e,t,n,o)=>{const s=e=>{(e=>{if("markup-canvas"===e.data.source&&"canvas"===e.data.canvasName&&"zoom"===e.data.action){const t=e.data.data;console.log("zoom",t)}})(e)},i=n=>{((e,t,n,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return r(t),void o(null);o(a(e,n))})(n,e,o(),t)},d=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",s),document.addEventListener("click",i),document.addEventListener("keydown",d),()=>{window.removeEventListener("message",s),document.removeEventListener("click",i),document.removeEventListener("keydown",d)}};function c(e,t){const o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=o.top-r.top,i=o.left-r.left,d=n(["zoom","current"])??1;return{top:parseFloat((s/d).toFixed(5)),left:parseFloat((i/d).toFixed(5)),width:Math.max(4,parseFloat((o.width/d).toFixed(5))),height:parseFloat((o.height/d).toFixed(5))}}const u=(e,t)=>{const n=document.createElement("div");n.className="node-tools",t.appendChild(n),((e,t)=>{const n=document.createElement("div");n.className="tag-label",n.textContent=e.tagName.toLowerCase(),t.appendChild(n)})(e,n)},m=(e,t)=>{if(!e)return;const r=o(t);r&&r.remove();const s=((e,t)=>{const{top:o,left:r,width:s,height:i}=c(e,t),d=n(["zoom","current"])??1;document.body.style.setProperty("--zoom",d.toString()),document.body.style.setProperty("--stroke-width",(2/d).toFixed(3));const a=document.createElement("div");a.classList.add("highlight-frame"),a.style.setProperty("--frame-top",`${o}px`),a.style.setProperty("--frame-left",`${r}px`),a.style.setProperty("--frame-width",`${s}px`),a.style.setProperty("--frame-height",`${i}px`);const l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.classList.add("highlight-frame-svg");const u=document.createElementNS("http://www.w3.org/2000/svg","rect");return u.setAttribute("x","0"),u.setAttribute("y","0"),u.setAttribute("width","100%"),u.setAttribute("height","100%"),u.classList.add("highlight-frame-rect"),l.appendChild(u),a.appendChild(l),a})(e,t);"true"===e.contentEditable&&s.classList.add("is-editable"),u(e,s),t.appendChild(s)},p=(e,t)=>{const r=o(t),s=n(["zoom","current"])??1;if(!r)return;s>=.3?t.style.setProperty("--tool-opacity","1"):t.style.setProperty("--tool-opacity","0");const{top:i,left:d,width:a,height:l}=c(e,t);r.style.setProperty("--frame-top",`${i}px`),r.style.setProperty("--frame-left",`${d}px`),r.style.setProperty("--frame-width",`${a}px`),r.style.setProperty("--frame-height",`${l}px`)},f=e=>{const t=e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),(()=>{const e=window.getSelection();if(e&&e.rangeCount>0){const t=e.getRangeAt(0);t.deleteContents();const n=document.createElement("br");t.insertNode(n),t.setStartAfter(n),t.setEndAfter(n),e.removeAllRanges(),e.addRange(t)}})())};return e.addEventListener("keydown",t),()=>{e.removeEventListener("keydown",t)}},y=(e,t)=>{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()},h=()=>{let e=null,t=!1,o=null;const r=()=>{if(t||!e)return;t=!0;var r;(r=e).contentEditable="false",r.classList.remove("is-editable"),r.style.outline="none",(()=>{const e=n(["keyboard","enable"]);e?.()})(),o?.(),e=null,t=!1};return{enableEditMode:(t,s)=>{if(e===t)return;e&&e!==t&&r();const i=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(t);i&&(e=t,(e=>{e.contentEditable="true",e.classList.add("is-editable"),e.style.outline="none"})(t),(()=>{const e=n(["keyboard","disable"]);e?.()})(),o=((e,t,n)=>{if(!t)return()=>{};e.addEventListener("blur",n);const o=f(e),r=y(e,t);return()=>{e.removeEventListener("blur",n),o(),r?.()}})(t,s,r))},blurEditMode:r,getEditableNode:()=>e,isEditing:()=>null!==e}},v=320,g=1680,b=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(v,Math.min(g,n))})(n,(e.clientX-t)/o);return r},w=(e,t)=>{e.style.setProperty("--container-width",`${t}px`)};e.createCanvasObserver=function(){const e=document.querySelector(".transform-layer");if(!e)return{disconnect:()=>{}};const o=t(()=>{(()=>{const e=n(["zoom","current"]);document.body.style.setProperty("--zoom",e.toFixed(5)),document.body.style.setProperty("--stroke-width",(2/e).toFixed(3)),document.body.dataset.zoom=e.toFixed(5),document.body.dataset.strokeWidth=(2/e).toFixed(3)})()}),r=new MutationObserver(()=>{o()});return r.observe(e,{attributes:!0,attributeOldValue:!0,subtree:!0,childList:!0}),{disconnect:function(){o.cleanup(),r.disconnect()}}},e.createNodeTools=e=>{const n=e;let o=null,s=null;const i=h(),d=t(p),a=e=>{if(i.isEditing()){const t=i.getEditableNode();t&&t!==e&&i.blurEditMode()}var t,r;o?.disconnect(),e&&n&&(i.enableEditMode(e,n),o=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(n,()=>{d(e,n)})),s=e,t="selectedNodeChanged",r=e?.getAttribute("data-layer-id")??null,window.parent.postMessage({source:"node-edit-utils",action:t,data:r,timestamp:Date.now()},"*"),m(e,n)},c=l(n,a,()=>{i.isEditing()&&i.blurEditMode(),s&&n&&(r(n),s=null,o?.disconnect())},i.getEditableNode),u={selectNode:a,getSelectedNode:()=>s,refreshHighlightFrame:()=>{d(s,n)},clearSelectedNode:()=>{r(n),s=null,o?.disconnect()},getEditableNode:()=>i.getEditableNode(),cleanup:()=>{c(),o?.disconnect(),i.blurEditMode(),d.cleanup()}};var f,y;return f="nodeTools",y=u,"undefined"!=typeof window&&(window[f]=y),u},e.createViewport=e=>{const n=document.querySelector(".canvas-container"),o=(e=>{const t=document.createElement("div");return t.className="component-resize-handle resize-handle",e.appendChild(t),t})(e);e.style.setProperty("--container-width","400px");let r=!1,s=0,i=0;const d=t(t=>{if(!r)return;n&&(n.style.cursor="ew-resize");const o=b(t,s,i);w(e,o)}),a=((e,t,n,o,r)=>(e.addEventListener("mousedown",t),document.addEventListener("mousemove",n),document.addEventListener("mouseup",o),window.addEventListener("blur",r),()=>{e.removeEventListener("mousedown",t),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),window.removeEventListener("blur",r)}))(o,t=>{t.preventDefault(),t.stopPropagation(),r=!0,s=t.clientX,i=e.offsetWidth},d,e=>{e.preventDefault(),e.stopPropagation(),n&&(n.style.cursor="default"),r=!1},()=>{r=!1});return{setWidth:t=>{w(e,t)},cleanup:()=>{r=!1,d?.cleanup(),a()}}}});
+!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 l=(e,t)=>{let n=null;const o=e.clientX,r=e.clientY,l=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(l)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},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(l(e,n))})(n,e,o(),t)},i=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),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 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 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),l.appendChild(d),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:i,width:l,height:d}=c(e,t);r.style.setProperty("--frame-top",`${a}px`),r.style.setProperty("--frame-left",`${i}px`),r.style.setProperty("--frame-width",`${l}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(),i=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,()=>{i(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=d(n,l,()=>{a.isEditing()&&a.blurEditMode(),s&&n&&(r(n),s=null,o?.disconnect())},a.getEditableNode),u={selectNode:l,getSelectedNode:()=>s,refreshHighlightFrame:()=>{i(s,n)},clearSelectedNode:()=>{r(n),s=null,o?.disconnect()},getEditableNode:()=>a.getEditableNode(),cleanup:()=>{c(),o?.disconnect(),a.blurEditMode(),i.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,i=0;const l=t(t=>{if(!s)return;n&&(n.style.cursor="ew-resize");const o=w(t,a,i);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,i=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(),d(),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:transform 25ms ease,opacity .1s ease;z-index:10000}.highlight-frame{height:var(--frame-height);left:var(--frame-left);pointer-events:none;position:absolute;top:var(--frame-top);width:var(--frame-width);z-index:1000}.highlight-frame-svg{height:100%;left:0;overflow:visible;position:absolute;top:0;width:100%}.highlight-frame-rect{fill:none;stroke:oklch(62.7% .265 303.9);stroke-width:var(--stroke-width)}.tag-label{align-items:center;background-color:oklch(62.7% .265 303.9);border-radius:.375rem;color:#fff;display:flex;font-size:.575rem;font-weight:500;height:1.25rem;justify-content:center;line-height:1;padding:0 .375rem;text-transform:uppercase}.viewport{position:relative;width:var(--container-width)}.resize-handle{align-items:center;cursor:ew-resize;display:flex;height:40px;justify-content:center;opacity:0;pointer-events:auto;position:absolute;right:-12px;top:1.25rem;transform:scale(calc(1/var(--zoom)));transform-origin:top left;transition:transform 25ms ease,opacity .2s ease-in-out;width:12px;z-index:10000}.viewport:hover .resize-handle{opacity:1}.resize-handle:before{background:oklch(55.2% .016 285.938);border-radius:4px;content:"";height:32px;position:relative;right:0;top:0;transition:transform .2s ease-in-out;width:3px}.resize-handle:hover:before{transform:scaleY(1.3)}.is-editable{outline:none;user-select:text;&::selection{background:oklch(62.7% .265 303.9/.3)}&::-moz-selection{background:oklch(62.7% .265 303.9/.3)}&::-webkit-selection{background:oklch(62.7% .265 303.9/.3)}}
+.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)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-edit-utils/core",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "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/styles/styles.css

@@ -20,9 +20,7 @@
   z-index: 10000;
   transform: scale(calc(1 / var(--zoom))) translate3d(0, 100%, 0);
   transform-origin: bottom left;
-  transition:
-    transform 0.025s ease,
-    opacity 0.1s ease;
+  transition: opacity 0.1s ease;
   opacity: var(--tool-opacity);
   padding-top: 0.25rem;
   display: flex;
@@ -85,18 +83,20 @@
   z-index: 10000;
   display: flex;
   opacity: 0;
+  visibility: hidden;
   align-items: center;
   justify-content: center;
   pointer-events: auto;
   transform: scale(calc(1 / var(--zoom)));
   transform-origin: top left;
   transition:
-    transform 0.025s ease,
-    opacity 0.2s ease-in-out;
+    opacity 0.1s ease-in-out,
+    visibility 0.1s ease-in-out;
 }
 
 .viewport:hover .resize-handle {
   opacity: 1;
+  visibility: visible;
 }
 
 .resize-handle::before {
@@ -115,6 +115,49 @@
   transform: scaleY(1.3);
 }
 
+.resize-presets {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding-left: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    visibility 0.1s ease-in-out,
+    opacity 0.1s ease-in-out;
+}
+
+.resize-handle:hover .resize-presets {
+  visibility: visible;
+  opacity: 1;
+}
+
+.resize-preset-button {
+  background: oklch(55.2% 0.016 285.938 / 0.7);
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  font-size: 0.6875rem;
+  text-wrap: nowrap;
+  text-align: left;
+  backdrop-filter: blur(8px);
+  transition: background 0.1s ease-in-out;
+  color: white;
+  width: fit-content;
+
+  &:hover {
+    background: oklch(55.2% 0.016 285.938 / 1);
+  }
+
+  &.is-active {
+    background: oklch(45.7% 0.24 277.023);
+  }
+}
+
 .is-editable {
   outline: none;
   user-select: text;

package/src/lib/viewport/constants.ts

@@ -4,3 +4,31 @@ export const RESIZE_CONFIG = {
   minWidth: 320,
   maxWidth: 1680,
 } as const;
+
+export const RESIZE_PRESETS = [
+  {
+    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",
+  },
+] as const;

package/src/lib/viewport/createViewport.ts

@@ -3,15 +3,25 @@ import { withRAFThrottle } from "../helpers";
 import { DEFAULT_WIDTH } from "./constants";
 import { setupEventListener } from "./events/setupEventListener";
 import { createResizeHandle } from "./resize/createResizeHandle";
+import { createResizePresets } from "./resize/createResizePresets";
 import type { Viewport } from "./types";
 import { calcWidth } from "./width/calcWidth";
 import { updateWidth } from "./width/updateWidth";
 
 export const createViewport = (container: HTMLElement): Viewport => {
   const canvas: HTMLElement | null = getCanvasContainer();
+
+  // Remove any existing resize handle to prevent duplicates
+  const existingHandle = container.querySelector(".resize-handle");
+  if (existingHandle) {
+    existingHandle.remove();
+  }
+
   const resizeHandle = createResizeHandle(container);
   container.style.setProperty("--container-width", `${DEFAULT_WIDTH}px`);
 
+  createResizePresets(resizeHandle, container, updateWidth);
+
   let isDragging: boolean = false;
   let startX: number = 0;
   let startWidth: number = 0;
@@ -59,6 +69,7 @@ export const createViewport = (container: HTMLElement): Viewport => {
     isDragging = false;
     throttledHandleResize?.cleanup();
     removeListeners();
+    resizeHandle.remove();
   };
 
   return {

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

@@ -1,7 +1,7 @@
 export const createResizeHandle = (container: HTMLElement): HTMLElement => {
   const handle = document.createElement("div");
 
-  handle.className = "component-resize-handle resize-handle";
+  handle.className = "resize-handle";
 
   container.appendChild(handle);
 

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

@@ -0,0 +1,24 @@
+import { RESIZE_PRESETS } from "../constants";
+
+export const createResizePresets = (
+  resizeHandle: HTMLElement,
+  container: HTMLElement,
+  updateWidth: (container: HTMLElement, width: number) => void
+): HTMLElement => {
+  const presets = document.createElement("div");
+  presets.className = "resize-presets";
+
+  RESIZE_PRESETS.forEach((preset) => {
+    const button = document.createElement("button");
+    button.textContent = preset.name;
+    button.className = "resize-preset-button";
+    button.addEventListener("click", () => {
+      updateWidth(container, preset.rawValue);
+    });
+    presets.appendChild(button);
+  });
+
+  resizeHandle.appendChild(presets);
+
+  return presets;
+};

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

@@ -0,0 +1,17 @@
+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];
+      if (preset.rawValue === width) {
+        button.classList.add("is-active");
+      } else {
+        button.classList.remove("is-active");
+      }
+    }
+  });
+};

package/src/lib/viewport/width/updateWidth.ts

@@ -1,3 +1,6 @@
+import { updateActivePreset } from "../resize/updateActivePreset";
+
 export const updateWidth = (container: HTMLElement, width: number): void => {
   container.style.setProperty("--container-width", `${width}px`);
+  updateActivePreset(container, width);
 };