fabric 5.3.0 → 6.0.0-beta10

package/src/shapes/Textbox.ts

@@ -0,0 +1,526 @@
+// @ts-nocheck
+import type { TClassProperties } from '../typedefs';
+import { IText } from './IText/IText';
+import { classRegistry } from '../ClassRegistry';
+import { createTextboxDefaultControls } from '../controls/commonControls';
+import { JUSTIFY } from './Text/constants';
+import type { TextStyleDeclaration } from 'fabric';
+// @TODO: Many things here are configuration related and shouldn't be on the class nor prototype
+// regexes, list of properties that are not suppose to change by instances, magic consts.
+// this will be a separated effort
+export const textboxDefaultValues: Partial<TClassProperties<Textbox>> = {
+  minWidth: 20,
+  dynamicMinWidth: 2,
+  lockScalingFlip: true,
+  noScaleCache: false,
+  _wordJoiners: /[ \t\r]/,
+  splitByGrapheme: false,
+};
+
+export type GraphemeData = {
+  wordsData: {
+    word: string;
+    width: number;
+  }[][];
+  largestWordWidth: number;
+};
+
+/**
+ * Textbox class, based on IText, allows the user to resize the text rectangle
+ * and wraps lines automatically. Textboxes have their Y scaling locked, the
+ * user can only change width. Height is adjusted automatically based on the
+ * wrapping of lines.
+ */
+export class Textbox extends IText {
+  /**
+   * Minimum width of textbox, in pixels.
+   * @type Number
+   * @default
+   */
+  declare minWidth: number;
+
+  /**
+   * Minimum calculated width of a textbox, in pixels.
+   * fixed to 2 so that an empty textbox cannot go to 0
+   * and is still selectable without text.
+   * @type Number
+   * @default
+   */
+  declare dynamicMinWidth: number;
+
+  /**
+   * Use this boolean property in order to split strings that have no white space concept.
+   * this is a cheap way to help with chinese/japanese
+   * @type Boolean
+   * @since 2.6.0
+   */
+  declare splitByGrapheme: boolean;
+
+  static type = 'Textbox';
+
+  static textLayoutProperties = [...IText.textLayoutProperties, 'width'];
+
+  static ownDefaults: Record<string, any> = textboxDefaultValues;
+
+  static getDefaults() {
+    return {
+      ...super.getDefaults(),
+      controls: createTextboxDefaultControls(),
+      ...Textbox.ownDefaults,
+    };
+  }
+
+  /**
+   * Unlike superclass's version of this function, Textbox does not update
+   * its width.
+   * @private
+   * @override
+   */
+  initDimensions() {
+    if (!this.initialized) {
+      return;
+    }
+    this.isEditing && this.initDelayedCursor();
+    this._clearCache();
+    // clear dynamicMinWidth as it will be different after we re-wrap line
+    this.dynamicMinWidth = 0;
+    // wrap lines
+    this._styleMap = this._generateStyleMap(this._splitText());
+    // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap
+    if (this.dynamicMinWidth > this.width) {
+      this._set('width', this.dynamicMinWidth);
+    }
+    if (this.textAlign.includes(JUSTIFY)) {
+      // once text is measured we need to make space fatter to make justified text.
+      this.enlargeSpaces();
+    }
+    // clear cache and re-calculate height
+    this.height = this.calcTextHeight();
+  }
+
+  /**
+   * Generate an object that translates the style object so that it is
+   * broken up by visual lines (new lines and automatic wrapping).
+   * The original text styles object is broken up by actual lines (new lines only),
+   * which is only sufficient for Text / IText
+   * @private
+   */
+  _generateStyleMap(textInfo) {
+    let realLineCount = 0,
+      realLineCharCount = 0,
+      charCount = 0;
+    const map = {};
+
+    for (let i = 0; i < textInfo.graphemeLines.length; i++) {
+      if (textInfo.graphemeText[charCount] === '\n' && i > 0) {
+        realLineCharCount = 0;
+        charCount++;
+        realLineCount++;
+      } else if (
+        !this.splitByGrapheme &&
+        this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) &&
+        i > 0
+      ) {
+        // this case deals with space's that are removed from end of lines when wrapping
+        realLineCharCount++;
+        charCount++;
+      }
+
+      map[i] = { line: realLineCount, offset: realLineCharCount };
+
+      charCount += textInfo.graphemeLines[i].length;
+      realLineCharCount += textInfo.graphemeLines[i].length;
+    }
+
+    return map;
+  }
+
+  /**
+   * Returns true if object has a style property or has it on a specified line
+   * @param {Number} lineIndex
+   * @return {Boolean}
+   */
+  styleHas(property, lineIndex: number): boolean {
+    if (this._styleMap && !this.isWrapping) {
+      const map = this._styleMap[lineIndex];
+      if (map) {
+        lineIndex = map.line;
+      }
+    }
+    return super.styleHas(property, lineIndex);
+  }
+
+  /**
+   * Returns true if object has no styling or no styling in a line
+   * @param {Number} lineIndex , lineIndex is on wrapped lines.
+   * @return {Boolean}
+   */
+  isEmptyStyles(lineIndex: number): boolean {
+    if (!this.styles) {
+      return true;
+    }
+    let offset = 0,
+      nextLineIndex = lineIndex + 1,
+      nextOffset,
+      shouldLimit = false;
+    const map = this._styleMap[lineIndex],
+      mapNextLine = this._styleMap[lineIndex + 1];
+    if (map) {
+      lineIndex = map.line;
+      offset = map.offset;
+    }
+    if (mapNextLine) {
+      nextLineIndex = mapNextLine.line;
+      shouldLimit = nextLineIndex === lineIndex;
+      nextOffset = mapNextLine.offset;
+    }
+    const obj =
+      typeof lineIndex === 'undefined'
+        ? this.styles
+        : { line: this.styles[lineIndex] };
+    for (const p1 in obj) {
+      for (const p2 in obj[p1]) {
+        if (p2 >= offset && (!shouldLimit || p2 < nextOffset)) {
+          // eslint-disable-next-line no-unused-vars
+          for (const p3 in obj[p1][p2]) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @private
+   */
+  _getStyleDeclaration(
+    lineIndex: number,
+    charIndex: number
+  ): TextStyleDeclaration {
+    if (this._styleMap && !this.isWrapping) {
+      const map = this._styleMap[lineIndex];
+      if (!map) {
+        return {};
+      }
+      lineIndex = map.line;
+      charIndex = map.offset + charIndex;
+    }
+    return super._getStyleDeclaration(lineIndex, charIndex);
+  }
+
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @param {Object} style
+   * @private
+   */
+  protected _setStyleDeclaration(
+    lineIndex: number,
+    charIndex: number,
+    style: object
+  ) {
+    const map = this._styleMap[lineIndex];
+    lineIndex = map.line;
+    charIndex = map.offset + charIndex;
+
+    this.styles[lineIndex][charIndex] = style;
+  }
+
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @private
+   */
+  _deleteStyleDeclaration(lineIndex: number, charIndex: number) {
+    const map = this._styleMap[lineIndex];
+    lineIndex = map.line;
+    charIndex = map.offset + charIndex;
+    delete this.styles[lineIndex][charIndex];
+  }
+
+  /**
+   * probably broken need a fix
+   * Returns the real style line that correspond to the wrapped lineIndex line
+   * Used just to verify if the line does exist or not.
+   * @param {Number} lineIndex
+   * @returns {Boolean} if the line exists or not
+   * @private
+   */
+  protected _getLineStyle(lineIndex: number): boolean {
+    const map = this._styleMap[lineIndex];
+    return !!this.styles[map.line];
+  }
+
+  /**
+   * Set the line style to an empty object so that is initialized
+   * @param {Number} lineIndex
+   * @param {Object} style
+   * @private
+   */
+  protected _setLineStyle(lineIndex: number) {
+    const map = this._styleMap[lineIndex];
+    this.styles[map.line] = {};
+  }
+
+  /**
+   * Wraps text using the 'width' property of Textbox. First this function
+   * splits text on newlines, so we preserve newlines entered by the user.
+   * Then it wraps each line using the width of the Textbox by calling
+   * _wrapLine().
+   * @param {Array} lines The string array of text that is split into lines
+   * @param {Number} desiredWidth width you want to wrap to
+   * @returns {Array} Array of lines
+   */
+  _wrapText(lines: string[], desiredWidth: number): string[][] {
+    this.isWrapping = true;
+    // extract all thewords and the widths to optimally wrap lines.
+    const wordsData = this.getGraphemeDataForRender(lines);
+    const wrapped: string[][] = [];
+    for (let i = 0; i < lines.length; i++) {
+      wrapped.push(...this._wrapLine(i, desiredWidth, wordsData));
+    }
+    this.isWrapping = false;
+    return wrapped;
+  }
+
+  /**
+   * For each line of text terminated by an hard line stop,
+   * measure each word width and extract the largest word from all.
+   * The returned words here are the one that at the end will be rendered.
+   * @param {string[]} lines the lines we need to measure
+   *
+   */
+  getGraphemeDataForRender(lines: string[]): GraphemeData {
+    const splitByGrapheme = this.splitByGrapheme,
+      infix = splitByGrapheme ? '' : ' ';
+
+    let largestWordWidth = 0;
+
+    const data = lines.map((line, lineIndex) => {
+      let offset = 0;
+      const words = splitByGrapheme
+        ? this.graphemeSplit(line)
+        : this.wordSplit(line);
+
+      // fix a difference between split and graphemeSplit
+      if (words.length === 0) {
+        words.push([]);
+      }
+
+      return words.map((word) => {
+        // if using splitByGrapheme words are already in graphemes.
+        word = splitByGrapheme ? word : this.graphemeSplit(word);
+        const width = this._measureWord(word, lineIndex, offset);
+        largestWordWidth = Math.max(width, largestWordWidth);
+        offset += word.length + infix.length;
+        return { word, width };
+      });
+    });
+
+    return {
+      wordsData: data,
+      largestWordWidth,
+    };
+  }
+
+  /**
+   * Helper function to measure a string of text, given its lineIndex and charIndex offset
+   * It gets called when charBounds are not available yet.
+   * Override if necessary
+   * Use with {@link Textbox#wordSplit}
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {String} text
+   * @param {number} lineIndex
+   * @param {number} charOffset
+   * @returns {number}
+   */
+  _measureWord(word, lineIndex: number, charOffset = 0): number {
+    let width = 0,
+      prevGrapheme;
+    const skipLeft = true;
+    for (let i = 0, len = word.length; i < len; i++) {
+      const box = this._getGraphemeBox(
+        word[i],
+        lineIndex,
+        i + charOffset,
+        prevGrapheme,
+        skipLeft
+      );
+      width += box.kernedWidth;
+      prevGrapheme = word[i];
+    }
+    return width;
+  }
+
+  /**
+   * Override this method to customize word splitting
+   * Use with {@link Textbox#_measureWord}
+   * @param {string} value
+   * @returns {string[]} array of words
+   */
+  wordSplit(value: string): string[] {
+    return value.split(this._wordJoiners);
+  }
+
+  /**
+   * Wraps a line of text using the width of the Textbox as desiredWidth
+   * and leveraging the known width o words from GraphemeData
+   * @private
+   * @param {Number} lineIndex
+   * @param {Number} desiredWidth width you want to wrap the line to
+   * @param {GraphemeData} graphemeData an object containing all the lines' words width.
+   * @param {Number} reservedSpace space to remove from wrapping for custom functionalities
+   * @returns {Array} Array of line(s) into which the given text is wrapped
+   * to.
+   */
+  _wrapLine(
+    lineIndex: number,
+    desiredWidth: number,
+    { largestWordWidth, wordsData }: GraphemeData,
+    reservedSpace = 0
+  ): Array<any> {
+    const additionalSpace = this._getWidthOfCharSpacing(),
+      splitByGrapheme = this.splitByGrapheme,
+      graphemeLines = [],
+      infix = splitByGrapheme ? '' : ' ';
+
+    let lineWidth = 0,
+      line = [],
+      // spaces in different languages?
+      offset = 0,
+      infixWidth = 0,
+      lineJustStarted = true;
+
+    desiredWidth -= reservedSpace;
+
+    const maxWidth = Math.max(
+      desiredWidth,
+      largestWordWidth,
+      this.dynamicMinWidth
+    );
+    // layout words
+    const data = wordsData[lineIndex];
+    offset = 0;
+    let i;
+    for (i = 0; i < data.length; i++) {
+      const { word, width: wordWidth } = data[i];
+      offset += word.length;
+
+      lineWidth += infixWidth + wordWidth - additionalSpace;
+      if (lineWidth > maxWidth && !lineJustStarted) {
+        graphemeLines.push(line);
+        line = [];
+        lineWidth = wordWidth;
+        lineJustStarted = true;
+      } else {
+        lineWidth += additionalSpace;
+      }
+
+      if (!lineJustStarted && !splitByGrapheme) {
+        line.push(infix);
+      }
+      line = line.concat(word);
+
+      infixWidth = splitByGrapheme
+        ? 0
+        : this._measureWord([infix], lineIndex, offset);
+      offset++;
+      lineJustStarted = false;
+    }
+
+    i && graphemeLines.push(line);
+
+    // TODO: this code is probably not necessary anymore.
+    // it can be moved out of this function since largestWordWidth is now
+    // known in advance
+    if (largestWordWidth + reservedSpace > this.dynamicMinWidth) {
+      this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace;
+    }
+    return graphemeLines;
+  }
+
+  /**
+   * Detect if the text line is ended with an hard break
+   * text and itext do not have wrapping, return false
+   * @param {Number} lineIndex text to split
+   * @return {Boolean}
+   */
+  isEndOfWrapping(lineIndex: number): boolean {
+    if (!this._styleMap[lineIndex + 1]) {
+      // is last line, return true;
+      return true;
+    }
+    if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) {
+      // this is last line before a line break, return true;
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Detect if a line has a linebreak and so we need to account for it when moving
+   * and counting style.
+   * @return Number
+   */
+  missingNewlineOffset(lineIndex) {
+    if (this.splitByGrapheme) {
+      return this.isEndOfWrapping(lineIndex) ? 1 : 0;
+    }
+    return 1;
+  }
+
+  /**
+   * Gets lines of text to render in the Textbox. This function calculates
+   * text wrapping on the fly every time it is called.
+   * @param {String} text text to split
+   * @returns {Array} Array of lines in the Textbox.
+   * @override
+   */
+  _splitTextIntoLines(text: string) {
+    const newText = super._splitTextIntoLines(text),
+      graphemeLines = this._wrapText(newText.lines, this.width),
+      lines = new Array(graphemeLines.length);
+    for (let i = 0; i < graphemeLines.length; i++) {
+      lines[i] = graphemeLines[i].join('');
+    }
+    newText.lines = lines;
+    newText.graphemeLines = graphemeLines;
+    return newText;
+  }
+
+  getMinWidth() {
+    return Math.max(this.minWidth, this.dynamicMinWidth);
+  }
+
+  _removeExtraneousStyles() {
+    const linesToKeep = {};
+    for (const prop in this._styleMap) {
+      if (this._textLines[prop]) {
+        linesToKeep[this._styleMap[prop].line] = 1;
+      }
+    }
+    for (const prop in this.styles) {
+      if (!linesToKeep[prop]) {
+        delete this.styles[prop];
+      }
+    }
+  }
+
+  /**
+   * 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(propertiesToInclude: Array<any>): object {
+    return super.toObject(
+      ['minWidth', 'splitByGrapheme'].concat(propertiesToInclude)
+    );
+  }
+}
+
+classRegistry.setClass(Textbox);

package/src/shapes/Triangle.ts

@@ -0,0 +1,62 @@
+import { classRegistry } from '../ClassRegistry';
+import { FabricObject } from './Object/FabricObject';
+import type {
+  FabricObjectProps,
+  SerializedObjectProps,
+  TProps,
+} from './Object/types';
+import type { ObjectEvents } from '../EventTypeDefs';
+
+export const triangleDefaultValues = {
+  width: 100,
+  height: 100,
+};
+
+export class Triangle<
+    Props extends TProps<FabricObjectProps> = Partial<FabricObjectProps>,
+    SProps extends SerializedObjectProps = SerializedObjectProps,
+    EventSpec extends ObjectEvents = ObjectEvents
+  >
+  extends FabricObject<Props, SProps, EventSpec>
+  implements FabricObjectProps
+{
+  static type = 'Triangle';
+
+  static ownDefaults: Record<string, any> = triangleDefaultValues;
+
+  static getDefaults() {
+    return { ...super.getDefaults(), ...Triangle.ownDefaults };
+  }
+
+  /**
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
+   */
+  _render(ctx: CanvasRenderingContext2D) {
+    const widthBy2 = this.width / 2,
+      heightBy2 = this.height / 2;
+
+    ctx.beginPath();
+    ctx.moveTo(-widthBy2, heightBy2);
+    ctx.lineTo(0, -heightBy2);
+    ctx.lineTo(widthBy2, heightBy2);
+    ctx.closePath();
+
+    this._renderPaintInOrder(ctx);
+  }
+
+  /**
+   * Returns svg representation of an instance
+   * @return {Array} an array of strings with the specific svg representation
+   * of the instance
+   */
+  _toSVG() {
+    const widthBy2 = this.width / 2,
+      heightBy2 = this.height / 2,
+      points = `${-widthBy2} ${heightBy2},0 ${-heightBy2},${widthBy2} ${heightBy2}`;
+    return ['<polygon ', 'COMMON_PARTS', 'points="', points, '" />'];
+  }
+}
+
+classRegistry.setClass(Triangle);
+classRegistry.setSVGClass(Triangle);

package/src/typedefs.ts

@@ -0,0 +1,121 @@
+// https://www.typescriptlang.org/docs/handbook/utility-types.html
+import type { BaseFabricObject } from './EventTypeDefs';
+import type { Gradient } from './gradient/Gradient';
+import type { Pattern } from './Pattern';
+import type { XY, Point } from './Point';
+
+interface NominalTag<T> {
+  nominalTag?: T;
+}
+
+type Nominal<Type, Tag> = NominalTag<Tag> & Type;
+
+type TNonFunctionPropertyNames<T> = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [K in keyof T]: T[K] extends Function ? never : K;
+}[keyof T];
+export type TClassProperties<T> = Pick<T, TNonFunctionPropertyNames<T>>;
+
+// https://github.com/microsoft/TypeScript/issues/32080
+export type Constructor<T = object> = new (...args: any[]) => T;
+
+const enum Degree {}
+const enum Radian {}
+
+export type TDegree = Nominal<number, Degree>;
+export type TRadian = Nominal<number, Radian>;
+
+export type TAxis = 'x' | 'y';
+
+export type TAxisKey<T extends string> = `${T}${Capitalize<TAxis>}`;
+
+export type TFiller = Gradient<'linear'> | Gradient<'radial'> | Pattern;
+
+export type TSize = {
+  width: number;
+  height: number;
+};
+
+export type TBBox = {
+  left: number;
+  top: number;
+} & TSize;
+
+export type Percent = `${number}%`;
+
+export type ImageFormat = 'jpeg' | 'png';
+
+export type SVGElementName = 'linearGradient' | 'radialGradient' | 'stop';
+
+export type SupportedSVGUnit = 'mm' | 'cm' | 'in' | 'pt' | 'pc' | 'em';
+
+/**
+ * A transform matrix.
+ * Basically a matrix in the form
+ * [ a c e ]
+ * [ b d f ]
+ * [ 0 0 1 ]
+ * For more details, see @link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#matrix
+ */
+export type TMat2D = [
+  a: number,
+  b: number,
+  c: number,
+  d: number,
+  e: number,
+  f: number
+];
+
+/**
+ * An invalid keyword and an empty string will be handled as the `anonymous` keyword.
+ * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes
+ */
+export type TCrossOrigin = '' | 'anonymous' | 'use-credentials' | null;
+
+export type TOriginX = 'center' | 'left' | 'right' | number;
+export type TOriginY = 'center' | 'top' | 'bottom' | number;
+
+export type TCornerPoint = {
+  tl: Point;
+  tr: Point;
+  bl: Point;
+  br: Point;
+};
+
+export type TSVGReviver = (markup: string) => string;
+
+export type TValidToObjectMethod = 'toDatalessObject' | 'toObject';
+
+export type TCacheCanvasDimensions = {
+  width: number;
+  height: number;
+  zoomX: number;
+  zoomY: number;
+  x: number;
+  y: number;
+};
+
+export type TRectBounds = [min: XY, max: XY];
+
+export type TToCanvasElementOptions = {
+  left?: number;
+  top?: number;
+  width?: number;
+  height?: number;
+  filter?: (object: BaseFabricObject) => boolean;
+};
+
+export type TDataUrlOptions = TToCanvasElementOptions & {
+  multiplier: number;
+  format?: ImageFormat;
+  quality?: number;
+  enableRetinaScaling?: boolean;
+};
+
+export type Abortable = {
+  /**
+   * handle aborting
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+   */
+  signal?: AbortSignal;
+};