chore(TS): Image

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(TS): migrate Image [#8443](https://github.com/fabricjs/fabric.js/pull/8443)
 - chore(TS): migrate Shadow [#8462](https://github.com/fabricjs/fabric.js/pull/8462)
 - fix(Itext): show incorrect pointer position after scale changed
 - chore(TS): migrate text classes/mixins [#8408](https://github.com/fabricjs/fabric.js/pull/8408)

src/filters/2d_backend.class.ts

@@ -1,6 +1,7 @@
 /**
  * Canvas 2D filter backend.
  */
+import type { BaseFilter } from './base_filter.class';
 import { T2DPipelineState } from './typedefs';
 
 export class Canvas2dFilterBackend {
@@ -24,8 +25,8 @@ export class Canvas2dFilterBackend {
    * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn.
    */
   applyFilters(
-    filters: any[],
-    sourceElement: HTMLImageElement | HTMLCanvasElement,
+    filters: BaseFilter[],
+    sourceElement: CanvasImageSource,
     sourceWidth: number,
     sourceHeight: number,
     targetCanvas: HTMLCanvasElement
@@ -47,7 +48,7 @@ export class Canvas2dFilterBackend {
       ctx,
       filterBackend: this,
     };
-    filters.forEach(function (filter) {
+    filters.forEach((filter) => {
       filter.applyTo(pipelineState);
     });
     const { imageData: imageDataPostFilter } = pipelineState;

src/filters/FilterBackend.ts

@@ -0,0 +1,30 @@
+import { fabric } from '../../HEADER';
+import { config } from '../config';
+import { Canvas2dFilterBackend } from './2d_backend.class';
+import { WebGLFilterBackend } from './webgl_backend.class';
+import { webGLProbe } from './WebGLProbe';
+
+export type FilterBackend = WebGLFilterBackend | Canvas2dFilterBackend;
+
+export function initFilterBackend(): FilterBackend {
+  webGLProbe.queryWebGL();
+  if (config.enableGLFiltering && webGLProbe.isSupported(config.textureSize)) {
+    return new WebGLFilterBackend({ tileSize: config.textureSize });
+  } else {
+    return new Canvas2dFilterBackend();
+  }
+}
+
+/**
+ * @todo refactor to a module w/o assigning to fabric
+ */
+export function getFilterBackend(): FilterBackend {
+  if (!fabric.filterBackend) {
+    fabric.filterBackend = initFilterBackend();
+  }
+  return fabric.filterBackend;
+}
+
+fabric.Canvas2dFilterBackend = Canvas2dFilterBackend;
+fabric.WebglFilterBackend = WebGLFilterBackend;
+fabric.initFilterBackend = initFilterBackend;

src/filters/WebGLProbe.ts

@@ -1,8 +1,5 @@
 import { fabric } from '../../HEADER';
-import { config } from '../config';
 import { createCanvasElement } from '../util/misc/dom';
-import { Canvas2dFilterBackend } from './2d_backend.class';
-import { WebGLFilterBackend } from './webgl_backend.class';
 
 export enum WebGLPrecision {
   low = 'lowp',
@@ -11,7 +8,7 @@ export enum WebGLPrecision {
 }
 
 /**
- * Lazy initialize WebGL contants
+ * Lazy initialize WebGL constants
  */
 class WebGLProbe {
   maxTextureSize?: number;
@@ -63,18 +60,3 @@ class WebGLProbe {
 }
 
 export const webGLProbe = new WebGLProbe();
-
-export function initFilterBackend():
-  | WebGLFilterBackend
-  | Canvas2dFilterBackend {
-  webGLProbe.queryWebGL();
-  if (config.enableGLFiltering && webGLProbe.isSupported(config.textureSize)) {
-    return new WebGLFilterBackend({ tileSize: config.textureSize });
-  } else {
-    return new Canvas2dFilterBackend();
-  }
-}
-
-fabric.Canvas2dFilterBackend = Canvas2dFilterBackend;
-fabric.WebglFilterBackend = WebGLFilterBackend;
-fabric.initFilterBackend = initFilterBackend;

src/filters/base_filter.class.ts

@@ -230,7 +230,8 @@ export abstract class BaseFilter {
    * Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter )
    * @param {Object} options
    **/
-  isNeutralState(/* options */): boolean {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isNeutralState(options?: any): boolean {
     const main = this.mainParameter,
       // @ts-ignore ts you are lying
       proto = this.__proto__;

src/filters/typedefs.ts

@@ -31,7 +31,7 @@ export type T2DPipelineState = {
   filterBackend: Canvas2dFilterBackend;
   canvasEl: HTMLCanvasElement;
   imageData: ImageData;
-  originalEl: HTMLCanvasElement | HTMLImageElement;
+  originalEl: CanvasImageSource;
   originalImageData?: ImageData;
   ctx: CanvasRenderingContext2D;
   helpLayer?: HTMLCanvasElement;

src/mixins/object_interactivity.mixin.ts

@@ -79,7 +79,7 @@ export class InteractiveFabricObject extends FabricObject {
    * Constructor
    * @param {Object} [options] Options object
    */
-  constructor(options: Record<string, unknown>) {
+  constructor(options?: Record<string, unknown>) {
     super(options);
   }
 

src/parser/parseAttributes.ts

@@ -16,9 +16,13 @@ import { setStrokeFillOpacity } from './setStrokeFillOpacity';
  * @param {Array} attributes Array of attributes to parse
  * @return {Object} object containing parsed attributes' names/values
  */
-export function parseAttributes(element, attributes, svgUid?: string) {
+export function parseAttributes(
+  element,
+  attributes,
+  svgUid?: string
+): Record<string, any> {
   if (!element) {
-    return;
+    return {};
   }
 
   let value,
@@ -65,12 +69,10 @@ export function parseAttributes(element, attributes, svgUid?: string) {
     );
   }
 
-  let normalizedAttr,
-    normalizedValue,
-    normalizedStyle = {};
+  const normalizedStyle = {};
   for (const attr in ownAttributes) {
-    normalizedAttr = normalizeAttr(attr);
-    normalizedValue = normalizeValue(
+    const normalizedAttr = normalizeAttr(attr);
+    const normalizedValue = normalizeValue(
       normalizedAttr,
       ownAttributes[attr],
       parentAttributes,
@@ -81,7 +83,7 @@ export function parseAttributes(element, attributes, svgUid?: string) {
   if (normalizedStyle && normalizedStyle.font) {
     parseFontDeclaration(normalizedStyle.font, normalizedStyle);
   }
-  const mergedAttrs = Object.assign(parentAttributes, normalizedStyle);
+  const mergedAttrs = { ...parentAttributes, ...normalizedStyle };
   return svgValidParentsRegEx.test(element.nodeName)
     ? mergedAttrs
     : setStrokeFillOpacity(mergedAttrs);