@node-projects/web-component-designer 0.0.291 → 0.1.0

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

@@ -1,329 +0,0 @@
-import { AbstractExtension } from '../AbstractExtension.js';
-import "../../../../helper/PathDataPolyfill.js";
-import { EventNames } from '../../../../../enums/EventNames.js';
-import { createPathD } from '../../../../helper/PathDataPolyfill.js';
-import { ContextMenu } from '../../../../helper/contextMenu/ContextMenu.js';
-export class PathExtension extends AbstractExtension {
-    _lastPos;
-    _parentRect;
-    _startPos;
-    _circlePos;
-    _originalPathPoint;
-    _pathdata;
-    _offsetSvg = 10.0;
-    _pathElement;
-    _parentCoordinates;
-    _startScrollOffset;
-    _deltaScrollOffset;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
-        this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
-        this._pathElement = this.extendedItem.node;
-        this._lastPos = { x: 0, y: 0 };
-        this._startScrollOffset = this.designerCanvas.canvasOffset;
-        if (!this._deltaScrollOffset)
-            this._deltaScrollOffset = { x: 0, y: 0 };
-        for (let p of this._pathdata) {
-            switch (p.type) {
-                case 'M':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._lastPos = { x: p.values[0], y: p.values[1] };
-                    break;
-                case 'm':
-                    this._drawPathCircle(p.values[0] + this._lastPos.x, p.values[1] + this._lastPos.y, p, 0);
-                    this._lastPos = { x: p.values[0] + this._lastPos.x, y: p.values[1] + this._lastPos.y };
-                    break;
-                case 'L':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._lastPos = { x: p.values[0], y: p.values[1] };
-                    break;
-                case 'l':
-                    this._drawPathCircle(p.values[0] + this._lastPos.x, p.values[1] + this._lastPos.y, p, 0);
-                    this._lastPos = { x: p.values[0] + this._lastPos.x, y: p.values[1] + this._lastPos.y };
-                    break;
-                case 'H':
-                    this._drawPathCircle(p.values[0], this._lastPos.y, p, 0);
-                    this._lastPos = { x: p.values[0], y: this._lastPos.y };
-                    break;
-                case 'h':
-                    this._drawPathCircle(p.values[0] + this._lastPos.x, this._lastPos.y, p, 0);
-                    this._lastPos = { x: p.values[0] + this._lastPos.x, y: this._lastPos.y };
-                    break;
-                case 'V':
-                    this._drawPathCircle(this._lastPos.x, p.values[0], p, 0);
-                    this._lastPos = { x: this._lastPos.x, y: p.values[0] };
-                    break;
-                case 'v':
-                    this._drawPathCircle(this._lastPos.x, p.values[0] + this._lastPos.y, p, 0);
-                    this._lastPos = { x: this._lastPos.x, y: p.values[0] + this._lastPos.y };
-                    break;
-                case 'Z':
-                    break;
-                case 'C':
-                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
-                    this._drawPathLine(p.values[4], p.values[5], p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
-                    this._drawPathCircle(p.values[4], p.values[5], p, 4);
-                    this._lastPos = { x: p.values[4], y: p.values[5] };
-                    break;
-                case 'c':
-                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
-                    this._drawPathLine(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
-                    this._drawPathCircle(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p, 4);
-                    this._lastPos = { x: p.values[4] + this._lastPos.x, y: p.values[5] + this._lastPos.y };
-                    break;
-                case 'S':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
-                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
-                    this._drawPathLine(p.values[0], p.values[1], p.values[2], p.values[3]);
-                    this._lastPos = { x: p.values[2], y: p.values[3] };
-                    break;
-                case 's':
-                    this._drawPathCircle(p.values[0] + this._lastPos.x, p.values[1] + this._lastPos.y, p, 0);
-                    this._drawPathCircle(p.values[2] + this._lastPos.x, p.values[3] + this._lastPos.y, p, 2);
-                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0] + this._lastPos.x, p.values[1] + this._lastPos.y);
-                    this._drawPathLine(p.values[0] + this._lastPos.x, p.values[1] + this._lastPos.y, p.values[2] + this._lastPos.x, p.values[3] + this._lastPos.y);
-                    this._lastPos = { x: p.values[2] + this._lastPos.x, y: p.values[3] + this._lastPos.y };
-                    break;
-                case 'Q':
-                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
-                    this._drawPathLine(p.values[0], p.values[1], p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
-                    this._lastPos = { x: p.values[2], y: p.values[3] };
-                    break;
-                case 'T':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._lastPos = { x: p.values[0], y: p.values[1] };
-                    break;
-                case 'A':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[5], p.values[6], p, 5);
-                    this._lastPos = { x: p.values[0], y: p.values[1] };
-                    break;
-            }
-        }
-    }
-    pointerEvent(event, circle, p, 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._originalPathPoint = { x: p.values[index], y: p.values[index + 1] };
-                this._parentCoordinates = this.extendedItem.element.parentElement.getBoundingClientRect();
-                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;
-                    const dx = cx - this._circlePos.x;
-                    const dy = cy - this._circlePos.y;
-                    if (event.shiftKey) {
-                        if (Math.abs(dx) >= Math.abs(dy)) {
-                            p.values[index] = this._originalPathPoint.x + dx;
-                            circle.setAttribute("cx", (this._circlePos.x + dx).toString());
-                            p.values[index + 1] = this._originalPathPoint.y;
-                            circle.setAttribute("cy", (this._circlePos.y).toString());
-                        }
-                        else {
-                            p.values[index] = this._originalPathPoint.x;
-                            circle.setAttribute("cx", (this._circlePos.x).toString());
-                            p.values[index + 1] = this._originalPathPoint.y + dy;
-                            circle.setAttribute("cy", (this._circlePos.y + dy).toString());
-                        }
-                    }
-                    else {
-                        p.values[index] = this._originalPathPoint.x + dx;
-                        p.values[index + 1] = this._originalPathPoint.y + dy;
-                        if (p.type == 'V' || p.type == 'v') {
-                            p.values[index] = this._originalPathPoint.x + dy;
-                            circle.setAttribute("cy", (this._circlePos.y + dy).toString());
-                        }
-                        else if (p.type == 'H' || p.type == 'h') {
-                            circle.setAttribute("cy", (this._circlePos.x + dx).toString());
-                        }
-                        else {
-                            circle.setAttribute("cx", (this._circlePos.x + dx).toString());
-                            circle.setAttribute("cy", (this._circlePos.y + dy).toString());
-                        }
-                    }
-                    this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this);
-                    this.extendedItem.element.setAttribute("d", createPathD(this._pathdata));
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                this._startPos = null;
-                this._circlePos = null;
-                this._lastPos = null;
-                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
-                if (getComputedStyle(this._pathElement.parentElement).position == "absolute") {
-                    let group = this.extendedItem.openGroup('rearrangeSvg');
-                    let dataPath = this._pathdata;
-                    this._rearrangeSvgElement();
-                    this._rearrangePointsFromElement(this._parentCoordinates, dataPath);
-                    group.commit();
-                }
-                break;
-        }
-    }
-    _drawPathCircle(x, y, p, 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();
-        let circlePos = { x: x, y: y };
-        const items = [];
-        const pidx = this._pathdata.indexOf(p);
-        items.push({
-            title: 'delete point', action: () => {
-                this._pathdata.splice(pidx, 1);
-                if (pidx == 0)
-                    this._pathdata[0].type = 'M';
-                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
-            }
-        });
-        items.push({
-            title: 'insert point after', action: () => {
-                const l = { type: 'L', values: [p.values[0], p.values[1]] };
-                this._pathdata.splice(pidx + 1, 0, l);
-                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
-            }
-        });
-        if (pidx != 0 && this._checkCircleIndex(p, circlePos)) {
-            items.push({
-                title: 'convert to quadratic bézier', action: () => {
-                    let p1x = this._pathdata[pidx - 1].values[0];
-                    let p1y = this._pathdata[pidx - 1].values[1];
-                    if (this._pathdata[pidx - 1].type === 'C') {
-                        p1x = this._pathdata[pidx - 1].values[4];
-                        p1y = this._pathdata[pidx - 1].values[5];
-                    }
-                    else if (this._pathdata[pidx - 1].type === 'Q') {
-                        p1x = this._pathdata[pidx - 1].values[2];
-                        p1y = this._pathdata[pidx - 1].values[3];
-                    }
-                    const p2x = this._pathdata[pidx].values[0];
-                    const p2y = this._pathdata[pidx].values[1];
-                    const mpx = (p2x + p1x) * 0.5;
-                    const mpy = (p2y + p1y) * 0.5;
-                    const theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;
-                    const offset = 50;
-                    const c1x = mpx + offset * Math.cos(theta);
-                    const c1y = mpy + offset * Math.sin(theta);
-                    this._pathdata[pidx].type = 'Q';
-                    this._pathdata[pidx].values[0] = c1x;
-                    this._pathdata[pidx].values[1] = c1y;
-                    this._pathdata[pidx].values[2] = p2x;
-                    this._pathdata[pidx].values[3] = p2y;
-                    this.extendedItem.setAttribute('d', createPathD(this._pathdata));
-                }
-            });
-        }
-        if (pidx != 0 && this._checkCircleIndex(p, circlePos)) {
-            items.push({
-                title: 'convert to cubic bézier', action: () => {
-                    let p1x = this._pathdata[pidx - 1].values[0];
-                    let p1y = this._pathdata[pidx - 1].values[1];
-                    if (this._pathdata[pidx - 1].type === 'C') {
-                        p1x = this._pathdata[pidx - 1].values[4];
-                        p1y = this._pathdata[pidx - 1].values[5];
-                    }
-                    else if (this._pathdata[pidx - 1].type === 'Q') {
-                        p1x = this._pathdata[pidx - 1].values[2];
-                        p1y = this._pathdata[pidx - 1].values[3];
-                    }
-                    const p2x = this._pathdata[pidx].values[0];
-                    const p2y = this._pathdata[pidx].values[1];
-                    const mpx = (p2x + p1x) * 0.5;
-                    const mpy = (p2y + p1y) * 0.5;
-                    const theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;
-                    const offset = 50;
-                    let c1x = mpx + offset * Math.cos(theta);
-                    let c1y = mpy + offset * Math.sin(theta);
-                    c1x = p.values[0] + 2 * (p1x - p.values[0]) / 3;
-                    c1y = p.values[1] + 2 * (p1y - p.values[1]) / 3;
-                    const c2x = x + 2 * (p1x - x) / 3;
-                    const c2y = y + 2 * (p1y - y) / 3;
-                    this._pathdata[pidx].type = 'C';
-                    this._pathdata[pidx].values[0] = c1x;
-                    this._pathdata[pidx].values[1] = c1y;
-                    this._pathdata[pidx].values[2] = c2x;
-                    this._pathdata[pidx].values[3] = c2y;
-                    this._pathdata[pidx].values[4] = p2x;
-                    this._pathdata[pidx].values[5] = p2y;
-                    this.extendedItem.setAttribute('d', createPathD(this._pathdata));
-                }
-            });
-        }
-        circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, p, index));
-        circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, p, index));
-        circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, p, index));
-        circle.addEventListener(EventNames.ContextMenu, event => {
-            event.preventDefault();
-            ContextMenu.show(items, event);
-        });
-    }
-    _drawPathLine(x1, y1, x2, y2) {
-        this._drawLine((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x1, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y1, (this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x2, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y2, 'svg-path-line');
-    }
-    _checkCircleIndex(p, circlePos) {
-        switch (p.type) {
-            case 'M':
-            case 'L':
-                if (p.values[0] == circlePos.x && p.values[1] == circlePos.y)
-                    return true;
-                break;
-            case 'Q':
-                if (p.values[2] == circlePos.x && p.values[3] == circlePos.y)
-                    return true;
-                break;
-            case 'C':
-                if (p.values[4] == circlePos.x && p.values[5] == circlePos.y)
-                    return true;
-                break;
-        }
-        return false;
-    }
-    _rearrangeSvgElement() {
-        let newElementCoords = this.extendedItem.element.getBoundingClientRect();
-        let parentLeft = (newElementCoords.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor - this._offsetSvg;
-        let parentTop = (newElementCoords.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - this._offsetSvg;
-        let heightSvgElement = newElementCoords.height / this.designerCanvas.scaleFactor + (2 * this._offsetSvg);
-        let widthSvgElement = newElementCoords.width / this.designerCanvas.scaleFactor + (2 * this._offsetSvg);
-        this.extendedItem.element.parentElement.style.setProperty("left", parentLeft.toString() + "px");
-        this.extendedItem.element.parentElement.style.setProperty("top", parentTop.toString() + "px");
-        this.extendedItem.element.parentElement.style.setProperty("height", Math.round(heightSvgElement).toString() + "px");
-        this.extendedItem.element.parentElement.style.setProperty("width", Math.round(widthSvgElement).toString() + "px");
-    }
-    _rearrangePointsFromElement(oldParentCoords, pathData) {
-        let newParentCoords = this.extendedItem.element.parentElement.getBoundingClientRect();
-        let diffX = (oldParentCoords.x - newParentCoords.x) / this.designerCanvas.scaleFactor - this._deltaScrollOffset.x;
-        let diffY = (oldParentCoords.y - newParentCoords.y) / this.designerCanvas.scaleFactor - this._deltaScrollOffset.y;
-        for (let i = 0; i < pathData.length; i++) {
-            pathData[i].values[0] = pathData[i].values[0] + diffX;
-            pathData[i].values[1] = pathData[i].values[1] + diffY;
-        }
-        this.extendedItem.element.setAttribute("d", createPathD(this._pathdata));
-    }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

package/dist/elements/widgets/designerView/extensions/svg/PathExtensionProvider.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 PathExtensionProvider 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/PathExtensionProvider.js

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

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

@@ -1,49 +0,0 @@
-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 {
-    private _parentRect;
-    private _rectElement;
-    private _circlePos;
-    private _startPos;
-    private _lastPos;
-    private _originalPoint;
-    private _x;
-    private _y;
-    private _w;
-    private _h;
-    private _circle1;
-    private _circle2;
-    private _circle3;
-    private _circle4;
-    private _startScrollOffset;
-    private _deltaScrollOffset;
-    private _rect;
-    private _parentCoordinates;
-    private _offsetSvg;
-    private _circleMoved;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    pointerEvent(event: PointerEvent, circle: SVGCircleElement, r: SVGRectElement, index: number): void;
-    _drawPathCircle(x: number, y: number, r: SVGRectElement, index: number): SVGCircleElement;
-    _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;
-    refresh(): void;
-    dispose(): void;
-}

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

@@ -1,211 +0,0 @@
-import { EventNames } from '../../../../../enums/EventNames.js';
-import { AbstractExtension } from '../AbstractExtension.js';
-export class RectExtension extends AbstractExtension {
-    _parentRect;
-    _rectElement;
-    _circlePos;
-    _startPos;
-    _lastPos;
-    _originalPoint;
-    _x;
-    _y;
-    _w;
-    _h;
-    _circle1;
-    _circle2;
-    _circle3;
-    _circle4;
-    _startScrollOffset;
-    _deltaScrollOffset;
-    _rect = { x: 0, y: 0, w: 0, h: 0 };
-    _parentCoordinates;
-    _offsetSvg = 10.0;
-    _circleMoved;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
-        this._rectElement = this.extendedItem.node;
-        this._startScrollOffset = this.designerCanvas.canvasOffset;
-        this._x = this._rectElement.x.baseVal.value;
-        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);
-    }
-    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(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;
-    }
-    _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());
-    }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

package/dist/elements/widgets/designerView/extensions/svg/RectExtensionProvider.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.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/overlay/EditTextOverlay.d.ts

@@ -1,5 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-}

package/dist/elements/widgets/designerView/overlay/EditTextOverlay.js

@@ -1,9 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-export class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
-    static style = css ``;
-    static template = html `
-    <div>
-      <input type="text">
-    </div>
-  `;
-}