fabric 6.0.2 → 6.2.0

package/src/util/dom_misc.ts

@@ -10,7 +10,7 @@ export function getScrollLeftTop(element: HTMLElement | null) {
   if (!element || !doc) {
     return { left, top };
   }
-
+  let elementLoop: HTMLElement | Document | ShadowRoot = element;
   const docElement = doc.documentElement,
     body = doc.body || {
       scrollLeft: 0,
@@ -20,20 +20,27 @@ export function getScrollLeftTop(element: HTMLElement | null) {
   //  to account for ShadowDOM. We still want to traverse up out of ShadowDOM,
   //  but the .parentNode of a root ShadowDOM node will always be null, instead
   //  it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938
-  // @ts-expect-error Set element to element parent, or 'host' in case of ShadowDOM
-  while (element && (element.parentNode || element.host)) {
-    // @ts-expect-error Set element to element parent, or 'host' in case of ShadowDOM
-    element = element.parentNode || element.host;
-    // @ts-expect-error because element is typed as HTMLElement but it can go up to document
-    if (element === doc) {
+  while (
+    elementLoop &&
+    (elementLoop.parentNode || (elementLoop as unknown as ShadowRoot).host)
+  ) {
+    elementLoop = (elementLoop.parentNode ||
+      (elementLoop as unknown as ShadowRoot).host) as
+      | HTMLElement
+      | Document
+      | ShadowRoot;
+    if (elementLoop === doc) {
       left = body.scrollLeft || docElement.scrollLeft || 0;
       top = body.scrollTop || docElement.scrollTop || 0;
     } else {
-      left += element!.scrollLeft || 0;
-      top += element!.scrollTop || 0;
+      left += (elementLoop as HTMLElement).scrollLeft || 0;
+      top += (elementLoop as HTMLElement).scrollTop || 0;
     }
 
-    if (element!.nodeType === 1 && element!.style.position === 'fixed') {
+    if (
+      elementLoop.nodeType === 1 &&
+      (elementLoop as HTMLElement).style.position === 'fixed'
+    ) {
       break;
     }
   }

package/src/util/misc/objectEnlive.spec.ts

@@ -0,0 +1,68 @@
+import { enlivenObjects } from './objectEnlive';
+import { Rect, type RectProps } from '../../shapes/Rect';
+import { Shadow } from '../../Shadow';
+import { classRegistry } from '../../ClassRegistry';
+
+const mockedRectWithCustomProperty = {
+  type: 'rect',
+  width: 100,
+  // will become a shadow
+  shadow: {
+    type: 'shadow',
+    blur: 5,
+  },
+  // will become a rect
+  custom1: {
+    type: 'rect',
+    width: 50,
+  },
+  custom2: {
+    type: 'nothing',
+    value: 3,
+  },
+  // will become a set
+  custom3: {
+    type: 'registered',
+  },
+};
+
+describe('enlivenObjects', () => {
+  it('will enlive correctly', async () => {
+    const [rect] = await enlivenObjects<Rect<RectProps>>([
+      mockedRectWithCustomProperty,
+    ]);
+    expect(rect).toBeInstanceOf(Rect);
+    expect(rect.shadow).toBeInstanceOf(Shadow);
+    expect(rect.custom1).toBeInstanceOf(Rect);
+    expect(rect.custom2).toEqual({
+      type: 'nothing',
+      value: 3,
+    });
+    expect(rect.custom3).toEqual({
+      type: 'registered',
+    });
+  });
+  it('will enlive correctly newly registered props', async () => {
+    class Test {
+      declare opts: any;
+      constructor(opts: any) {
+        this.opts = opts;
+      }
+      static async fromObject(opts: any) {
+        return new this(opts);
+      }
+    }
+    classRegistry.setClass(Test, 'registered');
+    const [rect] = await enlivenObjects<Rect<RectProps>>([
+      mockedRectWithCustomProperty,
+    ]);
+    expect(rect).toBeInstanceOf(Rect);
+    expect(rect.shadow).toBeInstanceOf(Shadow);
+    expect(rect.custom1).toBeInstanceOf(Rect);
+    expect(rect.custom2).toEqual({
+      type: 'nothing',
+      value: 3,
+    });
+    expect(rect.custom3).toBeInstanceOf(Test);
+  });
+});

package/src/util/misc/objectEnlive.ts

@@ -1,5 +1,4 @@
 import { noop } from '../../constants';
-import type { Pattern } from '../../Pattern';
 import type { FabricObject } from '../../shapes/Object/FabricObject';
 import type {
   Abortable,
@@ -155,8 +154,13 @@ export const enlivenObjectEnlivables = <
       if (!value) {
         return value;
       }
-      // clipPath or shadow or gradient
-      if (value.type) {
+      /**
+       * clipPath or shadow or gradient or text on a path or a pattern,
+       * or the backgroundImage or overlayImage of canvas
+       * If we have a type and there is a classe registered for it, we enlive it.
+       * If there is no class registered for it we return the value as is
+       * */
+      if (value.type && classRegistry.has(value.type)) {
         return enlivenObjects<FabricObject | Shadow | TFiller>([value], {
           signal,
         }).then(([enlived]) => {
@@ -164,16 +168,6 @@ export const enlivenObjectEnlivables = <
           return enlived;
         });
       }
-      // pattern
-      if (value.source) {
-        return classRegistry
-          .getClass<typeof Pattern>('pattern')
-          .fromObject(value, { signal })
-          .then((pattern: Pattern) => {
-            instances.push(pattern);
-            return pattern;
-          });
-      }
       return value;
     });
     const keys = Object.keys(serializedObject);

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

@@ -53,3 +53,330 @@ exports[`Path Utils getPathSegmentsInfo operates as expected 1`] = `
   },
 ]
 `;
+
+exports[`Path Utils makePathSimpler can parse paths that return NaN segments 1`] = `
+[
+  [
+    "M",
+    22,
+    6.58,
+  ],
+  [
+    "C",
+    21.86757184091244,
+    6.561276219544052,
+    21.739164165358723,
+    6.520726427263932,
+    21.62,
+    6.46,
+  ],
+  [
+    "C",
+    21.62,
+    6.26,
+    21.740000000000002,
+    6.26,
+    21.71,
+    5.96,
+  ],
+  [
+    "L",
+    21.71,
+    5.9,
+  ],
+  [
+    "C",
+    21.71,
+    5.99,
+    21.71,
+    6,
+    21.650000000000002,
+    5.9,
+  ],
+  [
+    "C",
+    21.590000000000003,
+    5.800000000000001,
+    21.55,
+    5.61,
+    21.580000000000002,
+    5.46,
+  ],
+  [
+    "C",
+    21.610000000000003,
+    5.31,
+    21.76,
+    5.65,
+    21.720000000000002,
+    5.28,
+  ],
+  [
+    "C",
+    21.650000000000002,
+    5.28,
+    21.51,
+    5.08,
+    21.51,
+    5.28,
+  ],
+  [
+    "L",
+    21.560000000000002,
+    5.28,
+  ],
+  [
+    "L",
+    21.560000000000002,
+    5.73,
+  ],
+  [
+    "C",
+    21.560000000000002,
+    5.57,
+    21.490000000000002,
+    5.840000000000001,
+    21.44,
+    5.58,
+  ],
+  [
+    "C",
+    21.44,
+    5.53,
+    21.5,
+    5.53,
+    21.52,
+    5.49,
+  ],
+  [
+    "C",
+    21.54,
+    5.45,
+    21.41,
+    5.49,
+    21.37,
+    5.42,
+  ],
+  [
+    "L",
+    21.43,
+    5.51,
+  ],
+  [
+    "C",
+    21.41364349396296,
+    5.60927934079435,
+    21.355351504565153,
+    5.69671732489106,
+    21.27,
+    5.75,
+  ],
+  [
+    "L",
+    21.21,
+    5.75,
+  ],
+  [
+    "C",
+    21.21,
+    5.65,
+    21.1,
+    5.64,
+    21.11,
+    5.46,
+  ],
+  [
+    "C",
+    21.119999999999997,
+    5.28,
+    21.18,
+    5.53,
+    21.16,
+    5.46,
+  ],
+  [
+    "C",
+    21.16,
+    5.22,
+    21.1,
+    5.46,
+    21.05,
+    5.25,
+  ],
+  [
+    "C",
+    21.05,
+    5.4,
+    21,
+    5.49,
+    21.05,
+    5.66,
+  ],
+  [
+    "C",
+    21,
+    5.5600000000000005,
+    20.98,
+    5.8100000000000005,
+    20.91,
+    5.66,
+  ],
+  [
+    "C",
+    20.91756710278662,
+    5.699642118471354,
+    20.91756710278662,
+    5.740357881528646,
+    20.91,
+    5.78,
+  ],
+  [
+    "C",
+    20.91,
+    5.78,
+    20.86,
+    5.78,
+    20.84,
+    5.84,
+  ],
+  [
+    "L",
+    20.84,
+    5.84,
+  ],
+  [
+    "C",
+    20.84,
+    5.84,
+    20.84,
+    5.84,
+    20.84,
+    5.84,
+  ],
+  [
+    "C",
+    20.84,
+    5.84,
+    20.84,
+    5.63,
+    20.9,
+    5.49,
+  ],
+  [
+    "L",
+    20.9,
+    5.49,
+  ],
+  [
+    "C",
+    20.9,
+    5.49,
+    20.959999999999997,
+    5.49,
+    20.9,
+    5.49,
+  ],
+  [
+    "L",
+    20.9,
+    5.390000000000001,
+  ],
+  [
+    "C",
+    20.9,
+    5.120000000000001,
+    20.97,
+    4.8500000000000005,
+    20.99,
+    4.73,
+  ],
+  [
+    "L",
+    20.99,
+    4.87,
+  ],
+  [
+    "C",
+    20.99,
+    4.53,
+    21.119999999999997,
+    4.87,
+    21.13,
+    4.6,
+  ],
+  [
+    "C",
+    21.13,
+    4.6,
+    21.13,
+    4.67,
+    21.13,
+    4.68,
+  ],
+  [
+    "C",
+    21.13,
+    4.6899999999999995,
+    21.13,
+    4.239999999999999,
+    21.27,
+    4.449999999999999,
+  ],
+  [
+    "L",
+    21.27,
+    4.609999999999999,
+  ],
+  [
+    "C",
+    21.284655737743563,
+    4.503836748916477,
+    21.284655737743563,
+    4.396163251083522,
+    21.27,
+    4.289999999999999,
+  ],
+  [
+    "C",
+    21.27,
+    4.349999999999999,
+    21.27,
+    4.419999999999999,
+    21.169999999999998,
+    4.389999999999999,
+  ],
+  [
+    "C",
+    21.16217733233167,
+    4.313532879407623,
+    21.16217733233167,
+    4.2364671205923745,
+    21.169999999999998,
+    4.159999999999998,
+  ],
+  [
+    "L",
+    21.169999999999998,
+    4.159999999999998,
+  ],
+  [
+    "L",
+    21.169999999999998,
+    4.159999999999998,
+  ],
+  [
+    "L",
+    21.169999999999998,
+    4.159999999999998,
+  ],
+  [
+    "C",
+    21.164440069923444,
+    4.1403864102807,
+    21.164440069923444,
+    4.119613589719297,
+    21.169999999999998,
+    4.099999999999999,
+  ],
+]
+`;

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

@@ -1,8 +1,19 @@
-import { getPathSegmentsInfo } from '.';
+import { getPathSegmentsInfo, parsePath, makePathSimpler } from '.';
 
 describe('Path Utils', () => {
+  describe('makePathSimpler', () => {
+    test('can parse paths that return NaN segments', () => {
+      expect(
+        makePathSimpler(
+          parsePath(
+            'M22,6.58a1.21,1.21,0,0,1-.38-.12c0-.2.12-.2.09-.5l0-.06c0,.09,0,.1-.06,0s-.1-.29-.07-.44.18.19.14-.18c-.07,0-.21-.2-.21,0h.05v.45c0-.16-.07.11-.12-.15,0-.05.06-.05.08-.09s-.11,0-.15-.07l.06.09a.35.35,0,0,1-.16.24h-.06c0-.1-.11-.11-.1-.29s.07.07.05,0c0-.24-.06,0-.11-.21,0,.15-.05.24,0,.41-.05-.1-.07.15-.14,0a.32.32,0,0,1,0,.12s-.05,0-.07.06l0,0s0,0,0,0,0-.21.06-.35h0s.06,0,0,0l0-.1c0-.27.07-.54.09-.66v.14c0-.34.13,0,.14-.27,0,0,0,.07,0,.08s0-.44.14-.23l0,.16a1.17,1.17,0,0,0,0-.32c0,.06,0,.13-.1.1a1.13,1.13,0,0,1,0-.23l0,0v0l0,0a.11.11,0,0,0,0,0,.11.11,0,0,1,0-.06'
+          )
+        )
+      ).toMatchSnapshot();
+    });
+  });
   describe('getPathSegmentsInfo', () => {
-    it('operates as expected', () => {
+    test('operates as expected', () => {
       const data = getPathSegmentsInfo([
         ['M', 50, 50],
         ['Q', 50, 50, 75, 75],

package/src/util/path/index.ts

@@ -10,7 +10,6 @@ import type {
   TCurveInfo,
   TComplexPathData,
   TParsedAbsoluteCubicCurveCommand,
-  TParsedCubicCurveCommand,
   TPathSegmentInfo,
   TPointAngle,
   TSimpleParsedCommand,
@@ -60,7 +59,7 @@ const segmentToBezier = (
   mT: number,
   fromX: number,
   fromY: number
-): TParsedCubicCurveCommand => {
+): TParsedAbsoluteCubicCurveCommand => {
   const costh1 = cos(theta1),
     sinth1 = sin(theta1),
     costh2 = cos(theta2),
@@ -145,7 +144,7 @@ const arcToSegments = (
 
   // Convert into cubic bezier segments <= 90deg
   const segments = Math.ceil(Math.abs((dtheta / PI) * 2)),
-    result = new Array(segments),
+    result = [],
     mDelta = dtheta / segments,
     mT =
       ((8 / 3) * Math.sin(mDelta / 4) * Math.sin(mDelta / 4)) /
@@ -842,7 +841,6 @@ const rePathCmd = new RegExp(rePathCommand, 'i');
  *   ['Q', 3, 5, 2, 1, 4, 0],
  *   ['Q', 9, 12, 2, 1, 4, 0],
  * ];
- *
  */
 export const parsePath = (pathString: string): TComplexPathData => {
   // clean the string

package/src/util/path/typedefs.ts

@@ -294,6 +294,8 @@ export type TSimpleParsedCommand =
   | TParsedAbsoluteCubicCurveCommand
   | TParsedAbsoluteQuadraticCurveCommand;
 
+export type TSimpleParseCommandType = 'L' | 'M' | 'C' | 'Q' | 'Z';
+
 /**
  * A series of simple paths
  */

package/.gitmodules

@@ -1,3 +0,0 @@
-[submodule "website"]
-	path = website
-	url = https://github.com/fabricjs/fabricjs.github.io