@node-projects/web-component-designer 0.0.65 → 0.0.69

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js

@@ -1,14 +1,14 @@
-import { CommandType } from "../../../../../commandHandling/CommandType";
-export class ZMoveContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        return true;
-    }
-    provideContextMenuItems(event, designerView, designItem) {
-        return [
-            { title: 'to front', action: () => { designerView.executeCommand({ type: CommandType.moveToFront }); } },
-            { title: 'move forward', action: () => { designerView.executeCommand({ type: CommandType.moveForward }); } },
-            { title: 'move backward', action: () => { designerView.executeCommand({ type: CommandType.moveBackward }); } },
-            { title: 'to back', action: () => { designerView.executeCommand({ type: CommandType.moveToBack }); } },
-        ];
-    }
-}
+import { CommandType } from "../../../../../commandHandling/CommandType";
+export class ZMoveContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: 'to front', action: () => { designerView.executeCommand({ type: CommandType.moveToFront }); } },
+            { title: 'move forward', action: () => { designerView.executeCommand({ type: CommandType.moveForward }); } },
+            { title: 'move backward', action: () => { designerView.executeCommand({ type: CommandType.moveBackward }); } },
+            { title: 'to back', action: () => { designerView.executeCommand({ type: CommandType.moveToBack }); } },
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.d.ts

@@ -1,11 +1,11 @@
-import { IDesignItem } from "../../../../item/IDesignItem.js";
-import { IDesignerCanvas } from "../../IDesignerCanvas.js";
-import { IExtensionManager } from "../IExtensionManger.js";
-import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
-import { AbstractExtensionBase } from '../AbstractExtensionBase';
-export declare abstract class AbstractDesignerPointerExtension extends AbstractExtensionBase implements IDesignerPointerExtension {
-    protected extendedItem: IDesignItem;
-    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
-    abstract refresh(event: PointerEvent): any;
-    abstract dispose(): any;
-}
+import { IDesignItem } from "../../../../item/IDesignItem.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { IExtensionManager } from "../IExtensionManger.js";
+import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
+import { AbstractExtensionBase } from '../AbstractExtensionBase';
+export declare abstract class AbstractDesignerPointerExtension extends AbstractExtensionBase implements IDesignerPointerExtension {
+    protected extendedItem: IDesignItem;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
+    abstract refresh(event: PointerEvent): any;
+    abstract dispose(): any;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js

@@ -1,11 +1,11 @@
-import { AbstractExtensionBase } from '../AbstractExtensionBase';
-//todo:
-//move draw functions to overlay layer
-//implement designerpointerextension
-//create ruler
-export class AbstractDesignerPointerExtension extends AbstractExtensionBase {
-    extendedItem;
-    constructor(extensionManager, designerCanvas) {
-        super(extensionManager, designerCanvas);
-    }
-}
+import { AbstractExtensionBase } from '../AbstractExtensionBase';
+//todo:
+//move draw functions to overlay layer
+//implement designerpointerextension
+//create ruler
+export class AbstractDesignerPointerExtension extends AbstractExtensionBase {
+    extendedItem;
+    constructor(extensionManager, designerCanvas) {
+        super(extensionManager, designerCanvas);
+    }
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.d.ts

@@ -1,13 +1,13 @@
-import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
-export declare class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
-    private _lineOffset;
-    private _lineLength;
-    private _circle;
-    private _line1;
-    private _line2;
-    private _line3;
-    private _line4;
-    refresh(event: PointerEvent): void;
-    dispose(): void;
-    style: CSSStyleSheet;
-}
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
+    private _lineOffset;
+    private _lineLength;
+    private _circle;
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+    style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js

@@ -1,26 +1,26 @@
-import { css } from '@node-projects/base-custom-webcomponent';
-import { OverlayLayer } from '../OverlayLayer.js';
-import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
-export class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
-    _lineOffset = 5;
-    _lineLength = 10;
-    _circle;
-    _line1;
-    _line2;
-    _line3;
-    _line4;
-    refresh(event) {
-        let mp = this.designerCanvas.getNormalizedEventCoordinates(event);
-        this._circle = this._drawCircle(mp.x, mp.y, 1, 'svg-cursor-line', this._circle, OverlayLayer.Foregorund);
-        this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foregorund);
-        this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foregorund);
-        this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foregorund);
-        this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foregorund);
-    }
-    dispose() {
-        super._removeAllOverlays();
-    }
+import { css } from '@node-projects/base-custom-webcomponent';
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
+    _lineOffset = 5;
+    _lineLength = 10;
+    _circle;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    refresh(event) {
+        let mp = this.designerCanvas.getNormalizedEventCoordinates(event);
+        this._circle = this._drawCircle(mp.x, mp.y, 1, 'svg-cursor-line', this._circle, OverlayLayer.Foregorund);
+        this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foregorund);
+        this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foregorund);
+        this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foregorund);
+        this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
     style = css `
     .svg-cursor-line { stroke: black; pointer-events: none }
-  `;
-}
+  `;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.d.ts

@@ -1,7 +1,7 @@
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { IDesignerPointerExtension } from './IDesignerPointerExtension.js';
-import { IDesignerPointerExtensionProvider } from './IDesignerPointerExtensionProvider.js';
-export declare class CursorLinePointerExtensionProvider implements IDesignerPointerExtensionProvider {
-    getExtension(designerCanvas: IDesignerCanvas): IDesignerPointerExtension;
-    style: CSSStyleSheet;
-}
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerPointerExtension } from './IDesignerPointerExtension.js';
+import { IDesignerPointerExtensionProvider } from './IDesignerPointerExtensionProvider.js';
+export declare class CursorLinePointerExtensionProvider implements IDesignerPointerExtensionProvider {
+    getExtension(designerCanvas: IDesignerCanvas): IDesignerPointerExtension;
+    style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js

@@ -1,10 +1,10 @@
-import { css } from '@node-projects/base-custom-webcomponent';
-import { CursorLinePointerExtension } from './CursorLinePointerExtension.js';
-export class CursorLinePointerExtensionProvider {
-    getExtension(designerCanvas) {
-        return new CursorLinePointerExtension(designerCanvas.extensionManager, designerCanvas);
-    }
+import { css } from '@node-projects/base-custom-webcomponent';
+import { CursorLinePointerExtension } from './CursorLinePointerExtension.js';
+export class CursorLinePointerExtensionProvider {
+    getExtension(designerCanvas) {
+        return new CursorLinePointerExtension(designerCanvas.extensionManager, designerCanvas);
+    }
     style = css `
     .svg-cursor-line { stroke: black; pointer-events: none }
-  `;
-}
+  `;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.d.ts

@@ -1,5 +1,5 @@
-import { IDisposable } from "../../../../../interfaces/IDisposable.js";
-export interface IDesignerPointerExtension extends IDisposable {
-    refresh(event: PointerEvent): any;
-    style?: CSSStyleSheet;
-}
+import { IDisposable } from "../../../../../interfaces/IDisposable.js";
+export interface IDesignerPointerExtension extends IDisposable {
+    refresh(event: PointerEvent): any;
+    style?: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js

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

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.d.ts

@@ -1,6 +1,6 @@
-import { IDesignerCanvas } from "../../IDesignerCanvas.js";
-import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
-export interface IDesignerPointerExtensionProvider {
-    getExtension(designerView: IDesignerCanvas): IDesignerPointerExtension;
-    style?: CSSStyleSheet;
-}
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
+export interface IDesignerPointerExtensionProvider {
+    getExtension(designerView: IDesignerCanvas): IDesignerPointerExtension;
+    style?: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js

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

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

@@ -1,5 +1,5 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-}
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+}

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

@@ -1,9 +1,9 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-export class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
-    static style = css ``;
+import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
+export class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
+    static style = css ``;
     static template = html `
     <div>
       <input type="text">
     </div>
-  `;
-}
+  `;
+}

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

@@ -1,25 +1,25 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { OverlayLayer } from './extensions/OverlayLayer.js';
-import { ServiceContainer } from '../../services/ServiceContainer';
-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;
-    constructor(serviceContainer: ServiceContainer);
-    private _initialize;
-    addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
-    removeOverlay(element: SVGGraphicsElement): void;
-    removeAllNodesWithClass(className: string): void;
-    removeAllOverlays(): void;
-    createPoint(): DOMPointInit;
-    elementFromPoint(x: number, y: number): Element;
-    drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
-    drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
-    drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
-    drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
-}
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { OverlayLayer } from './extensions/OverlayLayer.js';
+import { ServiceContainer } from '../../services/ServiceContainer';
+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;
+    constructor(serviceContainer: ServiceContainer);
+    private _initialize;
+    addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
+    removeOverlay(element: SVGGraphicsElement): void;
+    removeAllNodesWithClass(className: string): void;
+    removeAllOverlays(): void;
+    createPoint(): DOMPointInit;
+    elementFromPoint(x: number, y: number): Element;
+    drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
+    drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+}

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

@@ -1,12 +1,12 @@
-import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { OverlayLayer } from './extensions/OverlayLayer.js';
-export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
+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;">
       <g id="background"></g>
       <g id="normal"></g>
       <g id="foreground"></g>
-    </svg>`;
+    </svg>`;
     static style = css `
     svg {
       width: 100%;
@@ -20,129 +20,129 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     .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;
-    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._initialize();
-    }
-    _initialize() {
-        let styles = [OverlayLayerView.style];
-        for (const extList of this._serviceContainer.designerExtensions) {
-            for (const ext of extList[1]) {
-                if (ext.style) {
-                    styles.push(ext.style);
-                }
-            }
-        }
-        for (const ext of this._serviceContainer.designerPointerExtensions) {
-            if (ext.style) {
-                styles.push(ext.style);
-            }
-        }
-        this.shadowRoot.adoptedStyleSheets = styles;
-    }
-    addOverlay(element, overlayLayer = OverlayLayer.Normal) {
-        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 {
-            if (element)
-                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);
-    }
-    drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
-        if (!line) {
-            line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            this.addOverlay(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(x, y, radius, className, circle, overlayLayer) {
-        if (!circle) {
-            circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-            this.addOverlay(circle, overlayLayer);
-        }
-        circle.setAttribute('cx', x);
-        circle.setAttribute('cy', y);
-        circle.setAttribute('r', radius);
-        if (className)
-            circle.setAttribute('class', className);
-        return circle;
-    }
-    drawRect(x, y, w, h, className, rect, overlayLayer) {
-        if (!rect) {
-            rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-            this.addOverlay(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;
-    }
-    drawText(text, x, y, className, textEl, overlayLayer) {
-        if (!textEl) {
-            textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
-            this.addOverlay(textEl, overlayLayer);
-        }
-        textEl.setAttribute('x', x);
-        textEl.setAttribute('y', y);
-        textEl.textContent = text;
-        if (className)
-            textEl.setAttribute('class', className);
-        return textEl;
-    }
-}
-customElements.define(OverlayLayerView.is, OverlayLayerView);
+    .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }`;
+    static is = 'node-projects-overlay-layer-view';
+    _serviceContainer;
+    _svg;
+    _gBackground;
+    _gNormal;
+    _gForeground;
+    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._initialize();
+    }
+    _initialize() {
+        let styles = [OverlayLayerView.style];
+        for (const extList of this._serviceContainer.designerExtensions) {
+            for (const ext of extList[1]) {
+                if (ext.style) {
+                    styles.push(ext.style);
+                }
+            }
+        }
+        for (const ext of this._serviceContainer.designerPointerExtensions) {
+            if (ext.style) {
+                styles.push(ext.style);
+            }
+        }
+        this.shadowRoot.adoptedStyleSheets = styles;
+    }
+    addOverlay(element, overlayLayer = OverlayLayer.Normal) {
+        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 {
+            if (element)
+                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);
+    }
+    drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+        if (!line) {
+            line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            this.addOverlay(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(x, y, radius, className, circle, overlayLayer) {
+        if (!circle) {
+            circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            this.addOverlay(circle, overlayLayer);
+        }
+        circle.setAttribute('cx', x);
+        circle.setAttribute('cy', y);
+        circle.setAttribute('r', radius);
+        if (className)
+            circle.setAttribute('class', className);
+        return circle;
+    }
+    drawRect(x, y, w, h, className, rect, overlayLayer) {
+        if (!rect) {
+            rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+            this.addOverlay(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;
+    }
+    drawText(text, x, y, className, textEl, overlayLayer) {
+        if (!textEl) {
+            textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            this.addOverlay(textEl, overlayLayer);
+        }
+        textEl.setAttribute('x', x);
+        textEl.setAttribute('y', y);
+        textEl.textContent = text;
+        if (className)
+            textEl.setAttribute('class', className);
+        return textEl;
+    }
+}
+customElements.define(OverlayLayerView.is, OverlayLayerView);

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

@@ -1,18 +1,18 @@
-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;
-    private _onPointerDown;
-    private _onPointerMove;
-    private _onPointerUp;
-}
+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;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+}