@node-projects/web-component-designer 0.1.104 → 0.1.106

package/dist/elements/widgets/designerView/extensions/grid/ResizeExtension.d.ts

@@ -0,0 +1,28 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class ResizeExtension extends AbstractExtension {
+    private resizeAllSelected;
+    private _initialSizes;
+    private _actionModeStarted;
+    private _initialPoint;
+    private _offsetPoint;
+    private _circle1;
+    private _circle2;
+    private _circle3;
+    private _circle4;
+    private _circle5;
+    private _circle6;
+    private _circle7;
+    private _circle8;
+    private _initialComputedTransformOrigins;
+    private _initialTransformOrigins;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem, resizeAllSelected: boolean);
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
+    _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
+    _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string): void;
+    private prepareResize;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/grid/ResizeExtension.js

@@ -0,0 +1,355 @@
+import { EventNames } from '../../../../enums/EventNames.js';
+import { getContentBoxContentOffsets } from '../../../helper/ElementHelper.js';
+import { roundValue } from '../../../helper/LayoutHelper.js';
+import { transformPointByInverseMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition, getElementCombinedTransform } from "../../../helper/TransformHelper.js";
+import { AbstractExtension } from './AbstractExtension.js';
+//TODO: use PlacementService, size is not always width/height could also be margin etc...
+//      also when elment aligned to bottom, will it later also be?
+export class ResizeExtension extends AbstractExtension {
+    resizeAllSelected;
+    _initialSizes;
+    _actionModeStarted;
+    _initialPoint;
+    _offsetPoint;
+    _circle1;
+    _circle2;
+    _circle3;
+    _circle4;
+    _circle5;
+    _circle6;
+    _circle7;
+    _circle8;
+    _initialComputedTransformOrigins;
+    _initialTransformOrigins;
+    constructor(extensionManager, designerCanvas, extendedItem, resizeAllSelected) {
+        super(extensionManager, designerCanvas, extendedItem);
+        this.resizeAllSelected = resizeAllSelected;
+    }
+    extend(cache, event) {
+        this.refresh(cache, event);
+    }
+    refresh(cache, event) {
+        //#region Resizer circles
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
+        if (isNaN(transformedCornerPoints[0].x) || isNaN(transformedCornerPoints[1].x)) {
+            this.remove();
+            return;
+        }
+        if (this._valuesHaveChanges(this.designerCanvas.zoomFactor, transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y)) {
+            this._circle1 = this._drawResizerOverlay(transformedCornerPoints[0].x, transformedCornerPoints[0].y, 'nw-resize', this._circle1);
+            this._circle2 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[1].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[1].y - transformedCornerPoints[0].y) / 2), 'n-resize', this._circle2);
+            this._circle3 = this._drawResizerOverlay(transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'ne-resize', this._circle3);
+            this._circle4 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[2].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[2].y - transformedCornerPoints[0].y) / 2), 'w-resize', this._circle4);
+            this._circle5 = this._drawResizerOverlay(transformedCornerPoints[2].x, transformedCornerPoints[2].y, 'sw-resize', this._circle5);
+            this._circle6 = this._drawResizerOverlay((transformedCornerPoints[2].x + (transformedCornerPoints[3].x - transformedCornerPoints[2].x) / 2), (transformedCornerPoints[2].y + (transformedCornerPoints[3].y - transformedCornerPoints[2].y) / 2), 's-resize', this._circle6);
+            this._circle8 = this._drawResizerOverlay((transformedCornerPoints[1].x + (transformedCornerPoints[3].x - transformedCornerPoints[1].x) / 2), (transformedCornerPoints[1].y + (transformedCornerPoints[3].y - transformedCornerPoints[1].y) / 2), 'e-resize', this._circle8);
+            this._circle7 = this._drawResizerOverlay(transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'se-resize', this._circle7);
+        }
+        //#endregion Circles
+    }
+    _drawResizerOverlay(x, y, cursor, oldCircle) {
+        let circle = this._drawCircle(x, y, 3 / this.designerCanvas.zoomFactor, 'svg-primary-resizer', oldCircle);
+        circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        if (!oldCircle) {
+            circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(circle, event, cursor));
+            circle.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(circle, event, cursor));
+            circle.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(circle, event, cursor));
+        }
+        circle.style.cursor = cursor;
+        return circle;
+    }
+    _pointerActionTypeResize(circle, event, actionMode) {
+        event.stopPropagation();
+        const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                const cx = parseFloat(circle.getAttribute('cx'));
+                const cy = parseFloat(circle.getAttribute('cy'));
+                this._offsetPoint = { x: cx - currentPoint.x, y: cy - currentPoint.y };
+                event.target.setPointerCapture(event.pointerId);
+                this._initialPoint = currentPoint;
+                this._initialSizes = [];
+                this._actionModeStarted = actionMode;
+                this._initialComputedTransformOrigins = [];
+                this._initialTransformOrigins = [];
+                //#region Calc elements' dimension
+                const transformBackup = this.extendedItem.element.style.transform;
+                this.extendedItem.element.style.transform = '';
+                let rect = this.extendedItem.element.getBoundingClientRect();
+                this.extendedItem.element.style.transform = transformBackup;
+                //#endregion Calc element's dimension
+                let contentBoxOffset = { x: 0, y: 0 };
+                if (getComputedStyle(this.extendedItem.element).boxSizing == 'content-box') {
+                    contentBoxOffset = getContentBoxContentOffsets(this.extendedItem.element);
+                }
+                this._initialSizes.push({ width: (rect.width - contentBoxOffset.x * this.designerCanvas.scaleFactor) / this.designerCanvas.scaleFactor, height: (rect.height - contentBoxOffset.y * this.designerCanvas.scaleFactor) / this.designerCanvas.scaleFactor });
+                const toArr = getComputedStyle(this.extendedItem.element).transformOrigin.split(' ').map(x => parseFloat(x.replace('px', '')));
+                const transformOrigin = new DOMPoint(toArr[0], toArr[1]);
+                this._initialComputedTransformOrigins.push(transformOrigin);
+                this._initialTransformOrigins.push(this.extendedItem.element.style.transformOrigin);
+                if (this.resizeAllSelected) {
+                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                        rect = designItem.element.getBoundingClientRect();
+                        this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                    }
+                }
+                if (this.designerCanvas.alignOnSnap)
+                    this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                this.prepareResize(this.extendedItem, this._actionModeStarted);
+                if (this.resizeAllSelected) {
+                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                        if (designItem !== this.extendedItem) {
+                            this.prepareResize(designItem, this._actionModeStarted);
+                        }
+                    }
+                }
+                break;
+            case EventNames.PointerMove:
+                if (this._initialPoint) {
+                    const containerStyle = getComputedStyle(this.extendedItem.parent.element);
+                    const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent, containerStyle));
+                    const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                    let trackX = Math.round(diff.x - this._initialPoint.x - this._offsetPoint.x);
+                    let trackY = Math.round(diff.y - this._initialPoint.y - this._offsetPoint.y);
+                    let matrix = getElementCombinedTransform(this.extendedItem.element);
+                    let transformedTrack = transformPointByInverseMatrix(new DOMPoint(trackX, trackY, 0, 0), matrix);
+                    let deltaX = transformedTrack.x;
+                    let deltaY = transformedTrack.y;
+                    if (event.shiftKey) {
+                        deltaX = deltaX < deltaY ? deltaX : deltaY;
+                        deltaY = deltaX;
+                    }
+                    let i = 0;
+                    let width = null;
+                    let height = null;
+                    switch (this._actionModeStarted) {
+                        case 'e-resize':
+                            width = (this._initialSizes[i].width + deltaX);
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width + deltaX) + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'se-resize':
+                            width = (this._initialSizes[i].width + deltaX);
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
+                            height = (this._initialSizes[i].height + deltaY);
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width + deltaX) + 'px';
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height + deltaY) + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 's-resize':
+                            height = (this._initialSizes[i].height + deltaY);
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height + deltaY) + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'sw-resize':
+                            width = (this._initialSizes[i].width - deltaX);
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
+                            height = (this._initialSizes[i].height + deltaY);
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width - deltaX) + 'px';
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height + deltaY) + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'w-resize':
+                            width = (this._initialSizes[i].width - deltaX);
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width - deltaX) + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'nw-resize':
+                            width = (this._initialSizes[i].width - deltaX);
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
+                            height = (this._initialSizes[i].height - deltaY);
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width - deltaX) + 'px';
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height - deltaY) + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'n-resize':
+                            height = (this._initialSizes[i].height - deltaY);
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height - deltaY) + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'ne-resize':
+                            width = (this._initialSizes[i].width + deltaX);
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
+                            height = (this._initialSizes[i].height - deltaY);
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width + deltaX) + 'px';
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height - deltaY) + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                    }
+                    const resizedElements = [this.extendedItem, this.extendedItem.parent];
+                    if (this.resizeAllSelected)
+                        resizedElements.push(...this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                    this.extensionManager.refreshExtensions(resizedElements);
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                let cg = this.extendedItem.openGroup((this.resizeAllSelected && this.designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1) ? "Resize Elements" : "Resize &lt;" + this.extendedItem.name + "&gt;");
+                this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
+                this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
+                this.extendedItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(this.extendedItem.element, 'left'))) + 'px');
+                this.extendedItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(this.extendedItem.element, 'top'))) + 'px');
+                let p3Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
+                this.extendedItem.element.style.transformOrigin = this._initialTransformOrigins[0];
+                let p1Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
+                let p1 = new DOMPoint(p1Abs.x - p3Abs.x, -(p1Abs.y - p3Abs.y));
+                let matrix = new DOMMatrix(getComputedStyle(this.extendedItem.element).transform);
+                let deltaX = 0;
+                let deltaY = 0;
+                let p1transformed = transformPointByInverseMatrix(p1, matrix);
+                let p2Abs = new DOMPoint(p3Abs.x + p1transformed.x, p3Abs.y - p1transformed.y);
+                let p1p2 = new DOMPoint(p2Abs.x - p1Abs.x, -(p2Abs.y - p1Abs.y));
+                let p1p2transformed = p1p2.matrixTransform(matrix);
+                let p4Abs = new DOMPoint(p1Abs.x + p1p2transformed.x, p1Abs.y - p1p2transformed.y);
+                deltaX = p4Abs.x - p1Abs.x;
+                deltaY = p4Abs.y - p1Abs.y;
+                this.extendedItem.element.style.transform = matrix.translate(deltaX, deltaY).toString();
+                if (matrix.isIdentity) {
+                    this.extendedItem.element.style.transform = '';
+                }
+                this.extendedItem.setStyle('transform', this.extendedItem.element.style.transform);
+                if (this.resizeAllSelected) {
+                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                        if (designItem !== this.extendedItem) {
+                            designItem.setStyle('width', designItem.element.style.width);
+                            designItem.setStyle('height', designItem.element.style.height);
+                            designItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'left'))) + 'px');
+                            designItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'top'))) + 'px');
+                        }
+                    }
+                }
+                cg.commit();
+                this._initialSizes = null;
+                this._initialPoint = null;
+                break;
+        }
+    }
+    prepareResize(designItem, mode) {
+        let i = 0;
+        let top = null;
+        let bottom = null;
+        let left = null;
+        let right = null;
+        switch (this._actionModeStarted) {
+            case 'e-resize':
+                left = getComputedStyle(designItem.element).left;
+                designItem.element.style.removeProperty('right');
+                designItem.element.style.left = left;
+                designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
+                break;
+            case 'se-resize':
+                top = getComputedStyle(designItem.element).top;
+                designItem.element.style.removeProperty('bottom');
+                designItem.element.style.top = top;
+                left = getComputedStyle(designItem.element).left;
+                designItem.element.style.removeProperty('right');
+                designItem.element.style.left = left;
+                designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
+                break;
+            case 's-resize':
+                top = getComputedStyle(designItem.element).top;
+                designItem.element.style.removeProperty('bottom');
+                designItem.element.style.top = top;
+                designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
+                break;
+            case 'sw-resize':
+                top = getComputedStyle(designItem.element).top;
+                designItem.element.style.removeProperty('bottom');
+                designItem.element.style.top = top;
+                right = getComputedStyle(designItem.element).right;
+                designItem.element.style.removeProperty('left');
+                designItem.element.style.right = right;
+                designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
+                break;
+            case 'w-resize':
+                right = getComputedStyle(designItem.element).right;
+                designItem.element.style.removeProperty('left');
+                designItem.element.style.right = right;
+                designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
+                break;
+            case 'nw-resize':
+                bottom = getComputedStyle(designItem.element).bottom;
+                designItem.element.style.removeProperty('top');
+                designItem.element.style.bottom = bottom;
+                right = getComputedStyle(designItem.element).right;
+                designItem.element.style.removeProperty('left');
+                designItem.element.style.right = right;
+                designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
+                break;
+            case 'n-resize':
+                bottom = getComputedStyle(designItem.element).bottom;
+                designItem.element.style.removeProperty('top');
+                designItem.element.style.bottom = bottom;
+                designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
+                break;
+            case 'ne-resize':
+                bottom = getComputedStyle(designItem.element).bottom;
+                designItem.element.style.removeProperty('top');
+                designItem.element.style.bottom = bottom;
+                left = getComputedStyle(designItem.element).left;
+                designItem.element.style.removeProperty('right');
+                designItem.element.style.left = left;
+                designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
+                break;
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/grid/ResizeExtensionProvider.d.ts

@@ -0,0 +1,12 @@
+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 ResizeExtensionProvider implements IDesignerExtensionProvider {
+    private resizeAllSelected;
+    constructor(resizeAllSelected?: boolean);
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/grid/ResizeExtensionProvider.js

@@ -0,0 +1,20 @@
+import { ResizeExtension } from './ResizeExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+import { NodeType } from "../../../item/NodeType.js";
+export class ResizeExtensionProvider {
+    resizeAllSelected;
+    constructor(resizeAllSelected = false) {
+        this.resizeAllSelected = resizeAllSelected;
+    }
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.element instanceof SVGElement)
+            return false;
+        return designItem.nodeType == NodeType.Element;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new ResizeExtension(extensionManager, designerView, designItem, this.resizeAllSelected);
+    }
+    style = css `
+    .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.d.ts

@@ -0,0 +1,13 @@
+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 ConditionExtensionProvider implements IDesignerExtensionProvider {
+    constructor(extensionProvider: IDesignerExtensionProvider, condition: (designItem: IDesignItem) => boolean);
+    extensionProvider: IDesignerExtensionProvider;
+    condition: (designItem: IDesignItem) => boolean;
+    style: CSSStyleSheet;
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.js

@@ -0,0 +1,18 @@
+export class ConditionExtensionProvider {
+    constructor(extensionProvider, condition) {
+        this.extensionProvider = extensionProvider;
+        this.condition = condition;
+        this.style = extensionProvider.style;
+    }
+    extensionProvider;
+    condition;
+    style;
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (!this.condition(designItem))
+            return false;
+        return this.extensionProvider.shouldExtend(extensionManager, designerView, designItem);
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return this.extensionProvider.getExtension(extensionManager, designerView, designItem);
+    }
+}

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

@@ -117,12 +117,14 @@ export class EllipsisExtension extends AbstractExtension {
         }
     }
     _drawPathCircle(x, y, e, index, circle) {
-        circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', circle);
-        circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-        circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, e, index));
-        circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, e, index));
-        circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, e, index));
-        return circle;
+        let newCircle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', circle);
+        newCircle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        if (!circle) {
+            newCircle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, newCircle, e, index));
+            newCircle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, newCircle, e, index));
+            newCircle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, newCircle, e, index));
+        }
+        return newCircle;
     }
     _redrawPathCircle(x, y, oldCircle) {
         let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x - this._deltaScrollOffset.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y - this._deltaScrollOffset.y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);

package/dist/elements/widgets/designerView/extensions/svg/RectExtension.d.ts

@@ -26,8 +26,9 @@ export declare class RectExtension extends AbstractExtension {
     private _circleMoved;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
+    refresh(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, r: SVGRectElement, index: number): void;
-    _drawPathCircle(x: number, y: number, r: SVGRectElement, index: number): SVGCircleElement;
+    _drawPathCircle(x: number, y: number, r: SVGRectElement, index: number, circle: SVGCircleElement): SVGCircleElement;
     _redrawPathCircle(x: number, y: number, oldCircle: SVGCircleElement): SVGCircleElement;
     _calculateRect(x: number, y: number, w: number, h: number): {
         x: number;
@@ -44,6 +45,5 @@ export declare class RectExtension extends AbstractExtension {
     };
     _rearrangeSvgParent(newRectExtrema: any): void;
     _rearrangePointsFromElement(oldParentCoords: IRect): void;
-    refresh(): void;
     dispose(): void;
 }

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

@@ -25,6 +25,9 @@ export class RectExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
+        this.refresh();
+    }
+    refresh() {
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
         this._rectElement = this.extendedItem.node;
         this._startScrollOffset = this.designerCanvas.canvasOffset;
@@ -32,10 +35,12 @@ export class RectExtension extends AbstractExtension {
         this._y = this._rectElement.y.baseVal.value;
         this._w = this._rectElement.width.baseVal.value;
         this._h = this._rectElement.height.baseVal.value;
-        this._circle1 = this._drawPathCircle(this._x, this._y, this._rectElement, 0);
-        this._circle2 = this._drawPathCircle(this._x + this._w, this._y, this._rectElement, 1);
-        this._circle3 = this._drawPathCircle(this._x + this._w, this._y + this._h, this._rectElement, 2);
-        this._circle4 = this._drawPathCircle(this._x, this._y + this._h, this._rectElement, 3);
+        if (this._valuesHaveChanges(this.designerCanvas.zoomFactor, this._x, this._y, this._w, this._h)) {
+            this._circle1 = this._drawPathCircle(this._x, this._y, this._rectElement, 0, this._circle1);
+            this._circle2 = this._drawPathCircle(this._x + this._w, this._y, this._rectElement, 1, this._circle2);
+            this._circle3 = this._drawPathCircle(this._x + this._w, this._y + this._h, this._rectElement, 2, this._circle3);
+            this._circle4 = this._drawPathCircle(this._x, this._y + this._h, this._rectElement, 3, this._circle4);
+        }
     }
     pointerEvent(event, circle, r, index) {
         event.stopPropagation();
@@ -119,13 +124,15 @@ export class RectExtension extends AbstractExtension {
                 break;
         }
     }
-    _drawPathCircle(x, y, r, index) {
-        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path');
-        circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-        circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, r, index));
-        circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, r, index));
-        circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, r, index));
-        return circle;
+    _drawPathCircle(x, y, r, index, circle) {
+        let newCircle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', circle);
+        newCircle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        if (!circle) {
+            newCircle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, newCircle, r, index));
+            newCircle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, newCircle, r, index));
+            newCircle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, newCircle, r, index));
+        }
+        return newCircle;
     }
     _redrawPathCircle(x, y, oldCircle) {
         let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x - this._deltaScrollOffset.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y - this._deltaScrollOffset.y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
@@ -201,10 +208,6 @@ export class RectExtension extends AbstractExtension {
         this.extendedItem.setAttribute('x', (this._rectElement.x.baseVal.value + diffX).toString());
         this.extendedItem.setAttribute('y', (this._rectElement.y.baseVal.value + diffY).toString());
     }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
     dispose() {
         this._removeAllOverlays();
     }

package/dist/elements/widgets/designerView/extensions/svg/RectExtensionProvider copy.d.ts

@@ -0,0 +1,9 @@
+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 RectExtentionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/svg/RectExtensionProvider copy.js

@@ -0,0 +1,14 @@
+import { RectExtension } from './RectExtension.js';
+import { isVisualSvgElement } from '../../../../helper/SvgHelper.js';
+export class RectExtentionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.node instanceof SVGRectElement) {
+            return isVisualSvgElement(designItem.node);
+            ;
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new RectExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/svg/SvgBaseExtension.d.ts

@@ -0,0 +1,30 @@
+import { IPoint } from '../../../../../interfaces/IPoint.js';
+import { IRect } from '../../../../../interfaces/IRect.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class RectExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    pointerEvent(event: PointerEvent, circle: SVGCircleElement, r: SVGRectElement, index: number): void;
+    _drawPathCircle(point: IPoint, changedCallback: () => void): void;
+    _redrawPathCircle(x: number, y: number, oldCircle: SVGCircleElement): SVGCircleElement;
+    _calculateRect(x: number, y: number, w: number, h: number): {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    _getPointsFromRect(elementCoords: IRect): number[];
+    _getMinMaxValues(coords: any): {
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+    };
+    _rearrangeSvgParent(newRectExtrema: any): void;
+    _rearrangePointsFromElement(oldParentCoords: IRect): void;
+    dispose(): void;
+}