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

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;
+}

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

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

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

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

package/dist/elements/widgets/miniatureView/IMiniatureView.d.ts

@@ -1,2 +1,2 @@
-export interface IMiniatureView {
-}
+export interface IMiniatureView {
+}

package/dist/elements/widgets/miniatureView/IMiniatureView.js

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

package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.d.ts

@@ -1,10 +1,10 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { IDesignerCanvas } from "../designerView/IDesignerCanvas";
-import { IMiniatureView } from "./IMiniatureView";
-export declare class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend implements IMiniatureView {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _imgdiv;
-    constructor();
-    reRender(designerView: IDesignerCanvas): void;
-}
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { IDesignerCanvas } from "../designerView/IDesignerCanvas";
+import { IMiniatureView } from "./IMiniatureView";
+export declare class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend implements IMiniatureView {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _imgdiv;
+    constructor();
+    reRender(designerView: IDesignerCanvas): void;
+}

package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.js

@@ -1,21 +1,21 @@
-import { BaseCustomWebComponentLazyAppend, css, html, DomHelper } from '@node-projects/base-custom-webcomponent';
-export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
-    static style = css ``;
+import { BaseCustomWebComponentLazyAppend, css, html, DomHelper } from '@node-projects/base-custom-webcomponent';
+export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
+    static style = css ``;
     static template = html `
         <div class="imgdiv">
-        </div>`;
-    _imgdiv;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        this._imgdiv = this._getDomElement('imgdiv');
-    }
-    reRender(designerView) {
-        //@ts-ignore
-        html2canvas(designerView.rootDesignItem.element).then(canvas => {
-            DomHelper.removeAllChildnodes(this._imgdiv);
-            this._imgdiv.appendChild(canvas);
-        });
-    }
-}
-customElements.define('node-projects-html-2-canvas-miniature-view', Html2CanvasMiniatureView);
+        </div>`;
+    _imgdiv;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this._imgdiv = this._getDomElement('imgdiv');
+    }
+    reRender(designerView) {
+        //@ts-ignore
+        html2canvas(designerView.rootDesignItem.element).then(canvas => {
+            DomHelper.removeAllChildnodes(this._imgdiv);
+            this._imgdiv.appendChild(canvas);
+        });
+    }
+}
+customElements.define('node-projects-html-2-canvas-miniature-view', Html2CanvasMiniatureView);

package/dist/elements/widgets/paletteView/paletteElements.d.ts

@@ -1,10 +1,10 @@
-import { IElementDefinition } from '../../services/elementsService/IElementDefinition';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from '../../services/ServiceContainer';
-export declare class PaletteElements extends BaseCustomWebComponentLazyAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _table;
-    constructor();
-    loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[]): void;
-}
+import { IElementDefinition } from '../../services/elementsService/IElementDefinition';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { ServiceContainer } from '../../services/ServiceContainer';
+export declare class PaletteElements extends BaseCustomWebComponentLazyAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _table;
+    constructor();
+    loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[]): void;
+}

package/dist/elements/widgets/paletteView/paletteElements.js

@@ -1,7 +1,7 @@
-import { dragDropFormatNameElementDefinition } from '../../../Constants';
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
-import { DrawElementTool } from '../designerView/tools/DrawElementTool';
-export class PaletteElements extends BaseCustomWebComponentLazyAppend {
+import { dragDropFormatNameElementDefinition } from '../../../Constants';
+import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { DrawElementTool } from '../designerView/tools/DrawElementTool';
+export class PaletteElements extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
       display: block;
@@ -40,74 +40,74 @@ export class PaletteElements extends BaseCustomWebComponentLazyAppend {
       font-weight: bold;
       padding: 4px 14px;
     }
-    `;
+    `;
     static template = html `
     <table id="table">
     </table>
-  `;
-    _table;
-    constructor() {
-        super();
-        this._table = this._getDomElement('table');
-    }
-    loadElements(serviceContainer, elementDefintions) {
-        for (const elementDefintion of elementDefintions) {
-            let option = document.createElement("option");
-            option.value = elementDefintion.tag;
-            const tr = document.createElement("tr");
-            const tdEl = document.createElement("td");
-            const button = document.createElement("button");
-            button.innerText = elementDefintion.name ? elementDefintion.name : elementDefintion.tag;
-            button.draggable = true;
-            button.ondragstart = (e) => {
-                e.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(elementDefintion));
-                e.currentTarget.style.outline = "dashed";
-                if (elementDefintion.ghostElement) {
-                    if (typeof elementDefintion.ghostElement === 'string') {
-                        const range = document.createRange();
-                        range.selectNode(document.body);
-                        const fragment = range.createContextualFragment(elementDefintion.ghostElement);
-                        let elem = fragment.firstChild;
-                        elem.style.position = "absolute";
-                        elem.style.top = "-1000px";
-                        document.body.appendChild(elem);
-                        e.dataTransfer.setDragImage(elem, 0, 0);
-                        requestAnimationFrame(() => document.body.removeChild(elem));
-                    }
-                    else {
-                        e.dataTransfer.setDragImage(elementDefintion.ghostElement, 0, 0);
-                    }
-                }
-                else if (elementDefintion.defaultWidth && elementDefintion.defaultHeight && !elementDefintion.import) {
-                    let elem = document.createElement(elementDefintion.tag);
-                    if (elementDefintion.defaultContent)
-                        elem.innerHTML = elementDefintion.defaultContent;
-                    elem.style.width = elementDefintion.defaultWidth;
-                    elem.style.height = elementDefintion.defaultHeight;
-                    elem.style.position = "absolute";
-                    elem.style.top = "-" + elementDefintion.defaultHeight;
-                    document.body.appendChild(elem);
-                    e.dataTransfer.setDragImage(elem, 0, 0);
-                    requestAnimationFrame(() => document.body.removeChild(elem));
-                }
-            };
-            button.ondragend = (e) => {
-                elementDefintion.import = null;
-                e.currentTarget.style.outline = "none";
-            };
-            button.ontouchstart = (e) => {
-                e.preventDefault();
-            };
-            button.onclick = (x) => {
-                serviceContainer.globalContext.tool = new DrawElementTool(elementDefintion);
-            };
-            tdEl.appendChild(button);
-            tr.appendChild(tdEl);
-            const tdDesc = document.createElement("td");
-            tdDesc.innerText = elementDefintion.description ?? "";
-            tr.appendChild(tdDesc);
-            this._table.appendChild(tr);
-        }
-    }
-}
-customElements.define('node-projects-palette-elements', PaletteElements);
+  `;
+    _table;
+    constructor() {
+        super();
+        this._table = this._getDomElement('table');
+    }
+    loadElements(serviceContainer, elementDefintions) {
+        for (const elementDefintion of elementDefintions) {
+            let option = document.createElement("option");
+            option.value = elementDefintion.tag;
+            const tr = document.createElement("tr");
+            const tdEl = document.createElement("td");
+            const button = document.createElement("button");
+            button.innerText = elementDefintion.name ? elementDefintion.name : elementDefintion.tag;
+            button.draggable = true;
+            button.ondragstart = (e) => {
+                e.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(elementDefintion));
+                e.currentTarget.style.outline = "dashed";
+                if (elementDefintion.ghostElement) {
+                    if (typeof elementDefintion.ghostElement === 'string') {
+                        const range = document.createRange();
+                        range.selectNode(document.body);
+                        const fragment = range.createContextualFragment(elementDefintion.ghostElement);
+                        let elem = fragment.firstChild;
+                        elem.style.position = "absolute";
+                        elem.style.top = "-1000px";
+                        document.body.appendChild(elem);
+                        e.dataTransfer.setDragImage(elem, 0, 0);
+                        requestAnimationFrame(() => document.body.removeChild(elem));
+                    }
+                    else {
+                        e.dataTransfer.setDragImage(elementDefintion.ghostElement, 0, 0);
+                    }
+                }
+                else if (elementDefintion.defaultWidth && elementDefintion.defaultHeight && !elementDefintion.import) {
+                    let elem = document.createElement(elementDefintion.tag);
+                    if (elementDefintion.defaultContent)
+                        elem.innerHTML = elementDefintion.defaultContent;
+                    elem.style.width = elementDefintion.defaultWidth;
+                    elem.style.height = elementDefintion.defaultHeight;
+                    elem.style.position = "absolute";
+                    elem.style.top = "-" + elementDefintion.defaultHeight;
+                    document.body.appendChild(elem);
+                    e.dataTransfer.setDragImage(elem, 0, 0);
+                    requestAnimationFrame(() => document.body.removeChild(elem));
+                }
+            };
+            button.ondragend = (e) => {
+                elementDefintion.import = null;
+                e.currentTarget.style.outline = "none";
+            };
+            button.ontouchstart = (e) => {
+                e.preventDefault();
+            };
+            button.onclick = (x) => {
+                serviceContainer.globalContext.tool = new DrawElementTool(elementDefintion);
+            };
+            tdEl.appendChild(button);
+            tr.appendChild(tdEl);
+            const tdDesc = document.createElement("td");
+            tdDesc.innerText = elementDefintion.description ?? "";
+            tr.appendChild(tdDesc);
+            this._table.appendChild(tr);
+        }
+    }
+}
+customElements.define('node-projects-palette-elements', PaletteElements);

package/dist/elements/widgets/paletteView/paletteTreeView.d.ts

@@ -1,12 +1,12 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from '../../services/ServiceContainer';
-import { IElementsService } from '../../services/elementsService/IElementsService';
-export declare class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
-    private _treeDiv;
-    private _tree;
-    private _filter;
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    constructor();
-    loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
-}
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { IElementsService } from '../../services/elementsService/IElementsService';
+export declare class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
+    private _treeDiv;
+    private _tree;
+    private _filter;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor();
+    loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
+}