@node-projects/web-component-designer 0.0.59 → 0.0.63

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

@@ -0,0 +1,13 @@
+//todo, element moving does not work atm, needs to be fixed
+export class DesignerViewUseOverlayScollbars {
+    constructor() {
+    }
+    provideButtons(designerView, designerCanvas) {
+        let externalCss = document.createElement('style');
+        externalCss.innerHTML = '@import url("./node_modules/overlayscrollbars/css/OverlayScrollbars.min.css");';
+        designerCanvas.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        setTimeout(() => OverlayScrollbars([designerCanvas._outercanvas2], {}), 5000);
+        return [];
+    }
+}

package/dist/elements/widgets/designerView/IDesignContext.d.ts

@@ -1,3 +1,6 @@
 export interface IDesignContext {
     imports: string[];
+    extensionOptions: {
+        [key: string]: any;
+    };
 }

package/dist/elements/widgets/designerView/IDesignViewConfigButtonsProvider.d.ts

@@ -0,0 +1,5 @@
+import { DesignerView } from "./designerView.js";
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+export interface IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -8,6 +8,7 @@ import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
 import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayerView } from "./overlayLayerView";
 import { IRect } from "../../../interfaces/IRect.js";
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly serviceContainer: ServiceContainer;
     readonly instanceServiceContainer: InstanceServiceContainer;
@@ -19,6 +20,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly shadowRoot: ShadowRoot;
     readonly alignOnGrid: boolean;
     readonly alignOnSnap: boolean;
+    readonly onContentChanged: TypedEvent<void>;
     zoomFactor: number;
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -1,7 +1,7 @@
 import { ServiceContainer } from '../../services/ServiceContainer';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
 import { IDesignItem } from '../../item/IDesignItem';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { IDesignerCanvas } from './IDesignerCanvas';
 import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
@@ -28,6 +28,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _zoomFactor;
     get zoomFactor(): number;
     set zoomFactor(value: number);
+    onContentChanged: TypedEvent<void>;
     private _canvas;
     private _canvasContainer;
     private _outercanvas2;
@@ -72,7 +73,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
-    static getHost(node: Node): Element;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     _rect: SVGRectElement;
     private _pointerEventHandler;

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

@@ -3,7 +3,7 @@ import { InstanceServiceContainer } from '../../services/InstanceServiceContaine
 import { UndoService } from '../../services/undoService/UndoService';
 import { SelectionService } from '../../services/selectionService/SelectionService';
 import { DesignItem } from '../../item/DesignItem';
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatName } from '../../../Constants';
 import { ContentService } from '../../services/contentService/ContentService';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
@@ -42,6 +42,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._zoomFactor = value;
         this.zoomFactorChanged();
     }
+    onContentChanged = new TypedEvent();
     // Private Variables
     _canvas;
     _canvasContainer;
@@ -190,6 +191,21 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                     this.serviceContainer.globalContext.tool = this.serviceContainer.designerTools.get(command.parameter);
                 }
                 break;
+            case CommandType.setStrokeColor:
+                {
+                    this.serviceContainer.globalContext.strokeColor = command.parameter;
+                }
+                break;
+            case CommandType.setFillBrush:
+                {
+                    this.serviceContainer.globalContext.fillBrush = command.parameter;
+                }
+                break;
+            case CommandType.setStrokeThickness:
+                {
+                    this.serviceContainer.globalContext.strokeThickness = command.parameter;
+                }
+                break;
             case CommandType.delete:
                 this.handleDeleteCommand();
                 break;
@@ -315,6 +331,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     setDesignItems(designItems) {
         this.instanceServiceContainer.undoService.clear();
+        this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);
         this.rootDesignItem.clearChildren();
         this.addDesignItems(designItems);
@@ -496,14 +513,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         const normEl = this.getNormalizedElementCoordinates(element);
         return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
     }
-    //todo remove, is in base custom webcomp domhelper
-    static getHost(node) {
-        while (node.parentElement)
-            node = node.parentElement;
-        if (node.host)
-            return node.host;
-        return node.parentNode.host;
-    }
     getElementAtPoint(point, ignoreElementCallback) {
         let backupPEventsMap = new Map();
         let currentElement = this.elementFromPoint(point.x, point.y);
@@ -549,6 +558,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _rect;
     _pointerEventHandler(event) {
         this._fillCalculationrects();
+        /*let clickOnScrollbar = event.clientX - this.containerBoundingRect.x > this.containerBoundingRect.width || event.clientY - this.containerBoundingRect.y > this.containerBoundingRect.height
+        if (clickOnScrollbar) https://kingsora.github.io/OverlayScrollbars/
+          return;*/
         if (this._pointerextensions) {
             for (let pe of this._pointerextensions)
                 pe.refresh(event);
@@ -560,18 +572,21 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         let currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
         if (currentElement === this._outercanvas2 || currentElement === this.overlayLayer || !currentElement) {
             currentElement = this._canvas;
-        }
+        } /* else {
+          if (!DesignerCanvas.hasOrIsParent(currentElement, this._canvas))
+            return;
+        }*/
         //TODO: remove duplication when tool refactoring starts
-        this._fillCalculationrects();
+        //this._fillCalculationrects();
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, this.serviceContainer, this.instanceServiceContainer);
         if (this._lastHoverDesignItem != currentDesignItem) {
             if (this._lastHoverDesignItem)
                 this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver);
-            if (currentDesignItem && currentDesignItem != this.rootDesignItem && DesignerCanvas.getHost(currentElement.parentNode) !== this.overlayLayer)
+            if (currentDesignItem && currentDesignItem != this.rootDesignItem && DomHelper.getHost(currentElement.parentNode) !== this.overlayLayer)
                 this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver);
             this._lastHoverDesignItem = currentDesignItem;
         }
-        if (currentElement && DesignerCanvas.getHost(currentElement.parentNode) === this.overlayLayer) {
+        if (currentElement && DomHelper.getHost(currentElement.parentNode) === this.overlayLayer) {
             if (this.eatEvents)
                 return;
             currentElement = this.instanceServiceContainer.selectionService.primarySelection?.element ?? this._canvas;

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

@@ -11,10 +11,12 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     set serviceContainer(value: ServiceContainer);
     get instanceServiceContainer(): InstanceServiceContainer;
     set instanceServiceContainer(value: InstanceServiceContainer);
+    private _designerCanvas;
+    get designerCanvas(): DesignerCanvas;
     private _zoomInput;
+    private _lowertoolbar;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
-    private _designerCanvas;
     constructor();
     private _onWheel;
     get designerWidth(): string;

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

@@ -16,7 +16,12 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     set instanceServiceContainer(value) {
         this._designerCanvas.instanceServiceContainer = value;
     }
+    _designerCanvas;
+    get designerCanvas() {
+        return this._designerCanvas;
+    }
     _zoomInput;
+    _lowertoolbar;
     static style = css `
     :host {
       display: block;
@@ -49,6 +54,12 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       display: block;
       margin-right: 1px;
       cursor: default;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .selected {
+      background-color: deepskyblue;
     }
     .toolbar-control:hover {
       background-color:rgba(164,206,249,.6);
@@ -92,7 +103,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             <div title="snap to elements" id="alignSnap" class="toolbar-control snap-guide"></div>
           </div>
         </div>`;
-    _designerCanvas;
     constructor() {
         super();
         const outer = this._getDomElement('outer');
@@ -138,6 +148,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         let alignGrid = this._getDomElement('alignGrid');
         alignGrid.onclick = () => { this._designerCanvas.alignOnGrid = !this._designerCanvas.alignOnGrid; alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : ''; };
         alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : '';
+        this._lowertoolbar = this._getDomElement('lowertoolbar');
     }
     _onWheel(event) {
         if (event.ctrlKey) {
@@ -180,15 +191,22 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     initialize(serviceContainer) {
         this.serviceContainer = serviceContainer;
         this._designerCanvas.initialize(serviceContainer);
+        if (serviceContainer.designViewConfigButtons) {
+            for (let provider of serviceContainer.designViewConfigButtons) {
+                for (let btn of provider.provideButtons(this, this._designerCanvas))
+                    this._lowertoolbar.appendChild(btn);
+            }
+        }
     }
     getHTML(designItemsAssignmentList) {
-        this.instanceServiceContainer.selectionService.setSelectedElements(null);
+        //this.instanceServiceContainer.selectionService.setSelectedElements(null);
         return DomConverter.ConvertToString([...this._designerCanvas.rootDesignItem.children()], designItemsAssignmentList);
     }
     async parseHTML(html) {
         const parserService = this.serviceContainer.htmlParserService;
         if (!html) {
             this.instanceServiceContainer.undoService.clear();
+            this._designerCanvas.overlayLayer.removeAllOverlays();
             DomHelper.removeAllChildnodes(this._designerCanvas.overlayLayer);
             this._designerCanvas.rootDesignItem.clearChildren();
         }

package/dist/elements/widgets/designerView/extensions/GridExtensionConfigButtons.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GridExtensionProviderConfigButtons {
+    aaa(extensionManager: IExtensionManager, designerView: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,12 @@
+import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
+export class GridExtensionProviderConfigButtons {
+    aaa(extensionManager, designerView) {
+        const extensionOptions = designerView.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.onclick = () => {
+            const val = extensionOptions[gridExtensionShowOverlayOptionName];
+            extensionOptions[gridExtensionShowOverlayOptionName] = val == true ? false : true;
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/GridExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,6 @@
+import { DesignerView } from "../designerView.js";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
+export declare class GridExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,21 @@
+import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
+export class GridExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'G';
+        btn.title = 'show grid overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[gridExtensionShowOverlayOptionName];
+            extensionOptions[gridExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        return [btn];
+    }
+}

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

@@ -0,0 +1,18 @@
+import { GridExtension } from './GridExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
+export class GridExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'grid')
+            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new GridExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
+    .svg-grid-area { font-size: 8px; }
+    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/GridExtensionProvider.d.ts

@@ -3,6 +3,7 @@ import { IDesignItem } from "../../../item/IDesignItem";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { IDesignerExtension } from "./IDesignerExtension";
 import { IExtensionManager } from "./IExtensionManger";
+export declare const gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
 export declare class GridExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

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

@@ -1,9 +1,10 @@
 import { GridExtension } from './GridExtension';
 import { css } from "@node-projects/base-custom-webcomponent";
+export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
 export class GridExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         if (getComputedStyle(designItem.element).display == 'grid')
-            return true;
+            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

package/dist/elements/widgets/designerView/extensions/GridExtensionProviderConfigButtons.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GridExtensionProviderConfigButtons {
+    aaa(extensionManager: IExtensionManager, designerView: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,12 @@
+import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
+export class GridExtensionProviderConfigButtons {
+    aaa(extensionManager, designerView) {
+        const extensionOptions = designerView.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.onclick = () => {
+            const val = extensionOptions[gridExtensionShowOverlayOptionName];
+            extensionOptions[gridExtensionShowOverlayOptionName] = val == true ? false : true;
+        };
+        return [btn];
+    }
+}

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

@@ -0,0 +1,18 @@
+import { GridExtension } from './GridExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
+export class GridExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'grid')
+            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new GridExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
+    .svg-grid-area { font-size: 8px; }
+    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
+  `;
+}

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

@@ -0,0 +1 @@
+"use strict";

package/dist/elements/widgets/designerView/extensions/IExtensionConfiguration.d.ts

@@ -0,0 +1,3 @@
+export interface IExtensionConfiguration {
+    designerViewButtons?: HTMLElement[];
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/overlayLayerView.d.ts

@@ -15,6 +15,7 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
     removeAllNodesWithClass(className: string): void;
+    removeAllOverlays(): void;
     createPoint(): DOMPointInit;
     elementFromPoint(x: number, y: number): Element;
     drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;

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

@@ -80,6 +80,12 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             e.parentNode.removeChild(e);
         }
     }
+    removeAllOverlays() {
+        const nodes = this._svg.querySelectorAll('svg > g > *');
+        for (const e of nodes) {
+            e.parentNode.removeChild(e);
+        }
+    }
     createPoint() {
         //@ts-ignore
         return this._svg.createSVGPoint();

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

@@ -1,12 +1,21 @@
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IPoint } from '../../../..';
 export declare class DrawPathTool implements ITool {
     readonly cursor = "crosshair";
     private _pathD;
     private _path;
+    private _samePoint;
+    private _p2pMode;
+    private _dragMode;
+    private _pointerMoved;
+    private _eventStarted;
+    private _lastPoint;
+    private _savedPoint;
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    straightenLine(p1: IPoint, p2: IPoint): IPoint;
 }

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

@@ -7,6 +7,13 @@ export class DrawPathTool {
     cursor = 'crosshair';
     _pathD;
     _path;
+    _samePoint = false;
+    _p2pMode = false;
+    _dragMode = false;
+    _pointerMoved = false;
+    _eventStarted = false;
+    _lastPoint = { x: 0, y: 0 };
+    _savedPoint = { x: 0, y: 0 };
     constructor() {
     }
     activated(serviceContainer) {
@@ -18,43 +25,102 @@ export class DrawPathTool {
         const offset = 50;
         switch (event.type) {
             case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                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);
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                this._eventStarted = true;
+                if (!this._p2pMode) {
+                    event.target.setPointerCapture(event.pointerId);
+                    this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    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);
+                    this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
+                    designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                }
+                if (this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {
+                    this._samePoint = true;
+                }
+                this._lastPoint = currentPoint;
                 break;
             case EventNames.PointerMove:
-                if (this._path) {
-                    this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
-                    this._path.setAttribute("d", this._pathD);
+                if (this._eventStarted) {
+                    this._pointerMoved = true;
+                }
+                if (!this._p2pMode) {
+                    this._dragMode = true;
+                    if (this._path) {
+                        this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                        this._path.setAttribute("d", this._pathD);
+                    }
+                }
+                else { // shows line preview
+                    if (this._path) {
+                        let straightLine = currentPoint;
+                        if (event.shiftKey)
+                            straightLine = this.straightenLine(this._savedPoint, currentPoint);
+                        this._path.setAttribute("d", this._pathD + "L" + straightLine.x + " " + straightLine.y);
+                    }
                 }
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                const rect = this._path.getBoundingClientRect();
-                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 d = movePathData(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';
-                //designerView.rootDesignItem.element.appendChild(svg);
-                this._path = null;
-                this._pathD = 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);
+                if (this._eventStarted && !this._pointerMoved) {
+                    this._p2pMode = true;
+                }
+                if (this._p2pMode && !this._samePoint) {
+                    if (this._path) {
+                        if (event.shiftKey) {
+                            let straightLine = this.straightenLine(this._savedPoint, currentPoint);
+                            this._pathD += "L" + straightLine.x + " " + straightLine.y;
+                            this._path.setAttribute("d", this._pathD);
+                        }
+                        else {
+                            this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                            this._path.setAttribute("d", this._pathD);
+                        }
+                        this._savedPoint = currentPoint;
+                    }
+                }
+                if (this._samePoint && this._p2pMode || this._dragMode && !this._p2pMode) {
+                    this._eventStarted = false;
+                    this._p2pMode = false;
+                    this._pointerMoved = false;
+                    this._samePoint = false;
+                    this._dragMode = false;
+                    const rect = this._path.getBoundingClientRect();
+                    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 d = movePathData(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';
+                    //designerView.rootDesignItem.element.appendChild(svg);
+                    this._path = null;
+                    this._pathD = 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);
+                }
                 //TODO: Better Path drawing (like in SVGEDIT & Adding via Undo Framework. And adding to correct container)
                 break;
         }
     }
+    straightenLine(p1, p2) {
+        let newP = { x: 0, y: 0 };
+        let alpha = -1 * Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
+        if (alpha < 0)
+            alpha += 360;
+        if (alpha > 0 && alpha < 45 || alpha > 315 && alpha < 360 || alpha > 135 && alpha < 225) // right or left
+            newP = { x: p2.x, y: p1.y };
+        else if (alpha > 45 && alpha < 135 || alpha > 225 && alpha < 315) // up or down
+            newP = { x: p1.x, y: p2.y };
+        else // something else
+            newP = { x: p2.x, y: p2.y };
+        return newP;
+    }
 }

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

@@ -3,7 +3,7 @@ import { PointerActionType } from "../../../../enums/PointerActionType";
 import { DesignItem } from "../../../item/DesignItem";
 import { ExtensionType } from "../extensions/ExtensionType";
 import { NamedTools } from './NamedTools';
-import { DesignerCanvas } from '../designerCanvas';
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 export class PointerTool {
     cursor = 'default';
     _movedSinceStartedAction = false;
@@ -101,7 +101,7 @@ export class PointerTool {
                 currentDesignItem.element.style.pointerEvents = 'none';
             }
             let currentElement = designerCanvas.elementFromPoint(event.x, event.y);
-            if (DesignerCanvas.getHost(currentElement) !== designerCanvas.overlayLayer)
+            if (DomHelper.getHost(currentElement) !== designerCanvas.overlayLayer)
                 currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
         }
         else {