fabric 5.3.0 → 6.0.0-beta3

package/src/parser/parsePointsAttribute.ts

@@ -0,0 +1,34 @@
+//@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+/);
+  const parsedPoints = [];
+
+  for (let i = 0; i < points.length; 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;
+}

package/src/parser/parseSVGDocument.ts

@@ -0,0 +1,93 @@
+//@ts-nocheck
+
+import { uid } from '../util/internals/uid';
+import { applyViewboxTransform } from './applyViewboxTransform';
+import {
+  clipPaths,
+  cssRules,
+  gradientDefs,
+  svgInvalidAncestorsRegEx,
+  svgValidTagNamesRegEx,
+} from './constants';
+import { getCSSRules } from './getCSSRules';
+import { getGradientDefs } from './getGradientDefs';
+import { hasAncestorWithNodeName } from './hasAncestorWithNodeName';
+import { parseElements } from './parseElements';
+import { parseUseDirectives } from './parseUseDirectives';
+
+/**
+ * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
+ * @static
+ * @function
+ * @memberOf fabric
+ * @param {SVGDocument} doc SVG document to parse
+ * @param {Function} callback Callback to call when parsing is finished;
+ * It's being passed an array of elements (parsed from a document).
+ * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
+ * @param {Object} [parsingOptions] options for parsing document
+ * @param {String} [parsingOptions.crossOrigin] crossOrigin settings
+ * @param {AbortSignal} [parsingOptions.signal] see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+ */
+export function parseSVGDocument(doc, callback, reviver, parsingOptions) {
+  if (!doc) {
+    return;
+  }
+  if (
+    parsingOptions &&
+    parsingOptions.signal &&
+    parsingOptions.signal.aborted
+  ) {
+    throw new Error('`options.signal` is in `aborted` state');
+  }
+  parseUseDirectives(doc);
+
+  const svgUid = uid(),
+    options = applyViewboxTransform(doc),
+    descendants = Array.from(doc.getElementsByTagName('*'));
+  options.crossOrigin = parsingOptions && parsingOptions.crossOrigin;
+  options.svgUid = svgUid;
+  options.signal = parsingOptions && parsingOptions.signal;
+
+  const elements = descendants.filter(function (el) {
+    applyViewboxTransform(el);
+    return (
+      svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) &&
+      !hasAncestorWithNodeName(el, svgInvalidAncestorsRegEx)
+    ); // http://www.w3.org/TR/SVG/struct.html#DefsElement
+  });
+  if (!elements || (elements && !elements.length)) {
+    callback && callback([], {});
+    return;
+  }
+  const localClipPaths = {};
+  descendants
+    .filter(function (el) {
+      return el.nodeName.replace('svg:', '') === 'clipPath';
+    })
+    .forEach(function (el) {
+      const id = el.getAttribute('id');
+      localClipPaths[id] = Array.from(el.getElementsByTagName('*')).filter(
+        function (el) {
+          return svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', ''));
+        }
+      );
+    });
+  gradientDefs[svgUid] = getGradientDefs(doc);
+  cssRules[svgUid] = getCSSRules(doc);
+  clipPaths[svgUid] = localClipPaths;
+  // Precedence of rules:   style > class > attribute
+  parseElements(
+    elements,
+    function (instances, elements) {
+      if (callback) {
+        callback(instances, options, elements, descendants);
+        delete gradientDefs[svgUid];
+        delete cssRules[svgUid];
+        delete clipPaths[svgUid];
+      }
+    },
+    Object.assign({}, options),
+    reviver,
+    parsingOptions
+  );
+}

package/src/parser/parseStyleAttribute.ts

@@ -0,0 +1,27 @@
+//@ts-nocheck
+import { parseStyleObject } from './parseStyleObject';
+import { parseStyleString } from './parseStyleString';
+
+/**
+ * Parses "style" attribute, retuning an object with values
+ * @static
+ * @memberOf fabric
+ * @param {SVGElement} element Element to parse
+ * @return {Object} Objects with values parsed from style attribute of an element
+ */
+export function parseStyleAttribute(element) {
+  const oStyle = {},
+    style = element.getAttribute('style');
+
+  if (!style) {
+    return oStyle;
+  }
+
+  if (typeof style === 'string') {
+    parseStyleString(style, oStyle);
+  } else {
+    parseStyleObject(style, oStyle);
+  }
+
+  return oStyle;
+}

package/src/parser/parseStyleObject.ts

@@ -0,0 +1,15 @@
+//@ts-nocheck
+
+export function parseStyleObject(style, oStyle) {
+  let attr, value;
+  for (const prop in style) {
+    if (typeof style[prop] === 'undefined') {
+      continue;
+    }
+
+    attr = prop.toLowerCase();
+    value = style[prop];
+
+    oStyle[attr] = value;
+  }
+}

package/src/parser/parseStyleString.ts

@@ -0,0 +1,16 @@
+//@ts-nocheck
+
+export function parseStyleString(style, oStyle) {
+  let attr, value;
+  style
+    .replace(/;\s*$/, '')
+    .split(';')
+    .forEach(function (chunk) {
+      const pair = chunk.split(':');
+
+      attr = pair[0].trim().toLowerCase();
+      value = pair[1].trim();
+
+      oStyle[attr] = value;
+    });
+}

package/src/parser/parseTransformAttribute.ts

@@ -0,0 +1,155 @@
+//@ts-nocheck
+import { iMatrix } from '../constants';
+import { commaWsp, reNum } from './constants';
+import { multiplyTransformMatrices } from '../util/misc/matrix';
+import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
+import { rotateMatrix } from './rotateMatrix';
+import { scaleMatrix } from './scaleMatrix';
+import { skewMatrix } from './skewMatrix';
+import { translateMatrix } from './translateMatrix';
+
+// == begin transform regexp
+const number = reNum,
+  skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))',
+  skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))',
+  rotate =
+    '(?:(rotate)\\s*\\(\\s*(' +
+    number +
+    ')(?:' +
+    commaWsp +
+    '(' +
+    number +
+    ')' +
+    commaWsp +
+    '(' +
+    number +
+    '))?\\s*\\))',
+  scale =
+    '(?:(scale)\\s*\\(\\s*(' +
+    number +
+    ')(?:' +
+    commaWsp +
+    '(' +
+    number +
+    '))?\\s*\\))',
+  translate =
+    '(?:(translate)\\s*\\(\\s*(' +
+    number +
+    ')(?:' +
+    commaWsp +
+    '(' +
+    number +
+    '))?\\s*\\))',
+  matrix =
+    '(?:(matrix)\\s*\\(\\s*' +
+    '(' +
+    number +
+    ')' +
+    commaWsp +
+    '(' +
+    number +
+    ')' +
+    commaWsp +
+    '(' +
+    number +
+    ')' +
+    commaWsp +
+    '(' +
+    number +
+    ')' +
+    commaWsp +
+    '(' +
+    number +
+    ')' +
+    commaWsp +
+    '(' +
+    number +
+    ')' +
+    '\\s*\\))',
+  transform =
+    '(?:' +
+    matrix +
+    '|' +
+    translate +
+    '|' +
+    scale +
+    '|' +
+    rotate +
+    '|' +
+    skewX +
+    '|' +
+    skewY +
+    ')',
+  transforms =
+    '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')',
+  transformList = '^\\s*(?:' + transforms + '?)\\s*$',
+  // http://www.w3.org/TR/SVG/coords.html#TransformAttribute
+  reTransformList = new RegExp(transformList),
+  // == end transform regexp
+  reTransform = new RegExp(transform, 'g');
+
+/**
+ * Parses "transform" attribute, returning an array of values
+ * @static
+ * @function
+ * @memberOf fabric
+ * @param {String} attributeValue String containing attribute value
+ * @return {Array} Array of 6 elements representing transformation matrix
+ */
+export function parseTransformAttribute(attributeValue) {
+  // start with identity matrix
+  let matrix = iMatrix.concat();
+  const matrices = [];
+
+  // return if no argument was given or
+  // an argument does not match transform attribute regexp
+  if (
+    !attributeValue ||
+    (attributeValue && !reTransformList.test(attributeValue))
+  ) {
+    return matrix;
+  }
+
+  attributeValue.replace(reTransform, function (match) {
+    const m = new RegExp(transform).exec(match).filter(function (match) {
+        // match !== '' && match != null
+        return !!match;
+      }),
+      operation = m[1],
+      args = m.slice(2).map(parseFloat);
+
+    switch (operation) {
+      case 'translate':
+        translateMatrix(matrix, args);
+        break;
+      case 'rotate':
+        args[0] = degreesToRadians(args[0]);
+        rotateMatrix(matrix, args);
+        break;
+      case 'scale':
+        scaleMatrix(matrix, args);
+        break;
+      case 'skewX':
+        skewMatrix(matrix, args, 2);
+        break;
+      case 'skewY':
+        skewMatrix(matrix, args, 1);
+        break;
+      case 'matrix':
+        matrix = args;
+        break;
+    }
+
+    // snapshot current matrix into matrices array
+    matrices.push(matrix.concat());
+    // reset
+    matrix = iMatrix.concat();
+  });
+
+  let combinedMatrix = matrices[0];
+  while (matrices.length > 1) {
+    matrices.shift();
+    combinedMatrix = multiplyTransformMatrices(combinedMatrix, matrices[0]);
+  }
+  return combinedMatrix;
+}

package/src/parser/parseUseDirectives.ts

@@ -0,0 +1,78 @@
+//@ts-nocheck
+import { svgNS } from './constants';
+import { elementById } from './elementById';
+import { getMultipleNodes } from './getMultipleNodes';
+import { applyViewboxTransform } from './applyViewboxTransform';
+
+export function parseUseDirectives(doc) {
+  const nodelist = getMultipleNodes(doc, ['use', 'svg:use']);
+  let i = 0;
+  while (nodelist.length && i < nodelist.length) {
+    const el = nodelist[i],
+      xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href');
+
+    if (xlinkAttribute === null) {
+      return;
+    }
+
+    const xlink = xlinkAttribute.slice(1);
+    const x = el.getAttribute('x') || 0;
+    const y = el.getAttribute('y') || 0;
+    let el2 = elementById(doc, xlink).cloneNode(true);
+    let currentTrans =
+      (el2.getAttribute('transform') || '') +
+      ' translate(' +
+      x +
+      ', ' +
+      y +
+      ')';
+    const oldLength = nodelist.length;
+    let attr;
+    let j;
+    let attrs;
+    let len;
+    const namespace = svgNS;
+
+    applyViewboxTransform(el2);
+    if (/^svg$/i.test(el2.nodeName)) {
+      const el3 = el2.ownerDocument.createElementNS(namespace, 'g');
+      for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) {
+        attr = attrs.item(j);
+        el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue);
+      }
+      // el2.firstChild != null
+      while (el2.firstChild) {
+        el3.appendChild(el2.firstChild);
+      }
+      el2 = el3;
+    }
+
+    for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) {
+      attr = attrs.item(j);
+      if (
+        attr.nodeName === 'x' ||
+        attr.nodeName === 'y' ||
+        attr.nodeName === 'xlink:href' ||
+        attr.nodeName === 'href'
+      ) {
+        continue;
+      }
+
+      if (attr.nodeName === 'transform') {
+        currentTrans = attr.nodeValue + ' ' + currentTrans;
+      } else {
+        el2.setAttribute(attr.nodeName, attr.nodeValue);
+      }
+    }
+
+    el2.setAttribute('transform', currentTrans);
+    el2.setAttribute('instantiated_by_use', '1');
+    el2.removeAttribute('id');
+    const parentNode = el.parentNode;
+    parentNode.replaceChild(el2, el);
+    // some browsers do not shorten nodelist after replaceChild (IE8)
+    if (nodelist.length === oldLength) {
+      i++;
+    }
+  }
+}

package/src/parser/percent.ts

@@ -0,0 +1,27 @@
+import { ifNaN } from '../util/internals';
+import { capValue } from '../util/misc/capValue';
+
+const RE_PERCENT = /^(\d+\.\d+)%|(\d+)%$/;
+
+export function isPercent(value: string | null) {
+  return value && RE_PERCENT.test(value);
+}
+
+/**
+ *
+ * @param value
+ * @param valueIfNaN
+ * @returns ∈ [0, 1]
+ */
+export function parsePercent(
+  value: string | number | null | undefined,
+  valueIfNaN?: number
+) {
+  const parsed =
+    typeof value === 'number'
+      ? value
+      : typeof value === 'string'
+      ? parseFloat(value) / (isPercent(value) ? 100 : 1)
+      : NaN;
+  return capValue(0, ifNaN(parsed, valueIfNaN), 1);
+}

package/src/parser/recursivelyParseGradientsXlink.ts

@@ -0,0 +1,42 @@
+//@ts-nocheck
+
+import { elementById } from './elementById';
+
+const gradientsAttrs = [
+  'gradientTransform',
+  'x1',
+  'x2',
+  'y1',
+  'y2',
+  'gradientUnits',
+  'cx',
+  'cy',
+  'r',
+  'fx',
+  'fy',
+];
+const xlinkAttr = 'xlink:href';
+
+export function recursivelyParseGradientsXlink(doc, gradient) {
+  const xLink = gradient.getAttribute(xlinkAttr).slice(1),
+    referencedGradient = elementById(doc, xLink);
+  if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) {
+    recursivelyParseGradientsXlink(doc, referencedGradient);
+  }
+  gradientsAttrs.forEach(function (attr) {
+    if (
+      referencedGradient &&
+      !gradient.hasAttribute(attr) &&
+      referencedGradient.hasAttribute(attr)
+    ) {
+      gradient.setAttribute(attr, referencedGradient.getAttribute(attr));
+    }
+  });
+  if (!gradient.children.length) {
+    const referenceClone = referencedGradient.cloneNode(true);
+    while (referenceClone.firstChild) {
+      gradient.appendChild(referenceClone.firstChild);
+    }
+  }
+  gradient.removeAttribute(xlinkAttr);
+}

package/src/parser/rotateMatrix.ts

@@ -0,0 +1,21 @@
+//@ts-nocheck
+import { cos } from '../util/misc/cos';
+import { sin } from '../util/misc/sin';
+
+export function rotateMatrix(matrix, args) {
+  const cosValue = cos(args[0]),
+    sinValue = sin(args[0]);
+  let x = 0,
+    y = 0;
+  if (args.length === 3) {
+    x = args[1];
+    y = args[2];
+  }
+
+  matrix[0] = cosValue;
+  matrix[1] = sinValue;
+  matrix[2] = -sinValue;
+  matrix[3] = cosValue;
+  matrix[4] = x - (cosValue * x - sinValue * y);
+  matrix[5] = y - (sinValue * x + cosValue * y);
+}

package/src/parser/scaleMatrix.ts

@@ -0,0 +1,9 @@
+//@ts-nocheck
+
+export function scaleMatrix(matrix, args) {
+  const multiplierX = args[0],
+    multiplierY = args.length === 2 ? args[1] : args[0];
+
+  matrix[0] = multiplierX;
+  matrix[3] = multiplierY;
+}

package/src/parser/selectorMatches.ts

@@ -0,0 +1,25 @@
+export function selectorMatches(element: HTMLElement, selector: string) {
+  const nodeName = element.nodeName;
+  const classNames = element.getAttribute('class');
+  const id = element.getAttribute('id');
+  let matcher;
+  // i check if a selector matches slicing away part from it.
+  // if i get empty string i should match
+  matcher = new RegExp('^' + nodeName, 'i');
+  selector = selector.replace(matcher, '');
+  if (id && selector.length) {
+    matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i');
+    selector = selector.replace(matcher, '');
+  }
+  if (classNames && selector.length) {
+    const splitClassNames = classNames.split(' ');
+    for (let i = splitClassNames.length; i--; ) {
+      matcher = new RegExp(
+        '\\.' + splitClassNames[i] + '(?![a-zA-Z\\-]+)',
+        'i'
+      );
+      selector = selector.replace(matcher, '');
+    }
+  }
+  return selector.length === 0;
+}

package/src/parser/setStrokeFillOpacity.ts

@@ -0,0 +1,40 @@
+//@ts-nocheck
+import { Color } from '../color/Color';
+import { toFixed } from '../util/misc/toFixed';
+import { colorAttributes } from './constants';
+import { FabricObject } from '../shapes/Object/FabricObject';
+
+/**
+ * @private
+ * @param {Object} attributes Array of attributes to parse
+ */
+
+export function setStrokeFillOpacity(attributes) {
+  for (const attr in colorAttributes) {
+    if (
+      typeof attributes[colorAttributes[attr]] === 'undefined' ||
+      attributes[attr] === ''
+    ) {
+      continue;
+    }
+    const defaults = FabricObject.getDefaults();
+    if (typeof attributes[attr] === 'undefined') {
+      if (!defaults[attr]) {
+        continue;
+      }
+      attributes[attr] = defaults[attr];
+    }
+
+    if (attributes[attr].indexOf('url(') === 0) {
+      continue;
+    }
+
+    const color = new Color(attributes[attr]);
+    attributes[attr] = color
+      .setAlpha(
+        toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)
+      )
+      .toRgba();
+  }
+  return attributes;
+}

package/src/parser/skewMatrix.ts

@@ -0,0 +1,6 @@
+//@ts-nocheck
+import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
+
+export function skewMatrix(matrix, args, pos) {
+  matrix[pos] = Math.tan(degreesToRadians(args[0]));
+}

package/src/parser/translateMatrix.ts

@@ -0,0 +1,8 @@
+//@ts-nocheck
+
+export function translateMatrix(matrix, args) {
+  matrix[4] = args[0];
+  if (args.length === 2) {
+    matrix[5] = args[1];
+  }
+}