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

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

@@ -1,9 +1,10 @@
-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";
-export class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
+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%;
@@ -23,94 +24,92 @@ 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>
-    `;
-    _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);
+            <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/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;
+}