fabric 5.3.0 → 6.0.0-beta3

package/src/controls.render.js

@@ -1,99 +0,0 @@
-(function(global) {
-
-  'use strict';
-
-  var fabric = global.fabric || (global.fabric = { }),
-      degreesToRadians = fabric.util.degreesToRadians,
-      controls = fabric.controlsUtils;
-
-  /**
-   * Render a round control, as per fabric features.
-   * This function is written to respect object properties like transparentCorners, cornerSize
-   * cornerColor, cornerStrokeColor
-   * plus the addition of offsetY and offsetX.
-   * @param {CanvasRenderingContext2D} ctx context to render on
-   * @param {Number} left x coordinate where the control center should be
-   * @param {Number} top y coordinate where the control center should be
-   * @param {Object} styleOverride override for fabric.Object controls style
-   * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls
-   */
-  function renderCircleControl (ctx, left, top, styleOverride, fabricObject) {
-    styleOverride = styleOverride || {};
-    var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,
-        ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,
-        transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ?
-          styleOverride.transparentCorners : fabricObject.transparentCorners,
-        methodName = transparentCorners ? 'stroke' : 'fill',
-        stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),
-        myLeft = left,
-        myTop = top, size;
-    ctx.save();
-    ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;
-    ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor;
-    // as soon as fabric react v5, remove ie11, use proper ellipse code.
-    if (xSize > ySize) {
-      size = xSize;
-      ctx.scale(1.0, ySize / xSize);
-      myTop = top * xSize / ySize;
-    }
-    else if (ySize > xSize) {
-      size = ySize;
-      ctx.scale(xSize / ySize, 1.0);
-      myLeft = left * ySize / xSize;
-    }
-    else {
-      size = xSize;
-    }
-    // this is still wrong
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false);
-    ctx[methodName]();
-    if (stroke) {
-      ctx.stroke();
-    }
-    ctx.restore();
-  }
-
-  /**
-   * Render a square control, as per fabric features.
-   * This function is written to respect object properties like transparentCorners, cornerSize
-   * cornerColor, cornerStrokeColor
-   * plus the addition of offsetY and offsetX.
-   * @param {CanvasRenderingContext2D} ctx context to render on
-   * @param {Number} left x coordinate where the control center should be
-   * @param {Number} top y coordinate where the control center should be
-   * @param {Object} styleOverride override for fabric.Object controls style
-   * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls
-   */
-  function renderSquareControl(ctx, left, top, styleOverride, fabricObject) {
-    styleOverride = styleOverride || {};
-    var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,
-        ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,
-        transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ?
-          styleOverride.transparentCorners : fabricObject.transparentCorners,
-        methodName = transparentCorners ? 'stroke' : 'fill',
-        stroke = !transparentCorners && (
-          styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor
-        ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2;
-    ctx.save();
-    ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;
-    ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor;
-    // this is still wrong
-    ctx.lineWidth = 1;
-    ctx.translate(left, top);
-    ctx.rotate(degreesToRadians(fabricObject.angle));
-    // this does not work, and fixed with ( && ) does not make sense.
-    // to have real transparent corners we need the controls on upperCanvas
-    // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize);
-    ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize);
-    if (stroke) {
-      ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize);
-    }
-    ctx.restore();
-  }
-
-  controls.renderCircleControl = renderCircleControl;
-  controls.renderSquareControl = renderSquareControl;
-
-})(typeof exports !== 'undefined' ? exports : this);

package/src/elements_parser.js

@@ -1,152 +0,0 @@
-fabric.ElementsParser = function(elements, callback, options, reviver, parsingOptions, doc) {
-  this.elements = elements;
-  this.callback = callback;
-  this.options = options;
-  this.reviver = reviver;
-  this.svgUid = (options && options.svgUid) || 0;
-  this.parsingOptions = parsingOptions;
-  this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g;
-  this.doc = doc;
-};
-
-(function(proto) {
-  proto.parse = function() {
-    this.instances = new Array(this.elements.length);
-    this.numElements = this.elements.length;
-    this.createObjects();
-  };
-
-  proto.createObjects = function() {
-    var _this = this;
-    this.elements.forEach(function(element, i) {
-      element.setAttribute('svgUid', _this.svgUid);
-      _this.createObject(element, i);
-    });
-  };
-
-  proto.findTag = function(el) {
-    return fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))];
-  };
-
-  proto.createObject = function(el, index) {
-    var klass = this.findTag(el);
-    if (klass && klass.fromElement) {
-      try {
-        klass.fromElement(el, this.createCallback(index, el), this.options);
-      }
-      catch (err) {
-        fabric.log(err);
-      }
-    }
-    else {
-      this.checkIfDone();
-    }
-  };
-
-  proto.createCallback = function(index, el) {
-    var _this = this;
-    return function(obj) {
-      var _options;
-      _this.resolveGradient(obj, el, 'fill');
-      _this.resolveGradient(obj, el, 'stroke');
-      if (obj instanceof fabric.Image && obj._originalElement) {
-        _options = obj.parsePreserveAspectRatioAttribute(el);
-      }
-      obj._removeTransformMatrix(_options);
-      _this.resolveClipPath(obj, el);
-      _this.reviver && _this.reviver(el, obj);
-      _this.instances[index] = obj;
-      _this.checkIfDone();
-    };
-  };
-
-  proto.extractPropertyDefinition = function(obj, property, storage) {
-    var value = obj[property], regex = this.regexUrl;
-    if (!regex.test(value)) {
-      return;
-    }
-    regex.lastIndex = 0;
-    var id = regex.exec(value)[1];
-    regex.lastIndex = 0;
-    return fabric[storage][this.svgUid][id];
-  };
-
-  proto.resolveGradient = function(obj, el, property) {
-    var gradientDef = this.extractPropertyDefinition(obj, property, 'gradientDefs');
-    if (gradientDef) {
-      var opacityAttr = el.getAttribute(property + '-opacity');
-      var gradient = fabric.Gradient.fromElement(gradientDef, obj, opacityAttr, this.options);
-      obj.set(property, gradient);
-    }
-  };
-
-  proto.createClipPathCallback = function(obj, container) {
-    return function(_newObj) {
-      _newObj._removeTransformMatrix();
-      _newObj.fillRule = _newObj.clipRule;
-      container.push(_newObj);
-    };
-  };
-
-  proto.resolveClipPath = function(obj, usingElement) {
-    var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'),
-        element, klass, objTransformInv, container, gTransform, options;
-    if (clipPath) {
-      container = [];
-      objTransformInv = fabric.util.invertTransform(obj.calcTransformMatrix());
-      // move the clipPath tag as sibling to the real element that is using it
-      var clipPathTag = clipPath[0].parentNode;
-      var clipPathOwner = usingElement;
-      while (clipPathOwner.parentNode && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) {
-        clipPathOwner = clipPathOwner.parentNode;
-      }
-      clipPathOwner.parentNode.appendChild(clipPathTag);
-      for (var i = 0; i < clipPath.length; i++) {
-        element = clipPath[i];
-        klass = this.findTag(element);
-        klass.fromElement(
-          element,
-          this.createClipPathCallback(obj, container),
-          this.options
-        );
-      }
-      if (container.length === 1) {
-        clipPath = container[0];
-      }
-      else {
-        clipPath = new fabric.Group(container);
-      }
-      gTransform = fabric.util.multiplyTransformMatrices(
-        objTransformInv,
-        clipPath.calcTransformMatrix()
-      );
-      if (clipPath.clipPath) {
-        this.resolveClipPath(clipPath, clipPathOwner);
-      }
-      var options = fabric.util.qrDecompose(gTransform);
-      clipPath.flipX = false;
-      clipPath.flipY = false;
-      clipPath.set('scaleX', options.scaleX);
-      clipPath.set('scaleY', options.scaleY);
-      clipPath.angle = options.angle;
-      clipPath.skewX = options.skewX;
-      clipPath.skewY = 0;
-      clipPath.setPositionByOrigin({ x: options.translateX, y: options.translateY }, 'center', 'center');
-      obj.clipPath = clipPath;
-    }
-    else {
-      // if clip-path does not resolve to any element, delete the property.
-      delete obj.clipPath;
-    }
-  };
-
-  proto.checkIfDone = function() {
-    if (--this.numElements === 0) {
-      this.instances = this.instances.filter(function(el) {
-        // eslint-disable-next-line no-eq-null, eqeqeq
-        return el != null;
-      });
-      this.callback(this.instances, this.elements);
-    }
-  };
-})(fabric.ElementsParser.prototype);

package/src/filters/2d_backend.class.js

@@ -1,65 +0,0 @@
-(function() {
-
-  'use strict';
-
-  var noop = function() {};
-
-  fabric.Canvas2dFilterBackend = Canvas2dFilterBackend;
-
-  /**
-   * Canvas 2D filter backend.
-   */
-  function Canvas2dFilterBackend() {};
-
-  Canvas2dFilterBackend.prototype = /** @lends fabric.Canvas2dFilterBackend.prototype */ {
-    evictCachesForKey: noop,
-    dispose: noop,
-    clearWebGLCaches: noop,
-
-    /**
-     * Experimental. This object is a sort of repository of help layers used to avoid
-     * of recreating them during frequent filtering. If you are previewing a filter with
-     * a slider you probably do not want to create help layers every filter step.
-     * in this object there will be appended some canvases, created once, resized sometimes
-     * cleared never. Clearing is left to the developer.
-     **/
-    resources: {
-
-    },
-
-    /**
-     * Apply a set of filters against a source image and draw the filtered output
-     * to the provided destination canvas.
-     *
-     * @param {EnhancedFilter} filters The filter to apply.
-     * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered.
-     * @param {Number} sourceWidth The width of the source input.
-     * @param {Number} sourceHeight The height of the source input.
-     * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn.
-     */
-    applyFilters: function(filters, sourceElement, sourceWidth, sourceHeight, targetCanvas) {
-      var ctx = targetCanvas.getContext('2d');
-      ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight);
-      var imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight);
-      var originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight);
-      var pipelineState = {
-        sourceWidth: sourceWidth,
-        sourceHeight: sourceHeight,
-        imageData: imageData,
-        originalEl: sourceElement,
-        originalImageData: originalImageData,
-        canvasEl: targetCanvas,
-        ctx: ctx,
-        filterBackend: this,
-      };
-      filters.forEach(function(filter) { filter.applyTo(pipelineState); });
-      if (pipelineState.imageData.width !== sourceWidth || pipelineState.imageData.height !== sourceHeight) {
-        targetCanvas.width = pipelineState.imageData.width;
-        targetCanvas.height = pipelineState.imageData.height;
-      }
-      ctx.putImageData(pipelineState.imageData, 0, 0);
-      return pipelineState;
-    },
-
-  };
-})();

package/src/filters/blendcolor_filter.class.js

@@ -1,251 +0,0 @@
-(function(global) {
-  'use strict';
-
-  var fabric = global.fabric,
-      filters = fabric.Image.filters,
-      createClass = fabric.util.createClass;
-
-  /**
-   * Color Blend filter class
-   * @class fabric.Image.filter.BlendColor
-   * @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.BlendColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ {
-    type: 'BlendColor',
-
-    /**
-     * Color to make the blend operation with. default to a reddish color since black or white
-     * gives always strong result.
-     * @type String
-     * @default
-     **/
-    color: '#F95C63',
-
-    /**
-     * Blend mode for the filter: one of multiply, add, diff, screen, subtract,
-     * darken, lighten, overlay, exclusion, tint.
-     * @type String
-     * @default
-     **/
-    mode: 'multiply',
-
-    /**
-     * alpha value. represent the strength of the blend color operation.
-     * @type Number
-     * @default
-     **/
-    alpha: 1,
-
-    /**
-     * Fragment source for the Multiply program
-     */
-    fragmentSource: {
-      multiply: 'gl_FragColor.rgb *= uColor.rgb;\n',
-      screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n',
-      add: 'gl_FragColor.rgb += uColor.rgb;\n',
-      diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n',
-      subtract: 'gl_FragColor.rgb -= uColor.rgb;\n',
-      lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n',
-      darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n',
-      exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n',
-      overlay: 'if (uColor.r < 0.5) {\n' +
-          'gl_FragColor.r *= 2.0 * uColor.r;\n' +
-        '} else {\n' +
-          'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' +
-        '}\n' +
-        'if (uColor.g < 0.5) {\n' +
-          'gl_FragColor.g *= 2.0 * uColor.g;\n' +
-        '} else {\n' +
-          'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' +
-        '}\n' +
-        'if (uColor.b < 0.5) {\n' +
-          'gl_FragColor.b *= 2.0 * uColor.b;\n' +
-        '} else {\n' +
-          'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' +
-        '}\n',
-      tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' +
-        'gl_FragColor.rgb += uColor.rgb;\n',
-    },
-
-    /**
-     * build the fragment source for the filters, joining the common part with
-     * the specific one.
-     * @param {String} mode the mode of the filter, a key of this.fragmentSource
-     * @return {String} the source to be compiled
-     * @private
-     */
-    buildSource: function(mode) {
-      return 'precision highp float;\n' +
-        'uniform sampler2D uTexture;\n' +
-        'uniform vec4 uColor;\n' +
-        'varying vec2 vTexCoord;\n' +
-        'void main() {\n' +
-          'vec4 color = texture2D(uTexture, vTexCoord);\n' +
-          'gl_FragColor = color;\n' +
-          'if (color.a > 0.0) {\n' +
-            this.fragmentSource[mode] +
-          '}\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, shaderSource;
-      if (!options.programCache.hasOwnProperty(cacheKey)) {
-        shaderSource = this.buildSource(this.mode);
-        options.programCache[cacheKey] = this.createProgram(options.context, shaderSource);
-      }
-      return options.programCache[cacheKey];
-    },
-
-    /**
-     * 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,
-          data = imageData.data, iLen = data.length,
-          tr, tg, tb,
-          r, g, b,
-          source, alpha1 = 1 - this.alpha;
-
-      source = new fabric.Color(this.color).getSource();
-      tr = source[0] * this.alpha;
-      tg = source[1] * this.alpha;
-      tb = source[2] * this.alpha;
-
-      for (var i = 0; i < iLen; i += 4) {
-
-        r = data[i];
-        g = data[i + 1];
-        b = data[i + 2];
-
-        switch (this.mode) {
-          case 'multiply':
-            data[i] = r * tr / 255;
-            data[i + 1] = g * tg / 255;
-            data[i + 2] = b * tb / 255;
-            break;
-          case 'screen':
-            data[i] = 255 - (255 - r) * (255 - tr) / 255;
-            data[i + 1] = 255 - (255 - g) * (255 - tg) / 255;
-            data[i + 2] = 255 - (255 - b) * (255 - tb) / 255;
-            break;
-          case 'add':
-            data[i] = r + tr;
-            data[i + 1] = g + tg;
-            data[i + 2] = b + tb;
-            break;
-          case 'diff':
-          case 'difference':
-            data[i] = Math.abs(r - tr);
-            data[i + 1] = Math.abs(g - tg);
-            data[i + 2] = Math.abs(b - tb);
-            break;
-          case 'subtract':
-            data[i] = r - tr;
-            data[i + 1] = g - tg;
-            data[i + 2] = b - tb;
-            break;
-          case 'darken':
-            data[i] = Math.min(r, tr);
-            data[i + 1] = Math.min(g, tg);
-            data[i + 2] = Math.min(b, tb);
-            break;
-          case 'lighten':
-            data[i] = Math.max(r, tr);
-            data[i + 1] = Math.max(g, tg);
-            data[i + 2] = Math.max(b, tb);
-            break;
-          case 'overlay':
-            data[i] = tr < 128 ? (2 * r * tr / 255) : (255 - 2 * (255 - r) * (255 - tr) / 255);
-            data[i + 1] = tg < 128 ? (2 * g * tg / 255) : (255 - 2 * (255 - g) * (255 - tg) / 255);
-            data[i + 2] = tb < 128 ? (2 * b * tb / 255) : (255 - 2 * (255 - b) * (255 - tb) / 255);
-            break;
-          case 'exclusion':
-            data[i] = tr + r - ((2 * tr * r) / 255);
-            data[i + 1] = tg + g - ((2 * tg * g) / 255);
-            data[i + 2] = tb + b - ((2 * tb * b) / 255);
-            break;
-          case 'tint':
-            data[i] = tr + r * alpha1;
-            data[i + 1] = tg + g * alpha1;
-            data[i + 2] = tb + b * alpha1;
-        }
-      }
-    },
-
-    /**
-     * 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 {
-        uColor: gl.getUniformLocation(program, 'uColor'),
-      };
-    },
-
-    /**
-     * 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 source = new fabric.Color(this.color).getSource();
-      source[0] = this.alpha * source[0] / 255;
-      source[1] = this.alpha * source[1] / 255;
-      source[2] = this.alpha * source[2] / 255;
-      source[3] = this.alpha;
-      gl.uniform4fv(uniformLocations.uColor, source);
-    },
-
-    /**
-     * Returns object representation of an instance
-     * @return {Object} Object representation of an instance
-     */
-    toObject: function() {
-      return {
-        type: this.type,
-        color: this.color,
-        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.BlendColor} Instance of fabric.Image.filters.BlendColor
-   */
-  fabric.Image.filters.BlendColor.fromObject = fabric.Image.filters.BaseFilter.fromObject;
-
-})(typeof exports !== 'undefined' ? exports : this);