fabric 7.0.0 → 7.2.0

package/src/shapes/Text/TextSVGExportMixin.ts

@@ -77,12 +77,12 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     return [
       textBgRects.join(''),
       '\t\t<text xml:space="preserve" ',
-      `font-family="${this.fontFamily.replace(dblQuoteRegex, "'")}" `,
-      `font-size="${this.fontSize}" `,
-      this.fontStyle ? `font-style="${this.fontStyle}" ` : '',
-      this.fontWeight ? `font-weight="${this.fontWeight}" ` : '',
+      `font-family="${escapeXml(this.fontFamily.replace(dblQuoteRegex, "'"))}" `,
+      `font-size="${escapeXml(this.fontSize)}" `,
+      this.fontStyle ? `font-style="${escapeXml(this.fontStyle)}" ` : '',
+      this.fontWeight ? `font-weight="${escapeXml(this.fontWeight)}" ` : '',
       textDecoration ? `text-decoration="${textDecoration}" ` : '',
-      this.direction === 'rtl' ? `direction="${this.direction}" ` : '',
+      this.direction === 'rtl' ? `direction="rtl" ` : '',
       'style="',
       this.getSvgStyles(noShadow),
       '"',
@@ -112,7 +112,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     // bounding-box background
     this.backgroundColor &&
       textBgRects.push(
-        ...createSVGInlineRect(
+        createSVGInlineRect(
           this.backgroundColor,
           -this.width / 2,
           -this.height / 2,
@@ -270,7 +270,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
       if (currentColor !== lastColor) {
         lastColor &&
           textBgRects.push(
-            ...createSVGInlineRect(
+            createSVGInlineRect(
               lastColor,
               leftOffset + boxStart,
               textTopOffset,
@@ -287,7 +287,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     }
     currentColor &&
       textBgRects.push(
-        ...createSVGInlineRect(
+        createSVGInlineRect(
           lastColor,
           leftOffset + boxStart,
           textTopOffset,
@@ -325,7 +325,6 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
       fontSize,
       fontStyle,
       fontWeight,
-      deltaY,
       textDecorationThickness,
       linethrough,
       overline,
@@ -340,22 +339,21 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     const thickness = textDecorationThickness || this.textDecorationThickness;
     return [
       stroke ? colorPropToSVG(STROKE, stroke) : '',
-      strokeWidth ? `stroke-width: ${strokeWidth}; ` : '',
+      strokeWidth ? `stroke-width: ${escapeXml(strokeWidth)}; ` : '',
       fontFamily
         ? `font-family: ${
             !fontFamily.includes("'") && !fontFamily.includes('"')
-              ? `'${fontFamily}'`
-              : fontFamily
+              ? `'${escapeXml(fontFamily)}'`
+              : escapeXml(fontFamily)
           }; `
         : '',
-      fontSize ? `font-size: ${fontSize}px; ` : '',
-      fontStyle ? `font-style: ${fontStyle}; ` : '',
-      fontWeight ? `font-weight: ${fontWeight}; ` : '',
+      fontSize ? `font-size: ${escapeXml(fontSize)}px; ` : '',
+      fontStyle ? `font-style: ${escapeXml(fontStyle)}; ` : '',
+      fontWeight ? `font-weight: ${escapeXml(fontWeight)}; ` : '',
       textDecoration
         ? `text-decoration: ${textDecoration}; text-decoration-thickness: ${toFixed((thickness * this.getObjectScaling().y) / 10, config.NUM_FRACTION_DIGITS)}%; `
         : '',
       fill ? colorPropToSVG(FILL, fill) : '',
-      deltaY ? `baseline-shift: ${-deltaY}; ` : '',
       useWhiteSpace ? 'white-space: pre; ' : '',
     ].join('');
   }

package/src/shapes/Text/__snapshots__/Text.spec.ts.snap

@@ -196,7 +196,7 @@ exports[`FabricText > toObject 1`] = `
   "type": "Text",
   "underline": false,
   "visible": true,
-  "width": 60,
+  "width": 59.98,
 }
 `;
 

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

@@ -23,7 +23,7 @@ exports[`TextSvgExport > toSVG > toSVG justified 1`] = `
 
 exports[`TextSvgExport > toSVG > toSVG with deltaY 1`] = `
 "<g transform="matrix(1 0 0 1 17 23)" style=""  >
-		<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; text-decoration-thickness: 7%; white-space: pre;" ><tspan x="-16" y="13" >x</tspan><tspan x="4" y="13"  dy="-14" style="font-size: 24px; baseline-shift: 14; ">x</tspan></text>
+		<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; text-decoration-thickness: 7%; white-space: pre;" ><tspan x="-16" y="13" >x</tspan><tspan x="4" y="13"  dy="-14" style="font-size: 24px; ">x</tspan></text>
 </g>
 "
 `;

package/src/shapes/Textbox.spec.ts

@@ -6,8 +6,8 @@ import { Canvas } from '../canvas/Canvas';
 import { stylesFromArray } from '../util';
 import { FabricText } from './Text/Text';
 import { IText } from './IText/IText';
-import type { TPointerEvent } from '../EventTypeDefs';
 import { Point } from '../Point';
+import { createPointerEvent } from '../../test/utils';
 
 describe('Textbox', () => {
   let canvas: Canvas;
@@ -564,12 +564,12 @@ describe('Textbox', () => {
     canvas.add(text);
     canvas.setActiveObject(text);
 
-    const eventStub = {
+    const eventStub = createPointerEvent({
       clientX: text.width,
       clientY: text.oCoords.mr.corner.tl.y + 1,
       type: 'mousedown',
       target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent & { clientX: number; clientY: number };
+    });
 
     const originalWidth = text.width;
 
@@ -599,12 +599,12 @@ describe('Textbox', () => {
     canvas.add(text);
     canvas.setActiveObject(text);
 
-    const eventStub = {
+    const eventStub = createPointerEvent({
       clientX: text.left - text.width / 2,
       clientY: text.oCoords.ml.corner.tl.y + 2,
       type: 'mousedown',
       target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent & { clientX: number; clientY: number };
+    });
 
     const originalWidth = text.width;
 

package/src/shapes/Textbox.ts

@@ -40,7 +40,8 @@ interface UniqueTextboxProps {
 }
 
 export interface SerializedTextboxProps
-  extends SerializedITextProps,
+  extends
+    SerializedITextProps,
     Pick<UniqueTextboxProps, 'minWidth' | 'splitByGrapheme'> {}
 
 export interface TextboxProps extends ITextProps, UniqueTextboxProps {}
@@ -52,10 +53,10 @@ export interface TextboxProps extends ITextProps, UniqueTextboxProps {}
  * wrapping of lines.
  */
 export class Textbox<
-    Props extends TOptions<TextboxProps> = Partial<TextboxProps>,
-    SProps extends SerializedTextboxProps = SerializedTextboxProps,
-    EventSpec extends ITextEvents = ITextEvents,
-  >
+  Props extends TOptions<TextboxProps> = Partial<TextboxProps>,
+  SProps extends SerializedTextboxProps = SerializedTextboxProps,
+  EventSpec extends ITextEvents = ITextEvents,
+>
   extends IText<Props, SProps, EventSpec>
   implements UniqueTextboxProps
 {

package/src/shapes/Triangle.ts

@@ -10,10 +10,10 @@ export const triangleDefaultValues: Partial<TClassProperties<Triangle>> = {
 };
 
 export class Triangle<
-    Props extends TOptions<FabricObjectProps> = Partial<FabricObjectProps>,
-    SProps extends SerializedObjectProps = SerializedObjectProps,
-    EventSpec extends ObjectEvents = ObjectEvents,
-  >
+  Props extends TOptions<FabricObjectProps> = Partial<FabricObjectProps>,
+  SProps extends SerializedObjectProps = SerializedObjectProps,
+  EventSpec extends ObjectEvents = ObjectEvents,
+>
   extends FabricObject<Props, SProps, EventSpec>
   implements FabricObjectProps
 {

package/src/shapes/__snapshots__/Image.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`FabricImage > Svg export > It exports an svg with styles for an image with stroke 1`] = `
 "<g transform="matrix(1 0 0 1 83.5 83.5)"  >
-<filter id="SVGID_0" y="-45.33%" height="190.66%" x="-36%" width="172%" >
+<filter id="SVGID" y="-45.33%" height="190.66%" x="-36%" width="172%" >
 	<feGaussianBlur in="SourceAlpha" stdDeviation="12"></feGaussianBlur>
 	<feOffset dx="0" dy="14" result="oBlur" ></feOffset>
 	<feFlood flood-color="rgb(0,0,0)" flood-opacity="0.5"/>
@@ -12,11 +12,11 @@ exports[`FabricImage > Svg export > It exports an svg with styles for an image w
 		<feMergeNode in="SourceGraphic"></feMergeNode>
 	</feMerge>
 </filter>
-<clipPath id="imageCrop_2">
+<clipPath id="SVGID">
 	<rect x="-75" y="-75" width="150" height="150" />
 </clipPath>
-	<image style="stroke: rgb(255,0,0); stroke-width: 11; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;filter: url(#SVGID_0);"  xlink:href="" x="-85" y="-85" width="200" height="200" clip-path="url(#imageCrop_2)" ></image>
-	<rect x="-75" y="-75" width="150" height="150" style="stroke: rgb(255,0,0); stroke-width: 11; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;filter: url(#SVGID_0);" />
+	<image style="stroke: rgb(255,0,0); stroke-width: 11; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;filter: url(#SVGID);"  xlink:href="assets/xlink:href=" x="-85" y="-85" width="200" height="200" clip-path="url(#SVGID)" ></image>
+	<rect x="-75" y="-75" width="150" height="150" style="stroke: rgb(255,0,0); stroke-width: 11; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;filter: url(#SVGID);" />
 </g>
 "
 `;

package/src/shapes/__snapshots__/Textbox.spec.ts.snap

@@ -15,7 +15,7 @@ exports[`Textbox > fromObject 1`] = `
   "fontStyle": "normal",
   "fontWeight": "normal",
   "globalCompositeOperation": "source-over",
-  "height": 254.928,
+  "height": 254.93,
   "left": 0,
   "lineHeight": 1.16,
   "linethrough": false,
@@ -54,13 +54,13 @@ fox",
   "type": "Textbox",
   "underline": false,
   "visible": true,
-  "width": 102,
+  "width": 102.21,
 }
 `;
 
 exports[`Textbox > fromObject 2`] = `
 {
-  "height": 254.928,
+  "height": 254.93,
   "left": 0,
   "styles": [],
   "text": "The quick 
@@ -68,7 +68,7 @@ brown
 fox",
   "top": 0,
   "type": "Textbox",
-  "width": 102,
+  "width": 102.21,
 }
 `;
 
@@ -106,7 +106,7 @@ exports[`Textbox > toObject with styles 1`] = `
   "fontStyle": "normal",
   "fontWeight": "normal",
   "globalCompositeOperation": "source-over",
-  "height": 202.496,
+  "height": 202.5,
   "left": 0,
   "lineHeight": 1.16,
   "linethrough": false,

package/src/util/lang_string.ts

@@ -18,8 +18,9 @@ export const capitalize = (string: string, firstLetterOnly = false): string =>
  * @param {String} string String to escape
  * @return {String} Escaped version of a string
  */
-export const escapeXml = (string: string): string =>
-  string
+export const escapeXml = (stringOrNumber: string | number): string =>
+  stringOrNumber
+    .toString()
     .replace(/&/g, '&')
     .replace(/"/g, '"')
     .replace(/'/g, ''')

package/src/util/misc/svgParsing.ts

@@ -2,6 +2,7 @@ import { Color } from '../../color/Color';
 import { config } from '../../config';
 import { DEFAULT_SVG_FONT_SIZE, FILL, NONE } from '../../constants';
 import type { TBBox, SVGElementName, SupportedSVGUnit } from '../../typedefs';
+import { escapeXml } from '../lang_string';
 import { toFixed } from './toFixed';
 
 /**
@@ -133,7 +134,7 @@ export const colorPropToSVG = (
   if (!value) {
     colorValue = 'none';
   } else if (value.toLive) {
-    colorValue = `url(#SVGID_${value.id})`;
+    colorValue = `url(#SVGID_${escapeXml(value.id)})`;
   } else {
     const color = new Color(value),
       opacity = color.getAlpha();

package/tsconfig.spec.json

@@ -12,6 +12,7 @@
   },
   "include": [
     "src/**/*",
+    "e2e/**/*",
     "extensions/**/*",
     "vitest.d.ts",
     "vitest.env.d.ts",

package/vitest.config.ts

@@ -9,6 +9,10 @@ if (!fixturesUrl.endsWith('/')) {
   fixturesUrl += '/';
 }
 
+// Node 20 requires vmThreads, newer versions can use threads
+const nodeMajor = parseInt(process.version.slice(1).split('.')[0]);
+const pool = nodeMajor <= 20 ? 'vmThreads' : 'threads';
+
 export default defineConfig({
   resolve: {
     alias: {
@@ -16,7 +20,7 @@ export default defineConfig({
     },
   },
   test: {
-    pool: 'vmThreads',
+    pool,
     clearMocks: true,
     mockReset: true,
     snapshotSerializers: [
@@ -44,7 +48,12 @@ export default defineConfig({
             provider: playwright(),
             enabled: true,
             headless: true,
-            instances: [{ browser: 'chromium' }],
+            instances: [
+              {
+                browser: 'chromium',
+                isolate: true,
+              },
+            ],
           },
           name: 'unit-chromium',
         },
@@ -63,6 +72,7 @@ export default defineConfig({
             instances: [
               {
                 browser: 'firefox',
+                isolate: true,
               },
             ],
           },

package/vitest.extend.ts

@@ -73,9 +73,13 @@ chai.util.addMethod(
     delete snap.version;
 
     const value = cloneDeepWith(snap, (v, k, obj, stack) => {
-      const c = customiser?.(v, k, obj, stack);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const c = (customiser as any)?.(v, k, obj, stack);
       if (c !== undefined) return c;
-      if (k === 'width') return Math.round(v as number);
+      if ((k === 'width' || k === 'height') && typeof v === 'number')
+        return Math.round(v * 100) / 100;
+      // Normalize uid-based ids which vary by test execution order
+      if (k === 'id' && typeof v === 'number') return 0;
     });
 
     chai.util.flag(this, 'object', value);