fabric/dist/src/parser/elements_parser.mjs.map

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

{"version":3,"file":"elements_parser.mjs","names":[],"sources":["../../../src/parser/elements_parser.ts"],"sourcesContent":["import { Gradient } from '../gradient/Gradient';\nimport { Group } from '../shapes/Group';\nimport { FabricImage } from '../shapes/Image';\nimport { classRegistry } from '../ClassRegistry';\nimport {\n  invertTransform,\n  multiplyTransformMatrices,\n  qrDecompose,\n} from '../util/misc/matrix';\nimport { removeTransformMatrixForSvgParsing } from '../util/transform_matrix_removal';\nimport type { FabricObject } from '../shapes/Object/FabricObject';\nimport { Point } from '../Point';\nimport { CENTER, FILL, STROKE } from '../constants';\nimport { getGradientDefs } from './getGradientDefs';\nimport { getCSSRules } from './getCSSRules';\nimport type { LoadImageOptions } from '../util';\nimport type { CSSRules, TSvgReviverCallback } from './typedefs';\nimport type { ParsedViewboxTransform } from './applyViewboxTransform';\nimport type { SVGOptions } from '../gradient';\nimport { getTagName } from './getTagName';\nimport { parseTransformAttribute } from './parseTransformAttribute';\n\nconst findTag = (el: Element) =>\n  classRegistry.getSVGClass(getTagName(el).toLowerCase());\n\ntype StorageType = {\n  fill: SVGGradientElement;\n  stroke: SVGGradientElement;\n  clipPath: Element[];\n};\n\ntype NotParsedFabricObject = FabricObject & {\n  fill: string;\n  stroke: string;\n  clipPath?: string;\n  clipRule?: CanvasFillRule;\n};\n\nexport class ElementsParser {\n  declare elements: Element[];\n  declare options: LoadImageOptions & ParsedViewboxTransform;\n  declare reviver?: TSvgReviverCallback;\n  declare regexUrl: RegExp;\n  declare doc: Document;\n  declare clipPaths: Record<string, Element[]>;\n  declare gradientDefs: Record<string, SVGGradientElement>;\n  declare cssRules: CSSRules;\n\n  constructor(\n    elements: Element[],\n    options: LoadImageOptions & ParsedViewboxTransform,\n    reviver: TSvgReviverCallback | undefined,\n    doc: Document,\n    clipPaths: Record<string, Element[]>,\n  ) {\n    this.elements = elements;\n    this.options = options;\n    this.reviver = reviver;\n    this.regexUrl = /^url\\(['\"]?#([^'\"]+)['\"]?\\)/g;\n    this.doc = doc;\n    this.clipPaths = clipPaths;\n    this.gradientDefs = getGradientDefs(doc);\n    this.cssRules = getCSSRules(doc);\n  }\n\n  parse(): Promise<Array<FabricObject | null>> {\n    return Promise.all(\n      this.elements.map((element) => this.createObject(element)),\n    );\n  }\n\n  async createObject(el: Element): Promise<FabricObject | null> {\n    const klass = findTag(el);\n    if (klass) {\n      const obj: NotParsedFabricObject = await klass.fromElement(\n        el,\n        this.options,\n        this.cssRules,\n      );\n      this.resolveGradient(obj, el, FILL);\n      this.resolveGradient(obj, el, STROKE);\n      if (obj instanceof FabricImage && obj._originalElement) {\n        removeTransformMatrixForSvgParsing(\n          obj,\n          obj.parsePreserveAspectRatioAttribute(),\n        );\n      } else {\n        removeTransformMatrixForSvgParsing(obj);\n      }\n      await this.resolveClipPath(obj, el);\n      this.reviver && this.reviver(el, obj);\n      return obj;\n    }\n    return null;\n  }\n\n  extractPropertyDefinition(\n    obj: NotParsedFabricObject,\n    property: 'fill' | 'stroke' | 'clipPath',\n    storage: Record<string, StorageType[typeof property]>,\n  ): StorageType[typeof property] | undefined {\n    const value = obj[property]!,\n      regex = this.regexUrl;\n    if (!regex.test(value)) {\n      return undefined;\n    }\n    // verify: can we remove the 'g' flag? and remove lastIndex changes?\n    regex.lastIndex = 0;\n    // we passed the regex test, so we know is not null;\n    const id = regex.exec(value)![1];\n    regex.lastIndex = 0;\n    // @todo fix this\n    return storage[id];\n  }\n\n  resolveGradient(\n    obj: NotParsedFabricObject,\n    el: Element,\n    property: 'fill' | 'stroke',\n  ) {\n    const gradientDef = this.extractPropertyDefinition(\n      obj,\n      property,\n      this.gradientDefs,\n    ) as SVGGradientElement;\n    if (gradientDef) {\n      const opacityAttr = el.getAttribute(property + '-opacity');\n      const gradient = Gradient.fromElement(gradientDef, obj, {\n        ...this.options,\n        opacity: opacityAttr,\n      } as SVGOptions);\n      obj.set(property, gradient);\n    }\n  }\n\n  // TODO: resolveClipPath could be run once per clippath with minor work per object.\n  // is a refactor that i m not sure is worth on this code\n  async resolveClipPath(\n    obj: NotParsedFabricObject,\n    usingElement: Element,\n    exactOwner?: Element,\n  ) {\n    const clipPathElements = this.extractPropertyDefinition(\n      obj,\n      'clipPath',\n      this.clipPaths,\n    ) as Element[];\n    if (clipPathElements) {\n      const objTransformInv = invertTransform(obj.calcTransformMatrix());\n      const clipPathTag = clipPathElements[0].parentElement!;\n      let clipPathOwner = usingElement;\n      while (\n        !exactOwner &&\n        clipPathOwner.parentElement &&\n        clipPathOwner.getAttribute('clip-path') !== obj.clipPath\n      ) {\n        clipPathOwner = clipPathOwner.parentElement;\n      }\n      // move the clipPath tag as sibling to the real element that is using it\n      clipPathOwner.parentElement!.appendChild(clipPathTag);\n\n      // this multiplication order could be opposite.\n      // but i don't have an svg to test it\n      // at the first SVG that has a transform on both places and is misplaced\n      // try to invert this multiplication order\n      const finalTransform = parseTransformAttribute(\n        `${clipPathOwner.getAttribute('transform') || ''} ${\n          clipPathTag.getAttribute('originalTransform') || ''\n        }`,\n      );\n\n      clipPathTag.setAttribute(\n        'transform',\n        `matrix(${finalTransform.join(',')})`,\n      );\n\n      const container = await Promise.all(\n        clipPathElements.map((clipPathElement) => {\n          return findTag(clipPathElement)\n            .fromElement(clipPathElement, this.options, this.cssRules)\n            .then((enlivedClippath: NotParsedFabricObject) => {\n              removeTransformMatrixForSvgParsing(enlivedClippath);\n              enlivedClippath.fillRule = enlivedClippath.clipRule!;\n              delete enlivedClippath.clipRule;\n              return enlivedClippath;\n            });\n        }),\n      );\n      const clipPath =\n        container.length === 1 ? container[0] : new Group(container);\n      const gTransform = multiplyTransformMatrices(\n        objTransformInv,\n        clipPath.calcTransformMatrix(),\n      );\n      if (clipPath.clipPath) {\n        await this.resolveClipPath(\n          clipPath,\n          clipPathOwner,\n          // this is tricky.\n          // it tries to differentiate from when clipPaths are inherited by outside groups\n          // or when are really clipPaths referencing other clipPaths\n          clipPathTag.getAttribute('clip-path') ? clipPathOwner : undefined,\n        );\n      }\n      const { scaleX, scaleY, angle, skewX, translateX, translateY } =\n        qrDecompose(gTransform);\n      clipPath.set({\n        flipX: false,\n        flipY: false,\n      });\n      clipPath.set({\n        scaleX,\n        scaleY,\n        angle,\n        skewX,\n        skewY: 0,\n      });\n      clipPath.setPositionByOrigin(\n        new Point(translateX, translateY),\n        CENTER,\n        CENTER,\n      );\n      obj.clipPath = clipPath;\n    } else {\n      // if clip-path does not resolve to any element, delete the property.\n      delete obj.clipPath;\n      return;\n    }\n  }\n}\n"],"mappings":"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"}