fabric 5.3.0 → 6.0.0-beta3

package/src/util/path/regex.ts

@@ -0,0 +1,41 @@
+// absolute value number
+const absNumberRegExStr = String.raw`(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?`;
+export const numberRegExStr = `[-+]?${absNumberRegExStr}`;
+
+/**
+ * p for param
+ * using "bad naming" here because it makes the regex much easier to read
+ */
+const p = `(${numberRegExStr})`;
+
+const reMoveToCommand = `(M) (?:${p} ${p} ?)+`;
+
+const reLineCommand = `(L) (?:${p} ${p} ?)+`;
+
+const reHorizontalLineCommand = `(H) (?:${p} ?)+`;
+
+const reVerticalLineCommand = `(V) (?:${p} ?)+`;
+
+const reClosePathCommand = String.raw`(Z)\s*`;
+
+const reCubicCurveCommand = `(C) (?:${p} ${p} ${p} ${p} ${p} ${p} ?)+`;
+
+const reCubicCurveShortcutCommand = `(S) (?:${p} ${p} ${p} ${p} ?)+`;
+
+const reQuadraticCurveCommand = `(Q) (?:${p} ${p} ${p} ${p} ?)+`;
+
+const reQuadraticCurveShortcutCommand = `(T) (?:${p} ${p} ?)+`;
+
+const reArcCommand = `(A) (?:${p} ${p} ${p} ([01]) ?([01]) ${p} ${p} ?)+`;
+
+export const rePathCommand =
+  `(?:(?:${reMoveToCommand})` +
+  `|(?:${reLineCommand})` +
+  `|(?:${reHorizontalLineCommand})` +
+  `|(?:${reVerticalLineCommand})` +
+  `|(?:${reClosePathCommand})` +
+  `|(?:${reCubicCurveCommand})` +
+  `|(?:${reCubicCurveShortcutCommand})` +
+  `|(?:${reQuadraticCurveCommand})` +
+  `|(?:${reQuadraticCurveShortcutCommand})` +
+  `|(?:${reArcCommand}))`;

package/src/util/path/typechecks.ts

@@ -0,0 +1,145 @@
+import type {
+  TComplexParsedCommand,
+  TParsedAbsoluteArcCommand,
+  TParsedAbsoluteClosePathCommand,
+  TParsedAbsoluteCubicCurveCommand,
+  TParsedAbsoluteCubicCurveShortcutCommand,
+  TParsedAbsoluteHorizontalLineCommand,
+  TParsedAbsoluteLineCommand,
+  TParsedAbsoluteMoveToCommand,
+  TParsedAbsoluteQuadraticCurveCommand,
+  TParsedAbsoluteQuadraticCurveShortcutCommand,
+  TParsedAbsoluteVerticalLineCommand,
+  TParsedClosePathCommand,
+  TParsedLineCommand,
+  TParsedRelativeArcCommand,
+  TParsedRelativeClosePathCommand,
+  TParsedRelativeCubicCurveCommand,
+  TParsedRelativeCubicCurveShortcutCommand,
+  TParsedRelativeHorizontalLineCommand,
+  TParsedRelativeLineCommand,
+  TParsedRelativeMoveToCommand,
+  TParsedRelativeQuadraticCurveCommand,
+  TParsedRelativeQuadraticCurveShortcutCommand,
+  TParsedRelativeVerticalLineCommand,
+} from './typedefs';
+
+export function isAbsMoveToCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedAbsoluteMoveToCommand {
+  return cmd.length == 3 && cmd[0] == 'M';
+}
+export function isRelMoveToCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedRelativeMoveToCommand {
+  return cmd.length == 3 && cmd[0] == 'm';
+}
+
+export function isAbsLineCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedAbsoluteLineCommand {
+  return cmd.length == 3 && cmd[0] == 'L';
+}
+export function isRelLineCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedRelativeLineCommand {
+  return cmd.length == 3 && cmd[0] == 'l';
+}
+export function isLineCommand(
+  cmd: TComplexParsedCommand
+): cmd is TParsedLineCommand {
+  return isAbsLineCmd(cmd) || isRelLineCmd(cmd);
+}
+
+export function isAbsHorizontalLineCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedAbsoluteHorizontalLineCommand {
+  return cmd.length == 2 && cmd[0] == 'H';
+}
+export function isRelHorizontalLineCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedRelativeHorizontalLineCommand {
+  return cmd.length == 2 && cmd[0] == 'h';
+}
+
+export function isAbsVerticalLineCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedAbsoluteVerticalLineCommand {
+  return cmd.length == 2 && cmd[0] == 'V';
+}
+export function isRelVerticalLineCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedRelativeVerticalLineCommand {
+  return cmd.length == 2 && cmd[0] == 'v';
+}
+
+export function isAbsClosePathCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedAbsoluteClosePathCommand {
+  return cmd.length == 1 && cmd[0] == 'Z';
+}
+export function isRelClosePathCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedRelativeClosePathCommand {
+  return cmd.length == 1 && cmd[0] == 'z';
+}
+export function isClosePathCommand(
+  cmd: TComplexParsedCommand
+): cmd is TParsedClosePathCommand {
+  return cmd.length == 1 && (cmd[0] == 'z' || cmd[0] == 'Z');
+}
+
+export function isAbsCubicCurveCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedAbsoluteCubicCurveCommand {
+  return cmd.length == 7 && cmd[0] == 'C';
+}
+export function isRelCubicCurveCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedRelativeCubicCurveCommand {
+  return cmd.length == 7 && cmd[0] == 'c';
+}
+
+export function isAbsCubicCurveShortcutCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedAbsoluteCubicCurveShortcutCommand {
+  return cmd.length == 5 && cmd[0] == 'S';
+}
+export function isRelCubicCurveShortcutCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedRelativeCubicCurveShortcutCommand {
+  return cmd.length == 5 && cmd[0] == 's';
+}
+
+export function isAbsQuadraticCurveCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedAbsoluteQuadraticCurveCommand {
+  return cmd.length == 5 && cmd[0] == 'Q';
+}
+export function isRelQuadraticCurveCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedRelativeQuadraticCurveCommand {
+  return cmd.length == 5 && cmd[0] == 'q';
+}
+
+export function isAbsQuadraticCurveShortcutCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedAbsoluteQuadraticCurveShortcutCommand {
+  return cmd.length == 3 && cmd[0] == 'T';
+}
+export function isRelQuadraticCurveShortcutCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedRelativeQuadraticCurveShortcutCommand {
+  return cmd.length == 3 && cmd[0] == 't';
+}
+
+export function isAbsArcCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedAbsoluteArcCommand {
+  return cmd.length == 8 && cmd[0] == 'A';
+}
+export function isRelArcCmd(
+  cmd: TComplexParsedCommand
+): cmd is TParsedRelativeArcCommand {
+  return cmd.length == 8 && cmd[0] == 'a';
+}

package/src/util/path/typedefs.ts

@@ -0,0 +1,305 @@
+import type { TRadian } from '../../typedefs';
+import type { XY, Point } from '../../Point';
+
+export type TPathSegmentInfoCommon<C extends string> = {
+  x: number;
+  y: number;
+  command?: C;
+  length: number;
+};
+
+export type TCurveInfo<C extends string> = TPathSegmentInfoCommon<C> & {
+  /**
+   * Get the Point a certain percent distance along the curve
+   * @param pct
+   */
+  iterator: (pct: number) => Point;
+  /**
+   * Get the angle to a percent
+   * @param pct
+   */
+  angleFinder: (pct: number) => number;
+  /**
+   * Total length of the curve
+   */
+  length: number;
+};
+
+export type TEndPathInfo = TPathSegmentInfoCommon<'Z'> & {
+  destX: number;
+  destY: number;
+};
+
+/**
+ * Relevant info to calculate path length/points on path
+ * for each command type in a simplified parsed path
+ */
+export type TPathSegmentCommandInfo = {
+  M: TPathSegmentInfoCommon<'M'>;
+  L: TPathSegmentInfoCommon<'L'>;
+  C: TCurveInfo<'C'>;
+  Q: TCurveInfo<'Q'>;
+  Z: TEndPathInfo;
+};
+
+export type TPathSegmentInfo =
+  TPathSegmentCommandInfo[keyof TPathSegmentCommandInfo];
+
+/**
+ * A parsed command of any length (even impossible ones)
+ */
+export type TParsedCommand =
+  | [command: string]
+  | [command: string, arg1: number]
+  | [command: string, arg1: number, arg2: number]
+  | [command: string, arg1: number, arg2: number, arg3: number]
+  | [command: string, arg1: number, arg2: number, arg3: number, arg4: number]
+  | [
+      command: string,
+      arg1: number,
+      arg2: number,
+      arg3: number,
+      arg4: number,
+      arg5: number
+    ]
+  | [
+      command: string,
+      arg1: number,
+      arg2: number,
+      arg3: number,
+      arg4: number,
+      arg5: number,
+      arg6: number
+    ]
+  | [
+      command: string,
+      arg1: number,
+      arg2: number,
+      arg3: number,
+      arg4: number,
+      arg5: number,
+      arg6: number,
+      arg7: number
+    ];
+
+/**
+ * Command strings of any length
+ */
+type TCommand1<T extends TParsedCommand> = `${T[0]}`;
+type TCommand2<T extends TParsedCommand> = `${T[0]} ${T[1]}`;
+type TCommand3<T extends TParsedCommand> = `${T[0]} ${T[1]} ${T[2]}`;
+type TCommand4<T extends TParsedCommand> = `${T[0]} ${T[1]} ${T[2]} ${T[3]}`;
+type TCommand5<T extends TParsedCommand> =
+  `${T[0]} ${T[1]} ${T[2]} ${T[3]} ${T[4]}`;
+type TCommand6<T extends TParsedCommand> =
+  `${T[0]} ${T[1]} ${T[2]} ${T[3]} ${T[4]} ${T[5]}`;
+type TCommand7<T extends TParsedCommand> =
+  `${T[0]} ${T[1]} ${T[2]} ${T[3]} ${T[4]} ${T[5]} ${T[6]}`;
+type TCommand8<T extends TParsedCommand> =
+  `${T[0]} ${T[1]} ${T[2]} ${T[3]} ${T[4]} ${T[5]} ${T[6]} ${T[7]}`;
+
+/**
+ * Begin parsed SVG path commands
+ * Read about commands at {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths|MDN}
+ */
+export type TParsedAbsoluteMoveToCommand = [command: 'M', x: number, y: number];
+export type TParsedRelativeMoveToCommand = [
+  command: 'm',
+  dx: number,
+  dy: number
+];
+export type TParsedMoveToCommand =
+  | TParsedAbsoluteMoveToCommand
+  | TParsedRelativeMoveToCommand;
+
+export type TMoveToCommand = TCommand3<TParsedMoveToCommand>;
+
+export type TParsedAbsoluteLineCommand = [command: 'L', x: number, y: number];
+export type TParsedRelativeLineCommand = [command: 'l', dx: number, dy: number];
+export type TParsedLineCommand =
+  | TParsedAbsoluteLineCommand
+  | TParsedRelativeLineCommand;
+
+export type TLineCommand = TCommand3<TParsedLineCommand>;
+
+export type TParsedAbsoluteHorizontalLineCommand = [command: 'H', x: number];
+export type TParsedRelativeHorizontalLineCommand = [command: 'h', dx: number];
+export type TParsedHorizontalLineCommand =
+  | TParsedAbsoluteHorizontalLineCommand
+  | TParsedRelativeHorizontalLineCommand;
+
+export type THorizontalLineCommand = TCommand2<TParsedHorizontalLineCommand>;
+
+export type TParsedAbsoluteVerticalLineCommand = [command: 'V', y: number];
+export type TParsedRelativeVerticalLineCommand = [command: 'v', dy: number];
+export type TParsedVerticalLineCommand =
+  | TParsedAbsoluteVerticalLineCommand
+  | TParsedRelativeVerticalLineCommand;
+
+export type TVerticalLineCommand = TCommand2<TParsedVerticalLineCommand>;
+
+export type TParsedAbsoluteClosePathCommand = [command: 'Z'];
+export type TParsedRelativeClosePathCommand = [command: 'z'];
+export type TParsedClosePathCommand =
+  | TParsedAbsoluteClosePathCommand
+  | TParsedRelativeClosePathCommand;
+
+export type TClosePathCommand = TCommand1<TParsedClosePathCommand>;
+
+export type TParsedAbsoluteCubicCurveCommand = [
+  command: 'C',
+  controlPoint1X: number,
+  controlPoint1Y: number,
+  controlPoint2X: number,
+  controlPoint2Y: number,
+  endX: number,
+  endY: number
+];
+export type TParsedRelativeCubicCurveCommand = [
+  command: 'c',
+  controlPoint1DX: number,
+  controlPoint1DY: number,
+  controlPoint2DX: number,
+  controlPoint2DY: number,
+  endDX: number,
+  endDY: number
+];
+export type TParsedCubicCurveCommand =
+  | TParsedAbsoluteCubicCurveCommand
+  | TParsedRelativeCubicCurveCommand;
+
+export type TCubicCurveCommand = TCommand7<TParsedCubicCurveCommand>;
+
+export type TParsedAbsoluteCubicCurveShortcutCommand = [
+  command: 'S',
+  controlPoint2X: number,
+  controlPoint2Y: number,
+  endX: number,
+  endY: number
+];
+export type TParsedRelativeCubicCurveShortcutCommand = [
+  command: 's',
+  controlPoint2DX: number,
+  controlPoint2DY: number,
+  endDX: number,
+  endDY: number
+];
+export type TParsedCubicCurveShortcutCommand =
+  | TParsedAbsoluteCubicCurveShortcutCommand
+  | TParsedRelativeCubicCurveShortcutCommand;
+
+export type TCubicCurveShortcutCommand =
+  TCommand5<TParsedCubicCurveShortcutCommand>;
+
+export type TParsedAbsoluteQuadraticCurveCommand = [
+  command: 'Q',
+  controlPointX: number,
+  controlPointY: number,
+  endX: number,
+  endY: number
+];
+export type TParsedRelativeQuadraticCurveCommand = [
+  command: 'q',
+  controlPointDX: number,
+  controlPointDY: number,
+  endDX: number,
+  endDY: number
+];
+export type TParsedQuadraticCurveCommand =
+  | TParsedAbsoluteQuadraticCurveCommand
+  | TParsedRelativeQuadraticCurveCommand;
+
+export type TQuadraticCurveCommand = TCommand5<TParsedQuadraticCurveCommand>;
+
+export type TParsedAbsoluteQuadraticCurveShortcutCommand = [
+  command: 'T',
+  endX: number,
+  endY: number
+];
+export type TParsedRelativeQuadraticCurveShortcutCommand = [
+  command: 't',
+  endDX: number,
+  endDY: number
+];
+export type TParsedQuadraticCurveShortcutCommand =
+  | TParsedAbsoluteQuadraticCurveShortcutCommand
+  | TParsedRelativeQuadraticCurveShortcutCommand;
+
+export type TQuadraticCurveShortcutCommand =
+  TCommand3<TParsedQuadraticCurveShortcutCommand>;
+
+export type TParsedAbsoluteArcCommand = [
+  command: 'A',
+  radiusX: number,
+  radiusY: number,
+  rotation: TRadian,
+  largeArc: 0 | 1,
+  sweep: 0 | 1,
+  endX: number,
+  endY: number
+];
+export type TParsedRelativeArcCommand = [
+  command: 'a',
+  radiusX: number,
+  radiusY: number,
+  rotation: TRadian,
+  largeArc: 0 | 1,
+  sweep: 0 | 1,
+  endDX: number,
+  endDY: number
+];
+
+export type TParsedArcCommand =
+  | TParsedAbsoluteArcCommand
+  | TParsedRelativeArcCommand;
+
+export type TArcCommandSingleFlag<T extends TParsedArcCommand> =
+  `${T[0]} ${T[1]} ${T[2]} ${T[3]} ${T[4]}${T[5]} ${T[6]} ${T[7]}`;
+export type TArcCommand =
+  | TCommand8<TParsedArcCommand>
+  | TArcCommandSingleFlag<TParsedArcCommand>;
+
+/**
+ * End parsed path commands
+ */
+
+/**
+ * Any old valid SVG path command
+ */
+export type TComplexParsedCommand =
+  | TParsedMoveToCommand
+  | TParsedLineCommand
+  | TParsedHorizontalLineCommand
+  | TParsedVerticalLineCommand
+  | TParsedClosePathCommand
+  | TParsedCubicCurveCommand
+  | TParsedCubicCurveShortcutCommand
+  | TParsedQuadraticCurveCommand
+  | TParsedQuadraticCurveShortcutCommand
+  | TParsedArcCommand;
+
+/**
+ * A series of path commands
+ */
+export type TComplexPathData = TComplexParsedCommand[];
+
+/**
+ * Any SVG command that all Fabric functions can understand
+ *
+ */
+export type TSimpleParsedCommand =
+  | TParsedAbsoluteMoveToCommand
+  | TParsedAbsoluteLineCommand
+  | TParsedAbsoluteClosePathCommand
+  | TParsedAbsoluteCubicCurveCommand
+  | TParsedAbsoluteQuadraticCurveCommand;
+
+/**
+ * A series of simple paths
+ */
+export type TSimplePathData = TSimpleParsedCommand[];
+
+/**
+ * A point (vector) and angle between the vector and x-axis
+ */
+export type TPointAngle = XY & { angle: TRadian };

package/src/util/transform_matrix_removal.ts

@@ -0,0 +1,60 @@
+import { Image } from '../shapes/Image';
+import type { FabricObject } from '../shapes/Object/FabricObject';
+import { TMat2D } from '../typedefs';
+import { qrDecompose } from './misc/matrix';
+
+type FabricObjectWithTransformMatrix = FabricObject & {
+  transformMatrix?: TMat2D;
+};
+
+/**
+ * This function is an helper for svg import. it decompose the transformMatrix
+ * and assign properties to object.
+ * untransformed coordinates
+ * @private
+ */
+const _assignTransformMatrixProps = (
+  object: FabricObjectWithTransformMatrix
+) => {
+  if (object.transformMatrix) {
+    const { scaleX, scaleY, angle, skewX } = qrDecompose(
+      object.transformMatrix
+    );
+    object.flipX = false;
+    object.flipY = false;
+    object.set('scaleX', scaleX);
+    object.set('scaleY', scaleY);
+    object.angle = angle;
+    object.skewX = skewX;
+    object.skewY = 0;
+  }
+};
+
+/**
+ * This function is an helper for svg import. it removes the transform matrix
+ * and set to object properties that fabricjs can handle
+ * @private
+ * @param {Object} preserveAspectRatioOptions
+ */
+export const removeTransformMatrixForSvgParsing = (
+  object: FabricObjectWithTransformMatrix,
+  preserveAspectRatioOptions?: any
+) => {
+  let center = object._findCenterFromElement();
+  if (object.transformMatrix) {
+    _assignTransformMatrixProps(object);
+    center = center.transform(object.transformMatrix);
+  }
+  delete object.transformMatrix;
+  if (preserveAspectRatioOptions) {
+    object.scaleX *= preserveAspectRatioOptions.scaleX;
+    object.scaleY *= preserveAspectRatioOptions.scaleY;
+    (object as Image).cropX = preserveAspectRatioOptions.cropX;
+    (object as Image).cropY = preserveAspectRatioOptions.cropY;
+    center.x += preserveAspectRatioOptions.offsetLeft;
+    center.y += preserveAspectRatioOptions.offsetTop;
+    object.width = preserveAspectRatioOptions.width;
+    object.height = preserveAspectRatioOptions.height;
+  }
+  object.setPositionByOrigin(center, 'center', 'center');
+};

package/src/util/types.ts

@@ -0,0 +1,78 @@
+import type { ActiveSelection } from '../shapes/ActiveSelection';
+import type { Group } from '../shapes/Group';
+import type {
+  FabricObject,
+  TCachedFabricObject,
+} from '../shapes/Object/Object';
+import type { FabricObjectWithDragSupport } from '../shapes/Object/InteractiveObject';
+import type { TFiller } from '../typedefs';
+import type { Text } from '../shapes/Text/Text';
+import type { Pattern } from '../Pattern';
+import type { IText } from '../shapes/IText/IText';
+import type { Textbox } from '../shapes/Textbox';
+
+export const isFiller = (
+  filler: TFiller | string | null
+): filler is TFiller => {
+  return !!filler && (filler as TFiller).toLive !== undefined;
+};
+
+export const isSerializableFiller = (
+  filler: TFiller | string | null
+): filler is TFiller => {
+  return !!filler && typeof (filler as TFiller).toObject === 'function';
+};
+
+export const isPattern = (filler: TFiller): filler is Pattern => {
+  return (
+    !!filler &&
+    (filler as Pattern).offsetX !== undefined &&
+    (filler as Pattern).source !== undefined
+  );
+};
+
+export const isCollection = (
+  fabricObject?: FabricObject
+): fabricObject is Group | ActiveSelection => {
+  return !!fabricObject && Array.isArray((fabricObject as Group)._objects);
+};
+
+export const isActiveSelection = (
+  fabricObject?: FabricObject
+): fabricObject is ActiveSelection => {
+  return !!fabricObject && fabricObject.isType('ActiveSelection');
+};
+
+export const isTextObject = (
+  fabricObject?: FabricObject
+): fabricObject is Text => {
+  // we could use instanceof but that would mean pulling in Text code for a simple check
+  // @todo discuss what to do and how to do
+  return !!fabricObject && fabricObject.isType('Text', 'IText', 'Textbox');
+};
+
+export const isInteractiveTextObject = (
+  fabricObject?: FabricObject
+): fabricObject is IText | Textbox => {
+  // we could use instanceof but that would mean pulling in Text code for a simple check
+  // @todo discuss what to do and how to do
+  return !!fabricObject && fabricObject.isType('IText', 'Textbox');
+};
+
+export const isFabricObjectCached = (
+  fabricObject: FabricObject
+): fabricObject is TCachedFabricObject => {
+  return fabricObject.shouldCache() && !!fabricObject._cacheCanvas;
+};
+
+export const isFabricObjectWithDragSupport = (
+  fabricObject?: FabricObject
+): fabricObject is FabricObjectWithDragSupport => {
+  return (
+    !!fabricObject &&
+    typeof (fabricObject as FabricObjectWithDragSupport).onDragStart ===
+      'function' &&
+    typeof (fabricObject as FabricObjectWithDragSupport).shouldStartDragging ===
+      'function'
+  );
+};