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

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

@@ -10,6 +10,7 @@ export class MagicWandSelectorTool {
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._path.setAttribute('class', 'svg-selector');
                 this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
@@ -24,7 +25,7 @@ export class MagicWandSelectorTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
                 const inSelectionElements = [];
                 let point = designerCanvas.overlayLayer.createPoint();

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

@@ -10,5 +10,6 @@ export declare enum NamedTools {
     MagicWandSelector = "MagicWandSelector",
     RectangleSelector = "RectangleSelector",
     PickColor = "PickColor",
-    Text = "Text"
+    Text = "Text",
+    TextBoc = "TextBoc"
 }

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

@@ -12,4 +12,5 @@ export var NamedTools;
     NamedTools["RectangleSelector"] = "RectangleSelector";
     NamedTools["PickColor"] = "PickColor";
     NamedTools["Text"] = "Text";
+    NamedTools["TextBoc"] = "TextBoc";
 })(NamedTools || (NamedTools = {}));

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

@@ -5,6 +5,7 @@ export class PanTool {
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 break;
             case EventNames.PointerMove:
                 if (event.buttons == 1) {
@@ -13,7 +14,7 @@ export class PanTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 break;
         }
     }

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

@@ -8,7 +8,6 @@ export declare class PointerTool implements ITool {
     private _actionType?;
     private _actionStartedDesignItem?;
     private _previousEventName;
-    private _clickThroughElements;
     private _dragOverExtensionItem;
     private _dragExtensionItem;
     private _moveItemsOffset;
@@ -18,8 +17,8 @@ export declare class PointerTool implements ITool {
     dispose(): void;
     private _showContextMenu;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    private _resetTool;
     private _pointerActionTypeDrawSelection;
-    private _resetPointerEventsForClickThrough;
     private _pointerActionTypeDragOrSelect;
     keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -3,7 +3,6 @@ import { PointerActionType } from "../../../../enums/PointerActionType";
 import { DesignItem } from "../../../item/DesignItem";
 import { ExtensionType } from "../extensions/ExtensionType";
 import { NamedTools } from './NamedTools';
-import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 export class PointerTool {
     cursor = 'default';
     _movedSinceStartedAction = false;
@@ -11,7 +10,6 @@ export class PointerTool {
     _actionType;
     _actionStartedDesignItem;
     _previousEventName;
-    _clickThroughElements = [];
     _dragOverExtensionItem;
     _dragExtensionItem;
     _moveItemsOffset = { x: 0, y: 0 };
@@ -25,16 +23,18 @@ export class PointerTool {
     _showContextMenu(event, designerCanvas) {
         event.preventDefault();
         if (!event.shiftKey) {
-            let items = designerCanvas.getItemsBelowMouse(event);
-            if (items.indexOf(designerCanvas.instanceServiceContainer.selectionService.primarySelection?.element) >= 0)
-                designerCanvas.showDesignItemContextMenu(designerCanvas.instanceServiceContainer.selectionService.primarySelection, event);
-            else {
-                const designItem = DesignItem.GetOrCreateDesignItem(event.target, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) {
-                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+            let items = designerCanvas.elementsFromPoint(event.x, event.y);
+            for (let e of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                if (items.indexOf(e.element) >= 0) {
+                    designerCanvas.showDesignItemContextMenu(designerCanvas.instanceServiceContainer.selectionService.primarySelection, event);
+                    return;
                 }
-                designerCanvas.showDesignItemContextMenu(designItem, event);
             }
+            const designItem = DesignItem.GetOrCreateDesignItem(event.target, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+            if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) {
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+            }
+            designerCanvas.showDesignItemContextMenu(designItem, event);
         }
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
@@ -52,15 +52,14 @@ export class PointerTool {
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._movedSinceStartedAction = false;
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 break;
         }
-        if (!event.altKey)
-            this._resetPointerEventsForClickThrough();
         if (!currentElement)
             return;
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
@@ -100,39 +99,38 @@ export class PointerTool {
                 if (currentDesignItem !== designerCanvas.rootDesignItem)
                     designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
             }
-            this._actionType = null;
-            this._actionStartedDesignItem = null;
-            this._movedSinceStartedAction = false;
-            this._initialPoint = null;
+            this._resetTool();
         }
         this._previousEventName = event.type;
     }
+    _resetTool() {
+        this._actionType = null;
+        this._actionStartedDesignItem = null;
+        this._movedSinceStartedAction = false;
+        this._initialPoint = null;
+    }
     _pointerActionTypeDrawSelection(designerView, event, currentElement) {
         const drawSelectionTool = designerView.serviceContainer.designerTools.get(NamedTools.DrawSelection);
         if (drawSelectionTool) {
+            this._resetTool();
             drawSelectionTool.pointerEventHandler(designerView, event, currentElement);
         }
     }
-    _resetPointerEventsForClickThrough() {
-        if (!this._clickThroughElements.length)
-            return;
-        for (const e of this._clickThroughElements) {
-            e[0].element.style.pointerEvents = e[1];
-        }
-        this._clickThroughElements = [];
-    }
     _pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint) {
         if (event.altKey) {
             if (event.type == EventNames.PointerDown) {
-                this._clickThroughElements.push([currentDesignItem, currentDesignItem.element.style.pointerEvents]);
-                currentDesignItem.element.style.pointerEvents = 'none';
+                const currentSelection = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
+                if (currentSelection) {
+                    const elements = designerCanvas.elementsFromPoint(event.x, event.y);
+                    let idx = elements.indexOf(currentSelection.element);
+                    if (idx >= 0) {
+                        idx++;
+                    }
+                    let currentElement = elements[idx];
+                    if (currentElement)
+                        currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                }
             }
-            let currentElement = designerCanvas.elementFromPoint(event.x, event.y);
-            if (DomHelper.getHost(currentElement) !== designerCanvas.overlayLayer)
-                currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-        }
-        else {
-            this._resetPointerEventsForClickThrough();
         }
         switch (event.type) {
             case EventNames.PointerDown:
@@ -183,103 +181,41 @@ export class PointerTool {
                             let newContainerElementDesignItem = null;
                             let newContainerService = null;
                             if (canLeave) {
-                                //search for containers below mouse cursor.
-                                //to do this, we need to disable pointer events for each in a loop and search wich element is there
-                                let backupPEventsMap = new Map();
-                                let newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
-                                try {
-                                    checkAgain: while (newContainerElement != null) {
-                                        if (newContainerElement == this._actionStartedDesignItem.parent.element) {
-                                            newContainerElement = null;
-                                        }
-                                        else if (newContainerElement == designerCanvas.rootDesignItem.element) {
-                                            newContainerElementDesignItem = designerCanvas.rootDesignItem;
-                                            const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                                            newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                                            break;
-                                        }
-                                        else if (newContainerElement.getRootNode() !== designerCanvas.shadowRoot || newContainerElement === designerCanvas.overlayLayer || newContainerElement.parentElement === designerCanvas.overlayLayer) {
-                                            backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
-                                            newContainerElement.style.pointerEvents = 'none';
-                                            const old = newContainerElement;
-                                            newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
-                                            if (old === newContainerElement) {
-                                                newContainerElementDesignItem = null;
-                                                newContainerService = null;
+                                const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y);
+                                for (let e of elementsFromPoint) {
+                                    if (e == this._actionStartedDesignItem.element) {
+                                        continue;
+                                    }
+                                    else if (e == this._actionStartedDesignItem.parent.element) {
+                                        break;
+                                    }
+                                    else if (e == designerCanvas.rootDesignItem.element) {
+                                        newContainerElementDesignItem = designerCanvas.rootDesignItem;
+                                        const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                                        newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                                        break;
+                                    }
+                                    else if (false) {
+                                        //check we don't try to move a item over one of its children..
+                                    }
+                                    else {
+                                        newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                                        const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                                        newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                                        if (newContainerService) {
+                                            if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
                                                 break;
                                             }
-                                        }
-                                        else if (newContainerElement == this._actionStartedDesignItem.element || newContainerElement == currentDesignItem.element) {
-                                            backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
-                                            newContainerElement.style.pointerEvents = 'none';
-                                            const old = newContainerElement;
-                                            newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
-                                            if (old === newContainerElement) {
+                                            else {
                                                 newContainerElementDesignItem = null;
                                                 newContainerService = null;
-                                                newContainerElement = null;
-                                                break;
+                                                continue;
                                             }
                                         }
-                                        else {
-                                            //check we don't try to move a item over one of its children...
-                                            let par = newContainerElement.parentElement;
-                                            while (par) {
-                                                if (par == this._actionStartedDesignItem.element) {
-                                                    backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
-                                                    newContainerElement.style.pointerEvents = 'none';
-                                                    const old = newContainerElement;
-                                                    newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
-                                                    if (old === newContainerElement)
-                                                        break;
-                                                    continue checkAgain;
-                                                }
-                                                par = par.parentElement;
-                                            }
-                                            //end check
-                                            newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                                            const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                                            newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                                            if (newContainerService) {
-                                                if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
-                                                    break;
-                                                }
-                                                else {
-                                                    newContainerElementDesignItem = null;
-                                                    newContainerService = null;
-                                                }
-                                            }
-                                            backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
-                                            newContainerElement.style.pointerEvents = 'none';
-                                            const newC = designerCanvas.elementFromPoint(event.x, event.y);
-                                            if (newContainerElement === newC) {
-                                                newContainerElement = null;
-                                                break;
-                                            }
-                                            newContainerElement = newC;
-                                        }
-                                    }
-                                }
-                                finally {
-                                    for (let e of backupPEventsMap.entries()) {
-                                        e[0].style.pointerEvents = e[1];
-                                    }
-                                }
-                                if (newContainerElement != null) { //Check if container is in designer canvas....
-                                    let p = newContainerElement;
-                                    while (p != null) {
-                                        if (p === designerCanvas.rootDesignItem.element)
-                                            break;
-                                        p = p.parentElement;
-                                    }
-                                    if (p == null) {
-                                        newContainerService = null;
-                                        newContainerElement = null;
                                     }
                                 }
                                 //if we found a new enterable container create extensions 
-                                if (newContainerElement != null) {
-                                    const newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                                if (newContainerElementDesignItem != null) {
                                     if (this._dragOverExtensionItem != newContainerElementDesignItem) {
                                         designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
                                         designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver);
@@ -320,7 +256,7 @@ export class PointerTool {
                 {
                     if (!this._movedSinceStartedAction || this._actionType == PointerActionType.DragOrSelect) {
                         if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey)
-                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([this._actionStartedDesignItem]);
                         return;
                     }
                     if (this._movedSinceStartedAction) {

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

@@ -12,6 +12,7 @@ export class RectangleSelectorTool {
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._initialPoint = currentPoint;
                 if (!this._rect)
                     this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -46,7 +47,7 @@ export class RectangleSelectorTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
                 const inSelectionElements = [];
                 let point = designerCanvas.overlayLayer.createPoint();

package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolRenderer.d.ts

@@ -0,0 +1,5 @@
+import { ToolPopupCategoryCollection } from "./designerToolsButtons";
+export declare abstract class DesignerToolRenderer {
+    static createToolFromObject(tool: ToolPopupCategoryCollection): ChildNode;
+    static createObjectFromTool(tool: HTMLDivElement): ToolPopupCategoryCollection;
+}

package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolRenderer.js

@@ -0,0 +1,19 @@
+//TODO: rename, this is no renderer, it's a static class so more a helper
+export class DesignerToolRenderer {
+    static createToolFromObject(tool) {
+        let template = document.createElement('template');
+        template.innerHTML = "<div class='tool' data-command='setTool' data-command-parameter=" + tool.command_parameter + " popup=" + tool.category + " title=" + tool.title + " style='background-image:" + tool.background_url + ";'></div>";
+        return template.content.childNodes[0];
+    }
+    static createObjectFromTool(tool) {
+        let collector = {
+            category: tool.getAttribute("popup"),
+            command: tool.getAttribute("data-command"),
+            command_parameter: tool.getAttribute("data-command-parameter"),
+            title: tool.getAttribute("title"),
+            tool: tool.getAttribute("data-command-parameter"),
+            background_url: tool.style.backgroundImage,
+        };
+        return collector;
+    }
+}

package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/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/designerToolbarGenerics/designerToolbarPopup.js

@@ -0,0 +1,37 @@
+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;
+        }
+    `;
+    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/designerView/tools/designerToolbarGenerics/designerToolbarPopupToolSelect.d.ts

@@ -0,0 +1,12 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { ToolPopupCategoryCollection } from "./designerToolsButtons";
+export declare class DesignerToolbarPopupToolSelect extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _popupToolSelected;
+    constructor();
+    readonly toolActivated: TypedEvent<ToolPopupCategoryCollection>;
+    insertToolContent(template: HTMLTemplateElement): Promise<void>;
+    private _setupEventHandler;
+    private _toolSelected;
+}

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

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

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

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

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

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

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

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