fabric 6.0.2 → 6.2.0

package/src/controls/pathControl.ts

@@ -0,0 +1,293 @@
+import { Point } from '../Point';
+import { Control } from './Control';
+import type { TMat2D } from '../typedefs';
+import type { Path } from '../shapes/Path';
+import { multiplyTransformMatrices } from '../util/misc/matrix';
+import type {
+  TModificationEvents,
+  TPointerEvent,
+  Transform,
+} from '../EventTypeDefs';
+import { sendPointToPlane } from '../util/misc/planeChange';
+import type { TSimpleParseCommandType } from '../util/path/typedefs';
+import type { ControlRenderingStyleOverride } from './controlRendering';
+import { fireEvent } from './fireEvent';
+import { commonEventInfo } from './util';
+
+const ACTION_NAME: TModificationEvents = 'modifyPath' as const;
+
+type TTransformAnchor = Transform;
+
+export type PathPointControlStyle = {
+  controlFill?: string;
+  controlStroke?: string;
+  connectionDashArray?: number[];
+};
+
+const calcPathPointPosition = (
+  pathObject: Path,
+  commandIndex: number,
+  pointIndex: number
+) => {
+  const { path, pathOffset } = pathObject;
+  const command = path[commandIndex];
+  return new Point(
+    (command[pointIndex] as number) - pathOffset.x,
+    (command[pointIndex + 1] as number) - pathOffset.y
+  ).transform(
+    multiplyTransformMatrices(
+      pathObject.getViewportTransform(),
+      pathObject.calcTransformMatrix()
+    )
+  );
+};
+
+const movePathPoint = (
+  pathObject: Path,
+  x: number,
+  y: number,
+  commandIndex: number,
+  pointIndex: number
+) => {
+  const { path, pathOffset } = pathObject;
+
+  const anchorCommand =
+    path[(commandIndex > 0 ? commandIndex : path.length) - 1];
+  const anchorPoint = new Point(
+    anchorCommand[pointIndex] as number,
+    anchorCommand[pointIndex + 1] as number
+  );
+
+  const anchorPointInParentPlane = anchorPoint
+    .subtract(pathOffset)
+    .transform(pathObject.calcOwnMatrix());
+
+  const mouseLocalPosition = sendPointToPlane(
+    new Point(x, y),
+    undefined,
+    pathObject.calcOwnMatrix()
+  );
+
+  path[commandIndex][pointIndex] = mouseLocalPosition.x + pathOffset.x;
+  path[commandIndex][pointIndex + 1] = mouseLocalPosition.y + pathOffset.y;
+  pathObject.setDimensions();
+
+  const newAnchorPointInParentPlane = anchorPoint
+    .subtract(pathObject.pathOffset)
+    .transform(pathObject.calcOwnMatrix());
+
+  const diff = newAnchorPointInParentPlane.subtract(anchorPointInParentPlane);
+  pathObject.left -= diff.x;
+  pathObject.top -= diff.y;
+  pathObject.set('dirty', true);
+  return true;
+};
+
+/**
+ * This function locates the controls.
+ * It'll be used both for drawing and for interaction.
+ */
+function pathPositionHandler(
+  this: PathPointControl,
+  dim: Point,
+  finalMatrix: TMat2D,
+  pathObject: Path
+) {
+  const { commandIndex, pointIndex } = this;
+  return calcPathPointPosition(pathObject, commandIndex, pointIndex);
+}
+
+/**
+ * This function defines what the control does.
+ * It'll be called on every mouse move after a control has been clicked and is being dragged.
+ * The function receives as argument the mouse event, the current transform object
+ * and the current position in canvas coordinate `transform.target` is a reference to the
+ * current object being transformed.
+ */
+function pathActionHandler(
+  this: PathPointControl,
+  eventData: TPointerEvent,
+  transform: TTransformAnchor,
+  x: number,
+  y: number
+) {
+  const { target } = transform;
+  const { commandIndex, pointIndex } = this;
+  const actionPerformed = movePathPoint(
+    target as Path,
+    x,
+    y,
+    commandIndex,
+    pointIndex
+  );
+  if (actionPerformed) {
+    fireEvent(this.actionName as TModificationEvents, {
+      ...commonEventInfo(eventData, transform, x, y),
+      commandIndex,
+      pointIndex,
+    });
+  }
+  return actionPerformed;
+}
+
+const indexFromPrevCommand = (previousCommandType: TSimpleParseCommandType) =>
+  previousCommandType === 'C' ? 5 : previousCommandType === 'Q' ? 3 : 1;
+
+class PathPointControl extends Control {
+  declare commandIndex: number;
+  declare pointIndex: number;
+  declare controlFill: string;
+  declare controlStroke: string;
+  constructor(options?: Partial<PathPointControl>) {
+    super(options);
+  }
+
+  render(
+    ctx: CanvasRenderingContext2D,
+    left: number,
+    top: number,
+    styleOverride: ControlRenderingStyleOverride | undefined,
+    fabricObject: Path
+  ) {
+    const overrides: ControlRenderingStyleOverride = {
+      ...styleOverride,
+      cornerColor: this.controlFill,
+      cornerStrokeColor: this.controlStroke,
+      transparentCorners: !this.controlFill,
+    };
+    super.render(ctx, left, top, overrides, fabricObject);
+  }
+}
+
+class PathControlPointControl extends PathPointControl {
+  declare connectionDashArray?: number[];
+  declare connectToCommandIndex: number;
+  declare connectToPointIndex: number;
+  constructor(options?: Partial<PathControlPointControl>) {
+    super(options);
+  }
+
+  render(
+    this: PathControlPointControl,
+    ctx: CanvasRenderingContext2D,
+    left: number,
+    top: number,
+    styleOverride: ControlRenderingStyleOverride | undefined,
+    fabricObject: Path
+  ) {
+    const { path } = fabricObject;
+    const {
+      commandIndex,
+      pointIndex,
+      connectToCommandIndex,
+      connectToPointIndex,
+    } = this;
+    ctx.save();
+    ctx.strokeStyle = this.controlStroke;
+    if (this.connectionDashArray) {
+      ctx.setLineDash(this.connectionDashArray);
+    }
+    const [commandType] = path[commandIndex];
+    const point = calcPathPointPosition(
+      fabricObject,
+      connectToCommandIndex,
+      connectToPointIndex
+    );
+
+    if (commandType === 'Q') {
+      // one control point connects to 2 points
+      const point2 = calcPathPointPosition(
+        fabricObject,
+        commandIndex,
+        pointIndex + 2
+      );
+      ctx.moveTo(point2.x, point2.y);
+      ctx.lineTo(left, top);
+    } else {
+      ctx.moveTo(left, top);
+    }
+    ctx.lineTo(point.x, point.y);
+    ctx.stroke();
+    ctx.restore();
+
+    super.render(ctx, left, top, styleOverride, fabricObject);
+  }
+}
+
+const createControl = (
+  commandIndexPos: number,
+  pointIndexPos: number,
+  isControlPoint: boolean,
+  options: Partial<Control> & {
+    controlPointStyle?: PathPointControlStyle;
+    pointStyle?: PathPointControlStyle;
+  },
+  connectToCommandIndex?: number,
+  connectToPointIndex?: number
+) =>
+  new (isControlPoint ? PathControlPointControl : PathPointControl)({
+    commandIndex: commandIndexPos,
+    pointIndex: pointIndexPos,
+    actionName: ACTION_NAME,
+    positionHandler: pathPositionHandler,
+    actionHandler: pathActionHandler,
+    connectToCommandIndex,
+    connectToPointIndex,
+    ...options,
+    ...(isControlPoint ? options.controlPointStyle : options.pointStyle),
+  } as Partial<PathControlPointControl>);
+
+export function createPathControls(
+  path: Path,
+  options: Partial<Control> & {
+    controlPointStyle?: PathPointControlStyle;
+    pointStyle?: PathPointControlStyle;
+  } = {}
+): Record<string, Control> {
+  const controls = {} as Record<string, Control>;
+  let previousCommandType: TSimpleParseCommandType = 'M';
+  path.path.forEach((command, commandIndex) => {
+    const commandType = command[0];
+
+    if (commandType !== 'Z') {
+      controls[`c_${commandIndex}_${commandType}`] = createControl(
+        commandIndex,
+        command.length - 2,
+        false,
+        options
+      );
+    }
+    switch (commandType) {
+      case 'C':
+        controls[`c_${commandIndex}_C_CP_1`] = createControl(
+          commandIndex,
+          1,
+          true,
+          options,
+          commandIndex - 1,
+          indexFromPrevCommand(previousCommandType)
+        );
+        controls[`c_${commandIndex}_C_CP_2`] = createControl(
+          commandIndex,
+          3,
+          true,
+          options,
+          commandIndex,
+          5
+        );
+        break;
+      case 'Q':
+        controls[`c_${commandIndex}_Q_CP_1`] = createControl(
+          commandIndex,
+          1,
+          true,
+          options,
+          commandIndex,
+          3
+        );
+        break;
+    }
+    previousCommandType = commandType;
+  });
+  return controls;
+}

package/src/controls/polyControl.ts

@@ -10,7 +10,7 @@ import type {
   TransformActionHandler,
 } from '../EventTypeDefs';
 import { wrapWithFireEvent } from './wrapWithFireEvent';
-import { sendPointToPlane } from '../util';
+import { sendPointToPlane } from '../util/misc/planeChange';
 import { MODIFY_POLY } from '../constants';
 
 const ACTION_NAME: TModificationEvents = MODIFY_POLY;

package/src/controls/wrapWithFireEvent.ts

@@ -8,17 +8,26 @@ import { commonEventInfo } from './util';
 
 /**
  * Wrap an action handler with firing an event if the action is performed
- * @param {Function} actionHandler the function to wrap
- * @return {Function} a function with an action handler signature
+ * @param {TModificationEvents} eventName the event we want to fire
+ * @param {TransformActionHandler<T>} actionHandler the function to wrap
+ * @param {object} extraEventInfo extra information to pas to the event handler
+ * @return {TransformActionHandler<T>} a function with an action handler signature
  */
-export const wrapWithFireEvent = <T extends Transform>(
+export const wrapWithFireEvent = <
+  T extends Transform,
+  P extends object = Record<string, never>
+>(
   eventName: TModificationEvents,
-  actionHandler: TransformActionHandler<T>
+  actionHandler: TransformActionHandler<T>,
+  extraEventInfo?: P
 ) => {
   return ((eventData, transform, x, y) => {
     const actionPerformed = actionHandler(eventData, transform, x, y);
     if (actionPerformed) {
-      fireEvent(eventName, commonEventInfo(eventData, transform, x, y));
+      fireEvent(eventName, {
+        ...commonEventInfo(eventData, transform, x, y),
+        ...extraEventInfo,
+      });
     }
     return actionPerformed;
   }) as TransformActionHandler<T>;

package/src/filters/BaseFilter.ts

@@ -387,8 +387,7 @@ export class BaseFilter<
     return {
       type: this.type,
       ...defaultKeys.reduce<OwnProps>((acc, key) => {
-        //@ts-expect-error TS doesn't get i want an object that looks like this
-        acc[key] = this[key as keyof this];
+        acc[key] = this[key as keyof this] as unknown as typeof acc[typeof key];
         return acc;
       }, {} as OwnProps),
     };

package/src/parser/parseStyleString.ts

@@ -12,6 +12,7 @@ export function parseStyleString(
     .replace(/;\s*$/, '')
     .split(';')
     .forEach((chunk) => {
+      if (!chunk) return;
       const [attr, value] = chunk.split(':');
       oStyle[attr.trim().toLowerCase()] = value.trim();
     });

package/src/parser/parseUseDirectives.test.ts

@@ -0,0 +1,113 @@
+import { getFabricWindow } from '../env';
+import { parseUseDirectives } from './parseUseDirectives';
+
+describe('parseUseDirectives', () => {
+  it('returns successful parse where use tag uses fill style prioritizing path tag when both tags have a style', async () => {
+    const str = `<svg id="svg" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z"
+        style="stroke:#000000;fill:#ff0000" />
+      <use x="100" y="0" xlink:href="#heart" style="stroke-width:5.0;fill:#0000ff" />
+      </svg>`;
+
+    const parser = new (getFabricWindow().DOMParser)();
+    const doc = parser.parseFromString(str.trim(), 'text/xml');
+    parseUseDirectives(doc);
+
+    const elements = Array.from(doc.documentElement.getElementsByTagName('*'));
+    expect(elements[0]).not.toBeNull();
+    if (elements[0] !== null) {
+      const style0 = elements[0].getAttribute('style');
+      expect(style0).toContain('fill:#ff0000');
+    }
+    expect(elements[1]).not.toBeNull();
+    if (elements[1] !== null) {
+      const style1 = elements[1].getAttribute('style');
+      expect(style1).toContain('fill:#ff0000');
+      // also contains extra style that path tag does not have
+      expect(style1).toContain('stroke-width:5.0');
+    }
+  });
+  it('returns successful parse where use tag uses fill style from itself when path tag empty', async () => {
+    const str = `<svg id="svg" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
+      <use x="100" y="0" xlink:href="#heart" style="stroke-width:5.0;fill:#0000ff" />
+      </svg>`;
+
+    const parser = new (getFabricWindow().DOMParser)();
+    const doc = parser.parseFromString(str.trim(), 'text/xml');
+    parseUseDirectives(doc);
+
+    const elements = Array.from(doc.documentElement.getElementsByTagName('*'));
+    expect(elements[0]).not.toBeNull();
+    if (elements[0] !== null) {
+      const style0 = elements[0].getAttribute('style');
+      expect(style0).toBeNull();
+    }
+    expect(elements[1]).not.toBeNull();
+    if (elements[1] !== null) {
+      const style1 = elements[1].getAttribute('style');
+      expect(style1).toContain('fill:#0000ff');
+      // also contains extra style that path tag does not have
+      expect(style1).toContain('stroke-width:5.0');
+    }
+  });
+  it('returns successful parse where use tag uses fill style from path when its style tag is empty', async () => {
+    const str = `<svg id="svg" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" 
+        style="stroke:#000000;fill:#ff0000" />
+      <use x="100" y="0" xlink:href="#heart" />
+      </svg>`;
+
+    const parser = new (getFabricWindow().DOMParser)();
+    const doc = parser.parseFromString(str.trim(), 'text/xml');
+    parseUseDirectives(doc);
+
+    const elements = Array.from(doc.documentElement.getElementsByTagName('*'));
+    expect(elements[0]).not.toBeNull();
+    if (elements[0] !== null) {
+      const style0 = elements[0].getAttribute('style');
+      expect(style0).toContain('fill:#ff0000');
+    }
+    expect(elements[1]).not.toBeNull();
+    if (elements[1] !== null) {
+      const style1 = elements[1].getAttribute('style');
+      expect(style1).toContain('fill:#ff0000');
+    }
+  });
+  it('correctly merge styles tags considering attributes', async () => {
+    const str = `<svg id="svg" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path fill="red" id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
+      <use x="100" y="0" xlink:href="#heart" style="stroke:#000000;fill:green" />
+      </svg>`;
+
+    const parser = new (getFabricWindow().DOMParser)();
+    const doc = parser.parseFromString(str.trim(), 'text/xml');
+    parseUseDirectives(doc);
+
+    const elements = Array.from(doc.documentElement.getElementsByTagName('*'));
+    expect(elements[0]).not.toBeNull();
+    expect(elements[1]).not.toBeNull();
+    if (elements[1] !== null) {
+      const style1 = elements[1].getAttribute('style');
+      expect(style1).toContain('fill:red');
+    }
+  });
+  it('Will not override existing attributes', async () => {
+    const str = `<svg id="svg" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path fill="yellow" id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
+      <use x="100" y="0" xlink:href="#heart" fill="blue" />
+      </svg>`;
+
+    const parser = new (getFabricWindow().DOMParser)();
+    const doc = parser.parseFromString(str.trim(), 'text/xml');
+    parseUseDirectives(doc);
+
+    const elements = Array.from(doc.documentElement.getElementsByTagName('*'));
+    expect(elements[0]).not.toBeNull();
+    expect(elements[1]).not.toBeNull();
+    if (elements[1] !== null) {
+      const style1 = elements[1].getAttribute('fill');
+      expect(style1).toBe('yellow');
+    }
+  });
+});

package/src/parser/parseUseDirectives.ts

@@ -1,85 +1,91 @@
 import { svgNS } from './constants';
 import { getMultipleNodes } from './getMultipleNodes';
 import { applyViewboxTransform } from './applyViewboxTransform';
+import { parseStyleString } from './parseStyleString';
 
 export function parseUseDirectives(doc: Document) {
   const nodelist = getMultipleNodes(doc, ['use', 'svg:use']);
-  let i = 0;
-  while (nodelist.length && i < nodelist.length) {
-    const el = nodelist[i],
-      xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href');
+  const skipAttributes = ['x', 'y', 'xlink:href', 'href', 'transform'];
 
-    if (xlinkAttribute === null) {
-      return;
+  for (const useElement of nodelist) {
+    const useAttributes: NamedNodeMap = useElement.attributes;
+
+    const useAttrMap: Record<string, string> = {};
+    for (const attr of useAttributes) {
+      attr.value && (useAttrMap[attr.name] = attr.value);
     }
 
-    const xlink = xlinkAttribute.slice(1);
-    const x = el.getAttribute('x') || 0;
-    const y = el.getAttribute('y') || 0;
-    const el2Orig = doc.getElementById(xlink);
-    if (el2Orig === null) {
+    const xlink = (useAttrMap['xlink:href'] || useAttrMap.href || '').slice(1);
+
+    if (xlink === '') {
+      return;
+    }
+    const referencedElement = doc.getElementById(xlink);
+    if (referencedElement === null) {
       // if we can't find the target of the xlink, consider this use tag bad, similar to no xlink
       return;
     }
-    let el2 = el2Orig.cloneNode(true) as Element;
-    let currentTrans =
-      (el2.getAttribute('transform') || '') +
-      ' translate(' +
-      x +
-      ', ' +
-      y +
-      ')';
-    const oldLength = nodelist.length;
-    const namespace = svgNS;
+    let clonedOriginal = referencedElement.cloneNode(true) as Element;
 
-    applyViewboxTransform(el2);
-    if (/^svg$/i.test(el2.nodeName)) {
-      const el3 = el2.ownerDocument.createElementNS(namespace, 'g');
-      for (
-        let j = 0, attrs = el2.attributes, len = attrs.length;
-        j < len;
-        j++
-      ) {
-        const attr: Attr | null = attrs.item(j);
-        attr && el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue!);
-      }
-      // el2.firstChild != null
-      while (el2.firstChild) {
-        el3.appendChild(el2.firstChild);
-      }
-      el2 = el3;
+    const originalAttributes: NamedNodeMap = clonedOriginal.attributes;
+
+    const originalAttrMap: Record<string, string> = {};
+    for (const attr of originalAttributes) {
+      attr.value && (originalAttrMap[attr.name] = attr.value);
+    }
+
+    // Transform attribute needs to be merged in a particular way
+    const { x = 0, y = 0, transform = '' } = useAttrMap;
+    const currentTrans = `${transform} ${
+      originalAttrMap.transform || ''
+    } translate(${x}, ${y})`;
+
+    applyViewboxTransform(clonedOriginal);
+
+    if (/^svg$/i.test(clonedOriginal.nodeName)) {
+      // if is an SVG, create a group and apply all the attributes on top of it
+      const el3 = clonedOriginal.ownerDocument.createElementNS(svgNS, 'g');
+      Object.entries(originalAttrMap).forEach(([name, value]) =>
+        el3.setAttributeNS(svgNS, name, value)
+      );
+      el3.append(...clonedOriginal.childNodes);
+      clonedOriginal = el3;
     }
 
-    for (let j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) {
-      const attr = attrs.item(j);
+    for (const attr of useAttributes) {
       if (!attr) {
         continue;
       }
-      const { nodeName, nodeValue } = attr;
-      if (
-        nodeName === 'x' ||
-        nodeName === 'y' ||
-        nodeName === 'xlink:href' ||
-        nodeName === 'href'
-      ) {
+      const { name, value } = attr;
+      if (skipAttributes.includes(name)) {
         continue;
       }
 
-      if (nodeName === 'transform') {
-        currentTrans = nodeValue + ' ' + currentTrans;
+      if (name === 'style') {
+        // when use has a style, merge the two styles, with the ref being priority (not use)
+        // priority is by feature. an attribute for fill on the original element
+        // will overwrite the fill in style or attribute for tha use
+        const styleRecord: Record<string, any> = {};
+        parseStyleString(value!, styleRecord);
+        // cleanup styleRecord from attributes of original
+        Object.entries(originalAttrMap).forEach(([name, value]) => {
+          styleRecord[name] = value;
+        });
+        // now we can put in the style of the original that will overwrite the original attributes
+        parseStyleString(originalAttrMap.style || '', styleRecord);
+        const mergedStyles = Object.entries(styleRecord)
+          .map((entry) => entry.join(':'))
+          .join(';');
+        clonedOriginal.setAttribute(name, mergedStyles);
       } else {
-        el2.setAttribute(nodeName, nodeValue!);
+        // set the attribute from use element only if the original does not have it already
+        !originalAttrMap[name] && clonedOriginal.setAttribute(name, value!);
       }
     }
 
-    el2.setAttribute('transform', currentTrans);
-    el2.setAttribute('instantiated_by_use', '1');
-    el2.removeAttribute('id');
-    const parentNode = el.parentNode;
-    parentNode!.replaceChild(el2, el);
-    // some browsers do not shorten nodelist after replaceChild (IE8)
-    if (nodelist.length === oldLength) {
-      i++;
-    }
+    clonedOriginal.setAttribute('transform', currentTrans);
+    clonedOriginal.setAttribute('instantiated_by_use', '1');
+    clonedOriginal.removeAttribute('id');
+    useElement.parentNode!.replaceChild(clonedOriginal, useElement);
   }
 }

package/src/shapes/IText/ITextBehavior.ts

@@ -406,8 +406,10 @@ export abstract class ITextBehavior<
     this.fire('editing:entered', e ? { e } : undefined);
     this._fireSelectionChanged();
     if (this.canvas) {
-      // @ts-expect-error in reality it is an IText instance
-      this.canvas.fire('text:editing:entered', { target: this, e });
+      this.canvas.fire('text:editing:entered', {
+        target: this as unknown as IText,
+        e,
+      });
       this.canvas.requestRenderAll();
     }
   }

package/src/shapes/Image.ts

@@ -607,8 +607,6 @@ export class FabricImage<
     ctx: CanvasRenderingContext2D
   ) {
     ctx.imageSmoothingEnabled = this.imageSmoothing;
-    // cant use ts-expect-error because of ts 5.3 cross check
-    // @ts-ignore TS doesn't respect this type casting
     super.drawCacheOnCanvas(ctx);
   }
 

package/src/shapes/Text/TextSVGExportMixin.ts

@@ -297,8 +297,6 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
    * @return {String}
    */
   getSvgStyles(this: TextSVGExportMixin & FabricText, skipShadow?: boolean) {
-    // cant use ts-expect-error because of ts 5.3 cross check
-    // @ts-ignore TS doesn't respect this type casting
     return `${super.getSvgStyles(skipShadow)} white-space: pre;`;
   }
 

package/src/shapes/Textbox.ts

@@ -568,8 +568,6 @@ export class Textbox<
    * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
    * @return {Object} object representation of an instance
    */
-  // cant use ts-expect-error because of ts 5.3 cross check
-  // @ts-ignore TS this typing limitations
   toObject<
     T extends Omit<Props & TClassProperties<this>, keyof SProps>,
     K extends keyof T = never