fabric 5.3.0 → 6.0.0-beta1

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

@@ -1,64 +1,63 @@
-/**
- * @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 { createCanvasElement } from '../util/misc/dom';
+import type {
+  T2DPipelineState,
+  TWebGLAttributeLocationMap,
+  TWebGLPipelineState,
+  TWebGLProgramCacheItem,
+  TWebGLUniformLocationMap,
+} from './typedefs';
+import { isWebGLPipelineState } from './typedefs';
+import { WebGLPrecision, webGLProbe } from './WebGLProbe';
 
+const highPsourceCode = `precision ${WebGLPrecision.high} float`;
+
+export type AbstractBaseFilterOptions<T> = {
+  mainParameter: string;
+  vertexSource: string;
+  fragmentSource: T;
+};
+
+export type BaseFilterOptions = AbstractBaseFilterOptions<string>;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface AnyFilter
+  extends AbstractBaseFilter<string | Record<string, string>> {}
+
+export abstract class AbstractBaseFilter<T> {
   /**
    * Filter type
    * @param {String} type
    * @default
    */
-  type: 'BaseFilter',
+  declare type: string;
 
   /**
    * Array of attributes to send with buffers. do not modify
    * @private
    */
+  declare vertexSource: string;
 
-  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' +
-    '}',
+  declare fragmentSource: T;
 
   /**
-   * 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;
 
   /**
-   * 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: Partial<AbstractBaseFilterOptions<T>> & Record<string, any> = {}
+  ) {
+    Object.assign(this, options);
+  }
+
+  abstract getFragmentSource(): string;
 
   /**
    * Compile this filter's shader program.
@@ -67,59 +66,66 @@ 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
+  ) {
+    if (
+      webGLProbe.webGLPrecision &&
+      webGLProbe.webGLPrecision !== WebGLPrecision.high
+    ) {
       fragmentSource = fragmentSource.replace(
-        /precision highp float/g,
-        'precision ' + fabric.webGlPrecision + ' float'
+        new RegExp(highPsourceCode, 'g'),
+        highPsourceCode.replace(WebGLPrecision.high, webGLProbe.webGLPrecision)
       );
     }
-    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 +134,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 +152,10 @@ 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 { };
-  },
+  abstract getUniformLocations(
+    gl: WebGLRenderingContext,
+    program: WebGLProgram
+  ): TWebGLUniformLocationMap;
 
   /**
    * Send attribute data from this filter to its shader program on the GPU.
@@ -154,41 +163,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 +218,24 @@ 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,
+      // @ts-ignore ts you are lying
+      proto = this.__proto__;
     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];
+      if (Array.isArray(proto[main]) && Array.isArray(this[main])) {
+        return proto[main].every(
+          // @ts-ignore requires some kind of dynamic type thing, or delete, or leave it ignored
+          (value: any, i: number) => value === this[main][i]
+        );
+      } else {
+        return proto[main] === this[main];
       }
-    }
-    else {
+    } else {
       return false;
     }
-  },
+  }
 
   /**
    * Apply this filter to the input image data provided.
@@ -231,29 +250,36 @@ 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);
     }
-  },
+  }
+
+  abstract applyTo2d(options: T2DPipelineState): void;
+
+  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 +293,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 +310,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 +347,68 @@ 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.
-  },
+  abstract sendUniformData(
+    gl: WebGLRenderingContext,
+    uniformLocations: TWebGLUniformLocationMap
+  ): void;
 
   /**
    * 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();
   }
+}
+
+export abstract class BaseFilter extends AbstractBaseFilter<string> {
+  getFragmentSource() {
+    return this.fragmentSource;
+  }
+}
+
+Object.assign(AbstractBaseFilter.prototype, {
+  vertexSource: `
+    attribute vec2 aPosition;
+    varying vec2 vTexCoord;
+    void main() {
+      vTexCoord = aPosition;
+      gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);
+    }`,
 });
 
-fabric.Image.filters.BaseFilter.fromObject = function(object, callback) {
-  var filter = new fabric.Image.filters[object.type](object);
-  callback && callback(filter);
-  return filter;
-};
+Object.assign(BaseFilter.prototype, {
+  fragmentSource: `
+    ${highPsourceCode};
+    varying vec2 vTexCoord;
+    uniform sampler2D uTexture;
+    void main() {
+      gl_FragColor = texture2D(uTexture, vTexCoord);
+    }`,
+});