fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
1 lines • 6.29 kB
Source Map (JSON)
{"version":3,"file":"CanvasDOMManager.min.mjs","sources":["../../../../src/canvas/DOMManagers/CanvasDOMManager.ts"],"sourcesContent":["import { getEnv, getFabricDocument } from '../../env';\nimport type { TSize } from '../../typedefs';\nimport { createCanvasElement, setStyle } from '../../util';\nimport type { CSSDimensions } from './util';\nimport {\n allowTouchScrolling,\n makeElementUnselectable,\n setCSSDimensions,\n} from './util';\nimport type { CanvasItem } from './StaticCanvasDOMManager';\nimport { StaticCanvasDOMManager } from './StaticCanvasDOMManager';\nimport { setCanvasDimensions } from './util';\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 });\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 { allowTouchScrolling: allow }: { allowTouchScrolling: boolean }\n ) {\n setStyle(element, {\n position: 'absolute',\n left: '0',\n top: '0',\n });\n allowTouchScrolling(element, allow);\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","super","_defineProperty","this","el","lowerCanvasEl","lower","upperCanvasEl","createUpperCanvas","upper","ctx","getContext","applyCanvasStyle","container","createContainerElement","classList","add","parentNode","replaceChild","append","createCanvasElement","className","remove","setAttribute","style","cssText","getFabricDocument","createElement","setStyle","position","makeElementUnselectable","element","_ref","allow","left","top","setDimensions","size","retinaScaling","setCanvasDimensions","setCSSDimensions","cleanupDOM","removeChild","dispose","getEnv"],"mappings":"80BAaO,MAAMA,UAAyBC,EAIpCC,WAAAA,CACEC,GAWA,IAVAC,oBACEA,GAAsB,EAAKC,eAC3BA,EAAiB,IAOlBC,UAAAC,OAAAD,QAAAE,IAAAF,UAAAE,GAAAF,UAAG,GAAA,GAEJG,MAAMN,GAAMO,EAAAC,KAAA,aAAA,GAAAD,EAAAC,KAAA,iBAAA,GACZ,MAAQC,GAAIC,GAAkBF,KAAKG,MAC7BC,EAAgBJ,KAAKK,oBAC3BL,KAAKM,MAAQ,CAAEL,GAAIG,EAAeG,IAAKH,EAAcI,WAAW,OAChER,KAAKS,iBAAiBP,EAAe,CACnCT,wBAEFO,KAAKS,iBAAiBL,EAAe,CACnCX,wBAEF,MAAMiB,EAAYV,KAAKW,yBACvBD,EAAUE,UAAUC,IAAInB,GACpBQ,EAAcY,YAChBZ,EAAcY,WAAWC,aAAaL,EAAWR,GAEnDQ,EAAUM,OAAOd,EAAeE,GAChCJ,KAAKU,UAAYA,CACnB,CAEUL,iBAAAA,GACR,MAAQJ,GAAIC,GAAkBF,KAAKG,MAC7BF,EAAKgB,IAUX,OARAhB,EAAGiB,UAAYhB,EAAcgB,UAE7BjB,EAAGW,UAAUO,OAAO,gBAEpBlB,EAAGW,UAAUC,IAAI,gBACjBZ,EAAGmB,aAAa,cAAe,OAC/BnB,EAAGoB,MAAMC,QAAUpB,EAAcmB,MAAMC,QACvCrB,EAAGmB,aAAa,YAAa,QACtBnB,CACT,CAEUU,sBAAAA,GACR,MAAMD,EAAYa,IAAoBC,cAAc,OAMpD,OALAd,EAAUU,aAAa,cAAe,WACtCK,EAASf,EAAW,CAClBgB,SAAU,aAEZC,EAAwBjB,GACjBA,CACT,CAMUD,gBAAAA,CACRmB,EAA0BC,GAE1B,IADEpC,oBAAqBqC,GAAyCD,EAEhEJ,EAASG,EAAS,CAChBF,SAAU,WACVK,KAAM,IACNC,IAAK,MAEPvC,EAAoBmC,EAASE,GAC7BH,EAAwBC,EAC1B,CAEAK,aAAAA,CAAcC,EAAaC,GACzBrC,MAAMmC,cAAcC,EAAMC,GAC1B,MAAMlC,GAAEA,EAAEM,IAAEA,GAAQP,KAAKM,MACzB8B,EAAoBnC,EAAIM,EAAK2B,EAAMC,EACrC,CAEAE,gBAAAA,CAAiBH,GACfpC,MAAMuC,iBAAiBH,GACvBG,EAAiBrC,KAAKM,MAAML,GAAIiC,GAChCG,EAAiBrC,KAAKU,UAAWwB,EACnC,CAEAI,UAAAA,CAAWJ,GACT,MAAMxB,EAAYV,KAAKU,WACnBT,GAAIC,GAAkBF,KAAKG,OAC3BF,GAAIG,GAAkBJ,KAAKM,MAC/BR,MAAMwC,WAAWJ,GACjBxB,EAAU6B,YAAYnC,GACtBM,EAAU6B,YAAYrC,GAClBQ,EAAUI,YACZJ,EAAUI,WAAWC,aAAab,EAAeQ,EAErD,CAEA8B,OAAAA,GACE1C,MAAM0C,UACNC,IAASD,QAAQxC,KAAKM,MAAML,WAErBD,KAAKM,aAELN,KAAKU,SACd"}