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

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

@@ -0,0 +1,183 @@
+import { EventNames } from '../../../../../enums/EventNames.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+export class EllipsisExtension extends AbstractExtension {
+    _parentRect;
+    _ellipseElement;
+    _circlePos;
+    _startPos;
+    _lastPos;
+    _originalPoint;
+    _cx;
+    _cy;
+    _rx;
+    _ry;
+    _newRx;
+    _newRy;
+    _circle1;
+    _circle2;
+    _circle3;
+    _circle4;
+    _startScrollOffset;
+    _deltaScrollOffset;
+    _parentCoordinates;
+    _offsetSvg = 10.0;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
+        this._ellipseElement = this.extendedItem.node;
+        this._startScrollOffset = this.designerCanvas.canvasOffset;
+        this._cx = this._ellipseElement.cx.baseVal.value;
+        this._cy = this._ellipseElement.cy.baseVal.value;
+        this._rx = this._ellipseElement.rx.baseVal.value;
+        this._ry = this._ellipseElement.ry.baseVal.value;
+        this._circle1 = this._drawPathCircle(this._cx, this._cy - this._ry, this._ellipseElement, 0);
+        this._circle2 = this._drawPathCircle(this._cx + this._rx, this._cy, this._ellipseElement, 1);
+        this._circle3 = this._drawPathCircle(this._cx, this._cy + this._ry, this._ellipseElement, 2);
+        this._circle4 = this._drawPathCircle(this._cx - this._rx, this._cy, this._ellipseElement, 3);
+    }
+    pointerEvent(event, circle, e, 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._rx, y: this._ry };
+                this._parentCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._ellipseElement.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;
+                    switch (index) {
+                        case 0:
+                            this._newRx = this._originalPoint.x;
+                            this._newRy = Math.abs(this._originalPoint.y - dy);
+                            circle.setAttribute("cy", (this._circlePos.y + dy).toString());
+                            break;
+                        case 1:
+                            this._newRx = Math.abs(this._originalPoint.x + dx);
+                            this._newRy = this._originalPoint.y;
+                            circle.setAttribute("cx", (this._circlePos.x + dx).toString());
+                            break;
+                        case 2:
+                            this._newRx = this._originalPoint.x;
+                            this._newRy = Math.abs(this._originalPoint.y + dy);
+                            circle.setAttribute("cy", (this._circlePos.y + dy).toString());
+                            break;
+                        case 3:
+                            this._newRx = Math.abs(this._originalPoint.x - dx);
+                            this._newRy = this._originalPoint.y;
+                            circle.setAttribute("cx", (this._circlePos.x + dx).toString());
+                            break;
+                    }
+                    e.setAttribute("rx", this._newRx.toString());
+                    e.setAttribute("ry", this._newRy.toString());
+                    this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this);
+                    this._redrawPathCircle(this._cx, this._cy - this._newRy, this._circle1);
+                    this._redrawPathCircle(this._cx + this._newRx, this._cy, this._circle2);
+                    this._redrawPathCircle(this._cx, this._cy + this._newRy, this._circle3);
+                    this._redrawPathCircle(this._cx - this._newRx, this._cy, this._circle4);
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                this._startPos = null;
+                this._circlePos = null;
+                this._originalPoint = null;
+                if (this._newRx && this._newRy) {
+                    this.extendedItem.setAttribute("rx", this._newRx.toString());
+                    this.extendedItem.setAttribute("ry", this._newRy.toString());
+                }
+                if (getComputedStyle(this._ellipseElement.parentElement).position == "absolute") {
+                    let group = this.extendedItem.openGroup('rearrangeSvg');
+                    let newEllipseCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._ellipseElement);
+                    let newEllipseCoordinatesCloud = this._getPointsFromEllipse(newEllipseCoordinates);
+                    let newEllipseExtrema = this._getMinMaxValues(newEllipseCoordinatesCloud);
+                    this._rearrangeSvgParent(newEllipseExtrema);
+                    this._rearrangePointsFromElement(this._parentCoordinates);
+                    group.commit();
+                }
+                break;
+        }
+    }
+    _drawPathCircle(x, y, e, 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, 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;
+    }
+    _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;
+    }
+    _getPointsFromEllipse(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 <= 7) {
+                extrema.yMax = coords[i];
+            }
+        }
+        return extrema;
+    }
+    _rearrangeSvgParent(newEllipseExtrema) {
+        let parentLeft = newEllipseExtrema.xMin - this._offsetSvg;
+        let parentTop = newEllipseExtrema.yMin - this._offsetSvg;
+        let widthEllipseElement = newEllipseExtrema.xMax - newEllipseExtrema.xMin + (2 * this._offsetSvg);
+        let heightEllipseElement = newEllipseExtrema.yMax - newEllipseExtrema.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(heightEllipseElement).toString() + "px");
+        this.extendedItem.parent.setStyle("width", Math.round(widthEllipseElement).toString() + "px");
+    }
+    _rearrangePointsFromElement(oldParentCoords) {
+        let newParentCoords = this.designerCanvas.getNormalizedElementCoordinates(this._ellipseElement.parentElement);
+        let diffX = oldParentCoords.x - newParentCoords.x;
+        let diffY = oldParentCoords.y - newParentCoords.y;
+        this.extendedItem.setAttribute('cx', (this._ellipseElement.cx.baseVal.value + diffX).toString());
+        this.extendedItem.setAttribute('cy', (this._ellipseElement.cy.baseVal.value + diffY).toString());
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

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

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

@@ -0,0 +1,32 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+import { IRect } from '../../../../../interfaces/IRect.js';
+export declare class LineExtension extends AbstractExtension {
+    private _parentRect;
+    private _lineElement;
+    private _circlePos;
+    private _startPos;
+    private _lastPos;
+    private _originalPoint;
+    private _newLinePoint;
+    private _newCirclePoint;
+    private _parentCoordinates;
+    private _offsetSvg;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    pointerEvent(event: PointerEvent, circle: SVGCircleElement, l: SVGLineElement, index: number): void;
+    _drawPathCircle(x: number, y: number, l: SVGLineElement, index: number): void;
+    _getPointsFromRect(elementCoords: IRect): number[];
+    _getMinMaxValues(coords: any): {
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+    };
+    _rearrangeSvgParent(newLineExtrema: any): void;
+    _rearrangePointsFromElement(oldParentCoords: IRect): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,147 @@
+import { EventNames } from '../../../../../enums/EventNames.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+export class LineExtension extends AbstractExtension {
+    _parentRect;
+    _lineElement;
+    _circlePos;
+    _startPos;
+    _lastPos;
+    _originalPoint;
+    _newLinePoint;
+    _newCirclePoint;
+    _parentCoordinates;
+    _offsetSvg = 10.0;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
+        this._lineElement = this.extendedItem.node;
+        const x1 = this._lineElement.x1.baseVal.value;
+        const y1 = this._lineElement.y1.baseVal.value;
+        const x2 = this._lineElement.x2.baseVal.value;
+        const y2 = this._lineElement.y2.baseVal.value;
+        this._drawPathCircle(x1, y1, this._lineElement, 1);
+        this._drawPathCircle(x2, y2, this._lineElement, 2);
+    }
+    pointerEvent(event, circle, l, 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: parseFloat(l.getAttribute("x" + index)), y: parseFloat(l.getAttribute("y" + index)) };
+                this._parentCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._lineElement.parentElement);
+                break;
+            case EventNames.PointerMove:
+                if (this._startPos && event.buttons > 0) {
+                    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)) {
+                            this._newCirclePoint = { x: this._circlePos.x + dx, y: this._circlePos.y };
+                            this._newLinePoint = { x: this._originalPoint.x + dx, y: this._originalPoint.y };
+                        }
+                        else {
+                            this._newCirclePoint = { x: this._circlePos.x, y: this._circlePos.y + dy };
+                            this._newLinePoint = { x: this._originalPoint.x, y: this._originalPoint.y + dy };
+                        }
+                    }
+                    else {
+                        this._newCirclePoint = { x: this._circlePos.x + dx, y: this._circlePos.y + dy };
+                        this._newLinePoint = { x: this._originalPoint.x + dx, y: this._originalPoint.y + dy };
+                    }
+                    this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this);
+                    circle.setAttribute("cx", this._newCirclePoint.x.toString());
+                    circle.setAttribute("cy", this._newCirclePoint.y.toString());
+                    l.setAttribute("x" + index, this._newLinePoint.x.toString());
+                    l.setAttribute("y" + index, this._newLinePoint.y.toString());
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                this._startPos = null;
+                this._circlePos = null;
+                this._lastPos = null;
+                this._originalPoint = null;
+                this.extendedItem.setAttribute('x' + index, this._newLinePoint.x.toString());
+                this.extendedItem.setAttribute('y' + index, this._newLinePoint.y.toString());
+                if (getComputedStyle(this._lineElement.parentElement).position == "absolute") {
+                    let group = this.extendedItem.openGroup('rearrangeSvg');
+                    let newLineCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._lineElement);
+                    let newLineCoordinatesCloud = this._getPointsFromRect(newLineCoordinates);
+                    let newLineExtrema = this._getMinMaxValues(newLineCoordinatesCloud);
+                    this._rearrangeSvgParent(newLineExtrema);
+                    this._rearrangePointsFromElement(this._parentCoordinates);
+                    group.commit();
+                }
+                break;
+        }
+    }
+    _drawPathCircle(x, y, l, 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, l, index));
+        circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, l, index));
+        circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, l, index));
+    }
+    _getPointsFromRect(elementCoords) {
+        let Coords = [];
+        Coords.push(elementCoords.x);
+        Coords.push(elementCoords.x + elementCoords.width);
+        Coords.push(elementCoords.y);
+        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 <= 1) {
+                extrema.xMin = coords[i];
+            }
+            else if (coords[i] < coords[i + 1] && i > 1 && i <= 3) {
+                extrema.yMin = coords[i];
+            }
+            if (coords[i] > coords[i + 1] && i <= 1) {
+                extrema.xMax = coords[i];
+            }
+            else if (coords[i] > coords[i + 1] && i > 1 && i <= 3) {
+                extrema.yMax = coords[i];
+            }
+        }
+        return extrema;
+    }
+    _rearrangeSvgParent(newLineExtrema) {
+        let parentLeft = newLineExtrema.xMin - this._offsetSvg;
+        let parentTop = newLineExtrema.yMin - this._offsetSvg;
+        let widthLineElement = newLineExtrema.xMax - newLineExtrema.xMin + (2 * this._offsetSvg);
+        let heightLineElement = newLineExtrema.yMax - newLineExtrema.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(heightLineElement).toString() + "px");
+        this.extendedItem.parent.setStyle("width", Math.round(widthLineElement).toString() + "px");
+    }
+    _rearrangePointsFromElement(oldParentCoords) {
+        let newParentCoords = this.designerCanvas.getNormalizedElementCoordinates(this._lineElement.parentElement);
+        let diffX = oldParentCoords.x - newParentCoords.x;
+        let diffY = oldParentCoords.y - newParentCoords.y;
+        this.extendedItem.setAttribute('x1', (this._lineElement.x1.baseVal.value + diffX).toString());
+        this.extendedItem.setAttribute('y1', (this._lineElement.y1.baseVal.value + diffY).toString());
+        this.extendedItem.setAttribute('x2', (this._lineElement.x2.baseVal.value + diffX).toString());
+        this.extendedItem.setAttribute('y2', (this._lineElement.y2.baseVal.value + diffY).toString());
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

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

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

@@ -0,0 +1,31 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import "../../../../helper/PathDataPolyfill.js";
+import { IPoint } from '../../../../../interfaces/IPoint.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+import { PathData } from '../../../../helper/PathDataPolyfill.js';
+import { IRect } from '../../../../../interfaces/IRect.js';
+export declare class PathExtension extends AbstractExtension {
+    private _lastPos;
+    private _parentRect;
+    private _startPos;
+    private _circlePos;
+    private _originalPathPoint;
+    private _pathdata;
+    private _offsetSvg;
+    private _pathElement;
+    private _parentCoordinates;
+    private _startScrollOffset;
+    private _deltaScrollOffset;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
+    _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
+    _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
+    _checkCircleIndex(p: PathData, circlePos: IPoint): boolean;
+    _rearrangeSvgElement(): void;
+    _rearrangePointsFromElement(oldParentCoords: IRect, pathData: PathData[]): void;
+    refresh(): void;
+    dispose(): void;
+}