npm - @nasser-sw/fabric - Versions diffs - 7.0.1-beta11 → 7.0.1-beta12 - Mend

@nasser-sw/fabric 7.0.1-beta11 → 7.0.1-beta12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2538) hide show

package/fabric-test2.html ADDED Viewed

@@ -0,0 +1,647 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fabric.js 7 Line Test</title>
+    <style>
+        body {
+            margin: 20px;
+            font-family: Arial, sans-serif;
+        }
+        #canvas-container {
+            border: 2px solid #ddd;
+            display: inline-block;
+            margin: 10px 0;
+        }
+        .controls {
+            margin: 10px 0;
+        }
+        button {
+            margin: 5px;
+            padding: 8px 16px;
+            font-size: 14px;
+        }
+        .info {
+            background: #f5f5f5;
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Fabric.js 7 Line Rendering Test</h1>
+    <div class="info">
+        <strong>Test Instructions:</strong>
+        <ol>
+            <li>Click "Add Line" to create a line</li>
+            <li>Select the line to see endpoint controls</li>
+            <li>Drag the endpoint controls (blue circles)</li>
+            <li>Observe if the line renders correctly during drag preview</li>
+            <li>Check if the line renders correctly after releasing the drag</li>
+        </ol>
+    </div>
+    <div class="controls">
+        <button id="addLineBtn">Add Line</button>
+        <button id="addGradientLineBtn">Add Gradient Line</button>
+        <button id="clearCanvasBtn">Clear Canvas</button>
+        <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;">
+        <div>
+            <h3>Fabric.js 7 Implementation</h3>
+            <div id="canvas-container">
+                <canvas id="canvas" width="800" height="600"></canvas>
+            </div>
+        </div>
+        <div>
+            <h3>Native Canvas 2D (CFX) Implementation</h3>
+            <div style="border: 2px solid #ddd; display: inline-block;">
+                <canvas id="cfx-canvas" width="800" height="600"></canvas>
+            </div>
+            <div class="controls">
+                <button id="addCfxLineBtn">Add CFX Line</button>
+                <button id="clearCfxCanvasBtn">Clear CFX Canvas</button>
+            </div>
+        </div>
+    </div>
+    <div class="info">
+        <strong>Expected Behavior:</strong> Line should render smoothly during endpoint dragging without clipping or positioning issues.
+        <br><strong>Problem:</strong> Line may not render correctly in drag preview but appears fine after drag completion.
+    </div>
+    <!-- Load Fabric.js 7 from local build -->
+    <script src="./dist/index.js"></script>
+    <script>
+        // Initialize canvas
+        const canvas = new fabric.Canvas('canvas', {
+            backgroundColor: 'white',
+            selection: true
+        });
+        let debugMode = false;
+        let lineCounter = 1;
+        // Add Line button
+        document.getElementById('addLineBtn').addEventListener('click', () => {
+            // Create a line with some default coordinates
+            const line = new fabric.Line([100, 100, 300, 200], {
+                stroke: '#ff0000',
+                strokeWidth: 3,
+                strokeLineCap: 'round',
+                selectable: true,
+                evented: true
+            });
+            canvas.add(line);
+            canvas.setActiveObject(line);
+            canvas.renderAll();
+            console.log('Added line:', line);
+            lineCounter++;
+        });
+        // Add Gradient Line button
+        document.getElementById('addGradientLineBtn').addEventListener('click', () => {
+            // Line coordinates
+            const x1 = 150, y1 = 120, x2 = 450, y2 = 280;
+            // Create a linear gradient that follows the line direction using absolute coordinates
+            const gradient = new fabric.Gradient({
+                type: 'linear',
+                gradientUnits: 'pixels',
+                coords: {
+                    x1: x1,
+                    y1: y1,
+                    x2: x2,
+                    y2: y2
+                },
+                colorStops: [
+                    { offset: 0, color: '#ff0000' },
+                    { offset: 0.5, color: '#00ff00' },
+                    { offset: 1, color: '#0000ff' }
+                ]
+            });
+            // Create a line with gradient stroke
+            const line = new fabric.Line([x1, y1, x2, y2], {
+                stroke: gradient,
+                strokeWidth: 8,
+                strokeLineCap: 'round',
+                selectable: true,
+                evented: true
+            });
+            canvas.add(line);
+            canvas.setActiveObject(line);
+            canvas.renderAll();
+            console.log('Added gradient line:', line);
+            console.log('Gradient object:', gradient);
+            console.log('Line coordinates:', { x1, y1, x2, y2 });
+            console.log('Gradient coordinates:', gradient.coords);
+            lineCounter++;
+        });
+        // Clear Canvas button
+        document.getElementById('clearCanvasBtn').addEventListener('click', () => {
+            canvas.clear();
+            canvas.backgroundColor = 'white';
+            canvas.renderAll();
+            lineCounter = 1;
+        });
+        // Toggle Debug button
+        document.getElementById('toggleDebugBtn').addEventListener('click', () => {
+            debugMode = !debugMode;
+            const button = document.getElementById('toggleDebugBtn');
+            button.textContent = debugMode ? 'Disable Debug' : 'Enable Debug';
+            // Toggle debug visualization for all lines
+            canvas.getObjects('line').forEach(line => {
+                if (line._debugBoundingBox) {
+                    // Enable/disable debug rendering
+                    line._showDebug = debugMode;
+                }
+            });
+            canvas.renderAll();
+        });
+        // Export as PNG button
+        document.getElementById('exportPngBtn').addEventListener('click', () => {
+            try {
+                // Ensure canvas is rendered before export
+                canvas.renderAll();
+                // Get the canvas data URL
+                const dataURL = canvas.toDataURL({
+                    format: 'png',
+                    quality: 1.0,
+                    multiplier: 1
+                });
+                // Create download link
+                const link = document.createElement('a');
+                link.download = `fabric-line-export-${Date.now()}.png`;
+                link.href = dataURL;
+                // Trigger download
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                console.log('PNG export completed successfully');
+            } catch (error) {
+                console.error('PNG export failed:', error);
+                alert('Export failed: ' + error.message);
+            }
+        });
+        // Export as SVG button
+        document.getElementById('exportSvgBtn').addEventListener('click', () => {
+            try {
+                // Ensure canvas is rendered before export
+                canvas.renderAll();
+                // Get the SVG string
+                const svgString = canvas.toSVG({
+                    viewBox: {
+                        x: 0,
+                        y: 0,
+                        width: canvas.getWidth(),
+                        height: canvas.getHeight()
+                    },
+                    width: canvas.getWidth(),
+                    height: canvas.getHeight()
+                });
+                // Create blob and download link
+                const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+                const url = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.download = `fabric-line-export-${Date.now()}.svg`;
+                link.href = url;
+                // Trigger download
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                // Clean up
+                URL.revokeObjectURL(url);
+                console.log('SVG export completed successfully');
+                console.log('SVG content preview:', svgString.substring(0, 200) + '...');
+            } catch (error) {
+                console.error('SVG export failed:', error);
+                alert('SVG export failed: ' + error.message);
+            }
+        });
+        // Canvas event listeners for debugging
+        canvas.on('selection:created', (e) => {
+            console.log('Selection created:', e.target);
+        });
+        canvas.on('selection:updated', (e) => {
+            console.log('Selection updated:', e.target);
+        });
+        canvas.on('object:moving', (e) => {
+            if (debugMode) {
+                console.log('Object moving:', e.target.type, {
+                    left: e.target.left,
+                    top: e.target.top,
+                    x1: e.target.x1,
+                    y1: e.target.y1,
+                    x2: e.target.x2,
+                    y2: e.target.y2
+                });
+            }
+        });
+        canvas.on('object:modified', (e) => {
+            console.log('Object modified:', e.target.type, {
+                left: e.target.left,
+                top: e.target.top,
+                x1: e.target.x1,
+                y1: e.target.y1,
+                x2: e.target.x2,
+                y2: e.target.y2
+            });
+        });
+        // 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',
+            strokeWidth: 4,
+            strokeLineCap: 'round',
+            selectable: true,
+            evented: true
+        });
+        canvas.add(initialLine);
+        canvas.renderAll();
+        console.log('Fabric.js version:', fabric.version);
+        console.log('Initial line added:', initialLine);
+    </script>
+    <script>
+        // CFX (Native Canvas 2D) Implementation
+        class CFXLine {
+            constructor(x1, y1, x2, y2, options = {}) {
+                this.x1 = x1;
+                this.y1 = y1;
+                this.x2 = x2;
+                this.y2 = y2;
+                this.stroke = options.stroke || '#000000';
+                this.strokeWidth = options.strokeWidth || 1;
+                this.strokeLineCap = options.strokeLineCap || 'butt';
+                this.selected = false;
+                this.dragging = null; // null, 'p1', 'p2', or 'line'
+                this.controlSize = 12;
+            }
+            draw(ctx) {
+                ctx.save();
+                ctx.strokeStyle = this.stroke;
+                ctx.lineWidth = this.strokeWidth;
+                ctx.lineCap = this.strokeLineCap;
+                ctx.beginPath();
+                ctx.moveTo(this.x1, this.y1);
+                ctx.lineTo(this.x2, this.y2);
+                ctx.stroke();
+                // Draw endpoint controls if selected
+                if (this.selected) {
+                    this.drawControls(ctx);
+                }
+                ctx.restore();
+            }
+            drawControls(ctx) {
+                ctx.save();
+                ctx.fillStyle = '#007bff';
+                ctx.strokeStyle = '#ffffff';
+                ctx.lineWidth = 2;
+                // Draw p1 control
+                ctx.beginPath();
+                ctx.arc(this.x1, this.y1, this.controlSize / 2, 0, 2 * Math.PI);
+                ctx.fill();
+                ctx.stroke();
+                // Draw p2 control
+                ctx.beginPath();
+                ctx.arc(this.x2, this.y2, this.controlSize / 2, 0, 2 * Math.PI);
+                ctx.fill();
+                ctx.stroke();
+                ctx.restore();
+            }
+            hitTest(x, y) {
+                // Test endpoint controls first
+                if (this.selected) {
+                    const dist1 = Math.sqrt((x - this.x1) ** 2 + (y - this.y1) ** 2);
+                    if (dist1 <= this.controlSize) return 'p1';
+                    const dist2 = Math.sqrt((x - this.x2) ** 2 + (y - this.y2) ** 2);
+                    if (dist2 <= this.controlSize) return 'p2';
+                }
+                // Test line itself (using distance from point to line)
+                const A = this.y2 - this.y1;
+                const B = this.x1 - this.x2;
+                const C = this.x2 * this.y1 - this.x1 * this.y2;
+                const distance = Math.abs(A * x + B * y + C) / Math.sqrt(A * A + B * B);
+                if (distance <= this.strokeWidth / 2 + 3) {
+                    // Check if point is within line segment bounds
+                    const minX = Math.min(this.x1, this.x2) - 5;
+                    const maxX = Math.max(this.x1, this.x2) + 5;
+                    const minY = Math.min(this.y1, this.y2) - 5;
+                    const maxY = Math.max(this.y1, this.y2) + 5;
+                    if (x >= minX && x <= maxX && y >= minY && y <= maxY) {
+                        return 'line';
+                    }
+                }
+                return null;
+            }
+            updateEndpoint(endpoint, x, y, shiftKey = false) {
+                if (shiftKey) {
+                    // Snap to 15-degree angles
+                    const fixedX = endpoint === 'p1' ? this.x2 : this.x1;
+                    const fixedY = endpoint === 'p1' ? this.y2 : this.y1;
+                    const deltaX = x - fixedX;
+                    const deltaY = y - fixedY;
+                    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+                    if (distance > 0) {
+                        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);
+                        x = fixedX + Math.cos(snappedRadians) * distance;
+                        y = fixedY + Math.sin(snappedRadians) * distance;
+                    }
+                }
+                if (endpoint === 'p1') {
+                    this.x1 = x;
+                    this.y1 = y;
+                } else if (endpoint === 'p2') {
+                    this.x2 = x;
+                    this.y2 = y;
+                }
+            }
+            move(deltaX, deltaY) {
+                this.x1 += deltaX;
+                this.y1 += deltaY;
+                this.x2 += deltaX;
+                this.y2 += deltaY;
+            }
+        }
+        // CFX Canvas Setup
+        const cfxCanvas = document.getElementById('cfx-canvas');
+        const cfxCtx = cfxCanvas.getContext('2d');
+        let cfxLines = [];
+        let cfxSelectedLine = null;
+        let cfxDragStart = null;
+        let cfxDragType = null;
+        function cfxRender() {
+            cfxCtx.clearRect(0, 0, cfxCanvas.width, cfxCanvas.height);
+            cfxCtx.fillStyle = 'white';
+            cfxCtx.fillRect(0, 0, cfxCanvas.width, cfxCanvas.height);
+            cfxLines.forEach(line => line.draw(cfxCtx));
+        }
+        function cfxGetMousePos(e) {
+            const rect = cfxCanvas.getBoundingClientRect();
+            return {
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top
+            };
+        }
+        // CFX Mouse Events
+        cfxCanvas.addEventListener('mousedown', (e) => {
+            const pos = cfxGetMousePos(e);
+            // Test all lines for hit
+            for (let line of cfxLines) {
+                const hit = line.hitTest(pos.x, pos.y);
+                if (hit) {
+                    cfxSelectedLine = line;
+                    cfxDragType = hit;
+                    cfxDragStart = pos;
+                    // Update selection
+                    cfxLines.forEach(l => l.selected = (l === line));
+                    cfxRender();
+                    return;
+                }
+            }
+            // No hit - deselect all
+            cfxSelectedLine = null;
+            cfxLines.forEach(l => l.selected = false);
+            cfxRender();
+        });
+        cfxCanvas.addEventListener('mousemove', (e) => {
+            if (!cfxSelectedLine || !cfxDragStart) return;
+            const pos = cfxGetMousePos(e);
+            const deltaX = pos.x - cfxDragStart.x;
+            const deltaY = pos.y - cfxDragStart.y;
+            if (cfxDragType === 'p1') {
+                cfxSelectedLine.updateEndpoint('p1', pos.x, pos.y, e.shiftKey);
+            } else if (cfxDragType === 'p2') {
+                cfxSelectedLine.updateEndpoint('p2', pos.x, pos.y, e.shiftKey);
+            } else if (cfxDragType === 'line') {
+                cfxSelectedLine.move(deltaX, deltaY);
+                cfxDragStart = pos;
+            }
+            cfxRender();
+        });
+        cfxCanvas.addEventListener('mouseup', (e) => {
+            cfxDragStart = null;
+            cfxDragType = null;
+        });
+        // CFX Cursor handling
+        cfxCanvas.addEventListener('mousemove', (e) => {
+            if (cfxDragStart) return; // Don't change cursor while dragging
+            const pos = cfxGetMousePos(e);
+            let cursor = 'default';
+            for (let line of cfxLines) {
+                const hit = line.hitTest(pos.x, pos.y);
+                if (hit === 'p1' || hit === 'p2') {
+                    cursor = 'move';
+                    break;
+                } else if (hit === 'line') {
+                    cursor = 'move';
+                    break;
+                }
+            }
+            cfxCanvas.style.cursor = cursor;
+        });
+        // CFX Controls
+        document.getElementById('addCfxLineBtn').addEventListener('click', () => {
+            const line = new CFXLine(150, 150, 350, 250, {
+                stroke: '#ff0000',
+                strokeWidth: 3,
+                strokeLineCap: 'round'
+            });
+            cfxLines.push(line);
+            cfxRender();
+            console.log('Added CFX line:', line);
+        });
+        document.getElementById('clearCfxCanvasBtn').addEventListener('click', () => {
+            cfxLines = [];
+            cfxSelectedLine = null;
+            cfxRender();
+        });
+        // Add initial CFX line
+        const initialCfxLine = new CFXLine(150, 150, 350, 250, {
+            stroke: '#2196F3',
+            strokeWidth: 4,
+            strokeLineCap: 'round'
+        });
+        cfxLines.push(initialCfxLine);
+        cfxRender();
+        console.log('Initial CFX line added:', initialCfxLine);
+    </script>
+</body>
+</html>