@node-projects/web-component-designer 0.0.46 → 0.0.50

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

@@ -1,10 +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;
     static style = css `
       * {
           touch-action: none;
@@ -39,14 +43,24 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
       }
       td {
         white-space: nowrap;
-      }
-      td:nth-child(n+2) {
-        text-align: center;
+        display: flex;
       }
       td > img {
         vertical-align: middle;
       }
 
+      .cmd {
+        display: flex;
+        position: sticky;
+        right: 0;
+        padding-right: 4px;
+        align-items: center;
+        gap: 2px;
+        background: #ffffffc9;
+        width: 70px;
+        justify-content: flex-end;
+      }
+
       table.fancytree-ext-table tbody tr.fancytree-selected {
         background-color: #bebebe;
       }
@@ -58,16 +72,16 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
       <table id="treetable" style="min-width: 100%;">
         <colgroup>
           <col width="*">
+          <!--<col width="25px">
           <col width="25px">
-          <col width="25px">
-          <col width="25px">
+          <col width="25px">-->
         </colgroup>
         <thead style="display: none;">
           <tr>
             <th></th>
+            <!--<th></th>
             <th></th>
-            <th></th>
-            <th></th>
+            <th></th>-->
           </tr>
         </thead>
       </table>
@@ -122,6 +136,17 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         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({
@@ -142,46 +167,28 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             },
             createNode: (event, data) => {
                 let node = data.node;
-                if (node.tr.children[1]) {
+                if (node.tr.children[0]) {
                     let designItem = node.data.ref;
-                    if (designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
-                        /*
-                        let toolTipImg: HTMLImageElement;
-                        (<HTMLElement>node.tr.children[0]).onmouseenter = (e) => {
-                          toolTipImg = document.createElement("img");
-                          Screenshot.takeScreenshot(designItem.element).then(x => { if (toolTipImg) toolTipImg.src = x; });
-                          toolTipImg.style.position = 'absolute';
-                          let r = node.tr.children[0].getBoundingClientRect();
-                          toolTipImg.style.left = (e.x + 5 - r.left) + 'px';
-                          toolTipImg.style.top = (e.y + 5 - r.top) + 'px';
-                          (<HTMLElement>node.tr.children[0]).appendChild(toolTipImg);
-                        }
-                        (<HTMLElement>node.tr.children[0]).onmousemove = (e) => {
-                          if (toolTipImg) {
-                            let r = node.tr.children[0].getBoundingClientRect();
-                            toolTipImg.style.left = (e.x + 5 - r.left) + 'px';
-                            toolTipImg.style.top = (e.y + 5 - r.top) + 'px';
-                          }
-                        }
-                        (<HTMLElement>node.tr.children[0]).onmouseout = (e) => {
-                          if (toolTipImg) {
-                            toolTipImg.parentNode?.removeChild(toolTipImg);
-                            toolTipImg = null;
-                          }
-                        }
-                        */
+                    if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
+                        node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
+                        let d = document.createElement("div");
+                        d.className = "cmd";
                         let img = document.createElement('img');
                         this._showHideAtDesignTimeState(img, designItem);
                         img.onclick = () => this._switchHideAtDesignTimeState(img, designItem);
-                        node.tr.children[1].appendChild(img);
+                        img.title = 'hide in designer';
+                        d.appendChild(img);
                         let imgL = document.createElement('img');
                         this._showLockAtDesignTimeState(imgL, designItem);
                         imgL.onclick = () => this._switchLockAtDesignTimeState(imgL, designItem);
-                        node.tr.children[2].appendChild(imgL);
+                        imgL.title = 'lock';
+                        d.appendChild(imgL);
                         let imgH = document.createElement('img');
                         this._showHideAtRunTimeState(imgH, designItem);
                         imgH.onclick = () => this._switchHideAtRunTimeState(imgH, designItem);
-                        node.tr.children[3].appendChild(imgH);
+                        imgH.title = 'hide at runtime';
+                        d.appendChild(imgH);
+                        node.tr.children[0].appendChild(d);
                     }
                 }
             },
@@ -318,6 +325,18 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             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) {
         if (event.selectedElements.length > 0) {
             this._highlight(event.selectedElements);

package/dist/index.d.ts

@@ -84,6 +84,7 @@ export type { IServiceContainer } from "./elements/services/IServiceContainer.js
 export * from "./elements/services/ServiceContainer.js";
 export * from "./elements/widgets/propertyGrid/PropertyGrid.js";
 export * from "./elements/widgets/propertyGrid/PropertyGridPropertyList.js";
+export * from "./elements/widgets/propertyGrid/PropertyGridWithHeader.js";
 export type { IDesignerCanvas } from "./elements/widgets/designerView/IDesignerCanvas.js";
 export type { IPlacementView } from "./elements/widgets/designerView/IPlacementView.js";
 export * from "./elements/widgets/designerView/designerView.js";
@@ -132,7 +133,7 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
-export type { IContextMenuExtension } from "./elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.js";
+export type { IContextMenuExtension, ContextmenuInitiator } from "./elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";

package/dist/index.js

@@ -53,6 +53,7 @@ export * from "./elements/services/InstanceServiceContainer.js";
 export * from "./elements/services/ServiceContainer.js";
 export * from "./elements/widgets/propertyGrid/PropertyGrid.js";
 export * from "./elements/widgets/propertyGrid/PropertyGridPropertyList.js";
+export * from "./elements/widgets/propertyGrid/PropertyGridWithHeader.js";
 export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.46",
+  "version": "0.0.50",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",