@node-projects/web-component-designer 0.0.119 → 0.0.121

package/dist/elements/helper/PathDataPolyfill.js

@@ -944,34 +944,11 @@ export function moveSVGPath(path, xFactor, yFactor) {
 export function createPathD(path) {
     let pathD = "";
     for (let p of path) {
-        switch (p.type) {
-            case 'M':
-                pathD += p.type + p.values[0] + " " + p.values[1];
-                break;
-            case 'L':
-                pathD += p.type + p.values[0] + " " + p.values[1];
-                break;
-            case 'H':
-                break;
-            case 'V':
-                break;
-            case 'Z':
-                pathD += p.type;
-                break;
-            case 'C':
-            case 'c':
-                pathD += p.type + p.values[0] + " " + p.values[1] + " " + p.values[2] + " " + p.values[3] + " " + p.values[4] + " " + p.values[5];
-                break;
-            case 'S':
-                break;
-            case 'Q':
-            case 'q':
-                pathD += p.type + p.values[0] + " " + p.values[1] + " " + p.values[2] + " " + p.values[3];
-                break;
-            case 'T':
-                break;
-            case 'A':
-                break;
+        pathD += p.type + " ";
+        for (var i = 0; i < p.values.length; i++) {
+            if (p.values[i] != null && !isNaN(p.values[i])) {
+                pathD += p.values[i] + " ";
+            }
         }
     }
     return pathD;

package/dist/elements/helper/contextMenu/ContextMenuHelper.js

@@ -133,12 +133,17 @@ export class ContextMenuHelper {
         let ul = document.createElement('ul');
         ul.className = 'context-menu__items';
         nav.appendChild(ul);
+        let lastWasSeperator = false;
         for (let i of items) {
             if (i.title == '-') {
-                let hr = document.createElement('hr');
-                ul.appendChild(hr);
+                if (!lastWasSeperator) {
+                    let hr = document.createElement('hr');
+                    ul.appendChild(hr);
+                    lastWasSeperator = true;
+                }
             }
             else {
+                lastWasSeperator = false;
                 let li = document.createElement('li');
                 li.className = 'context-menu__item';
                 let div = document.createElement('div');

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -14,7 +14,7 @@ import { GridExtensionProvider } from '../widgets/designerView/extensions/GridEx
 import { TransformOriginExtensionProvider } from '../widgets/designerView/extensions/TransformOriginExtensionProvider.js';
 import { CanvasExtensionProvider } from '../widgets/designerView/extensions/CanvasExtensionProvider.js';
 import { PositionExtensionProvider } from '../widgets/designerView/extensions/PositionExtensionProvider.js';
-import { PathExtensionProvider } from '../widgets/designerView/extensions/PathExtensionProvider.js';
+import { PathExtensionProvider } from '../widgets/designerView/extensions/svg/PathExtensionProvider.js';
 import { MouseOverExtensionProvider } from '../widgets/designerView/extensions/MouseOverExtensionProvider.js';
 import { NamedTools } from '../widgets/designerView/tools/NamedTools.js';
 import { PointerTool } from '../widgets/designerView/tools/PointerTool.js';
@@ -64,6 +64,9 @@ import { DrawToolButtonProvider } from '../widgets/designerView/tools/toolBar/bu
 import { TextToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js';
 import { SelectorToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js';
 import { GrayOutDragOverContainerExtensionProvider } from '../widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js';
+import { LineExtensionProvider } from '../widgets/designerView/extensions/svg/LineExtensionProvider.js';
+import { RectExtentionProvider } from '../widgets/designerView/extensions/svg/RectExtensionProvider.js';
+import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/svg/EllipsisExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -95,7 +98,10 @@ export function createDefaultServiceContainer() {
         new TransformOriginExtensionProvider(),
         new CanvasExtensionProvider(),
         new PositionExtensionProvider(),
+        new EllipsisExtensionProvider(),
+        new LineExtensionProvider(),
         new PathExtensionProvider(),
+        new RectExtentionProvider(),
         new ResizeExtensionProvider(true),
         new RotateExtensionProvider(),
     ]);

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -6,12 +6,14 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
     _conditionalyWriteIndent(indentedTextWriter, designItem) {
         if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
             (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
-            (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))))
+            (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) ||
+            (designItem.element instanceof SVGElement))
             indentedTextWriter.writeIndent();
     }
     _conditionalyWriteNewline(indentedTextWriter, designItem) {
         if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
-            (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)))
+            (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)) ||
+            (designItem.element instanceof SVGElement))
             indentedTextWriter.writeNewline();
     }
     write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
@@ -48,7 +50,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                     this.writeTextNode(indentedTextWriter, designItem, false);
                 }
                 else {
-                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
+                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element) || (designItem.element instanceof SVGElement)) {
                         indentedTextWriter.writeNewline();
                         indentedTextWriter.levelRaise();
                     }
@@ -56,9 +58,10 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                         this.internalWrite(indentedTextWriter, c, options, designItemsAssignmentList);
                         let childSingleTextNode = c.childCount === 1 && c.firstChild.nodeType === NodeType.TextNode;
                         if (childSingleTextNode)
-                            indentedTextWriter.writeNewline();
+                            if (!indentedTextWriter.isLastCharNewline())
+                                indentedTextWriter.writeNewline();
                     }
-                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
+                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element) || (designItem.element instanceof SVGElement)) {
                         indentedTextWriter.levelShrink();
                         if (!indentedTextWriter.isLastCharNewline())
                             indentedTextWriter.writeNewline();
@@ -73,7 +76,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             if (!DomConverter.IsSelfClosingElement(designItem.name))
                 indentedTextWriter.write('</' + designItem.name + '>');
             //if (!contentSingleTextNode)
-            this._conditionalyWriteNewline(indentedTextWriter, designItem);
+            if (!indentedTextWriter.isLastCharNewline())
+                this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
         if (designItemsAssignmentList) {
             designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -319,9 +319,26 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     async handlePasteCommand() {
         const designItems = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
+        let pasteContainer = this.rootDesignItem;
+        let pCon = this.instanceServiceContainer.selectionService.primarySelection;
+        while (pCon != null) {
+            const containerStyle = getComputedStyle(pCon.element);
+            let newContainerService;
+            newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(pCon, containerStyle));
+            if (newContainerService) {
+                if (newContainerService.canEnter(pCon, designItems)) {
+                    pasteContainer = pCon;
+                    break;
+                }
+                else {
+                    pCon = pCon.parent;
+                    continue;
+                }
+            }
+        }
         if (designItems) {
             for (let di of designItems) {
-                this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
+                this.instanceServiceContainer.undoService.execute(new InsertAction(pasteContainer, pasteContainer.childCount, di));
             }
             const intializationService = this.serviceContainer.intializationService;
             if (intializationService) {

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

@@ -7,6 +7,8 @@ export class ResizeExtensionProvider {
         this.resizeAllSelected = resizeAllSelected;
     }
     shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.element instanceof SVGElement)
+            return false;
         return designItem.nodeType == NodeType.Element;
     }
     getExtension(extensionManager, designerView, designItem) {

package/dist/elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js

@@ -5,7 +5,7 @@ export class SelectAllChildrenContextMenu {
     }
     provideContextMenuItems(event, designerCanvas, designItem) {
         return [{
-                title: 'Select all Children', action: () => {
+                title: 'select all Children', action: () => {
                     designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(Array.from(designItem.children()).filter(x => x.nodeType == NodeType.Element));
                 }
             }];

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

@@ -0,0 +1,29 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { AbstractExtension } from "../AbstractExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EllipsisExtension extends AbstractExtension {
+    private _parentRect;
+    private _ellipseElement;
+    private _circlePos;
+    private _startPos;
+    private _lastPos;
+    private _originalPoint;
+    private _cx;
+    private _cy;
+    private _rx;
+    private _ry;
+    private _newRx;
+    private _newRy;
+    private _circle1;
+    private _circle2;
+    private _circle3;
+    private _circle4;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    pointerEvent(event: PointerEvent, circle: SVGCircleElement, e: SVGEllipseElement, index: number): void;
+    _drawPathCircle(x: number, y: number, e: SVGEllipseElement, index: number): SVGCircleElement;
+    _redrawPathCircle(x: number, y: number, oldCircle: SVGCircleElement): SVGCircleElement;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,112 @@
+import { EventNames } from "../../../../../enums/EventNames";
+import { AbstractExtension } from "../AbstractExtension";
+export class EllipsisExtension extends AbstractExtension {
+    _parentRect;
+    _ellipseElement;
+    _circlePos;
+    _startPos;
+    _lastPos;
+    _originalPoint;
+    _cx;
+    _cy;
+    _rx;
+    _ry;
+    _newRx;
+    _newRy;
+    _circle1;
+    _circle2;
+    _circle3;
+    _circle4;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
+        this._ellipseElement = this.extendedItem.node;
+        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 };
+                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;
+                    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._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;
+                this.extendedItem.setAttribute("rx", this._newRx.toString());
+                this.extendedItem.setAttribute("ry", this._newRy.toString());
+                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._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
+        circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        return circle;
+    }
+    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";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+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,12 @@
+import { EllipsisExtension } from "./EllipsisExtension";
+export class EllipsisExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.node instanceof SVGEllipseElement) {
+            return true;
+        }
+        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,20 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { AbstractExtension } from "../AbstractExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class LineExtension extends AbstractExtension {
+    private _parentRect;
+    private _lineElement;
+    private _circlePos;
+    private _startPos;
+    private _lastPos;
+    private _originalPoint;
+    private _newLinePoint;
+    private _newCirclePoint;
+    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;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,87 @@
+import { EventNames } from "../../../../../enums/EventNames";
+import { AbstractExtension } from "../AbstractExtension";
+export class LineExtension extends AbstractExtension {
+    _parentRect;
+    _lineElement;
+    _circlePos;
+    _startPos;
+    _lastPos;
+    _originalPoint;
+    _newLinePoint;
+    _newCirclePoint;
+    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)) };
+                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 };
+                    }
+                    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());
+                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));
+    }
+    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";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+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,12 @@
+import { LineExtension } from "./LineExtension";
+export class LineExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.node instanceof SVGLineElement) {
+            return true;
+        }
+        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,23 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { AbstractExtension } from "../AbstractExtension";
+import "../../../../helper/PathDataPolyfill";
+import { IPoint } from "../../../../../interfaces/IPoint";
+import { IExtensionManager } from "../IExtensionManger";
+import { PathData } from "../../../../helper/PathDataPolyfill";
+export declare class PathExtension extends AbstractExtension {
+    private _lastPos;
+    private _parentRect;
+    private _startPos;
+    private _circlePos;
+    private _originalPathPoint;
+    private _pathdata;
+    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;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,286 @@
+import { AbstractExtension } from "../AbstractExtension";
+import "../../../../helper/PathDataPolyfill";
+import { EventNames } from "../../../../../enums/EventNames";
+import { createPathD } from "../../../../helper/PathDataPolyfill";
+import { ContextMenuHelper } from "../../../../helper/contextMenu/ContextMenuHelper";
+export class PathExtension extends AbstractExtension {
+    _lastPos;
+    _parentRect;
+    _startPos;
+    _circlePos;
+    _originalPathPoint;
+    _pathdata;
+    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._lastPos = { 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] };
+                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)) {
+                            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.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));
+                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();
+            ContextMenuHelper.showContextMenu(null, event, null, items);
+        });
+    }
+    _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;
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,9 @@
+import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+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

@@ -0,0 +1,12 @@
+import { PathExtension } from "./PathExtension";
+export class PathExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.node instanceof SVGPathElement) {
+            return true;
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new PathExtension(extensionManager, designerView, designItem);
+    }
+}

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

@@ -0,0 +1,34 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { AbstractExtension } from "../AbstractExtension";
+import { IExtensionManager } from "../IExtensionManger";
+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 _rect;
+    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;
+    };
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,137 @@
+import { EventNames } from "../../../../../enums/EventNames";
+import { AbstractExtension } from "../AbstractExtension";
+export class RectExtension extends AbstractExtension {
+    _parentRect;
+    _rectElement;
+    _circlePos;
+    _startPos;
+    _lastPos;
+    _originalPoint;
+    _x;
+    _y;
+    _w;
+    _h;
+    _circle1;
+    _circle2;
+    _circle3;
+    _circle4;
+    _rect = { x: 0, y: 0, w: 0, h: 0 };
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
+        this._rectElement = this.extendedItem.node;
+        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 };
+                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;
+                    let dx = cx - this._circlePos.x;
+                    let dy = cy - this._circlePos.y;
+                    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._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;
+                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());
+                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._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + 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;
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,9 @@
+import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+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

@@ -0,0 +1,12 @@
+import { RectExtension } from "./RectExtension";
+export class RectExtentionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.node instanceof SVGRectElement) {
+            return true;
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new RectExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/tools/DrawPathTool.js

@@ -22,7 +22,7 @@ export class DrawPathTool {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        const offset = 50;
+        const offset = 10;
         switch (event.type) {
             case EventNames.PointerDown:
                 this._eventStarted = true;
@@ -30,7 +30,7 @@ export class DrawPathTool {
                     event.target.setPointerCapture(event.pointerId);
                     designerCanvas.captureActiveTool(this);
                     this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                    this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
+                    this._pathD = "M " + currentPoint.x + " " + currentPoint.y + " ";
                     this._path.setAttribute("d", this._pathD);
                     this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
                     this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
@@ -55,7 +55,7 @@ export class DrawPathTool {
                 if (!this._p2pMode) {
                     this._dragMode = true;
                     if (this._path) {
-                        this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                        this._pathD += "L " + currentPoint.x + " " + currentPoint.y + " ";
                         this._path.setAttribute("d", this._pathD);
                     }
                 }
@@ -65,7 +65,7 @@ export class DrawPathTool {
                         if (event.shiftKey) {
                             straightLine = straightenLine(this._lastPoint, currentPoint);
                         }
-                        this._path.setAttribute("d", this._pathD + "L" + straightLine.x + " " + straightLine.y);
+                        this._path.setAttribute("d", this._pathD + "L " + straightLine.x + " " + straightLine.y) + " ";
                     }
                 }
                 break;
@@ -77,12 +77,12 @@ export class DrawPathTool {
                     if (this._path) {
                         if (event.shiftKey) {
                             let straightLine = straightenLine(this._lastPoint, currentPoint);
-                            this._pathD += "L" + straightLine.x + " " + straightLine.y;
+                            this._pathD += "L " + straightLine.x + " " + straightLine.y + " ";
                             this._path.setAttribute("d", this._pathD);
                             this._lastPoint = straightLine;
                         }
                         else {
-                            this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                            this._pathD += "L " + currentPoint.x + " " + currentPoint.y + " ";
                             this._path.setAttribute("d", this._pathD);
                             this._lastPoint = currentPoint;
                         }
@@ -96,19 +96,19 @@ export class DrawPathTool {
                     this._pointerMoved = false;
                     this._samePoint = false;
                     this._dragMode = false;
-                    const rect = this._path.getBoundingClientRect();
+                    let coords = designerCanvas.getNormalizedElementCoordinates(this._path);
                     designerCanvas.overlayLayer.removeOverlay(this._path);
                     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                    const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
-                    const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
+                    const mvX = coords.x - offset;
+                    const mvY = coords.y - offset;
                     const d = moveSVGPath(this._path, mvX, mvY);
                     this._path.setAttribute("d", d);
                     svg.appendChild(this._path);
                     svg.style.left = (mvX) + 'px';
                     svg.style.top = (mvY) + 'px';
                     svg.style.position = 'absolute';
-                    svg.style.width = (rect.width + 2 * offset) + 'px';
-                    svg.style.height = (rect.height + 2 * offset) + 'px';
+                    svg.style.width = (coords.width + 2 * offset) + 'px';
+                    svg.style.height = (coords.height + 2 * offset) + 'px';
                     svg.style.overflow = 'visible';
                     //designerView.rootDesignItem.element.appendChild(svg);
                     this._path = null;

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js

@@ -30,7 +30,7 @@ export class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppe
         this.tools = tools;
         this._img = this._getDomElement('img');
         this._div = this._getDomElement('div');
-        this._img.onclick = () => {
+        this._div.onclick = () => {
             if (this.popup) {
                 this.getRootNode().host.showPopup(this);
             }

package/dist/index.d.ts

@@ -153,8 +153,8 @@ export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/PathExtension.js";
-export * from "./elements/widgets/designerView/extensions/PathExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
+export * from "./elements/widgets/designerView/extensions/svg/PathExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtension.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ElementDragTitleExtension.js";

package/dist/index.js

@@ -111,8 +111,8 @@ export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/PathExtension.js";
-export * from "./elements/widgets/designerView/extensions/PathExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
+export * from "./elements/widgets/designerView/extensions/svg/PathExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtension.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ElementDragTitleExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,7 +13,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.9.2",
+    "@node-projects/base-custom-webcomponent": "^0.10.1",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
@@ -27,11 +27,11 @@
     "codemirror": "^6.0.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.1.1",
+    "jest": "^29.1.2",
     "jquery": "^3.6.1",
     "jquery.fancytree": "^2.38.2",
     "monaco-editor": "^0.34.0",
-    "ts-jest": "^29.0.2",
+    "ts-jest": "^29.0.3",
     "typescript": "^4.8.4",
     "typescript-lit-html-plugin": "^0.9.0"
   },