fabric-vectr 6.7.11 → 6.7.13

package/src/Pattern/Pattern.spec.ts

@@ -0,0 +1,63 @@
+import * as objectEnlive from '../util/misc/objectEnlive';
+import { Pattern } from './Pattern';
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+describe('Pattern', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('enlives from serialized object', async () => {
+    const pattern = await Pattern.fromObject({
+      type: 'pattern',
+      source: '',
+      repeat: 'repeat-x',
+      offsetX: 12,
+    });
+
+    expect(pattern).toBeInstanceOf(Pattern);
+    expect(pattern.repeat).toBe('repeat-x');
+    expect(pattern.offsetX).toBe(12);
+    expect(pattern.sourceToString()).toBe('');
+  });
+
+  it('falls back to an empty source when the pattern image fails to load', async () => {
+    const loadImageSpy = vi.spyOn(objectEnlive, 'loadImage');
+    const emptyImage = new Image();
+    loadImageSpy.mockResolvedValueOnce(emptyImage);
+
+    const pattern = await Pattern.fromObject({
+      type: 'pattern',
+      source: 'bad-url',
+      repeat: 'repeat',
+    });
+
+    expect(pattern).toBeInstanceOf(Pattern);
+    expect(pattern.source).toBe(emptyImage);
+    expect(loadImageSpy).toHaveBeenCalledWith('bad-url', {
+      crossOrigin: undefined,
+      fallbackToEmptyImage: true,
+    });
+  });
+
+  it('preserves abort errors', async () => {
+    const controller = new AbortController();
+    const loadImageSpy = vi.spyOn(objectEnlive, 'loadImage');
+    const abortError = new Error('aborted');
+
+    controller.abort();
+    loadImageSpy.mockRejectedValueOnce(abortError);
+
+    await expect(
+      Pattern.fromObject(
+        {
+          type: 'pattern',
+          source: 'bad-url',
+          repeat: 'repeat',
+        },
+        { signal: controller.signal },
+      ),
+    ).rejects.toBe(abortError);
+  });
+});

package/src/Pattern/Pattern.ts

@@ -208,9 +208,11 @@ export class Pattern {
     }: SerializedPatternOptions,
     options?: Abortable,
   ): Promise<Pattern> {
+    const { crossOrigin } = otherOptions;
     const img = await loadImage(source, {
       ...options,
-      crossOrigin: otherOptions.crossOrigin,
+      crossOrigin,
+      fallbackToEmptyImage: true,
     });
     return new this({
       ...otherOptions,

package/src/shapes/Group.spec.ts

@@ -11,6 +11,9 @@ import { Rect } from './Rect';
 import { FabricObject } from './Object/FabricObject';
 import { FabricImage } from './Image';
 import { SignalAbortedError } from '../util/internals/console';
+import { calcPlaneChangeMatrix } from '../util/misc/planeChange';
+import { matrixToSVG } from '../util/misc/svgExport';
+import { ActiveSelection } from './ActiveSelection';
 
 import { describe, expect, it, test, vi } from 'vitest';
 
@@ -82,6 +85,43 @@ describe('Group', () => {
     });
   });
 
+  it('导出 SVG 时会补上组内多选对象的活动选择平面变换', () => {
+    const object = new Rect({
+      width: 40,
+      height: 20,
+      left: 120,
+      top: 80,
+      angle: 15,
+      strokeWidth: 0,
+    });
+    const sibling = new Rect({
+      width: 10,
+      height: 10,
+      left: 10,
+      top: 10,
+      strokeWidth: 0,
+    });
+    const canvas = new Canvas();
+    const group = new Group([object, sibling], {
+      left: 300,
+      top: 200,
+      angle: 25,
+      strokeWidth: 0,
+    });
+    canvas.add(group);
+    const activeSelection = new ActiveSelection([object], { canvas });
+
+    const planeChangeMatrix = calcPlaneChangeMatrix(
+      activeSelection.calcTransformMatrix(),
+      group.calcTransformMatrix(),
+    );
+    const svg = group.toSVG();
+
+    expect(object.group).toBe(activeSelection);
+    expect(object.parent).toBe(group);
+    expect(svg).toContain(`<g transform="${matrixToSVG(planeChangeMatrix)}">`);
+  });
+
   describe('With fit-content layout manager', () => {
     test('will serialize correctly without default values', async () => {
       const { group } = makeGenericGroup({

package/src/shapes/Group.ts

@@ -14,7 +14,9 @@ import {
   enlivenObjectEnlivables,
   enlivenObjects,
 } from '../util/misc/objectEnlive';
+import { calcPlaneChangeMatrix } from '../util/misc/planeChange';
 import { applyTransformToObject } from '../util/misc/objectTransforms';
+import { matrixToSVG } from '../util/misc/svgExport';
 import { FabricObject } from './Object/FabricObject';
 import { Rect } from './Rect';
 import { classRegistry } from '../ClassRegistry';
@@ -640,9 +642,26 @@ export class Group
   _toSVG(reviver?: TSVGReviver) {
     const svgString = ['<g ', 'COMMON_PARTS', ' >\n'];
     const bg = this._createSVGBgRect(reviver);
+    const groupTransformMatrix = this.calcTransformMatrix();
     bg && svgString.push('\t\t', bg);
     for (let i = 0; i < this._objects.length; i++) {
-      svgString.push('\t\t', this._objects[i].toSVG(reviver));
+      const object = this._objects[i];
+      if (object.group && object.group !== this) {
+        // 组内对象被 ActiveSelection 临时接管时，需要补回当前组坐标系的变换。
+        const planeChangeMatrix = calcPlaneChangeMatrix(
+          object.group.calcTransformMatrix(),
+          groupTransformMatrix,
+        );
+        svgString.push(
+          '\t\t<g transform="',
+          matrixToSVG(planeChangeMatrix),
+          '">\n\t\t',
+          object.toSVG(reviver),
+          '\t\t</g>\n',
+        );
+        continue;
+      }
+      svgString.push('\t\t', object.toSVG(reviver));
     }
     svgString.push('</g>\n');
     return svgString;

package/src/shapes/Image.spec.ts

@@ -2,11 +2,14 @@ import { FabricImage } from './Image';
 import { Shadow } from '../Shadow';
 import { Brightness } from '../filters/Brightness';
 import { loadSVGFromString } from '../parser/loadSVGFromString';
+import * as objectEnlive from '../util/misc/objectEnlive';
 
 const mockImage = new Image(100, 100);
 
-vi.mock('../util/misc/objectEnlive', () => {
-  const all = vi.importActual('../util/misc/objectEnlive');
+vi.mock('../util/misc/objectEnlive', async () => {
+  const all = await vi.importActual<typeof import('../util/misc/objectEnlive')>(
+    '../util/misc/objectEnlive',
+  );
   return {
     ...all,
     loadImage: vi.fn(async (src) => {
@@ -28,6 +31,22 @@ vi.mock('../filters/FilterBackend', () => ({
 }));
 
 describe('FabricImage', () => {
+  test('fromObject requests empty-image fallback for deserialization', async () => {
+    const image = await FabricImage.fromObject({
+      type: 'image',
+      src: 'broken-image-url',
+      crossOrigin: null,
+      cropX: 0,
+      cropY: 0,
+    } as any);
+
+    expect(image).toBeInstanceOf(FabricImage);
+    expect(objectEnlive.loadImage).toHaveBeenCalledWith('broken-image-url', {
+      crossOrigin: null,
+      fallbackToEmptyImage: true,
+    });
+  });
+
   describe('Svg export', () => {
     test('It exports an svg with styles for an image with stroke', () => {
       const imgElement = new Image(200, 200);

package/src/shapes/Image.ts

@@ -799,21 +799,33 @@ export class FabricImage<
     options?: Abortable,
   ) {
     return Promise.all([
-      loadImage(src!, { ...options, crossOrigin }),
+      loadImage(src!, {
+        ...options,
+        crossOrigin,
+        fallbackToEmptyImage: true,
+      }),
       f && enlivenObjects<BaseFilter<string>>(f, options),
       // TODO: redundant - handled by enlivenObjectEnlivables
-      rf && enlivenObjects<BaseFilter<'Resize'>>([rf], options),
+      rf && enlivenObjects<Resize>([rf], options),
       enlivenObjectEnlivables(object, options),
-    ]).then(([el, filters = [], [resizeFilter] = [], hydratedProps = {}]) => {
-      return new this(el, {
-        ...object,
-        // TODO: this creates a difference between image creation and restoring from JSON
-        src,
-        filters,
-        resizeFilter,
-        ...hydratedProps,
-      });
-    });
+    ]).then(
+      ([el, filters = [], resizeFilters = [], hydratedProps = {}]: [
+        HTMLImageElement,
+        BaseFilter<string, Record<string, any>>[]?,
+        Resize[]?,
+        Record<string, any>?,
+      ]) => {
+        const [resizeFilter] = resizeFilters;
+        return new this(el, {
+          ...object,
+          // TODO: this creates a difference between image creation and restoring from JSON
+          src,
+          filters,
+          resizeFilter,
+          ...hydratedProps,
+        });
+      },
+    );
   }
 
   /**

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

@@ -1,9 +1,11 @@
-import { enlivenObjects } from './objectEnlive';
+import * as dom from './dom';
+import { enlivenObjects, loadImage } from './objectEnlive';
 import { Rect, type RectProps } from '../../shapes/Rect';
 import { Shadow } from '../../Shadow';
 import { classRegistry } from '../../ClassRegistry';
+import { FabricError } from '../internals/console';
 
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 const mockedRectWithCustomProperty = {
   type: 'rect',
@@ -68,3 +70,48 @@ describe('enlivenObjects', () => {
     expect(rect.custom3).toBeInstanceOf(Test);
   });
 });
+
+const createMockImage = () => {
+  let currentSrc = '';
+  return {
+    onload: null as null | (() => void),
+    onerror: null as null | (() => void),
+    crossOrigin: null as string | null,
+    complete: false,
+    naturalWidth: 0,
+    naturalHeight: 0,
+    get src() {
+      return currentSrc;
+    },
+    set src(value: string) {
+      currentSrc = value;
+      if (value === 'bad-url') {
+        queueMicrotask(() => this.onerror?.());
+      }
+    },
+  } as unknown as HTMLImageElement;
+};
+
+describe('loadImage', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('rejects loading errors by default', async () => {
+    vi.spyOn(dom, 'createImage').mockReturnValue(createMockImage());
+
+    await expect(loadImage('bad-url')).rejects.toEqual(
+      new FabricError('Error loading bad-url'),
+    );
+  });
+
+  it('falls back to an empty image when requested', async () => {
+    const mockImage = createMockImage();
+    vi.spyOn(dom, 'createImage').mockReturnValue(mockImage);
+
+    const image = await loadImage('bad-url', { fallbackToEmptyImage: true });
+
+    expect(image).toBe(mockImage);
+    expect(image.src).toBe('');
+  });
+});

package/src/util/misc/objectEnlive.ts

@@ -10,7 +10,7 @@ import { createImage } from './dom';
 import { classRegistry } from '../../ClassRegistry';
 import type { BaseFilter } from '../../filters/BaseFilter';
 import type { FabricObject as BaseFabricObject } from '../../shapes/Object/Object';
-import { FabricError, SignalAbortedError } from '../internals/console';
+import { FabricError, SignalAbortedError, log } from '../internals/console';
 import type { Shadow } from '../../Shadow';
 
 export type LoadImageOptions = Abortable & {
@@ -18,6 +18,12 @@ export type LoadImageOptions = Abortable & {
    * cors value for the image loading, default to anonymous
    */
   crossOrigin?: TCrossOrigin;
+
+  /**
+   * Resolve with an empty image instead of rejecting when the image fails to load.
+   * Useful for deserialization flows where one bad asset should not fail the entire document.
+   */
+  fallbackToEmptyImage?: boolean;
 };
 
 /**
@@ -28,7 +34,11 @@ export type LoadImageOptions = Abortable & {
  */
 export const loadImage = (
   url: string,
-  { signal, crossOrigin = null }: LoadImageOptions = {},
+  {
+    signal,
+    crossOrigin = null,
+    fallbackToEmptyImage = false,
+  }: LoadImageOptions = {},
 ) =>
   new Promise<HTMLImageElement>(function (resolve, reject) {
     if (signal && signal.aborted) {
@@ -43,9 +53,12 @@ export const loadImage = (
       };
       signal.addEventListener('abort', abort, { once: true });
     }
-    const done = function () {
+    const cleanup = function () {
       img.onload = img.onerror = null;
       abort && signal?.removeEventListener('abort', abort);
+    };
+    const done = function () {
+      cleanup();
       resolve(img);
     };
     if (!url) {
@@ -54,8 +67,19 @@ export const loadImage = (
     }
     img.onload = done;
     img.onerror = function () {
-      abort && signal?.removeEventListener('abort', abort);
-      reject(new FabricError(`Error loading ${img.src}`));
+      const failedSrc = img.src;
+      cleanup();
+      if (fallbackToEmptyImage) {
+        log(
+          'warn',
+          'Image failed to load, continuing with an empty image source',
+          failedSrc,
+        );
+        img.src = '';
+        resolve(img);
+        return;
+      }
+      reject(new FabricError(`Error loading ${failedSrc}`));
     };
     crossOrigin && (img.crossOrigin = crossOrigin);
     img.src = url;