@node-projects/web-component-designer 0.0.88 → 0.0.91

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,13 +1,13 @@
-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();
-    ready(): Promise<void>;
-    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();
+    ready(): Promise<void>;
+    loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
+}

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

@@ -1,9 +1,9 @@
-import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { dragDropFormatNameElementDefinition } from '../../../Constants';
-export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
-    _treeDiv;
-    _tree;
-    _filter;
+import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { dragDropFormatNameElementDefinition } from '../../../Constants';
+export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
+    _treeDiv;
+    _tree;
+    _filter;
     static style = css `
       * {
           touch-action: none;
@@ -45,79 +45,87 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
       td > img {
         vertical-align: middle;
       }
-    `;
+    `;
     static template = html `
   <div style="height: 100%;">
     <input id="input" style="width: 100%; height:21px;" placeholder="Filter..." autocomplete="off">
     <div style="height: calc(100% - 23px); overflow: auto;">
       <div id="treetable" style="min-width: 100%;"></div>
     </div>
-  </div>`;
-    constructor() {
-        super();
-        //@ts-ignore
-        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
-        this._filter = this._getDomElement('input');
-        this._filter.onkeyup = () => {
-            let match = this._filter.value;
-            this._tree.filterNodes((node) => {
-                return new RegExp(match, "i").test(node.title);
-            });
-        };
-        this._treeDiv = this._getDomElement('treetable');
-    }
-    async ready() {
-        $(this._treeDiv).fancytree({
-            icon: true,
-            extensions: ['childcounter', 'dnd5', 'filter'],
-            quicksearch: true,
-            source: [],
-            dnd5: {
-                dropMarkerParent: this.shadowRoot,
-                preventRecursion: true,
-                preventVoidMoves: false,
-                dropMarkerOffsetX: -24,
-                dropMarkerInsertOffsetX: -16,
-                dragStart: (node, data) => {
-                    data.effectAllowed = "all";
-                    data.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(node.data.ref));
-                    data.dropEffect = "copy";
-                    return true;
-                },
-                dragEnter: (node, data) => {
-                    return false;
-                }
-            }
-        });
-        //@ts-ignore
-        this._tree = $.ui.fancytree.getTree(this._treeDiv);
-        this._treeDiv.children[0].classList.add('fancytree-connectors');
-    }
-    async loadControls(serviceContainer, elementsServices) {
-        let rootNode = this._tree.getRootNode();
-        rootNode.removeChildren();
-        for (const s of elementsServices) {
-            const newNode = rootNode.addChildren({
-                title: s.name,
-                folder: true
-            });
-            try {
-                let elements = await s.getElements();
-                for (let e of elements) {
-                    newNode.addChildren({
-                        title: e.name ?? e.tag,
-                        folder: false,
-                        //@ts-ignore
-                        ref: e
-                    });
-                }
-            }
-            catch (err) {
-                console.warn('Error loading elements', err);
-            }
-            //@ts-ignore
-            newNode.updateCounters();
-        }
-    }
-}
-customElements.define('node-projects-palette-tree-view', PaletteTreeView);
+  </div>`;
+    constructor() {
+        super();
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        this._filter = this._getDomElement('input');
+        this._filter.onkeyup = () => {
+            let match = this._filter.value;
+            this._tree.filterNodes((node) => {
+                return new RegExp(match, "i").test(node.title);
+            });
+        };
+        this._treeDiv = this._getDomElement('treetable');
+    }
+    async ready() {
+        $(this._treeDiv).fancytree({
+            icon: true,
+            extensions: ['childcounter', 'dnd5', 'filter'],
+            quicksearch: true,
+            source: [],
+            filter: {
+                autoExpand: true,
+                mode: 'hide',
+                highlight: true
+            },
+            dnd5: {
+                dropMarkerParent: this.shadowRoot,
+                preventRecursion: true,
+                preventVoidMoves: false,
+                dropMarkerOffsetX: -24,
+                dropMarkerInsertOffsetX: -16,
+                dragStart: (node, data) => {
+                    data.effectAllowed = "all";
+                    data.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(node.data.ref));
+                    data.dropEffect = "copy";
+                    return true;
+                },
+                dragEnter: (node, data) => {
+                    return false;
+                }
+            }
+        });
+        //@ts-ignore
+        this._tree = $.ui.fancytree.getTree(this._treeDiv);
+        this._treeDiv.children[0].classList.add('fancytree-connectors');
+    }
+    async loadControls(serviceContainer, elementsServices) {
+        let rootNode = this._tree.getRootNode();
+        rootNode.removeChildren();
+        for (const s of elementsServices) {
+            const newNode = rootNode.addChildren({
+                title: s.name,
+                folder: true
+            });
+            try {
+                let elements = await s.getElements();
+                for (let e of elements) {
+                    newNode.addChildren({
+                        title: e.name ?? e.tag,
+                        folder: false,
+                        //@ts-ignore
+                        ref: e
+                    });
+                }
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
+            }
+            try {
+                //@ts-ignore
+                newNode.updateCounters();
+            }
+            catch { }
+        }
+    }
+}
+customElements.define('node-projects-palette-tree-view', PaletteTreeView);

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

@@ -1,11 +1,11 @@
-import '../../controls/DesignerTabControl.js';
-import { IElementsService } from '../../services/elementsService/IElementsService';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from '../../services/ServiceContainer';
-export declare class PaletteView extends BaseCustomWebComponentLazyAppend {
-    selected: string;
-    private _designerTabControl;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
-}
+import '../../controls/DesignerTabControl.js';
+import { IElementsService } from '../../services/elementsService/IElementsService';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { ServiceContainer } from '../../services/ServiceContainer';
+export declare class PaletteView extends BaseCustomWebComponentLazyAppend {
+    selected: string;
+    private _designerTabControl;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
+}

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

@@ -1,36 +1,36 @@
-import '../../controls/DesignerTabControl.js';
-import { PaletteElements } from './paletteElements';
-import { DesignerTabControl } from '../../controls/DesignerTabControl';
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-export class PaletteView extends BaseCustomWebComponentLazyAppend {
-    selected = 'native';
-    _designerTabControl;
+import '../../controls/DesignerTabControl.js';
+import { PaletteElements } from './paletteElements';
+import { DesignerTabControl } from '../../controls/DesignerTabControl';
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+export class PaletteView extends BaseCustomWebComponentLazyAppend {
+    selected = 'native';
+    _designerTabControl;
     static style = css `
     :host {
       display: flex;
       flex-direction: column;
       flex: 1;
       height: 100%;
-    }`;
-    constructor() {
-        super();
-        this._designerTabControl = new DesignerTabControl();
-        this._designerTabControl.selectedIndex = 0;
-        this.shadowRoot.appendChild(this._designerTabControl);
-    }
-    async loadControls(serviceContainer, elementsServices) {
-        for (const s of elementsServices) {
-            try {
-                let elements = await s.getElements();
-                let paletteElement = new PaletteElements();
-                paletteElement.title = s.name;
-                this._designerTabControl.appendChild(paletteElement);
-                paletteElement.loadElements(serviceContainer, elements);
-            }
-            catch (err) {
-                console.warn('Error loading elements', err);
-            }
-        }
-    }
-}
-customElements.define('node-projects-palette-view', PaletteView);
+    }`;
+    constructor() {
+        super();
+        this._designerTabControl = new DesignerTabControl();
+        this._designerTabControl.selectedIndex = 0;
+        this.shadowRoot.appendChild(this._designerTabControl);
+    }
+    async loadControls(serviceContainer, elementsServices) {
+        for (const s of elementsServices) {
+            try {
+                let elements = await s.getElements();
+                let paletteElement = new PaletteElements();
+                paletteElement.title = s.name;
+                this._designerTabControl.appendChild(paletteElement);
+                paletteElement.loadElements(serviceContainer, elements);
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
+            }
+        }
+    }
+}
+customElements.define('node-projects-palette-view', PaletteView);

package/dist/elements/widgets/propertyGrid/PropertyGrid.d.ts

@@ -1,21 +1,21 @@
-import { ServiceContainer } from '../../services/ServiceContainer';
-import { IDesignItem } from '../../item/IDesignItem';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
-    private _serviceContainer;
-    private _designerTabControl;
-    private _selectedItems;
-    private _propertyGridPropertyLists;
-    private _itemsObserver;
-    private _instanceServiceContainer;
-    private _selectionChangedHandler;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    set serviceContainer(value: ServiceContainer);
-    get serviceContainer(): ServiceContainer;
-    set instanceServiceContainer(value: InstanceServiceContainer);
-    get selectedItems(): IDesignItem[];
-    set selectedItems(items: IDesignItem[]);
-    private _observeItems;
-}
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { IDesignItem } from '../../item/IDesignItem';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+    private _serviceContainer;
+    private _designerTabControl;
+    private _selectedItems;
+    private _propertyGridPropertyLists;
+    private _itemsObserver;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    set serviceContainer(value: ServiceContainer);
+    get serviceContainer(): ServiceContainer;
+    set instanceServiceContainer(value: InstanceServiceContainer);
+    get selectedItems(): IDesignItem[];
+    set selectedItems(items: IDesignItem[]);
+    private _observeItems;
+}