@node-projects/web-component-designer 0.0.83 → 0.0.87

package/dist/elements/widgets/treeView/treeView.js

@@ -1,16 +1,16 @@
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-import { DesignItem } from '../../item/DesignItem';
-export class TreeView extends BaseCustomWebComponentLazyAppend {
-    _items;
-    _index;
-    _previouslySelected;
-    _treeDiv;
-    _instanceServiceContainer;
-    _selectionChangedHandler;
-    _contentChangedHandler;
-    _mapElementTreeitem;
-    _rootItem;
-    //TODO, buuton so key events can be transfered to designer Cnvas (so you can move controls with keys)
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { DesignItem } from '../../item/DesignItem';
+export class TreeView extends BaseCustomWebComponentLazyAppend {
+    _items;
+    _index;
+    _previouslySelected;
+    _treeDiv;
+    _instanceServiceContainer;
+    _selectionChangedHandler;
+    _contentChangedHandler;
+    _mapElementTreeitem;
+    _rootItem;
+    //TODO, buuton so key events can be transfered to designer Cnvas (so you can move controls with keys)
     static style = css `
     :host {
       --horz-margin: 20px;
@@ -105,138 +105,139 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
 
     /* draw rounded: up connector of last item */
     .tree li:last-child:before { border-radius: 0 0 0 5px; }
-    `;
-    constructor() {
-        super();
-        this._treeDiv = document.createElement('div');
-        this.shadowRoot.appendChild(this._treeDiv);
-        this._treeDiv.addEventListener('click', this._clickElement.bind(this));
-    }
-    createTree(rootItem /*, activeElement: Element */) {
-        this._rootItem = rootItem;
-        if (rootItem != null)
-            this._recomputeTree(rootItem.element, null /*, activeElement */);
-    }
-    // this.instanceServiceContainer.selectionService.setSelectedElements(null);
-    set instanceServiceContainer(value) {
-        this._instanceServiceContainer = value;
-        this._selectionChangedHandler?.dispose();
-        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
-            this.selectionChanged(e);
-        });
-        this._contentChangedHandler?.dispose();
-        this._contentChangedHandler = this._instanceServiceContainer.contentService.onContentChanged.on(e => {
-            this.createTree(value.contentService.rootDesignItem);
-        });
-        this.createTree(value.contentService.rootDesignItem);
-    }
-    selectionChanged(event) {
-        if (event.selectedElements.length > 0) {
-            this._selectTreeElements(event.selectedElements.map(x => this._mapElementTreeitem.get(x.element)));
-        }
-    }
-    _recomputeTree(parent, activeElement) {
-        this._mapElementTreeitem = new Map();
-        this._treeDiv.innerHTML = '';
-        let ul = document.createElement('ul');
-        ul.classList.add('tree');
-        this._treeDiv.appendChild(ul);
-        // Since we can't add a pojo to each button, generate a new index for
-        // each button in the this.items array of useful data.
-        this._index = 0;
-        this._items = this._getChildren(parent, ul);
-        this._highlight(activeElement);
-        return this._items;
-    }
-    _makeButton(tag, id, index) {
-        let aButton = document.createElement('button');
-        aButton.dataset.index = index;
-        let aTag = document.createElement('span');
-        aTag.className = 'tag';
-        aTag.textContent = tag;
-        let aId = document.createElement('span');
-        aId.className = 'id';
-        aId.textContent = id;
-        aButton.appendChild(aTag);
-        aButton.appendChild(aId);
-        return aButton;
-    }
-    _getChildren(item, list) {
-        // Add item and its children into nested ul list
-        let isViewContainer = item.id === 'viewContainer';
-        let data = {
-            tag: isViewContainer ? 'main-app' : item.tagName.toLowerCase(),
-            id: isViewContainer ? '' : (item.id ? '#' + item.id : ''),
-            text: isViewContainer ? '' : '"' + item.textContent + '"',
-            ref: item,
-            index: this._index
-        };
-        // Add item to list
-        let li = document.createElement('li');
-        let button = this._makeButton(data.tag, data.id, data.index);
-        li.appendChild(button);
-        list.appendChild(li);
-        this._mapElementTreeitem.set(data.ref, button);
-        this._index++;
-        let nodes = [data];
-        // Add children to subordinate list
-        let ul = null;
-        for (let i = 0; i < item.children.length; i++) {
-            let child = item.children[i];
-            // Skip <style> nodes;
-            if (child.localName === 'style') {
-                continue;
-            }
-            if (ul == null) {
-                ul = document.createElement('ul');
-                li.appendChild(ul);
-            }
-            nodes = nodes.concat(this._getChildren(child, ul));
-        }
-        return nodes;
-    }
-    _clickElement(event) {
-        // If the target is a <span>, you clicked on the span inside the button
-        // so you need to use currentTarget.
-        let item = event.target;
-        if (item.localName === 'span') {
-            item = item.parentElement;
-        }
-        this._selectTreeElements([item]);
-        this._selectDesignerElement(item);
-    }
-    _selectTreeElements(items) {
-        if (this._previouslySelected) {
-            for (let e of this._previouslySelected)
-                if (e)
-                    e.classList.remove('selected');
-        }
-        this._previouslySelected = items;
-        if (items)
-            for (let e of items)
-                if (e)
-                    e.classList.add('selected');
-    }
-    _selectDesignerElement(item) {
-        let index = item.dataset.index;
-        let el = this._items[index].ref;
-        let d = DesignItem.GetOrCreateDesignItem(el, this._rootItem.serviceContainer, this._rootItem.instanceServiceContainer);
-        d.instanceServiceContainer.selectionService.setSelectedElements([d]);
-    }
-    _highlight(element) {
-        if (!element)
-            return;
-        // Find it in the tree.
-        let buttons = this.shadowRoot.querySelectorAll('button');
-        if (buttons.length !== this._items.length) {
-            return;
-        }
-        for (let i = 0; i < this._items.length; i++) {
-            if (this._items[i].ref === element) {
-                this._selectTreeElements([buttons[i]]);
-                return;
-            }
-        }
-    }
-}
-customElements.define('node-projects-tree-view', TreeView);
+    `;
+    constructor() {
+        super();
+        this._treeDiv = document.createElement('div');
+        this._treeDiv.style.userSelect = 'none';
+        this.shadowRoot.appendChild(this._treeDiv);
+        this._treeDiv.addEventListener('click', this._clickElement.bind(this));
+    }
+    createTree(rootItem /*, activeElement: Element */) {
+        this._rootItem = rootItem;
+        if (rootItem != null)
+            this._recomputeTree(rootItem.element, null /*, activeElement */);
+    }
+    // this.instanceServiceContainer.selectionService.setSelectedElements(null);
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+            this.selectionChanged(e);
+        });
+        this._contentChangedHandler?.dispose();
+        this._contentChangedHandler = this._instanceServiceContainer.contentService.onContentChanged.on(e => {
+            this.createTree(value.contentService.rootDesignItem);
+        });
+        this.createTree(value.contentService.rootDesignItem);
+    }
+    selectionChanged(event) {
+        if (event.selectedElements.length > 0) {
+            this._selectTreeElements(event.selectedElements.map(x => this._mapElementTreeitem.get(x.element)));
+        }
+    }
+    _recomputeTree(parent, activeElement) {
+        this._mapElementTreeitem = new Map();
+        this._treeDiv.innerHTML = '';
+        let ul = document.createElement('ul');
+        ul.classList.add('tree');
+        this._treeDiv.appendChild(ul);
+        // Since we can't add a pojo to each button, generate a new index for
+        // each button in the this.items array of useful data.
+        this._index = 0;
+        this._items = this._getChildren(parent, ul);
+        this._highlight(activeElement);
+        return this._items;
+    }
+    _makeButton(tag, id, index) {
+        let aButton = document.createElement('button');
+        aButton.dataset.index = index;
+        let aTag = document.createElement('span');
+        aTag.className = 'tag';
+        aTag.textContent = tag;
+        let aId = document.createElement('span');
+        aId.className = 'id';
+        aId.textContent = id;
+        aButton.appendChild(aTag);
+        aButton.appendChild(aId);
+        return aButton;
+    }
+    _getChildren(item, list) {
+        // Add item and its children into nested ul list
+        let isViewContainer = item.id === 'viewContainer';
+        let data = {
+            tag: isViewContainer ? 'main-app' : item.tagName.toLowerCase(),
+            id: isViewContainer ? '' : (item.id ? '#' + item.id : ''),
+            text: isViewContainer ? '' : '"' + item.textContent + '"',
+            ref: item,
+            index: this._index
+        };
+        // Add item to list
+        let li = document.createElement('li');
+        let button = this._makeButton(data.tag, data.id, data.index);
+        li.appendChild(button);
+        list.appendChild(li);
+        this._mapElementTreeitem.set(data.ref, button);
+        this._index++;
+        let nodes = [data];
+        // Add children to subordinate list
+        let ul = null;
+        for (let i = 0; i < item.children.length; i++) {
+            let child = item.children[i];
+            // Skip <style> nodes;
+            if (child.localName === 'style') {
+                continue;
+            }
+            if (ul == null) {
+                ul = document.createElement('ul');
+                li.appendChild(ul);
+            }
+            nodes = nodes.concat(this._getChildren(child, ul));
+        }
+        return nodes;
+    }
+    _clickElement(event) {
+        // If the target is a <span>, you clicked on the span inside the button
+        // so you need to use currentTarget.
+        let item = event.target;
+        if (item.localName === 'span') {
+            item = item.parentElement;
+        }
+        this._selectTreeElements([item]);
+        this._selectDesignerElement(item);
+    }
+    _selectTreeElements(items) {
+        if (this._previouslySelected) {
+            for (let e of this._previouslySelected)
+                if (e)
+                    e.classList.remove('selected');
+        }
+        this._previouslySelected = items;
+        if (items)
+            for (let e of items)
+                if (e)
+                    e.classList.add('selected');
+    }
+    _selectDesignerElement(item) {
+        let index = item.dataset.index;
+        let el = this._items[index].ref;
+        let d = DesignItem.GetOrCreateDesignItem(el, this._rootItem.serviceContainer, this._rootItem.instanceServiceContainer);
+        d.instanceServiceContainer.selectionService.setSelectedElements([d]);
+    }
+    _highlight(element) {
+        if (!element)
+            return;
+        // Find it in the tree.
+        let buttons = this.shadowRoot.querySelectorAll('button');
+        if (buttons.length !== this._items.length) {
+            return;
+        }
+        for (let i = 0; i < this._items.length; i++) {
+            if (this._items[i].ref === element) {
+                this._selectTreeElements([buttons[i]]);
+                return;
+            }
+        }
+    }
+}
+customElements.define('node-projects-tree-view', TreeView);

package/dist/elements/widgets/treeView/treeViewExtended.d.ts

@@ -1,31 +1,31 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { ITreeView } from './ITreeView';
-import { IDesignItem } from '../../item/IDesignItem';
-import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper.js';
-export declare class TreeViewExtended extends BaseCustomWebComponentConstructorAppend implements ITreeView {
-    private _treeDiv;
-    private _tree;
-    private _filter;
-    private _instanceServiceContainer;
-    private _selectionChangedHandler;
-    private _contentChangedHandler;
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    constructor();
-    _showHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    _switchHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    _showLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    _switchLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    _showHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    _switchHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
-    ready(): Promise<void>;
-    createTree(rootItem: IDesignItem): void;
-    set instanceServiceContainer(value: InstanceServiceContainer);
-    selectionChanged(event: ISelectionChangedEvent): void;
-    private _recomputeTree;
-    private _getChildren;
-    private _highlight;
-}
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { ITreeView } from './ITreeView';
+import { IDesignItem } from '../../item/IDesignItem';
+import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper.js';
+export declare class TreeViewExtended extends BaseCustomWebComponentConstructorAppend implements ITreeView {
+    private _treeDiv;
+    private _tree;
+    private _filter;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
+    private _contentChangedHandler;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor();
+    _showHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
+    _switchHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
+    _showLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
+    _switchLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
+    _showHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
+    _switchHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
+    ready(): Promise<void>;
+    createTree(rootItem: IDesignItem): void;
+    set instanceServiceContainer(value: InstanceServiceContainer);
+    selectionChanged(event: ISelectionChangedEvent): void;
+    private _recomputeTree;
+    private _getChildren;
+    private _highlight;
+}