@node-projects/web-component-designer 0.0.79 → 0.0.83

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;
             }
         }
@@ -83,9 +92,27 @@ export class PathExtension extends AbstractExtension {
                     const cy = event.y - this._lastPos.y + this._circlePos.y;
                     const dx = cx - this._circlePos.x;
                     const dy = cy - this._circlePos.y;
-                    p.values[index] = this._originalPathPoint.x + dx;
-                    p.values[index + 1] = this._originalPathPoint.y + dy;
-                    this._drawPath(this._pathdata, index);
+                    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;
+                        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:
@@ -93,25 +120,125 @@ export class PathExtension extends AbstractExtension {
                 this._startPos = null;
                 this._circlePos = null;
                 this._lastPos = null;
+                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
                 break;
         }
     }
-    _drawPath(path, index) {
-        let pathD = "";
-        for (let p of path) {
-            pathD += p.type + p.values[index] + " " + p.values[index + 1];
-        }
-        this.extendedItem.setAttribute("d", 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');
+        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));
+                }
+            });
+        }
         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');
     }
+    _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();

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/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

@@ -80,6 +80,7 @@ export class DrawEllipsisTool {
                 svg.style.position = 'absolute';
                 svg.style.width = (rect.width + 2 * offset) + 'px';
                 svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
@@ -87,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

@@ -65,6 +65,7 @@ export class DrawLineTool {
                 svg.style.position = 'absolute';
                 svg.style.width = (rect.width + 2 * offset) + 'px';
                 svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
@@ -72,4 +73,5 @@ export class DrawLineTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

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

@@ -11,10 +11,10 @@ export declare class DrawPathTool implements ITool {
     private _pointerMoved;
     private _eventStarted;
     private _lastPoint;
-    private _savedPoint;
     private _startPoint;
     constructor();
     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

@@ -12,9 +12,8 @@ export class DrawPathTool {
     _dragMode = false;
     _pointerMoved = false;
     _eventStarted = false;
-    _lastPoint = { x: 0, y: 0 };
-    _savedPoint = { x: 0, y: 0 };
-    _startPoint = { x: 0, y: 0 };
+    _lastPoint;
+    _startPoint;
     constructor() {
     }
     activated(serviceContainer) {
@@ -38,10 +37,15 @@ export class DrawPathTool {
                     designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
                     this._startPoint = currentPoint;
                 }
-                if (this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {
+                if (this._lastPoint != null && this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {
                     this._samePoint = true;
                 }
-                this._lastPoint = currentPoint;
+                if (this._lastPoint == null) {
+                    this._lastPoint = currentPoint;
+                }
+                if (this._startPoint == null) {
+                    this._startPoint = currentPoint;
+                }
                 break;
             case EventNames.PointerMove:
                 if (this._eventStarted) {
@@ -57,8 +61,9 @@ export class DrawPathTool {
                 else { // shows line preview
                     if (this._path) {
                         let straightLine = currentPoint;
-                        if (event.shiftKey)
-                            straightLine = straightenLine(this._savedPoint, currentPoint);
+                        if (event.shiftKey) {
+                            straightLine = straightenLine(this._lastPoint, currentPoint);
+                        }
                         this._path.setAttribute("d", this._pathD + "L" + straightLine.x + " " + straightLine.y);
                     }
                 }
@@ -71,15 +76,16 @@ export class DrawPathTool {
                 if (this._p2pMode && !this._samePoint && this._startPoint.x != currentPoint.x && this._startPoint.y != currentPoint.y) {
                     if (this._path) {
                         if (event.shiftKey) {
-                            let straightLine = straightenLine(this._savedPoint, currentPoint);
+                            let straightLine = straightenLine(this._lastPoint, currentPoint);
                             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._path.setAttribute("d", this._pathD);
+                            this._lastPoint = currentPoint;
                         }
-                        this._savedPoint = currentPoint;
                     }
                 }
                 if (this._samePoint && this._p2pMode || this._dragMode && !this._p2pMode) {
@@ -101,9 +107,11 @@ export class DrawPathTool {
                     svg.style.position = 'absolute';
                     svg.style.width = (rect.width + 2 * offset) + 'px';
                     svg.style.height = (rect.height + 2 * offset) + 'px';
+                    svg.style.overflow = 'visible';
                     //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);
@@ -112,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

@@ -95,6 +95,7 @@ export class DrawRectTool {
                 svg.style.position = 'absolute';
                 svg.style.width = (rect.width + 2 * offset) + 'px';
                 svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
@@ -102,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() {

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

@@ -4,6 +4,7 @@ import { ITool } from './ITool';
 export declare class PanTool implements ITool {
     readonly cursor: string;
     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/PanTool.js

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

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

@@ -5,5 +5,6 @@ export declare class PickColorTool implements ITool {
     readonly cursor = "crosshair";
     activated(serviceContainer: ServiceContainer): Promise<void>;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): Promise<void>;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     dispose(): void;
 }

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

@@ -14,6 +14,7 @@ export class PickColorTool {
     }
     async pointerEventHandler(designerCanvas, event, currentElement) {
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
     dispose() {
     }
 }

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

@@ -20,4 +20,5 @@ export declare class PointerTool implements ITool {
     private _pointerActionTypeDrawSelection;
     private _resetPointerEventsForClickThrough;
     private _pointerActionTypeDragOrSelect;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -322,4 +322,5 @@ export class PointerTool {
                 }
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

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

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