@node-projects/web-component-designer 0.0.96 → 0.0.99

package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolbarPopupToolSelect.js

@@ -0,0 +1,42 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class DesignerToolbarPopupToolSelect extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .popup-tool-select {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 3px;
+          margin: 0 3px;
+          justify-content: center;
+      }
+
+      .tool {
+          height: 32px;
+          width: 32px;
+          background-color: rgb(255, 255, 255);
+          background-size: 65%;
+          background-repeat: no-repeat;
+          background-position: center center;
+          flex-shrink: 0;
+          border-bottom: 1px solid black;
+    }`;
+    static template = html `
+        <div id="popup-tool-select" class="popup-tool-select"></div>`;
+    _popupToolSelected;
+    //TODO: remove this element. it only contains a div, and binds events. 
+    //  this could also be done by the user of this
+    constructor() {
+        super();
+        this._popupToolSelected = this._getDomElement("popup-tool-select");
+    }
+    async insertToolContent(template) {
+        this._popupToolSelected.appendChild(template.content.cloneNode(true));
+        await this._waitForChildrenReady();
+        this._setupEventHandler();
+    }
+    _setupEventHandler() {
+        for (let tool of [...this._popupToolSelected.querySelectorAll("div.tool")]) {
+            tool.addEventListener("click", () => this._toolSelected(tool));
+        }
+    }
+}
+customElements.define('node-projects-designer-tools-popup-select', DesignerToolbarPopupToolSelect);

package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolsButtons.d.ts

@@ -0,0 +1,36 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { NamedTools } from "../NamedTools.js";
+export interface ToolTypeAsArg {
+    command_parameter: string;
+    open_popup?: boolean;
+    popup_category?: string;
+}
+export interface ToolPopupCategoryCollection {
+    category: string;
+    command: string;
+    command_parameter: string;
+    title: string;
+    tool: NamedTools;
+    background_url: string;
+    margin?: string;
+}
+export interface Seperator {
+    tool: 'seperator';
+}
+export declare class DesignerToolsButtons extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    readonly toolActivated: TypedEvent<[ToolPopupCategoryCollection, boolean]>;
+    private _toolButtons;
+    private _toolCollection;
+    private _toolbarhost;
+    ready(): void;
+    setToolsExternal(tools: ChildNode[]): void;
+    private _initToolCategories;
+    private _createToolEventListeners;
+    private _toolSelected;
+    markToolAsSelected(id: string): void;
+    private _unselectTools;
+    externalToolChange(command_name: string): void;
+    get toolCollection(): ToolPopupCategoryCollection[];
+}

package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolsButtons.js

@@ -0,0 +1,96 @@
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { assetsPath } from "../../../../../Constants.js";
+import { NamedTools } from "../NamedTools.js";
+import { DesignerToolRenderer } from "./designerToolRenderer.js";
+export class DesignerToolsButtons extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    .toolbar-host{
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+        border: 1px solid black;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .tool {
+        height: 22px;
+        width: 22px;
+        background-color: rgb(255, 255, 255);
+        background-size: 65%;
+        background-repeat: no-repeat;
+        background-position: center center;
+        flex-shrink: 0;
+        border-bottom: 1px solid black;
+    }
+
+    .tool[selected] {
+        background-color: darkgreen;
+    }
+
+    .tool:hover {
+        cursor: pointer;
+    }
+`;
+    static template = html `
+        <div id="toolbar-host" class="toolbar-host"></div>`;
+    toolActivated = new TypedEvent();
+    _toolButtons;
+    _toolCollection;
+    _toolbarhost;
+    ready() {
+        this._initToolCategories();
+        this._toolbarhost = this._getDomElement("toolbar-host");
+    }
+    setToolsExternal(tools) {
+        for (let tool of tools) {
+            this._toolbarhost.appendChild(tool);
+        }
+        this._createToolEventListeners();
+    }
+    _initToolCategories() {
+        let toolCollection = [];
+        toolCollection.push({ tool: NamedTools.Pointer, category: "pointer", command: "setTool", command_parameter: NamedTools.Pointer, title: "Pointer Tool", background_url: "url(" + assetsPath + "images/layout/PointerTool.svg)", margin: '0 0 5px 0' });
+        toolCollection.push({ tool: NamedTools.RectangleSelector, category: "selector", command: "setTool", command_parameter: NamedTools.RectangleSelector, title: "Rectangle Selector", background_url: "url(" + assetsPath + "images/layout/SelectRectTool.svg)" });
+        toolCollection.push({ tool: NamedTools.MagicWandSelector, category: "selector", command: "setTool", command_parameter: NamedTools.MagicWandSelector, title: "Magic Wand Selector", background_url: "url(" + assetsPath + "images/layout/MagicWandTool.svg)" });
+        toolCollection.push({ tool: NamedTools.Zoom, category: "zoom", command: "setTool", command_parameter: NamedTools.Zoom, title: "Zoom Tool", background_url: "url(" + assetsPath + "images/layout/ZoomTool.svg)" });
+        toolCollection.push({ tool: NamedTools.PickColor, category: "pick", command: "setTool", command_parameter: NamedTools.PickColor, title: "Color Picker", background_url: "url(" + assetsPath + "images/layout/ColorPickerTool.svg)", margin: '0 0 5px 0' });
+        toolCollection.push({ tool: NamedTools.DrawLine, category: "draw", command: "setTool", command_parameter: NamedTools.DrawLine, title: "Draw Line", background_url: "url(" + assetsPath + "images/layout/DrawLineTool.svg)" });
+        toolCollection.push({ tool: NamedTools.DrawPath, category: "draw", command: "setTool", command_parameter: NamedTools.DrawPath, title: "Draw Path", background_url: "url(" + assetsPath + "images/layout/DrawPathTool.svg)" });
+        toolCollection.push({ tool: NamedTools.DrawRect, category: "draw", command: "setTool", command_parameter: NamedTools.DrawRect, title: "Draw Rectangle", background_url: "url(" + assetsPath + "images/layout/DrawRectTool.svg)" });
+        toolCollection.push({ tool: NamedTools.DrawEllipsis, category: "draw", command: "setTool", command_parameter: NamedTools.DrawEllipsis, title: "Draw Ellipsis", background_url: "url(" + assetsPath + "images/layout/DrawEllipTool.svg)" });
+        toolCollection.push({ tool: NamedTools.Text, category: "text", command: "setTool", command_parameter: NamedTools.Text, title: "Text Tool", background_url: "url(" + assetsPath + "images/layout/TextTool.svg)" });
+        toolCollection.push({ tool: NamedTools.TextBoc, category: "text", command: "setTool", command_parameter: NamedTools.TextBoc, title: "Textbox Tool", background_url: "url(" + assetsPath + "images/layout/TextBoxTool.svg)" });
+        this._toolCollection = toolCollection;
+    }
+    _createToolEventListeners() {
+        this._toolButtons = [...this._toolbarhost.querySelectorAll('div.tool')];
+        for (let tool of this._toolButtons) {
+            tool.addEventListener("click", () => this._toolSelected(tool, false));
+        }
+    }
+    _toolSelected(tool, external) {
+        this.toolActivated.emit([DesignerToolRenderer.createObjectFromTool(tool), external]);
+    }
+    markToolAsSelected(id) {
+        this._unselectTools();
+        let selectedElement = this._toolButtons.find(t => t.getAttribute("data-command-parameter") == id);
+        selectedElement?.setAttribute("selected", "");
+    }
+    _unselectTools() {
+        for (let tool of this._toolButtons) {
+            tool.removeAttribute("selected");
+        }
+    }
+    externalToolChange(command_name) {
+        let tool = this._toolButtons.find(x => x.getAttribute("data-command-parameter") == command_name);
+        if (tool != null) {
+            this._toolSelected(tool, true);
+        }
+    }
+    get toolCollection() {
+        return this._toolCollection;
+    }
+}
+customElements.define('node-projects-designer-tools-buttons', DesignerToolsButtons);

package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/DrawToolPopup.d.ts

@@ -0,0 +1,5 @@
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+export declare class DrawToolPopup extends DesignerToolbarPopup {
+    private readonly templateToolSelect;
+    ready(): void;
+}

package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/DrawToolPopup.js

@@ -0,0 +1,21 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { assetsPath } from "../../../../../Constants";
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+import { DesignerToolbarPopupToolSelect } from "../designerToolbarGenerics/designerToolbarPopupToolSelect";
+export class DrawToolPopup extends DesignerToolbarPopup {
+    templateToolSelect = html `
+        <div class="tool" data-command="setTool" popup="draw" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
+    `;
+    ready() {
+        this._setTitle(this.getAttribute("title"));
+        let toolSelect = new DesignerToolbarPopupToolSelect();
+        toolSelect.insertToolContent(this.templateToolSelect);
+        let content = [];
+        content.push(toolSelect);
+        this._setContent(content);
+    }
+}
+customElements.define('node-projects-designer-popup-drawtool', DrawToolPopup);

package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/SelectorToolsPopup.d.ts

@@ -0,0 +1,8 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+import { ToolPopupCategoryCollection } from "../designerToolbarGenerics/designerToolsButtons";
+export declare class SelectorToolsPopup extends DesignerToolbarPopup {
+    private readonly templateToolSelect;
+    readonly toolActivated: TypedEvent<ToolPopupCategoryCollection>;
+    ready(): void;
+}

package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/SelectorToolsPopup.js

@@ -0,0 +1,23 @@
+import { html, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { assetsPath } from "../../../../../Constants";
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+import { DesignerToolbarPopupToolSelect } from "../designerToolbarGenerics/designerToolbarPopupToolSelect";
+export class SelectorToolsPopup extends DesignerToolbarPopup {
+    templateToolSelect = html `
+        <div class="tool" data-command="setTool" popup="selector" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/layout/SelectRectTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/layout/MagicWandTool.svg');"></div>
+    `;
+    toolActivated = new TypedEvent();
+    ready() {
+        this._setTitle(this.getAttribute("title"));
+        let toolSelect = new DesignerToolbarPopupToolSelect();
+        toolSelect.insertToolContent(this.templateToolSelect);
+        toolSelect.toolActivated.on((toolArg) => {
+            this.toolActivated.emit(toolArg);
+        });
+        let content = [];
+        content.push(toolSelect);
+        this._setContent(content);
+    }
+}
+customElements.define('node-projects-designer-popup-selector', SelectorToolsPopup);

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

@@ -0,0 +1,24 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+import { ServiceContainer } from "../../../services/ServiceContainer.js";
+import { DesignerView } from "../designerView.js";
+import "./designerToolbarGenerics/designerToolsButtons.js";
+import "./designerToolbarPopups/DrawToolPopup.js";
+import "./designerToolbarPopups/SelectorToolsPopup.js";
+export declare class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _designerView;
+    private _toolButtonsElem;
+    private _toolPopupElems;
+    private _serviceContainer;
+    private _prevSelected;
+    ready(): Promise<void>;
+    initialize(serviceContainer: ServiceContainer, designerView: DesignerView): void;
+    private _registerPopups;
+    private _toolButtonActivated;
+    private _activatePopup;
+    private _popupToolSelected;
+    private _isPopupScenario;
+    private _resetPreviousElements;
+    private _hideAllPopups;
+}

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

@@ -0,0 +1,115 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+import { CommandType } from "../../../../commandHandling/CommandType.js";
+import { DesignerToolRenderer } from "./designerToolbarGenerics/designerToolRenderer.js";
+import "./designerToolbarGenerics/designerToolsButtons.js";
+import "./designerToolbarPopups/DrawToolPopup.js";
+import "./designerToolbarPopups/SelectorToolsPopup.js";
+export class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+        node-projects-designer-tools-buttons {
+            height: 100%;
+            width: 100%;
+        }
+
+        #popups {
+            position: absolute;
+            top: calc(0px + 10px);
+            height: 100%;
+            left: calc(24px + 4px + 10px);
+        }
+
+        #popups > * {
+            display: none;
+        }
+
+        #popups > *[opened] {
+            display: block;
+        }`;
+    static template = html `
+        <node-projects-designer-tools-buttons id="tool-buttons"></node-projects-designer-tools-buttons>
+        <div id="popups">
+            <node-projects-designer-popup-drawtool popup="draw" class="popup" title="Drawtools" tabindex="-1"></node-projects-designer-popup-drawtool>
+            <node-projects-designer-popup-selector popup="selector" class="popup" title="Selectors" tabindex="-1"></node-projects-designer-popup-selector>
+        </div>`;
+    _designerView;
+    _toolButtonsElem;
+    _toolPopupElems;
+    _serviceContainer;
+    _prevSelected = [];
+    async ready() {
+        this._toolButtonsElem = this._getDomElement("tool-buttons");
+        this._toolButtonsElem.toolActivated.on((toolActivated => {
+            this._toolButtonActivated(toolActivated[0], toolActivated[1]);
+        }));
+        this._registerPopups();
+        let categories = [];
+        await this._waitForChildrenReady();
+        //TODO: warum macht das nicht alles die tools buttons liste selbst????
+        let tools = [];
+        for (let tool of this._toolButtonsElem.toolCollection) {
+            if (!categories.includes(tool.category)) {
+                tools.push(DesignerToolRenderer.createToolFromObject(tool));
+                categories.push(tool.category);
+            }
+        }
+        this._toolButtonsElem.setToolsExternal(tools);
+    }
+    initialize(serviceContainer, designerView) {
+        this._serviceContainer = serviceContainer;
+        this._serviceContainer.globalContext.onToolChanged.on((e) => {
+            let command_name;
+            let found = false;
+            this._serviceContainer.designerTools.forEach((tool, key) => {
+                if (tool === e.newValue && !found) {
+                    command_name = key;
+                    found = true;
+                    this._toolButtonsElem.externalToolChange(command_name);
+                }
+            });
+        });
+        this._designerView = designerView;
+    }
+    _registerPopups() {
+        let popups = this._getDomElement("popups");
+        this._toolPopupElems = [...popups.querySelectorAll('.popup')];
+        //DrawToolPopup
+        let drawToolPopup = popups.querySelectorAll("node-projects-designer-popup-drawtool")[0];
+        drawToolPopup.toolActivated.on((toolArg) => this._popupToolSelected(drawToolPopup, toolArg));
+    }
+    _toolButtonActivated(tool, external) {
+        this._hideAllPopups();
+        this._prevSelected[1] = this._prevSelected[0];
+        this._prevSelected[0] = tool;
+        if (!external) {
+            if (this._isPopupScenario()) {
+                this._resetPreviousElements();
+                this._activatePopup(tool.category);
+            }
+        }
+        this._toolButtonsElem.markToolAsSelected(tool.command_parameter);
+        let command = {
+            type: CommandType.setTool,
+            parameter: tool.command_parameter,
+        };
+        this._designerView.executeCommand(command);
+    }
+    _activatePopup(category) {
+        this._toolPopupElems.find(x => x.getAttribute("popup") == category)?.setAttribute("opened", "");
+    }
+    _popupToolSelected(popup, tool) {
+    }
+    _isPopupScenario() {
+        return JSON.stringify(this._prevSelected[1]) === JSON.stringify(this._prevSelected[0]);
+    }
+    _resetPreviousElements() {
+        for (let i = 0; i < this._prevSelected.length; i++) {
+            this._prevSelected[i] = null;
+        }
+    }
+    _hideAllPopups() {
+        for (let popup of this._toolPopupElems) {
+            popup.removeAttribute("opened");
+        }
+    }
+}
+customElements.define('node-projects-designer-tools-dock', DesignerToolsDock);

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

@@ -1,19 +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;
-}
+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/tools/DrawElementTool.js

@@ -1,79 +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);
-    }
-}
+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/tools/DrawEllipsisTool.d.ts

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