fabric 5.3.0 → 6.0.0-beta3

package/src/filters/blendimage_filter.class.js

@@ -1,247 +0,0 @@
-(function(global) {
-  'use strict';
-
-  var fabric = global.fabric,
-      filters = fabric.Image.filters,
-      createClass = fabric.util.createClass;
-
-  /**
-   * Image Blend filter class
-   * @class fabric.Image.filter.BlendImage
-   * @memberOf fabric.Image.filters
-   * @extends fabric.Image.filters.BaseFilter
-   * @example
-   * var filter = new fabric.Image.filters.BlendColor({
-   *  color: '#000',
-   *  mode: 'multiply'
-   * });
-   *
-   * var filter = new fabric.Image.filters.BlendImage({
-   *  image: fabricImageObject,
-   *  mode: 'multiply',
-   *  alpha: 0.5
-   * });
-   * object.filters.push(filter);
-   * object.applyFilters();
-   * canvas.renderAll();
-   */
-
-  filters.BlendImage = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.BlendImage.prototype */ {
-    type: 'BlendImage',
-
-    /**
-     * Color to make the blend operation with. default to a reddish color since black or white
-     * gives always strong result.
-     **/
-    image: null,
-
-    /**
-     * Blend mode for the filter (one of "multiply", "mask")
-     * @type String
-     * @default
-     **/
-    mode: 'multiply',
-
-    /**
-     * alpha value. represent the strength of the blend image operation.
-     * not implemented.
-     **/
-    alpha: 1,
-
-    vertexSource: 'attribute vec2 aPosition;\n' +
-      'varying vec2 vTexCoord;\n' +
-      'varying vec2 vTexCoord2;\n' +
-      'uniform mat3 uTransformMatrix;\n' +
-      'void main() {\n' +
-        'vTexCoord = aPosition;\n' +
-        'vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n' +
-        'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' +
-      '}',
-
-    /**
-     * Fragment source for the Multiply program
-     */
-    fragmentSource: {
-      multiply: 'precision highp float;\n' +
-        'uniform sampler2D uTexture;\n' +
-        'uniform sampler2D uImage;\n' +
-        'uniform vec4 uColor;\n' +
-        'varying vec2 vTexCoord;\n' +
-        'varying vec2 vTexCoord2;\n' +
-        'void main() {\n' +
-          'vec4 color = texture2D(uTexture, vTexCoord);\n' +
-          'vec4 color2 = texture2D(uImage, vTexCoord2);\n' +
-          'color.rgba *= color2.rgba;\n' +
-          'gl_FragColor = color;\n' +
-        '}',
-      mask: 'precision highp float;\n' +
-        'uniform sampler2D uTexture;\n' +
-        'uniform sampler2D uImage;\n' +
-        'uniform vec4 uColor;\n' +
-        'varying vec2 vTexCoord;\n' +
-        'varying vec2 vTexCoord2;\n' +
-        'void main() {\n' +
-          'vec4 color = texture2D(uTexture, vTexCoord);\n' +
-          'vec4 color2 = texture2D(uImage, vTexCoord2);\n' +
-          'color.a = color2.a;\n' +
-          'gl_FragColor = color;\n' +
-        '}',
-    },
-
-    /**
-     * 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.
-     */
-    retrieveShader: function(options) {
-      var cacheKey = this.type + '_' + this.mode;
-      var shaderSource = this.fragmentSource[this.mode];
-      if (!options.programCache.hasOwnProperty(cacheKey)) {
-        options.programCache[cacheKey] = this.createProgram(options.context, shaderSource);
-      }
-      return options.programCache[cacheKey];
-    },
-
-    applyToWebGL: function(options) {
-      // load texture to blend.
-      var gl = options.context,
-          texture = this.createTexture(options.filterBackend, this.image);
-      this.bindAdditionalTexture(gl, texture, gl.TEXTURE1);
-      this.callSuper('applyToWebGL', options);
-      this.unbindAdditionalTexture(gl, gl.TEXTURE1);
-    },
-
-    createTexture: function(backend, image) {
-      return backend.getCachedTexture(image.cacheKey, image._element);
-    },
-
-    /**
-     * Calculate a transformMatrix to adapt the image to blend over
-     * @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.
-     */
-    calculateMatrix: function() {
-      var image = this.image,
-          width = image._element.width,
-          height = image._element.height;
-      return [
-        1 / image.scaleX, 0, 0,
-        0, 1 / image.scaleY, 0,
-        -image.left / width, -image.top / height, 1
-      ];
-    },
-
-    /**
-     * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image.
-     *
-     * @param {Object} options
-     * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
-     */
-    applyTo2d: function(options) {
-      var imageData = options.imageData,
-          resources = options.filterBackend.resources,
-          data = imageData.data, iLen = data.length,
-          width = imageData.width,
-          height = imageData.height,
-          tr, tg, tb, ta,
-          r, g, b, a,
-          canvas1, context, image = this.image, blendData;
-
-      if (!resources.blendImage) {
-        resources.blendImage = fabric.util.createCanvasElement();
-      }
-      canvas1 = resources.blendImage;
-      context = canvas1.getContext('2d');
-      if (canvas1.width !== width || canvas1.height !== height) {
-        canvas1.width = width;
-        canvas1.height = height;
-      }
-      else {
-        context.clearRect(0, 0, width, height);
-      }
-      context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top);
-      context.drawImage(image._element, 0, 0, width, height);
-      blendData = context.getImageData(0, 0, width, height).data;
-      for (var i = 0; i < iLen; i += 4) {
-
-        r = data[i];
-        g = data[i + 1];
-        b = data[i + 2];
-        a = data[i + 3];
-
-        tr = blendData[i];
-        tg = blendData[i + 1];
-        tb = blendData[i + 2];
-        ta = blendData[i + 3];
-
-        switch (this.mode) {
-          case 'multiply':
-            data[i] = r * tr / 255;
-            data[i + 1] = g * tg / 255;
-            data[i + 2] = b * tb / 255;
-            data[i + 3] = a * ta / 255;
-            break;
-          case 'mask':
-            data[i + 3] = ta;
-            break;
-        }
-      }
-    },
-
-    /**
-     * Return WebGL uniform locations for this filter's shader.
-     *
-     * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-     * @param {WebGLShaderProgram} program This filter's compiled shader program.
-     */
-    getUniformLocations: function(gl, program) {
-      return {
-        uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'),
-        uImage: gl.getUniformLocation(program, 'uImage'),
-      };
-    },
-
-    /**
-     * Send data from this filter to its shader program's uniforms.
-     *
-     * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-     * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects
-     */
-    sendUniformData: function(gl, uniformLocations) {
-      var matrix = this.calculateMatrix();
-      gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1.
-      gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix);
-    },
-
-    /**
-     * Returns object representation of an instance
-     * @return {Object} Object representation of an instance
-     */
-    toObject: function() {
-      return {
-        type: this.type,
-        image: this.image && this.image.toObject(),
-        mode: this.mode,
-        alpha: this.alpha
-      };
-    }
-  });
-
-  /**
-   * Returns filter instance from an object representation
-   * @static
-   * @param {Object} object Object to create an instance from
-   * @param {function} callback to be invoked after filter creation
-   * @return {fabric.Image.filters.BlendImage} Instance of fabric.Image.filters.BlendImage
-   */
-  fabric.Image.filters.BlendImage.fromObject = function(object, callback) {
-    fabric.Image.fromObject(object.image, function(image) {
-      var options = fabric.util.object.clone(object);
-      options.image = image;
-      callback(new fabric.Image.filters.BlendImage(options));
-    });
-  };
-
-})(typeof exports !== 'undefined' ? exports : this);

package/src/filters/blur_filter.class.js

@@ -1,217 +0,0 @@
-(function(global) {
-
-  'use strict';
-
-  var fabric  = global.fabric || (global.fabric = { }),
-      filters = fabric.Image.filters,
-      createClass = fabric.util.createClass;
-
-  /**
-   * Blur filter class
-   * @class fabric.Image.filters.Blur
-   * @memberOf fabric.Image.filters
-   * @extends fabric.Image.filters.BaseFilter
-   * @see {@link fabric.Image.filters.Blur#initialize} for constructor definition
-   * @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
-   * @example
-   * var filter = new fabric.Image.filters.Blur({
-   *   blur: 0.5
-   * });
-   * object.filters.push(filter);
-   * object.applyFilters();
-   * canvas.renderAll();
-   */
-  filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blur.prototype */ {
-
-    type: 'Blur',
-
-    /*
-'gl_FragColor = vec4(0.0);',
-'gl_FragColor += texture2D(texture, vTexCoord + -7 * uDelta)*0.0044299121055113265;',
-'gl_FragColor += texture2D(texture, vTexCoord + -6 * uDelta)*0.00895781211794;',
-'gl_FragColor += texture2D(texture, vTexCoord + -5 * uDelta)*0.0215963866053;',
-'gl_FragColor += texture2D(texture, vTexCoord + -4 * uDelta)*0.0443683338718;',
-'gl_FragColor += texture2D(texture, vTexCoord + -3 * uDelta)*0.0776744219933;',
-'gl_FragColor += texture2D(texture, vTexCoord + -2 * uDelta)*0.115876621105;',
-'gl_FragColor += texture2D(texture, vTexCoord + -1 * uDelta)*0.147308056121;',
-'gl_FragColor += texture2D(texture, vTexCoord              )*0.159576912161;',
-'gl_FragColor += texture2D(texture, vTexCoord + 1 * uDelta)*0.147308056121;',
-'gl_FragColor += texture2D(texture, vTexCoord + 2 * uDelta)*0.115876621105;',
-'gl_FragColor += texture2D(texture, vTexCoord + 3 * uDelta)*0.0776744219933;',
-'gl_FragColor += texture2D(texture, vTexCoord + 4 * uDelta)*0.0443683338718;',
-'gl_FragColor += texture2D(texture, vTexCoord + 5 * uDelta)*0.0215963866053;',
-'gl_FragColor += texture2D(texture, vTexCoord + 6 * uDelta)*0.00895781211794;',
-'gl_FragColor += texture2D(texture, vTexCoord + 7 * uDelta)*0.0044299121055113265;',
-*/
-
-    /* eslint-disable max-len */
-    fragmentSource: 'precision highp float;\n' +
-      'uniform sampler2D uTexture;\n' +
-      'uniform vec2 uDelta;\n' +
-      'varying vec2 vTexCoord;\n' +
-      'const float nSamples = 15.0;\n' +
-      'vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n' +
-      'float random(vec3 scale) {\n' +
-        /* use the fragment position for a different seed per-pixel */
-        'return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n' +
-      '}\n' +
-      'void main() {\n' +
-        'vec4 color = vec4(0.0);\n' +
-        'float total = 0.0;\n' +
-        'float offset = random(v3offset);\n' +
-        'for (float t = -nSamples; t <= nSamples; t++) {\n' +
-          'float percent = (t + offset - 0.5) / nSamples;\n' +
-          'float weight = 1.0 - abs(percent);\n' +
-          'color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n' +
-          'total += weight;\n' +
-        '}\n' +
-        'gl_FragColor = color / total;\n' +
-      '}',
-    /* eslint-enable max-len */
-
-    /**
-     * blur value, in percentage of image dimensions.
-     * specific to keep the image blur constant at different resolutions
-     * range between 0 and 1.
-     * @type Number
-     * @default
-     */
-    blur: 0,
-
-    mainParameter: 'blur',
-
-    applyTo: function(options) {
-      if (options.webgl) {
-        // this aspectRatio is used to give the same blur to vertical and horizontal
-        this.aspectRatio = options.sourceWidth / options.sourceHeight;
-        options.passes++;
-        this._setupFrameBuffer(options);
-        this.horizontal = true;
-        this.applyToWebGL(options);
-        this._swapTextures(options);
-        this._setupFrameBuffer(options);
-        this.horizontal = false;
-        this.applyToWebGL(options);
-        this._swapTextures(options);
-      }
-      else {
-        this.applyTo2d(options);
-      }
-    },
-
-    applyTo2d: function(options) {
-      // paint canvasEl with current image data.
-      //options.ctx.putImageData(options.imageData, 0, 0);
-      options.imageData = this.simpleBlur(options);
-    },
-
-    simpleBlur: function(options) {
-      var resources = options.filterBackend.resources, canvas1, canvas2,
-          width = options.imageData.width,
-          height = options.imageData.height;
-
-      if (!resources.blurLayer1) {
-        resources.blurLayer1 = fabric.util.createCanvasElement();
-        resources.blurLayer2 = fabric.util.createCanvasElement();
-      }
-      canvas1 = resources.blurLayer1;
-      canvas2 = resources.blurLayer2;
-      if (canvas1.width !== width || canvas1.height !== height) {
-        canvas2.width = canvas1.width = width;
-        canvas2.height = canvas1.height = height;
-      }
-      var ctx1 = canvas1.getContext('2d'),
-          ctx2 = canvas2.getContext('2d'),
-          nSamples = 15,
-          random, percent, j, i,
-          blur = this.blur * 0.06 * 0.5;
-
-      // load first canvas
-      ctx1.putImageData(options.imageData, 0, 0);
-      ctx2.clearRect(0, 0, width, height);
-
-      for (i = -nSamples; i <= nSamples; i++) {
-        random = (Math.random() - 0.5) / 4;
-        percent = i / nSamples;
-        j = blur * percent * width + random;
-        ctx2.globalAlpha = 1 - Math.abs(percent);
-        ctx2.drawImage(canvas1, j, random);
-        ctx1.drawImage(canvas2, 0, 0);
-        ctx2.globalAlpha = 1;
-        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
-      }
-      for (i = -nSamples; i <= nSamples; i++) {
-        random = (Math.random() - 0.5) / 4;
-        percent = i / nSamples;
-        j = blur * percent * height + random;
-        ctx2.globalAlpha = 1 - Math.abs(percent);
-        ctx2.drawImage(canvas1, random, j);
-        ctx1.drawImage(canvas2, 0, 0);
-        ctx2.globalAlpha = 1;
-        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
-      }
-      options.ctx.drawImage(canvas1, 0, 0);
-      var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height);
-      ctx1.globalAlpha = 1;
-      ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
-      return newImageData;
-    },
-
-    /**
-     * Return WebGL uniform locations for this filter's shader.
-     *
-     * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-     * @param {WebGLShaderProgram} program This filter's compiled shader program.
-     */
-    getUniformLocations: function(gl, program) {
-      return {
-        delta: gl.getUniformLocation(program, 'uDelta'),
-      };
-    },
-
-    /**
-     * Send data from this filter to its shader program's uniforms.
-     *
-     * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-     * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects
-     */
-    sendUniformData: function(gl, uniformLocations) {
-      var delta = this.chooseRightDelta();
-      gl.uniform2fv(uniformLocations.delta, delta);
-    },
-
-    /**
-     * choose right value of image percentage to blur with
-     * @returns {Array} a numeric array with delta values
-     */
-    chooseRightDelta: function() {
-      var blurScale = 1, delta = [0, 0], blur;
-      if (this.horizontal) {
-        if (this.aspectRatio > 1) {
-          // image is wide, i want to shrink radius horizontal
-          blurScale = 1 / this.aspectRatio;
-        }
-      }
-      else {
-        if (this.aspectRatio < 1) {
-          // image is tall, i want to shrink radius vertical
-          blurScale = this.aspectRatio;
-        }
-      }
-      blur = blurScale * this.blur * 0.12;
-      if (this.horizontal) {
-        delta[0] = blur;
-      }
-      else {
-        delta[1] = blur;
-      }
-      return delta;
-    },
-  });
-
-  /**
-   * Deserialize a JSON definition of a BlurFilter into a concrete instance.
-   */
-  filters.Blur.fromObject = fabric.Image.filters.BaseFilter.fromObject;
-
-})(typeof exports !== 'undefined' ? exports : this);

package/src/filters/brightness_filter.class.js

@@ -1,113 +0,0 @@
-(function(global) {
-
-  'use strict';
-
-  var fabric  = global.fabric || (global.fabric = { }),
-      filters = fabric.Image.filters,
-      createClass = fabric.util.createClass;
-
-  /**
-   * Brightness filter class
-   * @class fabric.Image.filters.Brightness
-   * @memberOf fabric.Image.filters
-   * @extends fabric.Image.filters.BaseFilter
-   * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition
-   * @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
-   * @example
-   * var filter = new fabric.Image.filters.Brightness({
-   *   brightness: 0.05
-   * });
-   * object.filters.push(filter);
-   * object.applyFilters();
-   */
-  filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ {
-
-    /**
-     * Filter type
-     * @param {String} type
-     * @default
-     */
-    type: 'Brightness',
-
-    /**
-     * Fragment source for the brightness program
-     */
-    fragmentSource: 'precision highp float;\n' +
-      'uniform sampler2D uTexture;\n' +
-      'uniform float uBrightness;\n' +
-      'varying vec2 vTexCoord;\n' +
-      'void main() {\n' +
-        'vec4 color = texture2D(uTexture, vTexCoord);\n' +
-        'color.rgb += uBrightness;\n' +
-        'gl_FragColor = color;\n' +
-      '}',
-
-    /**
-     * Brightness value, from -1 to 1.
-     * translated to -255 to 255 for 2d
-     * 0.0039215686 is the part of 1 that get translated to 1 in 2d
-     * @param {Number} brightness
-     * @default
-     */
-    brightness: 0,
-
-    /**
-     * Describe the property that is the filter parameter
-     * @param {String} m
-     * @default
-     */
-    mainParameter: 'brightness',
-
-    /**
-    * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image.
-    *
-    * @param {Object} options
-    * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
-    */
-    applyTo2d: function(options) {
-      if (this.brightness === 0) {
-        return;
-      }
-      var imageData = options.imageData,
-          data = imageData.data, i, len = data.length,
-          brightness = Math.round(this.brightness * 255);
-      for (i = 0; i < len; i += 4) {
-        data[i] = data[i] + brightness;
-        data[i + 1] = data[i + 1] + brightness;
-        data[i + 2] = data[i + 2] + brightness;
-      }
-    },
-
-    /**
-     * Return WebGL uniform locations for this filter's shader.
-     *
-     * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-     * @param {WebGLShaderProgram} program This filter's compiled shader program.
-     */
-    getUniformLocations: function(gl, program) {
-      return {
-        uBrightness: gl.getUniformLocation(program, 'uBrightness'),
-      };
-    },
-
-    /**
-     * Send data from this filter to its shader program's uniforms.
-     *
-     * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-     * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects
-     */
-    sendUniformData: function(gl, uniformLocations) {
-      gl.uniform1f(uniformLocations.uBrightness, this.brightness);
-    },
-  });
-
-  /**
-   * Returns filter instance from an object representation
-   * @static
-   * @param {Object} object Object to create an instance from
-   * @param {function} [callback] to be invoked after filter creation
-   * @return {fabric.Image.filters.Brightness} Instance of fabric.Image.filters.Brightness
-   */
-  fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject;
-
-})(typeof exports !== 'undefined' ? exports : this);