@node-edit-utils/core 2.1.2 → 2.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Markup Canvas
|
|
3
3
|
* High-performance markup canvas with zoom and pan capabilities
|
|
4
|
-
* @version 2.1.
|
|
4
|
+
* @version 2.1.3
|
|
5
5
|
*/
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
@@ -318,14 +318,14 @@ const updateHighlightFrameVisibility = (node, nodeProvider) => {
|
|
|
318
318
|
frame.style.display = hasHiddenClass ? "none" : "";
|
|
319
319
|
};
|
|
320
320
|
|
|
321
|
-
const
|
|
322
|
-
const
|
|
323
|
-
|
|
321
|
+
const disableCanvasTextMode = () => {
|
|
322
|
+
const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
|
|
323
|
+
disableTextEditMode?.();
|
|
324
324
|
};
|
|
325
325
|
|
|
326
|
-
const
|
|
327
|
-
const
|
|
328
|
-
|
|
326
|
+
const enableCanvasTextMode = () => {
|
|
327
|
+
const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
|
|
328
|
+
enableTextEditMode?.();
|
|
329
329
|
};
|
|
330
330
|
|
|
331
331
|
const insertLineBreak = () => {
|
|
@@ -421,7 +421,7 @@ const nodeText = () => {
|
|
|
421
421
|
if (editable) {
|
|
422
422
|
editableNode = node;
|
|
423
423
|
makeNodeEditable(node);
|
|
424
|
-
|
|
424
|
+
enableCanvasTextMode();
|
|
425
425
|
cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
|
|
426
426
|
}
|
|
427
427
|
};
|
|
@@ -438,7 +438,7 @@ const nodeText = () => {
|
|
|
438
438
|
blurInProgress = true;
|
|
439
439
|
const nodeToCleanup = editableNode;
|
|
440
440
|
makeNodeNonEditable(nodeToCleanup);
|
|
441
|
-
|
|
441
|
+
disableCanvasTextMode();
|
|
442
442
|
cleanup?.();
|
|
443
443
|
editableNode = null;
|
|
444
444
|
blurInProgress = false;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Markup Canvas
|
|
3
3
|
* High-performance markup canvas with zoom and pan capabilities
|
|
4
|
-
* @version 2.1.
|
|
4
|
+
* @version 2.1.3
|
|
5
5
|
*/
|
|
6
6
|
// biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
|
|
7
7
|
function withRAFThrottle(func) {
|
|
@@ -316,14 +316,14 @@ const updateHighlightFrameVisibility = (node, nodeProvider) => {
|
|
|
316
316
|
frame.style.display = hasHiddenClass ? "none" : "";
|
|
317
317
|
};
|
|
318
318
|
|
|
319
|
-
const
|
|
320
|
-
const
|
|
321
|
-
|
|
319
|
+
const disableCanvasTextMode = () => {
|
|
320
|
+
const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
|
|
321
|
+
disableTextEditMode?.();
|
|
322
322
|
};
|
|
323
323
|
|
|
324
|
-
const
|
|
325
|
-
const
|
|
326
|
-
|
|
324
|
+
const enableCanvasTextMode = () => {
|
|
325
|
+
const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
|
|
326
|
+
enableTextEditMode?.();
|
|
327
327
|
};
|
|
328
328
|
|
|
329
329
|
const insertLineBreak = () => {
|
|
@@ -419,7 +419,7 @@ const nodeText = () => {
|
|
|
419
419
|
if (editable) {
|
|
420
420
|
editableNode = node;
|
|
421
421
|
makeNodeEditable(node);
|
|
422
|
-
|
|
422
|
+
enableCanvasTextMode();
|
|
423
423
|
cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
|
|
424
424
|
}
|
|
425
425
|
};
|
|
@@ -436,7 +436,7 @@ const nodeText = () => {
|
|
|
436
436
|
blurInProgress = true;
|
|
437
437
|
const nodeToCleanup = editableNode;
|
|
438
438
|
makeNodeNonEditable(nodeToCleanup);
|
|
439
|
-
|
|
439
|
+
disableCanvasTextMode();
|
|
440
440
|
cleanup?.();
|
|
441
441
|
editableNode = null;
|
|
442
442
|
blurInProgress = false;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Markup Canvas
|
|
3
3
|
* High-performance markup canvas with zoom and pan capabilities
|
|
4
|
-
* @version 2.1.
|
|
4
|
+
* @version 2.1.3
|
|
5
5
|
*/
|
|
6
6
|
(function (global, factory) {
|
|
7
7
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
|
@@ -322,14 +322,14 @@
|
|
|
322
322
|
frame.style.display = hasHiddenClass ? "none" : "";
|
|
323
323
|
};
|
|
324
324
|
|
|
325
|
-
const
|
|
326
|
-
const
|
|
327
|
-
|
|
325
|
+
const disableCanvasTextMode = () => {
|
|
326
|
+
const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
|
|
327
|
+
disableTextEditMode?.();
|
|
328
328
|
};
|
|
329
329
|
|
|
330
|
-
const
|
|
331
|
-
const
|
|
332
|
-
|
|
330
|
+
const enableCanvasTextMode = () => {
|
|
331
|
+
const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
|
|
332
|
+
enableTextEditMode?.();
|
|
333
333
|
};
|
|
334
334
|
|
|
335
335
|
const insertLineBreak = () => {
|
|
@@ -425,7 +425,7 @@
|
|
|
425
425
|
if (editable) {
|
|
426
426
|
editableNode = node;
|
|
427
427
|
makeNodeEditable(node);
|
|
428
|
-
|
|
428
|
+
enableCanvasTextMode();
|
|
429
429
|
cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
|
|
430
430
|
}
|
|
431
431
|
};
|
|
@@ -442,7 +442,7 @@
|
|
|
442
442
|
blurInProgress = true;
|
|
443
443
|
const nodeToCleanup = editableNode;
|
|
444
444
|
makeNodeNonEditable(nodeToCleanup);
|
|
445
|
-
|
|
445
|
+
disableCanvasTextMode();
|
|
446
446
|
cleanup?.();
|
|
447
447
|
editableNode = null;
|
|
448
448
|
blurInProgress = false;
|
|
@@ -1 +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=[],i=0;const
|
|
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=[],i=0;const d=(e,t)=>{let n=null;const o=e.clientX,r=e.clientY,d=e.metaKey||e.ctrlKey,l=((e,t)=>{const n=document.elementsFromPoint(e,t);return Array.from(n).reduce((e,t)=>e.found?e:"node-provider"===t.getAttribute("data-role")?(e.found=!0,e):(e.elements.push(t),e),{elements:[],found:!1}).elements})(o,r).filter(e=>!s.includes(e.tagName.toLowerCase())&&!e.classList.contains("select-none"));if(t&&l.includes(t))return t;if(d)return a=[],n=l[0],n;var c,u;u=l,(c=a).length===u.length&&c.every((e,t)=>e===u[t])?i<=l.length&&i++:i=0;return n=l[l.length-1-i],a=l,n},l=(e,t,n,o)=>{const s=e=>{((e,t)=>{if("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 r(t),void o(null);o(d(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 d=document.createElement("div");d.classList.add("highlight-frame"),d.style.setProperty("--frame-top",`${o}px`),d.style.setProperty("--frame-left",`${r}px`),d.style.setProperty("--frame-width",`${s}px`),d.style.setProperty("--frame-height",`${a}px`);const l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.classList.add("highlight-frame-svg");const u=document.createElementNS("http://www.w3.org/2000/svg","rect");return u.setAttribute("x","0"),u.setAttribute("y","0"),u.setAttribute("width","100%"),u.setAttribute("height","100%"),u.classList.add("highlight-frame-rect"),l.appendChild(u),d.appendChild(l),d})(e,t);"true"===e.contentEditable&&s.classList.add("is-editable"),u(e,s),t.appendChild(s)},p=(e,t)=>{const r=o(t),s=n(["zoom","current"])??1;if(!r)return;s>=.3?t.style.setProperty("--tool-opacity","1"):t.style.setProperty("--tool-opacity","0");const{top:a,left:i,width:d,height:l}=c(e,t);r.style.setProperty("--frame-top",`${a}px`),r.style.setProperty("--frame-left",`${i}px`),r.style.setProperty("--frame-width",`${d}px`),r.style.setProperty("--frame-height",`${l}px`)},v=(e,t)=>{const n=o(t);if(!n)return;const r=e.className,s=/\bhidden\b/.test(r)||e.classList.contains("select-none");n.style.display=s?"none":""},h=e=>{const t=e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),(()=>{const e=window.getSelection();if(e&&e.rangeCount>0){const t=e.getRangeAt(0);t.deleteContents();const n=document.createElement("br");t.insertNode(n),t.setStartAfter(n),t.setEndAfter(n),e.removeAllRanges(),e.addRange(t)}})())};return e.addEventListener("keydown",t),()=>{e.removeEventListener("keydown",t)}},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,()=>{p(e,t)});return()=>n.disconnect()},y=()=>{let e=null,t=!1,o=null;const r=()=>{if(t||!e)return;t=!0;var r;(r=e).contentEditable="false",r.classList.remove("is-editable"),r.style.outline="none",(()=>{const e=n(["keyboard","disableTextEditMode"]);e?.()})(),o?.(),e=null,t=!1};return{enableEditMode:(t,s)=>{if(e===t)return;e&&e!==t&&r();const a=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(t);a&&(e=t,(e=>{e.contentEditable="true",e.classList.add("is-editable"),e.style.outline="none"})(t),(()=>{const e=n(["keyboard","enableTextEditMode"]);e?.()})(),o=((e,t,n)=>{if(!t)return()=>{};e.addEventListener("blur",n);const o=h(e),r=f(e,t);return()=>{e.removeEventListener("blur",n),o(),r?.()}})(t,s,r))},blurEditMode:r,getEditableNode:()=>e,isEditing:()=>null!==e}},b=320,g=1680,w=[{name:"Mobile",rawValue:390,value:"320px"},{name:"Tablet Portrait",rawValue:768,value:"768px"},{name:"Tablet Landscape",rawValue:1024,value:"1024px"},{name:"Notebook",rawValue:1280,value:"1280px"},{name:"Desktop",rawValue:1680,value:"1680px"}],E=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(b,Math.min(g,n))})(n,(e.clientX-t)/o);return r},x=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<w.length&&(w[n].rawValue===t?e.classList.add("is-active"):e.classList.remove("is-active"))})})(e,t)};e.createCanvasObserver=function(){const e=document.querySelector(".transform-layer");if(!e)return{disconnect:()=>{}};const o=t(()=>{(()=>{const e=n(["zoom","current"]);document.body.style.setProperty("--zoom",e.toFixed(5)),document.body.style.setProperty("--stroke-width",(2/e).toFixed(3)),document.body.dataset.zoom=e.toFixed(5),document.body.dataset.strokeWidth=(2/e).toFixed(3)})()}),r=new MutationObserver(()=>{o()});return r.observe(e,{attributes:!0,attributeOldValue:!0,subtree:!0,childList:!0}),{disconnect:function(){o.cleanup(),r.disconnect()}}},e.createNodeTools=e=>{const n=e;let o=null,s=null,a=null;const i=y(),d=t(p),c=e=>{if(a!==e){if(i.isEditing()){const t=i.getEditableNode();t&&t!==e&&i.blurEditMode()}var t,r;o?.disconnect(),s?.disconnect(),e&&n&&(i.enableEditMode(e,n),o=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(n,()=>{d(e,n)}),s=new MutationObserver(()=>{d(e,n),v(e,n)}),s.observe(e,{attributes:!0,attributeFilter:["class"]})),a=e,t="selectedNodeChanged",r=e?.getAttribute("data-node-id")??null,window.parent.postMessage({source:"node-edit-utils",action:t,data:r,timestamp:Date.now()},"*"),m(e,n),e&&n&&v(e,n)}},u=l(n,c,()=>{i.isEditing()&&i.blurEditMode(),a&&n&&(r(n),a=null,o?.disconnect(),s?.disconnect())},i.getEditableNode),h={selectNode:c,getSelectedNode:()=>a,refreshHighlightFrame:()=>{d(a,n)},clearSelectedNode:()=>{r(n),a=null,o?.disconnect(),s?.disconnect()},getEditableNode:()=>i.getEditableNode(),cleanup:()=>{u(),o?.disconnect(),s?.disconnect(),i.blurEditMode(),d.cleanup()}};var f,b;return f="nodeTools",b=h,"undefined"!=typeof window&&(window[f]=b),h},e.createViewport=e=>{const n=document.querySelector(".canvas-container"),o=e.querySelector(".resize-handle");o&&o.remove();const r=(e=>{const t=document.createElement("div");return t.className="resize-handle",e.appendChild(t),t})(e);e.style.setProperty("--container-width","400px"),((e,t,n)=>{const o=document.createElement("div");o.className="resize-presets",w.forEach(e=>{const r=document.createElement("button");r.textContent=e.name,r.className="resize-preset-button",r.addEventListener("click",()=>{n(t,e.rawValue)}),o.appendChild(r)}),e.appendChild(o)})(r,e,x);let s=!1,a=0,i=0;const d=t(t=>{if(!s)return;n&&(n.style.cursor="ew-resize");const o=E(t,a,i);x(e,o)}),l=((e,t,n,o,r)=>(e.addEventListener("mousedown",t),document.addEventListener("mousemove",n),document.addEventListener("mouseup",o),window.addEventListener("blur",r),()=>{e.removeEventListener("mousedown",t),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),window.removeEventListener("blur",r)}))(r,t=>{t.preventDefault(),t.stopPropagation(),s=!0,a=t.clientX,i=e.offsetWidth},d,e=>{e.preventDefault(),e.stopPropagation(),n&&(n.style.cursor="default"),s=!1},()=>{s=!1});return{setWidth:t=>{x(e,t)},cleanup:()=>{s=!1,d?.cleanup(),l(),r.remove()}}}});
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { disableCanvasTextMode } from "@/lib/canvas/disableCanvasTextMode";
|
|
2
|
+
import { enableCanvasTextMode } from "@/lib/canvas/enableCanvasTextMode";
|
|
3
3
|
import { setupNodeListeners } from "./events/setupNodeListeners";
|
|
4
4
|
import { hasTextContent } from "./helpers/hasTextContent";
|
|
5
5
|
import { makeNodeEditable } from "./helpers/makeNodeEditable";
|
|
@@ -26,7 +26,7 @@ export const nodeText = (): NodeText => {
|
|
|
26
26
|
editableNode = node;
|
|
27
27
|
|
|
28
28
|
makeNodeEditable(node);
|
|
29
|
-
|
|
29
|
+
enableCanvasTextMode();
|
|
30
30
|
|
|
31
31
|
cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
|
|
32
32
|
}
|
|
@@ -50,7 +50,7 @@ export const nodeText = (): NodeText => {
|
|
|
50
50
|
const nodeToCleanup = editableNode;
|
|
51
51
|
|
|
52
52
|
makeNodeNonEditable(nodeToCleanup);
|
|
53
|
-
|
|
53
|
+
disableCanvasTextMode();
|
|
54
54
|
cleanup?.();
|
|
55
55
|
|
|
56
56
|
editableNode = null;
|