@nasser-sw/fabric 7.0.1-beta5 → 7.0.1-beta7

package/fabric-test2.html

@@ -54,6 +54,9 @@
         <button id="toggleDebugBtn">Toggle Debug</button>
         <button id="exportPngBtn">Export as PNG</button>
         <button id="exportSvgBtn">Export as SVG</button>
+        <button id="saveJsonBtn">Save JSON</button>
+        <button id="loadJsonBtn">Load JSON</button>
+        <input type="file" id="loadJsonFile" accept=".json" style="display: none;">
     </div>
     
     <div style="display: flex; gap: 20px;">
@@ -243,6 +246,94 @@
             });
         });
         
+        // Save JSON functionality
+        document.getElementById('saveJsonBtn').addEventListener('click', () => {
+            try {
+                // Get the canvas as JSON
+                const canvasJson = canvas.toJSON();
+                
+                // Create a beautiful formatted JSON string
+                const jsonString = JSON.stringify(canvasJson, null, 2);
+                
+                // Create a blob and download link
+                const blob = new Blob([jsonString], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                
+                const link = document.createElement('a');
+                link.download = `fabric-canvas-${Date.now()}.json`;
+                link.href = url;
+                
+                // Trigger download
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                
+                // Clean up
+                URL.revokeObjectURL(url);
+                
+                console.log('Canvas saved as JSON:', canvasJson);
+                console.log('JSON string length:', jsonString.length);
+            } catch (error) {
+                console.error('Save JSON failed:', error);
+                alert('Save failed: ' + error.message);
+            }
+        });
+        
+        // Load JSON functionality
+        document.getElementById('loadJsonBtn').addEventListener('click', () => {
+            document.getElementById('loadJsonFile').click();
+        });
+        
+        document.getElementById('loadJsonFile').addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+            
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                try {
+                    const jsonData = JSON.parse(e.target.result);
+                    
+                    console.log('Loading JSON data:', jsonData);
+                    
+                    // Clear existing canvas
+                    canvas.clear();
+                    
+                    // Load the JSON data into the canvas
+                    canvas.loadFromJSON(jsonData, () => {
+                        // This callback is called after loading is complete
+                        canvas.renderAll();
+                        console.log('Canvas loaded from JSON successfully');
+                        console.log('Loaded objects:', canvas.getObjects());
+                        
+                        // Log details about loaded lines
+                        const lines = canvas.getObjects('line');
+                        lines.forEach((line, index) => {
+                            console.log(`Line ${index + 1}:`, {
+                                type: line.type,
+                                left: line.left,
+                                top: line.top,
+                                x1: line.x1,
+                                y1: line.y1,
+                                x2: line.x2,
+                                y2: line.y2,
+                                stroke: line.stroke,
+                                strokeWidth: line.strokeWidth
+                            });
+                        });
+                    });
+                    
+                    // Clear the file input for next use
+                    e.target.value = '';
+                    
+                } catch (error) {
+                    console.error('Load JSON failed:', error);
+                    alert('Load failed: ' + error.message);
+                }
+            };
+            
+            reader.readAsText(file);
+        });
+        
         // Add initial line for testing
         const initialLine = new fabric.Line([150, 150, 350, 250], {
             stroke: '#2196F3',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nasser-sw/fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
   "homepage": "http://fabricjs.com/",
-  "version": "7.0.1-beta5",
+  "version": "7.0.1-beta7",
   "author": "Juriy Zaytsev <kangax@gmail.com>",
   "contributors": [
     {

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,11 +175,6 @@ export class Line<
 
   setCoords() {
     if (this._useEndpointCoords) {
-      // 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'
@@ -189,6 +183,13 @@ export class Line<
       const hitPadding = Math.max(effectiveStrokeWidth / 2 + 5, 10);
       this.width = Math.abs(this.x2 - this.x1) + hitPadding * 2;
       this.height = Math.abs(this.y2 - this.y1) + hitPadding * 2;
+      
+      // Only update left/top if they haven't been explicitly set (e.g., during loading)
+      if (this.left === 0 && this.top === 0) {
+        const center = this._findCenterFromElement();
+        this.left = center.x;
+        this.top = center.y;
+      }
     }
     super.setCoords();
   }
@@ -385,8 +386,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;
@@ -421,6 +420,15 @@ export class Line<
     T extends Omit<Props & TClassProperties<this>, keyof SProps>,
     K extends keyof T = never
   >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {
+    if (this._useEndpointCoords) {
+      return {
+        ...super.toObject(propertiesToInclude),
+        x1: this.x1,
+        y1: this.y1,
+        x2: this.x2,
+        y2: this.y2,
+      };
+    }
     return {
       ...super.toObject(propertiesToInclude),
       ...this.calcLinePoints(),