@elixpo/lixsketch 5.6.5 → 5.6.7

package/src/shapes/Frame.js

@@ -101,6 +101,36 @@ class Frame {
         let fillValue = "transparent";
         if (this.fillStyle === 'solid') {
             fillValue = this.fillColor;
+        } else if (['hachure', 'cross-hatch', 'dots'].includes(this.fillStyle)) {
+            const patternId = `frame-fill-${this.shapeID}`;
+            let pattern = defs.querySelector(`#${patternId}`);
+            if (!pattern) {
+                pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
+                pattern.setAttribute('id', patternId);
+                pattern.setAttribute('patternUnits', 'userSpaceOnUse');
+                defs.appendChild(pattern);
+            }
+            pattern.setAttribute('width', 10);
+            pattern.setAttribute('height', 10);
+            while (pattern.firstChild) pattern.removeChild(pattern.firstChild);
+            if (this.fillStyle === 'dots') {
+                const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                dot.setAttribute('cx', 5);
+                dot.setAttribute('cy', 5);
+                dot.setAttribute('r', 1.5);
+                dot.setAttribute('fill', this.fillColor);
+                pattern.appendChild(dot);
+            } else {
+                const hatch = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                hatch.setAttribute('d', this.fillStyle === 'cross-hatch'
+                    ? 'M-2 2L2-2M0 10L10 0M8 12L12 8M-2 8L2 12M0 0L10 10M8-2L12 2'
+                    : 'M-2 2L2-2M0 10L10 0M8 12L12 8');
+                hatch.setAttribute('fill', 'none');
+                hatch.setAttribute('stroke', this.fillColor);
+                hatch.setAttribute('stroke-width', 1.5);
+                pattern.appendChild(hatch);
+            }
+            fillValue = `url(#${patternId})`;
         } else if (this.fillStyle === 'grid') {
             // Create or update a grid pattern unique to this frame
             const patternId = `frame-grid-${this.shapeID}`;
@@ -426,6 +456,14 @@ move(dx, dy) {
     this.updateClipPath();
 }
 
+finalizeMove() {
+    this.containedShapes.forEach(shape => {
+        if (shape && typeof shape.finalizeMove === 'function') {
+            shape.finalizeMove();
+        }
+    });
+}
+
     handleResizeLegacy(anchorIndex, currentPos, startPos, initialFrame) {
     // Legacy version - superseded by the handleResize below with contained shapes scaling
     const dx = currentPos.x - startPos.x;
@@ -1409,75 +1447,6 @@ restoreToFrame(shape) {
         this.draw();
     }
 
-    destroy() {
-        const isDiagramFrame = !!this._diagramType;
-
-        [...this.containedShapes].forEach(shape => {
-            if (isDiagramFrame) {
-                // Diagram/graph frame: destroy contained shapes with the frame
-                if (typeof window.cleanupAttachments === 'function') {
-                    window.cleanupAttachments(shape);
-                }
-                const el = shape.group || shape.element;
-                if (el && el.parentNode) {
-                    el.parentNode.removeChild(el);
-                }
-                if (shape.shapeName === 'frame') {
-                    if (shape.clipGroup && shape.clipGroup.parentNode) {
-                        shape.clipGroup.parentNode.removeChild(shape.clipGroup);
-                    }
-                    if (shape.clipPath && shape.clipPath.parentNode) {
-                        shape.clipPath.parentNode.removeChild(shape.clipPath);
-                    }
-                }
-                const idx = shapes.indexOf(shape);
-                if (idx > -1) {
-                    shapes.splice(idx, 1);
-                }
-            } else {
-                // Regular frame: release contained shapes back to canvas
-                const el = shape.group || shape.element;
-                if (el) {
-                    if (el.parentNode === this.clipGroup) {
-                        this.clipGroup.removeChild(el);
-                    }
-                    svg.appendChild(el);
-                }
-                if (shape.shapeName === 'frame' && shape.clipGroup) {
-                    if (shape.clipGroup.parentNode === this.clipGroup) {
-                        this.clipGroup.removeChild(shape.clipGroup);
-                    }
-                    svg.appendChild(shape.clipGroup);
-                }
-            }
-            shape.parentFrame = null;
-            delete shape.isBeingMovedByFrame;
-        });
-        this.containedShapes = [];
-
-        // Remove clip path
-        if (this.clipPath && this.clipPath.parentNode) {
-            this.clipPath.parentNode.removeChild(this.clipPath);
-        }
-
-        // Remove groups (clipGroup should be empty now)
-        if (this.clipGroup && this.clipGroup.parentNode) {
-            this.clipGroup.parentNode.removeChild(this.clipGroup);
-        }
-
-        if (this.group && this.group.parentNode) {
-            this.group.parentNode.removeChild(this.group);
-        }
-
-        const index = shapes.indexOf(this);
-        if (index > -1) {
-            shapes.splice(index, 1);
-        }
-        if (currentShape === this) {
-            currentShape = null;
-        }
-    }
-
     /**
      * Set a background image for this frame from a URL.
      * The image will fit/cover the frame dimensions.

package/src/shapes/FreehandStroke.js

@@ -69,6 +69,8 @@ class FreehandStroke {
         this.selectionOutline = null;
         this.boundingBox = { x: 0, y: 0, width: 0, height: 0 };
         this.shapeName = "freehandStroke";
+        this.shapeID = `freehand-${String(Date.now()).slice(0, 8)}-${Math.floor(Math.random() * 10000)}`;
+        this.group.setAttribute('id', this.shapeID);
         this._moveOffsetX = 0;
         this._moveOffsetY = 0;
 
@@ -304,7 +306,16 @@ class FreehandStroke {
         const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
         const pathData = this.getPathData();
         path.setAttribute('d', pathData);
-        path.setAttribute('fill', this.options.stroke);
+        const closedFillStyle = this.options.fillStyle || 'solid';
+        const closedFill = closedFillStyle === 'none'
+            ? 'transparent'
+            : (this.options.fill || this.options.stroke);
+        const patternedFill = this.options.closedFill
+            && !['none', 'solid'].includes(closedFillStyle)
+            && typeof rough !== 'undefined';
+        path.setAttribute('fill', this.options.closedFill
+            ? (patternedFill ? 'transparent' : closedFill)
+            : this.options.stroke);
         path.setAttribute('fill-opacity', this.options.strokeOpacity);
         path.setAttribute('stroke', this.options.closedFill ? (this.options.outlineStroke || 'none') : 'none');
         if (this.options.closedFill) {
@@ -330,6 +341,18 @@ class FreehandStroke {
             this.group.appendChild(overlay);
         }
 
+        if (patternedFill) {
+            const fillGroup = rough.svg(svg).path(pathData, {
+                stroke: 'none',
+                fill: closedFill,
+                fillStyle: closedFillStyle,
+                fillWeight: Math.max(1, (this.options.strokeWidth || 2) / 2),
+                roughness: 0.8,
+            });
+            fillGroup.setAttribute('data-freehand-fill-pattern', closedFillStyle);
+            this.group.appendChild(fillGroup);
+        }
+
         this.element = path;
         this.group.appendChild(path);
 

package/src/shapes/Rectangle.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import { registerRotationAnchor } from '../core/ScreenSpaceControls.js';
+import { canvasToLocal, localToCanvas } from '../core/CanvasSpace.js';
 // Rectangle shape class - extracted from drawSquare.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom, rc
 
@@ -640,18 +641,17 @@ class Rectangle {
      // Helper to check if a point is near an anchor
      isNearAnchor(x, y) {
          if (!this.isSelected) return null;
-         const buffer = 10; 
-         const anchorSize = 10; 
+         const zoom = window.currentZoom || 1;
+         const buffer = 10 / zoom;
+         const anchorSize = 10 / zoom;
+         const transform = { x: this.x, y: this.y, rotation: this.rotation, centerX: this.width / 2, centerY: this.height / 2 };
 
          // Iterate through anchors
          for (let i = 0; i < this.anchors.length; i++) {
              const anchor = this.anchors[i];
              const anchorLocalX = parseFloat(anchor.getAttribute('x')) + anchorSize / 2;
              const anchorLocalY = parseFloat(anchor.getAttribute('y')) + anchorSize / 2;
-             const svgPoint = svg.createSVGPoint();
-             svgPoint.x = anchorLocalX;
-             svgPoint.y = anchorLocalY;
-             const transformedPoint = svgPoint.matrixTransform(this.group.getCTM());
+             const transformedPoint = localToCanvas({ x: anchorLocalX, y: anchorLocalY }, transform);
              const anchorLeft = transformedPoint.x - anchorSize/2 - buffer;
              const anchorRight = transformedPoint.x + anchorSize/2 + buffer;
              const anchorTop = transformedPoint.y - anchorSize/2 - buffer;
@@ -665,10 +665,7 @@ class Rectangle {
          if (this.rotationAnchor) {
              const rotateAnchorLocalX = parseFloat(this.rotationAnchor.getAttribute('cx'));
              const rotateAnchorLocalY = parseFloat(this.rotationAnchor.getAttribute('cy'));
-             const svgPoint = svg.createSVGPoint();
-             svgPoint.x = rotateAnchorLocalX;
-             svgPoint.y = rotateAnchorLocalY;
-             const transformedPoint = svgPoint.matrixTransform(this.group.getCTM());
+             const transformedPoint = localToCanvas({ x: rotateAnchorLocalX, y: rotateAnchorLocalY }, transform);
              const rotateAnchorRadius = parseFloat(this.rotationAnchor.getAttribute('r'));
              const distSq = (x - transformedPoint.x)**2 + (y - transformedPoint.y)**2;
              if (distSq <= (rotateAnchorRadius + buffer)**2) {
@@ -729,16 +726,10 @@ updateFrameContainment() {
 }
 
     updatePosition(anchorIndex, newMouseX, newMouseY) {
-        const CTM = this.group.getCTM();
-        if (!CTM) return;
-        const inverseCTM = CTM.inverse();
-        const svgPoint = svg.createSVGPoint();
-        svgPoint.x = newMouseX;
-        svgPoint.y = newMouseY;
-        const localMouse = svgPoint.matrixTransform(inverseCTM);
-
         const oldW = this.width;
         const oldH = this.height;
+        const transform = { x: this.x, y: this.y, rotation: this.rotation, centerX: oldW / 2, centerY: oldH / 2 };
+        const localMouse = canvasToLocal({ x: newMouseX, y: newMouseY }, transform);
 
         // Determine fixed point in old local coords and compute raw new dimensions
         let fixedOldX, fixedOldY, rawW, rawH;
@@ -754,10 +745,7 @@ updateFrameContainment() {
         }
 
         // Get world position of the fixed point using current CTM
-        const fp = svg.createSVGPoint();
-        fp.x = fixedOldX;
-        fp.y = fixedOldY;
-        const fixedWorld = fp.matrixTransform(CTM);
+        const fixedWorld = localToCanvas({ x: fixedOldX, y: fixedOldY }, transform);
 
         // Handle negative dimensions (dragged past opposite edge)
         const newW = Math.abs(rawW);

package/src/tools/circleTool.js

@@ -124,20 +124,8 @@ const handleMouseDown = (e) => {
                 else if(anchorInfo.type === 'rotate') 
                 {
                     isRotatingShapeCircle = true;
-                    const CTM = currentShape.group.getCTM();
-                    if(CTM)
-                    {
-                        const svgPoint = svg.createSVGPoint();
-                        svgPoint.x = currentShape.x;
-                        svgPoint.y = currentShape.y;
-                        const centerSVGPoint = svgPoint.matrixTransform(CTM);
-                        startRotationMouseAngleCircle = Math.atan2(svgMouseY - centerSVGPoint.y, svgMouseX - centerSVGPoint.x) * (180 / Math.PI);
-                        startShapeRotationCircle = currentShape.rotation;
-                    }
-                    else 
-                    {
-                        isRotatingShapeCircle = false;
-                    }
+                    startRotationMouseAngleCircle = Math.atan2(svgMouseY - currentShape.y, svgMouseX - currentShape.x) * (180 / Math.PI);
+                    startShapeRotationCircle = currentShape.rotation;
                 }
                 clickedOnShape = true;
             }
@@ -293,13 +281,7 @@ const handleMouseMove = (e) => {
     }
     else if (isRotatingShapeCircle && currentShape && currentShape.isSelected)
     {
-        const CTM = currentShape.group.getCTM();
-        if(CTM) {
-            const svgPoint = svg.createSVGPoint();
-            svgPoint.x = currentShape.x;
-            svgPoint.y = currentShape.y;
-            const centerSVGPoint = svgPoint.matrixTransform(CTM);
-            const currentMouseAngle = Math.atan2(svgMouseY - centerSVGPoint.y, svgMouseX - centerSVGPoint.x) * (180 / Math.PI);
+        const currentMouseAngle = Math.atan2(svgMouseY - currentShape.y, svgMouseX - currentShape.x) * (180 / Math.PI);
             const angleDiff = currentMouseAngle - startRotationMouseAngleCircle;
             let newRotation = startShapeRotationCircle + angleDiff;
             const snapAngle = 15;
@@ -311,12 +293,6 @@ const handleMouseMove = (e) => {
             currentShape.draw();
             currentShape._skipAnchors = false;
             svg.style.cursor = 'grabbing'; 
-        }
-        else 
-        {
-            isRotatingShapeCircle = false; 
-            svg.style.cursor = 'default';
-        }
     }
     else if (isSelectionToolActive && !isDrawingCircle && currentShape && currentShape.isSelected) 
     {

package/src/tools/paintBucketTool.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { pushOptionsChangeAction } from '../core/UndoRedo.js';
 
-const CLOSED_SHAPES = new Set(['rectangle', 'circle']);
+const OPTION_FILL_SHAPES = new Set(['rectangle', 'circle']);
 
 window.paintBucketSettings = window.paintBucketSettings || {
     fillColor: '#A98DEB',
@@ -17,34 +17,91 @@ function getSVGPoint(event) {
     };
 }
 
-function findClosedShapeAt(x, y) {
+function isClosedFreehand(shape) {
+    if (shape?.shapeName !== 'freehandStroke' || !Array.isArray(shape.points) || shape.points.length < 3) return false;
+    if (shape.options?.closedFill) return true;
+    const first = shape.points[0];
+    const last = shape.points[shape.points.length - 1];
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const point of shape.points) {
+        const x = Number(point[0]) || 0;
+        const y = Number(point[1]) || 0;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+    }
+    const diagonal = Math.hypot(maxX - minX, maxY - minY);
+    const closeDistance = Math.hypot(last[0] - first[0], last[1] - first[1]);
+    const tolerance = Math.max((shape.options?.strokeWidth || 2) * 2, Math.min(16, diagonal * 0.08));
+    return diagonal > 0 && closeDistance <= tolerance;
+}
+
+export function isPaintBucketFillable(shape) {
+    return OPTION_FILL_SHAPES.has(shape?.shapeName)
+        || shape?.shapeName === 'frame'
+        || isClosedFreehand(shape);
+}
+
+function findShapeAt(x, y) {
     for (let index = shapes.length - 1; index >= 0; index -= 1) {
         const shape = shapes[index];
-        if (!CLOSED_SHAPES.has(shape?.shapeName) || typeof shape.contains !== 'function') continue;
+        if (typeof shape?.contains !== 'function') continue;
         if (shape.contains(x, y)) return shape;
     }
     return null;
 }
 
-export function handlePaintBucketDown(event) {
-    if (!window.isPaintBucketToolActive || event.button !== 0) return;
-    const { x, y } = getSVGPoint(event);
-    const shape = findClosedShapeAt(x, y);
-    if (!shape) {
-        window.dispatchEvent(new CustomEvent('lixsketch:bucket-miss'));
-        return;
-    }
-
-    const settings = window.paintBucketSettings;
+export function fillShape(shape, settings = window.paintBucketSettings) {
+    if (!isPaintBucketFillable(shape)) return false;
     const transparent = settings.fillStyle === 'none' || settings.fillStyle === 'transparent';
     const nextFill = transparent ? 'transparent' : settings.fillColor;
     const nextStyle = transparent ? 'none' : settings.fillStyle;
-    if (shape.options.fill === nextFill && shape.options.fillStyle === nextStyle) return;
+
+    if (shape.shapeName === 'frame') {
+        if (shape.fillColor === nextFill && shape.fillStyle === nextStyle) return false;
+        const oldOptions = { ...shape.options, fillColor: shape.fillColor, fillStyle: shape.fillStyle };
+        const newOptions = { ...shape.options, fillColor: nextFill, fillStyle: nextStyle };
+        pushOptionsChangeAction(shape, oldOptions, newOptions);
+        shape.fillColor = nextFill;
+        shape.fillStyle = nextStyle;
+        shape.options = { ...shape.options, fillColor: nextFill, fillStyle: nextStyle };
+        shape.draw();
+        return true;
+    }
+
+    const freehandOptions = shape.shapeName === 'freehandStroke'
+        ? {
+            closedFill: true,
+            outlineStroke: shape.options.outlineStroke || shape.options.stroke,
+        }
+        : {};
+    if (shape.options.fill === nextFill
+        && shape.options.fillStyle === nextStyle
+        && Object.entries(freehandOptions).every(([key, value]) => shape.options[key] === value)) return false;
 
     const oldOptions = { ...shape.options };
-    const newOptions = { ...shape.options, fill: nextFill, fillStyle: nextStyle };
+    const newOptions = { ...shape.options, ...freehandOptions, fill: nextFill, fillStyle: nextStyle };
     pushOptionsChangeAction(shape, oldOptions, newOptions);
     shape.options = newOptions;
     shape.draw();
+    return true;
+}
+
+export function handlePaintBucketDown(event) {
+    if (!window.isPaintBucketToolActive || event.button !== 0) return;
+    const { x, y } = getSVGPoint(event);
+    const shape = findShapeAt(x, y);
+    if (!shape) {
+        window.dispatchEvent(new CustomEvent('lixsketch:bucket-miss'));
+        return;
+    }
+    if (!isPaintBucketFillable(shape)) {
+        window.dispatchEvent(new CustomEvent('lixsketch:bucket-not-fillable', {
+            detail: { shapeID: shape.shapeID, shapeType: shape.shapeName },
+        }));
+        return;
+    }
+    if (!fillShape(shape)) return;
     window.dispatchEvent(new CustomEvent('lixsketch:bucket-filled', { detail: { shapeID: shape.shapeID } }));
 }

package/src/tools/rectangleTool.js

@@ -113,18 +113,10 @@ const handleMouseDownRect = (e) => {
                 } else if (anchorInfo.type === 'rotate') {
                     isRotatingShapeSquare = true;
 
-                    const CTM = currentShape.group.getCTM();
-                    if (CTM) {
-                        const svgPoint = svg.createSVGPoint();
-                        svgPoint.x = currentShape.width / 2;
-                        svgPoint.y = currentShape.height / 2;
-                        const centerSVG = svgPoint.matrixTransform(CTM);
-                        startRotationMouseAngleSquare = Math.atan2(mouseY - centerSVG.y, mouseX - centerSVG.x) * 180 / Math.PI;
-                        startShapeRotationSquare = currentShape.rotation;
-                    } else {
-                         isRotatingShapeSquare = false; 
-                         console.warn("Could not get CTM for rotation.");
-                    }
+                    const centerX = currentShape.x + currentShape.width / 2;
+                    const centerY = currentShape.y + currentShape.height / 2;
+                    startRotationMouseAngleSquare = Math.atan2(mouseY - centerY, mouseX - centerX) * 180 / Math.PI;
+                    startShapeRotationSquare = currentShape.rotation;
                 }
                 clickedOnShape = true;
             } else if (currentShape.contains(mouseX, mouseY)) {
@@ -278,13 +270,9 @@ const handleMouseMoveRect = (e) => {
         currentShape.draw();
         currentShape._skipAnchors = false;
     } else if (isRotatingShapeSquare && currentShape && currentShape.isSelected) {
-        const CTM = currentShape.group.getCTM();
-        if (CTM) {
-            const svgPoint = svg.createSVGPoint();
-            svgPoint.x = currentShape.width / 2;
-            svgPoint.y = currentShape.height / 2;
-            const centerSVG = svgPoint.matrixTransform(CTM);
-            const currentRotationMouseAngle = Math.atan2(mouseY - centerSVG.y, mouseX - centerSVG.x) * 180 / Math.PI;
+        const centerX = currentShape.x + currentShape.width / 2;
+        const centerY = currentShape.y + currentShape.height / 2;
+        const currentRotationMouseAngle = Math.atan2(mouseY - centerY, mouseX - centerX) * 180 / Math.PI;
             const angleDiff = currentRotationMouseAngle - startRotationMouseAngleSquare;
             let newRotation = startShapeRotationSquare + angleDiff;
              const snapAngle = 15;
@@ -296,10 +284,6 @@ const handleMouseMoveRect = (e) => {
             currentShape.draw();
             currentShape._skipAnchors = false;
             svg.style.cursor = 'grabbing'; 
-        } else {
-             isRotatingShapeSquare = false;
-             svg.style.cursor = 'default';
-        }
     } else if (isSelectionToolActive && !isDrawingSquare && currentShape && currentShape.isSelected) {
           const anchorInfo = currentShape.isNearAnchor(mouseX, mouseY);
            if (anchorInfo) {