fabric - npm Package Compare versions

Comparing version 6.0.0-beta12 to 6.0.0-beta13

CONTRIBUTING.md

@@ -111,3 +111,4 @@ # 🎉 Contributing to Fabric 🥳
 - **Docs** \
-  Add relevant comments to your code if necessary using [JSDoc 3][jsdoc] and update relevant guides.\
+  Update guides if necessary.\
+  Add relevant comments to your code using [JSDoc3][jsdoc], [JSDoc reference supported by TS][tsjsdoc].\
   The generated documentation can be found at [fabricjs.com][docs], see [DOCS](#-improving-docs).
@@ -267,2 +268,3 @@ - **Changelog**\
 [jsdoc]: https://jsdoc.app/
+[tsjsdoc]: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html
 [playwright]: https://playwright.dev/
@@ -269,0 +271,0 @@ [jest]: https://jestjs.io/

dist/src/canvas/SelectableCanvas.d.ts

@@ -364,3 +364,3 @@ import { Point } from '../Point';
      * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted
-     * @see {@link fabric.Canvas#_searchPossibleTargets}
+     * @see {@link _searchPossibleTargets}
      * @param {FabricObject[]} [objects] objects array to look into
@@ -386,5 +386,5 @@ * @param {Object} [pointer] x,y object of point coordinates we want to check.
      * ignoreVpt true = HTMLElement coordinates relative to top,left
-     * ignoreVpt false, default = fabric space coordinates, the same used for shape position
-     * To interact with your shapes top and left you want to use ignoreVpt true
-     * most of the time, while ignoreVpt false will give you coordinates
+     * ignoreVpt false, default = fabric space coordinates, the same used for shape position.
+     * To interact with your shapes top and left you want to use ignoreVpt false
+     * most of the time, while ignoreVpt true will give you coordinates
      * compatible with the object.oCoords system.
@@ -391,0 +391,0 @@ * of the time.

dist/src/Collection.d.ts

@@ -68,3 +68,3 @@ import type { Constructor, TBBox } from './typedefs';
          * Returns true if collection contains an object.\
-         * **Prefer using {@link `FabricObject#isDescendantOf`} for performance reasons**
+         * **Prefer using {@link FabricObject#isDescendantOf} for performance reasons**
          * instead of `a.contains(b)` use `b.isDescendantOf(a)`
@@ -71,0 +71,0 @@ * @param {Object} object Object to check against

dist/src/EventTypeDefs.d.ts

@@ -117,2 +117,3 @@ import type { Control } from './controls/Control';
     pointer: Point;
+    absolutePointer: Point;
 }
@@ -119,0 +120,0 @@ interface DnDEvents {

dist/src/shapes/ActiveSelection.d.ts

 import type { ControlRenderingStyleOverride } from '../controls/controlRendering';
-import type { GroupProps } from './Group';
+import type { GroupProps, LayoutContext } from './Group';
 import { Group } from './Group';
 import type { FabricObject } from './Object/FabricObject';
-import type { TOptions } from '../typedefs';
 export type MultiSelectionStacking = 'canvas-stacking' | 'selection-order';
@@ -10,2 +9,15 @@ export interface ActiveSelectionOptions extends GroupProps {
 }
+/**
+ * Used by Canvas to manage selection.
+ * Canvas accepts an `activeSelection` option allowing overriding and customization.
+ *
+ * @example
+ * class MyActiveSelection extends ActiveSelection {
+ *   ...
+ * }
+ *
+ * const canvas = new Canvas(el, {
+ *  activeSelection: new MyActiveSelection()
+ * })
+ */
 export declare class ActiveSelection extends Group {
@@ -22,3 +34,2 @@ _objects: FabricObject[];
     static type: string;
-    constructor(objects?: FabricObject[], options?: TOptions<ActiveSelectionOptions>, objectsRelativeToGroup?: boolean);
     /**
@@ -64,2 +75,3 @@ * @private
     onDeselect(): boolean;
+    _applyLayoutStrategy(context: LayoutContext): void;
     /**
@@ -66,0 +78,0 @@ * Returns string representation of a group

dist/src/shapes/IText/ITextBehavior.d.ts

@@ -152,3 +152,3 @@ import type { ObjectEvents, TPointerEvent, TPointerEventInfo } from '../../EventTypeDefs';
     /**
-     * called by {@link canvas#textEditingManager}
+     * called by {@link Canvas#textEditingManager}
      */
@@ -155,0 +155,0 @@ updateSelectionOnMouseMove(e: TPointerEvent): void;

dist/src/shapes/Object/ObjectOrigin.d.ts

@@ -28,4 +28,2 @@ import { Point } from '../../Point';
     group?: Group;
-    _originalOriginX?: TOriginX;
-    _originalOriginY?: TOriginY;
     /**
@@ -94,18 +92,6 @@ * Calculate object bounding box dimensions from its properties scale, skew.
     /**
-     * Sets the origin/position of the object to it's center point
      * @private
-     * @return {void}
      */
-    _setOriginToCenter(): void;
-    /**
-     * Resets the origin/position of the object to it's original origin
-     * @private
-     * @return {void}
-     */
-    _resetOrigin(): void;
-    /**
-     * @private
-     */
     _getLeftTopCoords(): Point;
 }
 //# sourceMappingURL=ObjectOrigin.d.ts.map

dist/src/shapes/Object/types/ObjectProps.d.ts

@@ -41,3 +41,12 @@ import type { Shadow } from '../../../Shadow';
     excludeFromExport: boolean;
+    /**
+     * When `true` the object will rotate on its center.
+     * When `false` will rotate around the origin point defined by originX and originY.
+     * The value of this property is IGNORED during a transform if the canvas has already
+     * centeredRotation set to `true`
+     * The object method `rotate` will always consider this property and never the canva's one.
+     * @default true
+     */
+    centeredRotation: boolean;
 }
 //# sourceMappingURL=ObjectProps.d.ts.map

dist/src/shapes/Text/Text.d.ts

@@ -346,6 +346,6 @@ import type { ObjectEvents } from '../../EventTypeDefs';
      * and counting style.
-     * It return always for text and Itext.
+     * It return always 1 for text and Itext. Textbox has its own implementation
      * @return Number
      */
-    missingNewlineOffset(lineIndex: number): number;
+    missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1;
     /**
@@ -352,0 +352,0 @@ * Returns 2d representation (lineIndex and charIndex) of cursor

dist/src/shapes/Textbox.d.ts

@@ -198,5 +198,7 @@ import type { TClassProperties, TOptions } from '../typedefs';
      * and counting style.
+     * This is important only for splitByGrapheme at the end of wrapping.
+     * If we are not wrapping the offset is always 1
      * @return Number
      */
-    missingNewlineOffset(lineIndex: number): 1 | 0;
+    missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1;
     /**
@@ -203,0 +205,0 @@ * Gets lines of text to render in the Textbox. This function calculates

dist/src/util/animation/types.d.ts

@@ -18,3 +18,3 @@ import type { TColorArg } from '../../color/typedefs';
  * An easing function used to calculate the current value
- * @see {@link AnimationBase['calculate']}
+ * @see {@link AnimationBase#calculate}
  *
@@ -21,0 +21,0 @@ * @param timeElapsed ms elapsed since start

jest.config.js

@@ -138,3 +138,3 @@ /*
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+  setupFilesAfterEnv: ['./jest.setup.ts'],
 
@@ -141,0 +141,0 @@ // The number of seconds after which a test is considered as slow and reported as such in the results.

package.json

@@ -5,3 +5,3 @@ {
   "homepage": "http://fabricjs.com/",
-  "version": "6.0.0-beta12",
+  "version": "6.0.0-beta13",
   "author": "Juriy Zaytsev <[e-mail]>",
@@ -44,3 +44,3 @@ "contributors": [
   "scripts": {
-    "docs": "typedoc --out docs fabric.ts",
+    "docs": "typedoc",
     "cli": "node ./scripts/index.mjs",
@@ -128,3 +128,4 @@ "sandboxscript": "node ./scripts/sandbox.mjs",
     "tslib": "^2.4.1",
-    "typedoc": "^0.23.24",
+    "typedoc": "^0.24.8",
+    "typedoc-plugin-markdown": "^3.15.4",
     "typescript": "^4.9.4",
@@ -131,0 +132,0 @@ "v8-to-istanbul": "^9.1.0"

playwright.setup.ts

@@ -8,3 +8,3 @@ import { PlaywrightTestConfig } from '@playwright/test';
     const p = spawn(
-      `babel --no-babelrc e2e/tests --extensions '.ts' --ignore '**/*.spec.ts' --out-dir e2e/dist --config-file ./e2e/.babelrc.js ${
+      `babel --no-babelrc e2e/tests --extensions '.ts' --ignore '**/*.spec.ts' --out-dir e2e/dist --config-file ./e2e/.babelrc.mjs ${
         watch ? '-w' : ''
@@ -11,0 +11,0 @@ }`,

src/canvas/Canvas.ts

@@ -248,4 +248,4 @@ import { LEFT_CLICK, MIDDLE_CLICK, NONE, RIGHT_CLICK } from '../constants';
       isClick: false,
-      pointer: this.getPointer(e),
-      absolutePointer: this.getPointer(e, true),
+      pointer: this.getPointer(e, true),
+      absolutePointer: this.getPointer(e),
     };
@@ -277,4 +277,4 @@ this.fire('mouse:out', { ...shared, target });
         isClick: false,
-        pointer: this.getPointer(e),
-        absolutePointer: this.getPointer(e, true),
+        pointer: this.getPointer(e, true),
+        absolutePointer: this.getPointer(e),
       });
@@ -517,3 +517,4 @@ this._hoveredTarget = undefined;
       dragSource: this._dragSource,
-      pointer: this.getPointer(e),
+      pointer: this.getPointer(e, true),
+      absolutePointer: this.getPointer(e),
     });
@@ -936,4 +937,4 @@ //  will be set by the drop target
         isClick,
-        pointer: this.getPointer(e),
-        absolutePointer: this.getPointer(e, true),
+        pointer: this.getPointer(e, true),
+        absolutePointer: this.getPointer(e),
         transform: this._currentTransform,
@@ -1005,2 +1006,3 @@ };
     }
+    // this is an absolute pointer, the naming is wrong
     const pointer = this.getPointer(e);
@@ -1022,2 +1024,3 @@ this.freeDrawingBrush &&
           e,
+          // this is an absolute pointer, the naming is wrong
           pointer,
@@ -1039,2 +1042,3 @@ });
         e: e,
+        // this is an absolute pointer, the naming is wrong
         pointer: pointer,
@@ -1325,4 +1329,4 @@ });
         isClick: false,
-        pointer: this.getPointer(e),
-        absolutePointer: this.getPointer(e, true),
+        pointer: this.getPointer(e, true),
+        absolutePointer: this.getPointer(e),
       };
@@ -1339,4 +1343,4 @@ fireCanvas && this.fire(canvasIn, outOpt);
         isClick: false,
-        pointer: this.getPointer(e),
-        absolutePointer: this.getPointer(e, true),
+        pointer: this.getPointer(e, true),
+        absolutePointer: this.getPointer(e),
       };
@@ -1343,0 +1347,0 @@ fireCanvas && this.fire(canvasOut, inOpt);

src/canvas/SelectableCanvas.ts

@@ -305,2 +305,3 @@ import { dragHandler } from '../controls/drag';
     this._activeSelection.set('canvas', this);
+    this._activeSelection.setCoords();
   }
@@ -836,3 +837,3 @@
    * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted
-   * @see {@link fabric.Canvas#_searchPossibleTargets}
+   * @see {@link _searchPossibleTargets}
    * @param {FabricObject[]} [objects] objects array to look into
@@ -876,5 +877,5 @@ * @param {Object} [pointer] x,y object of point coordinates we want to check.
    * ignoreVpt true = HTMLElement coordinates relative to top,left
-   * ignoreVpt false, default = fabric space coordinates, the same used for shape position
-   * To interact with your shapes top and left you want to use ignoreVpt true
-   * most of the time, while ignoreVpt false will give you coordinates
+   * ignoreVpt false, default = fabric space coordinates, the same used for shape position.
+   * To interact with your shapes top and left you want to use ignoreVpt false
+   * most of the time, while ignoreVpt true will give you coordinates
    * compatible with the object.oCoords system.
@@ -881,0 +882,0 @@ * of the time.

src/Collection.ts

@@ -134,3 +134,3 @@ import type { Constructor, TBBox } from './typedefs';
      * Returns true if collection contains an object.\
-     * **Prefer using {@link `FabricObject#isDescendantOf`} for performance reasons**
+     * **Prefer using {@link FabricObject#isDescendantOf} for performance reasons**
      * instead of `a.contains(b)` use `b.isDescendantOf(a)`
@@ -137,0 +137,0 @@ * @param {Object} object Object to check against

src/controls/polyControl.ts

@@ -83,24 +83,22 @@ import { Point } from '../Point';
     const poly = transform.target as Polyline,
-      anchorIndex = (pointIndex > 0 ? pointIndex : poly.points.length) - 1,
-      pointInParentPlane = new Point(
-        poly.points[anchorIndex].x - poly.pathOffset.x,
-        poly.points[anchorIndex].y - poly.pathOffset.y
-      ).transform(poly.calcOwnMatrix()),
+      anchorPoint = new Point(
+        poly.points[(pointIndex > 0 ? pointIndex : poly.points.length) - 1]
+      ),
+      anchorPointInParentPlane = anchorPoint
+        .subtract(poly.pathOffset)
+        .transform(poly.calcOwnMatrix()),
       actionPerformed = fn(eventData, { ...transform, pointIndex }, x, y),
-      polygonBaseSize = getSize(poly),
       adjustFlip = new Point(poly.flipX ? -1 : 1, poly.flipY ? -1 : 1);
 
-    const newPosition = new Point(
-      poly.points[anchorIndex].x,
-      poly.points[anchorIndex].y
-    )
+    const newPositionNormalized = anchorPoint
       .subtract(poly.pathOffset)
-      .divide(polygonBaseSize)
+      .divide(poly._getNonTransformedDimensions())
       .multiply(adjustFlip);
 
     poly.setPositionByOrigin(
-      pointInParentPlane,
-      newPosition.x + 0.5,
-      newPosition.y + 0.5
+      anchorPointInParentPlane,
+      newPositionNormalized.x + 0.5,
+      newPositionNormalized.y + 0.5
     );
+
     return actionPerformed;
@@ -107,0 +105,0 @@ };

src/controls/scale.ts

@@ -196,3 +196,3 @@ import type {
   }
-  // minScale is taken are in the setter.
+  // minScale is taken care of in the setter.
   const oldScaleX = target.scaleX,
@@ -199,0 +199,0 @@ oldScaleY = target.scaleY;

src/controls/wrapWithFixedAnchor.ts

@@ -17,5 +17,11 @@ import type { Transform, TransformActionHandler } from '../EventTypeDefs';
       actionPerformed = actionHandler(eventData, transform, x, y);
-    target.setPositionByOrigin(constraint, originX, originY);
+    // flipping requires to change the transform origin, so we read from the mutated transform
+    // instead of leveraging the one destructured before
+    target.setPositionByOrigin(
+      constraint,
+      transform.originX,
+      transform.originY
+    );
     return actionPerformed;
   }) as TransformActionHandler<T>;
 }

src/EventTypeDefs.ts

@@ -166,2 +166,3 @@ import type { Control } from './controls/Control';
   pointer: Point;
+  absolutePointer: Point;
 }
@@ -168,0 +169,0 @@

src/shapes/ActiveSelection.ts

 import type { ControlRenderingStyleOverride } from '../controls/controlRendering';
 import { classRegistry } from '../ClassRegistry';
-import type { GroupProps } from './Group';
+import type { GroupProps, LayoutContext } from './Group';
 import { Group } from './Group';
 import type { FabricObject } from './Object/FabricObject';
-import type { TOptions } from '../typedefs';
 
@@ -14,2 +13,15 @@ export type MultiSelectionStacking = 'canvas-stacking' | 'selection-order';
 
+/**
+ * Used by Canvas to manage selection.
+ * Canvas accepts an `activeSelection` option allowing overriding and customization.
+ *
+ * @example
+ * class MyActiveSelection extends ActiveSelection {
+ *   ...
+ * }
+ *
+ * const canvas = new Canvas(el, {
+ *  activeSelection: new MyActiveSelection()
+ * })
+ */
 export class ActiveSelection extends Group {
@@ -30,11 +42,2 @@ declare _objects: FabricObject[];
 
-  constructor(
-    objects?: FabricObject[],
-    options?: TOptions<ActiveSelectionOptions>,
-    objectsRelativeToGroup?: boolean
-  ) {
-    super(objects, options, objectsRelativeToGroup);
-    this.setCoords();
-  }
-
   /**
@@ -146,2 +149,21 @@ * @private
 
+  _applyLayoutStrategy(context: LayoutContext): void {
+    super._applyLayoutStrategy(context);
+    if (this._objects.length === 0) {
+      // in this case layout was skipped
+      // we reset transform for the next selection
+      Object.assign(this, {
+        left: 0,
+        top: 0,
+        angle: 0,
+        scaleX: 1,
+        scaleY: 1,
+        skewX: 0,
+        skewY: 0,
+        flipX: false,
+        flipY: false,
+      });
+    }
+  }
+
   /**
@@ -148,0 +170,0 @@ * Returns string representation of a group

src/shapes/IText/ITextBehavior.test.ts

@@ -1,2 +0,2 @@
-import '../../../toMatchRoundedSnapshot';
+import { roundSnapshotOptions } from '../../../jest.extend';
 import { IText } from './IText';
@@ -17,5 +17,4 @@
     charBounds,
-  }).toMatchRoundedSnapshot();
-  text.includeDefaultValues = false;
-  expect(text.toObject()).toMatchRoundedSnapshot(['width']);
+  }).toMatchSnapshot(roundSnapshotOptions);
+  expect(text).toMatchObjectSnapshot({ includeDefaultValues: false });
 }
@@ -22,0 +21,0 @@

src/shapes/IText/ITextBehavior.ts

@@ -17,2 +17,3 @@ import type {
 import { LEFT, RIGHT, reNewline } from '../../constants';
+import type { Canvas } from '../../canvas/Canvas';
 
@@ -408,3 +409,3 @@ /**
   /**
-   * called by {@link canvas#textEditingManager}
+   * called by {@link Canvas#textEditingManager}
    */
@@ -411,0 +412,0 @@ updateSelectionOnMouseMove(e: TPointerEvent) {

src/shapes/Object/Object.ts

@@ -1494,8 +1494,10 @@ import { cache } from '../../cache';
   rotate(angle: TDegree) {
-    const shouldCenterOrigin =
-      (this.originX !== CENTER || this.originY !== CENTER) &&
-      this.centeredRotation;
+    const { centeredRotation, originX, originY } = this;
 
-    if (shouldCenterOrigin) {
-      this._setOriginToCenter();
+    if (centeredRotation) {
+      const { x, y } = this.getRelativeCenterPoint();
+      this.originX = CENTER;
+      this.originY = CENTER;
+      this.left = x;
+      this.top = y;
     }
@@ -1505,4 +1507,12 @@
 
-    if (shouldCenterOrigin) {
-      this._resetOrigin();
+    if (centeredRotation) {
+      const { x, y } = this.translateToOriginPoint(
+        this.getRelativeCenterPoint(),
+        originX,
+        originY
+      );
+      this.left = x;
+      this.top = y;
+      this.originX = originX;
+      this.originY = originY;
     }
@@ -1509,0 +1519,0 @@ }

src/shapes/Object/ObjectOrigin.ts

@@ -39,6 +39,2 @@ import { Point } from '../../Point';
 
-  declare _originalOriginX?: TOriginX;
-
-  declare _originalOriginY?: TOriginY;
-
   /**
@@ -225,48 +221,4 @@ * Calculate object bounding box dimensions from its properties scale, skew.
   /**
-   * Sets the origin/position of the object to it's center point
    * @private
-   * @return {void}
    */
-  _setOriginToCenter() {
-    this._originalOriginX = this.originX;
-    this._originalOriginY = this.originY;
-
-    const center = this.getRelativeCenterPoint();
-
-    this.originX = CENTER;
-    this.originY = CENTER;
-
-    this.left = center.x;
-    this.top = center.y;
-  }
-
-  /**
-   * Resets the origin/position of the object to it's original origin
-   * @private
-   * @return {void}
-   */
-  _resetOrigin() {
-    if (
-      this._originalOriginX !== undefined &&
-      this._originalOriginY !== undefined
-    ) {
-      const originPoint = this.translateToOriginPoint(
-        this.getRelativeCenterPoint(),
-        this._originalOriginX,
-        this._originalOriginY
-      );
-
-      this.left = originPoint.x;
-      this.top = originPoint.y;
-
-      this.originX = this._originalOriginX;
-      this.originY = this._originalOriginY;
-      this._originalOriginX = undefined;
-      this._originalOriginY = undefined;
-    }
-  }
-
-  /**
-   * @private
-   */
   _getLeftTopCoords() {
@@ -273,0 +225,0 @@ return this.translateToOriginPoint(

src/shapes/Object/types/ObjectProps.ts

@@ -49,2 +49,12 @@ import type { Shadow } from '../../../Shadow';
   excludeFromExport: boolean;
+
+  /**
+   * When `true` the object will rotate on its center.
+   * When `false` will rotate around the origin point defined by originX and originY.
+   * The value of this property is IGNORED during a transform if the canvas has already
+   * centeredRotation set to `true`
+   * The object method `rotate` will always consider this property and never the canva's one.
+   * @default true
+   */
+  centeredRotation: boolean;
 }

src/shapes/Text/Text.spec.ts

@@ -1,2 +0,2 @@
-import '../../../toMatchRoundedSnapshot';
+import { roundSnapshotOptions } from '../../../jest.extend';
 import { cache } from '../../cache';
@@ -12,3 +12,3 @@ import { config } from '../../config';
   it('toObject', async () => {
-    expect(new Text('text').toObject()).toMatchRoundedSnapshot(['width']);
+    expect(new Text('text')).toMatchObjectSnapshot();
   });
@@ -29,3 +29,3 @@
       const measurement = text._measureChar('a', style, zwc, style);
-      expect(measurement).toMatchRoundedSnapshot();
+      expect(measurement).toMatchSnapshot(roundSnapshotOptions);
       expect(measurement).toEqual(text._measureChar('a', style, zwc, style));
@@ -32,0 +32,0 @@ });

src/shapes/Text/Text.ts

@@ -532,7 +532,7 @@ import { cache } from '../../cache';
    * and counting style.
-   * It return always for text and Itext.
+   * It return always 1 for text and Itext. Textbox has its own implementation
    * @return Number
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  missingNewlineOffset(lineIndex: number) {
+  missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1;
+  missingNewlineOffset(lineIndex: number): 1 {
     return 1;
@@ -556,3 +556,4 @@ }
       }
-      selectionStart -= lines[i].length + this.missingNewlineOffset(i);
+      selectionStart -=
+        lines[i].length + this.missingNewlineOffset(i, skipWrapping);
     }
@@ -559,0 +560,0 @@ return {

src/shapes/Textbox.spec.ts

@@ -1,2 +0,2 @@
-import '../../toMatchRoundedSnapshot';
+import '../../jest.extend';
 import { Textbox } from './Textbox';
@@ -9,5 +9,4 @@
     });
-    expect(textbox.toObject()).toMatchRoundedSnapshot(['width']);
-    textbox.includeDefaultValues = false;
-    expect(textbox.toObject()).toMatchRoundedSnapshot(['width']);
+    expect(textbox).toMatchObjectSnapshot();
+    expect(textbox).toMatchObjectSnapshot({ includeDefaultValues: false });
   });
@@ -36,3 +35,3 @@
     });
-    expect(textbox.toObject()).toMatchRoundedSnapshot(['width']);
+    expect(textbox).toMatchObjectSnapshot();
   });
@@ -39,0 +38,0 @@

src/shapes/Textbox.ts

@@ -342,3 +342,3 @@ import type { TClassProperties, TOptions } from '../typedefs';
       if (wordsOrGraphemes.length === 0) {
-        return [];
+        return [{ word: [], width: 0 }];
       }
@@ -353,3 +353,3 @@
         largestWordWidth = Math.max(width, largestWordWidth);
-        offset += word.length + infix.length;
+        offset += graphemeArray.length + infix.length;
         return { word: graphemeArray, width };
@@ -503,6 +503,8 @@ });
    * and counting style.
+   * This is important only for splitByGrapheme at the end of wrapping.
+   * If we are not wrapping the offset is always 1
    * @return Number
    */
-  missingNewlineOffset(lineIndex: number) {
-    if (this.splitByGrapheme) {
+  missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1 {
+    if (this.splitByGrapheme && !skipWrapping) {
       return this.isEndOfWrapping(lineIndex) ? 1 : 0;
@@ -509,0 +511,0 @@ }

src/util/animation/types.ts

 import type { TColorArg } from '../../color/typedefs';
+import type { AnimationBase } from './AnimationBase';
 
@@ -26,3 +27,3 @@ export type AnimationState = 'pending' | 'running' | 'completed' | 'aborted';
  * An easing function used to calculate the current value
- * @see {@link AnimationBase['calculate']}
+ * @see {@link AnimationBase#calculate}
  *
@@ -29,0 +30,0 @@ * @param timeElapsed ms elapsed since start

src/util/dom_misc.ts

@@ -7,8 +7,9 @@ /**
 export function getScrollLeftTop(element: HTMLElement | null) {
+  const doc = element && getDocumentFromElement(element);
   let left = 0,
     top = 0;
-  if (!element) {
+  if (!element || !doc) {
     return { left, top };
   }
-  const doc = getDocumentFromElement(element);
+
   const docElement = doc.documentElement,
@@ -15,0 +16,0 @@ body = doc.body || {

No alert changes

Improved metrics

Total package byte prevSize

14391300

increased by0.22%

Number of package files

560

increased by1.63%

Lines of code

163127

increased by0.34%

Worsened metrics

Dev dependency count

52

increased by1.96%

No dependency changes