fabric 5.3.0 → 6.0.0-beta1

package/old-travis-reference.yml

@@ -1,97 +0,0 @@
-language: node_js
-
-node_js:
-  - "12"
-
-addons:
-  apt:
-    packages:
-    - libgif-dev
-    - libpng-dev
-    - libpango1.0-dev
-    - libjpeg8-dev
-    - librsvg2-dev
-    - libcairo2-dev
-
-stages:
-  - Linting and Building
-  - Unit Tests
-  - Visual Tests
-  - Extra OS
-
-cache:
-  directories:
-    - node_modules
-
-env:
-  global:
-    - LAUNCHER=Node
-
-jobs:
-  fast_finish: true
-  allow_failures:
-    - env: CANFAIL=TRUE
-    - env: LAUNCHER=Node CANFAIL=TRUE
-  include:
-    - stage: Linting and Building
-      env: STEP=LINT
-      install: npm install eslint@4.7.x
-      script: 'npm run lint && npm run lint_tests'
-      addons:
-        apt:
-          packages: # avoid installing packages
-    - stage: Linting and Building
-      env: STEP=BUILD
-      install: npm install uglify-js@3.3.x
-      script: 'npm run build'
-      addons:
-        apt:
-          packages: # avoid installing packages
-    - stage: Unit Tests
-      env: LAUNCHER=Chrome
-      script: npm run build:fast && testem ci --port 8080 -f testem.json -l $LAUNCHER
-      addons:
-        apt:
-          packages: # avoid installing packages
-    - stage: Unit Tests
-      env: LAUNCHER=Firefox
-      script: npm run build:fast && testem ci --port 8080 -f testem.json -l $LAUNCHER
-      addons:
-        apt:
-          packages: # avoid installing packages
-    - stage: Unit Tests
-      env: LAUNCHER=Node
-      node_js: "14"
-    - stage: Unit Tests
-      env: LAUNCHER=Node
-      node_js: "12"
-    - stage: Visual Tests
-      env: LAUNCHER=Node
-      node_js: "12"
-      script: npm run build:fast && npm run test:visual
-    - stage: Visual Tests
-      env: LAUNCHER=Chrome
-      script: npm run build:fast && testem ci --port 8080 -f testem-visual.json -l $LAUNCHER
-      addons:
-        apt:
-          packages: # avoid installing packages
-    - stage: Visual Tests
-      env: LAUNCHER=Firefox
-      script: npm run build:fast && testem ci --port 8080 -f testem-visual.json -l $LAUNCHER
-      addons:
-        apt:
-          packages: # avoid installing packages
-    # - stage: Extra OS
-    #   env: CANFAIL=TRUE
-    #   node_js: "10"
-    #   script: npm run build:fast && npm run test:visual
-    #   before_install: brew upgrade giflib && brew install pkg-config cairo pango libpng jpeg librsvg
-    #   os: osx
-    # - stage: Extra OS
-    #   env: CANFAIL=TRUE
-    #   node_js: "10"
-    #   script: npm run build:fast && npm run test:visual
-    #   os: windows
-script: npm run build:fast && npm run test
-
-dist: bionic

package/src/brushes/circle_brush.class.js

@@ -1,144 +0,0 @@
-/**
- * CircleBrush class
- * @class fabric.CircleBrush
- */
-fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ {
-
-  /**
-   * Width of a brush
-   * @type Number
-   * @default
-   */
-  width: 10,
-
-  /**
-   * Constructor
-   * @param {fabric.Canvas} canvas
-   * @return {fabric.CircleBrush} Instance of a circle brush
-   */
-  initialize: function(canvas) {
-    this.canvas = canvas;
-    this.points = [];
-  },
-
-  /**
-   * Invoked inside on mouse down and mouse move
-   * @param {Object} pointer
-   */
-  drawDot: function(pointer) {
-    var point = this.addPoint(pointer),
-        ctx = this.canvas.contextTop;
-    this._saveAndTransform(ctx);
-    this.dot(ctx, point);
-    ctx.restore();
-  },
-
-  dot: function(ctx, point) {
-    ctx.fillStyle = point.fill;
-    ctx.beginPath();
-    ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);
-    ctx.closePath();
-    ctx.fill();
-  },
-
-  /**
-   * Invoked on mouse down
-   */
-  onMouseDown: function(pointer) {
-    this.points.length = 0;
-    this.canvas.clearContext(this.canvas.contextTop);
-    this._setShadow();
-    this.drawDot(pointer);
-  },
-
-  /**
-   * Render the full state of the brush
-   * @private
-   */
-  _render: function() {
-    var ctx  = this.canvas.contextTop, i, len,
-        points = this.points;
-    this._saveAndTransform(ctx);
-    for (i = 0, len = points.length; i < len; i++) {
-      this.dot(ctx, points[i]);
-    }
-    ctx.restore();
-  },
-
-  /**
-   * Invoked on mouse move
-   * @param {Object} pointer
-   */
-  onMouseMove: function(pointer) {
-    if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) {
-      return;
-    }
-    if (this.needsFullRender()) {
-      this.canvas.clearContext(this.canvas.contextTop);
-      this.addPoint(pointer);
-      this._render();
-    }
-    else {
-      this.drawDot(pointer);
-    }
-  },
-
-  /**
-   * Invoked on mouse up
-   */
-  onMouseUp: function() {
-    var originalRenderOnAddRemove = this.canvas.renderOnAddRemove, i, len;
-    this.canvas.renderOnAddRemove = false;
-
-    var circles = [];
-
-    for (i = 0, len = this.points.length; i < len; i++) {
-      var point = this.points[i],
-          circle = new fabric.Circle({
-            radius: point.radius,
-            left: point.x,
-            top: point.y,
-            originX: 'center',
-            originY: 'center',
-            fill: point.fill
-          });
-
-      this.shadow && (circle.shadow = new fabric.Shadow(this.shadow));
-
-      circles.push(circle);
-    }
-    var group = new fabric.Group(circles);
-    group.canvas = this.canvas;
-
-    this.canvas.fire('before:path:created', { path: group });
-    this.canvas.add(group);
-    this.canvas.fire('path:created', { path: group });
-
-    this.canvas.clearContext(this.canvas.contextTop);
-    this._resetShadow();
-    this.canvas.renderOnAddRemove = originalRenderOnAddRemove;
-    this.canvas.requestRenderAll();
-  },
-
-  /**
-   * @param {Object} pointer
-   * @return {fabric.Point} Just added pointer point
-   */
-  addPoint: function(pointer) {
-    var pointerPoint = new fabric.Point(pointer.x, pointer.y),
-
-        circleRadius = fabric.util.getRandomInt(
-          Math.max(0, this.width - 20), this.width + 20) / 2,
-
-        circleColor = new fabric.Color(this.color)
-          .setAlpha(fabric.util.getRandomInt(0, 100) / 100)
-          .toRgba();
-
-    pointerPoint.radius = circleRadius;
-    pointerPoint.fill = circleColor;
-
-    this.points.push(pointerPoint);
-
-    return pointerPoint;
-  }
-});

package/src/brushes/pattern_brush.class.js

@@ -1,61 +0,0 @@
-/**
- * PatternBrush class
- * @class fabric.PatternBrush
- * @extends fabric.BaseBrush
- */
-fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ {
-
-  getPatternSrc: function() {
-
-    var dotWidth = 20,
-        dotDistance = 5,
-        patternCanvas = fabric.util.createCanvasElement(),
-        patternCtx = patternCanvas.getContext('2d');
-
-    patternCanvas.width = patternCanvas.height = dotWidth + dotDistance;
-
-    patternCtx.fillStyle = this.color;
-    patternCtx.beginPath();
-    patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false);
-    patternCtx.closePath();
-    patternCtx.fill();
-
-    return patternCanvas;
-  },
-
-  getPatternSrcFunction: function() {
-    return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"');
-  },
-
-  /**
-   * Creates "pattern" instance property
-   * @param {CanvasRenderingContext2D} ctx
-   */
-  getPattern: function(ctx) {
-    return ctx.createPattern(this.source || this.getPatternSrc(), 'repeat');
-  },
-
-  /**
-   * Sets brush styles
-   * @param {CanvasRenderingContext2D} ctx
-   */
-  _setBrushStyles: function(ctx) {
-    this.callSuper('_setBrushStyles', ctx);
-    ctx.strokeStyle = this.getPattern(ctx);
-  },
-
-  /**
-   * Creates path
-   */
-  createPath: function(pathData) {
-    var path = this.callSuper('createPath', pathData),
-        topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2);
-
-    path.stroke = new fabric.Pattern({
-      source: this.source || this.getPatternSrcFunction(),
-      offsetX: -topLeft.x,
-      offsetY: -topLeft.y
-    });
-    return path;
-  }
-});

package/src/brushes/pencil_brush.class.js

@@ -1,310 +0,0 @@
-(function() {
-  /**
-   * PencilBrush class
-   * @class fabric.PencilBrush
-   * @extends fabric.BaseBrush
-   */
-  fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ {
-
-    /**
-     * Discard points that are less than `decimate` pixel distant from each other
-     * @type Number
-     * @default 0.4
-     */
-    decimate: 0.4,
-
-    /**
-     * Draws a straight line between last recorded point to current pointer
-     * Used for `shift` functionality
-     *
-     * @type boolean
-     * @default false
-     */
-    drawStraightLine: false,
-
-    /**
-     * The event modifier key that makes the brush draw a straight line.
-     * If `null` or 'none' or any other string that is not a modifier key the feature is disabled.
-     * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null}
-     */
-    straightLineKey: 'shiftKey',
-
-    /**
-     * Constructor
-     * @param {fabric.Canvas} canvas
-     * @return {fabric.PencilBrush} Instance of a pencil brush
-     */
-    initialize: function(canvas) {
-      this.canvas = canvas;
-      this._points = [];
-    },
-
-    needsFullRender: function () {
-      return this.callSuper('needsFullRender') || this._hasStraightLine;
-    },
-
-    /**
-     * Invoked inside on mouse down and mouse move
-     * @param {Object} pointer
-     */
-    _drawSegment: function (ctx, p1, p2) {
-      var midPoint = p1.midPointFrom(p2);
-      ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
-      return midPoint;
-    },
-
-    /**
-     * Invoked on mouse down
-     * @param {Object} pointer
-     */
-    onMouseDown: function(pointer, options) {
-      if (!this.canvas._isMainEvent(options.e)) {
-        return;
-      }
-      this.drawStraightLine = options.e[this.straightLineKey];
-      this._prepareForDrawing(pointer);
-      // capture coordinates immediately
-      // this allows to draw dots (when movement never occurs)
-      this._captureDrawingPath(pointer);
-      this._render();
-    },
-
-    /**
-     * Invoked on mouse move
-     * @param {Object} pointer
-     */
-    onMouseMove: function(pointer, options) {
-      if (!this.canvas._isMainEvent(options.e)) {
-        return;
-      }
-      this.drawStraightLine = options.e[this.straightLineKey];
-      if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) {
-        return;
-      }
-      if (this._captureDrawingPath(pointer) && this._points.length > 1) {
-        if (this.needsFullRender()) {
-          // redraw curve
-          // clear top canvas
-          this.canvas.clearContext(this.canvas.contextTop);
-          this._render();
-        }
-        else {
-          var points = this._points, length = points.length, ctx = this.canvas.contextTop;
-          // draw the curve update
-          this._saveAndTransform(ctx);
-          if (this.oldEnd) {
-            ctx.beginPath();
-            ctx.moveTo(this.oldEnd.x, this.oldEnd.y);
-          }
-          this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true);
-          ctx.stroke();
-          ctx.restore();
-        }
-      }
-    },
-
-    /**
-     * Invoked on mouse up
-     */
-    onMouseUp: function(options) {
-      if (!this.canvas._isMainEvent(options.e)) {
-        return true;
-      }
-      this.drawStraightLine = false;
-      this.oldEnd = undefined;
-      this._finalizeAndAddPath();
-      return false;
-    },
-
-    /**
-     * @private
-     * @param {Object} pointer Actual mouse position related to the canvas.
-     */
-    _prepareForDrawing: function(pointer) {
-
-      var p = new fabric.Point(pointer.x, pointer.y);
-
-      this._reset();
-      this._addPoint(p);
-      this.canvas.contextTop.moveTo(p.x, p.y);
-    },
-
-    /**
-     * @private
-     * @param {fabric.Point} point Point to be added to points array
-     */
-    _addPoint: function(point) {
-      if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) {
-        return false;
-      }
-      if (this.drawStraightLine && this._points.length > 1) {
-        this._hasStraightLine = true;
-        this._points.pop();
-      }
-      this._points.push(point);
-      return true;
-    },
-
-    /**
-     * Clear points array and set contextTop canvas style.
-     * @private
-     */
-    _reset: function() {
-      this._points = [];
-      this._setBrushStyles(this.canvas.contextTop);
-      this._setShadow();
-      this._hasStraightLine = false;
-    },
-
-    /**
-     * @private
-     * @param {Object} pointer Actual mouse position related to the canvas.
-     */
-    _captureDrawingPath: function(pointer) {
-      var pointerPoint = new fabric.Point(pointer.x, pointer.y);
-      return this._addPoint(pointerPoint);
-    },
-
-    /**
-     * Draw a smooth path on the topCanvas using quadraticCurveTo
-     * @private
-     * @param {CanvasRenderingContext2D} [ctx]
-     */
-    _render: function(ctx) {
-      var i, len,
-          p1 = this._points[0],
-          p2 = this._points[1];
-      ctx = ctx || this.canvas.contextTop;
-      this._saveAndTransform(ctx);
-      ctx.beginPath();
-      //if we only have 2 points in the path and they are the same
-      //it means that the user only clicked the canvas without moving the mouse
-      //then we should be drawing a dot. A path isn't drawn between two identical dots
-      //that's why we set them apart a bit
-      if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) {
-        var width = this.width / 1000;
-        p1 = new fabric.Point(p1.x, p1.y);
-        p2 = new fabric.Point(p2.x, p2.y);
-        p1.x -= width;
-        p2.x += width;
-      }
-      ctx.moveTo(p1.x, p1.y);
-
-      for (i = 1, len = this._points.length; i < len; i++) {
-        // we pick the point between pi + 1 & pi + 2 as the
-        // end point and p1 as our control point.
-        this._drawSegment(ctx, p1, p2);
-        p1 = this._points[i];
-        p2 = this._points[i + 1];
-      }
-      // Draw last line as a straight line while
-      // we wait for the next point to be able to calculate
-      // the bezier control point
-      ctx.lineTo(p1.x, p1.y);
-      ctx.stroke();
-      ctx.restore();
-    },
-
-    /**
-     * Converts points to SVG path
-     * @param {Array} points Array of points
-     * @return {(string|number)[][]} SVG path commands
-     */
-    convertPointsToSVGPath: function (points) {
-      var correction = this.width / 1000;
-      return fabric.util.getSmoothPathFromPoints(points, correction);
-    },
-
-    /**
-     * @private
-     * @param {(string|number)[][]} pathData SVG path commands
-     * @returns {boolean}
-     */
-    _isEmptySVGPath: function (pathData) {
-      var pathString = fabric.util.joinPath(pathData);
-      return pathString === 'M 0 0 Q 0 0 0 0 L 0 0';
-    },
-
-    /**
-     * Creates fabric.Path object to add on canvas
-     * @param {(string|number)[][]} pathData Path data
-     * @return {fabric.Path} Path to add on canvas
-     */
-    createPath: function(pathData) {
-      var path = new fabric.Path(pathData, {
-        fill: null,
-        stroke: this.color,
-        strokeWidth: this.width,
-        strokeLineCap: this.strokeLineCap,
-        strokeMiterLimit: this.strokeMiterLimit,
-        strokeLineJoin: this.strokeLineJoin,
-        strokeDashArray: this.strokeDashArray,
-      });
-      if (this.shadow) {
-        this.shadow.affectStroke = true;
-        path.shadow = new fabric.Shadow(this.shadow);
-      }
-
-      return path;
-    },
-
-    /**
-     * Decimate points array with the decimate value
-     */
-    decimatePoints: function(points, distance) {
-      if (points.length <= 2) {
-        return points;
-      }
-      var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2),
-          i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint],
-          cDistance;
-      for (i = 1; i < l - 1; i++) {
-        cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2);
-        if (cDistance >= adjustedDistance) {
-          lastPoint = points[i];
-          newPoints.push(lastPoint);
-        }
-      }
-      /**
-       * Add the last point from the original line to the end of the array.
-       * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point.
-       */
-      newPoints.push(points[l]);
-      return newPoints;
-    },
-
-    /**
-     * On mouseup after drawing the path on contextTop canvas
-     * we use the points captured to create an new fabric path object
-     * and add it to the fabric canvas.
-     */
-    _finalizeAndAddPath: function() {
-      var ctx = this.canvas.contextTop;
-      ctx.closePath();
-      if (this.decimate) {
-        this._points = this.decimatePoints(this._points, this.decimate);
-      }
-      var pathData = this.convertPointsToSVGPath(this._points);
-      if (this._isEmptySVGPath(pathData)) {
-        // do not create 0 width/height paths, as they are
-        // rendered inconsistently across browsers
-        // Firefox 4, for example, renders a dot,
-        // whereas Chrome 10 renders nothing
-        this.canvas.requestRenderAll();
-        return;
-      }
-
-      var path = this.createPath(pathData);
-      this.canvas.clearContext(this.canvas.contextTop);
-      this.canvas.fire('before:path:created', { path: path });
-      this.canvas.add(path);
-      this.canvas.requestRenderAll();
-      path.setCoords();
-      this._resetShadow();
-
-
-      // fire event 'path' created
-      this.canvas.fire('path:created', { path: path });
-    }
-  });
-})();