feat(): Replacement for getKlass utility

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(TS): replace getKlass utility with a registry that doesn't require full fabricJS to work [#8500](https://github.com/fabricjs/fabric.js/pull/8500)
 - chore(): use context in static constructors [#8522](https://github.com/fabricjs/fabric.js/issues/8522)
 - chore(TS): Convert Canvas class #8510
 - chore(TS): Move object classes #8511

src/filters/blendcolor_filter.class.ts

@@ -2,6 +2,7 @@ import { Color } from '../color';
 import { TClassProperties } from '../typedefs';
 import { AbstractBaseFilter } from './base_filter.class';
 import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Color Blend filter class
@@ -254,3 +255,4 @@ export const blendColorDefaultValues: Partial<TClassProperties<BlendColor>> = {
 };
 
 Object.assign(BlendColor.prototype, blendColorDefaultValues);
+classRegistry.setClass(BlendColor);

src/filters/blendimage_filter.class.ts

@@ -1,14 +1,15 @@
 // @ts-nocheck
 import { Image } from '../shapes/image.class';
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { createCanvasElement } from '../util/misc/dom';
 import { AbstractBaseFilter } from './base_filter.class';
-import {
+import type {
   T2DPipelineState,
   TWebGLPipelineState,
   TWebGLUniformLocationMap,
 } from './typedefs';
 import { WebGLFilterBackend } from './webgl_backend.class';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Image Blend filter class
@@ -248,3 +249,4 @@ export const blendImageDefaultValues: Partial<TClassProperties<BlendImage>> = {
 };
 
 Object.assign(BlendImage.prototype, blendImageDefaultValues);
+classRegistry.setClass(BlendImage);

src/filters/blur_filter.class.ts

@@ -1,13 +1,14 @@
 // @ts-nocheck
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { createCanvasElement } from '../util/misc/dom';
 import { BaseFilter } from './base_filter.class';
-import {
+import type {
   TWebGLPipelineState,
   T2DPipelineState,
   TWebGLUniformLocationMap,
-  isWebGLPipelineState,
 } from './typedefs';
+import { isWebGLPipelineState } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Blur filter class
@@ -199,3 +200,4 @@ export const blurDefaultValues: Partial<TClassProperties<Blur>> = {
 };
 
 Object.assign(Blur.prototype, blurDefaultValues);
+classRegistry.setClass(Blur);

src/filters/brightness_filter.class.ts

@@ -1,7 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
-
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 /**
  * Brightness filter class
  * @example
@@ -90,3 +90,4 @@ export const brightnessDefaultValues: Partial<TClassProperties<Brightness>> = {
 };
 
 Object.assign(Brightness.prototype, brightnessDefaultValues);
+classRegistry.setClass(Brightness);

src/filters/colormatrix_filter.class.ts

@@ -1,7 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
-
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 /**
    * Color Matrix filter class
    * @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
@@ -153,3 +153,4 @@ export const colorMatrixDefaultValues: Partial<TClassProperties<ColorMatrix>> =
   };
 
 Object.assign(ColorMatrix.prototype, colorMatrixDefaultValues);
+classRegistry.setClass(ColorMatrix);

src/filters/composed_filter.class.ts

@@ -1,16 +1,14 @@
 // @ts-nocheck
-import * as filters from '.';
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import {
   AbstractBaseFilter,
   BaseFilter,
   BaseFilterOptions,
 } from './base_filter.class';
-import {
-  isWebGLPipelineState,
-  T2DPipelineState,
-  TWebGLPipelineState,
-} from './typedefs';
+import type { T2DPipelineState, TWebGLPipelineState } from './typedefs';
+import { isWebGLPipelineState } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
 /**
  * A container class that knows how to apply a sequence of filters to an input image.
  */
@@ -70,9 +68,7 @@ export class Composed extends BaseFilter {
   static fromObject(object, options) {
     return Promise.all(
       ((object.subFilters || []) as AbstractBaseFilter[]).map((filter) =>
-        Object.values(filters)
-          .find((klass) => klass.prototype?.type === filter.type)!
-          .fromObject(filter, options)
+        classRegistry.getClass(filter.type).fromObject(filter, options)
       )
     ).then((enlivedFilters) => new Composed({ subFilters: enlivedFilters }));
   }
@@ -83,3 +79,4 @@ export const composedDefaultValues: Partial<TClassProperties<Composed>> = {
 };
 
 Object.assign(Composed.prototype, composedDefaultValues);
+classRegistry.setClass(Composed);

src/filters/contrast_filter.class.ts

@@ -1,6 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Contrast filter class
@@ -90,3 +91,4 @@ export const contrastDefaultValues: Partial<TClassProperties<Contrast>> = {
 };
 
 Object.assign(Contrast.prototype, contrastDefaultValues);
+classRegistry.setClass(Contrast);

src/filters/convolute_filter.class.ts

@@ -1,6 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { AbstractBaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Adapted from <a href="http://www.html5rocks.com/en/tutorials/canvas/imagefilters/">html5rocks article</a>
@@ -337,3 +338,4 @@ export const convoluteDefaultValues: Partial<TClassProperties<Convolute>> = {
 };
 
 Object.assign(Convolute.prototype, convoluteDefaultValues);
+classRegistry.setClass(Convolute);

src/filters/filter_generator.ts

@@ -1,4 +1,5 @@
 import { ColorMatrix } from './colormatrix_filter.class';
+import { classRegistry } from '../util/class_registry';
 
 export function createColorMatrixFilter(key: string, matrix: number[]) {
   return class GeneratedColorMatrix extends ColorMatrix {
@@ -42,6 +43,8 @@ export const Brownie = createColorMatrixFilter(
   ]
 );
 
+classRegistry.setClass(Brownie);
+
 export const Vintage = createColorMatrixFilter(
   'Vintage',
   [
@@ -50,6 +53,8 @@ export const Vintage = createColorMatrixFilter(
   ]
 );
 
+classRegistry.setClass(Vintage);
+
 export const Kodachrome = createColorMatrixFilter(
   'Kodachrome',
   [
@@ -58,6 +63,8 @@ export const Kodachrome = createColorMatrixFilter(
   ]
 );
 
+classRegistry.setClass(Kodachrome);
+
 export const Technicolor = createColorMatrixFilter(
   'Technicolor',
   [
@@ -66,6 +73,8 @@ export const Technicolor = createColorMatrixFilter(
   ]
 );
 
+classRegistry.setClass(Technicolor);
+
 export const Polaroid = createColorMatrixFilter(
   'Polaroid',
   [
@@ -74,6 +83,8 @@ export const Polaroid = createColorMatrixFilter(
   ]
 );
 
+classRegistry.setClass(Polaroid);
+
 export const Sepia = createColorMatrixFilter(
   'Sepia',
   [
@@ -82,10 +93,14 @@ export const Sepia = createColorMatrixFilter(
   ]
 );
 
+classRegistry.setClass(Sepia);
+
 export const BlackWhite = createColorMatrixFilter(
   'BlackWhite',
   [
     1.5, 1.5, 1.5, 0, -1, 1.5, 1.5, 1.5, 0, -1, 1.5, 1.5, 1.5, 0, -1, 0, 0, 0,
     1, 0,
   ]
 );
+
+classRegistry.setClass(BlackWhite);

src/filters/gamma_filter.class.ts

@@ -1,6 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter, BaseFilterOptions } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 export type GammaInput = [number, number, number];
 
@@ -123,3 +124,4 @@ export const gammaDefaultValues: Partial<TClassProperties<Gamma>> = {
 };
 
 Object.assign(Gamma.prototype, gammaDefaultValues);
+classRegistry.setClass(Gamma);

src/filters/grayscale_filter.class.ts

@@ -1,6 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { AbstractBaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Grayscale image filter class
@@ -133,3 +134,4 @@ export const grayscaleDefaultValues: Partial<TClassProperties<Grayscale>> = {
 };
 
 Object.assign(Grayscale.prototype, grayscaleDefaultValues);
+classRegistry.setClass(Grayscale);

src/filters/hue_rotation.class.ts

@@ -1,8 +1,9 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { cos } from '../util/misc/cos';
 import { sin } from '../util/misc/sin';
 import { ColorMatrix } from './colormatrix_filter.class';
-import { TWebGLPipelineState, T2DPipelineState } from './typedefs';
+import type { TWebGLPipelineState, T2DPipelineState } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * HueRotation filter class
@@ -62,3 +63,4 @@ export const hueRotationDefaultValues: Partial<TClassProperties<HueRotation>> =
   };
 
 Object.assign(HueRotation.prototype, hueRotationDefaultValues);
+classRegistry.setClass(HueRotation);

src/filters/invert_filter.class.ts

@@ -1,6 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * @example
@@ -113,3 +114,4 @@ export const invertDefaultValues: Partial<TClassProperties<Invert>> = {
 };
 
 Object.assign(Invert.prototype, invertDefaultValues);
+classRegistry.setClass(Invert);

src/filters/noise_filter.class.ts

@@ -1,6 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Noise filter class
@@ -105,3 +106,4 @@ export const noiseDefaultValues: Partial<TClassProperties<Noise>> = {
 };
 
 Object.assign(Noise.prototype, noiseDefaultValues);
+classRegistry.setClass(Noise);

src/filters/pixelate_filter.class.ts

@@ -1,6 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Pixelate filter class
@@ -110,3 +111,4 @@ export const pixelateDefaultValues: Partial<TClassProperties<Pixelate>> = {
 };
 
 Object.assign(Pixelate.prototype, pixelateDefaultValues);
+classRegistry.setClass(Pixelate);

src/filters/removecolor_filter.class.ts

@@ -1,7 +1,8 @@
 import { Color } from '../color';
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Remove white filter class
@@ -144,3 +145,4 @@ export const removeColorDefaultValues: Partial<TClassProperties<RemoveColor>> =
   };
 
 Object.assign(RemoveColor.prototype, removeColorDefaultValues);
+classRegistry.setClass(RemoveColor);

src/filters/resize_filter.class.ts

@@ -1,12 +1,10 @@
 // @ts-nocheck
 import { fabric } from '../../HEADER';
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './base_filter.class';
-import {
-  isWebGLPipelineState,
-  T2DPipelineState,
-  TWebGLPipelineState,
-} from './typedefs';
+import type { T2DPipelineState, TWebGLPipelineState } from './typedefs';
+import { isWebGLPipelineState } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Resize image filter class
@@ -539,3 +537,4 @@ export const resizeDefaultValues: Partial<TClassProperties<Resize>> = {
 };
 
 Object.assign(Resize.prototype, resizeDefaultValues);
+classRegistry.setClass(Resize);

src/filters/saturate_filter.class.ts

@@ -1,6 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Saturate filter class
@@ -96,3 +97,4 @@ export const saturationDefaultValues: Partial<TClassProperties<Saturation>> = {
 };
 
 Object.assign(Saturation.prototype, saturationDefaultValues);
+classRegistry.setClass(Saturation);

src/filters/vibrance_filter.class.ts

@@ -1,6 +1,7 @@
-import { TClassProperties } from '../typedefs';
+import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './base_filter.class';
-import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
 
 /**
  * Vibrance filter class
@@ -99,3 +100,4 @@ export const vibranceDefaultValues: Partial<TClassProperties<Vibrance>> = {
 };
 
 Object.assign(Vibrance.prototype, vibranceDefaultValues);
+classRegistry.setClass(Vibrance);