@node-projects/web-component-designer 0.1.353 → 0.2.2

package/dist/elements/widgets/designerView/extensions/transforms/RotateExtensionProvider.js

@@ -0,0 +1,25 @@
+import { RotateExtension } from './RotateExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class RotateExtensionProvider {
+    type;
+    constructor(type = 'center-top') {
+        this.type = type;
+    }
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        if (designerCanvas.readOnly)
+            return false;
+        if (designItem.element instanceof SVGElement || designItem.element instanceof HTMLTemplateElement) {
+            return false;
+        }
+        return !designItem.isRootItem;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new RotateExtension(extensionManager, designerCanvas, designItem);
+    }
+    static style = css `
+    .svg-primary-rotate { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events: auto; cursor: alias; }
+    .svg-primary-rotate-transparent { fill: transparent; pointer-events: auto; cursor: alias; }
+    .svg-primary-rotate-line { stroke: #3899ec; fill: #3899ec; stroke-width: 1; }
+  `;
+}
+//# sourceMappingURL=RotateExtensionProvider.js.map

package/dist/elements/widgets/designerView/extensions/transforms/RotateExtensionProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RotateExtensionProvider.js","sourceRoot":"","sources":["../../../../../../src/elements/widgets/designerView/extensions/transforms/RotateExtensionProvider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,GAAG,EAAE,MAAM,yCAAyC,CAAC;AAE9D,MAAM,OAAO,uBAAuB;IAC3B,IAAI,CAA2B;IAEtC,YAAY,OAAiC,YAAY;QACvD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,YAAY,CAAC,gBAAmC,EAAE,cAA+B,EAAE,UAAuB;QACxG,IAAI,cAAc,CAAC,QAAQ;YACzB,OAAO,KAAK,CAAC;QACf,IAAI,UAAU,CAAC,OAAO,YAAY,UAAU,IAAI,UAAU,CAAC,OAAO,YAAY,mBAAmB,EAAE,CAAC;YAClG,OAAO,KAAK,CAAC;QACf,CAAC;QACD,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC;IAChC,CAAC;IAED,YAAY,CAAC,gBAAmC,EAAE,cAA+B,EAAE,UAAuB;QACxG,OAAO,IAAI,eAAe,CAAC,gBAAgB,EAAE,cAAc,EAAE,UAAU,CAAC,CAAC;IAC3E,CAAC;IAED,MAAM,CAAU,KAAK,GAAG,GAAG,CAAA;;;;GAI1B,CAAC"}

package/dist/elements/widgets/designerView/extensions/transforms/RotateGroupExtension.d.ts

@@ -0,0 +1,29 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class RotateGroupExtension extends AbstractExtension {
+    private _rotateLine;
+    private _rotateCircle;
+    private _rectLine1;
+    private _rectLine2;
+    private _rectLine3;
+    private _rectLine4;
+    private _initialCorners;
+    private _startAngle;
+    private _groupCenter;
+    private _initialHandleX;
+    private _initialHandleY;
+    private _initialLineX1;
+    private _initialLineY1;
+    private _initialLineX2;
+    private _initialLineY2;
+    private _currentDelta;
+    private _elementStartStates;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
+    private _getDelta;
+    private _applyRotation;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/transforms/RotateGroupExtension.js

@@ -0,0 +1,229 @@
+import { hasCommandKey } from '../../../../helper/KeyboardHelper.js';
+import { filterChildPlaceItems, roundValue } from '../../../../helper/LayoutHelper.js';
+import { calculateOuterRect } from '../../../../helper/ElementHelper.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+export class RotateGroupExtension extends AbstractExtension {
+    _rotateLine;
+    _rotateCircle;
+    // rotating rect overlay (only visible during drag)
+    _rectLine1;
+    _rectLine2;
+    _rectLine3;
+    _rectLine4;
+    _initialCorners;
+    // drag-start state
+    _startAngle;
+    _groupCenter;
+    _initialHandleX;
+    _initialHandleY;
+    _initialLineX1;
+    _initialLineY1;
+    _initialLineX2;
+    _initialLineY2;
+    _currentDelta = 0;
+    _elementStartStates;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        this.refresh(cache, event);
+    }
+    refresh(cache, event) {
+        const selection = filterChildPlaceItems(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+        if (selection.length < 2)
+            return;
+        let handleX, handleY;
+        let lineX1, lineY1, lineX2, lineY2;
+        if (this._elementStartStates) {
+            // During drag: rotate all control points around the fixed group center
+            const rad = this._currentDelta * Math.PI / 180;
+            const cos = Math.cos(rad);
+            const sin = Math.sin(rad);
+            const rx = (x, y) => this._groupCenter.x + (x - this._groupCenter.x) * cos - (y - this._groupCenter.y) * sin;
+            const ry = (x, y) => this._groupCenter.y + (x - this._groupCenter.x) * sin + (y - this._groupCenter.y) * cos;
+            handleX = rx(this._initialHandleX, this._initialHandleY);
+            handleY = ry(this._initialHandleX, this._initialHandleY);
+            lineX1 = rx(this._initialLineX1, this._initialLineY1);
+            lineY1 = ry(this._initialLineX1, this._initialLineY1);
+            lineX2 = rx(this._initialLineX2, this._initialLineY2);
+            lineY2 = ry(this._initialLineX2, this._initialLineY2);
+            // Rotate the four bounding-box corners and draw the rect overlay
+            const c = this._initialCorners;
+            const corners = c.map(p => ({ x: rx(p.x, p.y), y: ry(p.x, p.y) }));
+            const sw = (2 / this.designerCanvas.zoomFactor).toString();
+            this._rectLine1 = this._drawLine(corners[0].x, corners[0].y, corners[1].x, corners[1].y, 'svg-rotate-group-rect', this._rectLine1);
+            this._rectLine2 = this._drawLine(corners[1].x, corners[1].y, corners[2].x, corners[2].y, 'svg-rotate-group-rect', this._rectLine2);
+            this._rectLine3 = this._drawLine(corners[2].x, corners[2].y, corners[3].x, corners[3].y, 'svg-rotate-group-rect', this._rectLine3);
+            this._rectLine4 = this._drawLine(corners[3].x, corners[3].y, corners[0].x, corners[0].y, 'svg-rotate-group-rect', this._rectLine4);
+            this._rectLine1.style.strokeWidth = sw;
+            this._rectLine2.style.strokeWidth = sw;
+            this._rectLine3.style.strokeWidth = sw;
+            this._rectLine4.style.strokeWidth = sw;
+        }
+        else {
+            if (this._rectLine1) {
+                this._rectLine1.style.display = 'none';
+                this._rectLine2.style.display = 'none';
+                this._rectLine3.style.display = 'none';
+                this._rectLine4.style.display = 'none';
+            }
+            // Idle: position above the bounding box center
+            const outerRect = calculateOuterRect(selection, this.designerCanvas);
+            const cx = outerRect.x + outerRect.width / 2;
+            const top = outerRect.y;
+            handleX = cx;
+            handleY = top - 30 / this.designerCanvas.zoomFactor;
+            lineX1 = cx;
+            lineY1 = top - 22 / this.designerCanvas.zoomFactor;
+            lineX2 = cx;
+            lineY2 = top - 6 / this.designerCanvas.zoomFactor;
+        }
+        this._rotateLine = this._drawLine(lineX1, lineY1, lineX2, lineY2, 'svg-primary-rotate-line', this._rotateLine);
+        this._rotateLine.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        if (!this._rotateCircle) {
+            this._rotateCircle = this._drawCircle(handleX, handleY, 5 / this.designerCanvas.zoomFactor, 'svg-primary-rotate', this._rotateCircle);
+            this._rotateCircle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+            this._rotateCircle.addEventListener('pointerdown', e => {
+                e.stopPropagation();
+                e.target.setPointerCapture(e.pointerId);
+                const currentSelection = filterChildPlaceItems(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                const outerRect = calculateOuterRect(currentSelection, this.designerCanvas);
+                const cx = outerRect.x + outerRect.width / 2;
+                const top = outerRect.y;
+                this._groupCenter = {
+                    x: cx,
+                    y: outerRect.y + outerRect.height / 2,
+                };
+                // Store control point positions as canvas coords so they can be rotated during drag
+                this._initialHandleX = cx;
+                this._initialHandleY = top - 30 / this.designerCanvas.zoomFactor;
+                this._initialLineX1 = cx;
+                this._initialLineY1 = top - 22 / this.designerCanvas.zoomFactor;
+                this._initialLineX2 = cx;
+                this._initialLineY2 = top - 6 / this.designerCanvas.zoomFactor;
+                // Capture the four corners of the bounding rect for the rotating overlay
+                this._initialCorners = [
+                    { x: outerRect.x, y: outerRect.y },
+                    { x: outerRect.x + outerRect.width, y: outerRect.y },
+                    { x: outerRect.x + outerRect.width, y: outerRect.y + outerRect.height },
+                    { x: outerRect.x, y: outerRect.y + outerRect.height },
+                ];
+                // Show rect lines if they were hidden from a previous drag
+                if (this._rectLine1) {
+                    this._rectLine1.style.display = '';
+                    this._rectLine2.style.display = '';
+                    this._rectLine3.style.display = '';
+                    this._rectLine4.style.display = '';
+                }
+                const mp = this.designerCanvas.getNormalizedEventCoordinates(e);
+                this._startAngle = Math.atan2(mp.y - this._groupCenter.y, mp.x - this._groupCenter.x);
+                this._currentDelta = 0;
+                this._elementStartStates = currentSelection.map(item => {
+                    const coords = this.designerCanvas.getNormalizedElementCoordinates(item.element);
+                    const parent = this.designerCanvas.getNormalizedElementCoordinates(item.parent.element);
+                    const rotateStr = item.getStyle('rotate') ?? '0deg';
+                    const rotation = parseFloat(rotateStr) || 0;
+                    // getBoundingClientRect returns the visual (rotated) bounding box. For position
+                    // calculations we need the actual CSS dimensions (unrotated box), otherwise
+                    // pre-rotated elements would be placed incorrectly.
+                    const cs = getComputedStyle(item.element);
+                    const cssHalfWidth = parseFloat(cs.width) / 2;
+                    const cssHalfHeight = parseFloat(cs.height) / 2;
+                    return {
+                        item,
+                        rotation,
+                        centerX: coords.x + coords.width / 2,
+                        centerY: coords.y + coords.height / 2,
+                        cssHalfWidth,
+                        cssHalfHeight,
+                        parentX: parent.x,
+                        parentY: parent.y,
+                        parentWidth: parent.width,
+                        parentHeight: parent.height,
+                        usesRight: item.hasStyle('right') && !item.hasStyle('left'),
+                        usesBottom: item.hasStyle('bottom') && !item.hasStyle('top'),
+                    };
+                });
+            });
+            this._rotateCircle.addEventListener('pointermove', e => {
+                e.stopPropagation();
+                if (!this._elementStartStates)
+                    return;
+                this._currentDelta = this._getDelta(e);
+                for (const state of this._elementStartStates) {
+                    this._applyRotation(state, this._currentDelta, false);
+                }
+            });
+            this._rotateCircle.addEventListener('pointerup', e => {
+                e.stopPropagation();
+                e.target.releasePointerCapture(e.pointerId);
+                if (!this._elementStartStates)
+                    return;
+                const delta = this._getDelta(e);
+                const grp = this.designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateGroup');
+                for (const state of this._elementStartStates) {
+                    this._applyRotation(state, delta, true);
+                }
+                grp.commit();
+                this._elementStartStates = null;
+                this._currentDelta = 0;
+            });
+        }
+        else {
+            this._rotateCircle = this._drawCircle(handleX, handleY, 5 / this.designerCanvas.zoomFactor, 'svg-primary-rotate', this._rotateCircle);
+            this._rotateCircle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        }
+    }
+    _getDelta(e) {
+        const mp = this.designerCanvas.getNormalizedEventCoordinates(e);
+        const currentAngle = Math.atan2(mp.y - this._groupCenter.y, mp.x - this._groupCenter.x);
+        let delta = (currentAngle - this._startAngle) * 180 / Math.PI;
+        // Normalize to (-180, 180] to avoid jumps when crossing the ±180° boundary
+        delta = ((delta + 180) % 360 + 360) % 360 - 180;
+        if (!hasCommandKey(e))
+            delta = Math.round(delta / 15) * 15;
+        return delta;
+    }
+    _applyRotation(state, deltaAngle, commit) {
+        const rad = deltaAngle * Math.PI / 180;
+        const cos = Math.cos(rad);
+        const sin = Math.sin(rad);
+        const dx = state.centerX - this._groupCenter.x;
+        const dy = state.centerY - this._groupCenter.y;
+        const newCenterX = this._groupCenter.x + dx * cos - dy * sin;
+        const newCenterY = this._groupCenter.y + dx * sin + dy * cos;
+        const newRotation = roundValue(state.item, state.rotation + deltaAngle);
+        const newLeft = newCenterX - state.cssHalfWidth - state.parentX;
+        const newTop = newCenterY - state.cssHalfHeight - state.parentY;
+        const newRight = state.parentX + state.parentWidth - newCenterX - state.cssHalfWidth;
+        const newBottom = state.parentY + state.parentHeight - newCenterY - state.cssHalfHeight;
+        if (commit) {
+            if (state.usesRight)
+                state.item.setStyle('right', newRight + 'px');
+            else
+                state.item.setStyle('left', newLeft + 'px');
+            if (state.usesBottom)
+                state.item.setStyle('bottom', newBottom + 'px');
+            else
+                state.item.setStyle('top', newTop + 'px');
+            state.item.setStyle('rotate', newRotation + 'deg');
+        }
+        else {
+            const el = state.item.element;
+            if (state.usesRight)
+                el.style.right = newRight + 'px';
+            else
+                el.style.left = newLeft + 'px';
+            if (state.usesBottom)
+                el.style.bottom = newBottom + 'px';
+            else
+                el.style.top = newTop + 'px';
+            //@ts-ignore
+            el.style.rotate = newRotation + 'deg';
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}
+//# sourceMappingURL=RotateGroupExtension.js.map

package/dist/elements/widgets/designerView/extensions/transforms/RotateGroupExtension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RotateGroupExtension.js","sourceRoot":"","sources":["../../../../../../src/elements/widgets/designerView/extensions/transforms/RotateGroupExtension.ts"],"names":[],"mappings":"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"}

package/dist/elements/widgets/designerView/extensions/transforms/RotateGroupExtensionProvider.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerExtension } from '../IDesignerExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class RotateGroupExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    static readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/transforms/RotateGroupExtensionProvider.js

@@ -0,0 +1,20 @@
+import { RotateGroupExtension } from './RotateGroupExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class RotateGroupExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        if (designerCanvas.readOnly)
+            return false;
+        if (designItem.element instanceof SVGElement || designItem.element instanceof HTMLTemplateElement)
+            return false;
+        return !designItem.isRootItem;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new RotateGroupExtension(extensionManager, designerCanvas, designItem);
+    }
+    static style = css `
+    .svg-primary-rotate { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events: auto; cursor: alias; }
+    .svg-primary-rotate-line { stroke: #3899ec; fill: #3899ec; stroke-width: 1; }
+    .svg-rotate-group-rect { stroke: #3899ec; fill: transparent; stroke-width: 2; stroke-dasharray: 5 3; }
+  `;
+}
+//# sourceMappingURL=RotateGroupExtensionProvider.js.map

package/dist/elements/widgets/designerView/extensions/transforms/RotateGroupExtensionProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RotateGroupExtensionProvider.js","sourceRoot":"","sources":["../../../../../../src/elements/widgets/designerView/extensions/transforms/RotateGroupExtensionProvider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EAAE,GAAG,EAAE,MAAM,yCAAyC,CAAC;AAE9D,MAAM,OAAO,4BAA4B;IACvC,YAAY,CAAC,gBAAmC,EAAE,cAA+B,EAAE,UAAuB;QACxG,IAAI,cAAc,CAAC,QAAQ;YACzB,OAAO,KAAK,CAAC;QACf,IAAI,UAAU,CAAC,OAAO,YAAY,UAAU,IAAI,UAAU,CAAC,OAAO,YAAY,mBAAmB;YAC/F,OAAO,KAAK,CAAC;QACf,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC;IAChC,CAAC;IAED,YAAY,CAAC,gBAAmC,EAAE,cAA+B,EAAE,UAAuB;QACxG,OAAO,IAAI,oBAAoB,CAAC,gBAAgB,EAAE,cAAc,EAAE,UAAU,CAAC,CAAC;IAChF,CAAC;IAED,MAAM,CAAU,KAAK,GAAG,GAAG,CAAA;;;;GAI1B,CAAC"}

package/dist/elements/widgets/designerView/extensions/transforms/SkewExtension.d.ts

@@ -0,0 +1,30 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class SkewExtension extends AbstractExtension {
+    private _skewXLine?;
+    private _skewYLine?;
+    private _skewXCircle?;
+    private _skewYCircle?;
+    private _skewXReferencePoint;
+    private _skewYReferencePoint;
+    private _activeAxis;
+    private _baseTransform;
+    private _skewX;
+    private _skewY;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
+    private _handlePointerEvent;
+    private _readPersistedTransform;
+    private _getSkewReferencePoint;
+    private _setPreviewTransform;
+    private _commitTransform;
+    private _getSkewAngle;
+    private _buildTransform;
+    private _parseTransform;
+    private _splitTransformFunctions;
+    private _parseAngle;
+    dispose(): void;
+}