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

package/dist/src/shapes/Line.mjs

@@ -14,35 +14,32 @@ import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints.mj
 import '../cache.mjs';
 import '../parser/constants.mjs';
 import '../util/animation/AnimationRegistry.mjs';
+import { Control } from '../controls/Control.mjs';
 import { cacheProperties } from './Object/defaultValues.mjs';
 
-// @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,
@@ -50,96 +47,323 @@ class Line extends FabricObject {
     } = 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 {
@@ -147,32 +371,25 @@ class Line extends FabricObject {
       ...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,
@@ -181,27 +398,15 @@ class Line extends FabricObject {
       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,
@@ -211,18 +416,6 @@ class Line extends FabricObject {
     } = 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,
@@ -233,14 +426,6 @@ class Line extends FabricObject {
     } = 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,
@@ -257,22 +442,6 @@ class Line extends FabricObject {
     });
   }
 }
-/**
- * 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));