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

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

@@ -1,14 +1,14 @@
-import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { NodeType } from '../../item/NodeType';
-import { assetsPath } from '../../../Constants';
-import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper.js';
-export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
-    _treeDiv;
-    _tree;
-    _filter;
-    _instanceServiceContainer;
-    _selectionChangedHandler;
-    _contentChangedHandler;
+import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { NodeType } from '../../item/NodeType';
+import { assetsPath } from '../../../Constants';
+import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper.js';
+export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
+    _treeDiv;
+    _tree;
+    _filter;
+    _instanceServiceContainer;
+    _selectionChangedHandler;
+    _contentChangedHandler;
     static style = css `
       * {
           touch-action: none;
@@ -69,7 +69,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
       table.fancytree-ext-table tbody tr.fancytree-selected {
         background-color: #bebebe;
       }
-    `;
+    `;
     static template = html `
   <div style="height: 100%;">
     <input id="input" style="width: 100%; height:21px;" placeholder="Filter..." autocomplete="off">
@@ -91,301 +91,301 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         </thead>
       </table>
     </div>
-  </div>`;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        //@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 = () => {
-            this._filterNodes();
-        };
-        this._treeDiv = this._getDomElement('treetable');
-    }
-    _filterNodes() {
-        let match = this._filter.value;
-        if (match) {
-            this._tree.filterNodes((node) => {
-                return new RegExp(match, "i").test(node.title);
-            });
-        }
-        else {
-            this._tree.clearFilter();
-        }
-    }
-    _showHideAtDesignTimeState(img, designItem) {
-        if (designItem.hideAtDesignTime)
-            img.src = assetsPath + "images/treeview/eyeclose.png";
-        else
-            img.src = assetsPath + "images/treeview/eyeopen.png";
-    }
-    _switchHideAtDesignTimeState(img, designItem) {
-        designItem.hideAtDesignTime = !designItem.hideAtDesignTime;
-        this._showHideAtDesignTimeState(img, designItem);
-    }
-    _showLockAtDesignTimeState(img, designItem) {
-        if (designItem.lockAtDesignTime)
-            img.src = assetsPath + "images/treeview/lock.png";
-        else
-            img.src = assetsPath + "images/treeview/dot.png";
-    }
-    _switchLockAtDesignTimeState(img, designItem) {
-        designItem.lockAtDesignTime = !designItem.lockAtDesignTime;
-        this._showLockAtDesignTimeState(img, designItem);
-    }
-    _showHideAtRunTimeState(img, designItem) {
-        if (designItem.hideAtRunTime)
-            img.src = assetsPath + "images/treeview/eyeclose.png";
-        else
-            img.src = assetsPath + "images/treeview/eyeopen.png";
-    }
-    _switchHideAtRunTimeState(img, designItem) {
-        designItem.hideAtRunTime = !designItem.hideAtRunTime;
-        this._showHideAtRunTimeState(img, designItem);
-    }
-    showDesignItemContextMenu(designItem, event) {
-        event.preventDefault();
-        const mnuItems = [];
-        for (let cme of designItem.serviceContainer.designerContextMenuExtensions) {
-            if (cme.shouldProvideContextmenu(event, designItem.instanceServiceContainer.designerCanvas, designItem, 'treeView')) {
-                mnuItems.push(...cme.provideContextMenuItems(event, designItem.instanceServiceContainer.designerCanvas, designItem));
-            }
-        }
-        let ctxMnu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
-        return ctxMnu;
-    }
-    async ready() {
-        //this._treeDiv.classList.add('fancytree-connectors');
-        $(this._treeDiv).fancytree({
-            icon: true,
-            extensions: ['childcounter', 'dnd5', 'multi', 'filter', 'table'],
-            quicksearch: true,
-            source: [],
-            table: {
-                indentation: 20,
-                nodeColumnIdx: 0,
-                checkboxColumnIdx: 0, // render the checkboxes into the 1st column
-            },
-            activate: (event, data) => {
-                let node = data.node;
-                let designItem = node.data.ref;
-                if (designItem)
-                    designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
-            },
-            createNode: (event, data) => {
-                let node = data.node;
-                if (node.tr.children[0]) {
-                    let designItem = node.data.ref;
-                    if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
-                        node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
-                        node.tr.onmouseenter = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(designItem.element);
-                        node.tr.onmouseleave = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(null);
-                        let d = document.createElement("div");
-                        d.className = "cmd";
-                        let imgL = document.createElement('img');
-                        this._showLockAtDesignTimeState(imgL, designItem);
-                        imgL.onclick = () => this._switchLockAtDesignTimeState(imgL, designItem);
-                        imgL.title = 'lock';
-                        d.appendChild(imgL);
-                        let img = document.createElement('img');
-                        this._showHideAtDesignTimeState(img, designItem);
-                        img.onclick = () => this._switchHideAtDesignTimeState(img, designItem);
-                        img.title = 'hide in designer';
-                        d.appendChild(img);
-                        let imgH = document.createElement('img');
-                        this._showHideAtRunTimeState(imgH, designItem);
-                        imgH.onclick = () => this._switchHideAtRunTimeState(imgH, designItem);
-                        imgH.title = 'hide at runtime';
-                        d.appendChild(imgH);
-                        node.tr.children[0].appendChild(d);
-                    }
-                }
-            },
-            dnd5: {
-                dropMarkerParent: this.shadowRoot,
-                preventRecursion: true,
-                preventVoidMoves: false,
-                dropMarkerOffsetX: -24,
-                dropMarkerInsertOffsetX: -16,
-                dragStart: (node, data) => {
-                    /* This function MUST be defined to enable dragging for the tree.
-                      *
-                      * Return false to cancel dragging of node.
-                      * data.dataTransfer.setData() and .setDragImage() is available
-                      * here.
-                      */
-                    // Set the allowed effects (i.e. override the 'effectAllowed' option)
-                    data.effectAllowed = "all";
-                    // Set a drop effect (i.e. override the 'dropEffectDefault' option)
-                    // data.dropEffect = "link";
-                    data.dropEffect = "copy";
-                    // We could use a custom image here:
-                    // data.dataTransfer.setDragImage($("<div>TEST</div>").appendTo("body")[0], -10, -10);
-                    // data.useDefaultImage = false;
-                    // Return true to allow the drag operation
-                    return true;
-                },
-                // dragDrag: function(node, data) {
-                //   logLazy("dragDrag", null, 2000,
-                //     "T1: dragDrag: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
-                //     ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed );
-                // },
-                // dragEnd: function(node, data) {
-                //   node.debug( "T1: dragEnd: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
-                //     ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed, data);
-                //     alert("T1: dragEnd")
-                // },
-                // --- Drop-support:
-                dragEnter: (node, data) => {
-                    // data.dropEffect = "copy";
-                    return true;
-                },
-                dragOver: (node, data) => {
-                    // Assume typical mapping for modifier keys
-                    data.dropEffect = data.dropEffectSuggested;
-                    // data.dropEffect = "move";
-                },
-                dragDrop: (node, data) => {
-                    /* This function MUST be defined to enable dropping of items on
-                      * the tree.
-                      */
-                    let newNode, transfer = data.dataTransfer, sourceNodes = data.otherNodeList, mode = data.dropEffect;
-                    if (data.hitMode === "after") {
-                        // If node are inserted directly after tagrget node one-by-one,
-                        // this would reverse them. So we compensate:
-                        sourceNodes.reverse();
-                    }
-                    if (data.otherNode) {
-                        // Drop another Fancytree node from same frame (maybe a different tree however)
-                        //let sameTree = (data.otherNode.tree === data.tree);
-                        if (mode === "move") {
-                            data.otherNode.moveTo(node, data.hitMode);
-                        }
-                        else {
-                            newNode = data.otherNode.copyTo(node, data.hitMode);
-                            if (mode === "link") {
-                                newNode.setTitle("Link to " + newNode.title);
-                            }
-                            else {
-                                newNode.setTitle("Copy of " + newNode.title);
-                            }
-                        }
-                    }
-                    else if (data.otherNodeData) {
-                        // Drop Fancytree node from different frame or window, so we only have
-                        // JSON representation available
-                        //@ts-ignore
-                        node.addChild(data.otherNodeData, data.hitMode);
-                    }
-                    else if (data.files.length) {
-                        // Drop files
-                        for (let i = 0; i < data.files.length; i++) {
-                            let file = data.files[i];
-                            node.addNode({ title: "'" + file.name + "' (" + file.size + " bytes)" }, data.hitMode);
-                            // var url = "'https://example.com/upload",
-                            //     formData = new FormData();
-                            // formData.append("file", transfer.files[0])
-                            // fetch(url, {
-                            //   method: "POST",
-                            //   body: formData
-                            // }).then(function() { /* Done. Inform the user */ })
-                            // .catch(function() { /* Error. Inform the user */ });
-                        }
-                    }
-                    else {
-                        // Drop a non-node
-                        node.addNode({ title: transfer.getData("text") }, data.hitMode);
-                    }
-                    node.setExpanded();
-                },
-            },
-            multi: {
-                mode: ""
-            },
-            filter: {
-                autoApply: true,
-                autoExpand: true,
-                counter: true,
-                fuzzy: true,
-                hideExpandedCounter: true,
-                hideExpanders: false,
-                highlight: true,
-                leavesOnly: false,
-                nodata: true,
-                mode: "hide" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
-            },
-            childcounter: {
-                deep: true,
-                hideZeros: true,
-                hideExpanded: true
-            },
-            loadChildren: (event, data) => {
-                // update node and parent counters after lazy loading
-                //@ts-ignore
-                data.node.updateCounters();
-            }
-        });
-        //@ts-ignore
-        this._tree = $.ui.fancytree.getTree(this._treeDiv);
-        this._treeDiv.children[0].classList.add('fancytree-connectors');
-    }
-    createTree(rootItem) {
-        if (this._tree) {
-            this._recomputeTree(rootItem);
-        }
-    }
-    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) {
-        this._highlight(event.selectedElements);
-    }
-    _recomputeTree(rootItem) {
-        this._tree.getRootNode().removeChildren();
-        this._getChildren(rootItem, null);
-        this._tree.expandAll();
-        //@ts-ignore
-        this._tree.getRootNode().updateCounters();
-        this._filterNodes();
-    }
-    _getChildren(item, currentNode) {
-        if (currentNode == null) {
-            currentNode = this._tree.getRootNode();
-        }
-        const newNode = currentNode.addChildren({
-            title: item.nodeType === NodeType.Element ? item.name + " " + (item.id ? ('#' + item.id) : '') : '<small><small><small>#' + (item.nodeType === NodeType.TextNode ? 'text' : 'comment') + '&nbsp;</small></small></small> ' + item.content,
-            folder: item.children.length > 0 ? true : false,
-            //@ts-ignore
-            ref: item
-        });
-        for (let i of item.children()) {
-            if (i.nodeType !== NodeType.TextNode || i.content?.trim()) {
-                this._getChildren(i, newNode);
-            }
-        }
-    }
-    _highlight(activeElements) {
-        this._tree.visit((node) => {
-            if (activeElements && activeElements.indexOf(node.data.ref) >= 0) {
-                node.setSelected(true);
-                node.setActive(true);
-                node.makeVisible({ scrollIntoView: true });
-            }
-            else {
-                node.setSelected(false);
-                node.setActive(false);
-            }
-        });
-    }
-}
-customElements.define('node-projects-tree-view-extended', TreeViewExtended);
+  </div>`;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        //@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 = () => {
+            this._filterNodes();
+        };
+        this._treeDiv = this._getDomElement('treetable');
+    }
+    _filterNodes() {
+        let match = this._filter.value;
+        if (match) {
+            this._tree.filterNodes((node) => {
+                return new RegExp(match, "i").test(node.title);
+            });
+        }
+        else {
+            this._tree.clearFilter();
+        }
+    }
+    _showHideAtDesignTimeState(img, designItem) {
+        if (designItem.hideAtDesignTime)
+            img.src = assetsPath + "images/treeview/eyeclose.png";
+        else
+            img.src = assetsPath + "images/treeview/eyeopen.png";
+    }
+    _switchHideAtDesignTimeState(img, designItem) {
+        designItem.hideAtDesignTime = !designItem.hideAtDesignTime;
+        this._showHideAtDesignTimeState(img, designItem);
+    }
+    _showLockAtDesignTimeState(img, designItem) {
+        if (designItem.lockAtDesignTime)
+            img.src = assetsPath + "images/treeview/lock.png";
+        else
+            img.src = assetsPath + "images/treeview/dot.png";
+    }
+    _switchLockAtDesignTimeState(img, designItem) {
+        designItem.lockAtDesignTime = !designItem.lockAtDesignTime;
+        this._showLockAtDesignTimeState(img, designItem);
+    }
+    _showHideAtRunTimeState(img, designItem) {
+        if (designItem.hideAtRunTime)
+            img.src = assetsPath + "images/treeview/eyeclose.png";
+        else
+            img.src = assetsPath + "images/treeview/eyeopen.png";
+    }
+    _switchHideAtRunTimeState(img, designItem) {
+        designItem.hideAtRunTime = !designItem.hideAtRunTime;
+        this._showHideAtRunTimeState(img, designItem);
+    }
+    showDesignItemContextMenu(designItem, event) {
+        event.preventDefault();
+        const mnuItems = [];
+        for (let cme of designItem.serviceContainer.designerContextMenuExtensions) {
+            if (cme.shouldProvideContextmenu(event, designItem.instanceServiceContainer.designerCanvas, designItem, 'treeView')) {
+                mnuItems.push(...cme.provideContextMenuItems(event, designItem.instanceServiceContainer.designerCanvas, designItem));
+            }
+        }
+        let ctxMnu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
+        return ctxMnu;
+    }
+    async ready() {
+        //this._treeDiv.classList.add('fancytree-connectors');
+        $(this._treeDiv).fancytree({
+            icon: true,
+            extensions: ['childcounter', 'dnd5', 'multi', 'filter', 'table'],
+            quicksearch: true,
+            source: [],
+            table: {
+                indentation: 20,
+                nodeColumnIdx: 0,
+                checkboxColumnIdx: 0, // render the checkboxes into the 1st column
+            },
+            activate: (event, data) => {
+                let node = data.node;
+                let designItem = node.data.ref;
+                if (designItem)
+                    designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+            },
+            createNode: (event, data) => {
+                let node = data.node;
+                if (node.tr.children[0]) {
+                    let designItem = node.data.ref;
+                    if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
+                        node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
+                        node.tr.onmouseenter = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(designItem.element);
+                        node.tr.onmouseleave = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(null);
+                        let d = document.createElement("div");
+                        d.className = "cmd";
+                        let imgL = document.createElement('img');
+                        this._showLockAtDesignTimeState(imgL, designItem);
+                        imgL.onclick = () => this._switchLockAtDesignTimeState(imgL, designItem);
+                        imgL.title = 'lock';
+                        d.appendChild(imgL);
+                        let img = document.createElement('img');
+                        this._showHideAtDesignTimeState(img, designItem);
+                        img.onclick = () => this._switchHideAtDesignTimeState(img, designItem);
+                        img.title = 'hide in designer';
+                        d.appendChild(img);
+                        let imgH = document.createElement('img');
+                        this._showHideAtRunTimeState(imgH, designItem);
+                        imgH.onclick = () => this._switchHideAtRunTimeState(imgH, designItem);
+                        imgH.title = 'hide at runtime';
+                        d.appendChild(imgH);
+                        node.tr.children[0].appendChild(d);
+                    }
+                }
+            },
+            dnd5: {
+                dropMarkerParent: this.shadowRoot,
+                preventRecursion: true,
+                preventVoidMoves: false,
+                dropMarkerOffsetX: -24,
+                dropMarkerInsertOffsetX: -16,
+                dragStart: (node, data) => {
+                    /* This function MUST be defined to enable dragging for the tree.
+                      *
+                      * Return false to cancel dragging of node.
+                      * data.dataTransfer.setData() and .setDragImage() is available
+                      * here.
+                      */
+                    // Set the allowed effects (i.e. override the 'effectAllowed' option)
+                    data.effectAllowed = "all";
+                    // Set a drop effect (i.e. override the 'dropEffectDefault' option)
+                    // data.dropEffect = "link";
+                    data.dropEffect = "copy";
+                    // We could use a custom image here:
+                    // data.dataTransfer.setDragImage($("<div>TEST</div>").appendTo("body")[0], -10, -10);
+                    // data.useDefaultImage = false;
+                    // Return true to allow the drag operation
+                    return true;
+                },
+                // dragDrag: function(node, data) {
+                //   logLazy("dragDrag", null, 2000,
+                //     "T1: dragDrag: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
+                //     ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed );
+                // },
+                // dragEnd: function(node, data) {
+                //   node.debug( "T1: dragEnd: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
+                //     ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed, data);
+                //     alert("T1: dragEnd")
+                // },
+                // --- Drop-support:
+                dragEnter: (node, data) => {
+                    // data.dropEffect = "copy";
+                    return true;
+                },
+                dragOver: (node, data) => {
+                    // Assume typical mapping for modifier keys
+                    data.dropEffect = data.dropEffectSuggested;
+                    // data.dropEffect = "move";
+                },
+                dragDrop: (node, data) => {
+                    /* This function MUST be defined to enable dropping of items on
+                      * the tree.
+                      */
+                    let newNode, transfer = data.dataTransfer, sourceNodes = data.otherNodeList, mode = data.dropEffect;
+                    if (data.hitMode === "after") {
+                        // If node are inserted directly after tagrget node one-by-one,
+                        // this would reverse them. So we compensate:
+                        sourceNodes.reverse();
+                    }
+                    if (data.otherNode) {
+                        // Drop another Fancytree node from same frame (maybe a different tree however)
+                        //let sameTree = (data.otherNode.tree === data.tree);
+                        if (mode === "move") {
+                            data.otherNode.moveTo(node, data.hitMode);
+                        }
+                        else {
+                            newNode = data.otherNode.copyTo(node, data.hitMode);
+                            if (mode === "link") {
+                                newNode.setTitle("Link to " + newNode.title);
+                            }
+                            else {
+                                newNode.setTitle("Copy of " + newNode.title);
+                            }
+                        }
+                    }
+                    else if (data.otherNodeData) {
+                        // Drop Fancytree node from different frame or window, so we only have
+                        // JSON representation available
+                        //@ts-ignore
+                        node.addChild(data.otherNodeData, data.hitMode);
+                    }
+                    else if (data.files.length) {
+                        // Drop files
+                        for (let i = 0; i < data.files.length; i++) {
+                            let file = data.files[i];
+                            node.addNode({ title: "'" + file.name + "' (" + file.size + " bytes)" }, data.hitMode);
+                            // var url = "'https://example.com/upload",
+                            //     formData = new FormData();
+                            // formData.append("file", transfer.files[0])
+                            // fetch(url, {
+                            //   method: "POST",
+                            //   body: formData
+                            // }).then(function() { /* Done. Inform the user */ })
+                            // .catch(function() { /* Error. Inform the user */ });
+                        }
+                    }
+                    else {
+                        // Drop a non-node
+                        node.addNode({ title: transfer.getData("text") }, data.hitMode);
+                    }
+                    node.setExpanded();
+                },
+            },
+            multi: {
+                mode: ""
+            },
+            filter: {
+                autoApply: true,
+                autoExpand: true,
+                counter: true,
+                fuzzy: true,
+                hideExpandedCounter: true,
+                hideExpanders: false,
+                highlight: true,
+                leavesOnly: false,
+                nodata: true,
+                mode: "hide" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
+            },
+            childcounter: {
+                deep: true,
+                hideZeros: true,
+                hideExpanded: true
+            },
+            loadChildren: (event, data) => {
+                // update node and parent counters after lazy loading
+                //@ts-ignore
+                data.node.updateCounters();
+            }
+        });
+        //@ts-ignore
+        this._tree = $.ui.fancytree.getTree(this._treeDiv);
+        this._treeDiv.children[0].classList.add('fancytree-connectors');
+    }
+    createTree(rootItem) {
+        if (this._tree) {
+            this._recomputeTree(rootItem);
+        }
+    }
+    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) {
+        this._highlight(event.selectedElements);
+    }
+    _recomputeTree(rootItem) {
+        this._tree.getRootNode().removeChildren();
+        this._getChildren(rootItem, null);
+        this._tree.expandAll();
+        //@ts-ignore
+        this._tree.getRootNode().updateCounters();
+        this._filterNodes();
+    }
+    _getChildren(item, currentNode) {
+        if (currentNode == null) {
+            currentNode = this._tree.getRootNode();
+        }
+        const newNode = currentNode.addChildren({
+            title: item.nodeType === NodeType.Element ? item.name + " " + (item.id ? ('#' + item.id) : '') : '<small><small><small>#' + (item.nodeType === NodeType.TextNode ? 'text' : 'comment') + '&nbsp;</small></small></small> ' + item.content,
+            folder: item.children.length > 0 ? true : false,
+            //@ts-ignore
+            ref: item
+        });
+        for (let i of item.children()) {
+            if (i.nodeType !== NodeType.TextNode || i.content?.trim()) {
+                this._getChildren(i, newNode);
+            }
+        }
+    }
+    _highlight(activeElements) {
+        this._tree.visit((node) => {
+            if (activeElements && activeElements.indexOf(node.data.ref) >= 0) {
+                node.setSelected(true);
+                node.setActive(true);
+                node.makeVisible({ scrollIntoView: true });
+            }
+            else {
+                node.setSelected(false);
+                node.setActive(false);
+            }
+        });
+    }
+}
+customElements.define('node-projects-tree-view-extended', TreeViewExtended);