@node-projects/web-component-designer 0.1.347 → 0.1.350

package/dist/elements/widgets/designerView/extensions/svg/UnifiedGeometryExtension.js

@@ -9,6 +9,7 @@ export class UnifiedGeometryExtension extends AbstractExtension {
     _reader;
     _dragState = null;
     _options;
+    _overlayStructureSignature = null;
     _eventCleanups = [];
     /** Map from 'anchor-{index}', 'cp1-{index}', 'cp2-{index}' to overlay circle */
     _overlayCircles = new Map();
@@ -20,18 +21,31 @@ export class UnifiedGeometryExtension extends AbstractExtension {
         this._options = options ?? {};
     }
     extend() {
-        this._cleanupAll();
-        if (!this._reader)
-            return;
-        this._geometry = this._reader.read(this.extendedItem.element);
-        this._drawOverlays();
+        this.refresh();
     }
     refresh() {
-        this._cleanupAll();
-        if (!this._reader)
+        if (!this._reader) {
+            this._cleanupAll();
             return;
+        }
         this._geometry = this._reader.read(this.extendedItem.element);
-        this._drawOverlays();
+        if (!this._geometry) {
+            this._cleanupAll();
+            return;
+        }
+        const structureSignature = this._getOverlayStructureSignature(this._geometry);
+        const shouldRebuild = this._overlayStructureSignature !== structureSignature || this._hasOverlayStructureMismatch(this._geometry);
+        if (shouldRebuild) {
+            this._cleanupAll();
+            this._overlayStructureSignature = structureSignature;
+            this._drawOverlays();
+            return;
+        }
+        if (!this._valuesHaveChanges(...this._getRefreshValues(this._geometry))) {
+            return;
+        }
+        this._updateOverlayAppearance();
+        this._updateOverlayPositions();
     }
     dispose() {
         this._cleanupAll();
@@ -46,20 +60,138 @@ export class UnifiedGeometryExtension extends AbstractExtension {
             catch { /* ignore */ }
         }
         this._eventCleanups = [];
+        this._overlayStructureSignature = null;
         this._overlayCircles.clear();
         this._overlayLines = [];
         this._removeAllOverlays();
     }
+    _getOverlayStructureSignature(geometry) {
+        return geometry.segments.map(segment => `${segment.type}:${segment.cp1 ? 1 : 0}:${segment.cp2 ? 1 : 0}`).join('|');
+    }
+    _hasOverlayStructureMismatch(geometry) {
+        let expectedLines = 0;
+        let expectedCircles = 0;
+        for (let i = 0; i < geometry.segments.length; i++) {
+            const segment = geometry.segments[i];
+            if (segment.type === SegmentType.Close) {
+                continue;
+            }
+            if (this._shouldRenderAnchorHandle(i, segment, geometry)) {
+                expectedCircles++;
+            }
+            if (segment.cp1) {
+                expectedCircles++;
+                expectedLines++;
+                if (segment.type === SegmentType.QuadraticBezier) {
+                    expectedLines++;
+                }
+            }
+            if (segment.cp2) {
+                expectedCircles++;
+                expectedLines++;
+            }
+        }
+        return this._overlayCircles.size !== expectedCircles || this._overlayLines.length !== expectedLines;
+    }
+    _getRefreshValues(geometry) {
+        const transformedBoxQuad = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0];
+        const values = [
+            this.designerCanvas.zoomFactor,
+            this.designerCanvas.scaleFactor,
+            this._overlayStructureSignature ?? ''
+        ];
+        if (transformedBoxQuad) {
+            values.push(transformedBoxQuad.p1.x, transformedBoxQuad.p1.y, transformedBoxQuad.p2.x, transformedBoxQuad.p2.y, transformedBoxQuad.p3.x, transformedBoxQuad.p3.y, transformedBoxQuad.p4.x, transformedBoxQuad.p4.y);
+        }
+        for (const segment of geometry.segments) {
+            values.push(segment.type, segment.point.x, segment.point.y);
+            if (segment.cp1) {
+                values.push(segment.cp1.x, segment.cp1.y);
+            }
+            else {
+                values.push('cp1:none');
+            }
+            if (segment.cp2) {
+                values.push(segment.cp2.x, segment.cp2.y);
+            }
+            else {
+                values.push('cp2:none');
+            }
+        }
+        return values;
+    }
     /** Convert an SVG-element-local coordinate to overlay (canvas) coordinate
      *  using the getBoxQuads polyfill convertPointFromNode */
     _toOverlay(p) {
-        const tp = this.designerCanvas.canvas.convertPointFromNode({ x: p.x, y: p.y }, this.extendedItem.element);
+        const transform = this._getSvgOverlayTransform();
+        if (transform && transform.bbox.width !== 0 && transform.bbox.height !== 0) {
+            return this._mapSvgPointToOverlay(p, transform);
+        }
+        const fallbackLocalPoint = this._toElementReferenceBoxPoint(p);
+        const tp = this.designerCanvas.canvas.convertPointFromNode(fallbackLocalPoint, this.extendedItem.element);
         return { x: tp.x, y: tp.y };
     }
     /** Convert overlay (canvas) coordinate back to SVG-element-local coordinate */
     _fromOverlay(p) {
+        const transform = this._getSvgOverlayTransform();
+        if (transform && transform.bbox.width !== 0 && transform.bbox.height !== 0) {
+            return this._mapOverlayPointToSvg(p, transform);
+        }
         const tp = this.extendedItem.element.convertPointFromNode({ x: p.x, y: p.y }, this.designerCanvas.canvas);
-        return { x: tp.x, y: tp.y };
+        return this._fromElementReferenceBoxPoint({ x: tp.x, y: tp.y });
+    }
+    _getSvgOverlayTransform() {
+        const element = this.extendedItem.element;
+        if (!(element instanceof SVGGraphicsElement) || element instanceof SVGSVGElement) {
+            return null;
+        }
+        const quad = element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0];
+        if (!quad) {
+            return null;
+        }
+        return { bbox: element.getBBox(), quad };
+    }
+    _mapSvgPointToOverlay(p, transform) {
+        const { bbox, quad } = transform;
+        const u = (p.x - bbox.x) / bbox.width;
+        const v = (p.y - bbox.y) / bbox.height;
+        return {
+            x: quad.p1.x + (quad.p2.x - quad.p1.x) * u + (quad.p4.x - quad.p1.x) * v,
+            y: quad.p1.y + (quad.p2.y - quad.p1.y) * u + (quad.p4.y - quad.p1.y) * v,
+        };
+    }
+    _mapOverlayPointToSvg(p, transform) {
+        const { bbox, quad } = transform;
+        const basisX = { x: quad.p2.x - quad.p1.x, y: quad.p2.y - quad.p1.y };
+        const basisY = { x: quad.p4.x - quad.p1.x, y: quad.p4.y - quad.p1.y };
+        const dx = p.x - quad.p1.x;
+        const dy = p.y - quad.p1.y;
+        const determinant = basisX.x * basisY.y - basisX.y * basisY.x;
+        if (Math.abs(determinant) < 1e-10) {
+            return this._fromElementReferenceBoxPoint(this.extendedItem.element.convertPointFromNode({ x: p.x, y: p.y }, this.designerCanvas.canvas));
+        }
+        const u = (dx * basisY.y - dy * basisY.x) / determinant;
+        const v = (dy * basisX.x - dx * basisX.y) / determinant;
+        return {
+            x: bbox.x + u * bbox.width,
+            y: bbox.y + v * bbox.height,
+        };
+    }
+    _toElementReferenceBoxPoint(p) {
+        const bbox = this._getSvgGeometryBBoxOffset();
+        return { x: p.x - bbox.x, y: p.y - bbox.y };
+    }
+    _fromElementReferenceBoxPoint(p) {
+        const bbox = this._getSvgGeometryBBoxOffset();
+        return { x: p.x + bbox.x, y: p.y + bbox.y };
+    }
+    _getSvgGeometryBBoxOffset() {
+        const element = this.extendedItem.element;
+        if (!(element instanceof SVGGraphicsElement) || element instanceof SVGSVGElement) {
+            return { x: 0, y: 0 };
+        }
+        const bbox = element.getBBox();
+        return { x: bbox.x, y: bbox.y };
     }
     _drawOverlays() {
         if (!this._geometry)
@@ -77,7 +209,11 @@ export class UnifiedGeometryExtension extends AbstractExtension {
                 if (prevAnchor) {
                     const prevOverlay = this._toOverlay(prevAnchor);
                     const line = this._drawLine(prevOverlay.x, prevOverlay.y, cp1Overlay.x, cp1Overlay.y, 'svg-control-line');
-                    line.style.strokeDasharray = (4 / this.designerCanvas.scaleFactor).toString();
+                    this._overlayLines.push(line);
+                }
+                if (seg.type === SegmentType.QuadraticBezier) {
+                    const anchorOverlay = this._toOverlay(seg.point);
+                    const line = this._drawLine(anchorOverlay.x, anchorOverlay.y, cp1Overlay.x, cp1Overlay.y, 'svg-control-line');
                     this._overlayLines.push(line);
                 }
                 this._drawControlCircle(cp1Overlay, i, 'cp1');
@@ -86,15 +222,31 @@ export class UnifiedGeometryExtension extends AbstractExtension {
                 const cp2Overlay = this._toOverlay(seg.cp2);
                 const anchorOverlay = this._toOverlay(seg.point);
                 const line = this._drawLine(anchorOverlay.x, anchorOverlay.y, cp2Overlay.x, cp2Overlay.y, 'svg-control-line');
-                line.style.strokeDasharray = (4 / this.designerCanvas.scaleFactor).toString();
                 this._overlayLines.push(line);
                 this._drawControlCircle(cp2Overlay, i, 'cp2');
             }
             // Draw the anchor point
-            const overlayPt = this._toOverlay(seg.point);
-            this._drawAnchorCircle(overlayPt, i, seg);
+            if (this._shouldRenderAnchorHandle(i, seg, this._geometry)) {
+                const overlayPt = this._toOverlay(seg.point);
+                this._drawAnchorCircle(overlayPt, i, seg);
+            }
             prevAnchor = seg.point;
         }
+        this._updateOverlayAppearance();
+    }
+    _updateOverlayAppearance() {
+        const anchorRadius = 5 / this.designerCanvas.scaleFactor;
+        const controlRadius = 4 / this.designerCanvas.scaleFactor;
+        const strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        const dashArray = (4 / this.designerCanvas.scaleFactor).toString();
+        for (const [key, circle] of this._overlayCircles) {
+            circle.setAttribute('r', (key.startsWith('anchor-') ? anchorRadius : controlRadius).toString());
+            circle.style.strokeWidth = strokeWidth;
+        }
+        for (const line of this._overlayLines) {
+            line.style.strokeDasharray = dashArray;
+            line.style.strokeWidth = strokeWidth;
+        }
     }
     _addTrackedListener(el, event, handler) {
         el.addEventListener(event, handler);
@@ -202,6 +354,15 @@ export class UnifiedGeometryExtension extends AbstractExtension {
         const newLocal = this._fromOverlay(newOverlay);
         const seg = this._geometry.segments[segIndex];
         if (handleType === 'anchor') {
+            if (this.extendedItem.element instanceof SVGRectElement && this._dragRectCorner(segIndex, newLocal)) {
+                return;
+            }
+            if (this.extendedItem.element instanceof SVGCircleElement && this._dragCircleCardinal(segIndex, newLocal)) {
+                return;
+            }
+            if (this.extendedItem.element instanceof SVGEllipseElement && this._dragEllipseCardinal(segIndex, newLocal)) {
+                return;
+            }
             seg.point.x = newLocal.x;
             seg.point.y = newLocal.y;
         }
@@ -214,6 +375,172 @@ export class UnifiedGeometryExtension extends AbstractExtension {
             seg.cp2.y = newLocal.y;
         }
     }
+    _dragRectCorner(segIndex, newPoint) {
+        if (!this._geometry || !this._dragState?.originalSegments)
+            return false;
+        if (this._geometry.segments.length < 4 || segIndex < 0 || segIndex > 3)
+            return false;
+        const originalSegments = this._dragState.originalSegments;
+        switch (segIndex) {
+            case 0:
+                this._setRectCornerPoints(newPoint, { x: originalSegments[2].point.x, y: newPoint.y }, { ...originalSegments[2].point }, { x: newPoint.x, y: originalSegments[2].point.y });
+                break;
+            case 1:
+                this._setRectCornerPoints({ x: originalSegments[3].point.x, y: newPoint.y }, newPoint, { x: newPoint.x, y: originalSegments[3].point.y }, { ...originalSegments[3].point });
+                break;
+            case 2:
+                this._setRectCornerPoints({ ...originalSegments[0].point }, { x: newPoint.x, y: originalSegments[0].point.y }, newPoint, { x: originalSegments[0].point.x, y: newPoint.y });
+                break;
+            case 3:
+                this._setRectCornerPoints({ x: newPoint.x, y: originalSegments[1].point.y }, { ...originalSegments[1].point }, { x: originalSegments[1].point.x, y: newPoint.y }, newPoint);
+                break;
+            default:
+                return false;
+        }
+        const closeSegment = this._geometry.segments[4];
+        if (closeSegment?.type === SegmentType.Close) {
+            closeSegment.point = { ...this._geometry.segments[0].point };
+        }
+        return true;
+    }
+    _setRectCornerPoints(topLeft, topRight, bottomRight, bottomLeft) {
+        this._geometry.segments[0].point = { ...topLeft };
+        this._geometry.segments[1].point = { ...topRight };
+        this._geometry.segments[2].point = { ...bottomRight };
+        this._geometry.segments[3].point = { ...bottomLeft };
+    }
+    _dragCircleCardinal(segIndex, newPoint) {
+        if (!this._geometry || !this._dragState?.originalSegments)
+            return false;
+        const cardinalIndex = this._normalizeCardinalIndex(segIndex);
+        if (cardinalIndex === null)
+            return false;
+        const original = this._dragState.originalSegments;
+        const centerX = (original[1].point.x + original[3].point.x) / 2;
+        const centerY = (original[0].point.y + original[2].point.y) / 2;
+        let cx = centerX;
+        let cy = centerY;
+        let radius = Math.abs(original[1].point.x - original[3].point.x) / 2;
+        switch (cardinalIndex) {
+            case 0: {
+                const oppositeY = original[2].point.y;
+                cy = (newPoint.y + oppositeY) / 2;
+                radius = Math.abs(oppositeY - newPoint.y) / 2;
+                break;
+            }
+            case 1: {
+                const oppositeX = original[3].point.x;
+                cx = (newPoint.x + oppositeX) / 2;
+                radius = Math.abs(newPoint.x - oppositeX) / 2;
+                break;
+            }
+            case 2: {
+                const oppositeY = original[0].point.y;
+                cy = (original[0].point.y + newPoint.y) / 2;
+                radius = Math.abs(newPoint.y - oppositeY) / 2;
+                break;
+            }
+            case 3: {
+                const oppositeX = original[1].point.x;
+                cx = (oppositeX + newPoint.x) / 2;
+                radius = Math.abs(oppositeX - newPoint.x) / 2;
+                break;
+            }
+            default:
+                return false;
+        }
+        this._setCardinalArcPoints(cx, cy, radius, radius);
+        return true;
+    }
+    _dragEllipseCardinal(segIndex, newPoint) {
+        if (!this._geometry || !this._dragState?.originalSegments)
+            return false;
+        const cardinalIndex = this._normalizeCardinalIndex(segIndex);
+        if (cardinalIndex === null)
+            return false;
+        const original = this._dragState.originalSegments;
+        let cx = (original[1].point.x + original[3].point.x) / 2;
+        let cy = (original[0].point.y + original[2].point.y) / 2;
+        let rx = Math.abs(original[1].point.x - original[3].point.x) / 2;
+        let ry = Math.abs(original[2].point.y - original[0].point.y) / 2;
+        switch (cardinalIndex) {
+            case 0: {
+                const oppositeY = original[2].point.y;
+                cy = (newPoint.y + oppositeY) / 2;
+                ry = Math.abs(oppositeY - newPoint.y) / 2;
+                break;
+            }
+            case 1: {
+                const oppositeX = original[3].point.x;
+                cx = (newPoint.x + oppositeX) / 2;
+                rx = Math.abs(newPoint.x - oppositeX) / 2;
+                break;
+            }
+            case 2: {
+                const oppositeY = original[0].point.y;
+                cy = (oppositeY + newPoint.y) / 2;
+                ry = Math.abs(newPoint.y - oppositeY) / 2;
+                break;
+            }
+            case 3: {
+                const oppositeX = original[1].point.x;
+                cx = (oppositeX + newPoint.x) / 2;
+                rx = Math.abs(oppositeX - newPoint.x) / 2;
+                break;
+            }
+            default:
+                return false;
+        }
+        this._setCardinalArcPoints(cx, cy, rx, ry);
+        return true;
+    }
+    _normalizeCardinalIndex(segIndex) {
+        if (segIndex >= 0 && segIndex <= 3) {
+            return segIndex;
+        }
+        if (segIndex === 4) {
+            return 0;
+        }
+        return null;
+    }
+    _setCardinalArcPoints(cx, cy, rx, ry) {
+        if (!this._geometry)
+            return;
+        this._geometry.segments[0].point = { x: cx, y: cy - ry };
+        this._geometry.segments[1].point = { x: cx + rx, y: cy };
+        this._geometry.segments[2].point = { x: cx, y: cy + ry };
+        this._geometry.segments[3].point = { x: cx - rx, y: cy };
+        if (this._geometry.segments[1].arc) {
+            this._geometry.segments[1].arc.rx = rx;
+            this._geometry.segments[1].arc.ry = ry;
+        }
+        if (this._geometry.segments[2].arc) {
+            this._geometry.segments[2].arc.rx = rx;
+            this._geometry.segments[2].arc.ry = ry;
+        }
+        if (this._geometry.segments[3].arc) {
+            this._geometry.segments[3].arc.rx = rx;
+            this._geometry.segments[3].arc.ry = ry;
+        }
+        if (this._geometry.segments[4]?.arc) {
+            this._geometry.segments[4].point = { x: cx, y: cy - ry };
+            this._geometry.segments[4].arc.rx = rx;
+            this._geometry.segments[4].arc.ry = ry;
+        }
+        if (this._geometry.segments[5]?.type === SegmentType.Close) {
+            this._geometry.segments[5].point = { x: cx, y: cy - ry };
+        }
+    }
+    _shouldRenderAnchorHandle(segIndex, seg, geometry) {
+        if (!(this.extendedItem.element instanceof SVGCircleElement) && !(this.extendedItem.element instanceof SVGEllipseElement)) {
+            return true;
+        }
+        if (segIndex !== 4) {
+            return true;
+        }
+        const firstSegment = geometry.segments[0];
+        return seg.point.x !== firstSegment?.point.x || seg.point.y !== firstSegment?.point.y;
+    }
     _dragWholeShape(dx, dy) {
         if (!this._dragState?.originalSegments || !this._geometry)
             return;
@@ -264,6 +591,14 @@ export class UnifiedGeometryExtension extends AbstractExtension {
                     line.setAttribute('x2', cp1Overlay.x.toString());
                     line.setAttribute('y2', cp1Overlay.y.toString());
                 }
+                if (seg.type === SegmentType.QuadraticBezier && lineIdx < this._overlayLines.length) {
+                    const anchorOverlay = this._toOverlay(seg.point);
+                    const line = this._overlayLines[lineIdx++];
+                    line.setAttribute('x1', anchorOverlay.x.toString());
+                    line.setAttribute('y1', anchorOverlay.y.toString());
+                    line.setAttribute('x2', cp1Overlay.x.toString());
+                    line.setAttribute('y2', cp1Overlay.y.toString());
+                }
                 const cp1Circle = this._overlayCircles.get(`cp1-${i}`);
                 if (cp1Circle) {
                     cp1Circle.setAttribute('cx', cp1Overlay.x.toString());
@@ -286,11 +621,13 @@ export class UnifiedGeometryExtension extends AbstractExtension {
                     cp2Circle.setAttribute('cy', cp2Overlay.y.toString());
                 }
             }
-            const overlayPt = this._toOverlay(seg.point);
-            const anchorCircle = this._overlayCircles.get(`anchor-${i}`);
-            if (anchorCircle) {
-                anchorCircle.setAttribute('cx', overlayPt.x.toString());
-                anchorCircle.setAttribute('cy', overlayPt.y.toString());
+            if (this._shouldRenderAnchorHandle(i, seg, this._geometry)) {
+                const overlayPt = this._toOverlay(seg.point);
+                const anchorCircle = this._overlayCircles.get(`anchor-${i}`);
+                if (anchorCircle) {
+                    anchorCircle.setAttribute('cx', overlayPt.x.toString());
+                    anchorCircle.setAttribute('cy', overlayPt.y.toString());
+                }
             }
             prevAnchor = seg.point;
         }
@@ -423,6 +760,31 @@ export class UnifiedGeometryExtension extends AbstractExtension {
                     }
                 });
             }
+            if (seg.type !== SegmentType.Arc) {
+                items.push({
+                    title: 'Convert to arc', action: () => {
+                        this._convertToArc(segIndex, false);
+                        this._applyGeometryToElement();
+                        this._commitGeometryChange();
+                    }
+                });
+                items.push({
+                    title: 'Convert to inverted arc', action: () => {
+                        this._convertToArc(segIndex, true);
+                        this._applyGeometryToElement();
+                        this._commitGeometryChange();
+                    }
+                });
+            }
+            else {
+                items.push({
+                    title: 'Invert arc', action: () => {
+                        this._invertArc(segIndex);
+                        this._applyGeometryToElement();
+                        this._commitGeometryChange();
+                    }
+                });
+            }
         }
         if (items.length > 0) {
             ContextMenu.show(items, event);
@@ -565,6 +927,37 @@ export class UnifiedGeometryExtension extends AbstractExtension {
         }
         delete seg.arc;
     }
+    _convertToArc(segIndex, inverted = false) {
+        if (!this._geometry)
+            return;
+        const seg = this._geometry.segments[segIndex];
+        const prevPt = this._findPreviousAnchor(segIndex);
+        if (!prevPt)
+            return;
+        const endPt = seg.point;
+        const dx = endPt.x - prevPt.x;
+        const dy = endPt.y - prevPt.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const radius = Math.max(1, dist / 2);
+        seg.type = SegmentType.Arc;
+        seg.arc = {
+            rx: radius,
+            ry: radius,
+            rotation: 0,
+            largeArc: false,
+            sweep: !inverted,
+        };
+        delete seg.cp1;
+        delete seg.cp2;
+    }
+    _invertArc(segIndex) {
+        if (!this._geometry)
+            return;
+        const seg = this._geometry.segments[segIndex];
+        if (seg.type !== SegmentType.Arc || !seg.arc)
+            return;
+        seg.arc.sweep = !seg.arc.sweep;
+    }
     // -- Bezier evaluation --
     _evalCubicBezier(p0, p1, p2, p3, t) {
         const mt = 1 - t;