@postermywall/fabricjs-2 6.0.0-rc2.0 → 6.0.0

package/src/filters/RemoveColor.ts

@@ -1,15 +1,20 @@
 import { classRegistry } from '../ClassRegistry';
 import { Color } from '../color/Color';
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import { fragmentShader } from './shaders/removeColor';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
-export const removeColorDefaultValues: Partial<TClassProperties<RemoveColor>> =
-  {
-    color: '#FFFFFF',
-    distance: 0.02,
-    useAlpha: false,
-  };
+
+export type RemoveColorOwnProps = {
+  color: string;
+  distance: number;
+  useAlpha: boolean;
+};
+
+export const removeColorDefaultValues: RemoveColorOwnProps = {
+  color: '#FFFFFF',
+  distance: 0.02,
+  useAlpha: false,
+};
 
 /**
  * Remove white filter class
@@ -21,30 +26,35 @@ export const removeColorDefaultValues: Partial<TClassProperties<RemoveColor>> =
  * object.applyFilters();
  * canvas.renderAll();
  */
-export class RemoveColor extends BaseFilter {
+export class RemoveColor extends BaseFilter<
+  'RemoveColor',
+  RemoveColorOwnProps
+> {
   /**
    * Color to remove, in any format understood by {@link Color}.
    * @param {String} type
    * @default
    */
-  declare color: string;
+  declare color: RemoveColorOwnProps['color'];
 
   /**
    * distance to actual color, as value up or down from each r,g,b
    * between 0 and 1
    **/
-  declare distance: number;
+  declare distance: RemoveColorOwnProps['distance'];
 
   /**
    * For color to remove inside distance, use alpha channel for a smoother deletion
    * NOT IMPLEMENTED YET
    **/
-  declare useAlpha: boolean;
+  declare useAlpha: RemoveColorOwnProps['useAlpha'];
 
   static type = 'RemoveColor';
 
   static defaults = removeColorDefaultValues;
 
+  static uniformLocations = ['uLow', 'uHigh'];
+
   getFragmentSource() {
     return fragmentShader;
   }
@@ -81,22 +91,6 @@ export class RemoveColor extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(
-    gl: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uLow: gl.getUniformLocation(program, 'uLow'),
-      uHigh: gl.getUniformLocation(program, 'uHigh'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -124,14 +118,6 @@ export class RemoveColor extends BaseFilter {
     gl.uniform4fv(uniformLocations.uLow, lowC);
     gl.uniform4fv(uniformLocations.uHigh, highC);
   }
-
-  /**
-   * Returns object representation of an instance
-   * @return {Object} Object representation of an instance
-   */
-  toObject() {
-    return { ...super.toObject(), color: this.color, distance: this.distance };
-  }
 }
 
 classRegistry.setClass(RemoveColor);

package/src/filters/Resize.ts

@@ -1,4 +1,3 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type {
   T2DPipelineState,
@@ -10,21 +9,22 @@ import { classRegistry } from '../ClassRegistry';
 import { createCanvasElement } from '../util/misc/dom';
 import type { XY } from '../Point';
 
-export const resizeDefaultValues: Partial<TClassProperties<Resize>> = {
+export type TResizeType = 'bilinear' | 'hermite' | 'sliceHack' | 'lanczos';
+
+export type ResizeOwnProps = {
+  resizeType: TResizeType;
+  scaleX: number;
+  scaleY: number;
+  lanczosLobes: number;
+};
+
+export const resizeDefaultValues: ResizeOwnProps = {
   resizeType: 'hermite',
   scaleX: 1,
   scaleY: 1,
   lanczosLobes: 3,
-  fragmentSourceTOP: `
-    precision highp float;
-    uniform sampler2D uTexture;
-    uniform vec2 uDelta;
-    varying vec2 vTexCoord;
-  `,
 };
 
-export type TResizeType = 'bilinear' | 'hermite' | 'sliceHack' | 'lanczos';
-
 type ResizeDuring2DResize = Resize & {
   rcpScaleX: number;
   rcpScaleY: number;
@@ -49,54 +49,41 @@ type ResizeDuringWEBGLResize = Resize & {
  * object.filters.push(filter);
  * object.applyFilters(canvas.renderAll.bind(canvas));
  */
-export class Resize extends BaseFilter {
+export class Resize extends BaseFilter<'Resize', ResizeOwnProps> {
   /**
    * Resize type
    * for webgl resizeType is just lanczos, for canvas2d can be:
    * bilinear, hermite, sliceHack, lanczos.
    * @default
    */
-  declare resizeType: TResizeType;
+  declare resizeType: ResizeOwnProps['resizeType'];
 
   /**
    * Scale factor for resizing, x axis
    * @param {Number} scaleX
    * @default
    */
-  declare scaleX: number;
+  declare scaleX: ResizeOwnProps['scaleX'];
 
   /**
    * Scale factor for resizing, y axis
    * @param {Number} scaleY
    * @default
    */
-  declare scaleY: number;
+  declare scaleY: ResizeOwnProps['scaleY'];
 
   /**
    * LanczosLobes parameter for lanczos filter, valid for resizeType lanczos
    * @param {Number} lanczosLobes
    * @default
    */
-  declare lanczosLobes: number;
-
-  declare fragmentSourceTOP: string;
+  declare lanczosLobes: ResizeOwnProps['lanczosLobes'];
 
   static type = 'Resize';
 
   static defaults = resizeDefaultValues;
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl: WebGLRenderingContext, program: WebGLProgram) {
-    return {
-      uDelta: gl.getUniformLocation(program, 'uDelta'),
-      uTaps: gl.getUniformLocation(program, 'uTaps'),
-    };
-  }
+  static uniformLocations = ['uDelta', 'uTaps'];
 
   /**
    * Send data from this filter to its shader program's uniforms.
@@ -152,7 +139,10 @@ export class Resize extends BaseFilter {
       offsets[i - 1] = `${i}.0 * uDelta`;
     }
     return `
-      ${this.fragmentSourceTOP}
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform vec2 uDelta;
+      varying vec2 vTexCoord;
       uniform float uTaps[${filterWindow}];
       void main() {
         vec4 color = texture2D(uTexture, vTexCoord);
@@ -552,20 +542,6 @@ export class Resize extends BaseFilter {
     }
     return img2;
   }
-
-  /**
-   * Returns object representation of an instance
-   * @return {Object} Object representation of an instance
-   */
-  toObject() {
-    return {
-      type: this.type,
-      scaleX: this.scaleX,
-      scaleY: this.scaleY,
-      resizeType: this.resizeType,
-      lanczosLobes: this.lanczosLobes,
-    };
-  }
 }
 
 classRegistry.setClass(Resize);

package/src/filters/Saturation.ts

@@ -1,9 +1,16 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { fragmentSource } from './shaders/saturation';
 
+export type SaturationOwnProps = {
+  saturation: number;
+};
+
+export const saturationDefaultValues: SaturationOwnProps = {
+  saturation: 0,
+};
+
 /**
  * Saturate filter class
  * @example
@@ -13,13 +20,7 @@ import { fragmentSource } from './shaders/saturation';
  * object.filters.push(filter);
  * object.applyFilters();
  */
-
-export const saturationDefaultValues: Partial<TClassProperties<Saturation>> = {
-  saturation: 0,
-  mainParameter: 'saturation',
-};
-
-export class Saturation extends BaseFilter {
+export class Saturation extends BaseFilter<'Saturation', SaturationOwnProps> {
   /**
    * Saturation value, from -1 to 1.
    * Increases/decreases the color saturation.
@@ -28,12 +29,14 @@ export class Saturation extends BaseFilter {
    * @param {Number} saturation
    * @default
    */
-  declare saturation: number;
+  declare saturation: SaturationOwnProps['saturation'];
 
   static type = 'Saturation';
 
   static defaults = saturationDefaultValues;
 
+  static uniformLocations = ['uSaturation'];
+
   getFragmentSource() {
     return fragmentSource;
   }
@@ -45,9 +48,6 @@ export class Saturation extends BaseFilter {
    * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
    */
   applyTo2d({ imageData: { data } }: T2DPipelineState) {
-    if (this.saturation === 0) {
-      return;
-    }
     const adjust = -this.saturation;
     for (let i = 0; i < data.length; i += 4) {
       const max = Math.max(data[i], data[i + 1], data[i + 2]);
@@ -57,21 +57,6 @@ export class Saturation extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(
-    gl: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uSaturation: gl.getUniformLocation(program, 'uSaturation'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -84,6 +69,10 @@ export class Saturation extends BaseFilter {
   ) {
     gl.uniform1f(uniformLocations.uSaturation, -this.saturation);
   }
+
+  isNeutralState() {
+    return this.saturation === 0;
+  }
 }
 
 classRegistry.setClass(Saturation);

package/src/filters/Vibrance.ts

@@ -1,12 +1,14 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { fragmentSource } from './shaders/vibrance';
 
-export const vibranceDefaultValues: Partial<TClassProperties<Vibrance>> = {
+export type VibranceOwnProps = {
+  vibrance: number;
+};
+
+export const vibranceDefaultValues: VibranceOwnProps = {
   vibrance: 0,
-  mainParameter: 'vibrance',
 };
 
 /**
@@ -18,7 +20,7 @@ export const vibranceDefaultValues: Partial<TClassProperties<Vibrance>> = {
  * object.filters.push(filter);
  * object.applyFilters();
  */
-export class Vibrance extends BaseFilter {
+export class Vibrance extends BaseFilter<'Vibrance', VibranceOwnProps> {
   /**
    * Vibrance value, from -1 to 1.
    * Increases/decreases the saturation of more muted colors with less effect on saturated colors.
@@ -27,12 +29,14 @@ export class Vibrance extends BaseFilter {
    * @param {Number} vibrance
    * @default
    */
-  declare vibrance: number;
+  declare vibrance: VibranceOwnProps['vibrance'];
 
   static type = 'Vibrance';
 
   static defaults = vibranceDefaultValues;
 
+  static uniformLocations = ['uVibrance'];
+
   getFragmentSource() {
     return fragmentSource;
   }
@@ -44,9 +48,6 @@ export class Vibrance extends BaseFilter {
    * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
    */
   applyTo2d({ imageData: { data } }: T2DPipelineState) {
-    if (this.vibrance === 0) {
-      return;
-    }
     const adjust = -this.vibrance;
     for (let i = 0; i < data.length; i += 4) {
       const max = Math.max(data[i], data[i + 1], data[i + 2]);
@@ -58,26 +59,11 @@ export class Vibrance extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(
-    gl: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uVibrance: gl.getUniformLocation(program, 'uVibrance'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
    * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects
+   * @param {TWebGLUniformLocationMap} uniformLocations A map of string uniform names to WebGLUniformLocation objects
    */
   sendUniformData(
     gl: WebGLRenderingContext,
@@ -85,6 +71,10 @@ export class Vibrance extends BaseFilter {
   ) {
     gl.uniform1f(uniformLocations.uVibrance, -this.vibrance);
   }
+
+  isNeutralState() {
+    return this.vibrance === 0;
+  }
 }
 
 classRegistry.setClass(Vibrance);

package/src/filters/WebGLFilterBackend.ts

@@ -106,7 +106,7 @@ export class WebGLFilterBackend {
    * omitted, caching will be skipped.
    */
   applyFilters(
-    filters: BaseFilter[],
+    filters: BaseFilter<string, Record<string, any>>[],
     source: TexImageSource,
     width: number,
     height: number,

package/src/filters/shaders/blendImage.ts

@@ -30,3 +30,15 @@ export const fragmentSource: Record<TBlendImageMode, string> = {
     }
     `,
 } as const;
+
+export const vertexSource = `
+    attribute vec2 aPosition;
+    varying vec2 vTexCoord;
+    varying vec2 vTexCoord2;
+    uniform mat3 uTransformMatrix;
+    void main() {
+      vTexCoord = aPosition;
+      vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;
+      gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);
+    }
+    ` as const;

package/src/filters/typedefs.ts

@@ -58,3 +58,26 @@ export type TWebGLProgramCacheItem = {
 };
 
 export type TApplyFilterArgs = {};
+
+export type TMatColorMatrix = [
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number
+];

package/src/parser/elements_parser.ts

@@ -39,7 +39,7 @@ type NotParsedFabricObject = FabricObject & {
 export class ElementsParser {
   declare elements: Element[];
   declare options: LoadImageOptions & ParsedViewboxTransform;
-  declare reviver: TSvgReviverCallback | undefined;
+  declare reviver?: TSvgReviverCallback;
   declare regexUrl: RegExp;
   declare doc: Document;
   declare clipPaths: Record<string, Element[]>;

package/src/shapes/ActiveSelection.ts

@@ -59,13 +59,17 @@ export class ActiveSelection extends Group {
 
   constructor(
     objects: FabricObject[] = [],
-    { layoutManager, ...options }: Partial<ActiveSelectionOptions> = {}
+    options: Partial<ActiveSelectionOptions> = {}
   ) {
-    super(objects, {
-      layoutManager: layoutManager ?? new ActiveSelectionLayoutManager(),
-    });
+    super();
     Object.assign(this, ActiveSelection.ownDefaults);
     this.setOptions(options);
+    const { left, top, layoutManager } = options;
+    this.groupInit(objects, {
+      left,
+      top,
+      layoutManager: layoutManager ?? new ActiveSelectionLayoutManager(),
+    });
   }
 
   /**

package/src/shapes/Group.ts

@@ -140,6 +140,21 @@ export class Group
     super();
     Object.assign(this, Group.ownDefaults);
     this.setOptions(options);
+    this.groupInit(objects, options);
+  }
+
+  /**
+   * Shared code between group and active selection
+   * Meant to be used by the constructor.
+   */
+  protected groupInit(
+    objects: FabricObject[],
+    options: {
+      layoutManager?: LayoutManager;
+      top?: number;
+      left?: number;
+    }
+  ) {
     this._objects = [...objects]; // Avoid unwanted mutations of Collection to affect the caller
 
     this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(
@@ -156,7 +171,7 @@ export class Group
     });
 
     // perform initial layout
-    this.layoutManager = options.layoutManager || new LayoutManager();
+    this.layoutManager = options.layoutManager ?? new LayoutManager();
     this.layoutManager.performLayout({
       type: LAYOUT_TYPE_INITIALIZATION,
       target: this,

package/src/shapes/Image.ts

@@ -45,7 +45,7 @@ interface UniqueImageProps {
   cropX: number;
   cropY: number;
   imageSmoothing: boolean;
-  filters: BaseFilter[];
+  filters: BaseFilter<string, Record<string, any>>[];
   resizeFilter?: Resize;
 }
 
@@ -166,7 +166,7 @@ export class FabricImage<
 
   protected declare src: string;
 
-  declare filters: BaseFilter[];
+  declare filters: BaseFilter<string, Record<string, any>>[];
   declare resizeFilter: Resize;
 
   declare _element: ImageSource;
@@ -506,7 +506,7 @@ export class FabricImage<
     this._lastScaleX = filter.scaleX = scaleX;
     this._lastScaleY = filter.scaleY = scaleY;
     getFilterBackend().applyFilters(
-      [filter as BaseFilter],
+      [filter],
       elementToFilter,
       sourceWidth,
       sourceHeight,
@@ -522,7 +522,9 @@ export class FabricImage<
    * @param {Array} filters to be applied
    * @param {Boolean} forResizing specify if the filter operation is a resize operation
    */
-  applyFilters(filters: BaseFilter[] = this.filters || []) {
+  applyFilters(
+    filters: BaseFilter<string, Record<string, any>>[] = this.filters || []
+  ) {
     filters = filters.filter((filter) => filter && !filter.isNeutralState());
     this.set('dirty', true);
 
@@ -798,9 +800,9 @@ export class FabricImage<
   ) {
     return Promise.all([
       loadImage(src!, { ...options, crossOrigin }),
-      f && enlivenObjects<BaseFilter>(f, options),
+      f && enlivenObjects<BaseFilter<string>>(f, options),
       // TODO: redundant - handled by enlivenObjectEnlivables
-      rf && enlivenObjects<BaseFilter>([rf], options),
+      rf && enlivenObjects<BaseFilter<'Resize'>>([rf], options),
       enlivenObjectEnlivables(object, options),
     ]).then(([el, filters = [], [resizeFilter] = [], hydratedProps = {}]) => {
       return new this(el, {

package/src/shapes/Object/InteractiveObject.ts

@@ -540,6 +540,9 @@ export class InteractiveFabricObject<
    * Draws corners of an object's bounding box.
    * Requires public properties: width, height
    * Requires public options: cornerSize, padding
+   * Be aware that since fabric 6.0 this function does not call setCoords anymore.
+   * setCoords needs to be called manually if the object of which we are rendering controls
+   * is outside the standard selection and transform process.
    * @param {CanvasRenderingContext2D} ctx Context to draw on
    * @param {ControlRenderingStyleOverride} styleOverride object to override the object style
    */
@@ -562,7 +565,6 @@ export class InteractiveFabricObject<
       ctx.strokeStyle = options.cornerStrokeColor;
     }
     this._setLineDash(ctx, options.cornerDashArray);
-    this.setCoords();
     this.forEachControl((control, key) => {
       if (control.getVisibility(this, key)) {
         const p = this.oCoords[key];

package/src/shapes/Object/Object.ts

@@ -216,24 +216,6 @@ export class FabricObject<
    */
   declare _cacheCanvas?: HTMLCanvasElement;
 
-  /**
-   * Size of the cache canvas, width
-   * since 1.7.0
-   * @type number
-   * @default undefined
-   * @private
-   */
-  declare cacheWidth?: number;
-
-  /**
-   * Size of the cache canvas, height
-   * since 1.7.0
-   * @type number
-   * @default undefined
-   * @private
-   */
-  declare cacheHeight?: number;
-
   /**
    * zoom level used on the cacheCanvas to draw the cache, X axe
    * since 1.7.0
@@ -443,7 +425,7 @@ export class FabricObject<
    * @return {Boolean} true if the canvas has been resized
    */
   _updateCacheCanvas() {
-    const canvas = this._cacheCanvas,
+    const canvas = this._cacheCanvas!,
       context = this._cacheContext,
       dims = this._limitCacheSize(this._getCacheCanvasDimensions()),
       minCacheSize = config.minCacheSideLimit,
@@ -451,8 +433,7 @@ export class FabricObject<
       height = dims.height,
       zoomX = dims.zoomX,
       zoomY = dims.zoomY,
-      dimensionsChanged =
-        width !== this.cacheWidth || height !== this.cacheHeight,
+      dimensionsChanged = width !== canvas.width || height !== canvas.height,
       zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY;
 
     if (!canvas || !context) {
@@ -505,8 +486,6 @@ export class FabricObject<
         Math.round(canvas.width / 2 - drawingWidth) + drawingWidth;
       this.cacheTranslationY =
         Math.round(canvas.height / 2 - drawingHeight) + drawingHeight;
-      this.cacheWidth = width;
-      this.cacheHeight = height;
       context.translate(this.cacheTranslationX, this.cacheTranslationY);
       context.scale(zoomX, zoomY);
       this.zoomX = zoomX;
@@ -829,8 +808,6 @@ export class FabricObject<
   _removeCacheCanvas() {
     this._cacheCanvas = undefined;
     this._cacheContext = null;
-    this.cacheWidth = 0;
-    this.cacheHeight = 0;
   }
 
   /**
@@ -1008,20 +985,18 @@ export class FabricObject<
     if (this.isNotVisible()) {
       return false;
     }
-    if (
-      this._cacheCanvas &&
-      this._cacheContext &&
-      !skipCanvas &&
-      this._updateCacheCanvas()
-    ) {
+    const canvas = this._cacheCanvas;
+    const ctx = this._cacheContext;
+    if (canvas && ctx && !skipCanvas && this._updateCacheCanvas()) {
       // in this case the context is already cleared.
       return true;
     } else {
       if (this.dirty || (this.clipPath && this.clipPath.absolutePositioned)) {
-        if (this._cacheCanvas && this._cacheContext && !skipCanvas) {
-          const width = this.cacheWidth! / this.zoomX!;
-          const height = this.cacheHeight! / this.zoomY!;
-          this._cacheContext.clearRect(-width / 2, -height / 2, width, height);
+        if (canvas && ctx && !skipCanvas) {
+          ctx.save();
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.restore();
         }
         return true;
       }