fix(serialization): restore explict class type

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(fabric): Fix the serialization and registry dependency from minification [#9009](https://github.com/fabricjs/fabric.js/pull/9009)
 - 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)

src/ClassRegistry.ts

@@ -34,10 +34,10 @@ export class ClassRegistry {
     if (classType) {
       this[JSON].set(classType, classConstructor);
     } else {
-      this[JSON].set(classConstructor.name, classConstructor);
+      this[JSON].set(classConstructor.type, classConstructor);
       // legacy
       // @TODO: needs to be removed in fabric 7 or 8
-      this[JSON].set(classConstructor.name.toLowerCase(), classConstructor);
+      this[JSON].set(classConstructor.type.toLowerCase(), classConstructor);
     }
   }
 
@@ -47,7 +47,7 @@ export class ClassRegistry {
 
   setSVGClass(classConstructor: any, SVGTagName?: string) {
     this[SVG].set(
-      SVGTagName ?? classConstructor.name.toLowerCase(),
+      SVGTagName ?? classConstructor.type.toLowerCase(),
       classConstructor
     );
   }

src/Pattern/Pattern.ts

@@ -17,10 +17,12 @@ import type {
  * @see {@link http://fabricjs.com/dynamic-patterns demo}
  */
 export class Pattern {
+  static type = '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

src/filters/BaseFilter.ts

@@ -22,9 +22,18 @@ export class BaseFilter {
    * @default
    */
   get type(): string {
-    return this.constructor.name;
+    return (this.constructor as typeof BaseFilter).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.
+   */
+  static type = 'BaseFilter';
+
   declare static defaults: Record<string, any>;
 
   /**

src/filters/BlendColor.ts

@@ -66,6 +66,8 @@ export class BlendColor extends BaseFilter {
 
   static defaults = blendColorDefaultValues;
 
+  static type = 'BlendColor';
+
   getCacheKey() {
     return `${this.type}_${this.mode}`;
   }

src/filters/BlendImage.ts

@@ -61,6 +61,8 @@ export class BlendImage extends BaseFilter {
    **/
   declare alpha: number;
 
+  static type = 'BlendImage';
+
   static defaults = blendImageDefaultValues;
 
   getCacheKey() {

src/filters/Blur.ts

@@ -38,6 +38,8 @@ export class Blur extends BaseFilter {
   declare horizontal: boolean;
   declare aspectRatio: number;
 
+  static type = 'Blur';
+
   static defaults = blurDefaultValues;
 
   getFragmentSource(): string {

src/filters/Brightness.ts

@@ -27,6 +27,8 @@ export class Brightness extends BaseFilter {
    */
   declare brightness: number;
 
+  static type = 'Brightness';
+
   static defaults = brightnessDefaultValues;
 
   getFragmentSource() {

src/filters/ColorMatrix.ts

@@ -45,6 +45,8 @@ export class ColorMatrix extends BaseFilter {
    */
   declare colorsOnly: boolean;
 
+  static type = 'ColorMatrix';
+
   static defaults = colorMatrixDefaultValues;
 
   setOptions({ matrix, ...options }: Record<string, any>) {

src/filters/ColorMatrixFilters.ts

@@ -7,6 +7,8 @@ export function createColorMatrixFilter(key: string, matrix: number[]) {
       return key;
     }
 
+    static type = key;
+
     static defaults = {
       ...colorMatrixDefaultValues,
       /**

src/filters/Composed.ts

@@ -12,6 +12,8 @@ export class Composed extends BaseFilter {
    */
   declare subFilters: BaseFilter[];
 
+  static type = 'Composed';
+
   constructor({
     subFilters = [],
     ...options

src/filters/Contrast.ts

@@ -25,6 +25,8 @@ export class Contrast extends BaseFilter {
    */
   declare contrast: number;
 
+  static type = 'Contrast';
+
   static defaults = contrastDefaultValues;
 
   getFragmentSource() {

src/filters/Convolute.ts

@@ -60,6 +60,8 @@ export class Convolute extends BaseFilter {
    */
   declare matrix: number[];
 
+  static type = 'Convolute';
+
   static defaults = convoluteDefaultValues;
 
   getCacheKey() {

src/filters/Gamma.ts

@@ -32,6 +32,8 @@ export class Gamma extends BaseFilter {
     b: Uint8Array;
   };
 
+  static type = 'Gamma';
+
   static defaults = gammaDefaultValues;
 
   getFragmentSource() {

src/filters/Grayscale.ts

@@ -21,6 +21,8 @@ export const grayscaleDefaultValues: Partial<TClassProperties<Grayscale>> = {
 export class Grayscale extends BaseFilter {
   declare mode: TGrayscaleMode;
 
+  static type = 'Grayscale';
+
   static defaults = grayscaleDefaultValues;
 
   /**

src/filters/HueRotation.ts

@@ -27,6 +27,8 @@ export class HueRotation extends ColorMatrix {
    */
   declare rotation: number;
 
+  static type = 'HueRotation';
+
   static defaults = hueRotationDefaultValues;
 
   calculateMatrix() {

src/filters/Invert.ts

@@ -31,6 +31,8 @@ export class Invert extends BaseFilter {
    */
   declare invert: boolean;
 
+  static type = 'Invert';
+
   static defaults = invertDefaultValues;
 
   /**

src/filters/Noise.ts

@@ -27,6 +27,8 @@ export class Noise extends BaseFilter {
    */
   declare noise: number;
 
+  static type = 'Noise';
+
   static defaults = noiseDefaultValues;
 
   getFragmentSource() {

src/filters/Pixelate.ts

@@ -21,6 +21,8 @@ export const pixelateDefaultValues: Partial<TClassProperties<Pixelate>> = {
 export class Pixelate extends BaseFilter {
   declare blocksize: number;
 
+  static type = 'Pixelate';
+
   static defaults = pixelateDefaultValues;
 
   /**

src/filters/RemoveColor.ts

@@ -41,6 +41,8 @@ export class RemoveColor extends BaseFilter {
    **/
   declare useAlpha: boolean;
 
+  static type = 'RemoveColor';
+
   static defaults = removeColorDefaultValues;
 
   getFragmentShader() {

src/filters/Resize.ts

@@ -60,6 +60,8 @@ export class Resize extends BaseFilter {
 
   declare fragmentSourceTOP: string;
 
+  static type = 'Resize';
+
   static defaults = resizeDefaultValues;
 
   /**

src/filters/Saturation.ts

@@ -30,6 +30,8 @@ export class Saturation extends BaseFilter {
    */
   declare saturation: number;
 
+  static type = 'Saturation';
+
   static defaults = saturationDefaultValues;
 
   getFragmentSource() {

src/filters/Vibrance.ts

@@ -29,6 +29,8 @@ export class Vibrance extends BaseFilter {
    */
   declare vibrance: number;
 
+  static type = 'Vibrance';
+
   static defaults = vibranceDefaultValues;
 
   getFragmentSource() {

src/gradient/Gradient.ts

@@ -101,6 +101,8 @@ export class Gradient<
    */
   declare readonly id: string | number;
 
+  static type = 'Gradient';
+
   constructor({
     type = 'linear' as T,
     gradientUnits = 'pixels',

src/shapes/ActiveSelection.ts

@@ -13,9 +13,12 @@ export class ActiveSelection extends Group {
    * meaning that the stack is ordered by the order in which objects were selected
    * @default `canvas-stacking`
    */
+  // TODO FIX THIS WITH THE DEFAULTS LOGIC
   multiSelectionStacking: 'canvas-stacking' | 'selection-order' =
     'canvas-stacking';
 
+  static type = 'ActiveSelection';
+
   constructor(
     objects?: FabricObject[],
     options?: any,

src/shapes/Circle.ts

@@ -64,6 +64,8 @@ export class Circle<
   declare startAngle: number;
   declare endAngle: number;
 
+  static type = 'Circle';
+
   static cacheProperties = [...cacheProperties, ...CIRCLE_PROPS];
 
   static ownDefaults: Record<string, any> = circleDefaultValues;

src/shapes/Ellipse.ts

@@ -51,6 +51,8 @@ export class Ellipse<
    */
   declare ry: number;
 
+  static type = 'Ellipse';
+
   static cacheProperties = [...cacheProperties, ...ELLIPSE_PROPS];
 
   static ownDefaults: Record<string, any> = ellipseDefaultValues;

src/shapes/Group.ts

@@ -151,6 +151,8 @@ export class Group extends createCollectionMixin(
     'layout',
   ];
 
+  static type = 'Group';
+
   static ownDefaults: Record<string, any> = groupDefaultValues;
   private __objectSelectionTracker: (ev: ObjectEvents['selected']) => void;
   private __objectSelectionDisposer: (ev: ObjectEvents['deselected']) => void;

src/shapes/IText/IText.ts

@@ -202,6 +202,8 @@ export class IText<
     return { ...super.getDefaults(), ...IText.ownDefaults };
   }
 
+  static type = 'IText';
+
   get type() {
     return 'i-text';
   }

src/shapes/Image.ts

@@ -170,6 +170,8 @@ export class Image<
   protected declare _originalElement: ImageSource;
   protected declare _filteredEl: ImageSource;
 
+  static type = 'Image';
+
   static cacheProperties = [...cacheProperties, ...IMAGE_PROPS];
 
   static ownDefaults: Record<string, any> = imageDefaultValues;

src/shapes/Line.ts

@@ -65,6 +65,8 @@ export class Line<
    */
   declare y2: number;
 
+  static type = 'Line';
+
   static cacheProperties = [...cacheProperties, ...coordProps];
   /**
    * Constructor

src/shapes/Object/Object.ts

@@ -268,6 +268,15 @@ export class FabricObject<
     return { ...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.
+   */
+  static type = 'FabricObject';
+
   /**
    * Legacy identifier of the class. Prefer using utils like isType or instanceOf
    * Will be removed in fabric 7 or 8.
@@ -278,7 +287,7 @@ export class FabricObject<
    * @deprecated
    */
   get type() {
-    const name = this.constructor.name;
+    const name = (this.constructor as typeof FabricObject).type;
     if (name === 'FabricObject') {
       return 'object';
     }
@@ -515,7 +524,7 @@ export class FabricObject<
           : null,
       object = {
         ...pick(this, propertiesToInclude as (keyof this)[]),
-        type: this.constructor.name,
+        type: (this.constructor as typeof FabricObject).type,
         version: VERSION,
         originX: this.originX,
         originY: this.originY,
@@ -609,7 +618,7 @@ export class FabricObject<
    * @return {String}
    */
   toString() {
-    return `#<${this.constructor.name}>`;
+    return `#<${(this.constructor as typeof FabricObject).type}>`;
   }
 
   /**
@@ -1454,7 +1463,10 @@ export class FabricObject<
    * @return {Boolean}
    */
   isType(...types: string[]) {
-    return types.includes(this.constructor.name) || types.includes(this.type);
+    return (
+      types.includes((this.constructor as typeof FabricObject).type) ||
+      types.includes(this.type)
+    );
   }
 
   /**

src/shapes/Path.ts

@@ -63,6 +63,8 @@ export class Path<
 
   declare segmentsInfo?: TPathSegmentInfo[];
 
+  static type = 'Path';
+
   static cacheProperties = [...cacheProperties, 'path', 'fillRule'];
 
   /**

src/shapes/Polygon.ts

@@ -4,6 +4,8 @@ import { Polyline, polylineDefaultValues } from './Polyline';
 export class Polygon extends Polyline {
   static ownDefaults: Record<string, any> = polylineDefaultValues;
 
+  static type = 'Polygon';
+
   static getDefaults() {
     return {
       ...super.getDefaults(),