fabric 6.6.2 → 6.6.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [6.6.5]
+
+- feat(Text): Support for intl.segmenter in fabric.Text [#10595](https://github.com/fabricjs/fabric.js/pull/10595)
+
+## [6.6.4]
+
+- chore(): properly updated version number
+
+## [6.6.3]
+
+- docs(): Fixed JSDOCS for astro and typedoc
+
 ## [6.6.2]
 
 - feat(IText): Allow text or container clipPath to clip the text selection or cursor [#104634](https://github.com/fabricjs/fabric.js/pull/10434)

package/dist/index.js

@@ -411,7 +411,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.6.2";
+  var version = "6.6.5";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -1648,7 +1648,7 @@
   const multiplyTransformMatrices = (a, b, is2x2) => [a[0] * b[0] + a[2] * b[1], a[1] * b[0] + a[3] * b[1], a[0] * b[2] + a[2] * b[3], a[1] * b[2] + a[3] * b[3], is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5]];
 
   /**
-   * Multiplies {@link matrices} such that a matrix defines the plane for the rest of the matrices **after** it
+   * Multiplies {@link TMat2D} such that a matrix defines the plane for the rest of the matrices **after** it
    *
    * `multiplyTransformMatrixArray([A, B, C, D])` is equivalent to `A(B(C(D)))`
    *
@@ -5870,7 +5870,7 @@
     }
 
     /**
-     * Use the ray casting algorithm to determine if {@link point} is in the polygon defined by {@link points}
+     * Use the ray casting algorithm to determine if {@link Point} is in the polygon defined by [points]{@link Point}
      * @see https://en.wikipedia.org/wiki/Point_in_polygon
      * @param point
      * @param points polygon points
@@ -6089,35 +6089,35 @@
      */
 
     /**
-     * @returns {number} x position according to object's {@link originX} property in canvas coordinate plane
+     * @returns {number} x position according to object's {@link FabricObject#originX} property in canvas coordinate plane
      */
     getX() {
       return this.getXY().x;
     }
 
     /**
-     * @param {number} value x position according to object's {@link originX} property in canvas coordinate plane
+     * @param {number} value x position according to object's {@link FabricObject#originX} property in canvas coordinate plane
      */
     setX(value) {
       this.setXY(this.getXY().setX(value));
     }
 
     /**
-     * @returns {number} y position according to object's {@link originY} property in canvas coordinate plane
+     * @returns {number} y position according to object's {@link FabricObject#originY} property in canvas coordinate plane
      */
     getY() {
       return this.getXY().y;
     }
 
     /**
-     * @param {number} value y position according to object's {@link originY} property in canvas coordinate plane
+     * @param {number} value y position according to object's {@link FabricObject#originY} property in canvas coordinate plane
      */
     setY(value) {
       this.setXY(this.getXY().setY(value));
     }
 
     /**
-     * @returns {number} x position according to object's {@link originX} property in parent's coordinate plane\
+     * @returns {number} x position according to object's {@link FabricObject#originX} property in parent's coordinate plane\
      * if parent is canvas then this property is identical to {@link getX}
      */
     getRelativeX() {
@@ -6125,7 +6125,7 @@
     }
 
     /**
-     * @param {number} value x position according to object's {@link originX} property in parent's coordinate plane\
+     * @param {number} value x position according to object's {@link FabricObject#originX} property in parent's coordinate plane\
      * if parent is canvas then this method is identical to {@link setX}
      */
     setRelativeX(value) {
@@ -6133,7 +6133,7 @@
     }
 
     /**
-     * @returns {number} y position according to object's {@link originY} property in parent's coordinate plane\
+     * @returns {number} y position according to object's {@link FabricObject#originY} property in parent's coordinate plane\
      * if parent is canvas then this property is identical to {@link getY}
      */
     getRelativeY() {
@@ -6141,7 +6141,7 @@
     }
 
     /**
-     * @param {number} value y position according to object's {@link originY} property in parent's coordinate plane\
+     * @param {number} value y position according to object's {@link FabricObject#originY} property in parent's coordinate plane\
      * if parent is canvas then this property is identical to {@link setY}
      */
     setRelativeY(value) {
@@ -6149,7 +6149,7 @@
     }
 
     /**
-     * @returns {Point} x position according to object's {@link originX} {@link originY} properties in canvas coordinate plane
+     * @returns {Point} x position according to object's {@link FabricObject#originX} {@link FabricObject#originY} properties in canvas coordinate plane
      */
     getXY() {
       const relativePosition = this.getRelativeXY();
@@ -6158,7 +6158,7 @@
 
     /**
      * Set an object position to a particular point, the point is intended in absolute ( canvas ) coordinate.
-     * You can specify {@link originX} and {@link originY} values,
+     * You can specify {@link FabricObject#originX} and {@link FabricObject#originY} values,
      * that otherwise are the object's current values.
      * @example <caption>Set object's bottom left corner to point (5,5) on canvas</caption>
      * object.setXY(new Point(5, 5), 'left', 'bottom').
@@ -6174,7 +6174,7 @@
     }
 
     /**
-     * @returns {Point} x,y position according to object's {@link originX} {@link originY} properties in parent's coordinate plane
+     * @returns {Point} x,y position according to object's {@link FabricObject#originX} {@link FabricObject#originY} properties in parent's coordinate plane
      */
     getRelativeXY() {
       return new Point(this.left, this.top);
@@ -6182,7 +6182,7 @@
 
     /**
      * As {@link setXY}, but in current parent's coordinate plane (the current group if any or the canvas)
-     * @param {Point} point position according to object's {@link originX} {@link originY} properties in parent's coordinate plane
+     * @param {Point} point position according to object's {@link FabricObject#originX} {@link FabricObject#originY} properties in parent's coordinate plane
      * @param {TOriginX} [originX] Horizontal origin: 'left', 'center' or 'right'
      * @param {TOriginY} [originY] Vertical origin: 'top', 'center' or 'bottom'
      */
@@ -6218,7 +6218,9 @@
     }
 
     /**
-     * Checks if object intersects with the scene rect formed by {@link tl} and {@link br}
+     * Checks if object intersects with the scene rect formed by TL and BR
+     * In this case the rect is meant aligned with the axis of the canvas.
+     * TL is the TOP LEFT point while br is the BOTTOM RIGHT point
      */
     intersectsWithRect(tl, br) {
       const intersection = Intersection.intersectPolygonRectangle(this.getCoords(), tl, br);
@@ -6246,7 +6248,7 @@
     }
 
     /**
-     * Checks if object is fully contained within the scene rect formed by {@link tl} and {@link br}
+     * Checks if object is fully contained within the scene rect formed by TL and BR
      */
     isContainedWithinRect(tl, br) {
       const {
@@ -10269,6 +10271,15 @@
    * @return {String} Escaped version of a string
    */
   const escapeXml = string => string.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&apos;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  let segmenter;
+  const getSegmenter = () => {
+    if (!segmenter) {
+      segmenter = 'Intl' in getFabricWindow() && 'Segmenter' in Intl && new Intl.Segmenter(undefined, {
+        granularity: 'grapheme'
+      });
+    }
+    return segmenter;
+  };
 
   /**
    * Divide a string in the user perceived single units
@@ -10276,6 +10287,21 @@
    * @return {Array} array containing the graphemes
    */
   const graphemeSplit = textstring => {
+    segmenter || getSegmenter();
+    if (segmenter) {
+      const segments = segmenter.segment(textstring);
+      return Array.from(segments).map(_ref => {
+        let {
+          segment
+        } = _ref;
+        return segment;
+      });
+    }
+
+    //Fallback
+    return graphemeSplitImpl(textstring);
+  };
+  const graphemeSplitImpl = textstring => {
     const graphemes = [];
     for (let i = 0, chr; i < textstring.length; i++) {
       if ((chr = getWholeChar(textstring, i)) === false) {