@node-projects/web-component-designer 0.0.216 → 0.0.217

package/dist/Constants.d.ts

@@ -1,3 +1,3 @@
-export declare const dragDropFormatNameElementDefinition = "text/json/elementdefintion";
-export declare const dragDropFormatNameBindingObject = "text/json/bindingobject";
-export declare var assetsPath: string;
+export declare const dragDropFormatNameElementDefinition = "text/json/elementdefintion";
+export declare const dragDropFormatNameBindingObject = "text/json/bindingobject";
+export declare var assetsPath: string;

package/dist/Constants.js

@@ -1,5 +1,5 @@
-export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';
-export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
-//export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
-let imporUrl = new URL((import.meta.url));
-export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';
+export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';
+export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
+//export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
+let imporUrl = new URL((import.meta.url));
+export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';

package/dist/commandHandling/CommandType.d.ts

@@ -1,32 +1,32 @@
-export declare enum CommandType {
-    'copy' = "copy",
-    'paste' = "paste",
-    'cut' = "cut",
-    'delete' = "delete",
-    'undo' = "undo",
-    'redo' = "redo",
-    'holdUndo' = "holdUndo",
-    'holdRedo' = "holdRedo",
-    'rotateCounterClockwise' = "rotateCounterClockwise",
-    'rotateClockwise' = "rotateClockwise",
-    'selectAll' = "selectAll",
-    'moveToFront' = "moveToFront",
-    'moveForward' = "moveForward",
-    'moveBackward' = "moveBackward",
-    'moveToBack' = "moveToBack",
-    'arrangeLeft' = "arrangeLeft",
-    'arrangeCenter' = "arrangeCenter",
-    'arrangeRight' = "arrangeRight",
-    'arrangeTop' = "arrangeTop",
-    'arrangeMiddle' = "arrangeMiddle",
-    'arrangeBottom' = "arrangeBottom",
-    'unifyWidth' = "unifyWidth",
-    'unifyHeight' = "unifyHeight",
-    'distributeHorizontal' = "distributeHorizontaly",
-    'distributeVertical' = "distributeVertical",
-    'setTool' = "setTool",
-    'setStrokeColor' = "setStrokeColor",
-    'setFillBrush' = "setFillBrush",
-    'setStrokeThickness' = "setStrokeThickness",
-    'screenshot' = "screenshot"
-}
+export declare enum CommandType {
+    'copy' = "copy",
+    'paste' = "paste",
+    'cut' = "cut",
+    'delete' = "delete",
+    'undo' = "undo",
+    'redo' = "redo",
+    'holdUndo' = "holdUndo",
+    'holdRedo' = "holdRedo",
+    'rotateCounterClockwise' = "rotateCounterClockwise",
+    'rotateClockwise' = "rotateClockwise",
+    'selectAll' = "selectAll",
+    'moveToFront' = "moveToFront",
+    'moveForward' = "moveForward",
+    'moveBackward' = "moveBackward",
+    'moveToBack' = "moveToBack",
+    'arrangeLeft' = "arrangeLeft",
+    'arrangeCenter' = "arrangeCenter",
+    'arrangeRight' = "arrangeRight",
+    'arrangeTop' = "arrangeTop",
+    'arrangeMiddle' = "arrangeMiddle",
+    'arrangeBottom' = "arrangeBottom",
+    'unifyWidth' = "unifyWidth",
+    'unifyHeight' = "unifyHeight",
+    'distributeHorizontal' = "distributeHorizontaly",
+    'distributeVertical' = "distributeVertical",
+    'setTool' = "setTool",
+    'setStrokeColor' = "setStrokeColor",
+    'setFillBrush' = "setFillBrush",
+    'setStrokeThickness' = "setStrokeThickness",
+    'screenshot' = "screenshot"
+}

package/dist/commandHandling/CommandType.js

@@ -1,33 +1,33 @@
-export var CommandType;
-(function (CommandType) {
-    CommandType["copy"] = "copy";
-    CommandType["paste"] = "paste";
-    CommandType["cut"] = "cut";
-    CommandType["delete"] = "delete";
-    CommandType["undo"] = "undo";
-    CommandType["redo"] = "redo";
-    CommandType["holdUndo"] = "holdUndo";
-    CommandType["holdRedo"] = "holdRedo";
-    CommandType["rotateCounterClockwise"] = "rotateCounterClockwise";
-    CommandType["rotateClockwise"] = "rotateClockwise";
-    CommandType["selectAll"] = "selectAll";
-    CommandType["moveToFront"] = "moveToFront";
-    CommandType["moveForward"] = "moveForward";
-    CommandType["moveBackward"] = "moveBackward";
-    CommandType["moveToBack"] = "moveToBack";
-    CommandType["arrangeLeft"] = "arrangeLeft";
-    CommandType["arrangeCenter"] = "arrangeCenter";
-    CommandType["arrangeRight"] = "arrangeRight";
-    CommandType["arrangeTop"] = "arrangeTop";
-    CommandType["arrangeMiddle"] = "arrangeMiddle";
-    CommandType["arrangeBottom"] = "arrangeBottom";
-    CommandType["unifyWidth"] = "unifyWidth";
-    CommandType["unifyHeight"] = "unifyHeight";
-    CommandType["distributeHorizontal"] = "distributeHorizontaly";
-    CommandType["distributeVertical"] = "distributeVertical";
-    CommandType["setTool"] = "setTool";
-    CommandType["setStrokeColor"] = "setStrokeColor";
-    CommandType["setFillBrush"] = "setFillBrush";
-    CommandType["setStrokeThickness"] = "setStrokeThickness";
-    CommandType["screenshot"] = "screenshot";
-})(CommandType || (CommandType = {}));
+export var CommandType;
+(function (CommandType) {
+    CommandType["copy"] = "copy";
+    CommandType["paste"] = "paste";
+    CommandType["cut"] = "cut";
+    CommandType["delete"] = "delete";
+    CommandType["undo"] = "undo";
+    CommandType["redo"] = "redo";
+    CommandType["holdUndo"] = "holdUndo";
+    CommandType["holdRedo"] = "holdRedo";
+    CommandType["rotateCounterClockwise"] = "rotateCounterClockwise";
+    CommandType["rotateClockwise"] = "rotateClockwise";
+    CommandType["selectAll"] = "selectAll";
+    CommandType["moveToFront"] = "moveToFront";
+    CommandType["moveForward"] = "moveForward";
+    CommandType["moveBackward"] = "moveBackward";
+    CommandType["moveToBack"] = "moveToBack";
+    CommandType["arrangeLeft"] = "arrangeLeft";
+    CommandType["arrangeCenter"] = "arrangeCenter";
+    CommandType["arrangeRight"] = "arrangeRight";
+    CommandType["arrangeTop"] = "arrangeTop";
+    CommandType["arrangeMiddle"] = "arrangeMiddle";
+    CommandType["arrangeBottom"] = "arrangeBottom";
+    CommandType["unifyWidth"] = "unifyWidth";
+    CommandType["unifyHeight"] = "unifyHeight";
+    CommandType["distributeHorizontal"] = "distributeHorizontaly";
+    CommandType["distributeVertical"] = "distributeVertical";
+    CommandType["setTool"] = "setTool";
+    CommandType["setStrokeColor"] = "setStrokeColor";
+    CommandType["setFillBrush"] = "setFillBrush";
+    CommandType["setStrokeThickness"] = "setStrokeThickness";
+    CommandType["screenshot"] = "screenshot";
+})(CommandType || (CommandType = {}));

package/dist/commandHandling/IUiCommand.d.ts

@@ -1,10 +1,10 @@
-import { CommandType } from './CommandType.js';
-export interface IUiCommand {
-    type: CommandType;
-    event?: Event;
-    special?: string;
-    parameter?: any;
-    altKey?: boolean;
-    ctrlKey?: boolean;
-    shiftKey?: boolean;
-}
+import { CommandType } from './CommandType.js';
+export interface IUiCommand {
+    type: CommandType;
+    event?: Event;
+    special?: string;
+    parameter?: any;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+}

package/dist/commandHandling/IUiCommand.js

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

package/dist/commandHandling/IUiCommandHandler.d.ts

@@ -1,5 +1,5 @@
-import { IUiCommand } from './IUiCommand.js';
-export interface IUiCommandHandler {
-    executeCommand: (command: IUiCommand) => void;
-    canExecuteCommand: (command: IUiCommand) => boolean;
-}
+import { IUiCommand } from './IUiCommand.js';
+export interface IUiCommandHandler {
+    executeCommand: (command: IUiCommand) => void;
+    canExecuteCommand: (command: IUiCommand) => boolean;
+}

package/dist/commandHandling/IUiCommandHandler.js

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

package/dist/elements/controls/DesignerTabControl.d.ts

@@ -1,24 +1,24 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export type DesignerTabControlIndexChangedEventArgs = {
-    newIndex: number;
-    oldIndex?: number;
-    changedViaClick?: boolean;
-};
-export declare class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
-    private _selectedIndex;
-    private _panels;
-    private _headerDiv;
-    private _moreDiv;
-    private _moreContainer;
-    private _elementMap;
-    private _firstConnect;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    private _showHideHeaderItems;
-    connectedCallback(): void;
-    get selectedIndex(): number;
-    set selectedIndex(value: number);
-    refreshItems(): void;
-    private _selectedIndexChanged;
-    readonly onSelectedTabChanged: TypedEvent<DesignerTabControlIndexChangedEventArgs>;
-}
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export type DesignerTabControlIndexChangedEventArgs = {
+    newIndex: number;
+    oldIndex?: number;
+    changedViaClick?: boolean;
+};
+export declare class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
+    private _selectedIndex;
+    private _panels;
+    private _headerDiv;
+    private _moreDiv;
+    private _moreContainer;
+    private _elementMap;
+    private _firstConnect;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    private _showHideHeaderItems;
+    connectedCallback(): void;
+    get selectedIndex(): number;
+    set selectedIndex(value: number);
+    refreshItems(): void;
+    private _selectedIndexChanged;
+    readonly onSelectedTabChanged: TypedEvent<DesignerTabControlIndexChangedEventArgs>;
+}

package/dist/elements/controls/DesignerTabControl.js

@@ -1,13 +1,13 @@
-import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
-export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
-    _selectedIndex = -1;
-    //private _contentObserver: MutationObserver;
-    _panels;
-    _headerDiv;
-    _moreDiv;
-    _moreContainer;
-    _elementMap = new WeakMap();
-    _firstConnect = true;
+import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
+class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
+    _selectedIndex = -1;
+    //private _contentObserver: MutationObserver;
+    _panels;
+    _headerDiv;
+    _moreDiv;
+    _moreContainer;
+    _elementMap = new WeakMap();
+    _firstConnect = true;
     static style = css `
         :host {
             height: 100%;
@@ -94,144 +94,145 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
             background: var(--medium-grey, #2f3545);
             height: calc(100% - 30px);
         }
-        `;
-    constructor() {
-        super();
-        /*this._contentObserver = new MutationObserver((mut) => {
-          let refresh = false;
-          for (let m of mut) {
-            if (m.type != 'attributes' || m.attributeName == 'style')
-              refresh = true;
-          }
-          if (refresh)
-            this.refreshItems();
-        });*/
-        let outerDiv = document.createElement("div");
-        outerDiv.className = 'outer';
-        this.shadowRoot.appendChild(outerDiv);
-        this._headerDiv = document.createElement("div");
-        this._headerDiv.className = 'header';
-        outerDiv.appendChild(this._headerDiv);
-        this._moreDiv = document.createElement("div");
-        this._moreDiv.className = "header header-more";
-        this._moreDiv.innerText = "<<";
-        outerDiv.appendChild(this._moreDiv);
-        this._moreContainer = document.createElement("div");
-        this._moreContainer.className = "more-container";
-        this._moreContainer.style.visibility = "hidden";
-        outerDiv.appendChild(this._moreContainer);
-        this._moreDiv.onclick = () => {
-            if (this._moreContainer.children.length && this._moreContainer.style.visibility == "hidden")
-                this._moreContainer.style.visibility = 'visible';
-            else
-                this._moreContainer.style.visibility = "hidden";
-        };
-        this._panels = document.createElement("div");
-        this._panels.className = 'panels';
-        outerDiv.appendChild(this._panels);
-        let _slot = document.createElement("slot");
-        _slot.name = 'panels';
-        this._panels.appendChild(_slot);
-        const resizeObserver = new ResizeObserver(entries => {
-            this._showHideHeaderItems();
-        });
-        resizeObserver.observe(this._headerDiv);
-    }
-    _showHideHeaderItems() {
-        this._moreContainer.style.visibility = "hidden";
-        let w = 0;
-        DomHelper.removeAllChildnodes(this._moreContainer);
-        DomHelper.removeAllChildnodes(this._headerDiv);
-        let reloadOnce = true;
-        for (let item of this.children) {
-            if (item.style.display != 'none') {
-                let htmlItem = item;
-                if (!this._elementMap.has(htmlItem) && reloadOnce) {
-                    this.refreshItems();
-                    reloadOnce = false;
-                }
-                const tabHeaderDiv = this._elementMap.get(htmlItem);
-                this._moreContainer.appendChild(tabHeaderDiv);
-                if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
-                    this._headerDiv.appendChild(tabHeaderDiv);
-                    w += tabHeaderDiv.clientWidth;
-                }
-            }
-        }
-    }
-    connectedCallback() {
-        if (this._firstConnect) {
-            this.refreshItems();
-            this._firstConnect = false;
-            //this._contentObserver.observe(this, { childList: true, subtree: true, attributes: true });
-            let selectedIndexAttribute = this.getAttribute("selected-index");
-            if (selectedIndexAttribute) {
-                this.selectedIndex = parseInt(selectedIndexAttribute);
-            }
-        }
-    }
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    set selectedIndex(value) {
-        let old = this._selectedIndex;
-        this._selectedIndex = value;
-        if (this.children.length && old != this._selectedIndex)
-            this._selectedIndexChanged(old);
-    }
-    refreshItems() {
-        this._headerDiv.innerHTML = "";
-        let i = 0;
-        for (let item of this.children) {
-            if (item.style.display != 'none') {
-                let htmlItem = item;
-                let tabHeaderDiv = document.createElement("div");
-                tabHeaderDiv.innerText = htmlItem.title;
-                tabHeaderDiv.title = htmlItem.title;
-                tabHeaderDiv.className = 'tab-header';
-                let j = i;
-                tabHeaderDiv.onpointerdown = () => {
-                    let old = this._selectedIndex;
-                    this._selectedIndex = j;
-                    if (this._headerDiv.children.length)
-                        this._selectedIndexChanged(old, true);
-                    this._moreContainer.style.visibility = 'hidden';
-                };
-                this._elementMap.set(htmlItem, tabHeaderDiv);
-                this._headerDiv.appendChild(tabHeaderDiv);
-                i++;
-            }
-        }
-        this._showHideHeaderItems();
-        this._selectedIndexChanged();
-    }
-    _selectedIndexChanged(oldIndex, viaClick = false) {
-        let index = -1;
-        for (let element of this.children) {
-            if (element.style.display != 'none') {
-                index++;
-                if (index == this._selectedIndex) {
-                    if (element.slot != "panels")
-                        element.slot = "panels";
-                    const headerEl = this._elementMap.get(element);
-                    if (headerEl) {
-                        headerEl.classList.add('selected');
-                        if (element.activated)
-                            element.activated();
-                    }
-                }
-                else {
-                    element.removeAttribute("slot");
-                    const headerEl = this._elementMap.get(element);
-                    if (headerEl) {
-                        headerEl.classList.remove('selected');
-                    }
-                }
-            }
-        }
-        this.onSelectedTabChanged.emit({ newIndex: this._selectedIndex, oldIndex: oldIndex, changedViaClick: viaClick });
-        this._moreContainer.style.visibility = 'hidden';
-    }
-    onSelectedTabChanged = new TypedEvent();
-}
-customElements.define('node-projects-designer-tab-control', DesignerTabControl);
+        `;
+    constructor() {
+        super();
+        /*this._contentObserver = new MutationObserver((mut) => {
+          let refresh = false;
+          for (let m of mut) {
+            if (m.type != 'attributes' || m.attributeName == 'style')
+              refresh = true;
+          }
+          if (refresh)
+            this.refreshItems();
+        });*/
+        let outerDiv = document.createElement("div");
+        outerDiv.className = 'outer';
+        this.shadowRoot.appendChild(outerDiv);
+        this._headerDiv = document.createElement("div");
+        this._headerDiv.className = 'header';
+        outerDiv.appendChild(this._headerDiv);
+        this._moreDiv = document.createElement("div");
+        this._moreDiv.className = "header header-more";
+        this._moreDiv.innerText = "<<";
+        outerDiv.appendChild(this._moreDiv);
+        this._moreContainer = document.createElement("div");
+        this._moreContainer.className = "more-container";
+        this._moreContainer.style.visibility = "hidden";
+        outerDiv.appendChild(this._moreContainer);
+        this._moreDiv.onclick = () => {
+            if (this._moreContainer.children.length && this._moreContainer.style.visibility == "hidden")
+                this._moreContainer.style.visibility = 'visible';
+            else
+                this._moreContainer.style.visibility = "hidden";
+        };
+        this._panels = document.createElement("div");
+        this._panels.className = 'panels';
+        outerDiv.appendChild(this._panels);
+        let _slot = document.createElement("slot");
+        _slot.name = 'panels';
+        this._panels.appendChild(_slot);
+        const resizeObserver = new ResizeObserver(entries => {
+            this._showHideHeaderItems();
+        });
+        resizeObserver.observe(this._headerDiv);
+    }
+    _showHideHeaderItems() {
+        this._moreContainer.style.visibility = "hidden";
+        let w = 0;
+        DomHelper.removeAllChildnodes(this._moreContainer);
+        DomHelper.removeAllChildnodes(this._headerDiv);
+        let reloadOnce = true;
+        for (let item of this.children) {
+            if (item.style.display != 'none') {
+                let htmlItem = item;
+                if (!this._elementMap.has(htmlItem) && reloadOnce) {
+                    this.refreshItems();
+                    reloadOnce = false;
+                }
+                const tabHeaderDiv = this._elementMap.get(htmlItem);
+                this._moreContainer.appendChild(tabHeaderDiv);
+                if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
+                    this._headerDiv.appendChild(tabHeaderDiv);
+                    w += tabHeaderDiv.clientWidth;
+                }
+            }
+        }
+    }
+    connectedCallback() {
+        if (this._firstConnect) {
+            this.refreshItems();
+            this._firstConnect = false;
+            //this._contentObserver.observe(this, { childList: true, subtree: true, attributes: true });
+            let selectedIndexAttribute = this.getAttribute("selected-index");
+            if (selectedIndexAttribute) {
+                this.selectedIndex = parseInt(selectedIndexAttribute);
+            }
+        }
+    }
+    get selectedIndex() {
+        return this._selectedIndex;
+    }
+    set selectedIndex(value) {
+        let old = this._selectedIndex;
+        this._selectedIndex = value;
+        if (this.children.length && old != this._selectedIndex)
+            this._selectedIndexChanged(old);
+    }
+    refreshItems() {
+        this._headerDiv.innerHTML = "";
+        let i = 0;
+        for (let item of this.children) {
+            if (item.style.display != 'none') {
+                let htmlItem = item;
+                let tabHeaderDiv = document.createElement("div");
+                tabHeaderDiv.innerText = htmlItem.title;
+                tabHeaderDiv.title = htmlItem.title;
+                tabHeaderDiv.className = 'tab-header';
+                let j = i;
+                tabHeaderDiv.onpointerdown = () => {
+                    let old = this._selectedIndex;
+                    this._selectedIndex = j;
+                    if (this._headerDiv.children.length)
+                        this._selectedIndexChanged(old, true);
+                    this._moreContainer.style.visibility = 'hidden';
+                };
+                this._elementMap.set(htmlItem, tabHeaderDiv);
+                this._headerDiv.appendChild(tabHeaderDiv);
+                i++;
+            }
+        }
+        this._showHideHeaderItems();
+        this._selectedIndexChanged();
+    }
+    _selectedIndexChanged(oldIndex, viaClick = false) {
+        let index = -1;
+        for (let element of this.children) {
+            if (element.style.display != 'none') {
+                index++;
+                if (index == this._selectedIndex) {
+                    if (element.slot != "panels")
+                        element.slot = "panels";
+                    const headerEl = this._elementMap.get(element);
+                    if (headerEl) {
+                        headerEl.classList.add('selected');
+                        if (element.activated)
+                            element.activated();
+                    }
+                }
+                else {
+                    element.removeAttribute("slot");
+                    const headerEl = this._elementMap.get(element);
+                    if (headerEl) {
+                        headerEl.classList.remove('selected');
+                    }
+                }
+            }
+        }
+        this.onSelectedTabChanged.emit({ newIndex: this._selectedIndex, oldIndex: oldIndex, changedViaClick: viaClick });
+        this._moreContainer.style.visibility = 'hidden';
+    }
+    onSelectedTabChanged = new TypedEvent();
+}
+export { DesignerTabControl };
+customElements.define('node-projects-designer-tab-control', DesignerTabControl);

package/dist/elements/controls/ImageButtonListSelector.d.ts

@@ -1,17 +1,17 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export type ImageButtonListSelectorValueChangedEventArgs = {
-    newValue?: string;
-    oldValue?: string;
-};
-export declare class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _value;
-    get value(): string;
-    set value(value: string);
-    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
-    property: string;
-    unsetValue: string;
-    _updateValue(): void;
-    ready(): void;
-}
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export type ImageButtonListSelectorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _value;
+    get value(): string;
+    set value(value: string);
+    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
+    property: string;
+    unsetValue: string;
+    _updateValue(): void;
+    ready(): void;
+}