fabric 5.3.0 → 6.0.0-beta10

package/src/shapes/Line.ts

@@ -0,0 +1,285 @@
+import { SHARED_ATTRIBUTES } from '../parser/attributes';
+import { parseAttributes } from '../parser/parseAttributes';
+import type { TClassProperties } from '../typedefs';
+import { classRegistry } from '../ClassRegistry';
+import { FabricObject, cacheProperties } from './Object/FabricObject';
+import { Point } from '../Point';
+import { isFiller } from '../util/typeAssertions';
+import type {
+  FabricObjectProps,
+  SerializedObjectProps,
+  TProps,
+} from './Object/types';
+import type { ObjectEvents } from '../EventTypeDefs';
+import { makeBoundingBoxFromPoints } from '../util';
+import { CENTER, LEFT, TOP } from '../constants';
+
+// @TODO this code is terrible and Line should be a special case of polyline.
+
+const coordProps = ['x1', 'x2', 'y1', 'y2'] as const;
+
+interface UniqueLineProps {
+  x1: number;
+  x2: number;
+  y1: number;
+  y2: number;
+}
+
+export interface SerializedLineProps
+  extends SerializedObjectProps,
+    UniqueLineProps {}
+
+export class Line<
+    Props extends TProps<FabricObjectProps> = Partial<FabricObjectProps>,
+    SProps extends SerializedLineProps = SerializedLineProps,
+    EventSpec extends ObjectEvents = ObjectEvents
+  >
+  extends FabricObject<Props, SProps, EventSpec>
+  implements UniqueLineProps
+{
+  /**
+   * x value or first line edge
+   * @type number
+   * @default
+   */
+  declare x1: number;
+
+  /**
+   * y value or first line edge
+   * @type number
+   * @default
+   */
+  declare y1: number;
+
+  /**
+   * x value or second line edge
+   * @type number
+   * @default
+   */
+  declare x2: number;
+
+  /**
+   * y value or second line edge
+   * @type number
+   * @default
+   */
+  declare y2: number;
+
+  static type = 'Line';
+
+  static cacheProperties = [...cacheProperties, ...coordProps];
+  /**
+   * Constructor
+   * @param {Array} [points] Array of points
+   * @param {Object} [options] Options object
+   * @return {Line} thisArg
+   */
+  constructor([x1, y1, x2, y2] = [0, 0, 0, 0], options: Props = {} as Props) {
+    super({ ...options, x1, y1, x2, y2 });
+    this._setWidthHeight();
+    const { left, top } = options;
+    typeof left === 'number' && this.set(LEFT, left);
+    typeof top === 'number' && this.set(TOP, top);
+  }
+
+  /**
+   * @private
+   * @param {Object} [options] Options
+   */
+  _setWidthHeight() {
+    const { x1, y1, x2, y2 } = this;
+    this.width = Math.abs(x2 - x1);
+    this.height = Math.abs(y2 - y1);
+    const { left, top, width, height } = makeBoundingBoxFromPoints([
+      { x: x1, y: y1 },
+      { x: x2, y: y2 },
+    ]);
+    const position = new Point(left + width / 2, top + height / 2);
+    this.setPositionByOrigin(position, CENTER, CENTER);
+  }
+
+  /**
+   * @private
+   * @param {String} key
+   * @param {*} value
+   */
+  _set(key: string, value: any) {
+    super._set(key, value);
+    if (coordProps.includes(key as keyof UniqueLineProps)) {
+      // this doesn't make sense very much, since setting x1 when top or left
+      // are already set, is just going to show a strange result since the
+      // line will move way more than the developer expect.
+      // in fabric5 it worked only when the line didn't have extra transformations,
+      // in fabric6 too. With extra transform they behave bad in different ways.
+      // This needs probably a good rework or a tutorial if you have to create a dynamic line
+      this._setWidthHeight();
+    }
+    return this;
+  }
+
+  /**
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
+   */
+  _render(ctx: CanvasRenderingContext2D) {
+    ctx.beginPath();
+
+    const p = this.calcLinePoints();
+    ctx.moveTo(p.x1, p.y1);
+    ctx.lineTo(p.x2, p.y2);
+
+    ctx.lineWidth = this.strokeWidth;
+
+    // TODO: test this
+    // make sure setting "fill" changes color of a line
+    // (by copying fillStyle to strokeStyle, since line is stroked, not filled)
+    const origStrokeStyle = ctx.strokeStyle;
+    if (isFiller(this.stroke)) {
+      ctx.strokeStyle = this.stroke.toLive(ctx)!;
+    } else {
+      ctx.strokeStyle = this.stroke ?? ctx.fillStyle;
+    }
+    this.stroke && this._renderStroke(ctx);
+    ctx.strokeStyle = origStrokeStyle;
+  }
+
+  /**
+   * This function is an helper for svg import. it returns the center of the object in the svg
+   * untransformed coordinates
+   * @private
+   * @return {Point} center point from element coordinates
+   */
+  _findCenterFromElement(): Point {
+    return new Point((this.x1 + this.x2) / 2, (this.y1 + this.y2) / 2);
+  }
+
+  /**
+   * Returns object representation of an instance
+   * @method toObject
+   * @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),
+      ...this.calcLinePoints(),
+    };
+  }
+
+  /*
+   * Calculate object dimensions from its properties
+   * @private
+   */
+  _getNonTransformedDimensions(): Point {
+    const dim = super._getNonTransformedDimensions();
+    if (this.strokeLineCap === 'butt') {
+      if (this.width === 0) {
+        dim.y -= this.strokeWidth;
+      }
+      if (this.height === 0) {
+        dim.x -= this.strokeWidth;
+      }
+    }
+    return dim;
+  }
+
+  /**
+   * Recalculates line points given width and height
+   * Those points are simply placed around the center,
+   * This is not useful outside internal render functions and svg output
+   * Is not meant to be for the developer.
+   * @private
+   */
+  calcLinePoints(): UniqueLineProps {
+    const { x1: _x1, x2: _x2, y1: _y1, y2: _y2, width, height } = this;
+    const xMult = _x1 <= _x2 ? -1 : 1,
+      yMult = _y1 <= _y2 ? -1 : 1,
+      x1 = (xMult * width) / 2,
+      y1 = (yMult * height) / 2,
+      x2 = (xMult * -width) / 2,
+      y2 = (yMult * -height) / 2;
+
+    return {
+      x1,
+      x2,
+      y1,
+      y2,
+    };
+  }
+
+  /* _FROM_SVG_START_ */
+
+  /**
+   * Returns svg representation of an instance
+   * @return {Array} an array of strings with the specific svg representation
+   * of the instance
+   */
+  _toSVG() {
+    const { x1, x2, y1, y2 } = this.calcLinePoints();
+    return [
+      '<line ',
+      'COMMON_PARTS',
+      `x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" />\n`,
+    ];
+  }
+
+  /**
+   * List of attribute names to account for when parsing SVG element (used by {@link Line.fromElement})
+   * @static
+   * @memberOf Line
+   * @see http://www.w3.org/TR/SVG/shapes.html#LineElement
+   */
+  static ATTRIBUTE_NAMES = SHARED_ATTRIBUTES.concat(coordProps);
+
+  /**
+   * Returns Line instance from an SVG element
+   * @static
+   * @memberOf Line
+   * @param {SVGElement} element Element to parse
+   * @param {Object} [options] Options object
+   * @param {Function} [callback] callback function invoked after parsing
+   */
+  static async fromElement(element: SVGElement) {
+    const {
+      x1 = 0,
+      y1 = 0,
+      x2 = 0,
+      y2 = 0,
+      ...parsedAttributes
+    } = parseAttributes(element, this.ATTRIBUTE_NAMES);
+    return new this([x1, y1, x2, y2], parsedAttributes);
+  }
+
+  /* _FROM_SVG_END_ */
+
+  /**
+   * Returns Line instance from an object representation
+   * @static
+   * @memberOf Line
+   * @param {Object} object Object to create an instance from
+   * @returns {Promise<Line>}
+   */
+  static fromObject<T extends TProps<SerializedLineProps>>({
+    x1,
+    y1,
+    x2,
+    y2,
+    ...object
+  }: T) {
+    return this._fromObject<Line>(
+      {
+        ...object,
+        points: [x1, y1, x2, y2],
+      },
+      {
+        extraParam: 'points',
+      }
+    );
+  }
+}
+
+classRegistry.setClass(Line);
+classRegistry.setSVGClass(Line);

package/src/shapes/Object/AnimatableObject.ts

@@ -0,0 +1,103 @@
+import type { TColorArg } from '../../color/typedefs';
+import type { ObjectEvents } from '../../EventTypeDefs';
+import type { TAnimation } from '../../util/animation/animate';
+import { animate, animateColor } from '../../util/animation/animate';
+import type {
+  AnimationOptions,
+  ArrayAnimationOptions,
+  ColorAnimationOptions,
+  ValueAnimationOptions,
+} from '../../util/animation/types';
+import { StackedObject } from './StackedObject';
+
+export abstract class AnimatableObject<
+  EventSpec extends ObjectEvents = ObjectEvents
+> extends StackedObject<EventSpec> {
+  /**
+   * List of properties to consider for animating colors.
+   * @type String[]
+   */
+  declare colorProperties: string[];
+
+  /**
+   * Animates object's properties
+   * @param {Record<string, number | number[] | TColorArg>} animatable map of keys and end values
+   * @param {Partial<AnimationOptions<T>>} options
+   * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation}
+   * @return {Record<string, TAnimation<T>>} map of animation contexts
+   *
+   * As object — multiple properties
+   *
+   * object.animate({ left: ..., top: ... });
+   * object.animate({ left: ..., top: ... }, { duration: ... });
+   */
+  animate<T extends number | number[] | TColorArg>(
+    animatable: Record<string, T>,
+    options?: Partial<AnimationOptions<T>>
+  ): Record<string, TAnimation<T>> {
+    return Object.entries(animatable).reduce((acc, [key, endValue]) => {
+      acc[key] = this._animate(key, endValue, options);
+      return acc;
+    }, {} as Record<string, TAnimation<T>>);
+  }
+
+  /**
+   * @private
+   * @param {String} key Property to animate
+   * @param {String} to Value to animate to
+   * @param {Object} [options] Options object
+   */
+  _animate<T extends number | number[] | TColorArg>(
+    key: string,
+    endValue: T,
+    options: Partial<AnimationOptions<T>> = {}
+  ): TAnimation<T> {
+    const path = key.split('.');
+    const propIsColor = this.colorProperties.includes(path[path.length - 1]);
+    const { easing, duration, abort, startValue, onChange, onComplete } =
+      options;
+    const animationOptions = {
+      target: this,
+      // path.reduce... is the current value in case start value isn't provided
+      startValue:
+        startValue ?? path.reduce((deep: any, key) => deep[key], this),
+      endValue,
+      easing,
+      duration,
+      abort: abort?.bind(this),
+      onChange: (
+        value: number | number[] | string,
+        valueProgress: number,
+        durationProgress: number
+      ) => {
+        path.reduce((deep: Record<string, any>, key, index) => {
+          if (index === path.length - 1) {
+            deep[key] = value;
+          }
+          return deep[key];
+        }, this);
+        onChange &&
+          // @ts-expect-error generic callback arg0 is wrong
+          onChange(value, valueProgress, durationProgress);
+      },
+      onComplete: (
+        value: number | number[] | string,
+        valueProgress: number,
+        durationProgress: number
+      ) => {
+        this.setCoords();
+        onComplete &&
+          // @ts-expect-error generic callback arg0 is wrong
+          onComplete(value, valueProgress, durationProgress);
+      },
+    } as AnimationOptions<T>;
+
+    return (
+      propIsColor
+        ? animateColor(animationOptions as ColorAnimationOptions)
+        : animate(
+            animationOptions as ValueAnimationOptions | ArrayAnimationOptions
+          )
+    ) as TAnimation<T>;
+  }
+}

package/src/shapes/Object/FabricObject.ts

@@ -0,0 +1,29 @@
+import type { ObjectEvents } from '../../EventTypeDefs';
+import { FabricObjectSVGExportMixin } from './FabricObjectSVGExportMixin';
+import { InteractiveFabricObject } from './InteractiveObject';
+import { applyMixins } from '../../util/applyMixins';
+import type { FabricObjectProps } from './types/FabricObjectProps';
+import type { TFabricObjectProps, SerializedObjectProps } from './types';
+import { classRegistry } from '../../ClassRegistry';
+
+// TODO somehow we have to make a tree-shakeable import
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars
+export interface FabricObject<
+  Props extends TFabricObjectProps = Partial<FabricObjectProps>,
+  SProps extends SerializedObjectProps = SerializedObjectProps,
+  EventSpec extends ObjectEvents = ObjectEvents
+> extends FabricObjectSVGExportMixin {}
+
+export class FabricObject<
+  Props extends TFabricObjectProps = Partial<FabricObjectProps>,
+  SProps extends SerializedObjectProps = SerializedObjectProps,
+  EventSpec extends ObjectEvents = ObjectEvents
+> extends InteractiveFabricObject<Props, SProps, EventSpec> {}
+
+applyMixins(FabricObject, [FabricObjectSVGExportMixin]);
+
+classRegistry.setClass(FabricObject);
+classRegistry.setClass(FabricObject, 'object');
+
+export { cacheProperties } from './defaultValues';

package/src/shapes/Object/FabricObjectSVGExportMixin.ts

@@ -0,0 +1,278 @@
+// @ts-nocheck
+import type { TSVGReviver } from '../../typedefs';
+import { uid } from '../../util/internals/uid';
+import { colorPropToSVG, matrixToSVG } from '../../util/misc/svgParsing';
+import { NONE } from '../../constants';
+
+export class FabricObjectSVGExportMixin {
+  /**
+   * When an object is being exported as SVG as a clippath, a reference inside the SVG is needed.
+   * This reference is a UID in the fabric namespace and is temporary stored here.
+   * @type {String}
+   */
+  declare clipPathId?: string;
+
+  /**
+   * Returns styles-string for svg-export
+   * @param {Boolean} skipShadow a boolean to skip shadow filter output
+   * @return {String}
+   */
+  getSvgStyles(skipShadow?: boolean) {
+    const fillRule = this.fillRule ? this.fillRule : 'nonzero',
+      strokeWidth = this.strokeWidth ? this.strokeWidth : '0',
+      strokeDashArray = this.strokeDashArray
+        ? this.strokeDashArray.join(' ')
+        : NONE,
+      strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0',
+      strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt',
+      strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter',
+      strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4',
+      opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1',
+      visibility = this.visible ? '' : ' visibility: hidden;',
+      filter = skipShadow ? '' : this.getSvgFilter(),
+      fill = colorPropToSVG('fill', this.fill),
+      stroke = colorPropToSVG('stroke', this.stroke);
+
+    return [
+      stroke,
+      'stroke-width: ',
+      strokeWidth,
+      '; ',
+      'stroke-dasharray: ',
+      strokeDashArray,
+      '; ',
+      'stroke-linecap: ',
+      strokeLineCap,
+      '; ',
+      'stroke-dashoffset: ',
+      strokeDashOffset,
+      '; ',
+      'stroke-linejoin: ',
+      strokeLineJoin,
+      '; ',
+      'stroke-miterlimit: ',
+      strokeMiterLimit,
+      '; ',
+      fill,
+      'fill-rule: ',
+      fillRule,
+      '; ',
+      'opacity: ',
+      opacity,
+      ';',
+      filter,
+      visibility,
+    ].join('');
+  }
+
+  /**
+   * Returns styles-string for svg-export
+   * @param {Object} style the object from which to retrieve style properties
+   * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style.
+   * @return {String}
+   */
+  getSvgSpanStyles(style, useWhiteSpace?: boolean) {
+    const term = '; ',
+      fontFamily = style.fontFamily
+        ? `font-family: ${
+            style.fontFamily.indexOf("'") === -1 &&
+            style.fontFamily.indexOf('"') === -1
+              ? `'${style.fontFamily}'`
+              : style.fontFamily
+          }${term}`
+        : '',
+      strokeWidth = style.strokeWidth
+        ? `stroke-width: ${style.strokeWidth}${term}`
+        : '',
+      fontSize = style.fontSize ? `font-size: ${style.fontSize}px${term}` : '',
+      fontStyle = style.fontStyle
+        ? `font-style: ${style.fontStyle}${term}`
+        : '',
+      fontWeight = style.fontWeight
+        ? `font-weight: ${style.fontWeight}${term}`
+        : '',
+      fill = style.fill ? colorPropToSVG('fill', style.fill) : '',
+      stroke = style.stroke ? colorPropToSVG('stroke', style.stroke) : '',
+      textDecoration = this.getSvgTextDecoration(style),
+      deltaY = style.deltaY ? `baseline-shift: ${-style.deltaY}; ` : '';
+
+    return [
+      stroke,
+      strokeWidth,
+      fontFamily,
+      fontSize,
+      fontStyle,
+      fontWeight,
+      textDecoration
+        ? `text-decoration: ${textDecoration}${term}`
+        : textDecoration,
+      fill,
+      deltaY,
+      useWhiteSpace ? 'white-space: pre; ' : '',
+    ].join('');
+  }
+
+  /**
+   * Returns text-decoration property for svg-export
+   * @param {Object} style the object from which to retrieve style properties
+   * @return {String}
+   */
+  getSvgTextDecoration(style) {
+    return ['overline', 'underline', 'line-through']
+      .filter((decoration) => style[decoration.replace('-', '')])
+      .join(' ');
+  }
+
+  /**
+   * Returns filter for svg shadow
+   * @return {String}
+   */
+  getSvgFilter() {
+    return this.shadow ? `filter: url(#SVGID_${this.shadow.id});` : '';
+  }
+
+  /**
+   * Returns id attribute for svg output
+   * @return {String}
+   */
+  getSvgCommons() {
+    return [
+      this.id ? `id="${this.id}" ` : '',
+      this.clipPath ? `clip-path="url(#${this.clipPath.clipPathId})" ` : '',
+    ].join('');
+  }
+
+  /**
+   * Returns transform-string for svg-export
+   * @param {Boolean} use the full transform or the single object one.
+   * @return {String}
+   */
+  getSvgTransform(full?: boolean, additionalTransform = '') {
+    const transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(),
+      svgTransform = `transform="${matrixToSVG(transform)}`;
+    return `${svgTransform}${additionalTransform}" `;
+  }
+
+  /**
+   * Returns svg representation of an instance
+   * @param {TSVGReviver} [reviver] Method for further parsing of svg representation.
+   * @return {String} svg representation of an instance
+   */
+  toSVG(reviver?: TSVGReviver) {
+    return this._createBaseSVGMarkup(this._toSVG(reviver), {
+      reviver,
+    });
+  }
+
+  /**
+   * Returns svg clipPath representation of an instance
+   * @param {TSVGReviver} [reviver] Method for further parsing of svg representation.
+   * @return {String} svg representation of an instance
+   */
+  toClipPathSVG(reviver?: TSVGReviver) {
+    return (
+      '\t' +
+      this._createBaseClipPathSVGMarkup(this._toSVG(reviver), {
+        reviver,
+      })
+    );
+  }
+
+  /**
+   * @private
+   */
+  _createBaseClipPathSVGMarkup(
+    objectMarkup: string[],
+    {
+      reviver,
+      additionalTransform = '',
+    }: { reviver?: TSVGReviver; additionalTransform?: string } = {}
+  ) {
+    const commonPieces = [
+        this.getSvgTransform(true, additionalTransform),
+        this.getSvgCommons(),
+      ].join(''),
+      // insert commons in the markup, style and svgCommons
+      index = objectMarkup.indexOf('COMMON_PARTS');
+    objectMarkup[index] = commonPieces;
+    return reviver ? reviver(objectMarkup.join('')) : objectMarkup.join('');
+  }
+
+  /**
+   * @private
+   */
+  _createBaseSVGMarkup(
+    objectMarkup: string[],
+    {
+      noStyle,
+      reviver,
+      withShadow,
+      additionalTransform,
+    }: {
+      noStyle?: boolean;
+      reviver?: TSVGReviver;
+      withShadow?: boolean;
+      additionalTransform?: string;
+    } = {}
+  ) {
+    const styleInfo = noStyle ? '' : `style="${this.getSvgStyles()}" `,
+      shadowInfo = withShadow ? `style="${this.getSvgFilter()}" ` : '',
+      clipPath = this.clipPath,
+      vectorEffect = this.strokeUniform
+        ? 'vector-effect="non-scaling-stroke" '
+        : '',
+      absoluteClipPath = clipPath && clipPath.absolutePositioned,
+      stroke = this.stroke,
+      fill = this.fill,
+      shadow = this.shadow,
+      markup = [],
+      // insert commons in the markup, style and svgCommons
+      index = objectMarkup.indexOf('COMMON_PARTS');
+    let clipPathMarkup;
+    if (clipPath) {
+      clipPath.clipPathId = `CLIPPATH_${uid()}`;
+      clipPathMarkup = `<clipPath id="${
+        clipPath.clipPathId
+      }" >\n${clipPath.toClipPathSVG(reviver)}</clipPath>\n`;
+    }
+    if (absoluteClipPath) {
+      markup.push('<g ', shadowInfo, this.getSvgCommons(), ' >\n');
+    }
+    markup.push(
+      '<g ',
+      this.getSvgTransform(false),
+      !absoluteClipPath ? shadowInfo + this.getSvgCommons() : '',
+      ' >\n'
+    );
+    const commonPieces = [
+      styleInfo,
+      vectorEffect,
+      noStyle ? '' : this.addPaintOrder(),
+      ' ',
+      additionalTransform ? `transform="${additionalTransform}" ` : '',
+    ].join('');
+    objectMarkup[index] = commonPieces;
+    if (fill && fill.toLive) {
+      markup.push(fill.toSVG(this));
+    }
+    if (stroke && stroke.toLive) {
+      markup.push(stroke.toSVG(this));
+    }
+    if (shadow) {
+      markup.push(shadow.toSVG(this));
+    }
+    if (clipPath) {
+      markup.push(clipPathMarkup);
+    }
+    markup.push(objectMarkup.join(''));
+    markup.push('</g>\n');
+    absoluteClipPath && markup.push('</g>\n');
+    return reviver ? reviver(markup.join('')) : markup.join('');
+  }
+
+  addPaintOrder() {
+    return this.paintFirst !== 'fill'
+      ? ` paint-order="${this.paintFirst}" `
+      : '';
+  }
+}