@node-projects/web-component-designer 0.0.292 → 0.1.0

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

@@ -1,366 +0,0 @@
-import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { NodeType } from '../../item/NodeType.js';
-import { assetsPath } from '../../../Constants.js';
-import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
-import { switchContainer } from '../../helper/SwitchContainerHelper.js';
-import { DomConverter } from '../designerView/DomConverter.js';
-export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
-    _treeDiv;
-    _tree;
-    _filter;
-    _instanceServiceContainer;
-    _selectionChangedHandler;
-    _contentChangedHandler;
-    static style = css `
-      * {
-          touch-action: none;
-      }
-      
-      span.drag-source {
-        border: 1px solid grey;
-        border-radius: 3px;
-        padding: 2px;
-        background-color: silver;
-      }
-
-      span.fancytree-node.fancytree-drag-source {
-        outline: 1px dotted grey;
-      }
-      span.fancytree-node.fancytree-drop-accept {
-        outline: 1px dotted green;
-      }
-      span.fancytree-node.fancytree-drop-reject {
-        outline: 1px dotted red;
-      }
-      #tree ul {
-        border: none;
-      }
-      #tree ul:focus {
-        outline: none;
-      }
-      span.fancytree-title {
-        align-items: center;
-        flex-direction: row;
-        display: inline-flex;
-      }
-      td {
-        white-space: nowrap;
-        display: flex;
-      }
-      td > img {
-        vertical-align: middle;
-      }
-
-      .cmd {
-        display: flex;
-        position: sticky;
-        right: 0;
-        padding-right: 2px;
-        align-items: center;
-        gap: 2px;
-        background: #ffffffc9;
-        width: 42px;
-        justify-content: flex-end;
-        background: white;
-      }
-
-      .cmd > img {
-        width: 10px;
-      }
-
-      table.fancytree-ext-table tbody tr.fancytree-selected {
-        background-color: #bebebe;
-      }
-    `;
-    static template = html `
-  <div style="height: 100%;">
-    <input id="input" style="width: 100%; box-sizing: border-box; height:27px;" placeholder="Filter..." autocomplete="off">
-    <div style="height: calc(100% - 23px); overflow: auto;">
-      <table id="treetable" style="min-width: 100%;">
-        <colgroup>
-          <col width="*">
-          <!--<col width="25px">
-          <col width="25px">
-          <col width="25px">-->
-        </colgroup>
-        <thead style="display: none;">
-          <tr>
-            <th></th>
-            <!--<th></th>
-            <th></th>
-            <th></th>-->
-          </tr>
-        </thead>
-      </table>
-    </div>
-  </div>`;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        //@ts-ignore
-        if (window.importShim)
-            //@ts-ignore
-            importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
-        else
-            //@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 = ContextMenu.show(mnuItems, event);
-        return ctxMnu;
-    }
-    async ready() {
-        //this._treeDiv.classList.add('fancytree-connectors');
-        $(this._treeDiv).fancytree({
-            debugLevel: 0,
-            icon: true,
-            extensions: ['childcounter', 'dnd5', 'multi', 'filter', 'table'],
-            quicksearch: true,
-            source: [],
-            table: {
-                indentation: 10,
-                nodeColumnIdx: 0,
-                checkboxColumnIdx: 0, // render the checkboxes into the 1st column
-            },
-            click: (event, data) => {
-                if (event.originalEvent) { // only for clicked items, not when elements selected via code.
-                    let node = data.node;
-                    let designItem = node.data.ref;
-                    if (designItem) {
-                        if (event.ctrlKey) {
-                            const sel = [...designItem.instanceServiceContainer.selectionService.selectedElements];
-                            const idx = sel.indexOf(designItem);
-                            if (idx >= 0) {
-                                sel.splice(idx, 1);
-                                designItem.instanceServiceContainer.selectionService.setSelectedElements(sel);
-                            }
-                            else {
-                                designItem.instanceServiceContainer.selectionService.setSelectedElements([...sel, designItem]);
-                            }
-                        }
-                        else {
-                            designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
-                        }
-                    }
-                }
-                const disableExpand = event.originalEvent.ctrlKey || event.originalEvent.shiftKey;
-                return !disableExpand;
-            },
-            createNode: (event, data) => {
-                let node = data.node;
-                if (node.tr.children[0]) {
-                    let designItem = node.data.ref;
-                    node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
-                    if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
-                        node.tr.onmouseenter = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(designItem.element, e);
-                        node.tr.onmouseleave = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(null, e);
-                        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,
-                multiSource: true,
-                dragStart: (node, data) => {
-                    data.effectAllowed = "all";
-                    data.dropEffect = "move";
-                    return true;
-                },
-                dragEnter: (node, data) => {
-                    data.dropEffect = data.originalEvent.ctrlKey ? 'copy' : 'move';
-                    return true;
-                },
-                dragOver: (node, data) => {
-                    data.dropEffect = data.originalEvent.ctrlKey ? 'copy' : 'move';
-                    return true;
-                },
-                dragDrop: async (node, data) => {
-                    let sourceDesignitems = data.otherNodeList.map(x => x.data.ref);
-                    if (data.dropEffectSuggested == 'copy') {
-                        let newSourceDesignitems = [];
-                        for (let d of sourceDesignitems)
-                            newSourceDesignitems.push(await d.clone());
-                        sourceDesignitems = newSourceDesignitems;
-                    }
-                    const targetDesignitem = node.data.ref;
-                    let grp = targetDesignitem.openGroup("drag/drop in treeview");
-                    if (data.hitMode == 'over') {
-                        switchContainer(sourceDesignitems, targetDesignitem);
-                    }
-                    else if (data.hitMode == 'after' || data.hitMode == 'before') {
-                        for (let d of sourceDesignitems) {
-                            if (d.parent != targetDesignitem.parent) {
-                                switchContainer([d], targetDesignitem.parent);
-                            }
-                            if (data.hitMode == 'before')
-                                targetDesignitem.insertAdjacentElement(d, 'beforebegin');
-                            else
-                                targetDesignitem.insertAdjacentElement(d, 'afterend');
-                        }
-                    }
-                    grp.commit();
-                },
-            },
-            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.isRootItem ? '-root-' : item.nodeType === NodeType.Element ? item.name + " " + (item.id ? ('#' + item.id) : '') : '<small><small><small>#' + (item.nodeType === NodeType.TextNode ? 'text' : 'comment') + '&nbsp;</small></small></small> ' + DomConverter.normalizeContentValue(item.content),
-            folder: item.children.length > 0 ? true : false,
-            //@ts-ignore
-            ref: item
-        });
-        for (let i of item.children()) {
-            if (!i.isEmptyTextNode) {
-                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);

package/dist/enums/EventNames.d.ts

@@ -1,16 +0,0 @@
-export declare enum EventNames {
-    PointerDown = "pointerdown",
-    PointerMove = "pointermove",
-    PointerUp = "pointerup",
-    DragEnter = "dragenter",
-    DragEnd = "dragend",
-    DragLeave = "dragleave",
-    DragOver = "dragover",
-    Drop = "drop",
-    Scroll = "scroll",
-    Wheel = "wheel",
-    ContextMenu = "contextmenu",
-    KeyDown = "keydown",
-    KeyUp = "keyup",
-    DblClick = "dblclick"
-}

package/dist/enums/EventNames.js

@@ -1,17 +0,0 @@
-export var EventNames;
-(function (EventNames) {
-    EventNames["PointerDown"] = "pointerdown";
-    EventNames["PointerMove"] = "pointermove";
-    EventNames["PointerUp"] = "pointerup";
-    EventNames["DragEnter"] = "dragenter";
-    EventNames["DragEnd"] = "dragend";
-    EventNames["DragLeave"] = "dragleave";
-    EventNames["DragOver"] = "dragover";
-    EventNames["Drop"] = "drop";
-    EventNames["Scroll"] = "scroll";
-    EventNames["Wheel"] = "wheel";
-    EventNames["ContextMenu"] = "contextmenu";
-    EventNames["KeyDown"] = "keydown";
-    EventNames["KeyUp"] = "keyup";
-    EventNames["DblClick"] = "dblclick";
-})(EventNames || (EventNames = {}));

package/dist/enums/Orientation.d.ts

@@ -1,8 +0,0 @@
-export declare enum Orientation {
-    TOP = 0,
-    RIGHT = 1,
-    BOTTOM = 2,
-    LEFT = 3,
-    VERTICAL_CENTER = 4,
-    HORIZONTAL_CENTER = 5
-}

package/dist/enums/Orientation.js

@@ -1,9 +0,0 @@
-export var Orientation;
-(function (Orientation) {
-    Orientation[Orientation["TOP"] = 0] = "TOP";
-    Orientation[Orientation["RIGHT"] = 1] = "RIGHT";
-    Orientation[Orientation["BOTTOM"] = 2] = "BOTTOM";
-    Orientation[Orientation["LEFT"] = 3] = "LEFT";
-    Orientation[Orientation["VERTICAL_CENTER"] = 4] = "VERTICAL_CENTER";
-    Orientation[Orientation["HORIZONTAL_CENTER"] = 5] = "HORIZONTAL_CENTER";
-})(Orientation || (Orientation = {}));

package/dist/enums/PointerActionType.d.ts

@@ -1,8 +0,0 @@
-export declare enum PointerActionType {
-    DragOrSelect = "DragOrSelect",
-    Drag = "Drag",
-    Resize = "Resize",
-    Rotate = "Rotate",
-    DrawSelection = "DrawSelection",
-    DrawingSelection = "DrawingSelection"
-}

package/dist/enums/PointerActionType.js

@@ -1,9 +0,0 @@
-export var PointerActionType;
-(function (PointerActionType) {
-    PointerActionType["DragOrSelect"] = "DragOrSelect";
-    PointerActionType["Drag"] = "Drag";
-    PointerActionType["Resize"] = "Resize";
-    PointerActionType["Rotate"] = "Rotate";
-    PointerActionType["DrawSelection"] = "DrawSelection";
-    PointerActionType["DrawingSelection"] = "DrawingSelection";
-})(PointerActionType || (PointerActionType = {}));