@node-projects/web-component-designer 0.1.0 → 0.1.2

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

@@ -0,0 +1,30 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { OverlayLayer } from './extensions/OverlayLayer.js';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+export declare class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
+    static readonly template: HTMLTemplateElement;
+    static readonly style: CSSStyleSheet;
+    static readonly is = "node-projects-overlay-layer-view";
+    private _serviceContainer;
+    private _svg;
+    private _gBackground;
+    private _gNormal;
+    private _gForeground;
+    private _defs;
+    private _id;
+    constructor(serviceContainer: ServiceContainer);
+    private _initialize;
+    addOverlay(overlaySource: string, element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
+    removeOverlay(element: SVGElement): void;
+    removeAllNodesWithClass(className: string): void;
+    removeAllOverlays(): void;
+    createPoint(): DOMPointInit;
+    elementFromPoint(x: number, y: number): Element;
+    drawGroup(overlaySource: string, className?: string, group?: SVGGElement, overlayLayer?: OverlayLayer): SVGGElement;
+    drawLine(overlaySource: string, x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    drawCircle(overlaySource: string, x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
+    drawRect(overlaySource: string, x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    drawPath(overlaySource: string, data: string, className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
+    drawText(overlaySource: string, text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+    drawTextWithBackground(overlaySource: string, text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
+}

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

@@ -0,0 +1,211 @@
+import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { OverlayLayer } from './extensions/OverlayLayer.js';
+export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
+    static template = html `
+    <svg id="svg" style="pointer-events: none;">
+      <defs id="defs"></defs>
+      <g id="background"></g>
+      <g id="normal"></g>
+      <g id="foreground"></g>
+    </svg>`;
+    static style = css `
+    svg {
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+
+    .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
+    .svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; }
+    .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: all }
+    .svg-position  { stroke: black; stroke-dasharray: 2; }
+    .svg-path { stroke: #3899ec; fill: orange; pointer-events: all }
+    .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
+    .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }`;
+    static is = 'node-projects-overlay-layer-view';
+    _serviceContainer;
+    _svg;
+    _gBackground;
+    _gNormal;
+    _gForeground;
+    _defs;
+    _id = 0;
+    constructor(serviceContainer) {
+        super();
+        this._serviceContainer = serviceContainer;
+        this._svg = this._getDomElement('svg');
+        this._gBackground = this._getDomElement('background');
+        this._gNormal = this._getDomElement('normal');
+        this._gForeground = this._getDomElement('foreground');
+        this._defs = this._getDomElement('defs');
+        this._initialize();
+    }
+    _initialize() {
+        let styles = [OverlayLayerView.style];
+        for (const extList of this._serviceContainer.designerExtensions) {
+            for (const ext of extList[1]) {
+                if (ext.style) {
+                    if (Array.isArray(ext.style))
+                        styles.push(...ext.style);
+                    else
+                        styles.push(ext.style);
+                }
+            }
+        }
+        for (const ext of this._serviceContainer.designerPointerExtensions) {
+            if (ext.style) {
+                styles.push(ext.style);
+            }
+        }
+        this.shadowRoot.adoptedStyleSheets = styles;
+    }
+    addOverlay(overlaySource, element, overlayLayer = OverlayLayer.Normal) {
+        element.setAttribute("overlay-source", overlaySource);
+        switch (overlayLayer) {
+            case OverlayLayer.Background:
+                this._gBackground.appendChild(element);
+                break;
+            case OverlayLayer.Foregorund:
+                this._gForeground.appendChild(element);
+                break;
+            default:
+                this._gNormal.appendChild(element);
+                break;
+        }
+    }
+    removeOverlay(element) {
+        try {
+            element?.parentElement?.removeChild(element);
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+    removeAllNodesWithClass(className) {
+        const nodes = this._svg.querySelectorAll('.' + className);
+        for (const e of nodes) {
+            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();
+    }
+    elementFromPoint(x, y) {
+        //@ts-ignore
+        return this.shadowRoot.elementFromPoint(x, y);
+    }
+    drawGroup(overlaySource, className, group, overlayLayer) {
+        if (!group) {
+            group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+            this.addOverlay(overlaySource, group, overlayLayer);
+        }
+        if (className)
+            group.setAttribute('class', className);
+        return group;
+    }
+    drawLine(overlaySource, x1, y1, x2, y2, className, line, overlayLayer) {
+        if (!line) {
+            line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            this.addOverlay(overlaySource, line, overlayLayer);
+        }
+        line.setAttribute('x1', x1);
+        line.setAttribute('y1', y1);
+        line.setAttribute('x2', x2);
+        line.setAttribute('y2', y2);
+        if (className)
+            line.setAttribute('class', className);
+        return line;
+    }
+    drawCircle(overlaySource, x, y, radius, className, circle, overlayLayer) {
+        if (!circle) {
+            circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            this.addOverlay(overlaySource, circle, overlayLayer);
+        }
+        circle.setAttribute('cx', x);
+        circle.setAttribute('cy', y);
+        circle.setAttribute('r', radius);
+        if (className)
+            circle.setAttribute('class', className);
+        return circle;
+    }
+    drawRect(overlaySource, x, y, w, h, className, rect, overlayLayer) {
+        if (!rect) {
+            rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+            this.addOverlay(overlaySource, rect, overlayLayer);
+        }
+        rect.setAttribute('x', x);
+        rect.setAttribute('y', y);
+        rect.setAttribute('width', w);
+        rect.setAttribute('height', h);
+        if (className)
+            rect.setAttribute('class', className);
+        return rect;
+    }
+    drawPath(overlaySource, data, className, path, overlayLayer) {
+        if (!path) {
+            path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            this.addOverlay(overlaySource, path, overlayLayer);
+        }
+        path.setAttribute('d', data);
+        if (className)
+            path.setAttribute('class', className);
+        return path;
+    }
+    drawText(overlaySource, text, x, y, className, textEl, overlayLayer) {
+        if (!textEl) {
+            textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            this.addOverlay(overlaySource, textEl, overlayLayer);
+        }
+        textEl.setAttribute('x', x);
+        textEl.setAttribute('y', y);
+        textEl.textContent = text;
+        if (className)
+            textEl.setAttribute('class', className);
+        return textEl;
+    }
+    drawTextWithBackground(overlaySource, text, x, y, backgroundColor, className, existingEls, overlayLayer) {
+        if (!existingEls) {
+            let filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
+            filter.setAttribute("x", "0");
+            filter.setAttribute("y", "0");
+            filter.setAttribute("width", "1");
+            filter.setAttribute("height", "1");
+            filter.setAttribute("id", "solid_" + (++this._id));
+            let flood = document.createElementNS("http://www.w3.org/2000/svg", "feFlood");
+            flood.setAttribute("flood-color", backgroundColor);
+            filter.appendChild(flood);
+            let composite = document.createElementNS("http://www.w3.org/2000/svg", "feComposite");
+            composite.setAttribute("in", "SourceGraphic");
+            composite.setAttribute("operator", "xor");
+            filter.appendChild(composite);
+            this._defs.appendChild(filter);
+            let textEl1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            textEl1.setAttribute("filter", "url(#solid_" + this._id + ")");
+            let textEl2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            this.addOverlay(overlaySource, textEl1, overlayLayer);
+            this.addOverlay(overlaySource, textEl2, overlayLayer);
+            filter.setAttribute("overlay-source", overlaySource);
+            flood.setAttribute("overlay-source", overlaySource);
+            existingEls = [filter, flood, textEl1, textEl2];
+        }
+        existingEls[2].setAttribute('x', x);
+        existingEls[3].setAttribute('x', x);
+        existingEls[2].setAttribute('y', y);
+        existingEls[3].setAttribute('y', y);
+        existingEls[2].textContent = text;
+        existingEls[3].textContent = text;
+        if (className) {
+            existingEls[2].setAttribute('class', className);
+            existingEls[3].setAttribute('class', className);
+        }
+        return existingEls;
+    }
+}
+customElements.define(OverlayLayerView.is, OverlayLayerView);

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

@@ -0,0 +1,19 @@
+import { IElementDefinition } from '../../../services/elementsService/IElementDefinition.js';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { ITool } from './ITool.js';
+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/tools/DrawElementTool.js

@@ -0,0 +1,79 @@
+import { EventNames } from '../../../../enums/EventNames.js';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
+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.constructor.name, 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/tools/DrawEllipsisTool.d.ts

@@ -0,0 +1,16 @@
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { ITool } from './ITool.js';
+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/tools/DrawEllipsisTool.js

@@ -0,0 +1,98 @@
+import { EventNames } from '../../../../enums/EventNames.js';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+import { calculateNormLegth } from '../../../helper/PathDataPolyfill.js';
+import { DesignItem } from '../../../item/DesignItem.js';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
+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 = 10;
+        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.constructor.name, 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();
+                let coords = designerCanvas.getNormalizedElementCoordinates(this._path);
+                designerCanvas.overlayLayer.removeOverlay(this._path);
+                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                const mvX = coords.x - offset;
+                const mvY = coords.y - offset;
+                svg.appendChild(this._path);
+                this._path.setAttribute("cx", (this._cx - mvX).toString());
+                this._path.setAttribute("cy", (this._cy - mvY).toString());
+                this._path.removeAttribute("stroke");
+                this._path.removeAttribute("stroke-width");
+                svg.style.left = (mvX) + 'px';
+                svg.style.top = (mvY) + 'px';
+                svg.style.position = 'absolute';
+                svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
+                svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
+                svg.style.overflow = 'visible';
+                svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor;
+                svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness;
+                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/tools/DrawLineTool.d.ts

@@ -0,0 +1,14 @@
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { ITool } from './ITool.js';
+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/tools/DrawLineTool.js

@@ -0,0 +1,83 @@
+import { EventNames } from '../../../../enums/EventNames.js';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+import { straightenLine } from '../../../helper/PathDataPolyfill.js';
+import { DesignItem } from '../../../item/DesignItem.js';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
+export class DrawLineTool {
+    cursor = 'crosshair';
+    _path;
+    _startPoint;
+    _endPoint;
+    constructor() {
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        const offset = 10;
+        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.constructor.name, 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();
+                let coords = designerCanvas.getNormalizedElementCoordinates(this._path);
+                designerCanvas.overlayLayer.removeOverlay(this._path);
+                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                const mvX = coords.x - offset;
+                const mvY = coords.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());
+                this._path.removeAttribute("stroke");
+                this._path.removeAttribute("stroke-width");
+                svg.appendChild(this._path);
+                svg.style.left = (mvX) + 'px';
+                svg.style.top = (mvY) + 'px';
+                svg.style.position = 'absolute';
+                svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
+                svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
+                svg.style.overflow = 'visible';
+                svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor;
+                svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness;
+                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/tools/DrawPathTool.d.ts

@@ -0,0 +1,20 @@
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { ITool } from './ITool.js';
+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;
+}