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

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

@@ -1,30 +0,0 @@
-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

@@ -1,211 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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;
-}