fabric 5.3.0 → 6.0.0-beta3

package/src/filters/{base_filter.class.js → BaseFilter.ts}

@@ -1,64 +1,61 @@
-/**
- * @namespace fabric.Image.filters
- * @memberOf fabric.Image
- * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#image_filters}
- * @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
- */
-fabric.Image = fabric.Image || { };
-fabric.Image.filters = fabric.Image.filters || { };
-
-/**
- * Root filter class from which all filter classes inherit from
- * @class fabric.Image.filters.BaseFilter
- * @memberOf fabric.Image.filters
- */
-fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ {
+import { getEnv } from '../env';
+import { createCanvasElement } from '../util/misc/dom';
+import type {
+  T2DPipelineState,
+  TWebGLAttributeLocationMap,
+  TWebGLPipelineState,
+  TWebGLProgramCacheItem,
+  TWebGLUniformLocationMap,
+} from './typedefs';
+import { isWebGLPipelineState } from './typedefs';
+import { GLPrecision } from './GLProbes/GLProbe';
+import {
+  highPsourceCode,
+  identityFragmentShader,
+  vertexSource,
+} from './shaders/baseFilter';
 
+export class BaseFilter {
   /**
    * Filter type
    * @param {String} type
    * @default
    */
-  type: 'BaseFilter',
+  get type(): string {
+    return this.constructor.name;
+  }
+
+  declare static defaults: Record<string, any>;
 
   /**
    * Array of attributes to send with buffers. do not modify
    * @private
    */
-
-  vertexSource: 'attribute vec2 aPosition;\n' +
-    'varying vec2 vTexCoord;\n' +
-    'void main() {\n' +
-      'vTexCoord = aPosition;\n' +
-      'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' +
-    '}',
-
-  fragmentSource: 'precision highp float;\n' +
-    'varying vec2 vTexCoord;\n' +
-    'uniform sampler2D uTexture;\n' +
-    'void main() {\n' +
-      'gl_FragColor = texture2D(uTexture, vTexCoord);\n' +
-    '}',
+  vertexSource = vertexSource;
 
   /**
-   * Constructor
-   * @param {Object} [options] Options object
+   * Name of the parameter that can be changed in the filter.
+   * Some filters have more than one parameter and there is no
+   * mainParameter
+   * @private
    */
-  initialize: function(options) {
-    if (options) {
-      this.setOptions(options);
-    }
-  },
+  declare mainParameter?: keyof this | undefined;
 
   /**
-   * Sets filter's properties from options
+   * Constructor
    * @param {Object} [options] Options object
    */
-  setOptions: function(options) {
-    for (var prop in options) {
-      this[prop] = options[prop];
-    }
-  },
+  constructor({ ...options }: Record<string, any> = {}) {
+    Object.assign(
+      this,
+      (this.constructor as typeof BaseFilter).defaults,
+      options
+    );
+  }
+
+  protected getFragmentSource(): string {
+    return identityFragmentShader;
+  }
 
   /**
    * Compile this filter's shader program.
@@ -67,59 +64,64 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
    * @param {String} fragmentSource fragmentShader source for compilation
    * @param {String} vertexSource vertexShader source for compilation
    */
-  createProgram: function(gl, fragmentSource, vertexSource) {
-    fragmentSource = fragmentSource || this.fragmentSource;
-    vertexSource = vertexSource || this.vertexSource;
-    if (fabric.webGlPrecision !== 'highp'){
+  createProgram(
+    gl: WebGLRenderingContext,
+    fragmentSource: string = this.getFragmentSource(),
+    vertexSource: string = this.vertexSource
+  ) {
+    const { WebGLProbe } = getEnv();
+    if (WebGLProbe.GLPrecision && WebGLProbe.GLPrecision !== GLPrecision.high) {
       fragmentSource = fragmentSource.replace(
-        /precision highp float/g,
-        'precision ' + fabric.webGlPrecision + ' float'
+        new RegExp(highPsourceCode, 'g'),
+        highPsourceCode.replace(GLPrecision.high, WebGLProbe.GLPrecision)
       );
     }
-    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    const program = gl.createProgram();
+
+    if (!vertexShader || !fragmentShader || !program) {
+      throw new Error('Vertex, fragment shader or program creation error');
+    }
     gl.shaderSource(vertexShader, vertexSource);
     gl.compileShader(vertexShader);
     if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
       throw new Error(
-        // eslint-disable-next-line prefer-template
-        'Vertex shader compile error for ' + this.type + ': ' +
-        gl.getShaderInfoLog(vertexShader)
+        `Vertex shader compile error for ${this.type}: ${gl.getShaderInfoLog(
+          vertexShader
+        )}`
       );
     }
 
-    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
     gl.shaderSource(fragmentShader, fragmentSource);
     gl.compileShader(fragmentShader);
     if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
       throw new Error(
-        // eslint-disable-next-line prefer-template
-        'Fragment shader compile error for ' + this.type + ': ' +
-        gl.getShaderInfoLog(fragmentShader)
+        `Fragment shader compile error for ${this.type}: ${gl.getShaderInfoLog(
+          fragmentShader
+        )}`
       );
     }
 
-    var program = gl.createProgram();
     gl.attachShader(program, vertexShader);
     gl.attachShader(program, fragmentShader);
     gl.linkProgram(program);
     if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
       throw new Error(
         // eslint-disable-next-line prefer-template
-        'Shader link error for "${this.type}" ' +
-        gl.getProgramInfoLog(program)
+        'Shader link error for "${this.type}" ' + gl.getProgramInfoLog(program)
       );
     }
 
-    var attributeLocations = this.getAttributeLocations(gl, program);
-    var uniformLocations = this.getUniformLocations(gl, program) || { };
+    const uniformLocations = this.getUniformLocations(gl, program) || {};
     uniformLocations.uStepW = gl.getUniformLocation(program, 'uStepW');
     uniformLocations.uStepH = gl.getUniformLocation(program, 'uStepH');
     return {
-      program: program,
-      attributeLocations: attributeLocations,
-      uniformLocations: uniformLocations
+      program,
+      attributeLocations: this.getAttributeLocations(gl, program),
+      uniformLocations,
     };
-  },
+  }
 
   /**
    * Return a map of attribute names to WebGLAttributeLocation objects.
@@ -128,11 +130,14 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
    * @param {WebGLShaderProgram} program The shader program from which to take attribute locations.
    * @returns {Object} A map of attribute names to attribute locations.
    */
-  getAttributeLocations: function(gl, program) {
+  getAttributeLocations(
+    gl: WebGLRenderingContext,
+    program: WebGLProgram
+  ): TWebGLAttributeLocationMap {
     return {
       aPosition: gl.getAttribLocation(program, 'aPosition'),
     };
-  },
+  }
 
   /**
    * Return a map of uniform names to WebGLUniformLocation objects.
@@ -143,10 +148,12 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
    * @param {WebGLShaderProgram} program The shader program from which to take uniform locations.
    * @returns {Object} A map of uniform names to uniform locations.
    */
-  getUniformLocations: function (/* gl, program */) {
-    // in case i do not need any special uniform i need to return an empty object
-    return { };
-  },
+  getUniformLocations(
+    gl: WebGLRenderingContext,
+    program: WebGLProgram
+  ): TWebGLUniformLocationMap {
+    return {};
+  }
 
   /**
    * Send attribute data from this filter to its shader program on the GPU.
@@ -154,41 +161,53 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
    * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program.
    * @param {Object} attributeLocations A map of shader attribute names to their locations.
    */
-  sendAttributeData: function(gl, attributeLocations, aPositionData) {
-    var attributeLocation = attributeLocations.aPosition;
-    var buffer = gl.createBuffer();
+  sendAttributeData(
+    gl: WebGLRenderingContext,
+    attributeLocations: Record<string, number>,
+    aPositionData: Float32Array
+  ) {
+    const attributeLocation = attributeLocations.aPosition;
+    const buffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
     gl.enableVertexAttribArray(attributeLocation);
     gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0);
     gl.bufferData(gl.ARRAY_BUFFER, aPositionData, gl.STATIC_DRAW);
-  },
+  }
 
-  _setupFrameBuffer: function(options) {
-    var gl = options.context, width, height;
+  _setupFrameBuffer(options: TWebGLPipelineState) {
+    const gl = options.context;
     if (options.passes > 1) {
-      width = options.destinationWidth;
-      height = options.destinationHeight;
+      const width = options.destinationWidth;
+      const height = options.destinationHeight;
       if (options.sourceWidth !== width || options.sourceHeight !== height) {
         gl.deleteTexture(options.targetTexture);
-        options.targetTexture = options.filterBackend.createTexture(gl, width, height);
+        options.targetTexture = options.filterBackend.createTexture(
+          gl,
+          width,
+          height
+        );
       }
-      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D,
-        options.targetTexture, 0);
-    }
-    else {
+      gl.framebufferTexture2D(
+        gl.FRAMEBUFFER,
+        gl.COLOR_ATTACHMENT0,
+        gl.TEXTURE_2D,
+        options.targetTexture,
+        0
+      );
+    } else {
       // draw last filter on canvas and not to framebuffer.
       gl.bindFramebuffer(gl.FRAMEBUFFER, null);
       gl.finish();
     }
-  },
+  }
 
-  _swapTextures: function(options) {
+  _swapTextures(options: TWebGLPipelineState) {
     options.passes--;
     options.pass++;
-    var temp = options.targetTexture;
+    const temp = options.targetTexture;
     options.targetTexture = options.sourceTexture;
     options.sourceTexture = temp;
-  },
+  }
 
   /**
    * Generic isNeutral implementation for one parameter based filters.
@@ -197,26 +216,25 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
    * Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter )
    * @param {Object} options
    **/
-  isNeutralState: function(/* options */) {
-    var main = this.mainParameter,
-        _class = fabric.Image.filters[this.type].prototype;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isNeutralState(options?: any): boolean {
+    const main = this.mainParameter,
+      defaultValue = (this.constructor as typeof BaseFilter).defaults[
+        main as string
+      ];
     if (main) {
-      if (Array.isArray(_class[main])) {
-        for (var i = _class[main].length; i--;) {
-          if (this[main][i] !== _class[main][i]) {
-            return false;
-          }
-        }
-        return true;
-      }
-      else {
-        return _class[main] === this[main];
+      const thisValue = this[main];
+      if (Array.isArray(defaultValue) && Array.isArray(thisValue)) {
+        return defaultValue.every(
+          (value: any, i: number) => value === thisValue[i]
+        );
+      } else {
+        return defaultValue === thisValue;
       }
-    }
-    else {
+    } else {
       return false;
     }
-  },
+  }
 
   /**
    * Apply this filter to the input image data provided.
@@ -231,29 +249,43 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
    * @param {WebGLRenderingContext} options.context The GL context used for rendering.
    * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type.
    */
-  applyTo: function(options) {
-    if (options.webgl) {
+  applyTo(options: TWebGLPipelineState | T2DPipelineState) {
+    if (isWebGLPipelineState(options)) {
       this._setupFrameBuffer(options);
       this.applyToWebGL(options);
       this._swapTextures(options);
-    }
-    else {
+    } else {
       this.applyTo2d(options);
     }
-  },
+  }
+
+  applyTo2d(options: T2DPipelineState): void {
+    // override by subclass
+  }
+
+  /**
+   * Returns a string that represent the current selected shader code for the filter.
+   * Used to force recompilation when parameters change or to retrieve the shader from cache
+   * @type string
+   **/
+  getCacheKey() {
+    return this.type;
+  }
 
   /**
    * Retrieves the cached shader.
    * @param {Object} options
    * @param {WebGLRenderingContext} options.context The GL context used for rendering.
    * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type.
+   * @return {WebGLProgram} the compiled program shader
    */
-  retrieveShader: function(options) {
-    if (!options.programCache.hasOwnProperty(this.type)) {
-      options.programCache[this.type] = this.createProgram(options.context);
+  retrieveShader(options: TWebGLPipelineState): TWebGLProgramCacheItem {
+    const key = this.getCacheKey();
+    if (!options.programCache[key]) {
+      options.programCache[key] = this.createProgram(options.context);
     }
-    return options.programCache[this.type];
-  },
+    return options.programCache[key];
+  }
 
   /**
    * Apply this filter using webgl.
@@ -267,13 +299,12 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
    * @param {WebGLRenderingContext} options.context The GL context used for rendering.
    * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type.
    */
-  applyToWebGL: function(options) {
-    var gl = options.context;
-    var shader = this.retrieveShader(options);
+  applyToWebGL(options: TWebGLPipelineState) {
+    const gl = options.context;
+    const shader = this.retrieveShader(options);
     if (options.pass === 0 && options.originalTexture) {
       gl.bindTexture(gl.TEXTURE_2D, options.originalTexture);
-    }
-    else {
+    } else {
       gl.bindTexture(gl.TEXTURE_2D, options.sourceTexture);
     }
     gl.useProgram(shader.program);
@@ -285,28 +316,34 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
     this.sendUniformData(gl, shader.uniformLocations);
     gl.viewport(0, 0, options.destinationWidth, options.destinationHeight);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-  },
+  }
 
-  bindAdditionalTexture: function(gl, texture, textureUnit) {
+  bindAdditionalTexture(
+    gl: WebGLRenderingContext,
+    texture: WebGLTexture,
+    textureUnit: number
+  ) {
     gl.activeTexture(textureUnit);
     gl.bindTexture(gl.TEXTURE_2D, texture);
     // reset active texture to 0 as usual
     gl.activeTexture(gl.TEXTURE0);
-  },
+  }
 
-  unbindAdditionalTexture: function(gl, textureUnit) {
+  unbindAdditionalTexture(gl: WebGLRenderingContext, textureUnit: number) {
     gl.activeTexture(textureUnit);
     gl.bindTexture(gl.TEXTURE_2D, null);
     gl.activeTexture(gl.TEXTURE0);
-  },
+  }
 
-  getMainParameter: function() {
-    return this[this.mainParameter];
-  },
+  getMainParameter() {
+    return this.mainParameter ? this[this.mainParameter] : undefined;
+  }
 
-  setMainParameter: function(value) {
-    this[this.mainParameter] = value;
-  },
+  setMainParameter(value: any) {
+    if (this.mainParameter) {
+      this[this.mainParameter] = value;
+    }
+  }
 
   /**
    * Send uniform data from this filter to its shader program on the GPU.
@@ -316,47 +353,51 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
    * @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: function(/* gl, uniformLocations */) {
-    // Intentionally left blank.  Override me in subclasses.
-  },
+  sendUniformData(
+    gl: WebGLRenderingContext,
+    uniformLocations: TWebGLUniformLocationMap
+  ): void {
+    // override by subclass
+  }
 
   /**
    * If needed by a 2d filter, this functions can create an helper canvas to be used
    * remember that options.targetCanvas is available for use till end of chain.
    */
-  createHelpLayer: function(options) {
+  createHelpLayer(options: T2DPipelineState) {
     if (!options.helpLayer) {
-      var helpLayer = document.createElement('canvas');
+      const helpLayer = createCanvasElement();
       helpLayer.width = options.sourceWidth;
       helpLayer.height = options.sourceHeight;
       options.helpLayer = helpLayer;
     }
-  },
+  }
 
   /**
    * Returns object representation of an instance
    * @return {Object} Object representation of an instance
    */
-  toObject: function() {
-    var object = { type: this.type }, mainP = this.mainParameter;
-    if (mainP) {
-      object[mainP] = this[mainP];
-    }
-    return object;
-  },
+  toObject() {
+    const mainP = this.mainParameter;
+    return {
+      type: this.type,
+      ...(mainP ? { [mainP]: this[mainP] } : {}),
+    };
+  }
 
   /**
    * Returns a JSON representation of an instance
    * @return {Object} JSON
    */
-  toJSON: function() {
+  toJSON() {
     // delegate, not alias
     return this.toObject();
   }
-});
 
-fabric.Image.filters.BaseFilter.fromObject = function(object, callback) {
-  var filter = new fabric.Image.filters[object.type](object);
-  callback && callback(filter);
-  return filter;
-};
+  static async fromObject(
+    { type, ...filterOptions }: Record<string, any>,
+    options: { signal: AbortSignal }
+  ) {
+    return new this(filterOptions);
+  }
+}