fabric 6.4.1 → 6.4.2

package/src/util/path/__snapshots__/index.spec.ts.snap

@@ -1,5 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Path Utils fabric.util.getRegularPolygonPath 1`] = `
+[
+  [
+    "M",
+    0,
+    -50,
+  ],
+  [
+    "L",
+    47.552825814757675,
+    -15.450849718747369,
+  ],
+  [
+    "L",
+    29.389262614623657,
+    40.45084971874737,
+  ],
+  [
+    "L",
+    -29.38926261462365,
+    40.45084971874737,
+  ],
+  [
+    "L",
+    -47.55282581475768,
+    -15.450849718747364,
+  ],
+  [
+    "Z",
+  ],
+]
+`;
+
+exports[`Path Utils fabric.util.getRegularPolygonPath 2`] = `
+[
+  [
+    "M",
+    24.999999999999993,
+    -43.30127018922194,
+  ],
+  [
+    "L",
+    50,
+    -1.1102230246251565e-14,
+  ],
+  [
+    "L",
+    25.000000000000018,
+    43.301270189221924,
+  ],
+  [
+    "L",
+    -24.99999999999999,
+    43.30127018922194,
+  ],
+  [
+    "L",
+    -50,
+    2.8327694488239898e-14,
+  ],
+  [
+    "L",
+    -25.00000000000006,
+    -43.301270189221896,
+  ],
+  [
+    "Z",
+  ],
+]
+`;
+
 exports[`Path Utils getPathSegmentsInfo operates as expected 1`] = `
 [
   {
@@ -380,3 +451,394 @@ exports[`Path Utils makePathSimpler can parse paths that return NaN segments 1`]
   ],
 ]
 `;
+
+exports[`Path Utils parsePath Path written with uncommon scenario 1`] = `
+[
+  [
+    "a",
+    10.56,
+    10.56,
+    0,
+    0,
+    0,
+    -1.484,
+    -0.133,
+  ],
+  [
+    "a",
+    10.56,
+    10.56,
+    0,
+    0,
+    0,
+    -1.484,
+    -0.133,
+  ],
+  [
+    "a",
+    10.56,
+    10.56,
+    0,
+    0,
+    0,
+    -1.484,
+    -0.133,
+  ],
+  [
+    "a",
+    10.56,
+    10.56,
+    0,
+    0,
+    0,
+    -1.484,
+    -0.133,
+  ],
+]
+`;
+
+exports[`Path Utils parsePath can parse path string 1`] = `
+[
+  [
+    "M",
+    2,
+    5,
+  ],
+  [
+    "l",
+    2,
+    -2,
+  ],
+  [
+    "L",
+    4,
+    4,
+  ],
+  [
+    "h",
+    3,
+  ],
+  [
+    "H",
+    9,
+  ],
+  [
+    "C",
+    8,
+    3,
+    10,
+    3,
+    10,
+    3,
+  ],
+  [
+    "c",
+    1,
+    -1,
+    2,
+    0,
+    1,
+    1,
+  ],
+  [
+    "S",
+    8,
+    5,
+    9,
+    7,
+  ],
+  [
+    "v",
+    1,
+  ],
+  [
+    "s",
+    2,
+    -1,
+    1,
+    2,
+  ],
+  [
+    "Q",
+    9,
+    10,
+    10,
+    11,
+  ],
+  [
+    "T",
+    12,
+    11,
+  ],
+  [
+    "t",
+    -1,
+    -1,
+  ],
+  [
+    "v",
+    2,
+  ],
+  [
+    "T",
+    10,
+    12,
+  ],
+  [
+    "S",
+    9,
+    12,
+    7,
+    11,
+  ],
+  [
+    "c",
+    0,
+    -1,
+    0,
+    -1,
+    -2,
+    -2,
+  ],
+  [
+    "z",
+  ],
+  [
+    "m",
+    0,
+    2,
+  ],
+  [
+    "l",
+    1,
+    0,
+  ],
+  [
+    "l",
+    0,
+    1,
+  ],
+  [
+    "l",
+    -1,
+    0,
+  ],
+  [
+    "z",
+  ],
+  [
+    "M",
+    1,
+    1,
+  ],
+  [
+    "a",
+    1,
+    1,
+    30,
+    1,
+    0,
+    2,
+    2,
+  ],
+  [
+    "A",
+    2,
+    2,
+    30,
+    1,
+    0,
+    6,
+    6,
+  ],
+]
+`;
+
+exports[`Path Utils parsePath can parse path string 2`] = `
+[
+  [
+    "M",
+    2,
+    5,
+  ],
+  [
+    "L",
+    4,
+    3,
+  ],
+  [
+    "L",
+    4,
+    4,
+  ],
+  [
+    "L",
+    7,
+    4,
+  ],
+  [
+    "L",
+    9,
+    4,
+  ],
+  [
+    "C",
+    8,
+    3,
+    10,
+    3,
+    10,
+    3,
+  ],
+  [
+    "C",
+    11,
+    2,
+    12,
+    3,
+    11,
+    4,
+  ],
+  [
+    "C",
+    10,
+    5,
+    8,
+    5,
+    9,
+    7,
+  ],
+  [
+    "L",
+    9,
+    8,
+  ],
+  [
+    "C",
+    9,
+    8,
+    11,
+    7,
+    10,
+    10,
+  ],
+  [
+    "Q",
+    9,
+    10,
+    10,
+    11,
+  ],
+  [
+    "Q",
+    11,
+    12,
+    12,
+    11,
+  ],
+  [
+    "Q",
+    13,
+    10,
+    11,
+    10,
+  ],
+  [
+    "L",
+    11,
+    12,
+  ],
+  [
+    "Q",
+    11,
+    12,
+    10,
+    12,
+  ],
+  [
+    "C",
+    10,
+    12,
+    9,
+    12,
+    7,
+    11,
+  ],
+  [
+    "C",
+    7,
+    10,
+    7,
+    10,
+    5,
+    9,
+  ],
+  [
+    "Z",
+  ],
+  [
+    "M",
+    2,
+    7,
+  ],
+  [
+    "L",
+    3,
+    7,
+  ],
+  [
+    "L",
+    3,
+    8,
+  ],
+  [
+    "L",
+    2,
+    8,
+  ],
+  [
+    "Z",
+  ],
+  [
+    "M",
+    1,
+    1,
+  ],
+  [
+    "C",
+    0.44771525016920655,
+    1.5522847498307935,
+    0.44771525016920655,
+    2.4477152501692068,
+    1,
+    3,
+  ],
+  [
+    "C",
+    1.5522847498307935,
+    3.5522847498307932,
+    2.4477152501692068,
+    3.5522847498307932,
+    3,
+    3,
+  ],
+  [
+    "C",
+    2.1715728752538106,
+    3.8284271247461903,
+    2.1715728752538106,
+    5.17157287525381,
+    3.0000000000000004,
+    6,
+  ],
+  [
+    "C",
+    3.8284271247461903,
+    6.82842712474619,
+    5.17157287525381,
+    6.82842712474619,
+    6,
+    6,
+  ],
+]
+`;

package/src/util/path/index.spec.ts

@@ -1,6 +1,112 @@
-import { getPathSegmentsInfo, parsePath, makePathSimpler } from '.';
+import {
+  getPathSegmentsInfo,
+  parsePath,
+  makePathSimpler,
+  getRegularPolygonPath,
+  joinPath,
+} from '.';
+import type { TSimplePathData } from './typedefs';
 
 describe('Path Utils', () => {
+  describe('parsePath', () => {
+    const path =
+      'M 2 5 l 2 -2 L 4 4 h 3 H 9 C 8 3 10 3 10 3 c 1 -1 2 0 1 1 S 8 5 9 7 v 1 s 2 -1 1 2 Q 9 10 10 11 T 12 11 t -1 -1 v 2 T 10 12 S 9 12 7 11 c 0 -1 0 -1 -2 -2 z m 0 2 l 1 0 l 0 1 l -1 0 z M 1 1 a 1 1 30 1 0 2 2 A 2 2 30 1 0 6 6';
+    test('can parse path string', () => {
+      const parsed = parsePath(path);
+      expect(parsed).toMatchSnapshot();
+      const simplified = makePathSimpler(parsed);
+      expect(simplified).toMatchSnapshot();
+    });
+    test('Path written with uncommon scenario', () => {
+      const path =
+        'a10.56 10.56 0 00-1.484-.133a10.56  ,   10.56    0, 0,0-1.484-.133a10.56  ,   10.56    0, 0,0-1.484-.133a1.056e+1  ,   105.6e-1,0,0,0-1.484-.133';
+      const parsed = parsePath(path);
+      expect(parsed[0]).toEqual(parsed[1]);
+      expect(parsed[1]).toEqual(parsed[2]);
+      expect(parsed[2]).toEqual(parsed[3]);
+      expect(parsed).toMatchSnapshot();
+    });
+    test('fabric.util.parsePath can parse arcs correctly when no spaces between flags', () => {
+      const pathWithWeirdArc = 'a10.56 10.56 0 00-1.484-.133';
+      const expected = ['a', 10.56, 10.56, 0, 0, 0, -1.484, -0.133];
+      const parsed = parsePath(pathWithWeirdArc);
+      const command = parsed[0];
+      expect(command).toEqual(expected);
+    });
+    test('getPathSegmentsInfo', () => {
+      const parsed = makePathSimpler(parsePath(path));
+      const infos = getPathSegmentsInfo(parsed);
+      // 'the command 0 a M has a length 0');
+      expect(infos[0].length).toBe(0);
+      // 'the command 1 a L has a length 2.828',
+      expect(infos[1].length.toFixed(5)).toBe('2.82843');
+      //  'the command 2 a L with one step on Y has a length 1',
+      expect(infos[2].length).toBe(1);
+      // 'the command 3 a L with 3 step on X has a length 3'
+      expect(infos[3].length).toBe(3);
+      // 'the command 4 a L with 2 step on X has a length 0',
+      expect(infos[4].length).toBe(2);
+      // 'the command 5 a C has a approximated length of 2.062',
+      expect(infos[5].length.toFixed(5)).toBe('2.06242');
+      // 'the command 6 a C has a approximated length of 2.828',
+      expect(infos[6].length.toFixed(5)).toBe('2.82832');
+      // 'the command 7 a C has a approximated length of 4.189',
+      expect(infos[7].length.toFixed(5)).toBe('4.18970');
+      // 'the command 8 a L with 1 step on the Y has an exact length of 1',
+      expect(infos[8].length).toBe(1);
+      // 'the command 9 a C has a approximated length of 3.227',
+      expect(infos[9].length.toFixed(5)).toBe('3.22727');
+      // 'the command 10 a Q has a approximated length of 1.540',
+      expect(infos[10].length.toFixed(5)).toBe('1.54026');
+      // 'the command 11 a Q has a approximated length of 2.295',
+      expect(infos[11].length.toFixed(5)).toBe('2.29556');
+    });
+    test('fabric.util.getPathSegmentsInfo test Z command', () => {
+      const parsed = makePathSimpler(parsePath('M 0 0 h 20, v 20 L 0, 20 Z'));
+      const infos = getPathSegmentsInfo(parsed);
+      // 'the command 0 a M has a length 0'
+      expect(infos[0].length).toBe(0);
+      // 'the command 1 a L has length 20'
+      expect(infos[1].length).toBe(20);
+      // 'the command 2 a L has length 20'
+      expect(infos[2].length).toBe(20);
+      // 'the command 3 a L has length 20'
+      expect(infos[3].length).toBe(20);
+      // 'the command 4 a Z has length 20'
+      expect(infos[4].length).toBe(20);
+    });
+  });
+  test('fabric.util.getRegularPolygonPath', () => {
+    const penta = getRegularPolygonPath(5, 50);
+    const hexa = getRegularPolygonPath(6, 50);
+    // 'regular pentagon should match',
+    expect(penta).toMatchSnapshot();
+    // 'regular hexagon should match',
+    expect(hexa).toMatchSnapshot();
+  });
+
+  test('fabric.util.joinPath', () => {
+    const pathData: TSimplePathData = [
+      ['M', 3.12345678, 2.12345678],
+      ['L', 1.00001111, 2.40001111],
+      ['Z'],
+    ] as const;
+    const digit = 2;
+    const expected = 'M 3.12 2.12 L 1 2.4 Z';
+    const result = joinPath(pathData, digit);
+    expect(result).toBe(expected);
+  });
+
+  test('fabric.util.joinPath without rounding', () => {
+    const pathData: TSimplePathData = [
+      ['M', 3.12345678, 2.12345678],
+      ['L', 1.00001111, 2.40001111],
+      ['Z'],
+    ] as const;
+    const expected = 'M 3.12345678 2.12345678 L 1.00001111 2.40001111 Z';
+    const result = joinPath(pathData);
+    expect(result).toBe(expected);
+  });
   describe('makePathSimpler', () => {
     test('can parse paths that return NaN segments', () => {
       expect(

package/src/util/path/index.ts

@@ -19,16 +19,17 @@ import type {
   TPathSegmentInfoCommon,
   TEndPathInfo,
   TParsedArcCommand,
+  TComplexParsedCommandType,
 } from './typedefs';
 import type { XY } from '../../Point';
 import { Point } from '../../Point';
-import { rePathCommand } from './regex';
-import { cleanupSvgAttribute } from '../internals/cleanupSvgAttribute';
+import { reArcCommandPoints, rePathCommand } from './regex';
+import { reNum } from '../../parser/constants';
 
 /**
  * Commands that may be repeated
  */
-const repeatedCommands: Record<string, string | undefined> = {
+const repeatedCommands: Record<string, 'l' | 'L'> = {
   m: 'l',
   M: 'L',
 };
@@ -829,8 +830,19 @@ export const getPointOnPath = (
 };
 
 const rePathCmdAll = new RegExp(rePathCommand, 'gi');
-const rePathCmd = new RegExp(rePathCommand, 'i');
-
+const regExpArcCommandPoints = new RegExp(reArcCommandPoints, 'g');
+const reMyNum = new RegExp(reNum, 'gi');
+const commandLengths = {
+  m: 2,
+  l: 2,
+  h: 1,
+  v: 1,
+  c: 6,
+  s: 4,
+  q: 4,
+  t: 2,
+  a: 7,
+} as const;
 /**
  *
  * @param {string} pathString
@@ -843,56 +855,49 @@ const rePathCmd = new RegExp(rePathCommand, 'i');
  * ];
  */
 export const parsePath = (pathString: string): TComplexPathData => {
-  // clean the string
-  // add spaces around the numbers
-  pathString = cleanupSvgAttribute(pathString);
+  const chain: TComplexPathData = [];
+  const all = pathString.match(rePathCmdAll) ?? [];
+  for (const matchStr of all) {
+    // take match string and save the first letter as the command
+    const commandLetter = matchStr[0] as TComplexParsedCommandType;
+    // in case of Z we have very little to do
+    if (commandLetter === 'z' || commandLetter === 'Z') {
+      chain.push([commandLetter]);
+      continue;
+    }
+    const commandLength =
+      commandLengths[
+        commandLetter.toLowerCase() as keyof typeof commandLengths
+      ];
 
-  const res: TComplexPathData = [];
-  for (let [matchStr] of pathString.matchAll(rePathCmdAll)) {
-    const chain: TComplexPathData = [];
-    let paramArr: RegExpExecArray | null;
-    do {
-      paramArr = rePathCmd.exec(matchStr);
-      if (!paramArr) {
-        break;
+    let paramArr = [];
+    if (commandLetter === 'a' || commandLetter === 'A') {
+      // the arc command ha some peculariaties that requires a special regex other than numbers
+      // it is possible to avoid using a space between the sweep and large arc flags, making them either
+      // 00, 01, 10 or 11, making them identical to a plain number for the regex reMyNum
+      // reset the regexp
+      regExpArcCommandPoints.lastIndex = 0;
+      for (let out = null; (out = regExpArcCommandPoints.exec(matchStr)); ) {
+        paramArr.push(...out.slice(1));
       }
-      // ignore undefined match groups
-      const filteredGroups = paramArr.filter((g) => g);
-      // remove the first element from the match array since it's just the whole command
-      filteredGroups.shift();
-      // if we can't parse the number, just interpret it as a string
-      // (since it's probably the path command)
-      const command = filteredGroups.map((g) => {
-        const numParse = Number.parseFloat(g);
-        if (Number.isNaN(numParse)) {
-          return g;
-        } else {
-          return numParse;
-        }
-      });
-      chain.push(command as any);
-      // stop now if it's a z command
-      if (filteredGroups.length <= 1) {
-        break;
-      }
-      // remove the last part of the chained command
-      filteredGroups.shift();
-      // ` ?` is to support commands with optional spaces between flags
-      matchStr = matchStr.replace(
-        new RegExp(`${filteredGroups.join(' ?')} ?$`),
-        '',
-      );
-    } while (paramArr);
-    // add the chain, convert multiple m's to l's in the process
-    chain.reverse().forEach((c, idx) => {
-      const transformed = repeatedCommands[c[0]];
-      if (idx > 0 && (transformed == 'l' || transformed == 'L')) {
-        c[0] = transformed;
+    } else {
+      paramArr = matchStr.match(reMyNum) || [];
+    }
+
+    // inspect the length of paramArr, if is longer than commandLength
+    // we are dealing with repeated commands
+    for (let i = 0; i < paramArr.length; i += commandLength) {
+      const newCommand = new Array(commandLength) as TComplexParsedCommand;
+      const transformedCommand = repeatedCommands[commandLetter];
+      newCommand[0] =
+        i > 0 && transformedCommand ? transformedCommand : commandLetter;
+      for (let j = 0; j < commandLength; j++) {
+        newCommand[j + 1] = parseFloat(paramArr[i + j]);
       }
-      res.push(c);
-    });
+      chain.push(newCommand);
+    }
   }
-  return res;
+  return chain;
 };
 
 /**