fabric/dist/src/canvas/DOMManagers/CanvasDOMManager.min.mjs.map

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

{"version":3,"file":"CanvasDOMManager.min.mjs","names":[],"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"],"mappings":"8hBAWA,IAAa,EAAb,cAAsC,CAAA,CAIpC,YACE,EAAA,CACA,oBACE,EAAA,CAAsB,EAAA,eACtB,EAAiB,IAOf,EAAA,CAAA,CAEJ,MAAM,EAAA,CAAA,EAAA,KAhBR,QAAA,IAAA,GAAA,CAAA,EAAA,KACA,YAAA,IAAA,GAAA,CAgBE,GAAA,CAAQ,GAAI,GAAkB,KAAK,MAC7B,EAAgB,KAAK,mBAAA,CAC3B,KAAK,MAAQ,CAAE,GAAI,EAAe,IAAK,EAAc,WAAW,KAAA,CAAA,CAChE,KAAK,iBAAiB,EAAe,CACnC,oBAAA,EAAA,CAAA,CAEF,KAAK,iBAAiB,EAAe,CACnC,oBAAA,EACA,OAAQ,CACN,SAAU,WACV,KAAM,IACN,IAAK,IAAA,CAAA,CAAA,CAGT,IAAM,EAAY,KAAK,wBAAA,CACvB,EAAU,UAAU,IAAI,EAAA,CACpB,EAAc,YAChB,EAAc,WAAW,aAAa,EAAW,EAAA,CAEnD,EAAU,OAAO,EAAe,EAAA,CAChC,KAAK,UAAY,EAGnB,mBAAA,CACE,GAAA,CAAQ,GAAI,GAAkB,KAAK,MAC7B,EAAK,GAAA,CAUX,MARA,GAAG,UAAY,EAAc,UAE7B,EAAG,UAAU,OAAO,eAAA,CAEpB,EAAG,UAAU,IAAI,eAAA,CACjB,EAAG,aAAa,cAAe,MAAA,CAC/B,EAAG,MAAM,QAAU,EAAc,MAAM,QACvC,EAAG,aAAa,YAAa,OAAA,CACtB,EAGT,wBAAA,CACE,IAAM,EAAY,GAAA,CAAoB,cAAc,MAAA,CAMpD,OALA,EAAU,aAAa,cAAe,UAAA,CACtC,EAAS,EAAW,CAClB,SAAU,WAAA,CAAA,CAEZ,EAAwB,EAAA,CACjB,EAOT,iBACE,EACA,EAAA,CAKA,GAAA,CAAM,OAAE,EAAA,oBAAQ,GAAwB,EACxC,EAAS,EAAS,CAAA,GACb,EACH,eAAgB,EAAsB,eAAiB,EAAA,CAAA,CAEzD,EAAwB,EAAA,CAG1B,cAAc,EAAa,EAAA,CACzB,MAAM,cAAc,EAAM,EAAA,CAC1B,GAAA,CAAM,GAAE,EAAA,IAAI,GAAQ,KAAK,MACzB,EAAoB,EAAI,EAAK,EAAM,EAAA,CAGrC,iBAAiB,EAAA,CACf,MAAM,iBAAiB,EAAA,CACvB,EAAiB,KAAK,MAAM,GAAI,EAAA,CAChC,EAAiB,KAAK,UAAW,EAAA,CAGnC,WAAW,EAAA,CACT,IAAM,EAAY,KAAK,UAAA,CACnB,GAAI,GAAkB,KAAK,MAAA,CAC3B,GAAI,GAAkB,KAAK,MAC/B,MAAM,WAAW,EAAA,CACjB,EAAU,YAAY,EAAA,CACtB,EAAU,YAAY,EAAA,CAClB,EAAU,YACZ,EAAU,WAAW,aAAa,EAAe,EAAA,CAIrD,SAAA,CACE,MAAM,SAAA,CACN,GAAA,CAAS,QAAQ,KAAK,MAAM,GAAA,CAAA,OAErB,KAAK,MAAA,OAEL,KAAK,YAAA,OAAA,KAAA"}