@nasser-sw/fabric 7.0.1-beta3 → 7.0.1-beta4

package/dist/index.js

@@ -360,7 +360,7 @@
   }
   const cache = new Cache();
 
-  var version = "7.0.1-beta2";
+  var version = "7.0.1-beta3";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -17577,33 +17577,29 @@
     }
   }
 
-  // @TODO this code is terrible and Line should be a special case of polyline.
-
   const coordProps = ['x1', 'x2', 'y1', 'y2'];
-  /**
-   * A Class to draw a line
-   * A bunch of methods will be added to Polyline to handle the line case
-   * The line class is very strange to work with, is all special, it hardly aligns
-   * to what a developer want everytime there is an angle
-   * @deprecated
-   */
   class Line extends FabricObject {
-    /**
-     * Constructor
-     * @param {Array} [points] Array of points
-     * @param {Object} [options] Options object
-     * @return {Line} thisArg
-     */
     constructor() {
-      let [x1, y1, x2, y2] = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0, 0, 0];
+      let [x1, y1, x2, y2] = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0, 100, 0];
       let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       super();
-      Object.assign(this, Line.ownDefaults);
+      _defineProperty(this, "hitStrokeWidth", 'auto');
+      _defineProperty(this, "_updatingEndpoints", false);
+      _defineProperty(this, "_useEndpointCoords", true);
       this.setOptions(options);
       this.x1 = x1;
       this.x2 = x2;
       this.y1 = y1;
       this.y2 = y2;
+      if (options.hitStrokeWidth !== undefined) {
+        this.hitStrokeWidth = options.hitStrokeWidth;
+      }
+      this.hasBorders = false;
+      this.hasControls = true;
+      this.selectable = true;
+      this.hoverCursor = 'move';
+      this.perPixelTargetFind = false;
+      this.strokeLineCap = 'butt';
       this._setWidthHeight();
       const {
         left,
@@ -17611,96 +17607,323 @@
       } = options;
       typeof left === 'number' && this.set(LEFT, left);
       typeof top === 'number' && this.set(TOP, top);
+      this._setupLineControls();
+    }
+    _setupLineControls() {
+      this.controls = {
+        p1: new Control({
+          x: 0,
+          y: 0,
+          cursorStyle: 'move',
+          actionHandler: this._endpointActionHandler.bind(this),
+          positionHandler: this._p1PositionHandler.bind(this),
+          render: this._renderEndpointControl.bind(this),
+          sizeX: 12,
+          sizeY: 12
+        }),
+        p2: new Control({
+          x: 0,
+          y: 0,
+          cursorStyle: 'move',
+          actionHandler: this._endpointActionHandler.bind(this),
+          positionHandler: this._p2PositionHandler.bind(this),
+          render: this._renderEndpointControl.bind(this),
+          sizeX: 12,
+          sizeY: 12
+        })
+      };
+    }
+    _p1PositionHandler() {
+      var _this$canvas;
+      const vpt = ((_this$canvas = this.canvas) === null || _this$canvas === void 0 ? void 0 : _this$canvas.viewportTransform) || [1, 0, 0, 1, 0, 0];
+      return new Point(this.x1, this.y1).transform(vpt);
+    }
+    _p2PositionHandler() {
+      var _this$canvas2;
+      const vpt = ((_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 ? void 0 : _this$canvas2.viewportTransform) || [1, 0, 0, 1, 0, 0];
+      return new Point(this.x2, this.y2).transform(vpt);
+    }
+    _renderEndpointControl(ctx, left, top) {
+      const size = 12;
+      ctx.save();
+      ctx.fillStyle = '#007bff';
+      ctx.strokeStyle = '#ffffff';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.arc(left, top, size / 2, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+    }
+    drawBorders(ctx) {
+      let styleOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (this._useEndpointCoords) {
+        this._drawLineBorders(ctx, styleOverride);
+        return this;
+      }
+      return super.drawBorders(ctx, styleOverride, {});
+    }
+    _drawLineBorders(ctx) {
+      var _this$canvas3;
+      let styleOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const vpt = ((_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 ? void 0 : _this$canvas3.viewportTransform) || [1, 0, 0, 1, 0, 0];
+      ctx.save();
+      ctx.setTransform(vpt[0], vpt[1], vpt[2], vpt[3], vpt[4], vpt[5]);
+      ctx.strokeStyle = styleOverride.borderColor || this.borderColor || 'rgba(100, 200, 200, 0.5)';
+      ctx.lineWidth = (this.strokeWidth || 1) + 5;
+      ctx.lineCap = this.strokeLineCap || 'butt';
+      ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
+      ctx.beginPath();
+      ctx.moveTo(this.x1, this.y1);
+      ctx.lineTo(this.x2, this.y2);
+      ctx.stroke();
+      ctx.restore();
+    }
+    _renderControls(ctx) {
+      let styleOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      ctx.save();
+      ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
+      this.drawControls(ctx, styleOverride);
+      ctx.restore();
+    }
+    getBoundingRect() {
+      if (this._useEndpointCoords) {
+        const {
+          x1,
+          y1,
+          x2,
+          y2
+        } = this;
+        const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth;
+        const padding = Math.max(effectiveStrokeWidth / 2 + 5, 10);
+        return {
+          left: Math.min(x1, x2) - padding,
+          top: Math.min(y1, y2) - padding,
+          width: Math.abs(x2 - x1) + padding * 2 || padding * 2,
+          height: Math.abs(y2 - y1) + padding * 2 || padding * 2
+        };
+      }
+      return super.getBoundingRect();
+    }
+    setCoords() {
+      if (this._useEndpointCoords) {
+        const minX = Math.min(this.x1, this.x2);
+        const maxX = Math.max(this.x1, this.x2);
+        const minY = Math.min(this.y1, this.y2);
+        const maxY = Math.max(this.y1, this.y2);
+        const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth;
+        const hitPadding = Math.max(effectiveStrokeWidth / 2 + 5, 10);
+        this.left = minX - hitPadding + (maxX - minX + hitPadding * 2) / 2;
+        this.top = minY - hitPadding + (maxY - minY + hitPadding * 2) / 2;
+        this.width = Math.abs(this.x2 - this.x1) + hitPadding * 2;
+        this.height = Math.abs(this.y2 - this.y1) + hitPadding * 2;
+      }
+      super.setCoords();
     }
+    getCoords() {
+      if (this._useEndpointCoords) {
+        const deltaX = this.x2 - this.x1;
+        const deltaY = this.y2 - this.y1;
+        const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        if (length === 0) {
+          return super.getCoords();
+        }
+        const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth;
+        const halfWidth = Math.max(effectiveStrokeWidth / 2 + 2, 5);
 
-    /**
-     * @private
-     * @param {Object} [options] Options
-     */
-    _setWidthHeight() {
-      const {
-        x1,
-        y1,
-        x2,
-        y2
-      } = this;
-      this.width = Math.abs(x2 - x1);
-      this.height = Math.abs(y2 - y1);
-      const {
-        left,
-        top,
-        width,
-        height
-      } = makeBoundingBoxFromPoints([{
-        x: x1,
-        y: y1
-      }, {
-        x: x2,
-        y: y2
-      }]);
-      const position = new Point(left + width / 2, top + height / 2);
-      this.setPositionByOrigin(position, CENTER, CENTER);
+        // Unit vector perpendicular to line
+        const perpX = -deltaY / length;
+        const perpY = deltaX / length;
+
+        // Four corners of oriented rectangle
+        return [new Point(this.x1 + perpX * halfWidth, this.y1 + perpY * halfWidth), new Point(this.x2 + perpX * halfWidth, this.y2 + perpY * halfWidth), new Point(this.x2 - perpX * halfWidth, this.y2 - perpY * halfWidth), new Point(this.x1 - perpX * halfWidth, this.y1 - perpY * halfWidth)];
+      }
+      return super.getCoords();
     }
+    containsPoint(point) {
+      if (this._useEndpointCoords) {
+        var _this$canvas4;
+        if (((_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 ? void 0 : _this$canvas4.getActiveObject()) === this) {
+          return super.containsPoint(point);
+        }
+        const distance = this._distanceToLineSegment(point.x, point.y);
+        const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth || 1;
+        const tolerance = Math.max(effectiveStrokeWidth / 2 + 2, 5);
+        return distance <= tolerance;
+      }
+      return super.containsPoint(point);
+    }
+    _distanceToLineSegment(px, py) {
+      const x1 = this.x1,
+        y1 = this.y1,
+        x2 = this.x2,
+        y2 = this.y2;
+      const pd2 = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
+      if (pd2 === 0) {
+        return Math.sqrt((px - x1) * (px - x1) + (py - y1) * (py - y1));
+      }
+      const u = ((px - x1) * (x2 - x1) + (py - y1) * (y2 - y1)) / pd2;
+      let closestX, closestY;
+      if (u < 0) {
+        closestX = x1;
+        closestY = y1;
+      } else if (u > 1) {
+        closestX = x2;
+        closestY = y2;
+      } else {
+        closestX = x1 + u * (x2 - x1);
+        closestY = y1 + u * (y2 - y1);
+      }
+      return Math.sqrt((px - closestX) * (px - closestX) + (py - closestY) * (py - closestY));
+    }
+    _endpointActionHandler(eventData, transformData, x, y) {
+      var _this$canvas6;
+      const controlKey = transformData.corner;
+      const pointer = new Point(x, y);
+      let newX = pointer.x;
+      let newY = pointer.y;
+      if (eventData.shiftKey) {
+        const otherControl = controlKey === 'p1' ? 'p2' : 'p1';
+        const otherX = this[otherControl === 'p1' ? 'x1' : 'x2'];
+        const otherY = this[otherControl === 'p1' ? 'y1' : 'y2'];
+        const snapped = this._snapToAngle(otherX, otherY, newX, newY);
+        newX = snapped.x;
+        newY = snapped.y;
+      }
+      if (this._useEndpointCoords) {
+        var _this$canvas5;
+        if (controlKey === 'p1') {
+          this.x1 = newX;
+          this.y1 = newY;
+        } else if (controlKey === 'p2') {
+          this.x2 = newX;
+          this.y2 = newY;
+        }
+        this.dirty = true;
+        this.setCoords();
+        (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.requestRenderAll();
+        return true;
+      }
 
-    /**
-     * @private
-     * @param {String} key
-     * @param {*} value
-     */
+      // Fallback for old system
+      this._updatingEndpoints = true;
+      if (controlKey === 'p1') {
+        this.x1 = newX;
+        this.y1 = newY;
+      } else if (controlKey === 'p2') {
+        this.x2 = newX;
+        this.y2 = newY;
+      }
+      this._setWidthHeight();
+      this.dirty = true;
+      this._updatingEndpoints = false;
+      (_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 || _this$canvas6.requestRenderAll();
+      this.fire('modified', {
+        transform: transformData,
+        target: this,
+        e: eventData
+      });
+      return true;
+    }
+    _snapToAngle(fromX, fromY, toX, toY) {
+      const deltaX = toX - fromX;
+      const deltaY = toY - fromY;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (distance === 0) return {
+        x: toX,
+        y: toY
+      };
+      let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+      const snapIncrement = 15;
+      const snappedAngle = Math.round(angle / snapIncrement) * snapIncrement;
+      const snappedRadians = snappedAngle * (Math.PI / 180);
+      return {
+        x: fromX + Math.cos(snappedRadians) * distance,
+        y: fromY + Math.sin(snappedRadians) * distance
+      };
+    }
+    _setWidthHeight() {
+      let skipReposition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      this.width = Math.abs(this.x2 - this.x1) || 1;
+      this.height = Math.abs(this.y2 - this.y1) || 1;
+      if (!skipReposition && !this._updatingEndpoints) {
+        const {
+          left,
+          top,
+          width,
+          height
+        } = makeBoundingBoxFromPoints([{
+          x: this.x1,
+          y: this.y1
+        }, {
+          x: this.x2,
+          y: this.y2
+        }]);
+        this.setPositionByOrigin(new Point(left + width / 2, top + height / 2), CENTER, CENTER);
+      }
+    }
     _set(key, value) {
+      const oldLeft = this.left;
+      const oldTop = this.top;
       super._set(key, value);
       if (coordProps.includes(key)) {
-        // this doesn't make sense very much, since setting x1 when top or left
-        // are already set, is just going to show a strange result since the
-        // line will move way more than the developer expect.
-        // in fabric5 it worked only when the line didn't have extra transformations,
-        // in fabric6 too. With extra transform they behave bad in different ways.
-        // This needs probably a good rework or a tutorial if you have to create a dynamic line
         this._setWidthHeight();
+        this.dirty = true;
+      }
+      if ((key === 'left' || key === 'top') && this.canvas && !this._updatingEndpoints) {
+        const deltaX = this.left - oldLeft;
+        const deltaY = this.top - oldTop;
+        if (deltaX !== 0 || deltaY !== 0) {
+          this._updatingEndpoints = true;
+          this.x1 += deltaX;
+          this.y1 += deltaY;
+          this.x2 += deltaX;
+          this.y2 += deltaY;
+          this._updatingEndpoints = false;
+        }
       }
       return this;
     }
-
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     */
+    render(ctx) {
+      if (this._useEndpointCoords) {
+        this._renderDirectly(ctx);
+        return;
+      }
+      super.render(ctx);
+    }
+    _renderDirectly(ctx) {
+      var _this$canvas7, _this$stroke;
+      if (!this.visible) return;
+      ctx.save();
+      const vpt = ((_this$canvas7 = this.canvas) === null || _this$canvas7 === void 0 ? void 0 : _this$canvas7.viewportTransform) || [1, 0, 0, 1, 0, 0];
+      ctx.transform(vpt[0], vpt[1], vpt[2], vpt[3], vpt[4], vpt[5]);
+      ctx.globalAlpha = this.opacity;
+      ctx.strokeStyle = ((_this$stroke = this.stroke) === null || _this$stroke === void 0 ? void 0 : _this$stroke.toString()) || '#000';
+      ctx.lineWidth = this.strokeWidth;
+      ctx.lineCap = this.strokeLineCap || 'butt';
+      ctx.beginPath();
+      ctx.moveTo(this.x1, this.y1);
+      ctx.lineTo(this.x2, this.y2);
+      ctx.stroke();
+      ctx.restore();
+    }
     _render(ctx) {
+      if (this._useEndpointCoords) return;
       ctx.beginPath();
       const p = this.calcLinePoints();
       ctx.moveTo(p.x1, p.y1);
       ctx.lineTo(p.x2, p.y2);
       ctx.lineWidth = this.strokeWidth;
-
-      // TODO: test this
-      // make sure setting "fill" changes color of a line
-      // (by copying fillStyle to strokeStyle, since line is stroked, not filled)
       const origStrokeStyle = ctx.strokeStyle;
       if (isFiller(this.stroke)) {
         ctx.strokeStyle = this.stroke.toLive(ctx);
-      } else {
-        var _this$stroke;
-        ctx.strokeStyle = (_this$stroke = this.stroke) !== null && _this$stroke !== void 0 ? _this$stroke : ctx.fillStyle;
       }
       this.stroke && this._renderStroke(ctx);
       ctx.strokeStyle = origStrokeStyle;
     }
-
-    /**
-     * This function is an helper for svg import. it returns the center of the object in the svg
-     * untransformed coordinates
-     * @private
-     * @return {Point} center point from element coordinates
-     */
     _findCenterFromElement() {
       return new Point((this.x1 + this.x2) / 2, (this.y1 + this.y2) / 2);
     }
-
-    /**
-     * Returns object representation of an instance
-     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-     * @return {Object} object representation of an instance
-     */
     toObject() {
       let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return {
@@ -17708,32 +17931,25 @@
         ...this.calcLinePoints()
       };
     }
-
-    /*
-     * Calculate object dimensions from its properties
-     * @private
-     */
     _getNonTransformedDimensions() {
       const dim = super._getNonTransformedDimensions();
-      if (this.strokeLineCap === 'butt') {
-        if (this.width === 0) {
-          dim.y -= this.strokeWidth;
-        }
-        if (this.height === 0) {
-          dim.x -= this.strokeWidth;
-        }
+      if (this.strokeLineCap === 'round') {
+        dim.x += this.strokeWidth;
+        dim.y += this.strokeWidth;
       }
       return dim;
     }
-
-    /**
-     * Recalculates line points given width and height
-     * Those points are simply placed around the center,
-     * This is not useful outside internal render functions and svg output
-     * Is not meant to be for the developer.
-     * @private
-     */
     calcLinePoints() {
+      if (this._updatingEndpoints) {
+        const centerX = (this.x1 + this.x2) / 2;
+        const centerY = (this.y1 + this.y2) / 2;
+        return {
+          x1: this.x1 - centerX,
+          y1: this.y1 - centerY,
+          x2: this.x2 - centerX,
+          y2: this.y2 - centerY
+        };
+      }
       const {
         x1: _x1,
         x2: _x2,
@@ -17742,27 +17958,15 @@
         width,
         height
       } = this;
-      const xMult = _x1 <= _x2 ? -1 : 1,
-        yMult = _y1 <= _y2 ? -1 : 1,
-        x1 = xMult * width / 2,
-        y1 = yMult * height / 2,
-        x2 = xMult * -width / 2,
-        y2 = yMult * -height / 2;
+      const xMult = _x1 <= _x2 ? -1 : 1;
+      const yMult = _y1 <= _y2 ? -1 : 1;
       return {
-        x1,
-        x2,
-        y1,
-        y2
+        x1: xMult * width / 2,
+        y1: yMult * height / 2,
+        x2: xMult * -width / 2,
+        y2: yMult * -height / 2
       };
     }
-
-    /* _FROM_SVG_START_ */
-
-    /**
-     * Returns svg representation of an instance
-     * @return {Array} an array of strings with the specific svg representation
-     * of the instance
-     */
     _toSVG() {
       const {
         x1,
@@ -17772,18 +17976,6 @@
       } = this.calcLinePoints();
       return ['<line ', 'COMMON_PARTS', `x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" />\n`];
     }
-
-    /**
-     * List of attribute names to account for when parsing SVG element (used by {@link Line.fromElement})
-     * @see http://www.w3.org/TR/SVG/shapes.html#LineElement
-     */
-
-    /**
-     * Returns Line instance from an SVG element
-     * @param {HTMLElement} element Element to parse
-     * @param {Object} [options] Options object
-     * @param {Function} [callback] callback function invoked after parsing
-     */
     static async fromElement(element, options, cssRules) {
       const {
         x1 = 0,
@@ -17794,14 +17986,6 @@
       } = parseAttributes(element, this.ATTRIBUTE_NAMES, cssRules);
       return new this([x1, y1, x2, y2], parsedAttributes);
     }
-
-    /* _FROM_SVG_END_ */
-
-    /**
-     * Returns Line instance from an object representation
-     * @param {Object} object Object to create an instance from
-     * @returns {Promise<Line>}
-     */
     static fromObject(_ref) {
       let {
         x1,
@@ -17818,22 +18002,6 @@
       });
     }
   }
-  /**
-   * x value or first line edge
-   * @type number
-   */
-  /**
-   * y value or first line edge
-   * @type number
-   */
-  /**
-   * x value or second line edge
-   * @type number
-   */
-  /**
-   * y value or second line edge
-   * @type number
-   */
   _defineProperty(Line, "type", 'Line');
   _defineProperty(Line, "cacheProperties", [...cacheProperties, ...coordProps]);
   _defineProperty(Line, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat(coordProps));