fabric 5.3.0 → 6.0.0-beta3

package/src/parkinglot/canvas_animation.mixin.ts

@@ -0,0 +1,121 @@
+// @ts-nocheck
+
+import { StaticCanvas } from '../canvas/StaticCanvas';
+import { animate } from '../util/animation/animate';
+
+Object.assign(StaticCanvas.prototype, {
+  /**
+   * Animation duration (in ms) for fx* methods
+   * @type Number
+   * @default
+   */
+  FX_DURATION: 500,
+
+  /**
+   * Centers object horizontally with animation.
+   * @param {fabric.Object} object Object to center
+   * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
+   * @param {Function} [callbacks.onComplete] Invoked on completion
+   * @param {Function} [callbacks.onChange] Invoked on every step of animation
+   * @return {fabric.AnimationContext} context
+   */
+  fxCenterObjectH: function (object, callbacks) {
+    callbacks = callbacks || {};
+
+    var empty = function () {},
+      onComplete = callbacks.onComplete || empty,
+      onChange = callbacks.onChange || empty,
+      _this = this;
+
+    return animate({
+      target: this,
+      startValue: object.getX(),
+      endValue: this.getCenterPoint().x,
+      duration: this.FX_DURATION,
+      onChange: function (value) {
+        object.setX(value);
+        _this.requestRenderAll();
+        onChange();
+      },
+      onComplete: function () {
+        object.setCoords();
+        onComplete();
+      },
+    });
+  },
+
+  /**
+   * Centers object vertically with animation.
+   * @param {fabric.Object} object Object to center
+   * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
+   * @param {Function} [callbacks.onComplete] Invoked on completion
+   * @param {Function} [callbacks.onChange] Invoked on every step of animation
+   * @return {fabric.AnimationContext} context
+   */
+  fxCenterObjectV: function (object, callbacks) {
+    callbacks = callbacks || {};
+
+    var empty = function () {},
+      onComplete = callbacks.onComplete || empty,
+      onChange = callbacks.onChange || empty,
+      _this = this;
+
+    return animate({
+      target: this,
+      startValue: object.getY(),
+      endValue: this.getCenterPoint().y,
+      duration: this.FX_DURATION,
+      onChange: function (value) {
+        object.setY(value);
+        _this.requestRenderAll();
+        onChange();
+      },
+      onComplete: function () {
+        object.setCoords();
+        onComplete();
+      },
+    });
+  },
+
+  /**
+   * Same as `fabric.Canvas#remove` but animated
+   * @param {fabric.Object} object Object to remove
+   * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
+   * @param {Function} [callbacks.onComplete] Invoked on completion
+   * @param {Function} [callbacks.onChange] Invoked on every step of animation
+   * @return {fabric.AnimationContext} context
+   */
+  fxRemove: function (object, callbacks) {
+    callbacks = callbacks || {};
+    var empty = function () {},
+      onComplete = callbacks.onComplete || empty,
+      onChange = callbacks.onChange || empty,
+      _this = this;
+
+    return animate({
+      target: this,
+      startValue: object.opacity,
+      endValue: 0,
+      duration: this.FX_DURATION,
+      onChange: function (value) {
+        object.set('opacity', value);
+        _this.requestRenderAll();
+        onChange();
+      },
+      onComplete: function () {
+        _this.remove(object);
+        onComplete();
+      },
+    });
+  },
+
+  /**
+   * @param {fabric.Object} object Object to straighten
+   * @return {fabric.Canvas} thisArg
+   */
+  fxStraightenObject: function (object: FabricObject) {
+    return object.fxStraighten({
+      onChange: () => this.requestRenderAll(),
+    });
+  },
+});

package/src/parkinglot/straighten.ts

@@ -0,0 +1,58 @@
+// @ts-nocheck
+import { noop } from '../constants';
+import { FabricObject } from '../shapes/Object/FabricObject';
+import { TDegree } from '../typedefs';
+import { animate } from '../util/animation/animate';
+
+Object.assign(FabricObject.prototype, {
+  /**
+   * @private
+   * @return {Number} angle value
+   */
+  _getAngleValueForStraighten(this: FabricObject) {
+    const angle = this.angle % 360;
+    if (angle > 0) {
+      return Math.round((angle - 1) / 90) * 90;
+    }
+    return Math.round(angle / 90) * 90;
+  },
+
+  /**
+   * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer)
+   */
+  straighten(this: FabricObject) {
+    this.rotate(this._getAngleValueForStraighten());
+  },
+
+  /**
+   * Same as {@link straighten} but with animation
+   * @param {Object} callbacks Object with callback functions
+   * @param {Function} [callbacks.onComplete] Invoked on completion
+   * @param {Function} [callbacks.onChange] Invoked on every step of animation
+   */
+  fxStraighten(
+    this: FabricObject,
+    callbacks: {
+      onChange?(value: TDegree): any;
+      onComplete?(): any;
+    } = {}
+  ) {
+    const onComplete = callbacks.onComplete || noop,
+      onChange = callbacks.onChange || noop;
+
+    return animate({
+      target: this,
+      startValue: this.angle,
+      endValue: this._getAngleValueForStraighten(),
+      duration: this.FX_DURATION,
+      onChange: (value: TDegree) => {
+        this.rotate(value);
+        onChange(value);
+      },
+      onComplete: () => {
+        this.setCoords();
+        onComplete();
+      },
+    });
+  },
+});

package/src/parser/applyViewboxTransform.ts

@@ -0,0 +1,157 @@
+//@ts-nocheck
+import { svgNS } from './constants';
+import {
+  parsePreserveAspectRatioAttribute,
+  parseUnit,
+} from '../util/misc/svgParsing';
+import { svgViewBoxElementsRegEx, reViewBoxAttrValue } from './constants';
+
+/**
+ * Add a <g> element that envelop all child elements and makes the viewbox transformMatrix descend on all elements
+ */
+
+export function applyViewboxTransform(element) {
+  if (!svgViewBoxElementsRegEx.test(element.nodeName)) {
+    return {};
+  }
+  let viewBoxAttr = element.getAttribute('viewBox');
+  let scaleX = 1;
+  let scaleY = 1;
+  let minX = 0;
+  let minY = 0;
+  let matrix;
+  let el;
+  const widthAttr = element.getAttribute('width');
+  const heightAttr = element.getAttribute('height');
+  const x = element.getAttribute('x') || 0;
+  const y = element.getAttribute('y') || 0;
+  let preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '';
+  const missingViewBox =
+    !viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue));
+  const missingDimAttr =
+    !widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%';
+  const toBeParsed = missingViewBox && missingDimAttr;
+  const parsedDim = {};
+  let translateMatrix = '';
+  let widthDiff = 0;
+  let heightDiff = 0;
+
+  parsedDim.width = 0;
+  parsedDim.height = 0;
+  parsedDim.toBeParsed = toBeParsed;
+
+  if (missingViewBox) {
+    if (
+      (x || y) &&
+      element.parentNode &&
+      element.parentNode.nodeName !== '#document'
+    ) {
+      translateMatrix =
+        ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') ';
+      matrix = (element.getAttribute('transform') || '') + translateMatrix;
+      element.setAttribute('transform', matrix);
+      element.removeAttribute('x');
+      element.removeAttribute('y');
+    }
+  }
+
+  if (toBeParsed) {
+    return parsedDim;
+  }
+
+  if (missingViewBox) {
+    parsedDim.width = parseUnit(widthAttr);
+    parsedDim.height = parseUnit(heightAttr);
+    // set a transform for elements that have x y and are inner(only) SVGs
+    return parsedDim;
+  }
+  minX = -parseFloat(viewBoxAttr[1]);
+  minY = -parseFloat(viewBoxAttr[2]);
+  const viewBoxWidth = parseFloat(viewBoxAttr[3]);
+  const viewBoxHeight = parseFloat(viewBoxAttr[4]);
+  parsedDim.minX = minX;
+  parsedDim.minY = minY;
+  parsedDim.viewBoxWidth = viewBoxWidth;
+  parsedDim.viewBoxHeight = viewBoxHeight;
+  if (!missingDimAttr) {
+    parsedDim.width = parseUnit(widthAttr);
+    parsedDim.height = parseUnit(heightAttr);
+    scaleX = parsedDim.width / viewBoxWidth;
+    scaleY = parsedDim.height / viewBoxHeight;
+  } else {
+    parsedDim.width = viewBoxWidth;
+    parsedDim.height = viewBoxHeight;
+  }
+
+  // default is to preserve aspect ratio
+  preserveAspectRatio = parsePreserveAspectRatioAttribute(preserveAspectRatio);
+  if (preserveAspectRatio.alignX !== 'none') {
+    //translate all container for the effect of Mid, Min, Max
+    if (preserveAspectRatio.meetOrSlice === 'meet') {
+      scaleY = scaleX = scaleX > scaleY ? scaleY : scaleX;
+      // calculate additional translation to move the viewbox
+    }
+    if (preserveAspectRatio.meetOrSlice === 'slice') {
+      scaleY = scaleX = scaleX > scaleY ? scaleX : scaleY;
+      // calculate additional translation to move the viewbox
+    }
+    widthDiff = parsedDim.width - viewBoxWidth * scaleX;
+    heightDiff = parsedDim.height - viewBoxHeight * scaleX;
+    if (preserveAspectRatio.alignX === 'Mid') {
+      widthDiff /= 2;
+    }
+    if (preserveAspectRatio.alignY === 'Mid') {
+      heightDiff /= 2;
+    }
+    if (preserveAspectRatio.alignX === 'Min') {
+      widthDiff = 0;
+    }
+    if (preserveAspectRatio.alignY === 'Min') {
+      heightDiff = 0;
+    }
+  }
+
+  if (
+    scaleX === 1 &&
+    scaleY === 1 &&
+    minX === 0 &&
+    minY === 0 &&
+    x === 0 &&
+    y === 0
+  ) {
+    return parsedDim;
+  }
+  if ((x || y) && element.parentNode.nodeName !== '#document') {
+    translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') ';
+  }
+
+  matrix =
+    translateMatrix +
+    ' matrix(' +
+    scaleX +
+    ' 0' +
+    ' 0 ' +
+    scaleY +
+    ' ' +
+    (minX * scaleX + widthDiff) +
+    ' ' +
+    (minY * scaleY + heightDiff) +
+    ') ';
+  // seems unused.
+  // parsedDim.viewboxTransform = parseTransformAttribute(matrix);
+  if (element.nodeName === 'svg') {
+    el = element.ownerDocument.createElementNS(svgNS, 'g');
+    // element.firstChild != null
+    while (element.firstChild) {
+      el.appendChild(element.firstChild);
+    }
+    element.appendChild(el);
+  } else {
+    el = element;
+    el.removeAttribute('x');
+    el.removeAttribute('y');
+    matrix = el.getAttribute('transform') + matrix;
+  }
+  el.setAttribute('transform', matrix);
+  return parsedDim;
+}

package/src/parser/attributes.ts

@@ -0,0 +1,25 @@
+/**
+ * Attributes parsed from all SVG elements
+ * @type array
+ */
+export const SHARED_ATTRIBUTES = [
+  'display',
+  'transform',
+  'fill',
+  'fill-opacity',
+  'fill-rule',
+  'opacity',
+  'stroke',
+  'stroke-dasharray',
+  'stroke-linecap',
+  'stroke-dashoffset',
+  'stroke-linejoin',
+  'stroke-miterlimit',
+  'stroke-opacity',
+  'stroke-width',
+  'id',
+  'paint-order',
+  'vector-effect',
+  'instantiated_by_use',
+  'clip-path',
+];

package/src/parser/constants.ts

@@ -0,0 +1,115 @@
+//@ts-nocheck
+import { getSvgRegex } from './getSvgRegex';
+
+export const cssRules = {};
+export const gradientDefs = {};
+export const clipPaths = {};
+
+export const storage = {
+  cssRules,
+  gradientDefs,
+  clipPaths,
+};
+
+export const reNum = '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)';
+
+export const svgNS = 'http://www.w3.org/2000/svg';
+
+export const commaWsp = String.raw`(?:\s+,?\s*|,\s*|$)`;
+
+export const reFontDeclaration = new RegExp(
+  '(normal|italic)?\\s*(normal|small-caps)?\\s*' +
+    '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' +
+    reNum +
+    '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' +
+    reNum +
+    '))?\\s+(.*)'
+);
+
+export const svgValidTagNames = [
+    'path',
+    'circle',
+    'polygon',
+    'polyline',
+    'ellipse',
+    'rect',
+    'line',
+    'image',
+    'text',
+  ],
+  svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'],
+  svgInvalidAncestors = [
+    'pattern',
+    'defs',
+    'symbol',
+    'metadata',
+    'clipPath',
+    'mask',
+    'desc',
+  ],
+  svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'],
+  attributesMap = {
+    cx: 'left',
+    x: 'left',
+    r: 'radius',
+    cy: 'top',
+    y: 'top',
+    display: 'visible',
+    visibility: 'visible',
+    transform: 'transformMatrix',
+    'fill-opacity': 'fillOpacity',
+    'fill-rule': 'fillRule',
+    'font-family': 'fontFamily',
+    'font-size': 'fontSize',
+    'font-style': 'fontStyle',
+    'font-weight': 'fontWeight',
+    'letter-spacing': 'charSpacing',
+    'paint-order': 'paintFirst',
+    'stroke-dasharray': 'strokeDashArray',
+    'stroke-dashoffset': 'strokeDashOffset',
+    'stroke-linecap': 'strokeLineCap',
+    'stroke-linejoin': 'strokeLineJoin',
+    'stroke-miterlimit': 'strokeMiterLimit',
+    'stroke-opacity': 'strokeOpacity',
+    'stroke-width': 'strokeWidth',
+    'text-decoration': 'textDecoration',
+    'text-anchor': 'textAnchor',
+    opacity: 'opacity',
+    'clip-path': 'clipPath',
+    'clip-rule': 'clipRule',
+    'vector-effect': 'strokeUniform',
+    'image-rendering': 'imageSmoothing',
+  },
+  colorAttributes = {
+    stroke: 'strokeOpacity',
+    fill: 'fillOpacity',
+  },
+  fSize = 'font-size',
+  cPath = 'clip-path';
+
+export const svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames);
+
+export const svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements);
+
+export const svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors);
+
+export const svgValidParentsRegEx = getSvgRegex(svgValidParents);
+
+// http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
+// matches, e.g.: +14.56e-12, etc.
+export const reViewBoxAttrValue = new RegExp(
+  '^' +
+    '\\s*(' +
+    reNum +
+    '+)\\s*,?' +
+    '\\s*(' +
+    reNum +
+    '+)\\s*,?' +
+    '\\s*(' +
+    reNum +
+    '+)\\s*,?' +
+    '\\s*(' +
+    reNum +
+    '+)\\s*' +
+    '$'
+);

package/src/parser/doesSomeParentMatch.ts

@@ -0,0 +1,19 @@
+//@ts-nocheck
+import { selectorMatches } from './selectorMatches';
+
+export function doesSomeParentMatch(element, selectors) {
+  let selector,
+    parentMatching = true;
+  while (
+    element.parentNode &&
+    element.parentNode.nodeType === 1 &&
+    selectors.length
+  ) {
+    if (parentMatching) {
+      selector = selectors.pop();
+    }
+    element = element.parentNode;
+    parentMatching = selectorMatches(element, selector);
+  }
+  return selectors.length === 0;
+}

package/src/parser/elementById.ts

@@ -0,0 +1,21 @@
+/**
+ * @private
+ * to support IE8 missing getElementById on SVGdocument and on node xmlDOM
+ */
+export function elementById(doc: Document, id: string) {
+  let el;
+  doc.getElementById && (el = doc.getElementById(id));
+  if (el) {
+    return el;
+  }
+  let node;
+  let i;
+  let len;
+  const nodelist = doc.getElementsByTagName('*');
+  for (i = 0, len = nodelist.length; i < len; i++) {
+    node = nodelist[i];
+    if (id === node.getAttribute('id')) {
+      return node;
+    }
+  }
+}

package/src/parser/elementMatchesRule.ts

@@ -0,0 +1,16 @@
+import { selectorMatches } from './selectorMatches';
+import { doesSomeParentMatch } from './doesSomeParentMatch';
+
+/**
+ * @private
+ */
+
+export function elementMatchesRule(element: HTMLElement, selectors: string[]) {
+  let parentMatching = true;
+  // start from rightmost selector.
+  const firstMatching = selectorMatches(element, selectors.pop()!);
+  if (firstMatching && selectors.length) {
+    parentMatching = doesSomeParentMatch(element, selectors);
+  }
+  return firstMatching && parentMatching && selectors.length === 0;
+}