@node-projects/web-component-designer 0.0.80 → 0.0.84

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

@@ -1,6 +1,8 @@
 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 {
     //private _itemRect: DOMRect;
     //private _svgRect: DOMRect;
@@ -17,7 +19,7 @@ export class PathExtension extends AbstractExtension {
         //this._itemRect = this.extendedItem.element.getBoundingClientRect();
         //this._svgRect = (<SVGGeometryElement>this.extendedItem.element).ownerSVGElement.getBoundingClientRect();
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
-        this._pathdata = this.extendedItem.node.getPathData({ normalize: true });
+        this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
         for (let p of this._pathdata) {
             switch (p.type) {
                 case 'M':
@@ -26,6 +28,7 @@ export class PathExtension extends AbstractExtension {
                     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 'H':
                     break;
@@ -52,17 +55,23 @@ export class PathExtension extends AbstractExtension {
                 case 'S':
                     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 '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;
             }
         }
@@ -103,7 +112,7 @@ export class PathExtension extends AbstractExtension {
                         circle.setAttribute("cx", (this._circlePos.x + dx).toString());
                         circle.setAttribute("cy", (this._circlePos.y + dy).toString());
                     }
-                    this.extendedItem.element.setAttribute("d", this._drawPath(this._pathdata, index));
+                    this.extendedItem.element.setAttribute("d", createPathD(this._pathdata));
                 }
                 break;
             case EventNames.PointerUp:
@@ -111,60 +120,124 @@ export class PathExtension extends AbstractExtension {
                 this._startPos = null;
                 this._circlePos = null;
                 this._lastPos = null;
-                this.extendedItem.setAttribute('d', this._drawPath(this._pathdata, index));
+                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
                 break;
         }
     }
-    _drawPath(path, index) {
-        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':
-                    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':
-                    break;
-                case 'T':
-                    break;
-                case 'A':
-                    break;
+    _drawPathCircle(x, y, p, index) {
+        let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 5, 'svg-path');
+        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));
+                }
+            });
         }
-        return pathD;
-        console.log(pathD);
-    }
-    _drawPathCircle(x, y, p, index) {
-        let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 3, 'svg-path');
         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 + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');
     }
-    _drawHelpLine(pStart, pEnd) {
-        let line;
-        line.setAttribute("stroke", "yellow");
-        line.setAttribute("stroke-width", "2");
-        line.setAttribute("x1", pStart.x.toString());
-        line.setAttribute("y1", pStart.y.toString());
-        line.setAttribute("x2", pEnd.x.toString());
-        line.setAttribute("y2", pEnd.y.toString());
+    _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();

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension copy.d.ts

@@ -0,0 +1,13 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class PrimarySelectionDefaultExtension extends AbstractExtension {
+    private _rect;
+    private _text;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    _drawMoveOverlay(itemRect: DOMRect): void;
+    refresh(): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension copy.js

@@ -0,0 +1,21 @@
+import { AbstractExtension } from './AbstractExtension';
+export class PrimarySelectionDefaultExtension extends AbstractExtension {
+    _rect;
+    _text;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    _drawMoveOverlay(itemRect) {
+    }
+    refresh() {
+        const boundRect = this.extendedItem.element.getBoundingClientRect();
+        this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
+        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider copy.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class PrimarySelectionDefaultExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider copy.js

@@ -0,0 +1,13 @@
+import { PrimarySelectionDefaultExtension } from "./PrimarySelectionDefaultExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class PrimarySelectionDefaultExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new PrimarySelectionDefaultExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-text-primary { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
+  `;
+}

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

@@ -19,6 +19,7 @@ export class ResizeExtension extends AbstractExtension {
         this.resizeAllSelected = resizeAllSelected;
     }
     extend() {
+        this.refresh();
     }
     refresh() {
         const rect = this.extendedItem.element.getBoundingClientRect();
@@ -69,9 +70,13 @@ export class ResizeExtension extends AbstractExtension {
                 this._initialPoint = currentPoint;
                 this._initialSizes = [];
                 this._actionModeStarted = actionMode;
-                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                    let rect = designItem.element.getBoundingClientRect();
-                    this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                let rect = this.extendedItem.element.getBoundingClientRect();
+                this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                if (this.resizeAllSelected) {
+                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                        rect = designItem.element.getBoundingClientRect();
+                        this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                    }
                 }
                 if (this.designerCanvas.alignOnSnap)
                     this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
@@ -90,6 +95,7 @@ export class ResizeExtension extends AbstractExtension {
                             this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
                             if (this.resizeAllSelected) {
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    i++;
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
                                         designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
@@ -100,6 +106,7 @@ export class ResizeExtension extends AbstractExtension {
                         case 's-resize':
                             this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
                             if (this.resizeAllSelected) {
+                                i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
@@ -110,6 +117,7 @@ export class ResizeExtension extends AbstractExtension {
                         case 'e-resize':
                             this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
                             if (this.resizeAllSelected) {
+                                i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';

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

@@ -1,12 +1,13 @@
 import { ResizeExtension } from "./ResizeExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
+import { NodeType } from "../../../item/NodeType.js";
 export class ResizeExtensionProvider {
     resizeAllSelected;
     constructor(resizeAllSelected = false) {
         this.resizeAllSelected = resizeAllSelected;
     }
     shouldExtend(extensionManager, designerView, designItem) {
-        return true;
+        return designItem.nodeType == NodeType.Element;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new ResizeExtension(extensionManager, designerView, designItem, this.resizeAllSelected);

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

@@ -22,35 +22,36 @@ export class TransformOriginExtension extends AbstractExtension {
     pointerEvent(event) {
         event.stopPropagation();
         const rect = this.extendedItem.element.getBoundingClientRect();
+        const rectNr = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element); //.getBoundingClientRect();
         const computed = getComputedStyle(this.extendedItem.element);
         const to = computed.transformOrigin.split(' ');
+        const normalized = this.designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
-                this._startPos = { x: event.x, y: event.y };
+                this._startPos = { x: normalized.x, y: normalized.y };
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
-                    const dx = event.x - this._startPos.x;
-                    const dy = event.y - this._startPos.y;
-                    this._circle.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
-                    this._circle2.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle2.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
+                    const dx = normalized.x - this._startPos.x;
+                    const dy = normalized.y - this._startPos.y;
+                    this._circle.setAttribute('cx', ((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')) + dx));
+                    this._circle.setAttribute('cy', ((rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')) + dy));
+                    this._circle2.setAttribute('cx', ((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')) + dx));
+                    this._circle2.setAttribute('cy', ((rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')) + dy));
                 }
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
                 if (this._startPos) {
-                    const dx = event.x - this._startPos.x;
-                    const dy = event.y - this._startPos.y;
+                    const dx = normalized.x - this._startPos.x;
+                    const dy = normalized.y - this._startPos.y;
                     const x = Number.parseFloat(to[0].replace('px', ''));
                     const y = Number.parseFloat(to[1].replace('px', ''));
                     const newX = (dx + x);
                     const newY = (dy + y);
-                    const przX = Math.round(newX / rect.width * 10000) / 100; //round to 2 decimal places
-                    const przY = Math.round(newY / rect.height * 10000) / 100;
-                    //this.extendedItem.setStyle('transform-origin',newX + 'px ' + newY + 'px');
+                    const przX = Math.round(newX / rectNr.width * 10000) / 100;
+                    const przY = Math.round(newY / rectNr.height * 10000) / 100;
                     this.extendedItem.setStyle('transform-origin', przX + '% ' + przY + '%');
                     this.refresh();
                     this._startPos = null;

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

@@ -8,7 +8,6 @@ export class CopyPasteContextMenu {
             { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); } },
             { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); } },
             { title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); } },
-            { title: '-' },
             { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); } },
             { title: '-' }
         ];

package/dist/elements/widgets/designerView/extensions/contextMenu/PathContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class PathContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

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

@@ -0,0 +1,31 @@
+import { createPathD } from "../../../../helper/PathDataPolyfill";
+export class PathContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        if (designItem.element instanceof SVGPathElement)
+            return true;
+        return false;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        const pathdata = designItem.node.getPathData({ normalize: true });
+        const items = [];
+        const lastType = pathdata[pathdata.length - 1].type;
+        items.push({ title: '-' });
+        if (lastType == 'z' || lastType == 'Z') {
+            items.push({
+                title: 'open path ', action: () => {
+                    pathdata.splice(pathdata.length - 1, 1);
+                    designItem.setAttribute('d', createPathD(pathdata));
+                }
+            });
+        }
+        else {
+            items.push({
+                title: 'close path ', action: () => {
+                    pathdata.push({ type: 'Z' });
+                    designItem.setAttribute('d', createPathD(pathdata));
+                }
+            });
+        }
+        return items;
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/RectContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class RectContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

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

@@ -0,0 +1,34 @@
+import { DeleteAction } from "../../../../..";
+import { DesignItem } from "../../../../item/DesignItem";
+import { InsertAction } from "../../../../services/undoService/transactionItems/InsertAction";
+export class RectContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        if (designItem.element instanceof SVGRectElement)
+            return true;
+        return false;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [
+            { title: '-' },
+            {
+                title: 'convert to path', action: () => {
+                    let rect = designItem.element;
+                    let pathD = "";
+                    pathD += "M" + rect.x.baseVal.value + " " + rect.y.baseVal.value +
+                        "L" + (rect.x.baseVal.value + rect.width.baseVal.value) + " " + rect.y.baseVal.value +
+                        "L" + (rect.x.baseVal.value + rect.width.baseVal.value) + " " + (rect.y.baseVal.value + rect.height.baseVal.value) +
+                        "L" + rect.x.baseVal.value + " " + (rect.y.baseVal.value + rect.height.baseVal.value) +
+                        "Z";
+                    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    path.setAttribute("d", pathD);
+                    path.setAttribute("stroke", rect.getAttribute("stroke"));
+                    path.setAttribute("fill", rect.getAttribute("fill"));
+                    path.setAttribute("stroke-width", rect.getAttribute("stroke-width"));
+                    const di = DesignItem.createDesignItemFromInstance(path, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                    designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designItem.parent, designItem.childCount, di));
+                    designerCanvas.instanceServiceContainer.undoService.execute(new DeleteAction([designItem]));
+                }
+            }
+        ];
+    }
+}

package/dist/elements/widgets/designerView/tools/DrawElementTool.d.ts

@@ -12,6 +12,7 @@ export declare class DrawElementTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     private _onPointerDown;
     private _onPointerMove;
     private _onPointerUp;

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

@@ -29,6 +29,7 @@ export class DrawElementTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
     async _onPointerDown(designerView, event) {
         event.preventDefault();
         this._startPosition = { x: event.x, y: event.y };

package/dist/elements/widgets/designerView/tools/DrawEllipsisTool.d.ts

@@ -12,4 +12,5 @@ export declare class DrawEllipsisTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -88,4 +88,5 @@ export class DrawEllipsisTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

package/dist/elements/widgets/designerView/tools/DrawLineTool.d.ts

@@ -10,4 +10,5 @@ export declare class DrawLineTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -73,4 +73,5 @@ export class DrawLineTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

package/dist/elements/widgets/designerView/tools/DrawPathTool.d.ts

@@ -16,4 +16,5 @@ export declare class DrawPathTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -13,7 +13,7 @@ export class DrawPathTool {
     _pointerMoved = false;
     _eventStarted = false;
     _lastPoint;
-    _startPoint = { x: 0, y: 0 };
+    _startPoint;
     constructor() {
     }
     activated(serviceContainer) {
@@ -43,6 +43,9 @@ export class DrawPathTool {
                 if (this._lastPoint == null) {
                     this._lastPoint = currentPoint;
                 }
+                if (this._startPoint == null) {
+                    this._startPoint = currentPoint;
+                }
                 break;
             case EventNames.PointerMove:
                 if (this._eventStarted) {
@@ -108,6 +111,7 @@ export class DrawPathTool {
                     //designerView.rootDesignItem.element.appendChild(svg);
                     this._path = null;
                     this._pathD = null;
+                    this._lastPoint = null;
                     const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                     designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
                     designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
@@ -116,4 +120,5 @@ export class DrawPathTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

package/dist/elements/widgets/designerView/tools/DrawRectTool.d.ts

@@ -15,4 +15,5 @@ export declare class DrawRectTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -103,4 +103,5 @@ export class DrawRectTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

package/dist/elements/widgets/designerView/tools/ITool.d.ts

@@ -5,4 +5,5 @@ export interface ITool extends IDisposable {
     readonly cursor: string;
     activated(serviceContainer: ServiceContainer): any;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): any;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): any;
 }

package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.d.ts

@@ -6,6 +6,7 @@ export declare class MagicWandSelectorTool implements ITool {
     private _pathD;
     private _path;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
 }

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

@@ -54,6 +54,7 @@ export class MagicWandSelectorTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
     activated(serviceContainer) {
     }
     dispose() {