fabric 6.2.0 → 6.3.0

package/src/filters/Composed.ts

@@ -22,7 +22,7 @@ export class Composed extends BaseFilter<'Composed', ComposedOwnProps> {
     options: { subFilters?: BaseFilter<string, object>[] } & Record<
       string,
       any
-    > = {}
+    > = {},
   ) {
     super(options);
     this.subFilters = options.subFilters || [];
@@ -72,17 +72,17 @@ export class Composed extends BaseFilter<'Composed', ComposedOwnProps> {
    */
   static fromObject(
     object: Record<string, any>,
-    options: { signal: AbortSignal }
+    options: { signal: AbortSignal },
   ): Promise<Composed> {
     return Promise.all(
       ((object.subFilters || []) as BaseFilter<string, object>[]).map(
         (filter) =>
           classRegistry
             .getClass<typeof BaseFilter>(filter.type)
-            .fromObject(filter, options)
-      )
+            .fromObject(filter, options),
+      ),
     ).then(
-      (enlivedFilters) => new this({ subFilters: enlivedFilters }) as Composed
+      (enlivedFilters) => new this({ subFilters: enlivedFilters }) as Composed,
     );
   }
 }

package/src/filters/Contrast.ts

@@ -67,7 +67,7 @@ export class Contrast extends BaseFilter<'Contrast', ContrastOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform1f(uniformLocations.uContrast, this.contrast);
   }

package/src/filters/Convolute.ts

@@ -153,7 +153,7 @@ export class Convolute extends BaseFilter<'Convolute', ConvoluteOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform1fv(uniformLocations.uMatrix, this.matrix);
   }

package/src/filters/GLProbes/WebGLProbe.ts

@@ -16,7 +16,7 @@ export class WebGLProbe extends GLProbe {
    */
   private testPrecision(
     gl: WebGLRenderingContext,
-    precision: GLPrecision
+    precision: GLPrecision,
   ): boolean {
     const fragmentSource = `precision ${precision} float;\nvoid main(){}`;
     const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
@@ -36,7 +36,7 @@ export class WebGLProbe extends GLProbe {
     if (gl) {
       this.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
       this.GLPrecision = (['highp', 'mediump', 'lowp'] as const).find(
-        (precision) => this.testPrecision(gl, precision)
+        (precision) => this.testPrecision(gl, precision),
       );
       gl.getExtension('WEBGL_lose_context')!.loseContext();
       log('log', `WebGL: max texture size ${this.maxTextureSize}`);

package/src/filters/Gamma.ts

@@ -99,7 +99,7 @@ export class Gamma extends BaseFilter<typeof GAMMA, GammaOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform3fv(uniformLocations.uGamma, this.gamma);
   }

package/src/filters/Grayscale.ts

@@ -74,7 +74,7 @@ export class Grayscale extends BaseFilter<'Grayscale', GrayscaleOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     const mode = 1;
     gl.uniform1i(uniformLocations.uMode, mode);

package/src/filters/Invert.ts

@@ -80,7 +80,7 @@ export class Invert extends BaseFilter<'Invert', InvertOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform1i(uniformLocations.uInvert, Number(this.invert));
     gl.uniform1i(uniformLocations.uAlpha, Number(this.alpha));

package/src/filters/Noise.ts

@@ -63,7 +63,7 @@ export class Noise extends BaseFilter<'Noise', NoiseOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform1f(uniformLocations.uNoise, this.noise / 255);
     gl.uniform1f(uniformLocations.uSeed, Math.random());

package/src/filters/Pixelate.ts

@@ -76,7 +76,7 @@ export class Pixelate extends BaseFilter<'Pixelate', PixelateOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform1f(uniformLocations.uBlocksize, this.blocksize);
   }

package/src/filters/RemoveColor.ts

@@ -99,7 +99,7 @@ export class RemoveColor extends BaseFilter<
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     const source = new Color(this.color).getSource(),
       distance = this.distance,

package/src/filters/Resize.ts

@@ -94,11 +94,11 @@ export class Resize extends BaseFilter<'Resize', ResizeOwnProps> {
   sendUniformData(
     this: ResizeDuringWEBGLResize,
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform2fv(
       uniformLocations.uDelta,
-      this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]
+      this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height],
     );
     gl.uniform1fv(uniformLocations.uTaps, this.taps);
   }
@@ -152,7 +152,7 @@ export class Resize extends BaseFilter<'Resize', ResizeOwnProps> {
             (offset, i) => `
               color += texture2D(uTexture, vTexCoord + ${offset}) * uTaps[${i}] + texture2D(uTexture, vTexCoord - ${offset}) * uTaps[${i}];
               sum += 2.0 * uTaps[${i}];
-            `
+            `,
           )
           .join('\n')}
         gl_FragColor = color / sum;
@@ -263,7 +263,7 @@ export class Resize extends BaseFilter<'Resize', ResizeOwnProps> {
     oW: number,
     oH: number,
     dW: number,
-    dH: number
+    dH: number,
   ) {
     const imageData = options.imageData;
     const mult = 0.5;
@@ -329,7 +329,7 @@ export class Resize extends BaseFilter<'Resize', ResizeOwnProps> {
     oW: number,
     oH: number,
     dW: number,
-    dH: number
+    dH: number,
   ): ImageData {
     function process(u: number): ImageData {
       let v, i, weight, idx, a, red, green, blue, alpha, fX, fY;
@@ -359,8 +359,8 @@ export class Resize extends BaseFilter<'Resize', ResizeOwnProps> {
             if (!cacheLanc[fX][fY]) {
               cacheLanc[fX][fY] = lanczos(
                 Math.sqrt(
-                  Math.pow(fX * rcpRatioX, 2) + Math.pow(fY * rcpRatioY, 2)
-                ) / 1000
+                  Math.pow(fX * rcpRatioX, 2) + Math.pow(fY * rcpRatioY, 2),
+                ) / 1000,
               );
             }
             weight = cacheLanc[fX][fY];
@@ -420,7 +420,7 @@ export class Resize extends BaseFilter<'Resize', ResizeOwnProps> {
     oW: number,
     oH: number,
     dW: number,
-    dH: number
+    dH: number,
   ) {
     let a;
     let b;
@@ -483,7 +483,7 @@ export class Resize extends BaseFilter<'Resize', ResizeOwnProps> {
     oW: number,
     oH: number,
     dW: number,
-    dH: number
+    dH: number,
   ) {
     const ratioW = this.rcpScaleX,
       ratioH = this.rcpScaleY,

package/src/filters/Saturation.ts

@@ -65,7 +65,7 @@ export class Saturation extends BaseFilter<'Saturation', SaturationOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform1f(uniformLocations.uSaturation, -this.saturation);
   }

package/src/filters/Vibrance.ts

@@ -67,7 +67,7 @@ export class Vibrance extends BaseFilter<'Vibrance', VibranceOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform1f(uniformLocations.uVibrance, -this.vibrance);
   }

package/src/filters/WebGLFilterBackend.ts

@@ -111,7 +111,7 @@ export class WebGLFilterBackend {
     width: number,
     height: number,
     targetCanvas: HTMLCanvasElement,
-    cacheKey?: string
+    cacheKey?: string,
   ): TWebGLPipelineState | undefined {
     const gl = this.gl;
     const ctx = targetCanvas.getContext('2d');
@@ -142,7 +142,7 @@ export class WebGLFilterBackend {
         gl,
         width,
         height,
-        !cachedTexture ? source : undefined
+        !cachedTexture ? source : undefined,
       ),
       targetTexture: this.createTexture(gl, width, height),
       originalTexture:
@@ -151,7 +151,7 @@ export class WebGLFilterBackend {
           gl,
           width,
           height,
-          !cachedTexture ? source : undefined
+          !cachedTexture ? source : undefined,
         )!,
       passes: filters.length,
       webgl: true,
@@ -219,7 +219,7 @@ export class WebGLFilterBackend {
     textureImageSource?: TexImageSource,
     filter?:
       | WebGLRenderingContextBase['NEAREST']
-      | WebGLRenderingContextBase['LINEAR']
+      | WebGLRenderingContextBase['LINEAR'],
   ) {
     const {
       NEAREST,
@@ -245,7 +245,7 @@ export class WebGLFilterBackend {
         RGBA,
         RGBA,
         UNSIGNED_BYTE,
-        textureImageSource
+        textureImageSource,
       );
     } else {
       gl.texImage2D(
@@ -257,7 +257,7 @@ export class WebGLFilterBackend {
         0,
         RGBA,
         UNSIGNED_BYTE,
-        null
+        null,
       );
     }
     return texture;
@@ -277,7 +277,7 @@ export class WebGLFilterBackend {
     textureImageSource: TexImageSource,
     filter?:
       | WebGLRenderingContextBase['NEAREST']
-      | WebGLRenderingContextBase['LINEAR']
+      | WebGLRenderingContextBase['LINEAR'],
   ): WebGLTexture | null {
     const { textureCache } = this;
     if (textureCache[uniqueId]) {
@@ -288,7 +288,7 @@ export class WebGLFilterBackend {
         (textureImageSource as HTMLImageElement).width,
         (textureImageSource as HTMLImageElement).height,
         textureImageSource,
-        filter
+        filter,
       );
       if (texture) {
         textureCache[uniqueId] = texture;
@@ -339,7 +339,7 @@ export class WebGLFilterBackend {
       0,
       0,
       targetCanvas.width,
-      targetCanvas.height
+      targetCanvas.height,
     );
   }
 
@@ -354,7 +354,7 @@ export class WebGLFilterBackend {
   copyGLTo2DPutImageData(
     this: Required<WebGLFilterBackend>,
     gl: WebGLRenderingContext,
-    pipelineState: TWebGLPipelineState
+    pipelineState: TWebGLPipelineState,
   ) {
     const targetCanvas = pipelineState.targetCanvas,
       ctx = targetCanvas.getContext('2d'),

package/src/filters/typedefs.ts

@@ -57,8 +57,6 @@ export type TWebGLProgramCacheItem = {
   uniformLocations: TWebGLUniformLocationMap;
 };
 
-export type TApplyFilterArgs = {};
-
 export type TMatColorMatrix = [
   number,
   number,
@@ -79,5 +77,5 @@ export type TMatColorMatrix = [
   number,
   number,
   number,
-  number
+  number,
 ];

package/src/filters/utils.ts

@@ -4,7 +4,7 @@ import { WebGLFilterBackend } from './WebGLFilterBackend';
 import type { TWebGLPipelineState, T2DPipelineState } from './typedefs';
 
 export const isWebGLPipelineState = (
-  options: TWebGLPipelineState | T2DPipelineState
+  options: TWebGLPipelineState | T2DPipelineState,
 ): options is TWebGLPipelineState => {
   return (options as TWebGLPipelineState).webgl !== undefined;
 };
@@ -38,7 +38,7 @@ export const isPutImageFaster = (width: number, height: number): boolean => {
   WebGLFilterBackend.prototype.copyGLTo2D.call(
     testContext,
     gl,
-    testPipelineState
+    testPipelineState,
   );
   const drawImageTime = getFabricWindow().performance.now() - startTime;
 
@@ -46,7 +46,7 @@ export const isPutImageFaster = (width: number, height: number): boolean => {
   WebGLFilterBackend.prototype.copyGLTo2DPutImageData.call(
     testContext,
     gl,
-    testPipelineState
+    testPipelineState,
   );
   const putImageDataTime = getFabricWindow().performance.now() - startTime;
 

package/src/gradient/Gradient.spec.ts

@@ -9,7 +9,7 @@ describe('Gradient', () => {
   function fromElement(
     gradientDef: SVGGradientElement,
     obj: FabricObject,
-    options: Partial<SVGOptions> = {}
+    options: Partial<SVGOptions> = {},
   ) {
     return Gradient.fromElement(gradientDef, obj, {
       width: 0,
@@ -33,7 +33,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'linearGradient'
+      'linearGradient',
     );
     const stop1 = getFabricDocument().createElement('stop');
     const stop2 = getFabricDocument().createElement('stop');
@@ -72,7 +72,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'linearGradient'
+      'linearGradient',
     );
     element.setAttributeNS(namespace, 'gradientUnits', 'objectBoundingBox');
     element.setAttributeNS(namespace, 'x1', '10%');
@@ -108,7 +108,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'linearGradient'
+      'linearGradient',
     );
     element.setAttributeNS(namespace, 'gradientUnits', 'userSpaceOnUse');
     element.setAttributeNS(namespace, 'x1', '10%');
@@ -154,7 +154,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'linearGradient'
+      'linearGradient',
     );
     const stop1 = getFabricDocument().createElementNS(namespace, 'stop');
     const stop2 = getFabricDocument().createElementNS(namespace, 'stop');
@@ -201,7 +201,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'linearGradient'
+      'linearGradient',
     );
     const stop1 = getFabricDocument().createElementNS(namespace, 'stop');
     const stop2 = getFabricDocument().createElementNS(namespace, 'stop');
@@ -228,7 +228,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'linearGradient'
+      'linearGradient',
     );
 
     element.setAttributeNS(namespace, 'x1', '30%');
@@ -262,7 +262,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'radialGradient'
+      'radialGradient',
     );
 
     element.setAttributeNS(namespace, 'fx', '30%');
@@ -298,7 +298,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'radialGradient'
+      'radialGradient',
     );
 
     element.setAttributeNS(namespace, 'fx', '30');
@@ -340,7 +340,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'linearGradient'
+      'linearGradient',
     );
 
     element.setAttributeNS(namespace, 'x1', '30');
@@ -377,7 +377,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'radialGradient'
+      'radialGradient',
     );
     const stop1 = getFabricDocument().createElementNS(namespace, 'stop');
     const stop2 = getFabricDocument().createElementNS(namespace, 'stop');
@@ -414,7 +414,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'radialGradient'
+      'radialGradient',
     );
     const stop1 = getFabricDocument().createElementNS(namespace, 'stop');
     const stop2 = getFabricDocument().createElementNS(namespace, 'stop');
@@ -430,7 +430,7 @@ describe('Gradient', () => {
     element.setAttributeNS(
       namespace,
       'gradientTransform',
-      'matrix(3.321 -0.6998 0.4077 1.9347 -440.9168 -408.0598)'
+      'matrix(3.321 -0.6998 0.4077 1.9347 -440.9168 -408.0598)',
     );
     const object = new FabricObject({ width: 100, height: 100 });
     const gradient = fromElement(element, object, {});
@@ -443,7 +443,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'linearGradient'
+      'linearGradient',
     );
     const stop1 = getFabricDocument().createElementNS(namespace, 'stop');
     const stop2 = getFabricDocument().createElementNS(namespace, 'stop');
@@ -458,7 +458,7 @@ describe('Gradient', () => {
     stop2.setAttributeNS(
       namespace,
       'style',
-      'stop-color: black; stop-opacity:;'
+      'stop-color: black; stop-opacity:;',
     );
     stop2.setAttributeNS(namespace, 'stop-color', 'white');
 
@@ -471,7 +471,7 @@ describe('Gradient', () => {
     stop4.setAttributeNS(
       namespace,
       'style',
-      'stop-color: red; stop-opacity: 0.5;'
+      'stop-color: red; stop-opacity: 0.5;',
     );
     stop4.setAttributeNS(namespace, 'stop-opacity', '0.9');
 
@@ -510,7 +510,7 @@ describe('Gradient', () => {
     const namespace = 'http://www.w3.org/2000/svg';
     const element = getFabricDocument().createElementNS(
       namespace,
-      'radialGradient'
+      'radialGradient',
     );
     const stop1 = getFabricDocument().createElementNS(namespace, 'stop');
     const stop2 = getFabricDocument().createElementNS(namespace, 'stop');
@@ -525,7 +525,7 @@ describe('Gradient', () => {
     stop2.setAttributeNS(
       namespace,
       'style',
-      'stop-color: black; stop-opacity:;'
+      'stop-color: black; stop-opacity:;',
     );
     stop2.setAttributeNS(namespace, 'stop-color', 'white');
 
@@ -538,7 +538,7 @@ describe('Gradient', () => {
     stop4.setAttributeNS(
       namespace,
       'style',
-      'stop-color: red; stop-opacity: 0.5;'
+      'stop-color: red; stop-opacity: 0.5;',
     );
     stop4.setAttributeNS(namespace, 'stop-opacity', '0.9');