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

package/src/shapes/Line.ts

@@ -12,6 +12,7 @@ import { CENTER, LEFT, TOP } from '../constants';
 import type { CSSRules } from '../parser/typedefs';
 import { Control } from '../controls/Control';
 import type { TPointerEvent, Transform } from '../EventTypeDefs';
+import { multiplyTransformMatrices } from '../util/misc/matrix';
 
 const coordProps = ['x1', 'x2', 'y1', 'y2'] as const;
 
@@ -99,13 +100,11 @@ export class Line<
   }
 
   _p1PositionHandler() {
-    const vpt = 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() {
-    const vpt = this.canvas?.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(
@@ -176,17 +175,17 @@ export class Line<
 
   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;
     }
@@ -385,8 +384,6 @@ export class Line<
   _renderDirectly(ctx: CanvasRenderingContext2D) {
     if (!this.visible) return;
     ctx.save();
-    const vpt = this.canvas?.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?.toString() || '#000';
     ctx.lineWidth = this.strokeWidth;
@@ -459,12 +456,31 @@ export class Line<
   }
 
   _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?: (markup: string) => string): string {
+    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 ATTRIBUTE_NAMES = SHARED_ATTRIBUTES.concat(coordProps);