fabric 6.0.0-beta8 → 6.0.0-beta9

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## [next]
 
+## [6.0.0-beta9]
+
+- fix(fabric): Fix the serialization and registry dependency from minification [#9009](https://github.com/fabricjs/fabric.js/pull/9009)
+- chore(TS): remove troublesome `AssertKeys` TS construct [#9012](https://github.com/fabricjs/fabric.js/pull/9012)
+- fix(lib): fix aligning_guideline zoom [#8998](https://github.com/fabricjs/fabric.js/pull/8998)
+- fix(IText): support control interaction in text editing mode [#8995](https://github.com/fabricjs/fabric.js/pull/8995)
+- fix(Textbox): `splitByGrapheme` measurements infix length bug [#8990](https://github.com/fabricjs/fabric.js/pull/8990)
+- patch(Text): styles es6 minor patch [#8988](https://github.com/fabricjs/fabric.js/pull/8988)
+
 ## [6.0.0-beta8]
 
 - BREAKING fix(IText): detect cursor from proper offsets, remove getLocalPointer from IText class [#8972](https://github.com/fabricjs/fabric.js/pull/8972)

package/dist/index.js

@@ -416,7 +416,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.0.0-beta8";
+  var version = "6.0.0-beta9";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -472,17 +472,17 @@
       if (classType) {
         this[JSON$1].set(classType, classConstructor);
       } else {
-        this[JSON$1].set(classConstructor.name, classConstructor);
+        this[JSON$1].set(classConstructor.type, classConstructor);
         // legacy
         // @TODO: needs to be removed in fabric 7 or 8
-        this[JSON$1].set(classConstructor.name.toLowerCase(), classConstructor);
+        this[JSON$1].set(classConstructor.type.toLowerCase(), classConstructor);
       }
     }
     getSVGClass(SVGTagName) {
       return this[SVG].get(SVGTagName);
     }
     setSVGClass(classConstructor, SVGTagName) {
-      this[SVG].set(SVGTagName !== null && SVGTagName !== void 0 ? SVGTagName : classConstructor.name.toLowerCase(), classConstructor);
+      this[SVG].set(SVGTagName !== null && SVGTagName !== void 0 ? SVGTagName : classConstructor.type.toLowerCase(), classConstructor);
     }
   }
   const classRegistry = new ClassRegistry();
@@ -7364,6 +7364,14 @@
       return _objectSpread2({}, FabricObject.ownDefaults);
     }
 
+    /**
+     * The class type. Used to identify which class this is.
+     * This is used for serialization purposes and internally it can be used
+     * to identify classes. As a developer you could use `instance of Class`
+     * but to avoid importing all the code and blocking tree shaking we try
+     * to avoid doing that.
+     */
+
     /**
      * Legacy identifier of the class. Prefer using utils like isType or instanceOf
      * Will be removed in fabric 7 or 8.
@@ -7374,7 +7382,7 @@
      * @deprecated
      */
     get type() {
-      const name = this.constructor.name;
+      const name = this.constructor.type;
       if (name === 'FabricObject') {
         return 'object';
       }
@@ -7588,7 +7596,7 @@
           absolutePositioned: this.clipPath.absolutePositioned
         }) : null,
         object = _objectSpread2(_objectSpread2({}, pick(this, propertiesToInclude)), {}, {
-          type: this.constructor.name,
+          type: this.constructor.type,
           version: VERSION,
           originX: this.originX,
           originY: this.originY,
@@ -7661,7 +7669,7 @@
      * @return {String}
      */
     toString() {
-      return "#<".concat(this.constructor.name, ">");
+      return "#<".concat(this.constructor.type, ">");
     }
 
     /**
@@ -8413,7 +8421,7 @@
       for (var _len = arguments.length, types = new Array(_len), _key = 0; _key < _len; _key++) {
         types[_key] = arguments[_key];
       }
-      return types.includes(this.constructor.name) || types.includes(this.type);
+      return types.includes(this.constructor.type) || types.includes(this.type);
     }
 
     /**
@@ -8530,6 +8538,7 @@
   _defineProperty(FabricObject$1, "stateProperties", stateProperties);
   _defineProperty(FabricObject$1, "cacheProperties", cacheProperties);
   _defineProperty(FabricObject$1, "ownDefaults", fabricObjectDefaultValues);
+  _defineProperty(FabricObject$1, "type", 'FabricObject');
   classRegistry.setClass(FabricObject$1);
   classRegistry.setClass(FabricObject$1, 'object');
 
@@ -10715,6 +10724,7 @@
 
     /* _FROM_SVG_END_ */
   }
+  _defineProperty(Rect, "type", 'Rect');
   _defineProperty(Rect, "cacheProperties", [...cacheProperties, ...RECT_PROPS]);
   _defineProperty(Rect, "ownDefaults", rectDefaultValues);
   _defineProperty(Rect, "ATTRIBUTE_NAMES", [...SHARED_ATTRIBUTES, 'x', 'y', 'rx', 'ry', 'width', 'height']);
@@ -11596,6 +11606,7 @@
     }
   }
   _defineProperty(Group, "stateProperties", [...FabricObject.stateProperties, 'layout']);
+  _defineProperty(Group, "type", 'Group');
   _defineProperty(Group, "ownDefaults", groupDefaultValues);
   classRegistry.setClass(Group);
 
@@ -11606,8 +11617,7 @@
      * - `selection-order` adds the selected object to the top of the stack,
      * meaning that the stack is ordered by the order in which objects were selected
      * @default `canvas-stacking`
-     */
-
+     */ // TODO FIX THIS WITH THE DEFAULTS LOGIC
     constructor(objects, options, objectsRelativeToGroup) {
       super(objects, options, objectsRelativeToGroup);
       _defineProperty(this, "multiSelectionStacking", 'canvas-stacking');
@@ -11768,6 +11778,7 @@
       ctx.restore();
     }
   }
+  _defineProperty(ActiveSelection, "type", 'ActiveSelection');
   classRegistry.setClass(ActiveSelection);
   classRegistry.setClass(ActiveSelection, 'activeSelection');
 
@@ -16605,7 +16616,7 @@
     }
     /* _FROM_SVG_END_ */
   }
-
+  _defineProperty(Gradient, "type", 'Gradient');
   classRegistry.setClass(Gradient, 'gradient');
 
   const _excluded$b = ["source"];
@@ -16615,9 +16626,9 @@
    */
   class Pattern {
     /**
-     * Legacy identifier of the class. Prefer using this.constructor.name 'Pattern'
-     * or utils like isPattern
-     * Will be removed in fabric 7 or 8.
+     * Legacy identifier of the class. Prefer using this.constructor.type 'Pattern'
+     * or utils like isPattern, or instance of to indentify a pattern in your code.
+     * Will be removed in future versiones
      * @TODO add sustainable warning message
      * @type string
      * @deprecated
@@ -16778,6 +16789,7 @@
       }));
     }
   }
+  _defineProperty(Pattern, "type", 'Pattern');
   classRegistry.setClass(Pattern);
   // kept for compatibility reason
   classRegistry.setClass(Pattern, 'pattern');
@@ -17243,6 +17255,7 @@
       }));
     }
   }
+  _defineProperty(Path, "type", 'Path');
   _defineProperty(Path, "cacheProperties", [...cacheProperties, 'path', 'fillRule']);
   _defineProperty(Path, "ATTRIBUTE_NAMES", [...SHARED_ATTRIBUTES, 'd']);
   classRegistry.setClass(Path);
@@ -17678,6 +17691,7 @@
       return super._fromObject(object);
     }
   }
+  _defineProperty(Circle, "type", 'Circle');
   _defineProperty(Circle, "cacheProperties", [...cacheProperties, ...CIRCLE_PROPS]);
   _defineProperty(Circle, "ownDefaults", circleDefaultValues);
   _defineProperty(Circle, "ATTRIBUTE_NAMES", ['cx', 'cy', 'r', ...SHARED_ATTRIBUTES]);
@@ -18312,6 +18326,7 @@
       });
     }
   }
+  _defineProperty(Line, "type", 'Line');
   _defineProperty(Line, "cacheProperties", [...cacheProperties, ...coordProps]);
   _defineProperty(Line, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat(coordProps));
   classRegistry.setClass(Line);
@@ -18353,6 +18368,7 @@
       return ['<polygon ', 'COMMON_PARTS', 'points="', points, '" />'];
     }
   }
+  _defineProperty(Triangle, "type", 'Triangle');
   _defineProperty(Triangle, "ownDefaults", triangleDefaultValues);
   classRegistry.setClass(Triangle);
   classRegistry.setSVGClass(Triangle);
@@ -18472,6 +18488,7 @@
 
     /* _FROM_SVG_END_ */
   }
+  _defineProperty(Ellipse, "type", 'Ellipse');
   _defineProperty(Ellipse, "cacheProperties", [...cacheProperties, ...ELLIPSE_PROPS]);
   _defineProperty(Ellipse, "ownDefaults", ellipseDefaultValues);
   _defineProperty(Ellipse, "ATTRIBUTE_NAMES", [...SHARED_ATTRIBUTES, 'cx', 'cy', 'rx', 'ry']);
@@ -18701,7 +18718,7 @@
       for (let i = 0, len = this.points.length; i < len; i++) {
         points.push(toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ');
       }
-      return ["<".concat(this.constructor.name.toLowerCase(), " "), 'COMMON_PARTS', "points=\"".concat(points.join(''), "\" />\n")];
+      return ["<".concat(this.constructor.type.toLowerCase(), " "), 'COMMON_PARTS', "points=\"".concat(points.join(''), "\" />\n")];
     }
 
     /**
@@ -18773,6 +18790,7 @@
     }
   }
   _defineProperty(Polyline, "ownDefaults", polylineDefaultValues);
+  _defineProperty(Polyline, "type", 'Polyline');
   _defineProperty(Polyline, "layoutProperties", ['skewX', 'skewY', 'strokeLineCap', 'strokeLineJoin', 'strokeMiterLimit', 'strokeWidth', 'strokeUniform', 'points']);
   _defineProperty(Polyline, "cacheProperties", [...cacheProperties, 'points']);
   _defineProperty(Polyline, "ATTRIBUTE_NAMES", [...SHARED_ATTRIBUTES]);
@@ -18788,6 +18806,7 @@
     }
   }
   _defineProperty(Polygon, "ownDefaults", polylineDefaultValues);
+  _defineProperty(Polygon, "type", 'Polygon');
   classRegistry.setClass(Polygon);
   classRegistry.setSVGClass(Polygon);
 
@@ -19059,10 +19078,7 @@
      */
     _getStyleDeclaration(lineIndex, charIndex) {
       const lineStyle = this.styles && this.styles[lineIndex];
-      if (!lineStyle) {
-        return null;
-      }
-      return lineStyle[charIndex];
+      return lineStyle ? lineStyle[charIndex] : null;
     }
 
     /**
@@ -19073,15 +19089,7 @@
      * @return {Object} style object
      */
     getCompleteStyleDeclaration(lineIndex, charIndex) {
-      const style = this._getStyleDeclaration(lineIndex, charIndex) || {},
-        styleObject = {},
-        styleProps = this.constructor._styleProperties;
-      for (let i = 0; i < styleProps.length; i++) {
-        const prop = styleProps[i];
-        // @ts-expect-error TS complains even when we serve everything on a silver plate.
-        styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop];
-      }
-      return styleObject;
+      return _objectSpread2(_objectSpread2({}, pick(this, this.constructor._styleProperties)), this._getStyleDeclaration(lineIndex, charIndex) || {});
     }
 
     /**
@@ -20767,6 +20775,7 @@
   _defineProperty(Text, "textLayoutProperties", textLayoutProperties);
   _defineProperty(Text, "cacheProperties", [...cacheProperties, ...additionalProps]);
   _defineProperty(Text, "ownDefaults", textDefaultValues);
+  _defineProperty(Text, "type", 'Text');
   _defineProperty(Text, "genericFonts", ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']);
   _defineProperty(Text, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat('x', 'y', 'dx', 'dy', 'font-family', 'font-style', 'font-weight', 'font-size', 'letter-spacing', 'text-decoration', 'text-anchor'));
   applyMixins(Text, [TextSVGExportMixin]);
@@ -21410,6 +21419,9 @@
      * called by {@link canvas#textEditingManager}
      */
     updateSelectionOnMouseMove(e) {
+      if (this.__corner) {
+        return;
+      }
       const el = this.hiddenTextarea;
       // regain focus
       getDocumentFromElement(el).activeElement !== el && el.focus();
@@ -22665,7 +22677,7 @@
       let {
         e
       } = _ref;
-      if (!this.canvas || !this.editable || notALeftClick(e)) {
+      if (!this.canvas || !this.editable || notALeftClick(e) || this.__corner) {
         return;
       }
       if (this.draggableTextDelegate.start(e)) {
@@ -23424,6 +23436,7 @@
     }
   }
   _defineProperty(IText, "ownDefaults", iTextDefaultValues);
+  _defineProperty(IText, "type", 'IText');
   classRegistry.setClass(IText);
   // legacy
   classRegistry.setClass(IText, 'i-text');
@@ -23743,10 +23756,10 @@
         word = splitByGrapheme ? word : this.graphemeSplit(word);
         const width = this._measureWord(word, lineIndex, offset);
         largestWordWidth = Math.max(width, largestWordWidth);
-        offset += word.length + 1;
+        offset += word.length + infix.length;
         return {
-          word: word,
-          width: width
+          word,
+          width
         };
       });
       const maxWidth = Math.max(desiredWidth, largestWordWidth, this.dynamicMinWidth);
@@ -23856,6 +23869,7 @@
       return super.toObject(['minWidth', 'splitByGrapheme'].concat(propertiesToInclude));
     }
   }
+  _defineProperty(Textbox, "type", 'Textbox');
   _defineProperty(Textbox, "textLayoutProperties", [...IText.textLayoutProperties, 'width']);
   _defineProperty(Textbox, "ownDefaults", textboxDefaultValues);
   classRegistry.setClass(Textbox);
@@ -24990,6 +25004,7 @@
       });
     }
   }
+  _defineProperty(Image, "type", 'Image');
   _defineProperty(Image, "cacheProperties", [...cacheProperties, ...IMAGE_PROPS]);
   _defineProperty(Image, "ownDefaults", imageDefaultValues);
   _defineProperty(Image, "CSS_CANVAS", 'canvas-img');
@@ -25696,9 +25711,17 @@
      * @default
      */
     get type() {
-      return this.constructor.name;
+      return this.constructor.type;
     }
 
+    /**
+     * The class type. Used to identify which class this is.
+     * This is used for serialization purposes and internally it can be used
+     * to identify classes. As a developer you could use `instance of Class`
+     * but to avoid importing all the code and blocking tree shaking we try
+     * to avoid doing that.
+     */
+
     /**
      * Array of attributes to send with buffers. do not modify
      * @private
@@ -26013,6 +26036,7 @@
       return new this(filterOptions);
     }
   }
+  _defineProperty(BaseFilter, "type", 'BaseFilter');
 
   const blendColorFragmentSource = {
     multiply: 'gl_FragColor.rgb *= uColor.rgb;\n',
@@ -26194,6 +26218,7 @@
     }
   }
   _defineProperty(BlendColor, "defaults", blendColorDefaultValues);
+  _defineProperty(BlendColor, "type", 'BlendColor');
   classRegistry.setClass(BlendColor);
 
   const fragmentSource$c = {
@@ -26380,6 +26405,7 @@
       })));
     }
   }
+  _defineProperty(BlendImage, "type", 'BlendImage');
   _defineProperty(BlendImage, "defaults", blendImageDefaultValues);
   classRegistry.setClass(BlendImage);
 
@@ -26540,6 +26566,7 @@
       return delta;
     }
   }
+  _defineProperty(Blur, "type", 'Blur');
   _defineProperty(Blur, "defaults", blurDefaultValues);
   classRegistry.setClass(Blur);
 
@@ -26617,6 +26644,7 @@
       gl.uniform1f(uniformLocations.uBrightness, this.brightness);
     }
   }
+  _defineProperty(Brightness, "type", 'Brightness');
   _defineProperty(Brightness, "defaults", brightnessDefaultValues);
   classRegistry.setClass(Brightness);
 
@@ -26733,6 +26761,7 @@
       gl.uniform4fv(uniformLocations.uConstants, constants);
     }
   }
+  _defineProperty(ColorMatrix, "type", 'ColorMatrix');
   _defineProperty(ColorMatrix, "defaults", colorMatrixDefaultValues);
   classRegistry.setClass(ColorMatrix);
 
@@ -26742,7 +26771,7 @@
       get type() {
         return key;
       }
-    }, _defineProperty(_class, "defaults", _objectSpread2(_objectSpread2({}, colorMatrixDefaultValues), {}, {
+    }, _defineProperty(_class, "type", key), _defineProperty(_class, "defaults", _objectSpread2(_objectSpread2({}, colorMatrixDefaultValues), {}, {
       /**
        * Lock the matrix export for this kind of static, parameter less filters.
        */
@@ -26823,6 +26852,7 @@
       }));
     }
   }
+  _defineProperty(Composed, "type", 'Composed');
   classRegistry.setClass(Composed);
 
   const fragmentSource$8 = "\n  precision highp float;\n  uniform sampler2D uTexture;\n  uniform float uContrast;\n  varying vec2 vTexCoord;\n  void main() {\n    vec4 color = texture2D(uTexture, vTexCoord);\n    float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n    color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n    gl_FragColor = color;\n  }";
@@ -26897,6 +26927,7 @@
       gl.uniform1f(uniformLocations.uContrast, this.contrast);
     }
   }
+  _defineProperty(Contrast, "type", 'Contrast');
   _defineProperty(Contrast, "defaults", contrastDefaultValues);
   classRegistry.setClass(Contrast);
 
@@ -27069,6 +27100,7 @@
       });
     }
   }
+  _defineProperty(Convolute, "type", 'Convolute');
   _defineProperty(Convolute, "defaults", convoluteDefaultValues);
   classRegistry.setClass(Convolute);
 
@@ -27170,6 +27202,7 @@
       gl.uniform3fv(uniformLocations.uGamma, this.gamma);
     }
   }
+  _defineProperty(Gamma, "type", 'Gamma');
   _defineProperty(Gamma, "defaults", gammaDefaultValues);
   classRegistry.setClass(Gamma);
 
@@ -27260,6 +27293,7 @@
       return false;
     }
   }
+  _defineProperty(Grayscale, "type", 'Grayscale');
   _defineProperty(Grayscale, "defaults", grayscaleDefaultValues);
   classRegistry.setClass(Grayscale);
 
@@ -27310,6 +27344,7 @@
       super.applyTo(options);
     }
   }
+  _defineProperty(HueRotation, "type", 'HueRotation');
   _defineProperty(HueRotation, "defaults", hueRotationDefaultValues);
   classRegistry.setClass(HueRotation);
 
@@ -27399,6 +27434,7 @@
       gl.uniform1i(uniformLocations.uAlpha, Number(this.alpha));
     }
   }
+  _defineProperty(Invert, "type", 'Invert');
   _defineProperty(Invert, "defaults", invertDefaultValues);
   classRegistry.setClass(Invert);
 
@@ -27488,6 +27524,7 @@
       });
     }
   }
+  _defineProperty(Noise, "type", 'Noise');
   _defineProperty(Noise, "defaults", noiseDefaultValues);
   classRegistry.setClass(Noise);
 
@@ -27576,6 +27613,7 @@
       gl.uniform1f(uniformLocations.uBlocksize, this.blocksize);
     }
   }
+  _defineProperty(Pixelate, "type", 'Pixelate');
   _defineProperty(Pixelate, "defaults", pixelateDefaultValues);
   classRegistry.setClass(Pixelate);
 
@@ -27681,6 +27719,7 @@
       });
     }
   }
+  _defineProperty(RemoveColor, "type", 'RemoveColor');
   _defineProperty(RemoveColor, "defaults", removeColorDefaultValues);
   classRegistry.setClass(RemoveColor);
 
@@ -28129,6 +28168,7 @@
       };
     }
   }
+  _defineProperty(Resize, "type", 'Resize');
   _defineProperty(Resize, "defaults", resizeDefaultValues);
   classRegistry.setClass(Resize);
 
@@ -28208,6 +28248,7 @@
       gl.uniform1f(uniformLocations.uSaturation, -this.saturation);
     }
   }
+  _defineProperty(Saturation, "type", 'Saturation');
   _defineProperty(Saturation, "defaults", saturationDefaultValues);
   classRegistry.setClass(Saturation);
 
@@ -28289,6 +28330,7 @@
       gl.uniform1f(uniformLocations.uVibrance, -this.vibrance);
     }
   }
+  _defineProperty(Vibrance, "type", 'Vibrance');
   _defineProperty(Vibrance, "defaults", vibranceDefaultValues);
   classRegistry.setClass(Vibrance);