fabric 6.2.0 → 6.3.0

package/src/controls/scale.ts

@@ -35,7 +35,7 @@ type ScaleBy = TAxis | 'equally' | '' | undefined;
  */
 export function scaleIsProportional(
   eventData: TPointerEvent,
-  fabricObject: FabricObject
+  fabricObject: FabricObject,
 ): boolean {
   const canvas = fabricObject.canvas as Canvas,
     uniformIsToggled = eventData[canvas.uniScaleKey!];
@@ -55,7 +55,7 @@ export function scaleIsProportional(
 export function scalingIsForbidden(
   fabricObject: FabricObject,
   by: ScaleBy,
-  scaleProportionally: boolean
+  scaleProportionally: boolean,
 ) {
   const lockX = isLocked(fabricObject, 'lockScalingX'),
     lockY = isLocked(fabricObject, 'lockScalingY');
@@ -95,15 +95,15 @@ const scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'];
 export const scaleCursorStyleHandler: ControlCursorCallback = (
   eventData,
   control,
-  fabricObject
+  fabricObject,
 ) => {
   const scaleProportionally = scaleIsProportional(eventData, fabricObject),
     by =
       control.x !== 0 && control.y === 0
         ? 'x'
         : control.x === 0 && control.y !== 0
-        ? 'y'
-        : '';
+          ? 'y'
+          : '';
   if (scalingIsForbidden(fabricObject, by, scaleProportionally)) {
     return NOT_ALLOWED_CURSOR;
   }
@@ -128,7 +128,7 @@ function scaleObject(
   transform: ScaleTransform,
   x: number,
   y: number,
-  options: { by?: ScaleBy } = {}
+  options: { by?: ScaleBy } = {},
 ) {
   const target = transform.target,
     by = options.by,
@@ -148,7 +148,7 @@ function scaleObject(
       transform.originX,
       transform.originY,
       x,
-      y
+      y,
     );
     // use of sign: We use sign to detect change of direction of an action. sign usually change when
     // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling
@@ -230,7 +230,7 @@ export const scaleObjectFromCorner: TransformActionHandler<ScaleTransform> = (
   eventData,
   transform,
   x,
-  y
+  y,
 ) => {
   return scaleObject(eventData, transform, x, y);
 };
@@ -248,7 +248,7 @@ const scaleObjectX: TransformActionHandler<ScaleTransform> = (
   eventData,
   transform,
   x,
-  y
+  y,
 ) => {
   return scaleObject(eventData, transform, x, y, { by: 'x' });
 };
@@ -266,22 +266,22 @@ const scaleObjectY: TransformActionHandler<ScaleTransform> = (
   eventData,
   transform,
   x,
-  y
+  y,
 ) => {
   return scaleObject(eventData, transform, x, y, { by: 'y' });
 };
 
 export const scalingEqually = wrapWithFireEvent(
   SCALING,
-  wrapWithFixedAnchor(scaleObjectFromCorner)
+  wrapWithFixedAnchor(scaleObjectFromCorner),
 );
 
 export const scalingX = wrapWithFireEvent(
   SCALING,
-  wrapWithFixedAnchor(scaleObjectX)
+  wrapWithFixedAnchor(scaleObjectX),
 );
 
 export const scalingY = wrapWithFireEvent(
   SCALING,
-  wrapWithFixedAnchor(scaleObjectY)
+  wrapWithFixedAnchor(scaleObjectY),
 );

package/src/controls/scaleSkew.ts

@@ -46,7 +46,7 @@ export const scaleOrSkewActionName: ControlCallback<
 export const scaleSkewCursorStyleHandler: ControlCursorCallback = (
   eventData,
   control,
-  fabricObject
+  fabricObject,
 ) => {
   return isAltAction(eventData, fabricObject)
     ? skewCursorStyleHandler(eventData, control, fabricObject)
@@ -65,7 +65,7 @@ export const scalingXOrSkewingY: TransformActionHandler = (
   eventData,
   transform,
   x,
-  y
+  y,
 ) => {
   return isAltAction(eventData, transform.target)
     ? skewHandlerY(eventData, transform, x, y)
@@ -85,7 +85,7 @@ export const scalingYOrSkewingX: TransformActionHandler = (
   eventData,
   transform,
   x,
-  y
+  y,
 ) => {
   return isAltAction(eventData, transform.target)
     ? skewHandlerX(eventData, transform, x, y)

package/src/controls/skew.ts

@@ -71,7 +71,7 @@ const skewMap = ['ns', 'nesw', 'ew', 'nwse'];
 export const skewCursorStyleHandler: ControlCursorCallback = (
   eventData,
   control,
-  fabricObject
+  fabricObject,
 ) => {
   if (control.x !== 0 && isLocked(fabricObject, 'lockSkewingY')) {
     return NOT_ALLOWED_CURSOR;
@@ -90,7 +90,7 @@ export const skewCursorStyleHandler: ControlCursorCallback = (
 function skewObject(
   axis: TAxis,
   { target, ex, ey, skewingSide, ...transform }: SkewTransform,
-  pointer: Point
+  pointer: Point,
 ) {
   const { skew: skewKey } = AXIS_KEYS[axis],
     offset = pointer
@@ -157,7 +157,7 @@ function skewHandler(
   eventData: TPointerEvent,
   transform: Transform,
   x: number,
-  y: number
+  y: number,
 ) {
   const { target } = transform,
     {
@@ -197,8 +197,8 @@ function skewHandler(
   const finalHandler = wrapWithFireEvent<SkewTransform>(
     SKEWING,
     wrapWithFixedAnchor((eventData, transform, x, y) =>
-      skewObject(axis, transform, new Point(x, y))
-    )
+      skewObject(axis, transform, new Point(x, y)),
+    ),
   );
 
   return finalHandler(
@@ -209,7 +209,7 @@ function skewHandler(
       skewingSide,
     },
     x,
-    y
+    y,
   );
 }
 
@@ -226,7 +226,7 @@ export const skewHandlerX: TransformActionHandler = (
   eventData,
   transform,
   x,
-  y
+  y,
 ) => {
   return skewHandler('x', eventData, transform, x, y);
 };
@@ -244,7 +244,7 @@ export const skewHandlerY: TransformActionHandler = (
   eventData,
   transform,
   x,
-  y
+  y,
 ) => {
   return skewHandler('y', eventData, transform, x, y);
 };

package/src/controls/util.ts

@@ -27,7 +27,7 @@ export const getActionFromCorner = (
   alreadySelected: boolean,
   corner: string | undefined,
   e: TPointerEvent,
-  target: FabricObject
+  target: FabricObject,
 ) => {
   if (!corner || !alreadySelected) {
     return 'drag';
@@ -62,7 +62,7 @@ export const isLocked = (
     | 'lockScalingY'
     | 'lockSkewingX'
     | 'lockSkewingY'
-    | 'lockScalingFlip'
+    | 'lockScalingFlip',
 ) => target[lockingKey];
 
 export const commonEventInfo: TransformAction<
@@ -85,7 +85,7 @@ export const commonEventInfo: TransformAction<
  */
 export function findCornerQuadrant(
   fabricObject: FabricObject,
-  control: Control
+  control: Control,
 ): number {
   //  angle is relative to canvas plane
   const angle = fabricObject.getTotalAngle(),
@@ -101,7 +101,7 @@ function normalizePoint(
   target: FabricObject,
   point: Point,
   originX: TOriginX,
-  originY: TOriginY
+  originY: TOriginY,
 ): Point {
   const center = target.getRelativeCenterPoint(),
     p =
@@ -111,7 +111,7 @@ function normalizePoint(
             CENTER,
             CENTER,
             originX,
-            originY
+            originY,
           )
         : new Point(target.left, target.top),
     p2 = target.angle
@@ -134,7 +134,7 @@ export function getLocalPoint(
   originX: TOriginX,
   originY: TOriginY,
   x: number,
-  y: number
+  y: number,
 ) {
   const control = target.controls[corner],
     zoom = target.canvas?.getZoom() || 1,

package/src/controls/wrapWithFireEvent.ts

@@ -15,11 +15,11 @@ import { commonEventInfo } from './util';
  */
 export const wrapWithFireEvent = <
   T extends Transform,
-  P extends object = Record<string, never>
+  P extends object = Record<string, never>,
 >(
   eventName: TModificationEvents,
   actionHandler: TransformActionHandler<T>,
-  extraEventInfo?: P
+  extraEventInfo?: P,
 ) => {
   return ((eventData, transform, x, y) => {
     const actionPerformed = actionHandler(eventData, transform, x, y);

package/src/controls/wrapWithFixedAnchor.spec.ts

@@ -38,7 +38,7 @@ describe('wrapWithFixedAnchor', () => {
       target.originX,
       target.originY,
       'left',
-      'top'
+      'top',
     );
     // target position is 100,
     expect(target.top).toBe(100);
@@ -53,7 +53,7 @@ describe('wrapWithFixedAnchor', () => {
       target.originX,
       target.originY,
       'left',
-      'top'
+      'top',
     );
     // after transform the position of the object moved.
     expect(target.top).toBe(150.5);
@@ -82,7 +82,7 @@ describe('wrapWithFixedAnchor', () => {
       target.originX,
       target.originY,
       transformData.originX,
-      transformData.originY
+      transformData.originY,
     );
     // target position is 100,
     expect(target.top).toBe(100);
@@ -97,7 +97,7 @@ describe('wrapWithFixedAnchor', () => {
       target.originX,
       target.originY,
       transformData.originX,
-      transformData.originY
+      transformData.originY,
     );
     // transform data ended up being right,bottom
     expect(transformData.originX).toBe('right');
@@ -114,7 +114,7 @@ describe('wrapWithFixedAnchor', () => {
       target.originX,
       target.originY,
       'left',
-      'top'
+      'top',
     );
     expect(newTopLeftCorner.y).toBe(-910);
     expect(newTopLeftCorner.x).toBe(-859.5);

package/src/controls/wrapWithFixedAnchor.ts

@@ -7,7 +7,7 @@ import type { Transform, TransformActionHandler } from '../EventTypeDefs';
  * @return {Function} a function with an action handler signature
  */
 export function wrapWithFixedAnchor<T extends Transform>(
-  actionHandler: TransformActionHandler<T>
+  actionHandler: TransformActionHandler<T>,
 ) {
   return ((eventData, transform, x, y) => {
     const { target, originX, originY } = transform,
@@ -19,7 +19,7 @@ export function wrapWithFixedAnchor<T extends Transform>(
     target.setPositionByOrigin(
       constraint,
       transform.originX,
-      transform.originY
+      transform.originY,
     );
     return actionPerformed;
   }) as TransformActionHandler<T>;

package/src/env/node.ts

@@ -12,13 +12,13 @@ const copyPasteData: TCopyPasteData = {};
 
 const { window: JSDOMWindow } = new JSDOM(
   decodeURIComponent(
-    '%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'
+    '%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E',
   ),
   {
     resources: 'usable',
     // needed for `requestAnimationFrame`
     pretendToBeVisual: true,
-  }
+  },
 );
 
 export const getNodeCanvas = (canvasEl: HTMLCanvasElement) => {

package/src/filters/BaseFilter.ts

@@ -20,7 +20,7 @@ const regex = new RegExp(highPsourceCode, 'g');
 
 export class BaseFilter<
   Name extends string,
-  OwnProps extends Record<string, any> = object
+  OwnProps extends Record<string, any> = object,
 > {
   /**
    * Filter type
@@ -60,7 +60,7 @@ export class BaseFilter<
     Object.assign(
       this,
       (this.constructor as typeof BaseFilter).defaults,
-      options
+      options,
     );
   }
 
@@ -82,7 +82,7 @@ export class BaseFilter<
   createProgram(
     gl: WebGLRenderingContext,
     fragmentSource: string = this.getFragmentSource(),
-    vertexSource: string = this.getVertexSource()
+    vertexSource: string = this.getVertexSource(),
   ) {
     const {
       WebGLProbe: { GLPrecision = 'highp' },
@@ -90,7 +90,7 @@ export class BaseFilter<
     if (GLPrecision !== 'highp') {
       fragmentSource = fragmentSource.replace(
         regex,
-        highPsourceCode.replace('highp', GLPrecision)
+        highPsourceCode.replace('highp', GLPrecision),
       );
     }
     const vertexShader = gl.createShader(gl.VERTEX_SHADER);
@@ -99,7 +99,7 @@ export class BaseFilter<
 
     if (!vertexShader || !fragmentShader || !program) {
       throw new FabricError(
-        'Vertex, fragment shader or program creation error'
+        'Vertex, fragment shader or program creation error',
       );
     }
     gl.shaderSource(vertexShader, vertexSource);
@@ -107,8 +107,8 @@ export class BaseFilter<
     if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
       throw new FabricError(
         `Vertex shader compile error for ${this.type}: ${gl.getShaderInfoLog(
-          vertexShader
-        )}`
+          vertexShader,
+        )}`,
       );
     }
 
@@ -117,8 +117,8 @@ export class BaseFilter<
     if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
       throw new FabricError(
         `Fragment shader compile error for ${this.type}: ${gl.getShaderInfoLog(
-          fragmentShader
-        )}`
+          fragmentShader,
+        )}`,
       );
     }
 
@@ -127,7 +127,7 @@ export class BaseFilter<
     gl.linkProgram(program);
     if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
       throw new FabricError(
-        `Shader link error for "${this.type}" ${gl.getProgramInfoLog(program)}`
+        `Shader link error for "${this.type}" ${gl.getProgramInfoLog(program)}`,
       );
     }
 
@@ -151,7 +151,7 @@ export class BaseFilter<
    */
   getAttributeLocations(
     gl: WebGLRenderingContext,
-    program: WebGLProgram
+    program: WebGLProgram,
   ): TWebGLAttributeLocationMap {
     return {
       aPosition: gl.getAttribLocation(program, 'aPosition'),
@@ -167,7 +167,7 @@ export class BaseFilter<
    */
   getUniformLocations(
     gl: WebGLRenderingContext,
-    program: WebGLProgram
+    program: WebGLProgram,
   ): TWebGLUniformLocationMap {
     const locations = (this.constructor as unknown as typeof BaseFilter<string>)
       .uniformLocations;
@@ -176,7 +176,7 @@ export class BaseFilter<
     for (let i = 0; i < locations.length; i++) {
       uniformLocations[locations[i]] = gl.getUniformLocation(
         program,
-        locations[i]
+        locations[i],
       );
     }
     return uniformLocations;
@@ -191,7 +191,7 @@ export class BaseFilter<
   sendAttributeData(
     gl: WebGLRenderingContext,
     attributeLocations: Record<string, number>,
-    aPositionData: Float32Array
+    aPositionData: Float32Array,
   ) {
     const attributeLocation = attributeLocations.aPosition;
     const buffer = gl.createBuffer();
@@ -211,7 +211,7 @@ export class BaseFilter<
         options.targetTexture = options.filterBackend.createTexture(
           gl,
           width,
-          height
+          height,
         );
       }
       gl.framebufferTexture2D(
@@ -219,7 +219,7 @@ export class BaseFilter<
         gl.COLOR_ATTACHMENT0,
         gl.TEXTURE_2D,
         options.targetTexture,
-        0
+        0,
       );
     } else {
       // draw last filter on canvas and not to framebuffer.
@@ -271,7 +271,7 @@ export class BaseFilter<
     }
   }
 
-  applyTo2d(options: T2DPipelineState): void {
+  applyTo2d(_options: T2DPipelineState): void {
     // override by subclass
   }
 
@@ -333,7 +333,7 @@ export class BaseFilter<
   bindAdditionalTexture(
     gl: WebGLRenderingContext,
     texture: WebGLTexture,
-    textureUnit: number
+    textureUnit: number,
   ) {
     gl.activeTexture(textureUnit);
     gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -352,12 +352,12 @@ export class BaseFilter<
    *
    * Intended to be overridden by subclasses.
    *
-   * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program.
-   * @param {Object} uniformLocations A map of shader uniform names to their locations.
+   * @param {WebGLRenderingContext} _gl The canvas context used to compile the shader program.
+   * @param {Object} _uniformLocations A map of shader uniform names to their locations.
    */
   sendUniformData(
-    gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    _gl: WebGLRenderingContext,
+    _uniformLocations: TWebGLUniformLocationMap,
   ): void {
     // override by subclass
   }
@@ -381,13 +381,15 @@ export class BaseFilter<
    */
   toObject(): { type: Name } & OwnProps {
     const defaultKeys = Object.keys(
-      (this.constructor as typeof BaseFilter).defaults
+      (this.constructor as typeof BaseFilter).defaults,
     ) as (keyof OwnProps)[];
 
     return {
       type: this.type,
       ...defaultKeys.reduce<OwnProps>((acc, key) => {
-        acc[key] = this[key as keyof this] as unknown as typeof acc[typeof key];
+        acc[key] = this[
+          key as keyof this
+        ] as unknown as (typeof acc)[typeof key];
         return acc;
       }, {} as OwnProps),
     };
@@ -404,7 +406,7 @@ export class BaseFilter<
 
   static async fromObject(
     { type, ...filterOptions }: Record<string, any>,
-    options: Abortable
+    _options: Abortable,
   ): Promise<BaseFilter<string, object>> {
     return new this(filterOptions);
   }

package/src/filters/BlendColor.ts

@@ -182,7 +182,7 @@ export class BlendColor extends BaseFilter<'BlendColor', BlendColorOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     const source = new Color(this.color).getSource();
     source[0] = (this.alpha * source[0]) / 255;

package/src/filters/BlendImage.ts

@@ -141,7 +141,7 @@ export class BlendImage extends BaseFilter<'BlendImage', BlendImageOwnProps> {
       0,
       image.scaleY,
       image.left,
-      image.top
+      image.top,
     );
     context.drawImage(image.getElement(), 0, 0, width, height);
     const blendData = context.getImageData(0, 0, width, height).data;
@@ -178,7 +178,7 @@ export class BlendImage extends BaseFilter<'BlendImage', BlendImageOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     const matrix = this.calculateMatrix();
     gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1.
@@ -211,11 +211,11 @@ export class BlendImage extends BaseFilter<'BlendImage', BlendImageOwnProps> {
    */
   static async fromObject(
     { type, image, ...filterOptions }: Record<string, any>,
-    options: { signal: AbortSignal }
+    options: { signal: AbortSignal },
   ): Promise<BaseFilter<'BlendImage', BlendImageOwnProps>> {
     return FabricImage.fromObject(image, options).then(
       (enlivedImage) =>
-        new this({ ...filterOptions, image: enlivedImage }) as BlendImage
+        new this({ ...filterOptions, image: enlivedImage }) as BlendImage,
     );
   }
 }

package/src/filters/Blur.ts

@@ -133,7 +133,7 @@ export class Blur extends BaseFilter<'Blur', BlurOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     const delta = this.chooseRightDelta();
     gl.uniform2fv(uniformLocations.uDelta, delta);

package/src/filters/Boilerplate.ts

@@ -72,7 +72,7 @@ export class MyFilter extends BaseFilter<'MyFilter', MyFilterOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform1f(uniformLocations.uMyParameter, this.myParameter);
   }

package/src/filters/Brightness.ts

@@ -67,7 +67,7 @@ export class Brightness extends BaseFilter<'Brightness', BrightnessOwnProps> {
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     gl.uniform1f(uniformLocations.uBrightness, this.brightness);
   }

package/src/filters/Canvas2dFilterBackend.ts

@@ -29,7 +29,7 @@ export class Canvas2dFilterBackend {
     sourceElement: CanvasImageSource,
     sourceWidth: number,
     sourceHeight: number,
-    targetCanvas: HTMLCanvasElement
+    targetCanvas: HTMLCanvasElement,
   ): T2DPipelineState | void {
     const ctx = targetCanvas.getContext('2d');
     if (!ctx) {

package/src/filters/ColorMatrix.ts

@@ -35,7 +35,7 @@ export const colorMatrixDefaultValues: ColorMatrixOwnProps = {
    */
 export class ColorMatrix<
   Name extends string = 'ColorMatrix',
-  OwnProps extends object = ColorMatrixOwnProps
+  OwnProps extends object = ColorMatrixOwnProps,
 > extends BaseFilter<Name, OwnProps> {
   /**
    * Colormatrix for pixels.
@@ -105,7 +105,7 @@ export class ColorMatrix<
    */
   sendUniformData(
     gl: WebGLRenderingContext,
-    uniformLocations: TWebGLUniformLocationMap
+    uniformLocations: TWebGLUniformLocationMap,
   ) {
     const m = this.matrix,
       matrix = [

package/src/filters/ColorMatrixFilters.ts

@@ -29,7 +29,7 @@ export const Brownie = createColorMatrixFilter(
   [
     0.5997, 0.34553, -0.27082, 0, 0.186, -0.0377, 0.86095, 0.15059, 0, -0.1449,
     0.24113, -0.07441, 0.44972, 0, -0.02965, 0, 0, 0, 1, 0,
-  ]
+  ],
 );
 
 export const Vintage = createColorMatrixFilter(
@@ -37,7 +37,7 @@ export const Vintage = createColorMatrixFilter(
   [
     0.62793, 0.32021, -0.03965, 0, 0.03784, 0.02578, 0.64411, 0.03259, 0,
     0.02926, 0.0466, -0.08512, 0.52416, 0, 0.02023, 0, 0, 0, 1, 0,
-  ]
+  ],
 );
 
 export const Kodachrome = createColorMatrixFilter(
@@ -45,7 +45,7 @@ export const Kodachrome = createColorMatrixFilter(
   [
     1.12855, -0.39673, -0.03992, 0, 0.24991, -0.16404, 1.08352, -0.05498, 0,
     0.09698, -0.16786, -0.56034, 1.60148, 0, 0.13972, 0, 0, 0, 1, 0,
-  ]
+  ],
 );
 
 export const Technicolor = createColorMatrixFilter(
@@ -53,7 +53,7 @@ export const Technicolor = createColorMatrixFilter(
   [
     1.91252, -0.85453, -0.09155, 0, 0.04624, -0.30878, 1.76589, -0.10601, 0,
     -0.27589, -0.2311, -0.75018, 1.84759, 0, 0.12137, 0, 0, 0, 1, 0,
-  ]
+  ],
 );
 
 export const Polaroid = createColorMatrixFilter(
@@ -61,7 +61,7 @@ export const Polaroid = createColorMatrixFilter(
   [
     1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016,
     1.483, 0, 0, 0, 0, 0, 1, 0,
-  ]
+  ],
 );
 
 export const Sepia = createColorMatrixFilter(
@@ -69,7 +69,7 @@ export const Sepia = createColorMatrixFilter(
   [
     0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131,
     0, 0, 0, 0, 0, 1, 0,
-  ]
+  ],
 );
 
 export const BlackWhite = createColorMatrixFilter(
@@ -77,5 +77,5 @@ export const BlackWhite = createColorMatrixFilter(
   [
     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,
-  ]
+  ],
 );