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

package/dist/index.js

@@ -360,7 +360,7 @@
   }
   const cache = new Cache();
 
-  var version = "7.0.1-beta3";
+  var version = "7.0.1-beta5";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -17634,14 +17634,10 @@
       };
     }
     _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);
+      return new Point(this.x1, this.y1).transform(this.getViewportTransform());
     }
     _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);
+      return new Point(this.x2, this.y2).transform(this.getViewportTransform());
     }
     _renderEndpointControl(ctx, left, top) {
       const size = 12;
@@ -17664,9 +17660,9 @@
       return super.drawBorders(ctx, styleOverride, {});
     }
     _drawLineBorders(ctx) {
-      var _this$canvas3;
+      var _this$canvas;
       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];
+      const vpt = ((_this$canvas = this.canvas) === null || _this$canvas === void 0 ? void 0 : _this$canvas.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)';
@@ -17707,14 +17703,14 @@
     }
     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);
+        // Set the object's center to the geometric center of the line
+        const center = this._findCenterFromElement();
+        this.left = center.x;
+        this.top = center.y;
+
+        // Set width and height for hit detection and bounding box
         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;
       }
@@ -17742,8 +17738,8 @@
     }
     containsPoint(point) {
       if (this._useEndpointCoords) {
-        var _this$canvas4;
-        if (((_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 ? void 0 : _this$canvas4.getActiveObject()) === this) {
+        var _this$canvas2;
+        if (((_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 ? void 0 : _this$canvas2.getActiveObject()) === this) {
           return super.containsPoint(point);
         }
         const distance = this._distanceToLineSegment(point.x, point.y);
@@ -17777,7 +17773,7 @@
       return Math.sqrt((px - closestX) * (px - closestX) + (py - closestY) * (py - closestY));
     }
     _endpointActionHandler(eventData, transformData, x, y) {
-      var _this$canvas6;
+      var _this$canvas4;
       const controlKey = transformData.corner;
       const pointer = new Point(x, y);
       let newX = pointer.x;
@@ -17791,7 +17787,7 @@
         newY = snapped.y;
       }
       if (this._useEndpointCoords) {
-        var _this$canvas5;
+        var _this$canvas3;
         if (controlKey === 'p1') {
           this.x1 = newX;
           this.y1 = newY;
@@ -17801,7 +17797,7 @@
         }
         this.dirty = true;
         this.setCoords();
-        (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.requestRenderAll();
+        (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 || _this$canvas3.requestRenderAll();
         return true;
       }
 
@@ -17817,7 +17813,7 @@
       this._setWidthHeight();
       this.dirty = true;
       this._updatingEndpoints = false;
-      (_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 || _this$canvas6.requestRenderAll();
+      (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 || _this$canvas4.requestRenderAll();
       this.fire('modified', {
         transform: transformData,
         target: this,
@@ -17892,11 +17888,9 @@
       super.render(ctx);
     }
     _renderDirectly(ctx) {
-      var _this$canvas7, _this$stroke;
+      var _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;
@@ -17968,13 +17962,28 @@
       };
     }
     _toSVG() {
-      const {
-        x1,
-        x2,
-        y1,
-        y2
-      } = this.calcLinePoints();
-      return ['<line ', 'COMMON_PARTS', `x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" />\n`];
+      if (this._useEndpointCoords) {
+        // Use absolute coordinates to bypass all Fabric.js transforms
+        return [`<line stroke="${this.stroke}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLineCap}" `, `x1="${this.x1}" y1="${this.y1}" x2="${this.x2}" y2="${this.y2}" />\n`];
+      } else {
+        // Use standard calcLinePoints for legacy mode
+        const {
+          x1,
+          x2,
+          y1,
+          y2
+        } = this.calcLinePoints();
+        return ['<line ', 'COMMON_PARTS', `x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" />\n`];
+      }
+    }
+    toSVG(reviver) {
+      if (this._useEndpointCoords) {
+        // Override toSVG to prevent Fabric.js from adding transform wrapper
+        const markup = this._toSVG().join('');
+        return reviver ? reviver(markup) : markup;
+      }
+      // Use default behavior for legacy mode
+      return super.toSVG(reviver);
     }
     static async fromElement(element, options, cssRules) {
       const {