@bitovi/vybit 0.13.1 → 0.13.3

package/README.md

@@ -1,6 +1,6 @@
 # VyBit
 
-Change designs, draw mockups, provide suggestions, and report bugs __in your browser__ and send them to your favorite coding agent (Claude, Cursor, Copilot, etc) to be implemented. VyBit works with React apps built with Tailwind v3 or v4. 
+Change designs, draw mockups, provide suggestions, and report bugs __in your browser__ and send them to your favorite coding agent (Claude, Cursor, Copilot, etc) to be implemented. VyBit works with React or Angular apps built with Tailwind v3 or v4. 
 
 <img width="1453" height="903" alt="Cursor_and_Carton_Case_Management" src="https://github.com/user-attachments/assets/59b8e280-a827-4fa0-95e3-6c350afacbc9" />
 

package/overlay/dist/overlay.js

@@ -564,6 +564,30 @@ ${pad}</${tag}>`;
   }
   .hover-tooltip .ht-dim { opacity: 0.55; }
   /* \u2500\u2500 Element toolbar \u2014 3f unified bar \u2500\u2500 */
+  .el-toolbar .drag-handle {
+    width: 12px;
+    height: 28px;
+    cursor: move;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: 5px 0 0 5px;
+    opacity: 0.5;
+    transition: opacity 120ms ease-out, background 120ms ease-out;
+  }
+  .el-toolbar .drag-handle:hover {
+    background: #333;
+    opacity: 1;
+  }
+  .el-toolbar .drag-handle:active {
+    background: #444;
+    opacity: 1;
+  }
+  .el-toolbar .drag-handle svg {
+    width: 6px;
+    height: 10px;
+  }
   .el-toolbar {
     position: fixed;
     z-index: 999999;
@@ -3633,6 +3657,7 @@ ${pad}</${tag}>`;
   var REPLACE_SVG = `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M6,15H1a1,1,0,0,1-1-1V2A1,1,0,0,1,1,1H6A1,1,0,0,1,7,2V14A1,1,0,0,1,6,15Z"/><rect x="9" y="6" width="2" height="4"/><path d="M14,13H11V12H9v2a1,1,0,0,0,1,1h5a1,1,0,0,0,1-1V12H14Z"/><path d="M15,1H10A1,1,0,0,0,9,2V4h2V3h3V4h2V2A1,1,0,0,0,15,1Z"/><rect x="14" y="6" width="2" height="4"/></svg>`;
   var SEND_SVG = `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M15.7,7.3l-14-7C1.4,0.1,1.1,0.1,0.8,0.3C0.6,0.4,0.5,0.7,0.5,1l1.8,6H9v2H2.3L0.5,15c-0.1,0.3,0,0.6,0.2,0.7C0.8,15.9,1,16,1.1,16c0.1,0,0.3,0,0.4-0.1l14-7C15.8,8.7,16,8.4,16,8S15.8,7.3,15.7,7.3z"/></svg>`;
   var MIC_SVG = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm-1.5 4v7a1.5 1.5 0 0 0 3 0V5a1.5 1.5 0 0 0-3 0zM6 11a1 1 0 0 1 1 1 5 5 0 0 0 10 0 1 1 0 1 1 2 0 7 7 0 0 1-6 6.93V21h2a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2h2v-2.07A7 7 0 0 1 5 12a1 1 0 0 1 1-1z"/></svg>`;
+  var DRAG_GRIP_SVG = `<svg viewBox="0 0 6 10" fill="#999"><circle cx="1.5" cy="1.5" r="1"/><circle cx="4.5" cy="1.5" r="1"/><circle cx="1.5" cy="5" r="1"/><circle cx="4.5" cy="5" r="1"/><circle cx="1.5" cy="8.5" r="1"/><circle cx="4.5" cy="8.5" r="1"/></svg>`;
   var VYBIT_LOGO_SVG = `<svg width="26" height="27" viewBox="0 0 210 221" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path class="eb-fill" d="M141.54 137.71L103.87 140.38C102.98 140.44 102.2 140.97 101.8 141.77C101.41 142.57 101.47 143.51 101.96 144.25C102.27 144.72 109.46 155.39 121.96 155.39C122.3 155.39 122.65 155.39 123 155.37C138.61 154.64 143.83 141.66 144.05 141.11C144.36 140.31 144.24 139.41 143.73 138.72C143.22 138.03 142.4 137.65 141.54 137.71Z"/>
     <path class="eb-eye-l eb-fill" d="M80.6401 93.03C76.7801 93.22 73.8 96.5 73.99 100.36L74.7501 115.96C74.9401 119.85 78.2701 122.84 82.1501 122.61C85.9801 122.38 88.9101 119.11 88.7301 115.28L87.9701 99.68C87.7801 95.82 84.5001 92.84 80.6401 93.03Z"/>
@@ -4029,6 +4054,15 @@ ${pad}</${tag}>`;
     if (state.currentMode === "insert") return "place";
     return state.tabPreference === "component" ? "replace" : "design";
   }
+  function clearSelectionState() {
+    state.currentEquivalentNodes = [];
+    state.currentTargetEl = null;
+    state.currentBoundary = null;
+    state.cachedNearGroups = null;
+    state.cachedExactMatches = null;
+    state.manuallyAddedNodes = /* @__PURE__ */ new Set();
+    state.addMode = false;
+  }
 
   // overlay/src/element-highlight.ts
   function highlightElement(el) {
@@ -4151,6 +4185,44 @@ ${pad}</${tag}>`;
       bannerTimeout = null;
     }, 8e3);
   }
+  var toolbarDragged = false;
+  function isToolbarDragged() {
+    return toolbarDragged;
+  }
+  function setupToolbarDrag(handle, toolbar) {
+    let startX = 0, startY = 0, startLeft = 0, startTop = 0;
+    const onMove = (e) => {
+      const dx = e.clientX - startX;
+      const dy = e.clientY - startY;
+      toolbar.style.left = `${startLeft + dx}px`;
+      toolbar.style.top = `${startTop + dy}px`;
+      if (state.msgRowEl) {
+        const tRect = toolbar.getBoundingClientRect();
+        state.msgRowEl.style.left = `${tRect.left}px`;
+        state.msgRowEl.style.top = `${tRect.bottom + 4}px`;
+      }
+      if (state.pickerEl) {
+        const addGroupBtn = toolbar.querySelector(".tb-adjunct");
+        if (addGroupBtn) {
+          positionWithFlip(addGroupBtn, state.pickerEl, "bottom-start");
+        }
+      }
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    handle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      toolbarDragged = true;
+      startX = e.clientX;
+      startY = e.clientY;
+      startLeft = parseFloat(toolbar.style.left) || 0;
+      startTop = parseFloat(toolbar.style.top) || 0;
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    });
+  }
   var setSelectMode;
   var showToast;
   var onBrowseLocked;
@@ -4183,21 +4255,9 @@ ${pad}</${tag}>`;
       await positionWithFlip(toolbar, msgRow, "top-start", { disableFlip: true });
     }
   }
-  function clearSelection() {
-    cancelInsert();
-    clearLockedInsert();
-    revertPreview();
-    clearHighlights();
-    state.currentEquivalentNodes = [];
-    state.currentTargetEl = null;
-    state.currentBoundary = null;
-    state.cachedNearGroups = null;
-    state.cachedExactMatches = null;
-    state.manuallyAddedNodes = /* @__PURE__ */ new Set();
-    state.addMode = false;
-  }
   function showDrawButton(targetEl) {
     removeDrawButton();
+    toolbarDragged = false;
     const instanceCount = state.currentEquivalentNodes.length;
     const toolbar = document.createElement("div");
     toolbar.className = "el-toolbar";
@@ -4205,6 +4265,12 @@ ${pad}</${tag}>`;
     toolbar.style.top = "0px";
     state.shadowRoot.appendChild(toolbar);
     state.toolbarEl = toolbar;
+    const dragHandle = document.createElement("div");
+    dragHandle.className = "drag-handle";
+    dragHandle.title = "Drag to move toolbar";
+    dragHandle.innerHTML = DRAG_GRIP_SVG;
+    toolbar.appendChild(dragHandle);
+    setupToolbarDrag(dragHandle, toolbar);
     if (state.currentMode === "select") {
       const selectGroup = document.createElement("div");
       selectGroup.className = "mode-group ring";
@@ -4214,7 +4280,11 @@ ${pad}</${tag}>`;
       selectBtn.style.cssText = "color: #5fd4da; border-radius: 0;";
       selectBtn.addEventListener("click", (e) => {
         e.stopPropagation();
-        clearSelection();
+        cancelInsert();
+        clearLockedInsert();
+        revertPreview();
+        clearHighlights();
+        clearSelectionState();
         setSelectMode(true);
         sendTo("panel", { type: "DESELECT_ELEMENT" });
       });
@@ -4253,7 +4323,11 @@ ${pad}</${tag}>`;
       selectBtn.style.cssText = "opacity: 0.4;";
       selectBtn.addEventListener("click", (e) => {
         e.stopPropagation();
-        clearSelection();
+        cancelInsert();
+        clearLockedInsert();
+        revertPreview();
+        clearHighlights();
+        clearSelectionState();
         state.currentMode = "select";
         state.currentTab = resolveTab();
         sendTo("panel", { type: "MODE_CHANGED", mode: "select" });
@@ -4271,8 +4345,12 @@ ${pad}</${tag}>`;
     }
     insertBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      clearSelection();
+      cancelInsert();
+      clearLockedInsert();
+      revertPreview();
+      clearHighlights();
       setSelectMode(false);
+      clearSelectionState();
       if (state.currentMode === "insert") {
         sendTo("panel", { type: "DESELECT_ELEMENT" });
         startBrowse(state.shadowHost, onBrowseLocked);
@@ -4330,7 +4408,9 @@ ${pad}</${tag}>`;
       toolbar.appendChild(placeBtn);
     }
     let msgRow;
-    msgRow = createMsgRow(state.currentBoundary, () => positionBothMenus(targetEl, toolbar, msgRow));
+    msgRow = createMsgRow(state.currentBoundary, () => {
+      if (!toolbarDragged) positionBothMenus(targetEl, toolbar, msgRow);
+    });
     state.shadowRoot.appendChild(msgRow);
     state.msgRowEl = msgRow;
     positionBothMenus(targetEl, toolbar, msgRow);
@@ -7336,8 +7416,10 @@ ${pad}</${tag}>`;
     return hex;
   }
   async function clickHandler(e) {
+    console.log("[overlay-debug] clickHandler fired", { target: e.target?.tagName, selectModeOn: state.selectModeOn, active: state.active });
     const composed = e.composedPath();
     if (composed.some((el) => el === state.shadowHost)) {
+      console.log("[overlay-debug] click ignored: shadowHost");
       return;
     }
     if (isActive()) return;
@@ -7459,6 +7541,7 @@ ${pad}</${tag}>`;
     }
   }
   function setSelectMode2(on) {
+    console.log("[overlay-debug] setSelectMode", on, "active:", state.active, "currentMode:", state.currentMode);
     state.selectModeOn = on;
     if (on) {
       document.documentElement.style.cursor = "crosshair";
@@ -7484,6 +7567,7 @@ ${pad}</${tag}>`;
       document.removeEventListener("mousemove", mouseMoveHandler);
       clearHoverPreview();
     }
+    sendTo("panel", { type: "SELECT_MODE_CHANGED", active: on });
   }
   var PANEL_OPEN_KEY = "tw-inspector-panel-open";
   function toggleInspect(btn) {
@@ -7528,13 +7612,7 @@ ${pad}</${tag}>`;
     cancelInsert();
     clearLockedInsert();
     removeAllDesignCanvases();
-    state.currentEquivalentNodes = [];
-    state.currentTargetEl = null;
-    state.currentBoundary = null;
-    state.cachedNearGroups = null;
-    state.cachedExactMatches = null;
-    state.manuallyAddedNodes = /* @__PURE__ */ new Set();
-    state.addMode = false;
+    clearSelectionState();
     setSelectMode2(false);
     sendTo("panel", { type: "RESET_SELECTION" });
     sendTo("panel", { type: "COMPONENT_DISARMED" });
@@ -7551,7 +7629,7 @@ ${pad}</${tag}>`;
   }
   function init() {
     const params = new URLSearchParams(location.search);
-    if (params.get("viewMode") === "story" || params.get("vybit-ghost") === "1") return;
+    if (params.get("vybit-ghost") === "1") return;
     state.shadowHost = document.createElement("div");
     state.shadowHost.id = "tw-visual-editor-host";
     state.shadowHost.style.cssText = css(SHADOW_HOST);
@@ -7595,7 +7673,9 @@ ${pad}</${tag}>`;
           return;
         }
         if (state.currentTargetEl) {
-          clearSelection();
+          revertPreview();
+          clearHighlights();
+          clearSelectionState();
           if (state.currentMode === "select") {
             setSelectMode2(true);
             sendTo("panel", { type: "DESELECT_ELEMENT" });
@@ -7618,6 +7698,7 @@ ${pad}</${tag}>`;
     const wsUrl = SERVER_ORIGIN.replace(/^http/, "ws");
     connect(wsUrl);
     onMessage((msg) => {
+      console.log("[overlay-debug] WS message from panel:", msg.type, msg);
       if (msg.type === "TOGGLE_SELECT_MODE") {
         if (msg.active) {
           state.active = true;
@@ -7639,10 +7720,7 @@ ${pad}</${tag}>`;
         clearHighlights();
         cancelInsert();
         clearLockedInsert();
-        state.currentEquivalentNodes = [];
-        state.currentTargetEl = null;
-        state.currentBoundary = null;
-        state.cachedNearGroups = null;
+        clearSelectionState();
         state.currentMode = msg.mode;
         if (msg.mode === "insert") {
           setSelectMode2(false);
@@ -7862,7 +7940,9 @@ ${pad}</${tag}>`;
         state.currentEquivalentNodes.forEach((n) => highlightElement(n));
       }
       if (state.toolbarEl && state.currentTargetEl) {
-        positionBothMenus(state.currentTargetEl, state.toolbarEl, state.msgRowEl);
+        if (!isToolbarDragged()) {
+          positionBothMenus(state.currentTargetEl, state.toolbarEl, state.msgRowEl);
+        }
       }
     });
     window.addEventListener(
@@ -7873,7 +7953,9 @@ ${pad}</${tag}>`;
           state.currentEquivalentNodes.forEach((n) => highlightElement(n));
         }
         if (state.toolbarEl && state.currentTargetEl) {
-          positionBothMenus(state.currentTargetEl, state.toolbarEl, state.msgRowEl);
+          if (!isToolbarDragged()) {
+            positionBothMenus(state.currentTargetEl, state.toolbarEl, state.msgRowEl);
+          }
         }
       },
       { capture: true, passive: true }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitovi/vybit",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "description": "Browser overlay + inspector panel + MCP server for visually editing Tailwind CSS classes on a running React app",
   "keywords": [
     "tailwind",

package/panel/dist/assets/{DesignMode-DotlKICs.js → DesignMode-DiJSKaJo.js}

@@ -1,4 +1,4 @@
-import{r as F,j as P,c as vo,s as Ie,o as yo,a as xo}from"./index-BWb2WAKo.js";function p(o,t,e){return(t=function(s){var r=function(i,n){if(typeof i!="object"||!i)return i;var a=i[Symbol.toPrimitive];if(a!==void 0){var h=a.call(i,n);if(typeof h!="object")return h;throw new TypeError("@@toPrimitive must return a primitive value.")}return(n==="string"?String:Number)(i)}(s,"string");return typeof r=="symbol"?r:r+""}(t))in o?Object.defineProperty(o,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[t]=e,o}function ii(o,t){var e=Object.keys(o);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(o);t&&(s=s.filter(function(r){return Object.getOwnPropertyDescriptor(o,r).enumerable})),e.push.apply(e,s)}return e}function m(o){for(var t=1;t<arguments.length;t++){var e=arguments[t]!=null?arguments[t]:{};t%2?ii(Object(e),!0).forEach(function(s){p(o,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(e)):ii(Object(e)).forEach(function(s){Object.defineProperty(o,s,Object.getOwnPropertyDescriptor(e,s))})}return o}function $(o,t){if(o==null)return{};var e,s,r=function(n,a){if(n==null)return{};var h={};for(var c in n)if({}.hasOwnProperty.call(n,c)){if(a.indexOf(c)>=0)continue;h[c]=n[c]}return h}(o,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(o);for(s=0;s<i.length;s++)e=i[s],t.indexOf(e)>=0||{}.propertyIsEnumerable.call(o,e)&&(r[e]=o[e])}return r}function Nt(o,t){return t||(t=o.slice(0)),Object.freeze(Object.defineProperties(o,{raw:{value:Object.freeze(t)}}))}class ni{constructor(){p(this,"browserShadowBlurConstant",1),p(this,"DPI",96),p(this,"devicePixelRatio",typeof window<"u"?window.devicePixelRatio:1),p(this,"perfLimitSizeTotal",2097152),p(this,"maxCacheSideLimit",4096),p(this,"minCacheSideLimit",256),p(this,"disableStyleCopyPaste",!1),p(this,"enableGLFiltering",!0),p(this,"textureSize",4096),p(this,"forceGLPutImageData",!1),p(this,"cachesBoundsOfCurve",!1),p(this,"fontPaths",{}),p(this,"NUM_FRACTION_DIGITS",4)}}const Y=new class extends ni{constructor(o){super(),this.configure(o)}configure(){let o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};Object.assign(this,o)}addFonts(){let o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};this.fontPaths=m(m({},this.fontPaths),o)}removeFonts(){(arguments.length>0&&arguments[0]!==void 0?arguments[0]:[]).forEach(o=>{delete this.fontPaths[o]})}clearFonts(){this.fontPaths={}}restoreDefaults(o){const t=new ni,e=(o==null?void 0:o.reduce((s,r)=>(s[r]=t[r],s),{}))||t;this.configure(e)}},ce=function(o){for(var t=arguments.length,e=new Array(t>1?t-1:0),s=1;s<t;s++)e[s-1]=arguments[s];return console[o]("fabric",...e)};class Ht extends Error{constructor(t,e){super("fabric: ".concat(t),e)}}class _o extends Ht{constructor(t){super("".concat(t," 'options.signal' is in 'aborted' state"))}}class bo{}class wo extends bo{testPrecision(t,e){const s="precision ".concat(e,` float;
+import{r as F,j as P,c as vo,s as Ie,o as yo,a as xo}from"./index--Jf_7IdL.js";function p(o,t,e){return(t=function(s){var r=function(i,n){if(typeof i!="object"||!i)return i;var a=i[Symbol.toPrimitive];if(a!==void 0){var h=a.call(i,n);if(typeof h!="object")return h;throw new TypeError("@@toPrimitive must return a primitive value.")}return(n==="string"?String:Number)(i)}(s,"string");return typeof r=="symbol"?r:r+""}(t))in o?Object.defineProperty(o,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[t]=e,o}function ii(o,t){var e=Object.keys(o);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(o);t&&(s=s.filter(function(r){return Object.getOwnPropertyDescriptor(o,r).enumerable})),e.push.apply(e,s)}return e}function m(o){for(var t=1;t<arguments.length;t++){var e=arguments[t]!=null?arguments[t]:{};t%2?ii(Object(e),!0).forEach(function(s){p(o,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(e)):ii(Object(e)).forEach(function(s){Object.defineProperty(o,s,Object.getOwnPropertyDescriptor(e,s))})}return o}function $(o,t){if(o==null)return{};var e,s,r=function(n,a){if(n==null)return{};var h={};for(var c in n)if({}.hasOwnProperty.call(n,c)){if(a.indexOf(c)>=0)continue;h[c]=n[c]}return h}(o,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(o);for(s=0;s<i.length;s++)e=i[s],t.indexOf(e)>=0||{}.propertyIsEnumerable.call(o,e)&&(r[e]=o[e])}return r}function Nt(o,t){return t||(t=o.slice(0)),Object.freeze(Object.defineProperties(o,{raw:{value:Object.freeze(t)}}))}class ni{constructor(){p(this,"browserShadowBlurConstant",1),p(this,"DPI",96),p(this,"devicePixelRatio",typeof window<"u"?window.devicePixelRatio:1),p(this,"perfLimitSizeTotal",2097152),p(this,"maxCacheSideLimit",4096),p(this,"minCacheSideLimit",256),p(this,"disableStyleCopyPaste",!1),p(this,"enableGLFiltering",!0),p(this,"textureSize",4096),p(this,"forceGLPutImageData",!1),p(this,"cachesBoundsOfCurve",!1),p(this,"fontPaths",{}),p(this,"NUM_FRACTION_DIGITS",4)}}const Y=new class extends ni{constructor(o){super(),this.configure(o)}configure(){let o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};Object.assign(this,o)}addFonts(){let o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};this.fontPaths=m(m({},this.fontPaths),o)}removeFonts(){(arguments.length>0&&arguments[0]!==void 0?arguments[0]:[]).forEach(o=>{delete this.fontPaths[o]})}clearFonts(){this.fontPaths={}}restoreDefaults(o){const t=new ni,e=(o==null?void 0:o.reduce((s,r)=>(s[r]=t[r],s),{}))||t;this.configure(e)}},ce=function(o){for(var t=arguments.length,e=new Array(t>1?t-1:0),s=1;s<t;s++)e[s-1]=arguments[s];return console[o]("fabric",...e)};class Ht extends Error{constructor(t,e){super("fabric: ".concat(t),e)}}class _o extends Ht{constructor(t){super("".concat(t," 'options.signal' is in 'aborted' state"))}}class bo{}class wo extends bo{testPrecision(t,e){const s="precision ".concat(e,` float;
 void main(){}`),r=t.createShader(t.FRAGMENT_SHADER);return!!r&&(t.shaderSource(r,s),t.compileShader(r),!!t.getShaderParameter(r,t.COMPILE_STATUS))}queryWebGL(t){const e=t.getContext("webgl");e&&(this.maxTextureSize=e.getParameter(e.MAX_TEXTURE_SIZE),this.GLPrecision=["highp","mediump","lowp"].find(s=>this.testPrecision(e,s)),e.getExtension("WEBGL_lose_context").loseContext(),ce("log","WebGL: max texture size ".concat(this.maxTextureSize)))}isSupported(t){return!!this.maxTextureSize&&this.maxTextureSize>=t}}const So={};let oi;const Gt=()=>oi||(oi={document,window,isTouchSupported:"ontouchstart"in window||"ontouchstart"in document||window&&window.navigator&&window.navigator.maxTouchPoints>0,WebGLProbe:new wo,dispose(){},copyPasteData:So}),Pe=()=>Gt().document,Ns=()=>Gt().window,tn=()=>{var o;return Math.max((o=Y.devicePixelRatio)!==null&&o!==void 0?o:Ns().devicePixelRatio,1)},Ve=new class{constructor(){p(this,"boundsOfCurveCache",{}),this.charWidthsCache=new Map}getFontCache(o){let{fontFamily:t,fontStyle:e,fontWeight:s}=o;t=t.toLowerCase();const r=this.charWidthsCache;r.has(t)||r.set(t,new Map);const i=r.get(t),n="".concat(e.toLowerCase(),"_").concat((s+"").toLowerCase());return i.has(n)||i.set(n,new Map),i.get(n)}clearFontCache(o){o?this.charWidthsCache.delete((o||"").toLowerCase()):this.charWidthsCache=new Map}limitDimsByArea(o){const{perfLimitSizeTotal:t}=Y,e=Math.sqrt(t*o);return[Math.floor(e),Math.floor(t/e)]}},xr="6.9.1";function Os(){}const Ze=Math.PI/2,Ps=2*Math.PI,jr=Math.PI/180,ft=Object.freeze([1,0,0,1,0,0]),Fr=16,ne=.4477152502,R="center",N="left",mt="top",_r="bottom",Q="right",vt="none",Lr=/\r?\n/,en="moving",Us="scaling",sn="rotating",Rr="rotate",rn="skewing",Ne="resizing",Co="modifyPoly",To="modifyPath",As="changed",qs="scale",_t="scaleX",Mt="scaleY",Ae="skewX",je="skewY",ot="fill",yt="stroke",js="modified",xe="json",nr="svg",M=new class{constructor(){this[xe]=new Map,this[nr]=new Map}has(o){return this[xe].has(o)}getClass(o){const t=this[xe].get(o);if(!t)throw new Ht("No class registered for ".concat(o));return t}setClass(o,t){t?this[xe].set(t,o):(this[xe].set(o.type,o),this[xe].set(o.type.toLowerCase(),o))}getSVGClass(o){return this[nr].get(o)}setSVGClass(o,t){this[nr].set(t??o.type.toLowerCase(),o)}},Fs=new class extends Array{remove(o){const t=this.indexOf(o);t>-1&&this.splice(t,1)}cancelAll(){const o=this.splice(0);return o.forEach(t=>t.abort()),o}cancelByCanvas(o){if(!o)return[];const t=this.filter(e=>{var s;return e.target===o||typeof e.target=="object"&&((s=e.target)===null||s===void 0?void 0:s.canvas)===o});return t.forEach(e=>e.abort()),t}cancelByTarget(o){if(!o)return[];const t=this.filter(e=>e.target===o);return t.forEach(e=>e.abort()),t}};class Oo{constructor(){p(this,"__eventListeners",{})}on(t,e){if(this.__eventListeners||(this.__eventListeners={}),typeof t=="object")return Object.entries(t).forEach(s=>{let[r,i]=s;this.on(r,i)}),()=>this.off(t);if(e){const s=t;return this.__eventListeners[s]||(this.__eventListeners[s]=[]),this.__eventListeners[s].push(e),()=>this.off(s,e)}return()=>!1}once(t,e){if(typeof t=="object"){const s=[];return Object.entries(t).forEach(r=>{let[i,n]=r;s.push(this.once(i,n))}),()=>s.forEach(r=>r())}if(e){const s=this.on(t,function(){for(var r=arguments.length,i=new Array(r),n=0;n<r;n++)i[n]=arguments[n];e.call(this,...i),s()});return s}return()=>!1}_removeEventListener(t,e){if(this.__eventListeners[t])if(e){const s=this.__eventListeners[t],r=s.indexOf(e);r>-1&&s.splice(r,1)}else this.__eventListeners[t]=[]}off(t,e){if(this.__eventListeners)if(t===void 0)for(const s in this.__eventListeners)this._removeEventListener(s);else typeof t=="object"?Object.entries(t).forEach(s=>{let[r,i]=s;this._removeEventListener(r,i)}):this._removeEventListener(t,e)}fire(t,e){var s;if(!this.__eventListeners)return;const r=(s=this.__eventListeners[t])===null||s===void 0?void 0:s.concat();if(r)for(let i=0;i<r.length;i++)r[i].call(this,e||{})}}const Se=(o,t)=>{const e=o.indexOf(t);return e!==-1&&o.splice(e,1),o},Qt=o=>{if(o===0)return 1;switch(Math.abs(o)/Ze){case 1:case 3:return 0;case 2:return-1}return Math.cos(o)},te=o=>{if(o===0)return 0;const t=o/Ze,e=Math.sign(o);switch(t){case 1:return e;case 2:return 0;case 3:return-e}return Math.sin(o)};class x{constructor(){let t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:0,e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:0;typeof t=="object"?(this.x=t.x,this.y=t.y):(this.x=t,this.y=e)}add(t){return new x(this.x+t.x,this.y+t.y)}addEquals(t){return this.x+=t.x,this.y+=t.y,this}scalarAdd(t){return new x(this.x+t,this.y+t)}scalarAddEquals(t){return this.x+=t,this.y+=t,this}subtract(t){return new x(this.x-t.x,this.y-t.y)}subtractEquals(t){return this.x-=t.x,this.y-=t.y,this}scalarSubtract(t){return new x(this.x-t,this.y-t)}scalarSubtractEquals(t){return this.x-=t,this.y-=t,this}multiply(t){return new x(this.x*t.x,this.y*t.y)}scalarMultiply(t){return new x(this.x*t,this.y*t)}scalarMultiplyEquals(t){return this.x*=t,this.y*=t,this}divide(t){return new x(this.x/t.x,this.y/t.y)}scalarDivide(t){return new x(this.x/t,this.y/t)}scalarDivideEquals(t){return this.x/=t,this.y/=t,this}eq(t){return this.x===t.x&&this.y===t.y}lt(t){return this.x<t.x&&this.y<t.y}lte(t){return this.x<=t.x&&this.y<=t.y}gt(t){return this.x>t.x&&this.y>t.y}gte(t){return this.x>=t.x&&this.y>=t.y}lerp(t){let e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:.5;return e=Math.max(Math.min(1,e),0),new x(this.x+(t.x-this.x)*e,this.y+(t.y-this.y)*e)}distanceFrom(t){const e=this.x-t.x,s=this.y-t.y;return Math.sqrt(e*e+s*s)}midPointFrom(t){return this.lerp(t)}min(t){return new x(Math.min(this.x,t.x),Math.min(this.y,t.y))}max(t){return new x(Math.max(this.x,t.x),Math.max(this.y,t.y))}toString(){return"".concat(this.x,",").concat(this.y)}setXY(t,e){return this.x=t,this.y=e,this}setX(t){return this.x=t,this}setY(t){return this.y=t,this}setFromPoint(t){return this.x=t.x,this.y=t.y,this}swap(t){const e=this.x,s=this.y;this.x=t.x,this.y=t.y,t.x=e,t.y=s}clone(){return new x(this.x,this.y)}rotate(t){let e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:Br;const s=te(t),r=Qt(t),i=this.subtract(e);return new x(i.x*r-i.y*s,i.x*s+i.y*r).add(e)}transform(t){let e=arguments.length>1&&arguments[1]!==void 0&&arguments[1];return new x(t[0]*this.x+t[2]*this.y+(e?0:t[4]),t[1]*this.x+t[3]*this.y+(e?0:t[5]))}}const Br=new x(0,0),ks=o=>!!o&&Array.isArray(o._objects);function nn(o){class t extends o{constructor(){super(...arguments),p(this,"_objects",[])}_onObjectAdded(s){}_onObjectRemoved(s){}_onStackOrderChanged(s){}add(){for(var s=arguments.length,r=new Array(s),i=0;i<s;i++)r[i]=arguments[i];const n=this._objects.push(...r);return r.forEach(a=>this._onObjectAdded(a)),n}insertAt(s){for(var r=arguments.length,i=new Array(r>1?r-1:0),n=1;n<r;n++)i[n-1]=arguments[n];return this._objects.splice(s,0,...i),i.forEach(a=>this._onObjectAdded(a)),this._objects.length}remove(){const s=this._objects,r=[];for(var i=arguments.length,n=new Array(i),a=0;a<i;a++)n[a]=arguments[a];return n.forEach(h=>{const c=s.indexOf(h);c!==-1&&(s.splice(c,1),r.push(h),this._onObjectRemoved(h))}),r}forEachObject(s){this.getObjects().forEach((r,i,n)=>s(r,i,n))}getObjects(){for(var s=arguments.length,r=new Array(s),i=0;i<s;i++)r[i]=arguments[i];return r.length===0?[...this._objects]:this._objects.filter(n=>n.isType(...r))}item(s){return this._objects[s]}isEmpty(){return this._objects.length===0}size(){return this._objects.length}contains(s,r){return!!this._objects.includes(s)||!!r&&this._objects.some(i=>i instanceof t&&i.contains(s,!0))}complexity(){return this._objects.reduce((s,r)=>s+=r.complexity?r.complexity():0,0)}sendObjectToBack(s){return!(!s||s===this._objects[0])&&(Se(this._objects,s),this._objects.unshift(s),this._onStackOrderChanged(s),!0)}bringObjectToFront(s){return!(!s||s===this._objects[this._objects.length-1])&&(Se(this._objects,s),this._objects.push(s),this._onStackOrderChanged(s),!0)}sendObjectBackwards(s,r){if(!s)return!1;const i=this._objects.indexOf(s);if(i!==0){const n=this.findNewLowerIndex(s,i,r);return Se(this._objects,s),this._objects.splice(n,0,s),this._onStackOrderChanged(s),!0}return!1}bringObjectForward(s,r){if(!s)return!1;const i=this._objects.indexOf(s);if(i!==this._objects.length-1){const n=this.findNewUpperIndex(s,i,r);return Se(this._objects,s),this._objects.splice(n,0,s),this._onStackOrderChanged(s),!0}return!1}moveObjectTo(s,r){return s!==this._objects[r]&&(Se(this._objects,s),this._objects.splice(r,0,s),this._onStackOrderChanged(s),!0)}findNewLowerIndex(s,r,i){let n;if(i){n=r;for(let a=r-1;a>=0;--a)if(s.isOverlapping(this._objects[a])){n=a;break}}else n=r-1;return n}findNewUpperIndex(s,r,i){let n;if(i){n=r;for(let a=r+1;a<this._objects.length;++a)if(s.isOverlapping(this._objects[a])){n=a;break}}else n=r+1;return n}collectObjects(s){let{left:r,top:i,width:n,height:a}=s,{includeIntersecting:h=!0}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};const c=[],l=new x(r,i),u=l.add(new x(n,a));for(let d=this._objects.length-1;d>=0;d--){const g=this._objects[d];g.selectable&&g.visible&&(h&&g.intersectsWithRect(l,u)||g.isContainedWithinRect(l,u)||h&&g.containsPoint(l)||h&&g.containsPoint(u))&&c.push(g)}return c}}return t}class on extends Oo{_setOptions(){let t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};for(const e in t)this.set(e,t[e])}_setObject(t){for(const e in t)this._set(e,t[e])}set(t,e){return typeof t=="object"?this._setObject(t):this._set(t,e),this}_set(t,e){this[t]=e}toggle(t){const e=this.get(t);return typeof e=="boolean"&&this.set(t,!e),this}get(t){return this[t]}}function Ds(o){return Ns().requestAnimationFrame(o)}function ko(o){return Ns().cancelAnimationFrame(o)}let Do=0;const le=()=>Do++,ee=()=>{const o=Pe().createElement("canvas");if(!o||o.getContext===void 0)throw new Ht("Failed to create `canvas` element");return o},Mo=()=>Pe().createElement("img"),Et=o=>{const t=ee();return t.width=o.width,t.height=o.height,t},an=(o,t,e)=>o.toDataURL("image/".concat(t),e),hn=(o,t,e)=>new Promise((s,r)=>{o.toBlob(s,"image/".concat(t),e)}),tt=o=>o*jr,se=o=>o/jr,Eo=o=>o.every((t,e)=>t===ft[e]),pt=(o,t,e)=>new x(o).transform(t,e),Rt=o=>{const t=1/(o[0]*o[3]-o[1]*o[2]),e=[t*o[3],-t*o[1],-t*o[2],t*o[0],0,0],{x:s,y:r}=new x(o[4],o[5]).transform(e,!0);return e[4]=-s,e[5]=-r,e},ct=(o,t,e)=>[o[0]*t[0]+o[2]*t[1],o[1]*t[0]+o[3]*t[1],o[0]*t[2]+o[2]*t[3],o[1]*t[2]+o[3]*t[3],e?0:o[0]*t[4]+o[2]*t[5]+o[4],e?0:o[1]*t[4]+o[3]*t[5]+o[5]],Ir=(o,t)=>o.reduceRight((e,s)=>s&&e?ct(s,e,t):s||e,void 0)||ft.concat(),cn=o=>{let[t,e]=o;return Math.atan2(e,t)},Ls=o=>{const t=cn(o),e=Math.pow(o[0],2)+Math.pow(o[1],2),s=Math.sqrt(e),r=(o[0]*o[3]-o[2]*o[1])/s,i=Math.atan2(o[0]*o[2]+o[1]*o[3],e);return{angle:se(t),scaleX:s,scaleY:r,skewX:se(i),skewY:0,translateX:o[4]||0,translateY:o[5]||0}},Qe=function(o){return[1,0,0,1,o,arguments.length>1&&arguments[1]!==void 0?arguments[1]:0]};function Fe(){let{angle:o=0}=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},{x:t=0,y:e=0}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};const s=tt(o),r=Qt(s),i=te(s);return[r,i,-i,r,t?t-(r*t-i*e):0,e?e-(i*t+r*e):0]}const Wr=function(o){return[o,0,0,arguments.length>1&&arguments[1]!==void 0?arguments[1]:o,0,0]},ln=o=>Math.tan(tt(o)),un=o=>[1,0,ln(o),1,0,0],dn=o=>[1,ln(o),0,1,0,0],Ks=o=>{let{scaleX:t=1,scaleY:e=1,flipX:s=!1,flipY:r=!1,skewX:i=0,skewY:n=0}=o,a=Wr(s?-t:t,r?-e:e);return i&&(a=ct(a,un(i),!0)),n&&(a=ct(a,dn(n),!0)),a},Po=o=>{const{translateX:t=0,translateY:e=0,angle:s=0}=o;let r=Qe(t,e);s&&(r=ct(r,Fe({angle:s})));const i=Ks(o);return Eo(i)||(r=ct(r,i)),r},Ms=function(o){let{signal:t,crossOrigin:e=null}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};return new Promise(function(s,r){if(t&&t.aborted)return r(new _o("loadImage"));const i=Mo();let n;t&&(n=function(h){i.src="",r(h)},t.addEventListener("abort",n,{once:!0}));const a=function(){i.onload=i.onerror=null,n&&(t==null||t.removeEventListener("abort",n)),s(i)};o?(i.onload=a,i.onerror=function(){n&&(t==null||t.removeEventListener("abort",n)),r(new Ht("Error loading ".concat(i.src)))},e&&(i.crossOrigin=e),i.src=o):a()})},Ue=function(o){let{signal:t,reviver:e=Os}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};return new Promise((s,r)=>{const i=[];t&&t.addEventListener("abort",r,{once:!0}),Promise.all(o.map(n=>M.getClass(n.type).fromObject(n,{signal:t}).then(a=>(e(n,a),i.push(a),a)))).then(s).catch(n=>{i.forEach(a=>{a.dispose&&a.dispose()}),r(n)}).finally(()=>{t&&t.removeEventListener("abort",r)})})},$s=function(o){let{signal:t}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};return new Promise((e,s)=>{const r=[];t&&t.addEventListener("abort",s,{once:!0});const i=Object.values(o).map(a=>a&&a.type&&M.has(a.type)?Ue([a],{signal:t}).then(h=>{let[c]=h;return r.push(c),c}):a),n=Object.keys(o);Promise.all(i).then(a=>a.reduce((h,c,l)=>(h[n[l]]=c,h),{})).then(e).catch(a=>{r.forEach(h=>{h.dispose&&h.dispose()}),s(a)}).finally(()=>{t&&t.removeEventListener("abort",s)})})},Le=function(o){return(arguments.length>1&&arguments[1]!==void 0?arguments[1]:[]).reduce((t,e)=>(e in o&&(t[e]=o[e]),t),{})},Xr=(o,t)=>Object.keys(o).reduce((e,s)=>(t(o[s],s,o)&&(e[s]=o[s]),e),{}),K=(o,t)=>parseFloat(Number(o).toFixed(t)),qe=o=>"matrix("+o.map(t=>K(t,Y.NUM_FRACTION_DIGITS)).join(" ")+")",Dt=o=>!!o&&o.toLive!==void 0,ai=o=>!!o&&typeof o.toObject=="function",hi=o=>!!o&&o.offsetX!==void 0&&"source"in o,de=o=>!!o&&"multiSelectionStacking"in o;function gn(o){const t=o&&Lt(o);let e=0,s=0;if(!o||!t)return{left:e,top:s};let r=o;const i=t.documentElement,n=t.body||{scrollLeft:0,scrollTop:0};for(;r&&(r.parentNode||r.host)&&(r=r.parentNode||r.host,r===t?(e=n.scrollLeft||i.scrollLeft||0,s=n.scrollTop||i.scrollTop||0):(e+=r.scrollLeft||0,s+=r.scrollTop||0),r.nodeType!==1||r.style.position!=="fixed"););return{left:e,top:s}}const Lt=o=>o.ownerDocument||null,fn=o=>{var t;return((t=o.ownerDocument)===null||t===void 0?void 0:t.defaultView)||null},pn=function(o,t,e){let{width:s,height:r}=e,i=arguments.length>3&&arguments[3]!==void 0?arguments[3]:1;o.width=s,o.height=r,i>1&&(o.setAttribute("width",(s*i).toString()),o.setAttribute("height",(r*i).toString()),t.scale(i,i))},br=(o,t)=>{let{width:e,height:s}=t;e&&(o.style.width=typeof e=="number"?"".concat(e,"px"):e),s&&(o.style.height=typeof s=="number"?"".concat(s,"px"):s)};function ci(o){return o.onselectstart!==void 0&&(o.onselectstart=()=>!1),o.style.userSelect=vt,o}class mn{constructor(t){p(this,"_originalCanvasStyle",void 0),p(this,"lower",void 0);const e=this.createLowerCanvas(t);this.lower={el:e,ctx:e.getContext("2d")}}createLowerCanvas(t){const e=(s=t)&&s.getContext!==void 0?t:t&&Pe().getElementById(t)||ee();var s;if(e.hasAttribute("data-fabric"))throw new Ht("Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?");return this._originalCanvasStyle=e.style.cssText,e.setAttribute("data-fabric","main"),e.classList.add("lower-canvas"),e}cleanupDOM(t){let{width:e,height:s}=t;const{el:r}=this.lower;r.classList.remove("lower-canvas"),r.removeAttribute("data-fabric"),r.setAttribute("width","".concat(e)),r.setAttribute("height","".concat(s)),r.style.cssText=this._originalCanvasStyle||"",this._originalCanvasStyle=void 0}setDimensions(t,e){const{el:s,ctx:r}=this.lower;pn(s,r,t,e)}setCSSDimensions(t){br(this.lower.el,t)}calcOffset(){return function(t){var e;const s=t&&Lt(t),r={left:0,top:0};if(!s)return r;const i=((e=fn(t))===null||e===void 0?void 0:e.getComputedStyle(t,null))||{};r.left+=parseInt(i.borderLeftWidth,10)||0,r.top+=parseInt(i.borderTopWidth,10)||0,r.left+=parseInt(i.paddingLeft,10)||0,r.top+=parseInt(i.paddingTop,10)||0;let n={left:0,top:0};const a=s.documentElement;t.getBoundingClientRect!==void 0&&(n=t.getBoundingClientRect());const h=gn(t);return{left:n.left+h.left-(a.clientLeft||0)+r.left,top:n.top+h.top-(a.clientTop||0)+r.top}}(this.lower.el)}dispose(){Gt().dispose(this.lower.el),delete this.lower}}const Ao={backgroundVpt:!0,backgroundColor:"",overlayVpt:!0,overlayColor:"",includeDefaultValues:!0,svgViewportTransformation:!0,renderOnAddRemove:!0,skipOffscreen:!0,enableRetinaScaling:!0,imageSmoothingEnabled:!0,controlsAboveOverlay:!1,allowTouchScrolling:!1,viewportTransform:[...ft]},jo=["objects"];class ts extends nn(on){get lowerCanvasEl(){var t;return(t=this.elements.lower)===null||t===void 0?void 0:t.el}get contextContainer(){var t;return(t=this.elements.lower)===null||t===void 0?void 0:t.ctx}static getDefaults(){return ts.ownDefaults}constructor(t){let e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};super(),Object.assign(this,this.constructor.getDefaults()),this.set(e),this.initElements(t),this._setDimensionsImpl({width:this.width||this.elements.lower.el.width||0,height:this.height||this.elements.lower.el.height||0}),this.skipControlsDrawing=!1,this.viewportTransform=[...this.viewportTransform],this.calcViewportBoundaries()}initElements(t){this.elements=new mn(t)}add(){const t=super.add(...arguments);return arguments.length>0&&this.renderOnAddRemove&&this.requestRenderAll(),t}insertAt(t){for(var e=arguments.length,s=new Array(e>1?e-1:0),r=1;r<e;r++)s[r-1]=arguments[r];const i=super.insertAt(t,...s);return s.length>0&&this.renderOnAddRemove&&this.requestRenderAll(),i}remove(){const t=super.remove(...arguments);return t.length>0&&this.renderOnAddRemove&&this.requestRenderAll(),t}_onObjectAdded(t){t.canvas&&t.canvas!==this&&(ce("warn",`Canvas is trying to add an object that belongs to a different canvas.
 Resulting to default behavior: removing object from previous canvas and adding to new canvas`),t.canvas.remove(t)),t._set("canvas",this),t.setCoords(),this.fire("object:added",{target:t}),t.fire("added",{target:this})}_onObjectRemoved(t){t._set("canvas",void 0),this.fire("object:removed",{target:t}),t.fire("removed",{target:this})}_onStackOrderChanged(){this.renderOnAddRemove&&this.requestRenderAll()}getRetinaScaling(){return this.enableRetinaScaling?tn():1}calcOffset(){return this._offset=this.elements.calcOffset()}getWidth(){return this.width}getHeight(){return this.height}setWidth(t,e){return this.setDimensions({width:t},e)}setHeight(t,e){return this.setDimensions({height:t},e)}_setDimensionsImpl(t){let{cssOnly:e=!1,backstoreOnly:s=!1}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};if(!e){const r=m({width:this.width,height:this.height},t);this.elements.setDimensions(r,this.getRetinaScaling()),this.hasLostContext=!0,this.width=r.width,this.height=r.height}s||this.elements.setCSSDimensions(t),this.calcOffset()}setDimensions(t,e){this._setDimensionsImpl(t,e),e&&e.cssOnly||this.requestRenderAll()}getZoom(){return this.viewportTransform[0]}setViewportTransform(t){this.viewportTransform=t,this.calcViewportBoundaries(),this.renderOnAddRemove&&this.requestRenderAll()}zoomToPoint(t,e){const s=t,r=[...this.viewportTransform],i=pt(t,Rt(r));r[0]=e,r[3]=e;const n=pt(i,r);r[4]+=s.x-n.x,r[5]+=s.y-n.y,this.setViewportTransform(r)}setZoom(t){this.zoomToPoint(new x(0,0),t)}absolutePan(t){const e=[...this.viewportTransform];return e[4]=-t.x,e[5]=-t.y,this.setViewportTransform(e)}relativePan(t){return this.absolutePan(new x(-t.x-this.viewportTransform[4],-t.y-this.viewportTransform[5]))}getElement(){return this.elements.lower.el}clearContext(t){t.clearRect(0,0,this.width,this.height)}getContext(){return this.elements.lower.ctx}clear(){this.remove(...this.getObjects()),this.backgroundImage=void 0,this.overlayImage=void 0,this.backgroundColor="",this.overlayColor="",this.clearContext(this.getContext()),this.fire("canvas:cleared"),this.renderOnAddRemove&&this.requestRenderAll()}renderAll(){this.cancelRequestedRender(),this.destroyed||this.renderCanvas(this.getContext(),this._objects)}renderAndReset(){this.nextRenderHandle=0,this.renderAll()}requestRenderAll(){this.nextRenderHandle||this.disposed||this.destroyed||(this.nextRenderHandle=Ds(()=>this.renderAndReset()))}calcViewportBoundaries(){const t=this.width,e=this.height,s=Rt(this.viewportTransform),r=pt({x:0,y:0},s),i=pt({x:t,y:e},s),n=r.min(i),a=r.max(i);return this.vptCoords={tl:n,tr:new x(a.x,n.y),bl:new x(n.x,a.y),br:a}}cancelRequestedRender(){this.nextRenderHandle&&(ko(this.nextRenderHandle),this.nextRenderHandle=0)}drawControls(t){}renderCanvas(t,e){if(this.destroyed)return;const s=this.viewportTransform,r=this.clipPath;this.calcViewportBoundaries(),this.clearContext(t),t.imageSmoothingEnabled=this.imageSmoothingEnabled,t.patternQuality="best",this.fire("before:render",{ctx:t}),this._renderBackground(t),t.save(),t.transform(s[0],s[1],s[2],s[3],s[4],s[5]),this._renderObjects(t,e),t.restore(),this.controlsAboveOverlay||this.skipControlsDrawing||this.drawControls(t),r&&(r._set("canvas",this),r.shouldCache(),r._transformDone=!0,r.renderCache({forClipping:!0}),this.drawClipPathOnCanvas(t,r)),this._renderOverlay(t),this.controlsAboveOverlay&&!this.skipControlsDrawing&&this.drawControls(t),this.fire("after:render",{ctx:t}),this.__cleanupTask&&(this.__cleanupTask(),this.__cleanupTask=void 0)}drawClipPathOnCanvas(t,e){const s=this.viewportTransform;t.save(),t.transform(...s),t.globalCompositeOperation="destination-in",e.transform(t),t.scale(1/e.zoomX,1/e.zoomY),t.drawImage(e._cacheCanvas,-e.cacheTranslationX,-e.cacheTranslationY),t.restore()}_renderObjects(t,e){for(let s=0,r=e.length;s<r;++s)e[s]&&e[s].render(t)}_renderBackgroundOrOverlay(t,e){const s=this["".concat(e,"Color")],r=this["".concat(e,"Image")],i=this.viewportTransform,n=this["".concat(e,"Vpt")];if(!s&&!r)return;const a=Dt(s);if(s){if(t.save(),t.beginPath(),t.moveTo(0,0),t.lineTo(this.width,0),t.lineTo(this.width,this.height),t.lineTo(0,this.height),t.closePath(),t.fillStyle=a?s.toLive(t):s,n&&t.transform(...i),a){t.transform(1,0,0,1,s.offsetX||0,s.offsetY||0);const h=s.gradientTransform||s.patternTransform;h&&t.transform(...h)}t.fill(),t.restore()}if(r){t.save();const{skipOffscreen:h}=this;this.skipOffscreen=n,n&&t.transform(...i),r.render(t),this.skipOffscreen=h,t.restore()}}_renderBackground(t){this._renderBackgroundOrOverlay(t,"background")}_renderOverlay(t){this._renderBackgroundOrOverlay(t,"overlay")}getCenter(){return{top:this.height/2,left:this.width/2}}getCenterPoint(){return new x(this.width/2,this.height/2)}centerObjectH(t){return this._centerObject(t,new x(this.getCenterPoint().x,t.getCenterPoint().y))}centerObjectV(t){return this._centerObject(t,new x(t.getCenterPoint().x,this.getCenterPoint().y))}centerObject(t){return this._centerObject(t,this.getCenterPoint())}viewportCenterObject(t){return this._centerObject(t,this.getVpCenter())}viewportCenterObjectH(t){return this._centerObject(t,new x(this.getVpCenter().x,t.getCenterPoint().y))}viewportCenterObjectV(t){return this._centerObject(t,new x(t.getCenterPoint().x,this.getVpCenter().y))}getVpCenter(){return pt(this.getCenterPoint(),Rt(this.viewportTransform))}_centerObject(t,e){t.setXY(e,R,R),t.setCoords(),this.renderOnAddRemove&&this.requestRenderAll()}toDatalessJSON(t){return this.toDatalessObject(t)}toObject(t){return this._toObjectMethod("toObject",t)}toJSON(){return this.toObject()}toDatalessObject(t){return this._toObjectMethod("toDatalessObject",t)}_toObjectMethod(t,e){const s=this.clipPath,r=s&&!s.excludeFromExport?this._toObject(s,t,e):null;return m(m(m({version:xr},Le(this,e)),{},{objects:this._objects.filter(i=>!i.excludeFromExport).map(i=>this._toObject(i,t,e))},this.__serializeBgOverlay(t,e)),r?{clipPath:r}:null)}_toObject(t,e,s){let r;this.includeDefaultValues||(r=t.includeDefaultValues,t.includeDefaultValues=!1);const i=t[e](s);return this.includeDefaultValues||(t.includeDefaultValues=!!r),i}__serializeBgOverlay(t,e){const s={},r=this.backgroundImage,i=this.overlayImage,n=this.backgroundColor,a=this.overlayColor;return Dt(n)?n.excludeFromExport||(s.background=n.toObject(e)):n&&(s.background=n),Dt(a)?a.excludeFromExport||(s.overlay=a.toObject(e)):a&&(s.overlay=a),r&&!r.excludeFromExport&&(s.backgroundImage=this._toObject(r,t,e)),i&&!i.excludeFromExport&&(s.overlayImage=this._toObject(i,t,e)),s}toSVG(){let t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},e=arguments.length>1?arguments[1]:void 0;t.reviver=e;const s=[];return this._setSVGPreamble(s,t),this._setSVGHeader(s,t),this.clipPath&&s.push('<g clip-path="url(#'.concat(this.clipPath.clipPathId,`)" >
 `)),this._setSVGBgOverlayColor(s,"background"),this._setSVGBgOverlayImage(s,"backgroundImage",e),this._setSVGObjects(s,e),this.clipPath&&s.push(`</g>