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

package/dist/elements/widgets/designerView/tools/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/tools/designerToolsDock.d.ts

@@ -3,6 +3,7 @@ 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;

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

@@ -3,6 +3,7 @@ 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 {
@@ -14,7 +15,7 @@ export class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
             position: absolute;
             top: calc(0px + 10px);
             height: 100%;
-            left: calc(32px + 4px + 10px);
+            left: calc(24px + 4px + 10px);
         }
 
         #popups > * {
@@ -23,15 +24,13 @@ export class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
 
         #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>
-        </div>
-    `;
+            <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;
@@ -45,6 +44,7 @@ export class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
         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)) {

package/dist/elements/widgets/designerView/tools/toolBar/AbstractDesignerToolbarButton.d.ts

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

package/dist/elements/widgets/designerView/tools/toolBar/AbstractDesignerToolbarButton.js

@@ -0,0 +1,5 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
+export class AbstractDesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
+    static style = css ``;
+    static template = html ``;
+}

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.d.ts

@@ -0,0 +1,16 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+import { ServiceContainer } from "../../../../services/ServiceContainer.js";
+import { DesignerView } from "../../designerView.js";
+import { DesignerToolbarButton } from './DesignerToolbarButton';
+export declare class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _toolButtonsElem;
+    private _serviceContainer;
+    private _popupContainer;
+    private _designerView;
+    constructor();
+    initialize(serviceContainer: ServiceContainer, designerView: DesignerView): void;
+    showPopup(designerToolbarButton: DesignerToolbarButton): void;
+    setTool(tool: string): void;
+}

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.js

@@ -0,0 +1,68 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+import { CommandType } from "../../../../../commandHandling/CommandType.js";
+//import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup.js";
+//import { ToolPopupCategoryCollection } from "../designerToolbarGenerics/designerToolsButtons.js";
+//import "../designerToolbarGenerics/designerToolsButtons.js";
+//import "./popups/DrawToolPopup.js";
+//import "./popups/SelectorToolsPopup.js";
+import { DesignerToolbarButton } from './DesignerToolbarButton';
+export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+        node-projects-designer-tools-buttons {
+            height: 100%;
+            width: 100%;
+        }        
+
+        #popup {
+            position: absolute;
+            top: calc(0px + 10px);
+            height: 100%;
+            left: calc(24px + 4px + 10px);
+        }`;
+    static template = html `
+        <div id="popup"></div>
+        <div id="toolButtons"></div>`;
+    _toolButtonsElem;
+    _serviceContainer;
+    _popupContainer;
+    _designerView;
+    constructor() {
+        super();
+        this._toolButtonsElem = this._getDomElement("toolButtons");
+        this._popupContainer = this._getDomElement("popup");
+    }
+    initialize(serviceContainer, designerView) {
+        this._serviceContainer = serviceContainer;
+        this._designerView = designerView;
+        for (let tb of this._serviceContainer.designViewToolbarButtons) {
+            this._toolButtonsElem.appendChild(tb.provideButton(designerView.designerCanvas));
+        }
+        this._serviceContainer.globalContext.onToolChanged.on((e) => {
+            for (const el of this._toolButtonsElem.children) {
+                if (el instanceof DesignerToolbarButton) {
+                    el.setActiveTool(e.newValue.name);
+                }
+            }
+        });
+    }
+    showPopup(designerToolbarButton) {
+        if (this._popupContainer.children.length) {
+            this._popupContainer.innerHTML = '';
+        }
+        else {
+            let instance;
+            if (typeof designerToolbarButton.popup === 'string')
+                instance = document.createElement(designerToolbarButton.popup);
+            else
+                instance = new designerToolbarButton.popup();
+            this._popupContainer.appendChild(instance);
+        }
+    }
+    setTool(tool) {
+        if (this._popupContainer.children.length) {
+            this._popupContainer.innerHTML = '';
+        }
+        this._designerView.designerCanvas.executeCommand({ type: CommandType.setTool, parameter: tool });
+    }
+}
+customElements.define('node-projects-designer-toolbar', DesignerToolbar);

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.d.ts

@@ -0,0 +1,19 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { NamedTools } from '../NamedTools.js';
+export declare class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    tools: Record<string | NamedTools, {
+        icon: string;
+    }>;
+    popup: string | (new (...args: any[]) => HTMLElement);
+    currentToolOnButton: string;
+    private _img;
+    private _div;
+    constructor(designerCanvas: IDesignerCanvas, tools: Record<string | NamedTools, {
+        icon: string;
+    }>);
+    showTool(name: string): void;
+    setActiveTool(name: string): void;
+}

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js

@@ -0,0 +1,62 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
+export class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    div {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      justify-content: center; 
+      align-items: center;
+      background-color: inherit;
+    }
+
+    div:hover {
+      background-color: darkgray;
+    }
+
+    img {
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+    }    
+    `;
+    static template = html `<div id="div"><img id="img"></div>`;
+    tools;
+    popup;
+    currentToolOnButton;
+    _img;
+    _div;
+    constructor(designerCanvas, tools) {
+        super();
+        this.tools = tools;
+        this._img = this._getDomElement('img');
+        this._div = this._getDomElement('div');
+        this._img.onclick = () => {
+            if (this.popup) {
+                this.getRootNode().host.showPopup(this);
+            }
+            else {
+                this.getRootNode().host.setTool(this.currentToolOnButton);
+            }
+        };
+        this.showTool(Object.getOwnPropertyNames(tools)[0]);
+    }
+    showTool(name) {
+        const tool = this.tools[name];
+        if (tool) {
+            this._img.title = name;
+            this._img.src = tool.icon;
+            this.currentToolOnButton = name;
+        }
+    }
+    setActiveTool(name) {
+        this.showTool(name);
+        const tool = this.tools[name];
+        if (tool) {
+            this._div.style.backgroundColor = 'lightgreen';
+        }
+        else {
+            this._div.style.backgroundColor = '';
+        }
+    }
+}
+customElements.define('node-projects-designer-toolbar-button', DesignerToolbarButton);

package/dist/elements/widgets/designerView/tools/toolBar/IDesignViewConfigButtonsProvider.d.ts

@@ -0,0 +1,5 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+export interface IDesignViewToolbarButtonProvider {
+    provideButton(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/tools/toolBar/IDesignViewConfigButtonsProvider.js

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

package/dist/elements/widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.d.ts

@@ -0,0 +1,4 @@
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+export interface IDesignViewToolbarButtonProvider {
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js

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

package/dist/elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
+import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
+export declare class DrawToolButtonProvider implements IDesignViewToolbarButtonProvider {
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js

@@ -0,0 +1,16 @@
+import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
+import { assetsPath } from "../../../../../../Constants.js";
+import { DrawToolPopup } from "../popups/DrawToolPopup.js";
+export class DrawToolButtonProvider {
+    provideButton(designerCanvas) {
+        const button = new DesignerToolbarButton(designerCanvas, {
+            'DrawLine': { icon: assetsPath + 'images/layout/DrawLineTool.svg' },
+            'DrawPath': { icon: assetsPath + 'images/layout/DrawPathTool.svg' },
+            'DrawRect': { icon: assetsPath + 'images/layout/DrawRectTool.svg' },
+            'DrawEllipsis': { icon: assetsPath + 'images/layout/DrawEllipTool.svg' },
+            'PickColor': { icon: assetsPath + 'images/layout/ColorPickerTool.svg' }
+        });
+        button.popup = DrawToolPopup;
+        return button;
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider copy.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
+import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
+export declare class PointerToolButtonProvider implements IDesignViewToolbarButtonProvider {
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider copy.js

@@ -0,0 +1,7 @@
+import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
+import { assetsPath } from "../../../../../../Constants.js";
+export class PointerToolButtonProvider {
+    provideButton(designerCanvas) {
+        return new DesignerToolbarButton({ 'PointerTool': { icon: assetsPath + 'images/layout/PointerTool.svg' } });
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
+import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
+export declare class PointerToolButtonProvider implements IDesignViewToolbarButtonProvider {
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js

@@ -0,0 +1,7 @@
+import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
+import { assetsPath } from "../../../../../../Constants.js";
+export class PointerToolButtonProvider {
+    provideButton(designerCanvas) {
+        return new DesignerToolbarButton(designerCanvas, { 'Pointer': { icon: assetsPath + 'images/layout/PointerTool.svg' } });
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider copy.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
+import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
+export declare class SelectorToolButtonProvider implements IDesignViewToolbarButtonProvider {
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider copy.js

@@ -0,0 +1,10 @@
+import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
+import { assetsPath } from "../../../../../../Constants.js";
+export class SelectorToolButtonProvider {
+    provideButton(designerCanvas) {
+        return new DesignerToolbarButton({
+            'RectangleSelector': { icon: assetsPath + 'images/layout/SelectRectTool.svg' },
+            'MagicWandSelector': { icon: assetsPath + 'images/layout/MagicWandTool.svg' }
+        });
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
+import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
+export declare class SelectorToolButtonProvider implements IDesignViewToolbarButtonProvider {
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js

@@ -0,0 +1,10 @@
+import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
+import { assetsPath } from "../../../../../../Constants.js";
+export class SelectorToolButtonProvider {
+    provideButton(designerCanvas) {
+        return new DesignerToolbarButton(designerCanvas, {
+            'RectangleSelector': { icon: assetsPath + 'images/layout/SelectRectTool.svg' },
+            'MagicWandSelector': { icon: assetsPath + 'images/layout/MagicWandTool.svg' }
+        });
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.d.ts

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
+import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
+export declare class SeperatorToolProvider implements IDesignViewToolbarButtonProvider {
+    constructor(distance: number);
+    distance: number;
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js

@@ -0,0 +1,11 @@
+export class SeperatorToolProvider {
+    constructor(distance) {
+        this.distance = distance;
+    }
+    distance;
+    provideButton(designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginTop = this.distance + 'px';
+        return div;
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
+import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
+export declare class TextToolButtonProvider implements IDesignViewToolbarButtonProvider {
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js

@@ -0,0 +1,7 @@
+import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
+import { assetsPath } from "../../../../../../Constants.js";
+export class TextToolButtonProvider {
+    provideButton(designerCanvas) {
+        return new DesignerToolbarButton(designerCanvas, { 'Text': { icon: assetsPath + 'images/layout/TextTool.svg' } });
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
+import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
+export declare class ZoomToolButtonProvider implements IDesignViewToolbarButtonProvider {
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js

@@ -0,0 +1,7 @@
+import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
+import { assetsPath } from "../../../../../../Constants.js";
+export class ZoomToolButtonProvider {
+    provideButton(designerCanvas) {
+        return new DesignerToolbarButton(designerCanvas, { 'Zoom': { icon: assetsPath + 'images/layout/ZoomTool.svg' } });
+    }
+}

package/dist/elements/widgets/designerView/tools/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 DesignerToolbar 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/tools/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 DesignerToolbar 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-toolbar', DesignerToolbar);

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.d.ts

@@ -0,0 +1,6 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    constructor();
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js

@@ -0,0 +1,50 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .container {
+          width: 150px;
+          min-height: 200px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: 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;
+      }
+      .tools {
+          display: flex;
+          flex-wrap: wrap;
+      }`;
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Draw</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" 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>
+              <div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/layout/ColorPickerTool.svg');"></div>
+            </div>
+          </main>
+        </div>`;
+    constructor() {
+        super();
+        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
+            let div = e;
+            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
+        }
+    }
+}
+customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectorToolsPopup.d.ts

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