fabric 5.3.0 → 6.0.0-beta3

package/src/shapes/Object/ObjectOrigin.ts

@@ -0,0 +1,276 @@
+import { Point } from '../../Point';
+import type { Group } from '../Group';
+import { TDegree, TOriginX, TOriginY } from '../../typedefs';
+import { transformPoint } from '../../util/misc/matrix';
+import { sizeAfterTransform } from '../../util/misc/objectTransforms';
+import { degreesToRadians } from '../../util/misc/radiansDegreesConversion';
+import { CommonMethods } from '../../CommonMethods';
+import { resolveOrigin } from '../../util/misc/resolveOrigin';
+import { BaseProps } from './types/BaseProps';
+import { FillStrokeProps } from './types/FillStrokeProps';
+
+export class ObjectOrigin<EventSpec>
+  extends CommonMethods<EventSpec>
+  implements BaseProps, Pick<FillStrokeProps, 'strokeWidth' | 'strokeUniform'>
+{
+  declare top: number;
+  declare left: number;
+  declare width: number;
+  declare height: number;
+  declare flipX: boolean;
+  declare flipY: boolean;
+  declare scaleX: number;
+  declare scaleY: number;
+  declare skewX: number;
+  declare skewY: number;
+  declare originX: TOriginX;
+  declare originY: TOriginY;
+  declare angle: TDegree;
+  declare strokeWidth: number;
+  declare strokeUniform: boolean;
+
+  /**
+   * Object containing this object.
+   * can influence its size and position
+   */
+  declare group?: Group;
+
+  declare _originalOriginX?: TOriginX;
+
+  declare _originalOriginY?: TOriginY;
+
+  /**
+   * Calculate object bounding box dimensions from its properties scale, skew.
+   * @param {Object} [options]
+   * @param {Number} [options.scaleX]
+   * @param {Number} [options.scaleY]
+   * @param {Number} [options.skewX]
+   * @param {Number} [options.skewY]
+   * @private
+   * @returns {Point} dimensions
+   */
+  _getTransformedDimensions(options: any = {}): Point {
+    const dimOptions = {
+      scaleX: this.scaleX,
+      scaleY: this.scaleY,
+      skewX: this.skewX,
+      skewY: this.skewY,
+      width: this.width,
+      height: this.height,
+      strokeWidth: this.strokeWidth,
+      ...options,
+    };
+    // stroke is applied before/after transformations are applied according to `strokeUniform`
+    const strokeWidth = dimOptions.strokeWidth;
+    let preScalingStrokeValue = strokeWidth,
+      postScalingStrokeValue = 0;
+
+    if (this.strokeUniform) {
+      preScalingStrokeValue = 0;
+      postScalingStrokeValue = strokeWidth;
+    }
+    const dimX = dimOptions.width + preScalingStrokeValue,
+      dimY = dimOptions.height + preScalingStrokeValue,
+      noSkew = dimOptions.skewX === 0 && dimOptions.skewY === 0;
+    let finalDimensions;
+    if (noSkew) {
+      finalDimensions = new Point(
+        dimX * dimOptions.scaleX,
+        dimY * dimOptions.scaleY
+      );
+    } else {
+      finalDimensions = sizeAfterTransform(dimX, dimY, dimOptions);
+    }
+
+    return finalDimensions.scalarAdd(postScalingStrokeValue);
+  }
+
+  /**
+   * Translates the coordinates from a set of origin to another (based on the object's dimensions)
+   * @param {Point} point The point which corresponds to the originX and originY params
+   * @param {TOriginX} fromOriginX Horizontal origin: 'left', 'center' or 'right'
+   * @param {TOriginY} fromOriginY Vertical origin: 'top', 'center' or 'bottom'
+   * @param {TOriginX} toOriginX Horizontal origin: 'left', 'center' or 'right'
+   * @param {TOriginY} toOriginY Vertical origin: 'top', 'center' or 'bottom'
+   * @return {Point}
+   */
+  translateToGivenOrigin(
+    point: Point,
+    fromOriginX: TOriginX,
+    fromOriginY: TOriginY,
+    toOriginX: TOriginX,
+    toOriginY: TOriginY
+  ): Point {
+    let x = point.x,
+      y = point.y;
+    const offsetX = resolveOrigin(toOriginX) - resolveOrigin(fromOriginX),
+      offsetY = resolveOrigin(toOriginY) - resolveOrigin(fromOriginY);
+
+    if (offsetX || offsetY) {
+      const dim = this._getTransformedDimensions();
+      x += offsetX * dim.x;
+      y += offsetY * dim.y;
+    }
+
+    return new Point(x, y);
+  }
+
+  /**
+   * Translates the coordinates from origin to center coordinates (based on the object's dimensions)
+   * @param {Point} point The point which corresponds to the originX and originY params
+   * @param {TOriginX} originX Horizontal origin: 'left', 'center' or 'right'
+   * @param {TOriginY} originY Vertical origin: 'top', 'center' or 'bottom'
+   * @return {Point}
+   */
+  translateToCenterPoint(
+    point: Point,
+    originX: TOriginX,
+    originY: TOriginY
+  ): Point {
+    const p = this.translateToGivenOrigin(
+      point,
+      originX,
+      originY,
+      'center',
+      'center'
+    );
+    if (this.angle) {
+      return p.rotate(degreesToRadians(this.angle), point);
+    }
+    return p;
+  }
+
+  /**
+   * Translates the coordinates from center to origin coordinates (based on the object's dimensions)
+   * @param {Point} center The point which corresponds to center of the object
+   * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right'
+   * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom'
+   * @return {Point}
+   */
+  translateToOriginPoint(
+    center: Point,
+    originX: TOriginX,
+    originY: TOriginY
+  ): Point {
+    const p = this.translateToGivenOrigin(
+      center,
+      'center',
+      'center',
+      originX,
+      originY
+    );
+    if (this.angle) {
+      return p.rotate(degreesToRadians(this.angle), center);
+    }
+    return p;
+  }
+
+  /**
+   * Returns the center coordinates of the object relative to canvas
+   * @return {Point}
+   */
+  getCenterPoint(): Point {
+    const relCenter = this.getRelativeCenterPoint();
+    return this.group
+      ? transformPoint(relCenter, this.group.calcTransformMatrix())
+      : relCenter;
+  }
+
+  /**
+   * Returns the center coordinates of the object relative to it's parent
+   * @return {Point}
+   */
+  getRelativeCenterPoint(): Point {
+    return this.translateToCenterPoint(
+      new Point(this.left, this.top),
+      this.originX,
+      this.originY
+    );
+  }
+
+  /**
+   * Returns the coordinates of the object as if it has a different origin
+   * @param {TOriginX} originX Horizontal origin: 'left', 'center' or 'right'
+   * @param {TOriginY} originY Vertical origin: 'top', 'center' or 'bottom'
+   * @return {Point}
+   */
+  getPointByOrigin(originX: TOriginX, originY: TOriginY): Point {
+    return this.translateToOriginPoint(
+      this.getRelativeCenterPoint(),
+      originX,
+      originY
+    );
+  }
+
+  /**
+   * Sets the position of the object taking into consideration the object's origin
+   * @param {Point} pos The new position of the object
+   * @param {TOriginX} originX Horizontal origin: 'left', 'center' or 'right'
+   * @param {TOriginY} originY Vertical origin: 'top', 'center' or 'bottom'
+   * @return {void}
+   */
+  setPositionByOrigin(pos: Point, originX: TOriginX, originY: TOriginY) {
+    const center = this.translateToCenterPoint(pos, originX, originY),
+      position = this.translateToOriginPoint(
+        center,
+        this.originX,
+        this.originY
+      );
+    this.set({ left: position.x, top: position.y });
+  }
+
+  /**
+   * Sets the origin/position of the object to it's center point
+   * @private
+   * @return {void}
+   */
+  _setOriginToCenter() {
+    this._originalOriginX = this.originX;
+    this._originalOriginY = this.originY;
+
+    const center = this.getRelativeCenterPoint();
+
+    this.originX = 'center';
+    this.originY = 'center';
+
+    this.left = center.x;
+    this.top = center.y;
+  }
+
+  /**
+   * Resets the origin/position of the object to it's original origin
+   * @private
+   * @return {void}
+   */
+  _resetOrigin() {
+    if (
+      this._originalOriginX !== undefined &&
+      this._originalOriginY !== undefined
+    ) {
+      const originPoint = this.translateToOriginPoint(
+        this.getRelativeCenterPoint(),
+        this._originalOriginX,
+        this._originalOriginY
+      );
+
+      this.left = originPoint.x;
+      this.top = originPoint.y;
+
+      this.originX = this._originalOriginX;
+      this.originY = this._originalOriginY;
+      this._originalOriginX = undefined;
+      this._originalOriginY = undefined;
+    }
+  }
+
+  /**
+   * @private
+   */
+  _getLeftTopCoords() {
+    return this.translateToOriginPoint(
+      this.getRelativeCenterPoint(),
+      'left',
+      'top'
+    );
+  }
+}

package/src/shapes/Object/StackedObject.ts

@@ -0,0 +1,206 @@
+import { ObjectEvents } from '../../EventTypeDefs';
+import type { Group } from '../Group';
+import type { Canvas } from '../../canvas/Canvas';
+import { StaticCanvas } from '../../canvas/StaticCanvas';
+import { ObjectGeometry } from './ObjectGeometry';
+import { isActiveSelection } from '../../util/types';
+
+type TAncestor = StackedObject | Canvas | StaticCanvas;
+type TCollection = Group | Canvas | StaticCanvas;
+
+/**
+ * Strict: only ancestors that are objects (without canvas)
+ */
+export type Ancestors<Strict> = Strict extends true
+  ? [StackedObject | Group] | [StackedObject | Group, ...Group[]] | Group[]
+  :
+      | [StackedObject | Group | Canvas | StaticCanvas]
+      | [StackedObject | Group, Canvas | StaticCanvas]
+      | [StackedObject, ...Group[]]
+      | Group[]
+      | [StackedObject | Group, ...Group[], Canvas | StaticCanvas];
+
+export type AncestryComparison<Strict> = {
+  /**
+   * common ancestors of `this` and`other`(may include`this` | `other`)
+   */
+  common: Ancestors<Strict>;
+  /**
+   * ancestors that are of `this` only
+   */
+  fork: Ancestors<Strict>;
+  /**
+   * ancestors that are of `other` only
+   */
+  otherFork: Ancestors<Strict>;
+};
+
+export class StackedObject<
+  EventSpec extends ObjectEvents = ObjectEvents
+> extends ObjectGeometry<EventSpec> {
+  /**
+   * A reference to the parent of the object
+   * Used to keep the original parent ref when the object has been added to an ActiveSelection, hence loosing the `group` ref
+   */
+  declare __owningGroup?: Group;
+
+  /**
+   * Returns instance's parent **EXCLUDING** `ActiveSelection`
+   * @param {boolean} [strict] exclude canvas as well
+   */
+  getParent<T extends boolean>(strict?: T): TAncestor | undefined {
+    return (
+      (isActiveSelection(this.group) ? this.__owningGroup : this.group) ||
+      (strict ? undefined : this.canvas)
+    );
+  }
+
+  /**
+   * Checks if object is descendant of target
+   * Should be used instead of {@link Group.contains} or {@link StaticCanvas.contains} for performance reasons
+   * @param {TAncestor} target
+   * @returns {boolean}
+   */
+  isDescendantOf(target: TAncestor): boolean {
+    return (
+      this.__owningGroup === target ||
+      this.group === target ||
+      this.canvas === target ||
+      // walk up
+      (!!this.__owningGroup && this.__owningGroup.isDescendantOf(target)) ||
+      (!!this.group && this.group.isDescendantOf(target))
+    );
+  }
+
+  /**
+   *
+   * @param {boolean} [strict] returns only ancestors that are objects (without canvas)
+   * @returns {Ancestors} ancestors (excluding `ActiveSelection`) from bottom to top
+   */
+  getAncestors<T extends boolean>(strict?: T): Ancestors<T> {
+    const ancestors: TAncestor[] = [];
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    let parent: TAncestor | undefined = this;
+    do {
+      parent =
+        parent instanceof StackedObject ? parent.getParent(strict) : undefined;
+      parent && ancestors.push(parent);
+    } while (parent);
+    return ancestors as Ancestors<T>;
+  }
+
+  /**
+   * Compare ancestors
+   *
+   * @param {StackedObject} other
+   * @param {boolean} [strict] finds only ancestors that are objects (without canvas)
+   * @returns {AncestryComparison} an object that represent the ancestry situation.
+   */
+  findCommonAncestors<T extends this, S extends boolean>(
+    other: T,
+    strict?: S
+  ): AncestryComparison<S> {
+    if (this === other) {
+      return {
+        fork: [],
+        otherFork: [],
+        common: [this, ...this.getAncestors(strict)],
+      } as AncestryComparison<S>;
+    }
+    const ancestors = this.getAncestors(strict);
+    const otherAncestors = other.getAncestors(strict);
+    //  if `this` has no ancestors and `this` is top ancestor of `other` we must handle the following case
+    if (
+      ancestors.length === 0 &&
+      otherAncestors.length > 0 &&
+      this === otherAncestors[otherAncestors.length - 1]
+    ) {
+      return {
+        fork: [],
+        otherFork: [
+          other,
+          ...otherAncestors.slice(0, otherAncestors.length - 1),
+        ],
+        common: [this],
+      } as AncestryComparison<S>;
+    }
+    //  compare ancestors
+    for (let i = 0, ancestor; i < ancestors.length; i++) {
+      ancestor = ancestors[i];
+      if (ancestor === other) {
+        return {
+          fork: [this, ...ancestors.slice(0, i)],
+          otherFork: [],
+          common: ancestors.slice(i),
+        } as AncestryComparison<S>;
+      }
+      for (let j = 0; j < otherAncestors.length; j++) {
+        if (this === otherAncestors[j]) {
+          return {
+            fork: [],
+            otherFork: [other, ...otherAncestors.slice(0, j)],
+            common: [this, ...ancestors],
+          } as AncestryComparison<S>;
+        }
+        if (ancestor === otherAncestors[j]) {
+          return {
+            fork: [this, ...ancestors.slice(0, i)],
+            otherFork: [other, ...otherAncestors.slice(0, j)],
+            common: ancestors.slice(i),
+          } as AncestryComparison<S>;
+        }
+      }
+    }
+    // nothing shared
+    return {
+      fork: [this, ...ancestors],
+      otherFork: [other, ...otherAncestors],
+      common: [],
+    } as AncestryComparison<S>;
+  }
+
+  /**
+   *
+   * @param {StackedObject} other
+   * @param {boolean} [strict] checks only ancestors that are objects (without canvas)
+   * @returns {boolean}
+   */
+  hasCommonAncestors<T extends this>(other: T, strict?: boolean): boolean {
+    const commonAncestors = this.findCommonAncestors(other, strict);
+    return commonAncestors && !!commonAncestors.common.length;
+  }
+
+  /**
+   *
+   * @param {FabricObject} other object to compare against
+   * @returns {boolean | undefined} if objects do not share a common ancestor or they are strictly equal it is impossible to determine which is in front of the other; in such cases the function returns `undefined`
+   */
+  isInFrontOf<T extends this>(other: T): boolean | undefined {
+    if (this === other) {
+      return undefined;
+    }
+    const ancestorData = this.findCommonAncestors(other);
+    if (!ancestorData) {
+      return undefined;
+    }
+    if (ancestorData.fork.includes(other as any)) {
+      return true;
+    }
+    if (ancestorData.otherFork.includes(this as any)) {
+      return false;
+    }
+    const firstCommonAncestor = ancestorData.common[0];
+    if (!firstCommonAncestor) {
+      return undefined;
+    }
+    const headOfFork = ancestorData.fork.pop(),
+      headOfOtherFork = ancestorData.otherFork.pop(),
+      thisIndex = (firstCommonAncestor as TCollection)._objects.indexOf(
+        headOfFork as any
+      ),
+      otherIndex = (firstCommonAncestor as TCollection)._objects.indexOf(
+        headOfOtherFork as any
+      );
+    return thisIndex > -1 && thisIndex > otherIndex;
+  }
+}

package/src/shapes/Object/defaultValues.ts

@@ -0,0 +1,108 @@
+export const stateProperties = [
+  'top',
+  'left',
+  'scaleX',
+  'scaleY',
+  'flipX',
+  'flipY',
+  'originX',
+  'originY',
+  'angle',
+  'opacity',
+  'globalCompositeOperation',
+  'shadow',
+  'visible',
+  'skewX',
+  'skewY',
+];
+
+export const cacheProperties = [
+  'fill',
+  'stroke',
+  'strokeWidth',
+  'strokeDashArray',
+  'width',
+  'height',
+  'paintFirst',
+  'strokeUniform',
+  'strokeLineCap',
+  'strokeDashOffset',
+  'strokeLineJoin',
+  'strokeMiterLimit',
+  'backgroundColor',
+  'clipPath',
+];
+
+export const fabricObjectDefaultValues = {
+  originX: 'left',
+  originY: 'top',
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+  scaleX: 1,
+  scaleY: 1,
+  flipX: false,
+  flipY: false,
+  opacity: 1,
+  angle: 0,
+  skewX: 0,
+  skewY: 0,
+  cornerSize: 13,
+  touchCornerSize: 24,
+  transparentCorners: true,
+  hoverCursor: null,
+  moveCursor: null,
+  padding: 0,
+  borderColor: 'rgb(178,204,255)',
+  borderDashArray: null,
+  cornerColor: 'rgb(178,204,255)',
+  cornerStrokeColor: '',
+  cornerStyle: 'rect',
+  cornerDashArray: null,
+  centeredScaling: false,
+  centeredRotation: true,
+  fill: 'rgb(0,0,0)',
+  fillRule: 'nonzero',
+  globalCompositeOperation: 'source-over',
+  backgroundColor: '',
+  selectionBackgroundColor: '',
+  stroke: null,
+  strokeWidth: 1,
+  strokeDashArray: null,
+  strokeDashOffset: 0,
+  strokeLineCap: 'butt',
+  strokeLineJoin: 'miter',
+  strokeMiterLimit: 4,
+  shadow: null,
+  borderOpacityWhenMoving: 0.4,
+  borderScaleFactor: 1,
+  minScaleLimit: 0,
+  selectable: true,
+  evented: true,
+  visible: true,
+  hasControls: true,
+  hasBorders: true,
+  perPixelTargetFind: false,
+  includeDefaultValues: true,
+  lockMovementX: false,
+  lockMovementY: false,
+  lockRotation: false,
+  lockScalingX: false,
+  lockScalingY: false,
+  lockSkewingX: false,
+  lockSkewingY: false,
+  lockScalingFlip: false,
+  excludeFromExport: false,
+  objectCaching: true,
+  noScaleCache: true,
+  strokeUniform: false,
+  dirty: true,
+  paintFirst: 'fill',
+  activeOn: 'down',
+  colorProperties: ['fill', 'stroke', 'backgroundColor'],
+  clipPath: undefined,
+  inverted: false,
+  absolutePositioned: false,
+  FX_DURATION: 500,
+} as const;

package/src/shapes/Object/types/BaseProps.ts

@@ -0,0 +1,96 @@
+import { TDegree, TOriginX, TOriginY } from '../../../typedefs';
+
+export interface BaseProps {
+  /**
+   * Top position of an object. Note that by default it's relative to object top. You can change this by setting originY={top/center/bottom}
+   * @type Number
+   * @default 0
+   */
+  top: number;
+
+  /**
+   * Left position of an object. Note that by default it's relative to object left. You can change this by setting originX={left/center/right}
+   * @type Number
+   * @default 0
+   */
+  left: number;
+
+  /**
+   * Object width
+   * @type Number
+   * @default
+   */
+  width: number;
+
+  /**
+   * Object height
+   * @type Number
+   * @default
+   */
+  height: number;
+
+  /**
+   * When true, an object is rendered as flipped horizontally
+   * @type Boolean
+   * @default false
+   */
+  flipX: boolean;
+
+  /**
+   * When true, an object is rendered as flipped vertically
+   * @type Boolean
+   * @default false
+   */
+  flipY: boolean;
+
+  /**
+   * Object scale factor (horizontal)
+   * @type Number
+   * @default 1
+   */
+  scaleX: number;
+
+  /**
+   * Object scale factor (vertical)
+   * @type Number
+   * @default 1
+   */
+  scaleY: number;
+
+  /**
+   * Angle of skew on x axes of an object (in degrees)
+   * @type Number
+   * @default 0
+   */
+  skewX: number;
+
+  /**
+   * Angle of skew on y axes of an object (in degrees)
+   * @type Number
+   * @default 0
+   */
+  skewY: number;
+
+  /**
+   * Horizontal origin of transformation of an object (one of "left", "right", "center")
+   * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups
+   * @type String
+   * @default 'left'
+   */
+  originX: TOriginX;
+
+  /**
+   * Vertical origin of transformation of an object (one of "top", "bottom", "center")
+   * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups
+   * @type String
+   * @default 'top'
+   */
+  originY: TOriginY;
+
+  /**
+   * Angle of rotation of an object (in degrees)
+   * @type Number
+   * @default 0
+   */
+  angle: TDegree;
+}