fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
1 lines • 8.27 kB
Source Map (JSON)
{"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":";;;;;;;;AAWO,MAAMA,gBAAgB,SAASC,sBAAsB,CAAC;EAI3DC,WAAWA,CACTC,IAAiC,EAWjC;IAAA,IAVA;AACEC,MAAAA,mBAAmB,GAAG,KAAK;AAC3BC,MAAAA,cAAc,GAAG;AAOnB,KAAC,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE;IAEN,KAAK,CAACH,IAAI,CAAC;IAACM,eAAA,CAAA,IAAA,EAAA,OAAA,EAAA,MAAA,CAAA;IAAAA,eAAA,CAAA,IAAA,EAAA,WAAA,EAAA,MAAA,CAAA;IACZ,MAAM;AAAEC,MAAAA,EAAE,EAAEC;KAAe,GAAG,IAAI,CAACC,KAAK;AACxC,IAAA,MAAMC,aAAa,GAAG,IAAI,CAACC,iBAAiB,EAAE;IAC9C,IAAI,CAACC,KAAK,GAAG;AAAEL,MAAAA,EAAE,EAAEG,aAAa;AAAEG,MAAAA,GAAG,EAAEH,aAAa,CAACI,UAAU,CAAC,IAAI;KAAI;AACxE,IAAA,IAAI,CAACC,gBAAgB,CAACP,aAAa,EAAE;AACnCP,MAAAA;AACF,KAAC,CAAC;AACF,IAAA,IAAI,CAACc,gBAAgB,CAACL,aAAa,EAAE;MACnCT,mBAAmB;AACnBe,MAAAA,MAAM,EAAE;AACNC,QAAAA,QAAQ,EAAE,UAAU;AACpBC,QAAAA,IAAI,EAAE,GAAG;AACTC,QAAAA,GAAG,EAAE;AACP;AACF,KAAC,CAAC;AACF,IAAA,MAAMC,SAAS,GAAG,IAAI,CAACC,sBAAsB,EAAE;AAC/CD,IAAAA,SAAS,CAACE,SAAS,CAACC,GAAG,CAACrB,cAAc,CAAC;IACvC,IAAIM,aAAa,CAACgB,UAAU,EAAE;MAC5BhB,aAAa,CAACgB,UAAU,CAACC,YAAY,CAACL,SAAS,EAAEZ,aAAa,CAAC;AACjE,IAAA;AACAY,IAAAA,SAAS,CAACM,MAAM,CAAClB,aAAa,EAAEE,aAAa,CAAC;IAC9C,IAAI,CAACU,SAAS,GAAGA,SAAS;AAC5B,EAAA;AAEUT,EAAAA,iBAAiBA,GAAG;IAC5B,MAAM;AAAEJ,MAAAA,EAAE,EAAEC;KAAe,GAAG,IAAI,CAACC,KAAK;AACxC,IAAA,MAAMF,EAAE,GAAGoB,mBAAmB,EAAE;AAChC;AACApB,IAAAA,EAAE,CAACqB,SAAS,GAAGpB,aAAa,CAACoB,SAAS;AACtC;AACArB,IAAAA,EAAE,CAACe,SAAS,CAACO,MAAM,CAAC,cAAc,CAAC;AACnC;AACAtB,IAAAA,EAAE,CAACe,SAAS,CAACC,GAAG,CAAC,cAAc,CAAC;AAChChB,IAAAA,EAAE,CAACuB,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC;IACrCvB,EAAE,CAACwB,KAAK,CAACC,OAAO,GAAGxB,aAAa,CAACuB,KAAK,CAACC,OAAO;AAC9CzB,IAAAA,EAAE,CAACuB,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC;AACpC,IAAA,OAAOvB,EAAE;AACX,EAAA;AAEUc,EAAAA,sBAAsBA,GAAG;IACjC,MAAMD,SAAS,GAAGa,iBAAiB,EAAE,CAACC,aAAa,CAAC,KAAK,CAAC;AAC1Dd,IAAAA,SAAS,CAACU,YAAY,CAAC,aAAa,EAAE,SAAS,CAAC;IAChDK,QAAQ,CAACf,SAAS,EAAE;AAClBH,MAAAA,QAAQ,EAAE;AACZ,KAAC,CAAC;IACFmB,uBAAuB,CAAChB,SAAS,CAAC;AAClC,IAAA,OAAOA,SAAS;AAClB,EAAA;;AAEA;AACF;AACA;AACA;AACYL,EAAAA,gBAAgBA,CACxBsB,OAA0B,EAC1BC,OAGC,EACD;IACA,MAAM;MAAEtB,MAAM;AAAEf,MAAAA;AAAoB,KAAC,GAAGqC,OAAO;IAC/CH,QAAQ,CAACE,OAAO,EAAE;AAChB,MAAA,GAAGrB,MAAM;AACT,MAAA,cAAc,EAAEf,mBAAmB,GAAG,cAAc,GAAGsC;AACzD,KAAC,CAAC;IACFH,uBAAuB,CAACC,OAAO,CAAC;AAClC,EAAA;AAEAG,EAAAA,aAAaA,CAACC,IAAW,EAAEC,aAAqB,EAAE;AAChD,IAAA,KAAK,CAACF,aAAa,CAACC,IAAI,EAAEC,aAAa,CAAC;IACxC,MAAM;MAAEnC,EAAE;AAAEM,MAAAA;KAAK,GAAG,IAAI,CAACD,KAAK;IAC9B+B,mBAAmB,CAACpC,EAAE,EAAEM,GAAG,EAAE4B,IAAI,EAAEC,aAAa,CAAC;AACnD,EAAA;EAEAE,gBAAgBA,CAACH,IAA4B,EAAQ;AACnD,IAAA,KAAK,CAACG,gBAAgB,CAACH,IAAI,CAAC;IAC5BG,gBAAgB,CAAC,IAAI,CAAChC,KAAK,CAACL,EAAE,EAAEkC,IAAI,CAAC;AACrCG,IAAAA,gBAAgB,CAAC,IAAI,CAACxB,SAAS,EAAEqB,IAAI,CAAC;AACxC,EAAA;EAEAI,UAAUA,CAACJ,IAAW,EAAE;AACtB,IAAA,MAAMrB,SAAS,GAAG,IAAI,CAACA,SAAS;AAC9B,MAAA;AAAEb,QAAAA,EAAE,EAAEC;OAAe,GAAG,IAAI,CAACC,KAAK;AAClC,MAAA;AAAEF,QAAAA,EAAE,EAAEG;OAAe,GAAG,IAAI,CAACE,KAAK;AACpC,IAAA,KAAK,CAACiC,UAAU,CAACJ,IAAI,CAAC;AACtBrB,IAAAA,SAAS,CAAC0B,WAAW,CAACpC,aAAa,CAAC;AACpCU,IAAAA,SAAS,CAAC0B,WAAW,CAACtC,aAAa,CAAC;IACpC,IAAIY,SAAS,CAACI,UAAU,EAAE;MACxBJ,SAAS,CAACI,UAAU,CAACC,YAAY,CAACjB,aAAa,EAAEY,SAAS,CAAC;AAC7D,IAAA;AACF,EAAA;AAEA2B,EAAAA,OAAOA,GAAG;IACR,KAAK,CAACA,OAAO,EAAE;IACfC,MAAM,EAAE,CAACD,OAAO,CAAC,IAAI,CAACnC,KAAK,CAACL,EAAE,CAAC;AAC/B;IACA,OAAO,IAAI,CAACK,KAAK;AACjB;IACA,OAAO,IAAI,CAACQ,SAAS;AACvB,EAAA;AACF;;;;"}