fabric-vectr 6.7.12 → 6.7.14

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/canvas/StaticCanvas.spec.ts

@@ -1,4 +1,7 @@
 import { StaticCanvas } from './StaticCanvas';
+import { Group } from '../shapes/Group';
+import { Path } from '../shapes/Path';
+import { FabricText } from '../shapes/Text/Text';
 
 import { it, expect, describe } from 'vitest';
 
@@ -24,4 +27,24 @@ describe('StaticCanvas', () => {
      */
     expect(dataURL).toMatch(/^data:image\/(webp|png)/);
   });
+
+  it('exports text on path inside group to svg defs', () => {
+    const canvas = new StaticCanvas(undefined, { width: 300, height: 300 });
+    const textPath = new FabricText('Text On Path', {
+      id: 'group-text-path',
+      path: new Path('M 0 0 L 120 0'),
+      fontSize: 20,
+    });
+    const group = new Group([textPath], {
+      left: 40,
+      top: 60,
+    });
+
+    canvas.add(group);
+
+    const svg = canvas.toSVG();
+
+    expect(svg).toContain('<textPath href="#TEXTPATH_group-text-path" ');
+    expect(svg).toContain('id="TEXTPATH_group-text-path"');
+  });
 });

package/src/canvas/StaticCanvas.ts

@@ -1083,22 +1083,28 @@ export class StaticCanvas<
    */
   _createPathForText() {
     const pathMarkups: string[] = [];
-    let instance,
-      i,
-      len,
-      objects = this._objects;
-    for (i = 0, len = objects.length; i < len; i++) {
-      instance = objects[i];
+    const objects: FabricObject[] = [];
+
+    this._objects.forEach(function add(object) {
+      objects.push(object);
+      if (isCollection(object)) {
+        object._objects.forEach(add);
+      }
+    });
+
+    objects.forEach((instance) => {
       if (instance.excludeFromExport) {
-        continue;
+        return;
       }
 
       if (!isTextObject(instance) || !instance.path) {
-        continue;
+        return;
       }
-      let pathId = `TEXTPATH_${(instance as any).id}`;
-      let pathMarkup = instance.path._toSVG();
-      let index = pathMarkup.indexOf('COMMON_PARTS');
+
+      const pathId = `TEXTPATH_${(instance as any).id}`;
+      const pathMarkup = instance.path._toSVG();
+      const index = pathMarkup.indexOf('COMMON_PARTS');
+
       // 加上id, 和路径偏移
       pathMarkup[index] = [
         'id="' + pathId + '" ',
@@ -1109,7 +1115,8 @@ export class StaticCanvas<
           ')" ',
       ].join('');
       pathMarkups.push(pathMarkup.join(''));
-    }
+    });
+
     return pathMarkups.join('\n');
   }
 

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/shapes/Object/FabricObjectSVGExportMixin.ts

@@ -304,7 +304,12 @@ export class FabricObjectSVGExportMixin {
     ].join('');
 
     // James added shadow 放在上面
+    // 文本等调用方已经通过 withShadow 挂载 filter 时，避免再额外复制一份可见对象，
+    // 但仍然需要输出 filter 定义，否则普通 SVG 会丢失阴影。
     if (shadow) {
+      markup.push(shadow.toSVG(this));
+    }
+    if (shadow && !withShadow) {
       const styleInfoWithShadow = 'style="' + this.getSvgStyles(false) + '" ';
       const commonPiecesWithShadow = [
         styleInfoWithShadow,
@@ -317,7 +322,6 @@ export class FabricObjectSVGExportMixin {
       objectMarkupCopy[index] = commonPiecesWithShadow;
 
       markup.push(objectMarkupCopy.join(''));
-      markup.push(shadow.toSVG(this));
     }
     // objectMarkup中是导出主对象(如path)的svg，index下标是style，放在commonPieces
     objectMarkup[index] = commonPieces;

package/src/shapes/Text/TextSVGExportMixin.spec.ts

@@ -1,4 +1,5 @@
 import { FabricText } from './Text';
+import { Shadow } from '../../Shadow';
 
 import { describe, expect, it } from 'vitest';
 
@@ -28,4 +29,19 @@ describe('TextSvgExport', () => {
     );
     expect(svgStyles.includes('stroke="none"')).toBe(false);
   });
+
+  it('exports shadowed text without duplicating text markup', () => {
+    const myText = new FabricText('text', {
+      shadow: new Shadow({
+        color: 'rgba(0, 0, 0, 0.4)',
+        blur: 6,
+        offsetX: 4,
+        offsetY: 4,
+      }),
+    });
+    const svgString = myText.toSVG();
+    expect((svgString.match(/<text /g) || []).length).toBe(1);
+    expect(svgString.includes('filter: url(#SVGID_')).toBe(true);
+    expect(svgString.includes('<filter id="SVGID_')).toBe(true);
+  });
 });

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;