UNPKG

fabric

Version:

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

1 lines 8.21 kB
{"version":3,"file":"Pattern.min.mjs","names":[],"sources":["../../../src/Pattern/Pattern.ts"],"sourcesContent":["import { config } from '../config';\nimport type { Abortable, TCrossOrigin, TMat2D, TSize } from '../typedefs';\nimport { ifNaN } from '../util/internals/ifNaN';\nimport { uid } from '../util/internals/uid';\nimport { loadImage } from '../util/misc/objectEnlive';\nimport { pick } from '../util/misc/pick';\nimport { toFixed } from '../util/misc/toFixed';\nimport { classRegistry } from '../ClassRegistry';\nimport type {\n PatternRepeat,\n PatternOptions,\n SerializedPatternOptions,\n} from './types';\nimport { log } from '../util/internals/console';\nimport { escapeXml } from '../util/lang_string';\n\n/**\n * @see {@link http://fabric5.fabricjs.com/patterns demo}\n * @see {@link http://fabric5.fabricjs.com/dynamic-patterns demo}\n */\nexport class Pattern {\n static type = 'Pattern';\n\n /**\n * Legacy identifier of the class. Prefer using this.constructor.type 'Pattern'\n * or utils like isPattern, or instance of to indentify a pattern in your code.\n * Will be removed in future versiones\n * @TODO add sustainable warning message\n * @type string\n * @deprecated\n */\n get type() {\n return 'pattern';\n }\n\n set type(value) {\n log('warn', 'Setting type has no effect', value);\n }\n\n /**\n * @type PatternRepeat\n * @defaults\n */\n repeat: PatternRepeat = 'repeat';\n\n /**\n * Pattern horizontal offset from object's left/top corner\n * @type Number\n */\n offsetX = 0;\n\n /**\n * Pattern vertical offset from object's left/top corner\n * @type Number\n */\n offsetY = 0;\n\n /**\n * @type TCrossOrigin\n */\n crossOrigin: TCrossOrigin = '';\n\n /**\n * transform matrix to change the pattern, imported from svgs.\n * @todo verify if using the identity matrix as default makes the rest of the code more easy\n * @type Array\n */\n declare patternTransform?: TMat2D;\n\n /**\n * The actual pixel source of the pattern\n */\n declare source: CanvasImageSource;\n\n /**\n * If true, this object will not be exported during the serialization of a canvas\n * @type boolean\n */\n declare excludeFromExport?: boolean;\n\n /**\n * ID used for SVG export functionalities\n * @type number\n */\n declare readonly id: number;\n\n /**\n * Constructor\n * @param {Object} [options] Options object\n * @param {option.source} [source] the pattern source, eventually empty or a drawable\n */\n constructor(options: PatternOptions) {\n this.id = uid();\n Object.assign(this, options);\n }\n\n /**\n * @returns true if {@link source} is an <img> element\n */\n isImageSource(): this is { source: HTMLImageElement } {\n return (\n !!this.source && typeof (this.source as HTMLImageElement).src === 'string'\n );\n }\n\n /**\n * @returns true if {@link source} is a <canvas> element\n */\n isCanvasSource(): this is { source: HTMLCanvasElement } {\n return !!this.source && !!(this.source as HTMLCanvasElement).toDataURL;\n }\n\n sourceToString(): string {\n return this.isImageSource()\n ? this.source.src\n : this.isCanvasSource()\n ? this.source.toDataURL()\n : '';\n }\n\n /**\n * Returns an instance of CanvasPattern\n * @param {CanvasRenderingContext2D} ctx Context to create pattern\n * @return {CanvasPattern}\n */\n toLive(ctx: CanvasRenderingContext2D): CanvasPattern | null {\n if (\n // if the image failed to load, return, and allow rest to continue loading\n !this.source ||\n // if an image\n (this.isImageSource() &&\n (!this.source.complete ||\n this.source.naturalWidth === 0 ||\n this.source.naturalHeight === 0))\n ) {\n return null;\n }\n\n return ctx.createPattern(this.source, this.repeat)!;\n }\n\n /**\n * Returns object representation of a pattern\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {object} Object representation of a pattern instance\n */\n toObject(propertiesToInclude: string[] = []): Record<string, any> {\n const { repeat, crossOrigin } = this;\n return {\n ...pick(this, propertiesToInclude as (keyof this)[]),\n type: 'pattern',\n source: this.sourceToString(),\n repeat,\n crossOrigin,\n offsetX: toFixed(this.offsetX, config.NUM_FRACTION_DIGITS),\n offsetY: toFixed(this.offsetY, config.NUM_FRACTION_DIGITS),\n patternTransform: this.patternTransform\n ? [...this.patternTransform]\n : null,\n };\n }\n\n /* _TO_SVG_START_ */\n /**\n * Returns SVG representation of a pattern\n */\n toSVG({ width, height }: TSize): string {\n const { source: patternSource, repeat, id } = this,\n patternOffsetX = ifNaN(this.offsetX / width, 0),\n patternOffsetY = ifNaN(this.offsetY / height, 0),\n patternWidth =\n repeat === 'repeat-y' || repeat === 'no-repeat'\n ? 1 + Math.abs(patternOffsetX || 0)\n : ifNaN((patternSource as HTMLImageElement).width / width, 0),\n patternHeight =\n repeat === 'repeat-x' || repeat === 'no-repeat'\n ? 1 + Math.abs(patternOffsetY || 0)\n : ifNaN((patternSource as HTMLImageElement).height / height, 0);\n\n return [\n `<pattern id=\"SVGID_${escapeXml(id)}\" x=\"${patternOffsetX}\" y=\"${patternOffsetY}\" width=\"${patternWidth}\" height=\"${patternHeight}\">`,\n `<image x=\"0\" y=\"0\" width=\"${\n (patternSource as HTMLImageElement).width\n }\" height=\"${\n (patternSource as HTMLImageElement).height\n }\" xlink:href=\"${escapeXml(this.sourceToString())}\"></image>`,\n `</pattern>`,\n '',\n ].join('\\n');\n }\n /* _TO_SVG_END_ */\n\n static async fromObject(\n {\n type,\n source,\n patternTransform,\n ...otherOptions\n }: SerializedPatternOptions,\n options?: Abortable,\n ): Promise<Pattern> {\n const img = await loadImage(source, {\n ...options,\n crossOrigin: otherOptions.crossOrigin,\n });\n return new this({\n ...otherOptions,\n patternTransform:\n patternTransform && (patternTransform.slice(0) as TMat2D),\n source: img,\n });\n }\n}\n\nclassRegistry.setClass(Pattern);\n// kept for compatibility reason\nclassRegistry.setClass(Pattern, 'pattern');\n"],"mappings":"olBAoBA,IAAa,EAAb,KAAA,CAWE,IAAA,MAAI,CACF,MAAO,UAGT,IAAA,KAAS,EAAA,CACP,EAAI,OAAQ,6BAA8B,EAAA,CAuD5C,YAAY,EAAA,CAAA,EAAA,KAhDZ,SAAwB,SAAA,CAAA,EAAA,KAMxB,UAAU,EAAA,CAAA,EAAA,KAMV,UAAU,EAAA,CAAA,EAAA,KAKV,cAA4B,GAAA,CAgC1B,KAAK,GAAK,GAAA,CACV,OAAO,OAAO,KAAM,EAAA,CAMtB,eAAA,CACE,MAAA,CAAA,CACI,KAAK,QAA2D,OAAzC,KAAK,OAA4B,KAAQ,SAOtE,gBAAA,CACE,MAAA,CAAA,CAAS,KAAK,QAAA,CAAA,CAAa,KAAK,OAA6B,UAG/D,gBAAA,CACE,OAAO,KAAK,eAAA,CACR,KAAK,OAAO,IACZ,KAAK,gBAAA,CACH,KAAK,OAAO,WAAA,CACZ,GAQR,OAAO,EAAA,CACL,OAEG,KAAK,SAAA,CAEL,KAAK,eAAA,EACF,KAAK,OAAO,UACZ,KAAK,OAAO,eAAiB,GAC7B,KAAK,OAAO,gBAAkB,GAK7B,EAAI,cAAc,KAAK,OAAQ,KAAK,OAAA,CAHlC,KAWX,SAAS,EAAgC,EAAA,CAAA,CACvC,GAAA,CAAM,OAAE,EAAA,YAAQ,GAAgB,KAChC,MAAO,CAAA,GACF,EAAK,KAAM,EAAA,CACd,KAAM,UACN,OAAQ,KAAK,gBAAA,CACb,OAAA,EACA,YAAA,EACA,QAAS,EAAQ,KAAK,QAAS,EAAO,oBAAA,CACtC,QAAS,EAAQ,KAAK,QAAS,EAAO,oBAAA,CACtC,iBAAkB,KAAK,iBACnB,CAAA,GAAI,KAAK,iBAAA,CACT,KAAA,CAQR,MAAA,CAAM,MAAE,EAAA,OAAO,GAAA,CACb,GAAA,CAAQ,OAAQ,EAAA,OAAe,EAAA,GAAQ,GAAO,KAC5C,EAAiB,EAAM,KAAK,QAAU,EAAO,EAAA,CAC7C,EAAiB,EAAM,KAAK,QAAU,EAAQ,EAAA,CAC9C,EACE,IAAW,YAAc,IAAW,YAChC,EAAI,KAAK,IAAI,GAAkB,EAAA,CAC/B,EAAO,EAAmC,MAAQ,EAAO,EAAA,CAC/D,EACE,IAAW,YAAc,IAAW,YAChC,EAAI,KAAK,IAAI,GAAkB,EAAA,CAC/B,EAAO,EAAmC,OAAS,EAAQ,EAAA,CAEnE,MAAO,CACL,sBAAsB,EAAU,EAAA,CAAA,OAAW,EAAA,OAAsB,EAAA,WAA0B,EAAA,YAAyB,EAAA,IACpH,6BACG,EAAmC,MAAA,YAEnC,EAAmC,OAAA,gBACrB,EAAU,KAAK,gBAAA,CAAA,CAAA,YAChC,aACA,GAAA,CACA,KAAK;EAAA,CAIT,aAAA,WAAa,CACX,KACE,EAAA,OACA,EAAA,iBACA,EAAA,GACG,GAEL,EAAA,CAEA,IAAM,EAAA,MAAY,EAAU,EAAQ,CAAA,GAC/B,EACH,YAAa,EAAa,YAAA,CAAA,CAE5B,OAAO,IAAI,KAAK,CAAA,GACX,EACH,iBACE,GAAqB,EAAiB,MAAM,EAAA,CAC9C,OAAQ,EAAA,CAAA,GAAA,EAAA,EA5LL,OAAO,UAAA,CAiMhB,EAAc,SAAS,EAAA,CAEvB,EAAc,SAAS,EAAS,UAAA,CAAA,OAAA,KAAA"}