@node-projects/web-component-designer 0.0.125 → 0.0.127

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

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

@@ -1,10 +0,0 @@
-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/designerToolsDock.d.ts

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

@@ -1,115 +0,0 @@
-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/SelectorToolsPopup.d.ts

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

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

@@ -1,23 +0,0 @@
-import { html, TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { assetsPath } from "../../../../../../Constants";
-import { DesignerToolbarPopup } from "./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/toolBar/popups/designerToolbarPopup.d.ts

@@ -1,8 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-export declare abstract class DesignerToolbarPopup extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    ready(): void;
-    protected _setTitle(title: string): void;
-    protected _setContent(elements: HTMLElement[]): void;
-}

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

@@ -1,41 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-export class DesignerToolbarPopup 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;
-        }
-
-        * {
-          pointer-events: auto;
-        }
-    `;
-    static template = html `
-        <div class="container">
-            <header><h2 id="title" style="margin: 0;"></h2></header>
-            <main id="content-area"></main>
-        </div>
-    `;
-    //TODO: remove this class,
-    //     i think the popups need no base, okay if they need one the should at least be normal elmeents
-    // and also the expicit popup should set the size, not the base class. maybe one needs to be bigger, one smaller...
-    ready() {
-        this._setTitle(this.getAttribute("title"));
-    }
-    _setTitle(title) {
-        this._getDomElement("title").innerHTML = title;
-    }
-    _setContent(elements) {
-        let contentArea = this._getDomElement("content-area");
-        for (let elem of elements) {
-            contentArea.appendChild(elem);
-        }
-    }
-}