@nasser-sw/fabric 7.0.0-beta1

package/dist/src/canvas/DOMManagers/CanvasDOMManager.mjs

@@ -0,0 +1,125 @@
+import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
+import { getFabricDocument, getEnv } from '../../env/index.mjs';
+import { createCanvasElement } from '../../util/misc/dom.mjs';
+import { setStyle } from '../../util/internals/dom_style.mjs';
+import { makeElementUnselectable, setCanvasDimensions, setCSSDimensions } from './util.mjs';
+import { StaticCanvasDOMManager } from './StaticCanvasDOMManager.mjs';
+import { NONE } from '../../constants.mjs';
+
+class CanvasDOMManager extends StaticCanvasDOMManager {
+  constructor(arg0) {
+    let {
+      allowTouchScrolling = false,
+      containerClass = ''
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    super(arg0);
+    _defineProperty(this, "upper", void 0);
+    _defineProperty(this, "container", void 0);
+    const {
+      el: lowerCanvasEl
+    } = this.lower;
+    const upperCanvasEl = this.createUpperCanvas();
+    this.upper = {
+      el: upperCanvasEl,
+      ctx: upperCanvasEl.getContext('2d')
+    };
+    this.applyCanvasStyle(lowerCanvasEl, {
+      allowTouchScrolling
+    });
+    this.applyCanvasStyle(upperCanvasEl, {
+      allowTouchScrolling,
+      styles: {
+        position: 'absolute',
+        left: '0',
+        top: '0'
+      }
+    });
+    const container = this.createContainerElement();
+    container.classList.add(containerClass);
+    if (lowerCanvasEl.parentNode) {
+      lowerCanvasEl.parentNode.replaceChild(container, lowerCanvasEl);
+    }
+    container.append(lowerCanvasEl, upperCanvasEl);
+    this.container = container;
+  }
+  createUpperCanvas() {
+    const {
+      el: lowerCanvasEl
+    } = this.lower;
+    const el = createCanvasElement();
+    // we assign the same classname of the lowerCanvas
+    el.className = lowerCanvasEl.className;
+    // but then we remove the lower-canvas specific className
+    el.classList.remove('lower-canvas');
+    // we add the specific upper-canvas class
+    el.classList.add('upper-canvas');
+    el.setAttribute('data-fabric', 'top');
+    el.style.cssText = lowerCanvasEl.style.cssText;
+    el.setAttribute('draggable', 'true');
+    return el;
+  }
+  createContainerElement() {
+    const container = getFabricDocument().createElement('div');
+    container.setAttribute('data-fabric', 'wrapper');
+    setStyle(container, {
+      position: 'relative'
+    });
+    makeElementUnselectable(container);
+    return container;
+  }
+
+  /**
+   * @private
+   * @param {HTMLCanvasElement} element canvas element to apply styles on
+   */
+  applyCanvasStyle(element, options) {
+    const {
+      styles,
+      allowTouchScrolling
+    } = options;
+    setStyle(element, {
+      ...styles,
+      'touch-action': allowTouchScrolling ? 'manipulation' : NONE
+    });
+    makeElementUnselectable(element);
+  }
+  setDimensions(size, retinaScaling) {
+    super.setDimensions(size, retinaScaling);
+    const {
+      el,
+      ctx
+    } = this.upper;
+    setCanvasDimensions(el, ctx, size, retinaScaling);
+  }
+  setCSSDimensions(size) {
+    super.setCSSDimensions(size);
+    setCSSDimensions(this.upper.el, size);
+    setCSSDimensions(this.container, size);
+  }
+  cleanupDOM(size) {
+    const container = this.container,
+      {
+        el: lowerCanvasEl
+      } = this.lower,
+      {
+        el: upperCanvasEl
+      } = this.upper;
+    super.cleanupDOM(size);
+    container.removeChild(upperCanvasEl);
+    container.removeChild(lowerCanvasEl);
+    if (container.parentNode) {
+      container.parentNode.replaceChild(lowerCanvasEl, container);
+    }
+  }
+  dispose() {
+    super.dispose();
+    getEnv().dispose(this.upper.el);
+    // @ts-expect-error disposing
+    delete this.upper;
+    // @ts-expect-error disposing
+    delete this.container;
+  }
+}
+
+export { CanvasDOMManager };
+//# sourceMappingURL=CanvasDOMManager.mjs.map

package/dist/src/canvas/DOMManagers/CanvasDOMManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasDOMManager.mjs","sources":["../../../../src/canvas/DOMManagers/CanvasDOMManager.ts"],"sourcesContent":["import { getEnv, getFabricDocument } from '../../env';\nimport type { TSize } from '../../typedefs';\nimport { createCanvasElement } from '../../util/misc/dom';\nimport { setStyle } from '../../util/internals/dom_style';\nimport type { CSSDimensions } from './util';\nimport { makeElementUnselectable, setCSSDimensions } from './util';\nimport type { CanvasItem } from './StaticCanvasDOMManager';\nimport { StaticCanvasDOMManager } from './StaticCanvasDOMManager';\nimport { setCanvasDimensions } from './util';\nimport { NONE } from '../../constants';\n\nexport class CanvasDOMManager extends StaticCanvasDOMManager {\n  upper: CanvasItem;\n  container: HTMLDivElement;\n\n  constructor(\n    arg0?: string | HTMLCanvasElement,\n    {\n      allowTouchScrolling = false,\n      containerClass = '',\n    }: {\n      allowTouchScrolling?: boolean;\n      /**\n       * @deprecated here only for backward compatibility\n       */\n      containerClass?: string;\n    } = {},\n  ) {\n    super(arg0);\n    const { el: lowerCanvasEl } = this.lower;\n    const upperCanvasEl = this.createUpperCanvas();\n    this.upper = { el: upperCanvasEl, ctx: upperCanvasEl.getContext('2d')! };\n    this.applyCanvasStyle(lowerCanvasEl, {\n      allowTouchScrolling,\n    });\n    this.applyCanvasStyle(upperCanvasEl, {\n      allowTouchScrolling,\n      styles: {\n        position: 'absolute',\n        left: '0',\n        top: '0',\n      },\n    });\n    const container = this.createContainerElement();\n    container.classList.add(containerClass);\n    if (lowerCanvasEl.parentNode) {\n      lowerCanvasEl.parentNode.replaceChild(container, lowerCanvasEl);\n    }\n    container.append(lowerCanvasEl, upperCanvasEl);\n    this.container = container;\n  }\n\n  protected createUpperCanvas() {\n    const { el: lowerCanvasEl } = this.lower;\n    const el = createCanvasElement();\n    // we assign the same classname of the lowerCanvas\n    el.className = lowerCanvasEl.className;\n    // but then we remove the lower-canvas specific className\n    el.classList.remove('lower-canvas');\n    // we add the specific upper-canvas class\n    el.classList.add('upper-canvas');\n    el.setAttribute('data-fabric', 'top');\n    el.style.cssText = lowerCanvasEl.style.cssText;\n    el.setAttribute('draggable', 'true');\n    return el;\n  }\n\n  protected createContainerElement() {\n    const container = getFabricDocument().createElement('div');\n    container.setAttribute('data-fabric', 'wrapper');\n    setStyle(container, {\n      position: 'relative',\n    });\n    makeElementUnselectable(container);\n    return container;\n  }\n\n  /**\n   * @private\n   * @param {HTMLCanvasElement} element canvas element to apply styles on\n   */\n  protected applyCanvasStyle(\n    element: HTMLCanvasElement,\n    options: {\n      allowTouchScrolling?: boolean;\n      styles?: Record<string, string>;\n    },\n  ) {\n    const { styles, allowTouchScrolling } = options;\n    setStyle(element, {\n      ...styles,\n      'touch-action': allowTouchScrolling ? 'manipulation' : NONE,\n    });\n    makeElementUnselectable(element);\n  }\n\n  setDimensions(size: TSize, retinaScaling: number) {\n    super.setDimensions(size, retinaScaling);\n    const { el, ctx } = this.upper;\n    setCanvasDimensions(el, ctx, size, retinaScaling);\n  }\n\n  setCSSDimensions(size: Partial<CSSDimensions>): void {\n    super.setCSSDimensions(size);\n    setCSSDimensions(this.upper.el, size);\n    setCSSDimensions(this.container, size);\n  }\n\n  cleanupDOM(size: TSize) {\n    const container = this.container,\n      { el: lowerCanvasEl } = this.lower,\n      { el: upperCanvasEl } = this.upper;\n    super.cleanupDOM(size);\n    container.removeChild(upperCanvasEl);\n    container.removeChild(lowerCanvasEl);\n    if (container.parentNode) {\n      container.parentNode.replaceChild(lowerCanvasEl, container);\n    }\n  }\n\n  dispose() {\n    super.dispose();\n    getEnv().dispose(this.upper.el);\n    // @ts-expect-error disposing\n    delete this.upper;\n    // @ts-expect-error disposing\n    delete this.container;\n  }\n}\n"],"names":["CanvasDOMManager","StaticCanvasDOMManager","constructor","arg0","allowTouchScrolling","containerClass","arguments","length","undefined","_defineProperty","el","lowerCanvasEl","lower","upperCanvasEl","createUpperCanvas","upper","ctx","getContext","applyCanvasStyle","styles","position","left","top","container","createContainerElement","classList","add","parentNode","replaceChild","append","createCanvasElement","className","remove","setAttribute","style","cssText","getFabricDocument","createElement","setStyle","makeElementUnselectable","element","options","NONE","setDimensions","size","retinaScaling","setCanvasDimensions","setCSSDimensions","cleanupDOM","removeChild","dispose","getEnv"],"mappings":"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"}

package/dist/src/canvas/DOMManagers/StaticCanvasDOMManager.d.ts

@@ -0,0 +1,29 @@
+import type { TSize } from '../../typedefs';
+import type { CSSDimensions } from './util';
+export type CanvasItem = {
+    el: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+};
+export declare class StaticCanvasDOMManager {
+    /**
+     * Keeps a copy of the canvas style before setting retina scaling and other potions
+     * in order to return it to original state on dispose
+     * @type string
+     */
+    private _originalCanvasStyle?;
+    lower: CanvasItem;
+    constructor(arg0?: string | HTMLCanvasElement);
+    protected createLowerCanvas(arg0?: HTMLCanvasElement | string): HTMLCanvasElement;
+    cleanupDOM({ width, height }: TSize): void;
+    setDimensions(size: TSize, retinaScaling: number): void;
+    setCSSDimensions(size: Partial<CSSDimensions>): void;
+    /**
+     * Calculates canvas element offset relative to the document
+     */
+    calcOffset(): {
+        left: number;
+        top: number;
+    };
+    dispose(): void;
+}
+//# sourceMappingURL=StaticCanvasDOMManager.d.ts.map

package/dist/src/canvas/DOMManagers/StaticCanvasDOMManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticCanvasDOMManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/DOMManagers/StaticCanvasDOMManager.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAM5C,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,iBAAiB,CAAC;IACtB,GAAG,EAAE,wBAAwB,CAAC;CAC/B,CAAC;AAEF,qBAAa,sBAAsB;IACjC;;;;OAIG;IACH,OAAO,CAAC,oBAAoB,CAAC,CAAS;IAEtC,KAAK,EAAE,UAAU,CAAC;gBAEN,IAAI,CAAC,EAAE,MAAM,GAAG,iBAAiB;IAK7C,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,iBAAiB,GAAG,MAAM;IAkB7D,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK;IAYnC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM;IAKhD,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,aAAa,CAAC;IAI7C;;OAEG;IACH,UAAU;;;;IAIV,OAAO;CAKR"}

package/dist/src/canvas/DOMManagers/StaticCanvasDOMManager.min.mjs

@@ -0,0 +1,2 @@
+import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{getFabricDocument as e,getEnv as i}from"../../env/index.min.mjs";import{setCanvasDimensions as s,setCSSDimensions as r,getElementOffset as a}from"./util.min.mjs";import{isHTMLCanvas as o,createCanvasElement as l}from"../../util/misc/dom.min.mjs";import{FabricError as n}from"../../util/internals/console.min.mjs";class m{constructor(e){t(this,"_originalCanvasStyle",void 0),t(this,"lower",void 0);const i=this.createLowerCanvas(e);this.lower={el:i,ctx:i.getContext("2d")}}createLowerCanvas(t){const i=o(t)?t:t&&e().getElementById(t)||l();if(i.hasAttribute("data-fabric"))throw new n("Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?");return this._originalCanvasStyle=i.style.cssText,i.setAttribute("data-fabric","main"),i.classList.add("lower-canvas"),i}cleanupDOM(t){let{width:e,height:i}=t;const{el:s}=this.lower;s.classList.remove("lower-canvas"),s.removeAttribute("data-fabric"),s.setAttribute("width",`${e}`),s.setAttribute("height",`${i}`),s.style.cssText=this._originalCanvasStyle||"",this._originalCanvasStyle=void 0}setDimensions(t,e){const{el:i,ctx:r}=this.lower;s(i,r,t,e)}setCSSDimensions(t){r(this.lower.el,t)}calcOffset(){return a(this.lower.el)}dispose(){i().dispose(this.lower.el),delete this.lower}}export{m as StaticCanvasDOMManager};
+//# sourceMappingURL=StaticCanvasDOMManager.min.mjs.map

package/dist/src/canvas/DOMManagers/StaticCanvasDOMManager.min.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticCanvasDOMManager.min.mjs","sources":["../../../../src/canvas/DOMManagers/StaticCanvasDOMManager.ts"],"sourcesContent":["import { getEnv, getFabricDocument } from '../../env';\nimport type { TSize } from '../../typedefs';\nimport type { CSSDimensions } from './util';\nimport { setCSSDimensions, getElementOffset } from './util';\nimport { createCanvasElement, isHTMLCanvas } from '../../util/misc/dom';\nimport { setCanvasDimensions } from './util';\nimport { FabricError } from '../../util/internals/console';\n\nexport type CanvasItem = {\n  el: HTMLCanvasElement;\n  ctx: CanvasRenderingContext2D;\n};\n\nexport class StaticCanvasDOMManager {\n  /**\n   * Keeps a copy of the canvas style before setting retina scaling and other potions\n   * in order to return it to original state on dispose\n   * @type string\n   */\n  private _originalCanvasStyle?: string;\n\n  lower: CanvasItem;\n\n  constructor(arg0?: string | HTMLCanvasElement) {\n    const el = this.createLowerCanvas(arg0);\n    this.lower = { el, ctx: el.getContext('2d')! };\n  }\n\n  protected createLowerCanvas(arg0?: HTMLCanvasElement | string) {\n    // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node\n    const el = isHTMLCanvas(arg0)\n      ? arg0\n      : (arg0 &&\n          (getFabricDocument().getElementById(arg0) as HTMLCanvasElement)) ||\n        createCanvasElement();\n    if (el.hasAttribute('data-fabric')) {\n      throw new FabricError(\n        'Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?',\n      );\n    }\n    this._originalCanvasStyle = el.style.cssText;\n    el.setAttribute('data-fabric', 'main');\n    el.classList.add('lower-canvas');\n    return el;\n  }\n\n  cleanupDOM({ width, height }: TSize) {\n    const { el } = this.lower;\n    // restore canvas style and attributes\n    el.classList.remove('lower-canvas');\n    el.removeAttribute('data-fabric');\n    // restore canvas size to original size in case retina scaling was applied\n    el.setAttribute('width', `${width}`);\n    el.setAttribute('height', `${height}`);\n    el.style.cssText = this._originalCanvasStyle || '';\n    this._originalCanvasStyle = undefined;\n  }\n\n  setDimensions(size: TSize, retinaScaling: number) {\n    const { el, ctx } = this.lower;\n    setCanvasDimensions(el, ctx, size, retinaScaling);\n  }\n\n  setCSSDimensions(size: Partial<CSSDimensions>) {\n    setCSSDimensions(this.lower.el, size);\n  }\n\n  /**\n   * Calculates canvas element offset relative to the document\n   */\n  calcOffset() {\n    return getElementOffset(this.lower.el);\n  }\n\n  dispose() {\n    getEnv().dispose(this.lower.el);\n    // @ts-expect-error disposing\n    delete this.lower;\n  }\n}\n"],"names":["StaticCanvasDOMManager","constructor","arg0","_defineProperty","this","el","createLowerCanvas","lower","ctx","getContext","isHTMLCanvas","getFabricDocument","getElementById","createCanvasElement","hasAttribute","FabricError","_originalCanvasStyle","style","cssText","setAttribute","classList","add","cleanupDOM","_ref","width","height","remove","removeAttribute","undefined","setDimensions","size","retinaScaling","setCanvasDimensions","setCSSDimensions","calcOffset","getElementOffset","dispose","getEnv"],"mappings":"qZAaO,MAAMA,EAUXC,WAAAA,CAAYC,GATZC,EAAAC,KAAA,4BAAA,GAAAD,EAAAC,KAAA,aAAA,GAUE,MAAMC,EAAKD,KAAKE,kBAAkBJ,GAClCE,KAAKG,MAAQ,CAAEF,KAAIG,IAAKH,EAAGI,WAAW,MACxC,CAEUH,iBAAAA,CAAkBJ,GAE1B,MAAMG,EAAKK,EAAaR,GACpBA,EACCA,GACES,IAAoBC,eAAeV,IACtCW,IACJ,GAAIR,EAAGS,aAAa,eAClB,MAAM,IAAIC,EACR,0GAMJ,OAHAX,KAAKY,qBAAuBX,EAAGY,MAAMC,QACrCb,EAAGc,aAAa,cAAe,QAC/Bd,EAAGe,UAAUC,IAAI,gBACVhB,CACT,CAEAiB,UAAAA,CAAUC,GAA2B,IAA1BC,MAAEA,EAAKC,OAAEA,GAAeF,EACjC,MAAMlB,GAAEA,GAAOD,KAAKG,MAEpBF,EAAGe,UAAUM,OAAO,gBACpBrB,EAAGsB,gBAAgB,eAEnBtB,EAAGc,aAAa,QAAS,GAAGK,KAC5BnB,EAAGc,aAAa,SAAU,GAAGM,KAC7BpB,EAAGY,MAAMC,QAAUd,KAAKY,sBAAwB,GAChDZ,KAAKY,0BAAuBY,CAC9B,CAEAC,aAAAA,CAAcC,EAAaC,GACzB,MAAM1B,GAAEA,EAAEG,IAAEA,GAAQJ,KAAKG,MACzByB,EAAoB3B,EAAIG,EAAKsB,EAAMC,EACrC,CAEAE,gBAAAA,CAAiBH,GACfG,EAAiB7B,KAAKG,MAAMF,GAAIyB,EAClC,CAKAI,UAAAA,GACE,OAAOC,EAAiB/B,KAAKG,MAAMF,GACrC,CAEA+B,OAAAA,GACEC,IAASD,QAAQhC,KAAKG,MAAMF,WAErBD,KAAKG,KACd"}

package/dist/src/canvas/DOMManagers/StaticCanvasDOMManager.mjs

@@ -0,0 +1,75 @@
+import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
+import { getFabricDocument, getEnv } from '../../env/index.mjs';
+import { setCanvasDimensions, setCSSDimensions, getElementOffset } from './util.mjs';
+import { isHTMLCanvas, createCanvasElement } from '../../util/misc/dom.mjs';
+import { FabricError } from '../../util/internals/console.mjs';
+
+class StaticCanvasDOMManager {
+  constructor(arg0) {
+    /**
+     * Keeps a copy of the canvas style before setting retina scaling and other potions
+     * in order to return it to original state on dispose
+     * @type string
+     */
+    _defineProperty(this, "_originalCanvasStyle", void 0);
+    _defineProperty(this, "lower", void 0);
+    const el = this.createLowerCanvas(arg0);
+    this.lower = {
+      el,
+      ctx: el.getContext('2d')
+    };
+  }
+  createLowerCanvas(arg0) {
+    // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node
+    const el = isHTMLCanvas(arg0) ? arg0 : arg0 && getFabricDocument().getElementById(arg0) || createCanvasElement();
+    if (el.hasAttribute('data-fabric')) {
+      throw new FabricError('Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?');
+    }
+    this._originalCanvasStyle = el.style.cssText;
+    el.setAttribute('data-fabric', 'main');
+    el.classList.add('lower-canvas');
+    return el;
+  }
+  cleanupDOM(_ref) {
+    let {
+      width,
+      height
+    } = _ref;
+    const {
+      el
+    } = this.lower;
+    // restore canvas style and attributes
+    el.classList.remove('lower-canvas');
+    el.removeAttribute('data-fabric');
+    // restore canvas size to original size in case retina scaling was applied
+    el.setAttribute('width', `${width}`);
+    el.setAttribute('height', `${height}`);
+    el.style.cssText = this._originalCanvasStyle || '';
+    this._originalCanvasStyle = undefined;
+  }
+  setDimensions(size, retinaScaling) {
+    const {
+      el,
+      ctx
+    } = this.lower;
+    setCanvasDimensions(el, ctx, size, retinaScaling);
+  }
+  setCSSDimensions(size) {
+    setCSSDimensions(this.lower.el, size);
+  }
+
+  /**
+   * Calculates canvas element offset relative to the document
+   */
+  calcOffset() {
+    return getElementOffset(this.lower.el);
+  }
+  dispose() {
+    getEnv().dispose(this.lower.el);
+    // @ts-expect-error disposing
+    delete this.lower;
+  }
+}
+
+export { StaticCanvasDOMManager };
+//# sourceMappingURL=StaticCanvasDOMManager.mjs.map

package/dist/src/canvas/DOMManagers/StaticCanvasDOMManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticCanvasDOMManager.mjs","sources":["../../../../src/canvas/DOMManagers/StaticCanvasDOMManager.ts"],"sourcesContent":["import { getEnv, getFabricDocument } from '../../env';\nimport type { TSize } from '../../typedefs';\nimport type { CSSDimensions } from './util';\nimport { setCSSDimensions, getElementOffset } from './util';\nimport { createCanvasElement, isHTMLCanvas } from '../../util/misc/dom';\nimport { setCanvasDimensions } from './util';\nimport { FabricError } from '../../util/internals/console';\n\nexport type CanvasItem = {\n  el: HTMLCanvasElement;\n  ctx: CanvasRenderingContext2D;\n};\n\nexport class StaticCanvasDOMManager {\n  /**\n   * Keeps a copy of the canvas style before setting retina scaling and other potions\n   * in order to return it to original state on dispose\n   * @type string\n   */\n  private _originalCanvasStyle?: string;\n\n  lower: CanvasItem;\n\n  constructor(arg0?: string | HTMLCanvasElement) {\n    const el = this.createLowerCanvas(arg0);\n    this.lower = { el, ctx: el.getContext('2d')! };\n  }\n\n  protected createLowerCanvas(arg0?: HTMLCanvasElement | string) {\n    // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node\n    const el = isHTMLCanvas(arg0)\n      ? arg0\n      : (arg0 &&\n          (getFabricDocument().getElementById(arg0) as HTMLCanvasElement)) ||\n        createCanvasElement();\n    if (el.hasAttribute('data-fabric')) {\n      throw new FabricError(\n        'Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?',\n      );\n    }\n    this._originalCanvasStyle = el.style.cssText;\n    el.setAttribute('data-fabric', 'main');\n    el.classList.add('lower-canvas');\n    return el;\n  }\n\n  cleanupDOM({ width, height }: TSize) {\n    const { el } = this.lower;\n    // restore canvas style and attributes\n    el.classList.remove('lower-canvas');\n    el.removeAttribute('data-fabric');\n    // restore canvas size to original size in case retina scaling was applied\n    el.setAttribute('width', `${width}`);\n    el.setAttribute('height', `${height}`);\n    el.style.cssText = this._originalCanvasStyle || '';\n    this._originalCanvasStyle = undefined;\n  }\n\n  setDimensions(size: TSize, retinaScaling: number) {\n    const { el, ctx } = this.lower;\n    setCanvasDimensions(el, ctx, size, retinaScaling);\n  }\n\n  setCSSDimensions(size: Partial<CSSDimensions>) {\n    setCSSDimensions(this.lower.el, size);\n  }\n\n  /**\n   * Calculates canvas element offset relative to the document\n   */\n  calcOffset() {\n    return getElementOffset(this.lower.el);\n  }\n\n  dispose() {\n    getEnv().dispose(this.lower.el);\n    // @ts-expect-error disposing\n    delete this.lower;\n  }\n}\n"],"names":["StaticCanvasDOMManager","constructor","arg0","_defineProperty","el","createLowerCanvas","lower","ctx","getContext","isHTMLCanvas","getFabricDocument","getElementById","createCanvasElement","hasAttribute","FabricError","_originalCanvasStyle","style","cssText","setAttribute","classList","add","cleanupDOM","_ref","width","height","remove","removeAttribute","undefined","setDimensions","size","retinaScaling","setCanvasDimensions","setCSSDimensions","calcOffset","getElementOffset","dispose","getEnv"],"mappings":";;;;;;AAaO,MAAMA,sBAAsB,CAAC;EAUlCC,WAAWA,CAACC,IAAiC,EAAE;AAT/C;AACF;AACA;AACA;AACA;IAJEC,eAAA,CAAA,IAAA,EAAA,sBAAA,EAAA,MAAA,CAAA;IAAAA,eAAA,CAAA,IAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAUE,IAAA,MAAMC,EAAE,GAAG,IAAI,CAACC,iBAAiB,CAACH,IAAI,CAAC;IACvC,IAAI,CAACI,KAAK,GAAG;MAAEF,EAAE;AAAEG,MAAAA,GAAG,EAAEH,EAAE,CAACI,UAAU,CAAC,IAAI;KAAI;AAChD,EAAA;EAEUH,iBAAiBA,CAACH,IAAiC,EAAE;AAC7D;IACA,MAAME,EAAE,GAAGK,YAAY,CAACP,IAAI,CAAC,GACzBA,IAAI,GACHA,IAAI,IACFQ,iBAAiB,EAAE,CAACC,cAAc,CAACT,IAAI,CAAuB,IACjEU,mBAAmB,EAAE;AACzB,IAAA,IAAIR,EAAE,CAACS,YAAY,CAAC,aAAa,CAAC,EAAE;AAClC,MAAA,MAAM,IAAIC,WAAW,CACnB,wGACF,CAAC;AACH,IAAA;AACA,IAAA,IAAI,CAACC,oBAAoB,GAAGX,EAAE,CAACY,KAAK,CAACC,OAAO;AAC5Cb,IAAAA,EAAE,CAACc,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACtCd,IAAAA,EAAE,CAACe,SAAS,CAACC,GAAG,CAAC,cAAc,CAAC;AAChC,IAAA,OAAOhB,EAAE;AACX,EAAA;EAEAiB,UAAUA,CAAAC,IAAA,EAA2B;IAAA,IAA1B;MAAEC,KAAK;AAAEC,MAAAA;AAAc,KAAC,GAAAF,IAAA;IACjC,MAAM;AAAElB,MAAAA;KAAI,GAAG,IAAI,CAACE,KAAK;AACzB;AACAF,IAAAA,EAAE,CAACe,SAAS,CAACM,MAAM,CAAC,cAAc,CAAC;AACnCrB,IAAAA,EAAE,CAACsB,eAAe,CAAC,aAAa,CAAC;AACjC;IACAtB,EAAE,CAACc,YAAY,CAAC,OAAO,EAAE,CAAA,EAAGK,KAAK,EAAE,CAAC;IACpCnB,EAAE,CAACc,YAAY,CAAC,QAAQ,EAAE,CAAA,EAAGM,MAAM,EAAE,CAAC;IACtCpB,EAAE,CAACY,KAAK,CAACC,OAAO,GAAG,IAAI,CAACF,oBAAoB,IAAI,EAAE;IAClD,IAAI,CAACA,oBAAoB,GAAGY,SAAS;AACvC,EAAA;AAEAC,EAAAA,aAAaA,CAACC,IAAW,EAAEC,aAAqB,EAAE;IAChD,MAAM;MAAE1B,EAAE;AAAEG,MAAAA;KAAK,GAAG,IAAI,CAACD,KAAK;IAC9ByB,mBAAmB,CAAC3B,EAAE,EAAEG,GAAG,EAAEsB,IAAI,EAAEC,aAAa,CAAC;AACnD,EAAA;EAEAE,gBAAgBA,CAACH,IAA4B,EAAE;IAC7CG,gBAAgB,CAAC,IAAI,CAAC1B,KAAK,CAACF,EAAE,EAAEyB,IAAI,CAAC;AACvC,EAAA;;AAEA;AACF;AACA;AACEI,EAAAA,UAAUA,GAAG;AACX,IAAA,OAAOC,gBAAgB,CAAC,IAAI,CAAC5B,KAAK,CAACF,EAAE,CAAC;AACxC,EAAA;AAEA+B,EAAAA,OAAOA,GAAG;IACRC,MAAM,EAAE,CAACD,OAAO,CAAC,IAAI,CAAC7B,KAAK,CAACF,EAAE,CAAC;AAC/B;IACA,OAAO,IAAI,CAACE,KAAK;AACnB,EAAA;AACF;;;;"}

package/dist/src/canvas/DOMManagers/util.d.ts

@@ -0,0 +1,23 @@
+import type { TSize } from '../../typedefs';
+export declare const setCanvasDimensions: (el: HTMLCanvasElement, ctx: CanvasRenderingContext2D, { width, height }: TSize, retinaScaling?: number) => void;
+export type CSSDimensions = {
+    width: number | string;
+    height: number | string;
+};
+export declare const setCSSDimensions: (el: HTMLElement, { width, height }: Partial<CSSDimensions>) => void;
+/**
+ * Returns offset for a given element
+ * @param {HTMLElement} element Element to get offset for
+ * @return {Object} Object with "left" and "top" properties
+ */
+export declare function getElementOffset(element: HTMLElement): {
+    left: number;
+    top: number;
+};
+/**
+ * Makes element unselectable
+ * @param {HTMLElement} element Element to make unselectable
+ * @return {HTMLElement} Element that was passed in
+ */
+export declare function makeElementUnselectable(element: HTMLElement): HTMLElement;
+//# sourceMappingURL=util.d.ts.map

package/dist/src/canvas/DOMManagers/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/canvas/DOMManagers/util.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAO5C,eAAO,MAAM,mBAAmB,GAC9B,IAAI,iBAAiB,EACrB,KAAK,wBAAwB,EAC7B,mBAAmB,KAAK,EACxB,sBAAiB,SASlB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,IAAI,WAAW,EACf,mBAAmB,OAAO,CAAC,aAAa,CAAC,SAK1C,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW;;;EA6BpD;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,WAAW,eAM3D"}

package/dist/src/canvas/DOMManagers/util.min.mjs

@@ -0,0 +1,2 @@
+import{NONE as t}from"../../constants.min.mjs";import{getDocumentFromElement as e,getWindowFromElement as n,getScrollLeftTop as o}from"../../util/dom_misc.min.mjs";const i=function(t,e,n){let{width:o,height:i}=n,l=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;t.width=o,t.height=i,l>1&&(t.setAttribute("width",(o*l).toString()),t.setAttribute("height",(i*l).toString()),e.scale(l,l))},l=(t,e)=>{let{width:n,height:o}=e;n&&(t.style.width="number"==typeof n?`${n}px`:n),o&&(t.style.height="number"==typeof o?`${o}px`:o)};function r(t){var i;const l=t&&e(t),r={left:0,top:0};if(!l)return r;const p=(null===(i=n(t))||void 0===i?void 0:i.getComputedStyle(t,null))||{};r.left+=parseInt(p.borderLeftWidth,10)||0,r.top+=parseInt(p.borderTopWidth,10)||0,r.left+=parseInt(p.paddingLeft,10)||0,r.top+=parseInt(p.paddingTop,10)||0;let s={left:0,top:0};const d=l.documentElement;void 0!==t.getBoundingClientRect&&(s=t.getBoundingClientRect());const c=o(t);return{left:s.left+c.left-(d.clientLeft||0)+r.left,top:s.top+c.top-(d.clientTop||0)+r.top}}function p(e){return void 0!==e.onselectstart&&(e.onselectstart=()=>!1),e.style.userSelect=t,e}export{r as getElementOffset,p as makeElementUnselectable,l as setCSSDimensions,i as setCanvasDimensions};
+//# sourceMappingURL=util.min.mjs.map

package/dist/src/canvas/DOMManagers/util.min.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.min.mjs","sources":["../../../../src/canvas/DOMManagers/util.ts"],"sourcesContent":["import { NONE } from '../../constants';\nimport type { TSize } from '../../typedefs';\nimport {\n  getDocumentFromElement,\n  getWindowFromElement,\n  getScrollLeftTop,\n} from '../../util/dom_misc';\n\nexport const setCanvasDimensions = (\n  el: HTMLCanvasElement,\n  ctx: CanvasRenderingContext2D,\n  { width, height }: TSize,\n  retinaScaling = 1,\n) => {\n  el.width = width;\n  el.height = height;\n  if (retinaScaling > 1) {\n    el.setAttribute('width', (width * retinaScaling).toString());\n    el.setAttribute('height', (height * retinaScaling).toString());\n    ctx.scale(retinaScaling, retinaScaling);\n  }\n};\n\nexport type CSSDimensions = {\n  width: number | string;\n  height: number | string;\n};\n\nexport const setCSSDimensions = (\n  el: HTMLElement,\n  { width, height }: Partial<CSSDimensions>,\n) => {\n  width && (el.style.width = typeof width === 'number' ? `${width}px` : width);\n  height &&\n    (el.style.height = typeof height === 'number' ? `${height}px` : height);\n};\n\n/**\n * Returns offset for a given element\n * @param {HTMLElement} element Element to get offset for\n * @return {Object} Object with \"left\" and \"top\" properties\n */\nexport function getElementOffset(element: HTMLElement) {\n  const doc = element && getDocumentFromElement(element),\n    offset = { left: 0, top: 0 };\n\n  if (!doc) {\n    return offset;\n  }\n  const elemStyle: CSSStyleDeclaration =\n    getWindowFromElement(element)?.getComputedStyle(element, null) ||\n    ({} as CSSStyleDeclaration);\n  offset.left += parseInt(elemStyle.borderLeftWidth, 10) || 0;\n  offset.top += parseInt(elemStyle.borderTopWidth, 10) || 0;\n  offset.left += parseInt(elemStyle.paddingLeft, 10) || 0;\n  offset.top += parseInt(elemStyle.paddingTop, 10) || 0;\n\n  let box = { left: 0, top: 0 };\n\n  const docElem = doc.documentElement;\n  if (typeof element.getBoundingClientRect !== 'undefined') {\n    box = element.getBoundingClientRect();\n  }\n\n  const scrollLeftTop = getScrollLeftTop(element);\n\n  return {\n    left:\n      box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,\n    top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top,\n  };\n}\n\n/**\n * Makes element unselectable\n * @param {HTMLElement} element Element to make unselectable\n * @return {HTMLElement} Element that was passed in\n */\nexport function makeElementUnselectable(element: HTMLElement) {\n  if (typeof element.onselectstart !== 'undefined') {\n    element.onselectstart = () => false;\n  }\n  element.style.userSelect = NONE;\n  return element;\n}\n"],"names":["setCanvasDimensions","el","ctx","_ref","width","height","retinaScaling","arguments","length","undefined","setAttribute","toString","scale","setCSSDimensions","_ref2","style","getElementOffset","element","_getWindowFromElement","doc","getDocumentFromElement","offset","left","top","elemStyle","getWindowFromElement","getComputedStyle","parseInt","borderLeftWidth","borderTopWidth","paddingLeft","paddingTop","box","docElem","documentElement","getBoundingClientRect","scrollLeftTop","getScrollLeftTop","clientLeft","clientTop","makeElementUnselectable","onselectstart","userSelect","NONE"],"mappings":"oKAQO,MAAMA,EAAsB,SACjCC,EACAC,EAA6BC,GAG1B,IAFHC,MAAEA,EAAKC,OAAEA,GAAeF,EACxBG,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,EAEhBN,EAAGG,MAAQA,EACXH,EAAGI,OAASA,EACRC,EAAgB,IAClBL,EAAGS,aAAa,SAAUN,EAAQE,GAAeK,YACjDV,EAAGS,aAAa,UAAWL,EAASC,GAAeK,YACnDT,EAAIU,MAAMN,EAAeA,GAE7B,EAOaO,EAAmBA,CAC9BZ,EAAea,KAEZ,IADHV,MAAEA,EAAKC,OAAEA,GAAgCS,EAEzCV,IAAUH,EAAGc,MAAMX,MAAyB,iBAAVA,EAAqB,GAAGA,MAAYA,GACtEC,IACGJ,EAAGc,MAAMV,OAA2B,iBAAXA,EAAsB,GAAGA,MAAaA,IAQ7D,SAASW,EAAiBC,GAAsB,IAAAC,EACrD,MAAMC,EAAMF,GAAWG,EAAuBH,GAC5CI,EAAS,CAAEC,KAAM,EAAGC,IAAK,GAE3B,IAAKJ,EACH,OAAOE,EAET,MAAMG,GACyB,QAA7BN,EAAAO,EAAqBR,cAAQC,SAA7BA,EAA+BQ,iBAAiBT,EAAS,QACxD,CAAA,EACHI,EAAOC,MAAQK,SAASH,EAAUI,gBAAiB,KAAO,EAC1DP,EAAOE,KAAOI,SAASH,EAAUK,eAAgB,KAAO,EACxDR,EAAOC,MAAQK,SAASH,EAAUM,YAAa,KAAO,EACtDT,EAAOE,KAAOI,SAASH,EAAUO,WAAY,KAAO,EAEpD,IAAIC,EAAM,CAAEV,KAAM,EAAGC,IAAK,GAE1B,MAAMU,EAAUd,EAAIe,qBACyB,IAAlCjB,EAAQkB,wBACjBH,EAAMf,EAAQkB,yBAGhB,MAAMC,EAAgBC,EAAiBpB,GAEvC,MAAO,CACLK,KACEU,EAAIV,KAAOc,EAAcd,MAAQW,EAAQK,YAAc,GAAKjB,EAAOC,KACrEC,IAAKS,EAAIT,IAAMa,EAAcb,KAAOU,EAAQM,WAAa,GAAKlB,EAAOE,IAEzE,CAOO,SAASiB,EAAwBvB,GAKtC,YAJqC,IAA1BA,EAAQwB,gBACjBxB,EAAQwB,cAAgB,KAAM,GAEhCxB,EAAQF,MAAM2B,WAAaC,EACpB1B,CACT"}

package/dist/src/canvas/DOMManagers/util.mjs

@@ -0,0 +1,76 @@
+import { NONE } from '../../constants.mjs';
+import { getDocumentFromElement, getWindowFromElement, getScrollLeftTop } from '../../util/dom_misc.mjs';
+
+const setCanvasDimensions = function (el, ctx, _ref) {
+  let {
+    width,
+    height
+  } = _ref;
+  let retinaScaling = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  el.width = width;
+  el.height = height;
+  if (retinaScaling > 1) {
+    el.setAttribute('width', (width * retinaScaling).toString());
+    el.setAttribute('height', (height * retinaScaling).toString());
+    ctx.scale(retinaScaling, retinaScaling);
+  }
+};
+const setCSSDimensions = (el, _ref2) => {
+  let {
+    width,
+    height
+  } = _ref2;
+  width && (el.style.width = typeof width === 'number' ? `${width}px` : width);
+  height && (el.style.height = typeof height === 'number' ? `${height}px` : height);
+};
+
+/**
+ * Returns offset for a given element
+ * @param {HTMLElement} element Element to get offset for
+ * @return {Object} Object with "left" and "top" properties
+ */
+function getElementOffset(element) {
+  var _getWindowFromElement;
+  const doc = element && getDocumentFromElement(element),
+    offset = {
+      left: 0,
+      top: 0
+    };
+  if (!doc) {
+    return offset;
+  }
+  const elemStyle = ((_getWindowFromElement = getWindowFromElement(element)) === null || _getWindowFromElement === void 0 ? void 0 : _getWindowFromElement.getComputedStyle(element, null)) || {};
+  offset.left += parseInt(elemStyle.borderLeftWidth, 10) || 0;
+  offset.top += parseInt(elemStyle.borderTopWidth, 10) || 0;
+  offset.left += parseInt(elemStyle.paddingLeft, 10) || 0;
+  offset.top += parseInt(elemStyle.paddingTop, 10) || 0;
+  let box = {
+    left: 0,
+    top: 0
+  };
+  const docElem = doc.documentElement;
+  if (typeof element.getBoundingClientRect !== 'undefined') {
+    box = element.getBoundingClientRect();
+  }
+  const scrollLeftTop = getScrollLeftTop(element);
+  return {
+    left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,
+    top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top
+  };
+}
+
+/**
+ * Makes element unselectable
+ * @param {HTMLElement} element Element to make unselectable
+ * @return {HTMLElement} Element that was passed in
+ */
+function makeElementUnselectable(element) {
+  if (typeof element.onselectstart !== 'undefined') {
+    element.onselectstart = () => false;
+  }
+  element.style.userSelect = NONE;
+  return element;
+}
+
+export { getElementOffset, makeElementUnselectable, setCSSDimensions, setCanvasDimensions };
+//# sourceMappingURL=util.mjs.map

package/dist/src/canvas/DOMManagers/util.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.mjs","sources":["../../../../src/canvas/DOMManagers/util.ts"],"sourcesContent":["import { NONE } from '../../constants';\nimport type { TSize } from '../../typedefs';\nimport {\n  getDocumentFromElement,\n  getWindowFromElement,\n  getScrollLeftTop,\n} from '../../util/dom_misc';\n\nexport const setCanvasDimensions = (\n  el: HTMLCanvasElement,\n  ctx: CanvasRenderingContext2D,\n  { width, height }: TSize,\n  retinaScaling = 1,\n) => {\n  el.width = width;\n  el.height = height;\n  if (retinaScaling > 1) {\n    el.setAttribute('width', (width * retinaScaling).toString());\n    el.setAttribute('height', (height * retinaScaling).toString());\n    ctx.scale(retinaScaling, retinaScaling);\n  }\n};\n\nexport type CSSDimensions = {\n  width: number | string;\n  height: number | string;\n};\n\nexport const setCSSDimensions = (\n  el: HTMLElement,\n  { width, height }: Partial<CSSDimensions>,\n) => {\n  width && (el.style.width = typeof width === 'number' ? `${width}px` : width);\n  height &&\n    (el.style.height = typeof height === 'number' ? `${height}px` : height);\n};\n\n/**\n * Returns offset for a given element\n * @param {HTMLElement} element Element to get offset for\n * @return {Object} Object with \"left\" and \"top\" properties\n */\nexport function getElementOffset(element: HTMLElement) {\n  const doc = element && getDocumentFromElement(element),\n    offset = { left: 0, top: 0 };\n\n  if (!doc) {\n    return offset;\n  }\n  const elemStyle: CSSStyleDeclaration =\n    getWindowFromElement(element)?.getComputedStyle(element, null) ||\n    ({} as CSSStyleDeclaration);\n  offset.left += parseInt(elemStyle.borderLeftWidth, 10) || 0;\n  offset.top += parseInt(elemStyle.borderTopWidth, 10) || 0;\n  offset.left += parseInt(elemStyle.paddingLeft, 10) || 0;\n  offset.top += parseInt(elemStyle.paddingTop, 10) || 0;\n\n  let box = { left: 0, top: 0 };\n\n  const docElem = doc.documentElement;\n  if (typeof element.getBoundingClientRect !== 'undefined') {\n    box = element.getBoundingClientRect();\n  }\n\n  const scrollLeftTop = getScrollLeftTop(element);\n\n  return {\n    left:\n      box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,\n    top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top,\n  };\n}\n\n/**\n * Makes element unselectable\n * @param {HTMLElement} element Element to make unselectable\n * @return {HTMLElement} Element that was passed in\n */\nexport function makeElementUnselectable(element: HTMLElement) {\n  if (typeof element.onselectstart !== 'undefined') {\n    element.onselectstart = () => false;\n  }\n  element.style.userSelect = NONE;\n  return element;\n}\n"],"names":["setCanvasDimensions","el","ctx","_ref","width","height","retinaScaling","arguments","length","undefined","setAttribute","toString","scale","setCSSDimensions","_ref2","style","getElementOffset","element","_getWindowFromElement","doc","getDocumentFromElement","offset","left","top","elemStyle","getWindowFromElement","getComputedStyle","parseInt","borderLeftWidth","borderTopWidth","paddingLeft","paddingTop","box","docElem","documentElement","getBoundingClientRect","scrollLeftTop","getScrollLeftTop","clientLeft","clientTop","makeElementUnselectable","onselectstart","userSelect","NONE"],"mappings":"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"}