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

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

@@ -1,84 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames';
-import { DesignItem } from '../../../item/DesignItem';
-import { OverlayLayer } from '../extensions/OverlayLayer.js';
-export class RectangleSelectorTool {
-    cursor = 'progress';
-    _rect;
-    _initialPoint;
-    activated(serviceContainer) {
-    }
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        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");
-                this._rect.setAttribute('class', 'svg-selector');
-                this._rect.setAttribute('x', (this._initialPoint.x * designerCanvas.scaleFactor));
-                this._rect.setAttribute('y', (this._initialPoint.y * designerCanvas.scaleFactor));
-                this._rect.setAttribute('width', 0);
-                this._rect.setAttribute('height', 0);
-                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._initialPoint) {
-                    let w = currentPoint.x - this._initialPoint.x;
-                    let h = currentPoint.y - this._initialPoint.y;
-                    if (w >= 0) {
-                        this._rect.setAttribute('x', this._initialPoint.x);
-                        this._rect.setAttribute('width', w);
-                    }
-                    else {
-                        this._rect.setAttribute('x', currentPoint.x);
-                        this._rect.setAttribute('width', (-1 * w));
-                    }
-                    if (h >= 0) {
-                        this._rect.setAttribute('y', this._initialPoint.y);
-                        this._rect.setAttribute('height', h);
-                    }
-                    else {
-                        this._rect.setAttribute('y', currentPoint.y);
-                        this._rect.setAttribute('height', (-1 * h));
-                    }
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.releaseActiveTool();
-                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
-                const inSelectionElements = [];
-                let point = designerCanvas.overlayLayer.createPoint();
-                for (let e of elements) {
-                    let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
-                    point.x = elementRect.x;
-                    point.y = elementRect.y;
-                    const p1 = this._rect.isPointInFill(point);
-                    point.x = elementRect.x + elementRect.width;
-                    point.y = elementRect.y;
-                    const p2 = p1 && this._rect.isPointInFill(point);
-                    point.x = elementRect.x;
-                    point.y = elementRect.y + elementRect.height;
-                    const p3 = p2 && this._rect.isPointInFill(point);
-                    point.x = elementRect.x + elementRect.width;
-                    point.y = elementRect.y + elementRect.height;
-                    const p4 = p3 && this._rect.isPointInFill(point);
-                    if (p4) {
-                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                        inSelectionElements.push(desItem);
-                    }
-                }
-                designerCanvas.overlayLayer.removeOverlay(this._rect);
-                this._rect = null;
-                this._initialPoint = null;
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                break;
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    dispose() {
-    }
-}

package/dist/elements/widgets/designerView/toolBar/TextTool.d.ts

@@ -1,11 +0,0 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-export declare class TextTool implements ITool {
-    constructor();
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-    readonly cursor = "text";
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-}

package/dist/elements/widgets/designerView/toolBar/TextTool.js

@@ -1,33 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames.js';
-import { DesignItem } from '../../../item/DesignItem.js';
-import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
-import { ExtensionType } from '../extensions/ExtensionType.js';
-export class TextTool {
-    constructor() {
-    }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-    cursor = 'text';
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        switch (event.type) {
-            case EventNames.PointerDown:
-                const span = document.createElement('span');
-                const di = DesignItem.createDesignItemFromInstance(span, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                di.setStyle('position', 'absolute');
-                di.setStyle('left', currentPoint.x + 'px');
-                di.setStyle('top', currentPoint.y + 'px');
-                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                //TODO - don't apply doubleclick extension (maybe it is not the doubleclick one) - apply edit text extesion directly
-                designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick);
-                setTimeout(() => {
-                    span.focus();
-                }, 50);
-                break;
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-}

package/dist/elements/widgets/designerView/toolBar/ZoomTool.d.ts

@@ -1,17 +0,0 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-export declare class ZoomTool implements ITool {
-    cursor: string;
-    private _rect;
-    private _startPoint;
-    private _endPoint;
-    private _pointerMovementTolerance;
-    private _zoomStepSize;
-    activated(serviceContainer: ServiceContainer): void;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    private _zoomOnto;
-    private _isPositionEqual;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/toolBar/ZoomTool.js

@@ -1,79 +0,0 @@
-import { EventNames, OverlayLayer } from '../../../../index.js';
-export class ZoomTool {
-    cursor = 'zoom-in';
-    _rect;
-    _startPoint;
-    _endPoint;
-    _pointerMovementTolerance = 5;
-    _zoomStepSize = 0.2; //number x 100 = Scale in percent
-    activated(serviceContainer) {
-    }
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const eventPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        switch (event.type) {
-            case EventNames.PointerDown:
-                this._startPoint = eventPoint;
-                if (!this._rect)
-                    this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-                this._rect.setAttribute('class', 'svg-selector');
-                this._rect.setAttribute('x', (this._startPoint.x * designerCanvas.zoomFactor));
-                this._rect.setAttribute('y', (this._startPoint.y * designerCanvas.zoomFactor));
-                this._rect.setAttribute('width', 0);
-                this._rect.setAttribute('height', 0);
-                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._startPoint) {
-                    let width = eventPoint.x - this._startPoint.x;
-                    let height = eventPoint.y - this._startPoint.y;
-                    if (width >= 0) {
-                        this._rect.setAttribute('x', this._startPoint.x);
-                        this._rect.setAttribute('width', width);
-                    }
-                    else {
-                        this._rect.setAttribute('x', eventPoint.x);
-                        this._rect.setAttribute('width', (-1 * width));
-                    }
-                    if (height >= 0) {
-                        this._rect.setAttribute('y', this._startPoint.y);
-                        this._rect.setAttribute('height', height);
-                    }
-                    else {
-                        this._rect.setAttribute('y', eventPoint.y);
-                        this._rect.setAttribute('height', (-1 * height));
-                    }
-                }
-                break;
-            case EventNames.PointerUp:
-                this._endPoint = eventPoint;
-                let isLeftClick = event.button == 0;
-                switch (event.button) {
-                    case 0: //Left-Click
-                    case 2: //Right-Click
-                        this._zoomOnto(isLeftClick, this._startPoint, this._endPoint, designerCanvas);
-                        break;
-                }
-                designerCanvas.overlayLayer.removeOverlay(this._rect);
-                this._rect = null;
-                this._startPoint = null;
-                break;
-        }
-    }
-    _zoomOnto(isZoomInto, startPoint, endPoint, designerCanvas) {
-        if (this._isPositionEqual(startPoint, endPoint)) {
-            const oldZoom = designerCanvas.zoomFactor;
-            const newZoom = isZoomInto ? oldZoom + this._zoomStepSize : oldZoom - this._zoomStepSize;
-            designerCanvas.zoomTowardsPoint(endPoint, newZoom);
-        }
-        else {
-            designerCanvas.zoomOntoRectangle(startPoint, endPoint);
-        }
-    }
-    _isPositionEqual(startPoint, endPoint) {
-        let tolerance = this._pointerMovementTolerance;
-        return Math.abs(startPoint.x - endPoint.x) <= tolerance && Math.abs(startPoint.y - endPoint.y) <= tolerance;
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    dispose() {
-    }
-}

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

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

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

@@ -1,19 +0,0 @@
-//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 + ";" + (tool.margin ? "margin: " + tool.margin + ";" : "") + "'></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/toolBar/designerToolbarGenerics/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/toolBar/designerToolbarGenerics/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);
-        }
-    }
-}

package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolbarPopupToolSelect.d.ts

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

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

@@ -1,42 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-export class DesignerToolbarPopupToolSelect extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .popup-tool-select {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 3px;
-          margin: 0 3px;
-          justify-content: 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;
-    }`;
-    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");
-    }
-    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));
-        }
-    }
-}
-customElements.define('node-projects-designer-tools-popup-select', DesignerToolbarPopupToolSelect);

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

@@ -1,36 +0,0 @@
-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;
-    margin?: string;
-}
-export interface Seperator {
-    tool: 'seperator';
-}
-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/toolBar/designerToolbarGenerics/designerToolsButtons.js

@@ -1,96 +0,0 @@
-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: 22px;
-        width: 22px;
-        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: darkgreen;
-    }
-
-    .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)", margin: '0 0 5px 0' });
-        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.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.Zoom, category: "zoom", command: "setTool", command_parameter: NamedTools.Zoom, title: "Zoom Tool", background_url: "url(" + assetsPath + "images/layout/ZoomTool.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)", margin: '0 0 5px 0' });
-        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.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)" });
-        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/toolBar/designerToolbarPopups/DrawToolPopup.d.ts

@@ -1,5 +0,0 @@
-import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
-export declare class DrawToolPopup extends DesignerToolbarPopup {
-    private readonly templateToolSelect;
-    ready(): void;
-}

package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/DrawToolPopup.js

@@ -1,21 +0,0 @@
-import { html } from "@node-projects/base-custom-webcomponent";
-import { assetsPath } from "../../../../../Constants";
-import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
-import { DesignerToolbarPopupToolSelect } from "../designerToolbarGenerics/designerToolbarPopupToolSelect";
-export class DrawToolPopup extends DesignerToolbarPopup {
-    templateToolSelect = html `
-        <div class="tool" data-command="setTool" popup="draw" 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>
-    `;
-    ready() {
-        this._setTitle(this.getAttribute("title"));
-        let toolSelect = new DesignerToolbarPopupToolSelect();
-        toolSelect.insertToolContent(this.templateToolSelect);
-        let content = [];
-        content.push(toolSelect);
-        this._setContent(content);
-    }
-}
-customElements.define('node-projects-designer-popup-drawtool', DrawToolPopup);

package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/SelectorToolsPopup.d.ts

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

package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/SelectorToolsPopup.js

@@ -1,23 +0,0 @@
-import { html, TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { assetsPath } from "../../../../../Constants";
-import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
-import { DesignerToolbarPopupToolSelect } from "../designerToolbarGenerics/designerToolbarPopupToolSelect";
-export class SelectorToolsPopup extends DesignerToolbarPopup {
-    templateToolSelect = html `
-        <div class="tool" data-command="setTool" popup="selector" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/layout/SelectRectTool.svg');"></div>
-        <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/layout/MagicWandTool.svg');"></div>
-    `;
-    toolActivated = new TypedEvent();
-    ready() {
-        this._setTitle(this.getAttribute("title"));
-        let toolSelect = new DesignerToolbarPopupToolSelect();
-        toolSelect.insertToolContent(this.templateToolSelect);
-        toolSelect.toolActivated.on((toolArg) => {
-            this.toolActivated.emit(toolArg);
-        });
-        let content = [];
-        content.push(toolSelect);
-        this._setContent(content);
-    }
-}
-customElements.define('node-projects-designer-popup-selector', SelectorToolsPopup);

package/dist/elements/widgets/designerView/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 DesignerToolsDock 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;
-}