fabric 5.3.0 → 6.0.0-beta3

package/src/util/misc/textStyles.ts

@@ -0,0 +1,134 @@
+import type {
+  TextStyle,
+  TextStyleDeclaration,
+} from '../../shapes/Text/StyledText';
+import { cloneDeep } from '../internals/cloneDeep';
+
+export type TextStyleArray = {
+  start: number;
+  end: number;
+  style: TextStyleDeclaration;
+}[];
+
+/**
+ * @param {Object} prevStyle first style to compare
+ * @param {Object} thisStyle second style to compare
+ * @param {boolean} forTextSpans whether to check overline, underline, and line-through properties
+ * @return {boolean} true if the style changed
+ */
+export const hasStyleChanged = (
+  prevStyle: TextStyleDeclaration,
+  thisStyle: TextStyleDeclaration,
+  forTextSpans = false
+) =>
+  prevStyle.fill !== thisStyle.fill ||
+  prevStyle.stroke !== thisStyle.stroke ||
+  prevStyle.strokeWidth !== thisStyle.strokeWidth ||
+  prevStyle.fontSize !== thisStyle.fontSize ||
+  prevStyle.fontFamily !== thisStyle.fontFamily ||
+  prevStyle.fontWeight !== thisStyle.fontWeight ||
+  prevStyle.fontStyle !== thisStyle.fontStyle ||
+  prevStyle.textBackgroundColor !== thisStyle.textBackgroundColor ||
+  prevStyle.deltaY !== thisStyle.deltaY ||
+  (forTextSpans &&
+    (prevStyle.overline !== thisStyle.overline ||
+      prevStyle.underline !== thisStyle.underline ||
+      prevStyle.linethrough !== thisStyle.linethrough));
+
+/**
+ * Returns the array form of a text object's inline styles property with styles grouped in ranges
+ * rather than per character. This format is less verbose, and is better suited for storage
+ * so it is used in serialization (not during runtime).
+ * @param {object} styles per character styles for a text object
+ * @param {String} text the text string that the styles are applied to
+ * @return {{start: number, end: number, style: object}[]}
+ */
+export const stylesToArray = (
+  styles: TextStyle,
+  text: string
+): TextStyleArray => {
+  const textLines = text.split('\n'),
+    stylesArray = [];
+  let charIndex = -1,
+    prevStyle = {};
+  // clone style structure to prevent mutation
+  styles = cloneDeep(styles);
+
+  //loop through each textLine
+  for (let i = 0; i < textLines.length; i++) {
+    if (!styles[i]) {
+      //no styles exist for this line, so add the line's length to the charIndex total and reset prevStyle
+      charIndex += textLines[i].length;
+      prevStyle = {};
+      continue;
+    }
+    //loop through each character of the current line
+    for (let c = 0; c < textLines[i].length; c++) {
+      charIndex++;
+      const thisStyle = styles[i][c];
+      //check if style exists for this character
+      if (thisStyle && Object.keys(thisStyle).length > 0) {
+        if (hasStyleChanged(prevStyle, thisStyle, true)) {
+          stylesArray.push({
+            start: charIndex,
+            end: charIndex + 1,
+            style: thisStyle,
+          });
+        } else {
+          //if style is the same as previous character, increase end index
+          stylesArray[stylesArray.length - 1].end++;
+        }
+      }
+      prevStyle = thisStyle || {};
+    }
+  }
+  return stylesArray;
+};
+
+/**
+ * Returns the object form of the styles property with styles that are assigned per
+ * character rather than grouped by range. This format is more verbose, and is
+ * only used during runtime (not for serialization/storage)
+ * @param {Array} styles the serialized form of a text object's styles
+ * @param {String} text the text string that the styles are applied to
+ * @return {Object}
+ */
+export const stylesFromArray = (
+  styles: TextStyleArray | TextStyle,
+  text: string
+): TextStyle => {
+  if (!Array.isArray(styles)) {
+    // clone to prevent mutation
+    return cloneDeep(styles);
+  }
+  const textLines = text.split('\n'),
+    stylesObject = {} as Record<
+      string | number,
+      Record<string | number, Record<string, string>>
+    >;
+  let charIndex = -1,
+    styleIndex = 0;
+  //loop through each textLine
+  for (let i = 0; i < textLines.length; i++) {
+    //loop through each character of the current line
+    for (let c = 0; c < textLines[i].length; c++) {
+      charIndex++;
+      //check if there's a style collection that includes the current character
+      if (
+        styles[styleIndex] &&
+        styles[styleIndex].start <= charIndex &&
+        charIndex < styles[styleIndex].end
+      ) {
+        //create object for line index if it doesn't exist
+        stylesObject[i] = stylesObject[i] || {};
+        //assign a style at this character's index
+        stylesObject[i][c] = { ...styles[styleIndex].style };
+        //if character is at the end of the current style collection, move to the next
+        if (charIndex === styles[styleIndex].end - 1) {
+          styleIndex++;
+        }
+      }
+    }
+  }
+  return stylesObject;
+};

package/src/util/misc/toFixed.ts

@@ -0,0 +1,8 @@
+/**
+ * A wrapper around Number#toFixed, which contrary to native method returns number, not string.
+ * @param {number|string} number number to operate on
+ * @param {number} fractionDigits number of fraction digits to "leave"
+ * @return {number}
+ */
+export const toFixed = (number: number | string, fractionDigits: number) =>
+  parseFloat(Number(number).toFixed(fractionDigits));

package/src/util/misc/vectors.ts

@@ -0,0 +1,82 @@
+import { XY, Point } from '../../Point';
+import { TRadian } from '../../typedefs';
+
+const unitVectorX = new Point(1, 0);
+
+/**
+ * Rotates `vector` with `radians`
+ * @param {Point} vector The vector to rotate (x and y)
+ * @param {Number} radians The radians of the angle for the rotation
+ * @return {Point} The new rotated point
+ */
+export const rotateVector = (vector: Point, radians: TRadian) =>
+  vector.rotate(radians);
+
+/**
+ * Creates a vector from points represented as a point
+ *
+ * @param {Point} from
+ * @param {Point} to
+ * @returns {Point} vector
+ */
+export const createVector = (from: XY, to: XY): Point =>
+  new Point(to).subtract(from);
+
+/**
+ * return the magnitude of a vector
+ * @return {number}
+ */
+export const magnitude = (point: Point) => point.distanceFrom(new Point());
+
+/**
+ * Calculates the angle between 2 vectors
+ * @param {Point} a
+ * @param {Point} b
+ * @returns the angle in radians from `a` to `b`
+ */
+export const calcAngleBetweenVectors = (a: Point, b: Point): TRadian => {
+  const dot = a.x * b.x + a.y * b.y,
+    det = a.x * b.y - a.y * b.x;
+  return Math.atan2(det, dot) as TRadian;
+};
+
+/**
+ * Calculates the angle between the x axis and the vector
+ * @param {Point} v
+ * @returns the angle in radians of `v`
+ */
+export const calcVectorRotation = (v: Point) =>
+  calcAngleBetweenVectors(unitVectorX, v);
+
+/**
+ * @param {Point} v
+ * @returns {Point} vector representing the unit vector pointing to the direction of `v`
+ */
+export const getUnitVector = (v: Point): Point => v.scalarDivide(magnitude(v));
+
+/**
+ * @param {Point} A
+ * @param {Point} B
+ * @param {Point} C
+ * @returns {{ vector: Point, angle: TRadian}} vector representing the bisector of A and A's angle
+ */
+export const getBisector = (A: Point, B: Point, C: Point) => {
+  const AB = createVector(A, B),
+    AC = createVector(A, C),
+    alpha = calcAngleBetweenVectors(AB, AC);
+  return {
+    vector: getUnitVector(rotateVector(AB, alpha / 2)),
+    angle: alpha,
+  };
+};
+
+/**
+ * @param {Point} v
+ * @param {Boolean} [counterClockwise] the direction of the orthogonal vector, defaults to `true`
+ * @returns {Point} the unit orthogonal vector
+ */
+export const getOrthonormalVector = (
+  v: Point,
+  counterClockwise = true
+): Point =>
+  getUnitVector(new Point(-v.y, v.x).scalarMultiply(counterClockwise ? 1 : -1));