fabric 5.3.0 → 6.0.0-beta1

package/src/util/misc/sin.ts

@@ -0,0 +1,26 @@
+import type { TRadian } from '../../typedefs';
+import { halfPI } from '../../constants';
+
+/**
+ * Calculate the cos of an angle, avoiding returning floats for known results
+ * This function is here just to avoid getting 0.999999999999999 when dealing
+ * with numbers that are really 1 or 0.
+ * @param {TRadian} angle the angle
+ * @return {Number} the sin value for angle.
+ */
+export const sin = (angle: TRadian): number => {
+  if (angle === 0) {
+    return 0;
+  }
+  const angleSlice = angle / halfPI;
+  const value = Math.sign(angle);
+  switch (angleSlice) {
+    case 1:
+      return value;
+    case 2:
+      return 0;
+    case 3:
+      return -value;
+  }
+  return Math.sin(angle);
+};

package/src/util/misc/svgParsing.ts

@@ -0,0 +1,181 @@
+import { Color } from '../../color/Color';
+import { config } from '../../config';
+import { DEFAULT_SVG_FONT_SIZE } from '../../constants';
+import {
+  SupportedSVGUnit,
+  SVGElementName,
+  TBBox,
+  TMat2D,
+} from '../../typedefs';
+import { toFixed } from './toFixed';
+/**
+ * Returns array of attributes for given svg that fabric parses
+ * @param {SVGElementName} type Type of svg element (eg. 'circle')
+ * @return {Array} string names of supported attributes
+ */
+export const getSvgAttributes = (type: SVGElementName) => {
+  const commonAttributes = ['instantiated_by_use', 'style', 'id', 'class'];
+  switch (type) {
+    case SVGElementName.linearGradient:
+      return commonAttributes.concat([
+        'x1',
+        'y1',
+        'x2',
+        'y2',
+        'gradientUnits',
+        'gradientTransform',
+      ]);
+    case 'radialGradient':
+      return commonAttributes.concat([
+        'gradientUnits',
+        'gradientTransform',
+        'cx',
+        'cy',
+        'r',
+        'fx',
+        'fy',
+        'fr',
+      ]);
+    case 'stop':
+      return commonAttributes.concat(['offset', 'stop-color', 'stop-opacity']);
+  }
+  return commonAttributes;
+};
+
+/**
+ * Converts from attribute value to pixel value if applicable.
+ * Returns converted pixels or original value not converted.
+ * @param {string} value number to operate on
+ * @param {number} fontSize
+ * @return {number}
+ */
+export const parseUnit = (value: string, fontSize: number) => {
+  const unit = /\D{0,2}$/.exec(value),
+    number = parseFloat(value);
+  if (!fontSize) {
+    fontSize = DEFAULT_SVG_FONT_SIZE;
+  }
+  const dpi = config.DPI;
+  switch (unit?.[0]) {
+    case SupportedSVGUnit.mm:
+      return (number * dpi) / 25.4;
+
+    case SupportedSVGUnit.cm:
+      return (number * dpi) / 2.54;
+
+    case SupportedSVGUnit.in:
+      return number * dpi;
+
+    case SupportedSVGUnit.pt:
+      return (number * dpi) / 72; // or * 4 / 3
+
+    case SupportedSVGUnit.pc:
+      return ((number * dpi) / 72) * 12; // or * 16
+
+    case SupportedSVGUnit.em:
+      return number * fontSize;
+
+    default:
+      return number;
+  }
+};
+
+export const enum MeetOrSlice {
+  meet = 'meet',
+  slice = 'slice',
+}
+
+export const enum MinMidMax {
+  min = 'Min',
+  mid = 'Mid',
+  max = 'Max',
+  none = 'none',
+}
+
+export type TPreserveArParsed = {
+  meetOrSlice: MeetOrSlice;
+  alignX: MinMidMax;
+  alignY: MinMidMax;
+};
+
+// align can be either none or undefined or a combination of mid/max
+const parseAlign = (align: string): MinMidMax[] => {
+  //divide align in alignX and alignY
+  if (align && align !== MinMidMax.none) {
+    return [align.slice(1, 4) as MinMidMax, align.slice(5, 8) as MinMidMax];
+  } else if (align === MinMidMax.none) {
+    return [align, align];
+  }
+  return [MinMidMax.mid, MinMidMax.mid];
+};
+
+/**
+ * Parse preserveAspectRatio attribute from element
+ * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
+ * @param {string} attribute to be parsed
+ * @return {Object} an object containing align and meetOrSlice attribute
+ */
+export const parsePreserveAspectRatioAttribute = (
+  attribute: string
+): TPreserveArParsed => {
+  const [firstPart, secondPart] = attribute.trim().split(' ') as [
+    MinMidMax,
+    MeetOrSlice | undefined
+  ];
+  const [alignX, alignY] = parseAlign(firstPart);
+  return {
+    meetOrSlice: secondPart || MeetOrSlice.meet,
+    alignX,
+    alignY,
+  };
+};
+
+/**
+ * given an array of 6 number returns something like `"matrix(...numbers)"`
+ * @param {TMat2D} transform an array with 6 numbers
+ * @return {String} transform matrix for svg
+ */
+export const matrixToSVG = (transform: TMat2D) =>
+  'matrix(' +
+  transform
+    .map((value) => toFixed(value, config.NUM_FRACTION_DIGITS))
+    .join(' ') +
+  ')';
+
+/**
+ * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values
+ * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1
+ * @param prop
+ * @param value
+ * @returns
+ */
+export const colorPropToSVG = (prop: string, value?: any) => {
+  if (!value) {
+    return `${prop}: none; `;
+  } else if (value.toLive) {
+    return `${prop}: url(#SVGID_${value.id}); `;
+  } else {
+    const color = new Color(value),
+      opacity = color.getAlpha();
+
+    let str = `${prop}: ${color.toRgb()}; `;
+
+    if (opacity !== 1) {
+      //change the color in rgb + opacity
+      str += `${prop}-opacity: ${opacity.toString()}; `;
+    }
+    return str;
+  }
+};
+
+export const createSVGRect = (
+  color: string,
+  { left, top, width, height }: TBBox,
+  precision = config.NUM_FRACTION_DIGITS
+) => {
+  const svgColor = colorPropToSVG('fill', color);
+  const [x, y, w, h] = [left, top, width, height].map((value) =>
+    toFixed(value, precision)
+  );
+  return `<rect ${svgColor} x="${x}" y="${y}" width="${w}" height="${h}"></rect>`;
+};

package/src/util/misc/textStyles.ts

@@ -0,0 +1,133 @@
+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
+      charIndex += textLines[i].length;
+      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 { IPoint, 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: IPoint, to: IPoint): 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));