@node-projects/web-component-designer 0.0.95 → 0.0.98

package/dist/Constants.js

@@ -3,4 +3,3 @@ export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
 //export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
 let imporUrl = new URL((import.meta.url));
 export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';
-console.log("aasetPath", assetsPath);

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -56,6 +56,13 @@ import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/
 import { SeperatorContextMenu } from '../widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js';
 import { ZoomToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js';
 import { RotateLeftAndRight } from '../widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js';
+import { SelectAllChildrenContextMenu } from '../widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu';
+import { PointerToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js';
+import { SeperatorToolProvider } from '../widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js';
+import { ZoomToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js';
+import { DrawToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js';
+import { TextToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js';
+import { SelectorToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -125,6 +132,7 @@ export function createDefaultServiceContainer() {
     //new CursorLinePointerExtensionProvider()
     );
     serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
+    serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(5), new TextToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),
         new SeperatorContextMenu(),
@@ -137,6 +145,8 @@ export function createDefaultServiceContainer() {
         new PathContextMenu(),
         new RectContextMenu(),
         new SeperatorContextMenu(),
+        new SelectAllChildrenContextMenu(),
+        new SeperatorContextMenu(),
         new ItemsBelowContextMenu(),
     ];
     return serviceContainer;

package/dist/elements/services/GlobalContext.d.ts

@@ -10,7 +10,10 @@ export declare class GlobalContext {
     constructor(serviceContainer: ServiceContainer);
     set tool(tool: ITool);
     get tool(): ITool;
-    readonly onToolChanged: TypedEvent<PropertyChangedArgs<ITool>>;
+    readonly onToolChanged: TypedEvent<PropertyChangedArgs<{
+        name: string;
+        tool: ITool;
+    }>>;
     finishedWithTool: (tool: ITool) => void;
     set strokeColor(strokeColor: string);
     get strokeColor(): string;

package/dist/elements/services/GlobalContext.js

@@ -1,4 +1,3 @@
-//TODO: global conext not yet used.
 //Service container should not be something with changeing information, so global context is for tool and color (and maybe more)
 import { PropertyChangedArgs, TypedEvent } from "@node-projects/base-custom-webcomponent";
 export class GlobalContext {
@@ -13,10 +12,16 @@ export class GlobalContext {
     set tool(tool) {
         if (this._tool !== tool) {
             const oldTool = this._tool;
-            if (oldTool)
+            if (oldTool) {
                 oldTool.dispose();
+            }
             this._tool = tool;
-            this.onToolChanged.emit(new PropertyChangedArgs(tool, oldTool));
+            let toolName = null;
+            for (let t of this._serviceContainer.designerTools) {
+                if (t[1] == tool)
+                    toolName = t[0];
+            }
+            this.onToolChanged.emit(new PropertyChangedArgs({ name: toolName, tool: tool }, { name: null, tool: oldTool }));
             if (this._tool)
                 this._tool.activated(this._serviceContainer);
         }

package/dist/elements/services/ServiceContainer.d.ts

@@ -26,6 +26,7 @@ import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/IDesig
 import { IDemoProviderService } from "./demoProviderService/IDemoProviderService.js";
 import { IBindableObjectsService } from "./bindableObjectsService/IBindableObjectsService.js";
 import { IBindableObjectDragDropService } from "./bindableObjectsService/IBindableObjectDragDropService.js";
+import { IDesignViewToolbarButtonProvider } from "../widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -53,6 +54,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
     removeDesignerExtensionOfType(container: (ExtensionType | string), lambda: new (...args: any[]) => IDesignerExtensionProvider): void;
     readonly designViewConfigButtons: IDesignViewConfigButtonsProvider[];
+    readonly designViewToolbarButtons: IDesignViewToolbarButtonProvider[];
     readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;

package/dist/elements/services/ServiceContainer.js

@@ -17,6 +17,7 @@ export class ServiceContainer extends BaseServiceContainer {
         }
     }
     designViewConfigButtons = [];
+    designViewToolbarButtons = [];
     designerPointerExtensions = [];
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);

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

@@ -1,7 +1,7 @@
 import { OverlayLayer } from "./extensions/OverlayLayer.js";
 const overlayLayer = OverlayLayer.Normal;
 export class Snaplines {
-    snapOffset = 15;
+    snapOffset = 5;
     _overlayLayerView;
     _containerItem;
     _positionsH = [];

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

@@ -17,11 +17,10 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     get designerCanvas(): DesignerCanvas;
     private _zoomInput;
     private _lowertoolbar;
-    private _tooldock;
+    private _toolbar;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
-    ready(): Promise<void>;
     zoomReset(): void;
     zoomToFit(): void;
     private _onScrollbar;

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

@@ -3,6 +3,7 @@ import { DesignerCanvas } from "./designerCanvas.js";
 import { DomConverter } from './DomConverter.js';
 import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
 import { EventNames } from '../../../enums/EventNames.js';
+import { DesignerToolbar } from './tools/toolBar/DesignerToolbar.js';
 const autoZomOffset = 10;
 export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     _sVert;
@@ -25,7 +26,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     }
     _zoomInput;
     _lowertoolbar;
-    _tooldock;
+    _toolbar;
     static style = css `
     :host {
       display: block;
@@ -78,15 +79,16 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       height: 100%;
     }
     #canvas {
-      left: 36px;
-      width: calc(100% - 52px);
+      left: 24px;
+      width: calc(100% - 24px - 16px);
       height: calc(100% - 32px);
     }
 
-    #tool-bar{
-      width: 36px;
+    #tool-bar {
+      width: 24px;
       height: calc(100% - 32px);
       position: absolute;
+      background-color: lightgray;      
     }
   
     .zoom-in {
@@ -130,7 +132,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       <node-projects-plain-scrollbar id="s-hor" value="0.5" class="bottom-scroll"></node-projects-plain-scrollbar>
       <node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll">
       </node-projects-plain-scrollbar>
-      <node-projects-designer-tools-dock id="tool-bar" class="tool-bar"></node-projects-designer-tools-dock>
       <div class="bottom-right"></div>
       <div id="lowertoolbar">
         <input id="zoomInput" type="text" value="100%">
@@ -149,11 +150,16 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     constructor() {
         super();
         this._restoreCachedInititalValues();
+        this._sVert = this._getDomElement('s-vert');
+        this._sHor = this._getDomElement('s-hor');
         const outer = this._getDomElement('outer');
         this._designerCanvas = new DesignerCanvas();
         this._designerCanvas.id = "canvas";
         this._designerCanvas.appendChild(document.createElement("slot"));
         outer.insertAdjacentElement('afterbegin', this._designerCanvas);
+        this._toolbar = new DesignerToolbar();
+        this._toolbar.id = 'tool-bar';
+        this._sVert.insertAdjacentElement('afterend', this._toolbar);
         this._designerCanvas.onZoomFactorChanged.on(() => {
             this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
             const pos = this.designerCanvas.canvasOffset;
@@ -204,15 +210,9 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         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');
-        this._sVert = this._getDomElement('s-vert');
-        this._sHor = this._getDomElement('s-hor');
         this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
         this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
     }
-    async ready() {
-        this._tooldock = await this._getDomElement('tool-bar');
-        this._tooldock.initialize(this.serviceContainer, this);
-    }
     zoomReset() {
         this._designerCanvas.canvasOffset = { x: 0, y: 0 };
         this._designerCanvas.zoomFactor = 1;
@@ -279,6 +279,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         else {
             this._sVert.value += event.deltaY / 10000;
             this._onScrollbar(null);
+            this._sHor.value += event.deltaX / 10000;
+            this._onScrollbar(null);
         }
     }
     get designerWidth() {
@@ -316,6 +318,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
                     this._lowertoolbar.appendChild(btn);
             }
         }
+        this._toolbar.initialize(this.serviceContainer, this);
     }
     getHTML(designItemsAssignmentList) {
         //this.instanceServiceContainer.selectionService.setSelectedElements(null);

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

@@ -0,0 +1,12 @@
+export class SelectAllChildrenContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return designItem.hasChildren;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [{
+                title: 'Select all Children', action: () => {
+                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(Array.from(designItem.children()));
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,19 @@
+import { IElementDefinition } from '../../../services/elementsService/IElementDefinition';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+export declare class DrawElementTool implements ITool {
+    private _elementDefinition;
+    private _createdItem;
+    private _startPosition;
+    readonly cursor = "crosshair";
+    private _rect;
+    constructor(elementDefinition: IElementDefinition);
+    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/toolBar/DrawElementTool.js

@@ -0,0 +1,79 @@
+import { EventNames } from '../../../../enums/EventNames';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+export class DrawElementTool {
+    _elementDefinition;
+    _createdItem;
+    _startPosition;
+    cursor = 'crosshair';
+    _rect;
+    constructor(elementDefinition) {
+        this._elementDefinition = elementDefinition;
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+        if (this._createdItem)
+            this._createdItem.element.parentElement.removeChild(this._createdItem.element);
+    }
+    pointerEventHandler(designerView, event, currentElement) {
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._onPointerDown(designerView, event);
+                break;
+            case EventNames.PointerMove:
+                this._onPointerMove(designerView, event);
+                break;
+            case EventNames.PointerUp:
+                this._onPointerUp(designerView, event);
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+    async _onPointerDown(designerView, event) {
+        event.preventDefault();
+        this._startPosition = { x: event.x, y: event.y };
+        this._createdItem = await designerView.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(this._elementDefinition, designerView.serviceContainer, designerView.instanceServiceContainer));
+        const targetRect = event.target.getBoundingClientRect();
+        this._createdItem.setStyle('position', 'absolute');
+        this._createdItem.setStyle('left', event.offsetX + targetRect.left - designerView.containerBoundingRect.x + 'px');
+        this._createdItem.setStyle('top', event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px');
+        this._createdItem.setStyle('width', '0');
+        this._createdItem.setStyle('height', '0');
+        this._createdItem.element.style.overflow = 'hidden';
+        //TODO: add items as last, with all properties set
+        //draw via containerService??? how to draw into a grid, a stackpanel???
+        designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, this._createdItem));
+        designerView.instanceServiceContainer.selectionService.clearSelectedElements();
+    }
+    async _onPointerMove(designerCanvas, event) {
+        if (this._createdItem) {
+            if (!this._rect) {
+                designerCanvas.rootDesignItem.element.appendChild(this._createdItem.element);
+                this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
+                this._rect.setAttribute('class', 'svg-draw-new-element');
+                this._rect.setAttribute('x', (this._startPosition.x - designerCanvas.containerBoundingRect.x));
+                this._rect.setAttribute('y', (this._startPosition.y - designerCanvas.containerBoundingRect.y));
+            }
+            const w = event.x - this._startPosition.x;
+            const h = event.y - this._startPosition.y;
+            if (w >= 0) {
+                this._rect.setAttribute('width', w);
+                this._createdItem.setStyle('width', w + 'px');
+            }
+            if (h >= 0) {
+                this._rect.setAttribute('height', h);
+                this._createdItem.setStyle('height', h + 'px');
+            }
+        }
+    }
+    async _onPointerUp(designerView, event) {
+        designerView.overlayLayer.removeOverlay(this._rect);
+        designerView.instanceServiceContainer.selectionService.setSelectedElements([this._createdItem]);
+        this._startPosition = null;
+        this._rect = null;
+        this._createdItem = null;
+        designerView.serviceContainer.globalContext.finishedWithTool(this);
+    }
+}

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

@@ -0,0 +1,16 @@
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+export declare class DrawEllipsisTool implements ITool {
+    readonly cursor = "crosshair";
+    private _path;
+    private _startPoint;
+    private _radius;
+    private _cx;
+    private _cy;
+    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/toolBar/DrawEllipsisTool.js

@@ -0,0 +1,94 @@
+import { EventNames } from '../../../../enums/EventNames';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+import { calculateNormLegth } from '../../../helper/PathDataPolyfill';
+import { DesignItem } from '../../../item/DesignItem';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
+export class DrawEllipsisTool {
+    cursor = 'crosshair';
+    _path;
+    _startPoint;
+    _radius;
+    _cx;
+    _cy;
+    constructor() {
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        const offset = 50;
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._startPoint = currentPoint;
+                event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
+                this._path = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+                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);
+                this._path.setAttribute("cx", currentPoint.x.toString());
+                this._path.setAttribute("cy", currentPoint.y.toString());
+                this._path.setAttribute("rx", "0");
+                this._path.setAttribute("ry", "0");
+                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._path) {
+                    this._radius = { x: Math.abs(currentPoint.x - this._startPoint.x), y: Math.abs(currentPoint.y - this._startPoint.y) };
+                    if (event.ctrlKey) {
+                        this._path.setAttribute("cx", this._startPoint.x.toString());
+                        this._path.setAttribute("cy", this._startPoint.y.toString());
+                        this._cx = this._startPoint.x;
+                        this._cy = this._startPoint.y;
+                        if (event.shiftKey) {
+                            const radius = calculateNormLegth(this._startPoint, currentPoint);
+                            this._path.setAttribute("rx", radius.toString());
+                            this._path.setAttribute("ry", radius.toString());
+                        }
+                        else {
+                            this._path.setAttribute("rx", this._radius.x.toString());
+                            this._path.setAttribute("ry", this._radius.y.toString());
+                        }
+                    }
+                    else {
+                        if (event.shiftKey) {
+                            const radius = calculateNormLegth(this._startPoint, currentPoint);
+                            this._radius = { x: radius, y: radius };
+                        }
+                        this._cx = currentPoint.x < this._startPoint.x ? this._startPoint.x - this._radius.x / 2 : this._startPoint.x + this._radius.x / 2;
+                        this._cy = currentPoint.y < this._startPoint.y ? this._startPoint.y - this._radius.y / 2 : this._startPoint.y + this._radius.y / 2;
+                        this._path.setAttribute("cx", this._cx.toString());
+                        this._path.setAttribute("cy", this._cy.toString());
+                        this._path.setAttribute("rx", (this._radius.x / 2).toString());
+                        this._path.setAttribute("ry", (this._radius.y / 2).toString());
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.releaseActiveTool();
+                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;
+                svg.appendChild(this._path);
+                this._path.setAttribute("cx", (this._cx - mvX).toString());
+                this._path.setAttribute("cy", (this._cy - mvY).toString());
+                svg.style.left = (mvX) + 'px';
+                svg.style.top = (mvY) + 'px';
+                svg.style.position = 'absolute';
+                svg.style.width = (rect.width + 2 * offset) + 'px';
+                svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.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));
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+}

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

@@ -0,0 +1,14 @@
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+export declare class DrawLineTool implements ITool {
+    readonly cursor = "crosshair";
+    private _path;
+    private _startPoint;
+    private _endPoint;
+    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/toolBar/DrawLineTool.js

@@ -0,0 +1,79 @@
+import { EventNames } from '../../../../enums/EventNames';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+import { straightenLine } from '../../../helper/PathDataPolyfill';
+import { DesignItem } from '../../../item/DesignItem';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
+export class DrawLineTool {
+    cursor = 'crosshair';
+    _path;
+    _startPoint;
+    _endPoint;
+    constructor() {
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        const offset = 50;
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._startPoint = currentPoint;
+                event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
+                this._path = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                // this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
+                // this._path.setAttribute("d", this._pathD);
+                this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
+                this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
+                this._path.setAttribute("x1", currentPoint.x.toString());
+                this._path.setAttribute("y1", currentPoint.y.toString());
+                this._path.setAttribute("x2", currentPoint.x.toString());
+                this._path.setAttribute("y2", currentPoint.y.toString());
+                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._path) {
+                    if (event.shiftKey) {
+                        let straightLine = straightenLine(this._startPoint, currentPoint);
+                        this._path.setAttribute("x2", straightLine.x.toString());
+                        this._path.setAttribute("y2", straightLine.y.toString());
+                        this._endPoint = straightLine;
+                    }
+                    else {
+                        //this._path.setAttribute("d", this._pathD + "L" + currentPoint.x + " " + currentPoint.y);
+                        this._path.setAttribute("x2", currentPoint.x.toString());
+                        this._path.setAttribute("y2", currentPoint.y.toString());
+                        this._endPoint = currentPoint;
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.releaseActiveTool();
+                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;
+                this._path.setAttribute("x1", (this._startPoint.x - mvX).toString());
+                this._path.setAttribute("y1", (this._startPoint.y - mvY).toString());
+                this._path.setAttribute("x2", (this._endPoint.x - mvX).toString());
+                this._path.setAttribute("y2", (this._endPoint.y - mvY).toString());
+                svg.appendChild(this._path);
+                svg.style.left = (mvX) + 'px';
+                svg.style.top = (mvY) + 'px';
+                svg.style.position = 'absolute';
+                svg.style.width = (rect.width + 2 * offset) + 'px';
+                svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.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));
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+}

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

@@ -0,0 +1,20 @@
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+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 _startPoint;
+    constructor();
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+}