@node-projects/web-component-designer 0.1.143 → 0.1.145

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

@@ -2,6 +2,7 @@ import { ServiceContainer } from '../../services/ServiceContainer.js';
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { IPropertyGroup } from '../../services/propertiesService/IPropertyGroup.js';
 export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     private _serviceContainer;
     private _designerTabControl;
@@ -12,11 +13,15 @@ export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     private _nodeReplacedCb;
     private _instanceServiceContainer;
     private _selectionChangedHandler;
+    propertyGroupHover: (group: IPropertyGroup, part: 'name' | 'desc') => boolean;
+    propertyGroupClick: (group: IPropertyGroup, part: 'name' | 'desc') => void;
     static readonly style: CSSStyleSheet;
     static readonly properties: {
         serviceContainer: ObjectConstructor;
         instanceServiceContainer: ObjectConstructor;
         selectedItems: ArrayConstructor;
+        propertyGroupHover: FunctionConstructor;
+        propertyGroupClick: FunctionConstructor;
     };
     constructor();
     set serviceContainer(value: ServiceContainer);

package/dist/elements/widgets/propertyGrid/PropertyGrid.js

@@ -12,6 +12,8 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _nodeReplacedCb;
     _instanceServiceContainer;
     _selectionChangedHandler;
+    propertyGroupHover;
+    propertyGroupClick;
     static style = css `
     :host {
       display: block;
@@ -29,7 +31,9 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     static properties = {
         serviceContainer: Object,
         instanceServiceContainer: Object,
-        selectedItems: Array
+        selectedItems: Array,
+        propertyGroupHover: Function,
+        propertyGroupClick: Function
     };
     constructor() {
         super();
@@ -71,6 +75,8 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
                 if (!lst) {
                     lst = new PropertyGridPropertyList(this.serviceContainer);
                     lst.title = p.name;
+                    lst.propertyGroupHover = this.propertyGroupHover;
+                    lst.propertyGroupClick = this.propertyGroupClick;
                     this._designerTabControl.appendChild(lst);
                     this._propertyGridPropertyLists.push(lst);
                     this._propertyGridPropertyListsDict[p.name] = lst;

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

@@ -4,12 +4,15 @@ import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-web
 import { IPropertyEditor } from '../../services/propertiesService/IPropertyEditor.js';
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPropertiesService } from '../../services/propertiesService/IPropertiesService.js';
+import { IPropertyGroup } from '../../services/propertiesService/IPropertyGroup.js';
 export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     private _div;
     private _propertyMap;
     private _serviceContainer;
     private _propertiesService;
     private _designItems;
+    propertyGroupHover: (group: IPropertyGroup, part: 'name' | 'desc') => boolean;
+    propertyGroupClick: (group: IPropertyGroup, part: 'name' | 'desc') => void;
     get propertiesService(): IPropertiesService;
     static get style(): CSSStyleSheet;
     constructor(serviceContainer: ServiceContainer);

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -10,6 +10,8 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _serviceContainer;
     _propertiesService;
     _designItems;
+    propertyGroupHover;
+    propertyGroupClick;
     get propertiesService() {
         return this._propertiesService;
     }
@@ -85,12 +87,22 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
       font-size: 10px;
       font-family: monospace;
     }
+    .group-header[clickable]:hover {
+      cursor:pointer;
+      color: orange;
+      text-decoration: underline;
+    }
     .group-desc {
       display: inline-flex;
       flex-direction: row-reverse;
       font-size: 10px;
       text-decoration: underline;
     }
+    .group-desc[clickable]:hover {
+      cursor:pointer;
+      color: orange;
+      text-decoration: underline;
+    }
     .dragOverProperty {
       outline: 2px dashed orange;
       outline-offset: -2px;
@@ -139,6 +151,28 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
             let desc = document.createElement('span');
             desc.innerHTML = g.description ?? '';
             desc.className = 'group-desc';
+            if (this.propertyGroupHover) {
+                header.onmouseenter = () => {
+                    if (this.propertyGroupHover(g, 'name'))
+                        header.setAttribute('clickable', '');
+                    else
+                        header.removeAttribute('clickable');
+                };
+                header.onclick = () => {
+                    if (this.propertyGroupClick)
+                        this.propertyGroupClick(g, 'name');
+                };
+                desc.onmouseenter = () => {
+                    if (this.propertyGroupHover(g, 'desc'))
+                        desc.setAttribute('clickable', '');
+                    else
+                        desc.removeAttribute('clickable');
+                };
+                desc.onclick = () => {
+                    if (this.propertyGroupClick)
+                        this.propertyGroupClick(g, 'desc');
+                };
+            }
             this._div.appendChild(desc);
             this.createPropertyEditors(g.properties);
         }

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

@@ -1,13 +1,14 @@
 import { ServiceContainer } from '../../services/ServiceContainer.js';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { PropertyGrid } from './PropertyGrid.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
+    propertyGrid: PropertyGrid;
     private _type;
     private _id;
     private _content;
-    private _pg;
     private _selectionChangedHandler;
     private _instanceServiceContainer;
     private _idRect;

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -54,10 +54,10 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     <span id="contentSpan" class="desc">Content:</span><input type="text" id="content">
   </div>
   <node-projects-web-component-designer-property-grid id="pg"></node-projects-web-component-designer-property-grid>`;
+    propertyGrid;
     _type;
     _id;
     _content;
-    _pg;
     _selectionChangedHandler;
     _instanceServiceContainer;
     _idRect;
@@ -71,7 +71,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._type = this._getDomElement('type');
         this._id = this._getDomElement('id');
         this._content = this._getDomElement('content');
-        this._pg = this._getDomElement('pg');
+        this.propertyGrid = this._getDomElement('pg');
         this._idRect = this._getDomElement('idRect');
         this._contentRect = this._getDomElement('contentRect');
         this._innerRect = this._getDomElement('innerRect');
@@ -132,13 +132,13 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         };
     }
     set serviceContainer(value) {
-        this._pg.serviceContainer = value;
+        this.propertyGrid.serviceContainer = value;
     }
     set instanceServiceContainer(value) {
         this._instanceServiceContainer = value;
         this._selectionChangedHandler?.dispose();
         this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(async (e) => {
-            this._pg.instanceServiceContainer = value;
+            this.propertyGrid.instanceServiceContainer = value;
             await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
             if (this._instanceServiceContainer.selectionService?.primarySelection?.isRootItem) {
                 this._configButton.style.display = 'none';
@@ -183,7 +183,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
                 PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
             }
         });
-        this._pg.instanceServiceContainer = value;
+        this.propertyGrid.instanceServiceContainer = value;
     }
 }
 customElements.define('node-projects-web-component-designer-property-grid-with-header', PropertyGridWithHeader);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.143",
+  "version": "0.1.145",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",