BREAKING: remove object type in favor of Class.name

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- BREAKING: static object/filter `type` [#87104](https://github.com/fabricjs/fabric.js/pull/8714)
 - chore(TS): remove default values from Objects prototypes, ( filters in a followup ) [#8719](https://github.com/fabricjs/fabric.js/issues/8719)
 - fix(Intersection): bug causing selection edge case [#8735](https://github.com/fabricjs/fabric.js/pull/8735)
 - chore(TS): class interface for options/brevity [#8674](https://github.com/fabricjs/fabric.js/issues/8674)

src/ClassRegistry.ts

@@ -31,21 +31,15 @@ export class ClassRegistry {
   }
 
   setClass(classConstructor: any, classType?: string) {
-    this[JSON].set(
-      classType ?? classConstructor.prototype.type,
-      classConstructor
-    );
+    this[JSON].set(classType ?? classConstructor.type, classConstructor);
   }
 
   getSVGClass(SVGTagName: string): any {
     return this[SVG].get(SVGTagName);
   }
 
   setSVGClass(classConstructor: any, SVGTagName?: string) {
-    this[SVG].set(
-      SVGTagName ?? classConstructor.prototype.type,
-      classConstructor
-    );
+    this[SVG].set(SVGTagName ?? classConstructor.type, classConstructor);
   }
 }
 

src/Collection.ts

@@ -100,7 +100,7 @@ export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
       if (types.length === 0) {
         return [...this._objects];
       }
-      return this._objects.filter((o) => types.includes(o.type));
+      return this._objects.filter((o) => o.isType(...types));
     }
 
     /**

src/Pattern.ts

@@ -39,8 +39,6 @@ type TCanvasSource = { source: HTMLCanvasElement };
  * @see {@link http://fabricjs.com/dynamic-patterns demo}
  */
 export class Pattern {
-  type = 'pattern';
-
   /**
    * @type TPatternRepeat
    * @defaults

src/filters/BaseFilter.ts

@@ -27,10 +27,8 @@ export interface AnyFilter
 export abstract class AbstractBaseFilter<T> {
   /**
    * Filter type
-   * @param {String} type
-   * @default
    */
-  declare type: string;
+  static readonly type = 'filter' as string;
 
   /**
    * Array of attributes to send with buffers. do not modify
@@ -52,9 +50,10 @@ export abstract class AbstractBaseFilter<T> {
    * Constructor
    * @param {Object} [options] Options object
    */
-  constructor(
-    options: Partial<AbstractBaseFilterOptions<T>> & Record<string, any> = {}
-  ) {
+  constructor({
+    type: _,
+    ...options
+  }: Partial<AbstractBaseFilterOptions<T>> & Record<string, any> = {}) {
     Object.assign(this, options);
   }
 
@@ -90,7 +89,7 @@ export abstract class AbstractBaseFilter<T> {
     gl.compileShader(vertexShader);
     if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
       throw new Error(
-        `Vertex shader compile error for ${this.type}: ${gl.getShaderInfoLog(
+        `Vertex shader compile error for ${this.getType()}: ${gl.getShaderInfoLog(
           vertexShader
         )}`
       );
@@ -100,7 +99,7 @@ export abstract class AbstractBaseFilter<T> {
     gl.compileShader(fragmentShader);
     if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
       throw new Error(
-        `Fragment shader compile error for ${this.type}: ${gl.getShaderInfoLog(
+        `Fragment shader compile error for ${this.getType()}: ${gl.getShaderInfoLog(
           fragmentShader
         )}`
       );
@@ -111,8 +110,9 @@ export abstract class AbstractBaseFilter<T> {
     gl.linkProgram(program);
     if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
       throw new Error(
-        // eslint-disable-next-line prefer-template
-        'Shader link error for "${this.type}" ' + gl.getProgramInfoLog(program)
+        `Shader link error for ${this.getType()} ${gl.getProgramInfoLog(
+          program
+        )}`
       );
     }
 
@@ -261,8 +261,12 @@ export abstract class AbstractBaseFilter<T> {
 
   abstract applyTo2d(options: T2DPipelineState): void;
 
+  protected getType() {
+    return (this.constructor as typeof BaseFilter).type;
+  }
+
   getCacheKey() {
-    return this.type;
+    return this.getType();
   }
 
   /**
@@ -371,7 +375,7 @@ export abstract class AbstractBaseFilter<T> {
   toObject() {
     const mainP = this.mainParameter;
     return {
-      type: this.type,
+      type: this.getType(),
       ...(mainP ? { [mainP]: this[mainP] } : {}),
     };
   }

src/filters/BlendColor.ts

@@ -22,6 +22,8 @@ import { classRegistry } from '../ClassRegistry';
  * canvas.renderAll();
  */
 export class BlendColor extends AbstractBaseFilter<Record<string, string>> {
+  static readonly type = 'BlendColor';
+
   /**
    * Color to make the blend operation with. default to a reddish color since black or white
    * gives always strong result.
@@ -74,7 +76,7 @@ export class BlendColor extends AbstractBaseFilter<Record<string, string>> {
   }
 
   getCacheKey() {
-    return `${this.type}_${this.mode}`;
+    return `${this.getType()}_${this.mode}`;
   }
 
   getFragmentSource(): string {
@@ -202,7 +204,7 @@ export class BlendColor extends AbstractBaseFilter<Record<string, string>> {
    */
   toObject() {
     return {
-      type: this.type,
+      type: this.getType(),
       color: this.color,
       mode: this.mode,
       alpha: this.alpha,
@@ -215,7 +217,6 @@ export class BlendColor extends AbstractBaseFilter<Record<string, string>> {
 }
 
 export const blendColorDefaultValues: Partial<TClassProperties<BlendColor>> = {
-  type: 'BlendColor',
   color: '#F95C63',
   mode: 'multiply',
   alpha: 1,

src/filters/BlendImage.ts

@@ -28,6 +28,8 @@ import { classRegistry } from '../ClassRegistry';
  * canvas.renderAll();
  */
 export class BlendImage extends AbstractBaseFilter<Record<string, string>> {
+  static readonly type = 'BlendImage';
+
   /**
    * Color to make the blend operation with. default to a reddish color since black or white
    * gives always strong result.
@@ -43,7 +45,7 @@ export class BlendImage extends AbstractBaseFilter<Record<string, string>> {
   declare alpha: number;
 
   getCacheKey() {
-    return `${this.type}_${this.mode}`;
+    return `${this.getType()}_${this.mode}`;
   }
 
   getFragmentSource(): string {
@@ -178,7 +180,7 @@ export class BlendImage extends AbstractBaseFilter<Record<string, string>> {
    */
   toObject() {
     return {
-      type: this.type,
+      type: this.getType(),
       image: this.image && this.image.toObject(),
       mode: this.mode,
       alpha: this.alpha,

src/filters/Blur.ts

@@ -20,6 +20,8 @@ import { classRegistry } from '../ClassRegistry';
  * canvas.renderAll();
  */
 export class Blur extends BaseFilter {
+  static readonly type = 'Blur';
+
   /**
    * blur value, in percentage of image dimensions.
    * specific to keep the image blur constant at different resolutions
@@ -169,7 +171,6 @@ export class Blur extends BaseFilter {
 }
 
 export const blurDefaultValues: Partial<TClassProperties<Blur>> = {
-  type: 'Blur',
   fragmentSource: `
     precision highp float;
     uniform sampler2D uTexture;

src/filters/Boilerplate.ts

@@ -12,6 +12,8 @@ import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
  * object.applyFilters();
  */
 export class MyFilter extends BaseFilter {
+  static readonly type = 'MyFilter';
+
   /**
    * MyFilter value, from -1 to 1.
    * translated to -255 to 255 for 2d
@@ -72,7 +74,6 @@ export class MyFilter extends BaseFilter {
 }
 
 export const myFilterDefaultValues: Partial<TClassProperties<MyFilter>> = {
-  type: 'MyFilter',
   fragmentSource: `
     precision highp float;
     uniform sampler2D uTexture;

src/filters/Brightness.ts

@@ -12,6 +12,8 @@ import { classRegistry } from '../ClassRegistry';
  * object.applyFilters();
  */
 export class Brightness extends BaseFilter {
+  static readonly type = 'Brightness';
+
   /**
    * Brightness value, from -1 to 1.
    * translated to -255 to 255 for 2d
@@ -73,7 +75,6 @@ export class Brightness extends BaseFilter {
 }
 
 export const brightnessDefaultValues: Partial<TClassProperties<Brightness>> = {
-  type: 'Brightness',
   fragmentSource: `
     precision highp float;
     uniform sampler2D uTexture;

src/filters/ColorMatrix.ts

@@ -19,6 +19,8 @@ import { classRegistry } from '../ClassRegistry';
    * object.applyFilters();
    */
 export class ColorMatrix extends BaseFilter {
+  static readonly type = 'ColorMatrix' as string;
+
   /**
    * Colormatrix for pixels.
    * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning
@@ -134,7 +136,6 @@ export class ColorMatrix extends BaseFilter {
 
 export const colorMatrixDefaultValues: Partial<TClassProperties<ColorMatrix>> =
   {
-    type: 'ColorMatrix',
     fragmentSource: `
       precision highp float;
       uniform sampler2D uTexture;

src/filters/ColorMatrixFilters.ts

@@ -8,7 +8,11 @@ export function createColorMatrixFilter(key: string, matrix: number[]) {
      * @param {String} type
      * @default
      */
-    type = key;
+    static readonly type = key;
+
+    getType() {
+      return super.getType();
+    }
 
     /**
      * Colormatrix for the effect

src/filters/Composed.ts

@@ -11,8 +11,10 @@ import { classRegistry } from '../ClassRegistry';
 /**
  * A container class that knows how to apply a sequence of filters to an input image.
  */
-// @ts-expect-error
+// @ts-expect-error doesn't implement abstract methods
 export class Composed extends BaseFilter {
+  static readonly type = 'Composed';
+
   /**
    * A non sparse array of filters to apply
    */
@@ -66,20 +68,17 @@ export class Composed extends BaseFilter {
    * @returns {Promise<Composed>}
    */
   static fromObject(
-    object: Record<string, any>,
+    object: Record<string, any> & {
+      subFilters?: (Record<string, any> & { type: string })[];
+    },
     options: { signal: AbortSignal }
   ) {
     return Promise.all(
-      ((object.subFilters || []) as AnyFilter[]).map((filter) =>
+      (object.subFilters || []).map((filter) =>
         classRegistry.getClass(filter.type).fromObject(filter, options)
       )
     ).then((enlivedFilters) => new Composed({ subFilters: enlivedFilters }));
   }
 }
 
-export const composedDefaultValues: Partial<TClassProperties<Composed>> = {
-  type: 'Composed',
-};
-
-Object.assign(Composed.prototype, composedDefaultValues);
 classRegistry.setClass(Composed);

src/filters/Contrast.ts

@@ -13,6 +13,8 @@ import { classRegistry } from '../ClassRegistry';
  * object.applyFilters();
  */
 export class Contrast extends BaseFilter {
+  static readonly type = 'Contrast';
+
   /**
    * contrast value, range from -1 to 1.
    * @param {Number} contrast
@@ -74,7 +76,6 @@ export class Contrast extends BaseFilter {
 }
 
 export const contrastDefaultValues: Partial<TClassProperties<Contrast>> = {
-  type: 'Contrast',
   fragmentSource: `
     precision highp float;
     uniform sampler2D uTexture;

src/filters/Convolute.ts

@@ -44,6 +44,8 @@ import { classRegistry } from '../ClassRegistry';
  * canvas.renderAll();
  */
 export class Convolute extends AbstractBaseFilter<Record<string, string>> {
+  static readonly type = 'Convolute';
+
   /*
    * Opaque value (true/false)
    */
@@ -55,7 +57,7 @@ export class Convolute extends AbstractBaseFilter<Record<string, string>> {
   declare matrix: number[];
 
   getCacheKey() {
-    return `${this.type}_${Math.sqrt(this.matrix.length)}_${
+    return `${this.getType()}_${Math.sqrt(this.matrix.length)}_${
       this.opaque ? 1 : 0
     }`;
   }
@@ -178,7 +180,6 @@ export class Convolute extends AbstractBaseFilter<Record<string, string>> {
 }
 
 export const convoluteDefaultValues: Partial<TClassProperties<Convolute>> = {
-  type: 'Convolute',
   opaque: false,
   matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0],
   fragmentSource: {

src/filters/Gamma.ts

@@ -15,6 +15,8 @@ export type GammaInput = [number, number, number];
  * object.applyFilters();
  */
 export class Gamma extends BaseFilter {
+  static readonly type = 'Gamma';
+
   /**
    * Gamma array value, from 0.01 to 2.2.
    * @param {Array} gamma
@@ -103,7 +105,6 @@ export class Gamma extends BaseFilter {
 }
 
 export const gammaDefaultValues: Partial<TClassProperties<Gamma>> = {
-  type: 'Gamma',
   fragmentSource: `
     precision highp float;
     uniform sampler2D uTexture;

src/filters/Grayscale.ts

@@ -11,6 +11,8 @@ import { classRegistry } from '../ClassRegistry';
  * object.applyFilters();
  */
 export class Grayscale extends AbstractBaseFilter<Record<string, string>> {
+  static readonly type = 'Grayscale';
+
   declare mode: 'average' | 'lightness' | 'luminosity';
 
   /**
@@ -43,7 +45,7 @@ export class Grayscale extends AbstractBaseFilter<Record<string, string>> {
   }
 
   getCacheKey() {
-    return `${this.type}_${this.mode}`;
+    return `${this.getType()}_${this.mode}`;
   }
 
   getFragmentSource() {
@@ -94,7 +96,6 @@ export class Grayscale extends AbstractBaseFilter<Record<string, string>> {
 }
 
 export const grayscaleDefaultValues: Partial<TClassProperties<Grayscale>> = {
-  type: 'Grayscale',
   fragmentSource: {
     average: `
       precision highp float;