fabric 6.0.0-beta12 → 6.0.0-beta13

package/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "website"]
+	path = website
+	url = https://github.com/fabricjs/fabricjs.github.io

package/.prettierignore

@@ -7,13 +7,14 @@ change-output.md
 before_commit
 /coverage/
 .idea/
-/dist/fabric.require.js
-/dist/fabric.min.js.gz
 /cli_output/
 /scripts/cli_cache.json
-/dist/
+**/dist/
 /lib/
 /test/
 .next/
 .parcel-cache/
 /docs/
+/e2e/test-results/
+/e2e/test-report/
+/e2e/tests/**/*-snapshots/*.json

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ## [next]
 
+## [6.0.0-b3]
+
+- fix(Textbox): implemente a fix for the style shifting issues on new lines [#9197](https://github.com/fabricjs/fabric.js/pull/9197)
+- Fix(Control) fix a regression in `wrap with fixed anchor`, regression from #8400 [#9326](https://github.com/fabricjs/fabric.js/pull/9326)
+- test(e2e): improve test case for line shifting and style with more colors [#9327](https://github.com/fabricjs/fabric.js/pull/9327)
+- test(e2e): node canvas visual tests [#9134](https://github.com/fabricjs/fabric.js/pull/9134)
+- fix(ActiveSelection): make sure canvas is in charge of setting initial coords [#9322](https://github.com/fabricjs/fabric.js/pull/9322)
+- test(): Migrate json control tests [#9323](https://github.com/fabricjs/fabric.js/pull/9323)
+- fix() Textbox inputs with new lines, regression from #9097 [#9192](https://github.com/fabricjs/fabric.js/pull/9192)
+- docs(): add link to contributing guide [#8393](https://github.com/fabricjs/fabric.js/pull/8393)
+- test(e2e): Drag&Drop tests [#9112](https://github.com/fabricjs/fabric.js/pull/9112)
+- fix(CanvasEvents): regression of `getPointer` usages + BREAKING: drop event data [#9186](https://github.com/fabricjs/fabric.js/pull/9186)
+- feat(Object): BREAKING rm \_setOriginToCenter and \_resetOrigin unuseful methods [#9179](https://github.com/fabricjs/fabric.js/pull/9179)
+- fix(ActiveSelection): reset positioning when cleared [#9088](https://github.com/fabricjs/fabric.js/pull/9088)
+- ci(): generate docs [#9169](https://github.com/fabricjs/fabric.js/pull/9169)
+- fix(utils) Fixes the code for the anchor point in point controls for polygons [#9178](https://github.com/fabricjs/fabric.js/pull/9178)
+- CD(): website submodule [#9165](https://github.com/fabricjs/fabric.js/pull/9165)
+
 ## [6.0.0-beta12]
 
 - fix(Object): border rendering with padding under group [#9161](https://github.com/fabricjs/fabric.js/pull/9161)

package/CONTRIBUTING.md

@@ -108,7 +108,8 @@ Fabric is an open source project 🦄 and as such depends on the **genuine effor
   PRs must be backed with relevant tests, follow [TESTING](#-testing). If you never wrote a test or you find our tests unclear to extend, just ask for help.
   Aim to cover 100% of the changes.
 - **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).
 - **Changelog**\
   Add a concise listing to the [**CHANGELOG**](CHANGELOG.md) describing what has changed or let github actions add the PR title for you.
@@ -263,6 +264,7 @@ Don't forget to unlink the package once you're done.
 [prettier_extension]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
 [eslint]: https://eslint.org/
 [jsdoc]: https://jsdoc.app/
+[tsjsdoc]: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html
 [playwright]: https://playwright.dev/
 [jest]: https://jestjs.io/
 [qunit]: https://qunitjs.com/

package/dist/index.js

@@ -399,7 +399,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.0.0-beta12";
+  var version = "6.0.0-beta13";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -1258,7 +1258,7 @@
 
       /**
        * 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)`
        * @param {Object} object Object to check against
        * @param {Boolean} [deep=false] `true` to check all descendants, `false` to check only `_objects`
@@ -2771,15 +2771,15 @@
    * @return {Object} Object with left/top values
    */
   function getScrollLeftTop(element) {
+    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,
       body = doc.body || {
         scrollLeft: 0,
@@ -5920,38 +5920,6 @@
       });
     }
 
-    /**
-     * 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
      */
@@ -8216,13 +8184,31 @@
      * @param {TDegree} angle Angle value (in degrees)
      */
     rotate(angle) {
-      const shouldCenterOrigin = (this.originX !== CENTER || this.originY !== CENTER) && this.centeredRotation;
-      if (shouldCenterOrigin) {
-        this._setOriginToCenter();
+      const {
+        centeredRotation,
+        originX,
+        originY
+      } = this;
+      if (centeredRotation) {
+        const {
+          x,
+          y
+        } = this.getRelativeCenterPoint();
+        this.originX = CENTER;
+        this.originY = CENTER;
+        this.left = x;
+        this.top = y;
       }
       this.set('angle', angle);
-      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;
       }
     }
 
@@ -8356,7 +8342,9 @@
         centerPoint = target.getRelativeCenterPoint(),
         constraint = target.translateToOriginPoint(centerPoint, originX, originY),
         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;
     };
   }
@@ -8962,7 +8950,7 @@
         transform.signY = signY;
       }
     }
-    // minScale is taken are in the setter.
+    // minScale is taken care of in the setter.
     const oldScaleX = target.scaleX,
       oldScaleY = target.scaleY;
     if (!by) {
@@ -11351,9 +11339,22 @@
   _defineProperty(Group, "ownDefaults", groupDefaultValues);
   classRegistry.setClass(Group);
 
+  /**
+   * 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()
+   * })
+   */
   class ActiveSelection extends Group {
-    constructor(objects, options, objectsRelativeToGroup) {
-      super(objects, options, objectsRelativeToGroup);
+    constructor() {
+      super(...arguments);
       /**
        * controls how selected objects are added during a multiselection event
        * - `canvas-stacking` adds the selected object to the active selection while respecting canvas object stacking order
@@ -11363,9 +11364,7 @@
        */
       // TODO FIX THIS WITH THE DEFAULTS LOGIC
       _defineProperty(this, "multiSelectionStacking", 'canvas-stacking');
-      this.setCoords();
     }
-
     /**
      * @private
      */
@@ -11470,6 +11469,24 @@
       this.removeAll();
       return false;
     }
+    _applyLayoutStrategy(context) {
+      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
+        });
+      }
+    }
 
     /**
      * Returns string representation of a group
@@ -13522,6 +13539,7 @@
       _defineProperty(this, "_activeSelection", void 0);
       this._activeSelection = activeSelection;
       this._activeSelection.set('canvas', this);
+      this._activeSelection.setCoords();
     }
     initElements(el) {
       this.elements = new CanvasDOMManager(el, {
@@ -13966,7 +13984,7 @@
 
     /**
      * 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
      * @param {Object} [pointer] x,y object of point coordinates we want to check.
      * @return {FabricObject} **top most object on screen** that contains pointer
@@ -13997,9 +14015,9 @@
      * by the viewportTransform ( sort of coordinates of what is displayed
      * on the canvas where you are clicking.
      * 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.
      * of the time.
      * @param {Event} e
@@ -14586,8 +14604,8 @@
       const shared = {
         e,
         isClick: false,
-        pointer: this.getPointer(e),
-        absolutePointer: this.getPointer(e, true)
+        pointer: this.getPointer(e, true),
+        absolutePointer: this.getPointer(e)
       };
       this.fire('mouse:out', _objectSpread2(_objectSpread2({}, shared), {}, {
         target
@@ -14618,8 +14636,8 @@
         this.fire('mouse:over', {
           e,
           isClick: false,
-          pointer: this.getPointer(e),
-          absolutePointer: this.getPointer(e, true)
+          pointer: this.getPointer(e, true),
+          absolutePointer: this.getPointer(e)
         });
         this._hoveredTarget = undefined;
         this._hoveredTargets = [];
@@ -14851,7 +14869,8 @@
         target,
         subTargets: targets,
         dragSource: this._dragSource,
-        pointer: this.getPointer(e)
+        pointer: this.getPointer(e, true),
+        absolutePointer: this.getPointer(e)
       });
       //  will be set by the drop target
       options.didDrop = false;
@@ -15168,8 +15187,8 @@
           subTargets: targets,
           button,
           isClick,
-          pointer: this.getPointer(e),
-          absolutePointer: this.getPointer(e, true),
+          pointer: this.getPointer(e, true),
+          absolutePointer: this.getPointer(e),
           transform: this._currentTransform
         };
       if (eventType === 'up') {
@@ -15233,6 +15252,7 @@
         this.discardActiveObject(e);
         this.requestRenderAll();
       }
+      // this is an absolute pointer, the naming is wrong
       const pointer = this.getPointer(e);
       this.freeDrawingBrush && this.freeDrawingBrush.onMouseDown(pointer, {
         e,
@@ -15250,6 +15270,7 @@
         const pointer = this.getPointer(e);
         this.freeDrawingBrush && this.freeDrawingBrush.onMouseMove(pointer, {
           e,
+          // this is an absolute pointer, the naming is wrong
           pointer
         });
       }
@@ -15266,6 +15287,7 @@
       if (this.freeDrawingBrush) {
         this._isCurrentlyDrawing = !!this.freeDrawingBrush.onMouseUp({
           e: e,
+          // this is an absolute pointer, the naming is wrong
           pointer: pointer
         });
       } else {
@@ -15521,8 +15543,8 @@
           target: oldTarget,
           nextTarget: target,
           isClick: false,
-          pointer: this.getPointer(e),
-          absolutePointer: this.getPointer(e, true)
+          pointer: this.getPointer(e, true),
+          absolutePointer: this.getPointer(e)
         });
         fireCanvas && this.fire(canvasIn, outOpt);
         oldTarget.fire(targetOut, outOpt);
@@ -15533,8 +15555,8 @@
           target,
           previousTarget: oldTarget,
           isClick: false,
-          pointer: this.getPointer(e),
-          absolutePointer: this.getPointer(e, true)
+          pointer: this.getPointer(e, true),
+          absolutePointer: this.getPointer(e)
         });
         fireCanvas && this.fire(canvasOut, inOpt);
         target.fire(targetIn, inOpt);
@@ -19065,10 +19087,10 @@
     /**
      * Detect if a line has a linebreak and so we need to account for it when moving
      * 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) {
       return 1;
     }
@@ -19088,7 +19110,7 @@
             charIndex: selectionStart
           };
         }
-        selectionStart -= lines[i].length + this.missingNewlineOffset(i);
+        selectionStart -= lines[i].length + this.missingNewlineOffset(i, skipWrapping);
       }
       return {
         lineIndex: i - 1,
@@ -20552,8 +20574,7 @@
    *  - `!`      Matches a "!" character (char code 33).
    *  - `\?`     Matches a "?" character (char code 63).
    *  - `\-`     Matches a "-" character (char code 45).
-   */
-  // eslint-disable-next-line no-useless-escape
+   */ // eslint-disable-next-line no-useless-escape
   const reNonWord = /[ \n\.,;!\?\-]/;
   class ITextBehavior extends Text {
     constructor() {
@@ -20840,7 +20861,7 @@
     }
 
     /**
-     * called by {@link canvas#textEditingManager}
+     * called by {@link Canvas#textEditingManager}
      */
     updateSelectionOnMouseMove(e) {
       if (this.getActiveControl()) {
@@ -23095,14 +23116,17 @@
         let offset = 0;
         const wordsOrGraphemes = splitByGrapheme ? this.graphemeSplit(line) : this.wordSplit(line);
         if (wordsOrGraphemes.length === 0) {
-          return [];
+          return [{
+            word: [],
+            width: 0
+          }];
         }
         return wordsOrGraphemes.map(word => {
           // if using splitByGrapheme words are already in graphemes.
           const graphemeArray = splitByGrapheme ? [word] : this.graphemeSplit(word);
           const width = this._measureWord(graphemeArray, lineIndex, offset);
           largestWordWidth = Math.max(width, largestWordWidth);
-          offset += word.length + infix.length;
+          offset += graphemeArray.length + infix.length;
           return {
             word: graphemeArray,
             width
@@ -23238,10 +23262,12 @@
     /**
      * Detect if a line has a linebreak and so we need to account for it when moving
      * 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) {
-      if (this.splitByGrapheme) {
+    missingNewlineOffset(lineIndex, skipWrapping) {
+      if (this.splitByGrapheme && !skipWrapping) {
         return this.isEndOfWrapping(lineIndex) ? 1 : 0;
       }
       return 1;
@@ -25017,15 +25043,14 @@
   const anchorWrapper = (pointIndex, fn) => {
     return function (eventData, transform, x, y) {
       const poly = transform.target,
-        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, _objectSpread2(_objectSpread2({}, 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).subtract(poly.pathOffset).divide(polygonBaseSize).multiply(adjustFlip);
-      poly.setPositionByOrigin(pointInParentPlane, newPosition.x + 0.5, newPosition.y + 0.5);
+      const newPositionNormalized = anchorPoint.subtract(poly.pathOffset).divide(poly._getNonTransformedDimensions()).multiply(adjustFlip);
+      poly.setPositionByOrigin(anchorPointInParentPlane, newPositionNormalized.x + 0.5, newPositionNormalized.y + 0.5);
       return actionPerformed;
     };
   };