fabric 5.3.0 → 6.0.0-beta1

package/src/parser/elements_parser.ts

@@ -0,0 +1,191 @@
+//@ts-nocheck
+import { Gradient } from '../gradient/Gradient';
+import { Group } from '../shapes/Group';
+import { Image } from '../shapes/Image';
+import { classRegistry } from '../util/class_registry';
+import {
+  invertTransform,
+  multiplyTransformMatrices,
+  qrDecompose,
+} from '../util/misc/matrix';
+import { storage } from './constants';
+import { removeTransformMatrixForSvgParsing } from '../util/transform_matrix_removal';
+
+const ElementsParser = function (
+  elements,
+  callback,
+  options,
+  reviver,
+  parsingOptions,
+  doc
+) {
+  this.elements = elements;
+  this.callback = callback;
+  this.options = options;
+  this.reviver = reviver;
+  this.svgUid = (options && options.svgUid) || 0;
+  this.parsingOptions = parsingOptions;
+  this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g;
+  this.doc = doc;
+};
+
+(function (proto) {
+  proto.parse = function () {
+    this.instances = new Array(this.elements.length);
+    this.numElements = this.elements.length;
+    this.createObjects();
+  };
+
+  proto.createObjects = function () {
+    this.elements.forEach((element, i) => {
+      element.setAttribute('svgUid', this.svgUid);
+      this.createObject(element, i);
+    });
+  };
+
+  proto.findTag = function (el) {
+    return classRegistry.getSVGClass(
+      el.tagName.toLowerCase().replace('svg:', '')
+    );
+  };
+
+  proto.createObject = function (el, index) {
+    const klass = this.findTag(el);
+    if (klass && klass.fromElement) {
+      try {
+        klass.fromElement(el, this.createCallback(index, el), this.options);
+      } catch (err) {
+        console.log(err);
+      }
+    } else {
+      this.checkIfDone();
+    }
+  };
+
+  proto.createCallback = function (index, el) {
+    return (obj) => {
+      let _options;
+      this.resolveGradient(obj, el, 'fill');
+      this.resolveGradient(obj, el, 'stroke');
+      if (obj instanceof Image && obj._originalElement) {
+        _options = obj.parsePreserveAspectRatioAttribute(el);
+      }
+      removeTransformMatrixForSvgParsing(obj, _options);
+      this.resolveClipPath(obj, el);
+      this.reviver && this.reviver(el, obj);
+      this.instances[index] = obj;
+      this.checkIfDone();
+    };
+  };
+
+  proto.extractPropertyDefinition = function (obj, property, storageType) {
+    const value = obj[property],
+      regex = this.regexUrl;
+    if (!regex.test(value)) {
+      return;
+    }
+    regex.lastIndex = 0;
+    const id = regex.exec(value)[1];
+    regex.lastIndex = 0;
+    // @todo fix this
+    return storage[storageType][this.svgUid][id];
+  };
+
+  proto.resolveGradient = function (obj, el, property) {
+    const gradientDef = this.extractPropertyDefinition(
+      obj,
+      property,
+      'gradientDefs'
+    );
+    if (gradientDef) {
+      const opacityAttr = el.getAttribute(property + '-opacity');
+      const gradient = Gradient.fromElement(gradientDef, obj, {
+        ...this.options,
+        opacity: opacityAttr,
+      });
+      obj.set(property, gradient);
+    }
+  };
+
+  proto.createClipPathCallback = function (obj, container) {
+    return function (_newObj) {
+      removeTransformMatrixForSvgParsing(_newObj);
+      _newObj.fillRule = _newObj.clipRule;
+      container.push(_newObj);
+    };
+  };
+
+  proto.resolveClipPath = function (obj, usingElement) {
+    var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'),
+      element,
+      klass,
+      objTransformInv,
+      container,
+      gTransform,
+      options;
+    if (clipPath) {
+      container = [];
+      objTransformInv = invertTransform(obj.calcTransformMatrix());
+      // move the clipPath tag as sibling to the real element that is using it
+      const clipPathTag = clipPath[0].parentNode;
+      let clipPathOwner = usingElement;
+      while (
+        clipPathOwner.parentNode &&
+        clipPathOwner.getAttribute('clip-path') !== obj.clipPath
+      ) {
+        clipPathOwner = clipPathOwner.parentNode;
+      }
+      clipPathOwner.parentNode.appendChild(clipPathTag);
+      for (let i = 0; i < clipPath.length; i++) {
+        element = clipPath[i];
+        klass = this.findTag(element);
+        klass.fromElement(
+          element,
+          this.createClipPathCallback(obj, container),
+          this.options
+        );
+      }
+      if (container.length === 1) {
+        clipPath = container[0];
+      } else {
+        clipPath = new Group(container);
+      }
+      gTransform = multiplyTransformMatrices(
+        objTransformInv,
+        clipPath.calcTransformMatrix()
+      );
+      if (clipPath.clipPath) {
+        this.resolveClipPath(clipPath, clipPathOwner);
+      }
+      const options = qrDecompose(gTransform);
+      clipPath.flipX = false;
+      clipPath.flipY = false;
+      clipPath.set('scaleX', options.scaleX);
+      clipPath.set('scaleY', options.scaleY);
+      clipPath.angle = options.angle;
+      clipPath.skewX = options.skewX;
+      clipPath.skewY = 0;
+      clipPath.setPositionByOrigin(
+        { x: options.translateX, y: options.translateY },
+        'center',
+        'center'
+      );
+      obj.clipPath = clipPath;
+    } else {
+      // if clip-path does not resolve to any element, delete the property.
+      delete obj.clipPath;
+    }
+  };
+
+  proto.checkIfDone = function () {
+    if (--this.numElements === 0) {
+      this.instances = this.instances.filter(function (el) {
+        // eslint-disable-next-line no-eq-null, eqeqeq
+        return el != null;
+      });
+      this.callback(this.instances, this.elements);
+    }
+  };
+})(ElementsParser.prototype);
+
+export { ElementsParser };

package/src/parser/getCSSRules.ts

@@ -0,0 +1,62 @@
+//@ts-nocheck
+
+/**
+ * Returns CSS rules for a given SVG document
+ * @param {SVGDocument} doc SVG document to parse
+ * @return {Object} CSS rules of this document
+ */
+export function getCSSRules(doc) {
+  let styles = doc.getElementsByTagName('style'),
+    i,
+    len,
+    allRules = {},
+    rules;
+
+  // very crude parsing of style contents
+  for (i = 0, len = styles.length; i < len; i++) {
+    let styleContents = styles[i].textContent;
+
+    // remove comments
+    styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, '');
+    if (styleContents.trim() === '') {
+      continue;
+    }
+    // recovers all the rule in this form `body { style code... }`
+    // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g);
+    rules = styleContents.split('}');
+    // remove empty rules.
+    rules = rules.filter(function (rule) {
+      return rule.trim();
+    });
+    // at this point we have hopefully an array of rules `body { style code... `
+    // eslint-disable-next-line no-loop-func
+    rules.forEach(function (rule) {
+      const match = rule.split('{'),
+        ruleObj = {},
+        declaration = match[1].trim(),
+        propertyValuePairs = declaration.split(';').filter(function (pair) {
+          return pair.trim();
+        });
+
+      for (i = 0, len = propertyValuePairs.length; i < len; i++) {
+        const pair = propertyValuePairs[i].split(':'),
+          property = pair[0].trim(),
+          value = pair[1].trim();
+        ruleObj[property] = value;
+      }
+      rule = match[0].trim();
+      rule.split(',').forEach(function (_rule) {
+        _rule = _rule.replace(/^svg/i, '').trim();
+        if (_rule === '') {
+          return;
+        }
+        if (allRules[_rule]) {
+          Object.assign(allRules[_rule], ruleObj);
+        } else {
+          allRules[_rule] = Object.assign({}, ruleObj);
+        }
+      });
+    });
+  }
+  return allRules;
+}

package/src/parser/getGlobalStylesForElement.ts

@@ -0,0 +1,19 @@
+//@ts-nocheck
+import { cssRules } from './constants';
+import { elementMatchesRule } from './elementMatchesRule';
+
+/**
+ * @private
+ */
+
+export function getGlobalStylesForElement(element, svgUid) {
+  const styles = {};
+  for (const rule in cssRules[svgUid]) {
+    if (elementMatchesRule(element, rule.split(' '))) {
+      for (const property in cssRules[svgUid][rule]) {
+        styles[property] = cssRules[svgUid][rule][property];
+      }
+    }
+  }
+  return styles;
+}

package/src/parser/getGradientDefs.ts

@@ -0,0 +1,32 @@
+//@ts-nocheck
+
+import { getMultipleNodes } from './getMultipleNodes';
+import { recursivelyParseGradientsXlink } from './recursivelyParseGradientsXlink';
+
+const tagArray = [
+  'linearGradient',
+  'radialGradient',
+  'svg:linearGradient',
+  'svg:radialGradient',
+];
+
+/**
+ * Parses an SVG document, returning all of the gradient declarations found in it
+ * @param {SVGDocument} doc SVG document to parse
+ * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element
+ */
+export function getGradientDefs(doc) {
+  let elList = getMultipleNodes(doc, tagArray),
+    el,
+    j = 0,
+    gradientDefs = {};
+  j = elList.length;
+  while (j--) {
+    el = elList[j];
+    if (el.getAttribute('xlink:href')) {
+      recursivelyParseGradientsXlink(doc, el);
+    }
+    gradientDefs[el.getAttribute('id')] = el;
+  }
+  return gradientDefs;
+}

package/src/parser/getMultipleNodes.ts

@@ -0,0 +1,15 @@
+//@ts-nocheck
+
+export function getMultipleNodes(doc, nodeNames) {
+  let nodeName,
+    nodeArray = [],
+    nodeList,
+    i,
+    len;
+  for (i = 0, len = nodeNames.length; i < len; i++) {
+    nodeName = nodeNames[i];
+    nodeList = doc.getElementsByTagName(nodeName);
+    nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList));
+  }
+  return nodeArray;
+}

package/src/parser/getSvgRegex.ts

@@ -0,0 +1,5 @@
+//@ts-nocheck
+
+export function getSvgRegex(arr) {
+  return new RegExp('^(' + arr.join('|') + ')\\b', 'i');
+}

package/src/parser/hasAncestorWithNodeName.ts

@@ -0,0 +1,14 @@
+//@ts-nocheck
+
+export function hasAncestorWithNodeName(element, nodeName) {
+  while (element && (element = element.parentNode)) {
+    if (
+      element.nodeName &&
+      nodeName.test(element.nodeName.replace('svg:', '')) &&
+      !element.getAttribute('instantiated_by_use')
+    ) {
+      return true;
+    }
+  }
+  return false;
+}

package/src/parser/loadSVGFromString.ts

@@ -0,0 +1,26 @@
+//@ts-nocheck
+import { getEnv } from '../env';
+import { parseSVGDocument } from './parseSVGDocument';
+
+/**
+ * Takes string corresponding to an SVG document, and parses it into a set of fabric objects
+ * @memberOf fabric
+ * @param {String} string
+ * @param {Function} callback
+ * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
+ * @param {Object} [options] Object containing options for parsing
+ * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources
+ * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+ */
+export function loadSVGFromString(string, callback, reviver, options) {
+  const parser = new (getEnv().window.DOMParser)(),
+    doc = parser.parseFromString(string.trim(), 'text/xml');
+  parseSVGDocument(
+    doc.documentElement,
+    function (results, _options, elements, allElements) {
+      callback(results, _options, elements, allElements);
+    },
+    reviver,
+    options
+  );
+}

package/src/parser/loadSVGFromURL.ts

@@ -0,0 +1,40 @@
+//@ts-nocheck
+
+import { request } from '../util/dom_request';
+import { parseSVGDocument } from './parseSVGDocument';
+
+/**
+ * Takes url corresponding to an SVG document, and parses it into a set of fabric objects.
+ * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)
+ * @memberOf fabric
+ * @param {String} url
+ * @param {Function} callback
+ * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
+ * @param {Object} [options] Object containing options for parsing
+ * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources
+ * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+ */
+export function loadSVGFromURL(url, callback, reviver, options) {
+  new request(url.replace(/^\n\s*/, '').trim(), {
+    method: 'get',
+    onComplete: onComplete,
+    signal: options && options.signal,
+  });
+
+  function onComplete(r) {
+    const xml = r.responseXML;
+    if (!xml || !xml.documentElement) {
+      callback && callback(null);
+      return false;
+    }
+
+    parseSVGDocument(
+      xml.documentElement,
+      function (results, _options, elements, allElements) {
+        callback && callback(results, _options, elements, allElements);
+      },
+      reviver,
+      options
+    );
+  }
+}

package/src/parser/normalizeAttr.ts

@@ -0,0 +1,10 @@
+//@ts-nocheck
+import { attributesMap } from './constants';
+
+export function normalizeAttr(attr) {
+  // transform attribute names
+  if (attr in attributesMap) {
+    return attributesMap[attr];
+  }
+  return attr;
+}

package/src/parser/normalizeValue.ts

@@ -0,0 +1,63 @@
+//@ts-nocheck
+import { multiplyTransformMatrices } from '../util/misc/matrix';
+import { parseUnit } from '../util/misc/svgParsing';
+import { parseTransformAttribute } from './parseTransformAttribute';
+
+export function normalizeValue(attr, value, parentAttributes, fontSize) {
+  let isArray = Array.isArray(value),
+    parsed;
+
+  if ((attr === 'fill' || attr === 'stroke') && value === 'none') {
+    value = '';
+  } else if (attr === 'strokeUniform') {
+    return value === 'non-scaling-stroke';
+  } else if (attr === 'strokeDashArray') {
+    if (value === 'none') {
+      value = null;
+    } else {
+      value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat);
+    }
+  } else if (attr === 'transformMatrix') {
+    if (parentAttributes && parentAttributes.transformMatrix) {
+      value = multiplyTransformMatrices(
+        parentAttributes.transformMatrix,
+        parseTransformAttribute(value)
+      );
+    } else {
+      value = parseTransformAttribute(value);
+    }
+  } else if (attr === 'visible') {
+    value = value !== 'none' && value !== 'hidden';
+    // display=none on parent element always takes precedence over child element
+    if (parentAttributes && parentAttributes.visible === false) {
+      value = false;
+    }
+  } else if (attr === 'opacity') {
+    value = parseFloat(value);
+    if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') {
+      value *= parentAttributes.opacity;
+    }
+  } else if (attr === 'textAnchor' /* text-anchor */) {
+    value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';
+  } else if (attr === 'charSpacing') {
+    // parseUnit returns px and we convert it to em
+    parsed = (parseUnit(value, fontSize) / fontSize) * 1000;
+  } else if (attr === 'paintFirst') {
+    const fillIndex = value.indexOf('fill');
+    const strokeIndex = value.indexOf('stroke');
+    var value = 'fill';
+    if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) {
+      value = 'stroke';
+    } else if (fillIndex === -1 && strokeIndex > -1) {
+      value = 'stroke';
+    }
+  } else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') {
+    return value;
+  } else if (attr === 'imageSmoothing') {
+    return value === 'optimizeQuality';
+  } else {
+    parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize);
+  }
+
+  return !isArray && isNaN(parsed) ? value : parsed;
+}

package/src/parser/parseAttributes.ts

@@ -0,0 +1,90 @@
+//@ts-nocheck
+import { DEFAULT_SVG_FONT_SIZE } from '../constants';
+import { parseUnit } from '../util/misc/svgParsing';
+import { cPath, fSize, svgValidParentsRegEx } from './constants';
+import { getGlobalStylesForElement } from './getGlobalStylesForElement';
+import { normalizeAttr } from './normalizeAttr';
+import { normalizeValue } from './normalizeValue';
+import { parseFontDeclaration } from './parseFontDeclaration';
+import { parseStyleAttribute } from './parseStyleAttribute';
+import { setStrokeFillOpacity } from './setStrokeFillOpacity';
+
+/**
+ * Returns an object of attributes' name/value, given element and an array of attribute names;
+ * Parses parent "g" nodes recursively upwards.
+ * @param {SVGElement | HTMLElement} element Element to parse
+ * @param {Array} attributes Array of attributes to parse
+ * @return {Object} object containing parsed attributes' names/values
+ */
+export function parseAttributes(
+  element: SVGElement | HTMLElement,
+  attributes: string[],
+  svgUid?: string
+): Record<string, any> {
+  if (!element) {
+    return {};
+  }
+
+  let value,
+    parentAttributes = {},
+    fontSize,
+    parentFontSize;
+
+  if (typeof svgUid === 'undefined') {
+    svgUid = element.getAttribute('svgUid');
+  }
+  // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards
+  if (
+    element.parentNode &&
+    svgValidParentsRegEx.test(element.parentNode.nodeName)
+  ) {
+    parentAttributes = parseAttributes(element.parentNode, attributes, svgUid);
+  }
+
+  let ownAttributes = attributes.reduce(function (memo, attr) {
+    value = element.getAttribute(attr);
+    if (value) {
+      // eslint-disable-line
+      memo[attr] = value;
+    }
+    return memo;
+  }, {});
+  // add values parsed from style, which take precedence over attributes
+  // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes)
+  const cssAttrs = Object.assign(
+    getGlobalStylesForElement(element, svgUid),
+    parseStyleAttribute(element)
+  );
+  ownAttributes = Object.assign(ownAttributes, cssAttrs);
+  if (cssAttrs[cPath]) {
+    element.setAttribute(cPath, cssAttrs[cPath]);
+  }
+  fontSize = parentFontSize =
+    parentAttributes.fontSize || DEFAULT_SVG_FONT_SIZE;
+  if (ownAttributes[fSize]) {
+    // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers.
+    ownAttributes[fSize] = fontSize = parseUnit(
+      ownAttributes[fSize],
+      parentFontSize
+    );
+  }
+
+  const normalizedStyle = {};
+  for (const attr in ownAttributes) {
+    const normalizedAttr = normalizeAttr(attr);
+    const normalizedValue = normalizeValue(
+      normalizedAttr,
+      ownAttributes[attr],
+      parentAttributes,
+      fontSize
+    );
+    normalizedStyle[normalizedAttr] = normalizedValue;
+  }
+  if (normalizedStyle && normalizedStyle.font) {
+    parseFontDeclaration(normalizedStyle.font, normalizedStyle);
+  }
+  const mergedAttrs = { ...parentAttributes, ...normalizedStyle };
+  return svgValidParentsRegEx.test(element.nodeName)
+    ? mergedAttrs
+    : setStrokeFillOpacity(mergedAttrs);
+}

package/src/parser/parseElements.ts

@@ -0,0 +1,28 @@
+//@ts-nocheck
+
+import { ElementsParser } from './elements_parser';
+
+/**
+ * Transforms an array of svg elements to corresponding fabric.* instances
+ * @static
+ * @memberOf fabric
+ * @param {Array} elements Array of elements to parse
+ * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements)
+ * @param {Object} [options] Options object
+ * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
+ */
+export function parseElements(
+  elements,
+  callback,
+  options,
+  reviver,
+  parsingOptions
+) {
+  new ElementsParser(
+    elements,
+    callback,
+    options,
+    reviver,
+    parsingOptions
+  ).parse();
+}

package/src/parser/parseFontDeclaration.ts

@@ -0,0 +1,44 @@
+//@ts-nocheck
+import { parseUnit } from '../util/misc/svgParsing';
+import { reFontDeclaration } from './constants';
+
+/**
+ * Parses a short font declaration, building adding its properties to a style object
+ * @static
+ * @function
+ * @memberOf fabric
+ * @param {String} value font declaration
+ * @param {Object} oStyle definition
+ */
+export function parseFontDeclaration(value, oStyle) {
+  const match = value.match(reFontDeclaration);
+
+  if (!match) {
+    return;
+  }
+  const fontStyle = match[1],
+    // font variant is not used
+    // fontVariant = match[2],
+    fontWeight = match[3],
+    fontSize = match[4],
+    lineHeight = match[5],
+    fontFamily = match[6];
+
+  if (fontStyle) {
+    oStyle.fontStyle = fontStyle;
+  }
+  if (fontWeight) {
+    oStyle.fontWeight = isNaN(parseFloat(fontWeight))
+      ? fontWeight
+      : parseFloat(fontWeight);
+  }
+  if (fontSize) {
+    oStyle.fontSize = parseUnit(fontSize);
+  }
+  if (fontFamily) {
+    oStyle.fontFamily = fontFamily;
+  }
+  if (lineHeight) {
+    oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight;
+  }
+}

package/src/parser/parsePointsAttribute.ts

@@ -0,0 +1,36 @@
+//@ts-nocheck
+
+/**
+ * Parses "points" attribute, returning an array of values
+ * @static
+ * @memberOf fabric
+ * @param {String} points points attribute string
+ * @return {Array} array of points
+ */
+export function parsePointsAttribute(points) {
+  // points attribute is required and must not be empty
+  if (!points) {
+    return null;
+  }
+
+  // replace commas with whitespace and remove bookending whitespace
+  points = points.replace(/,/g, ' ').trim();
+
+  points = points.split(/\s+/);
+  let parsedPoints = [],
+    i,
+    len;
+
+  for (i = 0, len = points.length; i < len; i += 2) {
+    parsedPoints.push({
+      x: parseFloat(points[i]),
+      y: parseFloat(points[i + 1]),
+    });
+  }
+
+  // odd number of points is an error
+  // if (parsedPoints.length % 2 !== 0) {
+  //   return null;
+  // }
+  return parsedPoints;
+}