npm - @node-projects/web-component-designer - Versions diffs - 0.0.57 → 0.0.61 - Mend

@node-projects/web-component-designer 0.0.57 → 0.0.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/dist/elements/widgets/demoView/demoView.js CHANGED Viewed

@@ -18,11 +18,6 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
     position: absolute;
     top: 60px;
     left: 20px;
-  }
-  iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
   }`;
     constructor() {
         super();
@@ -34,24 +29,10 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.textContent = '🛀 Hold on, loading...';
         this.shadowRoot.appendChild(this._loading);
     }
-    display(serviceContainer, instanceServiceContainer, code) {
-        let iframe = document.createElement('iframe');
-        this._placeholder.innerHTML = '';
-        this._placeholder.appendChild(iframe);
+    async display(serviceContainer, instanceServiceContainer, code) {
         this._loading.hidden = false;
-        iframe.onload = () => {
-            this._loading.hidden = true;
-        };
-        let doc = iframe.contentWindow.document;
-        doc.open();
-        doc.write('<script type="module">');
-        for (let i of instanceServiceContainer.designContext.imports) {
-            doc.write("import '" + i + "';");
-        }
-        doc.write("document.body.style.display='';");
-        doc.write('</script>');
-        doc.write('<body style="display:none">' + code + '</body>');
-        doc.close();
+        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code);
+        this._loading.hidden = true;
     }
 }
 customElements.define('node-projects-demo-view', DemoView);

package/dist/elements/widgets/designerView/ButtonSeperatorProvider copy.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/ButtonSeperatorProvider copy.js ADDED Viewed

@@ -0,0 +1,11 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

package/dist/elements/widgets/designerView/ButtonSeperatorProvider.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { DesignerView } from "./designerView.js";
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/ButtonSeperatorProvider.js ADDED Viewed

@@ -0,0 +1,11 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

package/dist/elements/widgets/designerView/DesignContext.d.ts CHANGED Viewed

@@ -1,4 +1,7 @@
 import { IDesignContext } from "./IDesignContext";
 export declare class DesignContext implements IDesignContext {
     imports: string[];
+    extensionOptions: {
+        [key: string]: any;
+    };
 }

package/dist/elements/widgets/designerView/DesignContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export class DesignContext {
     imports = [];
+    extensionOptions = {};
 }

package/dist/elements/widgets/designerView/DesignerViewUseOverlayScollbars.d.ts ADDED Viewed

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

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

@@ -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 CHANGED Viewed

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

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

@@ -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 ADDED Viewed

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

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

@@ -72,7 +72,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 CHANGED Viewed

@@ -190,6 +190,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;
@@ -496,14 +511,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 +556,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 +570,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 CHANGED Viewed

@@ -12,6 +12,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     get instanceServiceContainer(): InstanceServiceContainer;
     set instanceServiceContainer(value: InstanceServiceContainer);
     private _zoomInput;
+    private _lowertoolbar;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     private _designerCanvas;

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

@@ -17,6 +17,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._designerCanvas.instanceServiceContainer = value;
     }
     _zoomInput;
+    _lowertoolbar;
     static style = css `
     :host {
       display: block;
@@ -49,6 +50,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);
@@ -138,6 +145,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,6 +188,12 @@ 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);

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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.d.ts ADDED Viewed

File without changes

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

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

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

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

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

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

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

@@ -115,7 +115,10 @@ export class ResizeExtension extends AbstractExtension {
                             break;
                         //for other resize modes we need a replacement
                     }
-                    this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                    const resizedElements = [this.extendedItem, this.extendedItem.parent];
+                    if (this.resizeAllSelected)
+                        resizedElements.push(...this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                    this.extensionManager.refreshExtensions(resizedElements);
                 }
                 break;
             case EventNames.PointerUp:

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

@@ -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 CHANGED Viewed

@@ -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;
+    }
 }