@node-projects/web-component-designer 0.1.194 → 0.1.197

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

@@ -1,355 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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/svg/RectExtensionProvider copy.d.ts

@@ -1,9 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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;
-}

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

@@ -1,181 +0,0 @@
-import { EventNames } from '../../../../../enums/EventNames.js';
-import { AbstractExtension } from '../AbstractExtension.js';
-export class RectExtension extends AbstractExtension {
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-    }
-    pointerEvent(event, circle, r, index) {
-        event.stopPropagation();
-        const cursorPos = this.designerCanvas.getNormalizedEventCoordinates(event);
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                this._startPos = cursorPos;
-                this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
-                this._originalPoint = { x: this._x, y: this._y };
-                this._parentCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement.parentElement);
-                break;
-            case EventNames.PointerMove:
-                if (this._startPos && event.buttons > 0) {
-                    this._deltaScrollOffset = {
-                        x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
-                        y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
-                    };
-                    this._lastPos = { x: this._startPos.x, y: this._startPos.y };
-                    const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
-                    const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
-                    let dx = cx - this._circlePos.x;
-                    let dy = cy - this._circlePos.y;
-                    if (dx != 0 || dy != 0)
-                        this._circleMoved = true;
-                    if (event.shiftKey) {
-                        if (Math.abs(dx) < Math.abs(dy)) {
-                            dx = 0;
-                        }
-                        else {
-                            dy = 0;
-                        }
-                    }
-                    switch (index) {
-                        case 0:
-                            this._rect = this._calculateRect(this._originalPoint.x + dx, this._originalPoint.y + dy, this._w - dx, this._h - dy);
-                            break;
-                        case 1:
-                            this._rect = this._calculateRect(this._originalPoint.x, this._originalPoint.y + dy, this._w + dx, this._h - dy);
-                            break;
-                        case 2:
-                            this._rect = this._calculateRect(this._originalPoint.x, this._originalPoint.y, this._w + dx, this._h + dy);
-                            break;
-                        case 3:
-                            this._rect = this._calculateRect(this._originalPoint.x + dx, this._originalPoint.y, this._w - dx, this._h + dy);
-                            break;
-                    }
-                    r.setAttribute("x", this._rect.x.toString());
-                    r.setAttribute("y", this._rect.y.toString());
-                    r.setAttribute("width", this._rect.w.toString());
-                    r.setAttribute("height", this._rect.h.toString());
-                    circle.setAttribute("cx", (this._circlePos.x + dx).toString());
-                    circle.setAttribute("cy", (this._circlePos.y + dy).toString());
-                    this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this);
-                    this._redrawPathCircle(this._rect.x, this._rect.y, this._circle1);
-                    this._redrawPathCircle(this._rect.x + this._rect.w, this._rect.y, this._circle2);
-                    this._redrawPathCircle(this._rect.x + this._rect.w, this._rect.y + this._rect.h, this._circle3);
-                    this._redrawPathCircle(this._rect.x, this._rect.y + this._rect.h, this._circle4);
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                this._startPos = null;
-                this._circlePos = null;
-                this._originalPoint = null;
-                if (this._circleMoved) {
-                    this.extendedItem.setAttribute("x", this._rect.x.toString());
-                    this.extendedItem.setAttribute("y", this._rect.y.toString());
-                    this.extendedItem.setAttribute("width", this._rect.w.toString());
-                    this.extendedItem.setAttribute("height", this._rect.h.toString());
-                }
-                if (getComputedStyle(this._rectElement.parentElement).position == "absolute") {
-                    let group = this.extendedItem.openGroup('rearrangeSvg');
-                    let newRectCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement);
-                    let newRectCoordinatesCloud = this._getPointsFromRect(newRectCoordinates);
-                    let newRectExtrema = this._getMinMaxValues(newRectCoordinatesCloud);
-                    this._rearrangeSvgParent(newRectExtrema);
-                    this._rearrangePointsFromElement(this._parentCoordinates);
-                    group.commit();
-                }
-                break;
-        }
-    }
-    _drawPathCircle(point, changedCallback) {
-        let newCircle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + point.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + point.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);
-        circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-        return circle;
-    }
-    _calculateRect(x, y, w, h) {
-        let rect = { x: 0, y: 0, w: 0, h: 0 };
-        if (w >= 0) {
-            rect.x = x;
-            rect.w = w;
-        }
-        else {
-            rect.x = x + w;
-            rect.w = -w;
-        }
-        if (h >= 0) {
-            rect.y = y;
-            rect.h = h;
-        }
-        else {
-            rect.y = y + h;
-            rect.h = -h;
-        }
-        return rect;
-    }
-    _getPointsFromRect(elementCoords) {
-        let Coords = [];
-        Coords.push(elementCoords.x);
-        Coords.push(elementCoords.x + elementCoords.width);
-        Coords.push(elementCoords.x);
-        Coords.push(elementCoords.x + elementCoords.width);
-        Coords.push(elementCoords.y);
-        Coords.push(elementCoords.y);
-        Coords.push(elementCoords.y + elementCoords.height);
-        Coords.push(elementCoords.y + elementCoords.height);
-        Coords.push(elementCoords.height);
-        Coords.push(elementCoords.width);
-        return Coords;
-    }
-    _getMinMaxValues(coords) {
-        let extrema = { xMin: 0.0, xMax: 0.0, yMin: 0.0, yMax: 0.0 };
-        for (let i = 0; i < coords.length - 2; i++) {
-            if (coords[i] < coords[i + 1] && i <= 3) {
-                extrema.xMin = coords[i];
-            }
-            else if (coords[i] < coords[i + 1] && i > 3 && i <= 7) {
-                extrema.yMin = coords[i];
-            }
-            if (coords[i] > coords[i + 1] && i <= 3) {
-                extrema.xMax = coords[i];
-            }
-            else if (coords[i] > coords[i + 1] && i > 3 && i <= 8) {
-                extrema.yMax = coords[i];
-            }
-        }
-        return extrema;
-    }
-    _rearrangeSvgParent(newRectExtrema) {
-        let parentLeft = newRectExtrema.xMin - this._offsetSvg;
-        let parentTop = newRectExtrema.yMin - this._offsetSvg;
-        let widthRectElement = newRectExtrema.xMax - newRectExtrema.xMin + (2 * this._offsetSvg);
-        let heightRectElement = newRectExtrema.yMax - newRectExtrema.yMin + (2 * this._offsetSvg);
-        this.extendedItem.parent.setStyle("left", parentLeft.toString() + "px");
-        this.extendedItem.parent.setStyle("top", parentTop.toString() + "px");
-        this.extendedItem.parent.setStyle("height", Math.round(heightRectElement).toString() + "px");
-        this.extendedItem.parent.setStyle("width", Math.round(widthRectElement).toString() + "px");
-    }
-    _rearrangePointsFromElement(oldParentCoords) {
-        let newParentCoords = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement.parentElement);
-        let diffX = oldParentCoords.x - newParentCoords.x;
-        let diffY = oldParentCoords.y - newParentCoords.y;
-        this.extendedItem.setAttribute('x', (this._rectElement.x.baseVal.value + diffX).toString());
-        this.extendedItem.setAttribute('y', (this._rectElement.y.baseVal.value + diffY).toString());
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}