npm - @nasser-sw/fabric - Versions diffs - 7.0.1-beta3 → 7.0.1-beta4 - Mend

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

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 (105) hide show

package/0 +0 -0
package/dist/index.js +323 -155
package/dist/index.js.map +1 -1
package/dist/index.min.js +1 -1
package/dist/index.min.js.map +1 -1
package/dist/index.min.mjs +1 -1
package/dist/index.min.mjs.map +1 -1
package/dist/index.mjs +323 -155
package/dist/index.mjs.map +1 -1
package/dist/index.node.cjs +323 -155
package/dist/index.node.cjs.map +1 -1
package/dist/index.node.mjs +323 -155
package/dist/index.node.mjs.map +1 -1
package/dist/package.json.min.mjs +1 -1
package/dist/package.json.mjs +1 -1
package/dist/src/shapes/Line.d.ts +31 -86
package/dist/src/shapes/Line.d.ts.map +1 -1
package/dist/src/shapes/Line.min.mjs +1 -1
package/dist/src/shapes/Line.min.mjs.map +1 -1
package/dist/src/shapes/Line.mjs +323 -154
package/dist/src/shapes/Line.mjs.map +1 -1
package/dist-extensions/src/shapes/CustomLine.d.ts +10 -0
package/dist-extensions/src/shapes/CustomLine.d.ts.map +1 -0
package/dist-extensions/src/shapes/Line.d.ts +31 -86
package/dist-extensions/src/shapes/Line.d.ts.map +1 -1
package/fabric-test-editor.html +157 -8
package/fabric-test2.html +513 -0
package/fabric.ts +182 -182
package/package.json +1 -1
package/src/shapes/Line.ts +372 -158
package/debug/konva/CHANGELOG.md +0 -1474
package/debug/konva/LICENSE +0 -22
package/debug/konva/README.md +0 -205
package/debug/konva/gulpfile.mjs +0 -110
package/debug/konva/package.json +0 -139
package/debug/konva/release.sh +0 -65
package/debug/konva/resources/doc-includes/ContainerParams.txt +0 -6
package/debug/konva/resources/doc-includes/NodeParams.txt +0 -20
package/debug/konva/resources/doc-includes/ShapeParams.txt +0 -53
package/debug/konva/resources/jsdoc.conf.json +0 -28
package/debug/konva/rollup.config.mjs +0 -32
package/debug/konva/src/Animation.ts +0 -237
package/debug/konva/src/BezierFunctions.ts +0 -826
package/debug/konva/src/Canvas.ts +0 -193
package/debug/konva/src/Container.ts +0 -649
package/debug/konva/src/Context.ts +0 -1017
package/debug/konva/src/Core.ts +0 -5
package/debug/konva/src/DragAndDrop.ts +0 -173
package/debug/konva/src/Factory.ts +0 -246
package/debug/konva/src/FastLayer.ts +0 -29
package/debug/konva/src/Global.ts +0 -210
package/debug/konva/src/Group.ts +0 -31
package/debug/konva/src/Layer.ts +0 -546
package/debug/konva/src/Node.ts +0 -3477
package/debug/konva/src/PointerEvents.ts +0 -67
package/debug/konva/src/Shape.ts +0 -2081
package/debug/konva/src/Stage.ts +0 -1000
package/debug/konva/src/Tween.ts +0 -811
package/debug/konva/src/Util.ts +0 -1123
package/debug/konva/src/Validators.ts +0 -210
package/debug/konva/src/_CoreInternals.ts +0 -85
package/debug/konva/src/_FullInternals.ts +0 -171
package/debug/konva/src/canvas-backend.ts +0 -36
package/debug/konva/src/filters/Blur.ts +0 -388
package/debug/konva/src/filters/Brighten.ts +0 -48
package/debug/konva/src/filters/Brightness.ts +0 -30
package/debug/konva/src/filters/Contrast.ts +0 -75
package/debug/konva/src/filters/Emboss.ts +0 -207
package/debug/konva/src/filters/Enhance.ts +0 -154
package/debug/konva/src/filters/Grayscale.ts +0 -25
package/debug/konva/src/filters/HSL.ts +0 -108
package/debug/konva/src/filters/HSV.ts +0 -106
package/debug/konva/src/filters/Invert.ts +0 -23
package/debug/konva/src/filters/Kaleidoscope.ts +0 -274
package/debug/konva/src/filters/Mask.ts +0 -220
package/debug/konva/src/filters/Noise.ts +0 -44
package/debug/konva/src/filters/Pixelate.ts +0 -107
package/debug/konva/src/filters/Posterize.ts +0 -46
package/debug/konva/src/filters/RGB.ts +0 -82
package/debug/konva/src/filters/RGBA.ts +0 -103
package/debug/konva/src/filters/Sepia.ts +0 -27
package/debug/konva/src/filters/Solarize.ts +0 -29
package/debug/konva/src/filters/Threshold.ts +0 -44
package/debug/konva/src/index.ts +0 -3
package/debug/konva/src/shapes/Arc.ts +0 -176
package/debug/konva/src/shapes/Arrow.ts +0 -231
package/debug/konva/src/shapes/Circle.ts +0 -76
package/debug/konva/src/shapes/Ellipse.ts +0 -121
package/debug/konva/src/shapes/Image.ts +0 -319
package/debug/konva/src/shapes/Label.ts +0 -386
package/debug/konva/src/shapes/Line.ts +0 -364
package/debug/konva/src/shapes/Path.ts +0 -1013
package/debug/konva/src/shapes/Rect.ts +0 -79
package/debug/konva/src/shapes/RegularPolygon.ts +0 -167
package/debug/konva/src/shapes/Ring.ts +0 -94
package/debug/konva/src/shapes/Sprite.ts +0 -370
package/debug/konva/src/shapes/Star.ts +0 -125
package/debug/konva/src/shapes/Text.ts +0 -1065
package/debug/konva/src/shapes/TextPath.ts +0 -583
package/debug/konva/src/shapes/Transformer.ts +0 -1889
package/debug/konva/src/shapes/Wedge.ts +0 -129
package/debug/konva/src/skia-backend.ts +0 -35
package/debug/konva/src/types.ts +0 -84
package/debug/konva/tsconfig.json +0 -31
package/debug/konva/tsconfig.test.json +0 -7

package/fabric-test2.html ADDED Viewed

@@ -0,0 +1,513 @@
+<!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="clearCanvasBtn">Clear Canvas</button>
+        <button id="toggleDebugBtn">Toggle Debug</button>
+        <button id="exportPngBtn">Export as PNG</button>
+        <button id="exportSvgBtn">Export as SVG</button>
+    </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++;
+        });
+        // 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
+            });
+        });
+        // 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>