fabric 5.3.0 → 6.0.0-beta3

package/src/shapes/Path.ts

@@ -0,0 +1,416 @@
+import { config } from '../config';
+import { SHARED_ATTRIBUTES } from '../parser/attributes';
+import { parseAttributes } from '../parser/parseAttributes';
+import { Point, XY } from '../Point';
+import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints';
+import { toFixed } from '../util/misc/toFixed';
+import {
+  getBoundsOfCurve,
+  joinPath,
+  makePathSimpler,
+  parsePath,
+} from '../util/path';
+import { classRegistry } from '../ClassRegistry';
+import { FabricObject, cacheProperties } from './Object/FabricObject';
+import { TPathSegmentInfo, TSimplePathData } from '../util/path/typedefs';
+import type {
+  FabricObjectProps,
+  SerializedObjectProps,
+  TProps,
+} from './Object/types';
+import type { ObjectEvents } from '../EventTypeDefs';
+import { TClassProperties, TSVGReviver } from '../typedefs';
+import { cloneDeep } from '../util/internals/cloneDeep';
+
+interface UniquePathProps {
+  sourcePath?: string;
+  path?: TSimplePathData;
+}
+
+export interface SerializedPathProps
+  extends SerializedObjectProps,
+    UniquePathProps {}
+
+export interface PathProps extends FabricObjectProps, UniquePathProps {}
+
+export class Path<
+  Props extends TProps<PathProps> = Partial<PathProps>,
+  SProps extends SerializedPathProps = SerializedPathProps,
+  EventSpec extends ObjectEvents = ObjectEvents
+> extends FabricObject<Props, SProps, EventSpec> {
+  /**
+   * Array of path points
+   * @type Array
+   * @default
+   */
+  declare path: TSimplePathData;
+
+  declare pathOffset: Point;
+
+  declare fromSVG?: boolean;
+
+  declare sourcePath?: string;
+
+  declare segmentsInfo?: TPathSegmentInfo[];
+
+  static cacheProperties = [...cacheProperties, 'path', 'fillRule'];
+
+  /**
+   * Constructor
+   * @param {TSimplePathData} path Path data (sequence of coordinates and corresponding "command" tokens)
+   * @param {Object} [options] Options object
+   * @return {Path} thisArg
+   */
+  constructor(
+    path: TSimplePathData | string,
+    { path: _, left, top, ...options }: Props = {} as Props
+  ) {
+    super(options as Props);
+    const pathTL = this._setPath(path || []);
+    const origin = this.translateToGivenOrigin(
+      new Point(left ?? pathTL.x, top ?? pathTL.y),
+      typeof left === 'number' ? this.originX : 'left',
+      typeof top === 'number' ? this.originY : 'top',
+      this.originX,
+      this.originY
+    );
+    this.setPositionByOrigin(origin, this.originX, this.originY);
+  }
+
+  /**
+   * @private
+   * @param {TSimplePathData | string} path Path data (sequence of coordinates and corresponding "command" tokens)
+   * @param {boolean} [adjustPosition] pass true to reposition the object according to the bounding box
+   * @returns {Point} top left position of the bounding box, useful for complementary positioning
+   */
+  _setPath(path: TSimplePathData | string, adjustPosition?: boolean) {
+    this.path = makePathSimpler(Array.isArray(path) ? path : parsePath(path));
+    return this.setDimensions();
+  }
+
+  /**
+   * @private
+   * @param {CanvasRenderingContext2D} ctx context to render path on
+   */
+  _renderPathCommands(ctx: CanvasRenderingContext2D) {
+    let current, // current instruction
+      subpathStartX = 0,
+      subpathStartY = 0,
+      x = 0, // current x
+      y = 0, // current y
+      controlX = 0, // current control point x
+      controlY = 0; // current control point y
+    const l = -this.pathOffset.x,
+      t = -this.pathOffset.y;
+
+    ctx.beginPath();
+
+    for (let i = 0, len = this.path.length; i < len; ++i) {
+      current = this.path[i];
+
+      switch (
+        current[0] // first letter
+      ) {
+        case 'L': // lineto, absolute
+          x = current[1];
+          y = current[2];
+          ctx.lineTo(x + l, y + t);
+          break;
+
+        case 'M': // moveTo, absolute
+          x = current[1];
+          y = current[2];
+          subpathStartX = x;
+          subpathStartY = y;
+          ctx.moveTo(x + l, y + t);
+          break;
+
+        case 'C': // bezierCurveTo, absolute
+          x = current[5];
+          y = current[6];
+          controlX = current[3];
+          controlY = current[4];
+          ctx.bezierCurveTo(
+            current[1] + l,
+            current[2] + t,
+            controlX + l,
+            controlY + t,
+            x + l,
+            y + t
+          );
+          break;
+
+        case 'Q': // quadraticCurveTo, absolute
+          ctx.quadraticCurveTo(
+            current[1] + l,
+            current[2] + t,
+            current[3] + l,
+            current[4] + t
+          );
+          x = current[3];
+          y = current[4];
+          controlX = current[1];
+          controlY = current[2];
+          break;
+
+        case 'Z':
+          x = subpathStartX;
+          y = subpathStartY;
+          ctx.closePath();
+          break;
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @param {CanvasRenderingContext2D} ctx context to render path on
+   */
+  _render(ctx: CanvasRenderingContext2D) {
+    this._renderPathCommands(ctx);
+    this._renderPaintInOrder(ctx);
+  }
+
+  /**
+   * Returns string representation of an instance
+   * @return {string} string representation of an instance
+   */
+  toString() {
+    return `#<Path (${this.complexity()}): { "top": ${this.top}, "left": ${
+      this.left
+    } }>`;
+  }
+
+  /**
+   * Returns object representation of an instance
+   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+   * @return {Object} object representation of an instance
+   */
+  toObject<
+    T extends Omit<Props & TClassProperties<this>, keyof SProps>,
+    K extends keyof T = never
+  >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {
+    return {
+      ...super.toObject(propertiesToInclude),
+      path: cloneDeep(this.path),
+    };
+  }
+
+  /**
+   * Returns dataless object representation of an instance
+   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+   * @return {Object} object representation of an instance
+   */
+  toDatalessObject<
+    T extends Omit<Props & TClassProperties<this>, keyof SProps>,
+    K extends keyof T = never
+  >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {
+    const o = this.toObject<T, K>(propertiesToInclude);
+    if (this.sourcePath) {
+      delete o.path;
+      o.sourcePath = this.sourcePath;
+    }
+    return o;
+  }
+
+  /**
+   * Returns svg representation of an instance
+   * @return {Array} an array of strings with the specific svg representation
+   * of the instance
+   */
+  _toSVG() {
+    const path = joinPath(this.path, config.NUM_FRACTION_DIGITS);
+    return [
+      '<path ',
+      'COMMON_PARTS',
+      `d="${path}" stroke-linecap="round" />\n`,
+    ];
+  }
+
+  _getOffsetTransform() {
+    const digits = config.NUM_FRACTION_DIGITS;
+    return ` translate(${toFixed(-this.pathOffset.x, digits)}, ${toFixed(
+      -this.pathOffset.y,
+      digits
+    )})`;
+  }
+
+  /**
+   * Returns svg clipPath representation of an instance
+   * @param {Function} [reviver] Method for further parsing of svg representation.
+   * @return {string} svg representation of an instance
+   */
+  toClipPathSVG(reviver: TSVGReviver) {
+    const additionalTransform = this._getOffsetTransform();
+    return (
+      '\t' +
+      this._createBaseClipPathSVGMarkup(this._toSVG(), {
+        reviver: reviver,
+        additionalTransform: additionalTransform,
+      })
+    );
+  }
+
+  /**
+   * Returns svg representation of an instance
+   * @param {Function} [reviver] Method for further parsing of svg representation.
+   * @return {string} svg representation of an instance
+   */
+  toSVG(reviver: TSVGReviver) {
+    const additionalTransform = this._getOffsetTransform();
+    return this._createBaseSVGMarkup(this._toSVG(), {
+      reviver: reviver,
+      additionalTransform: additionalTransform,
+    });
+  }
+
+  /**
+   * Returns number representation of an instance complexity
+   * @return {number} complexity of this instance
+   */
+  complexity() {
+    return this.path.length;
+  }
+
+  setDimensions() {
+    const { left, top, width, height, pathOffset } = this._calcDimensions();
+    this.set({ width, height, pathOffset });
+    return new Point(left, top);
+  }
+
+  /**
+   * @private
+   */
+  _calcDimensions() {
+    const bounds: XY[] = [];
+    let subpathStartX = 0,
+      subpathStartY = 0,
+      x = 0, // current x
+      y = 0; // current y
+
+    for (let i = 0; i < this.path.length; ++i) {
+      const current = this.path[i]; // current instruction
+      switch (
+        current[0] // first letter
+      ) {
+        case 'L': // lineto, absolute
+          x = current[1];
+          y = current[2];
+          bounds.push(new Point(subpathStartX, subpathStartY), new Point(x, y));
+          break;
+
+        case 'M': // moveTo, absolute
+          x = current[1];
+          y = current[2];
+          subpathStartX = x;
+          subpathStartY = y;
+          break;
+
+        case 'C': // bezierCurveTo, absolute
+          bounds.push(
+            ...getBoundsOfCurve(
+              x,
+              y,
+              current[1],
+              current[2],
+              current[3],
+              current[4],
+              current[5],
+              current[6]
+            )
+          );
+          x = current[5];
+          y = current[6];
+          break;
+
+        case 'Q': // quadraticCurveTo, absolute
+          bounds.push(
+            ...getBoundsOfCurve(
+              x,
+              y,
+              current[1],
+              current[2],
+              current[1],
+              current[2],
+              current[3],
+              current[4]
+            )
+          );
+          x = current[3];
+          y = current[4];
+          break;
+
+        case 'Z':
+          x = subpathStartX;
+          y = subpathStartY;
+          break;
+      }
+    }
+
+    const bbox = makeBoundingBoxFromPoints(bounds);
+    const strokeCorrection = this.fromSVG ? 0 : this.strokeWidth / 2;
+
+    return {
+      ...bbox,
+      left: bbox.left - strokeCorrection,
+      top: bbox.top - strokeCorrection,
+      pathOffset: new Point(
+        bbox.left + bbox.width / 2,
+        bbox.top + bbox.height / 2
+      ),
+    };
+  }
+
+  /**
+   * List of attribute names to account for when parsing SVG element (used by `Path.fromElement`)
+   * @static
+   * @memberOf Path
+   * @see http://www.w3.org/TR/SVG/paths.html#PathElement
+   */
+  static ATTRIBUTE_NAMES = [...SHARED_ATTRIBUTES, 'd'];
+
+  /**
+   * Creates an instance of Path from an object
+   * @static
+   * @memberOf Path
+   * @param {Object} object
+   * @returns {Promise<Path>}
+   */
+  static fromObject<T extends TProps<SerializedPathProps>>(object: T) {
+    return this._fromObject<Path>(object, {
+      extraParam: 'path',
+    });
+  }
+
+  /**
+   * Creates an instance of Path from an SVG <path> element
+   * @static
+   * @memberOf Path
+   * @param {SVGElement} element to parse
+   * @param {Function} callback Callback to invoke when an Path instance is created
+   * @param {Object} [options] Options object
+   * @param {Function} [callback] Options callback invoked after parsing is finished
+   */
+  static fromElement(
+    element: SVGElement,
+    callback: (path: Path) => void,
+    options: any
+  ) {
+    const parsedAttributes = parseAttributes(element, this.ATTRIBUTE_NAMES);
+    callback(
+      new this(parsedAttributes.d, {
+        ...parsedAttributes,
+        ...options,
+        // we pass undefined to instruct the constructor to position the object using the bbox
+        left: undefined,
+        top: undefined,
+        fromSVG: true,
+      })
+    );
+  }
+}
+
+classRegistry.setClass(Path);
+classRegistry.setSVGClass(Path);
+
+/* _FROM_SVG_START_ */

package/src/shapes/Polygon.ts

@@ -0,0 +1,20 @@
+import { classRegistry } from '../ClassRegistry';
+import { Polyline, polylineDefaultValues } from './Polyline';
+
+export class Polygon extends Polyline {
+  static ownDefaults: Record<string, any> = polylineDefaultValues;
+
+  static getDefaults() {
+    return {
+      ...super.getDefaults(),
+      ...Polyline.ownDefaults,
+    };
+  }
+
+  protected isOpen() {
+    return false;
+  }
+}
+
+classRegistry.setClass(Polygon);
+classRegistry.setSVGClass(Polygon);