@node-projects/web-component-designer 0.0.259 → 0.0.261

package/dist/elements/services/propertiesService/services/CommonPropertiesService copy.d.ts

@@ -0,0 +1,13 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class CommonPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    private commonProperties;
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

package/dist/elements/services/propertiesService/services/CommonPropertiesService copy.js

@@ -0,0 +1,44 @@
+import { PropertyType } from '../PropertyType.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class CommonPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
+    }
+    //@ts-ignore
+    commonProperties = [
+        {
+            name: "id",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "class",
+            type: "string",
+            service: this,
+            attributeName: "class",
+            propertyName: "className",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "title",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "tabindex",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    name = "common";
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return this.commonProperties[name];
+    }
+    getProperties(designItem) {
+        return this.commonProperties;
+    }
+}

package/dist/elements/services/propertiesService/services/CommonPropertiesService.js

@@ -36,7 +36,7 @@ export class CommonPropertiesService extends AbstractPropertiesService {
         return true;
     }
     getProperty(designItem, name) {
-        return this.commonProperties[name];
+        return this.commonProperties.find(x => x.name == name);
     }
     getProperties(designItem) {
         return this.commonProperties;

package/dist/elements/services/propertiesService/services/ContentAndIdPropertiesService.d.ts

@@ -0,0 +1,18 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+import { ValueType } from '../ValueType.js';
+export declare class ContentAndIdPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    contentProperty: IProperty;
+    idProperty: IProperty;
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    clearValue(designItems: IDesignItem[], property: IProperty): void;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
+}

package/dist/elements/services/propertiesService/services/ContentAndIdPropertiesService.js

@@ -0,0 +1,68 @@
+import { PropertyType } from '../PropertyType.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { ValueType } from '../ValueType.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+export class ContentAndIdPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
+    }
+    contentProperty = {
+        name: "textContent",
+        type: "string",
+        service: this,
+        propertyType: PropertyType.property
+    };
+    idProperty = {
+        name: "id",
+        type: "string",
+        service: this,
+        propertyType: PropertyType.propertyAndAttribute
+    };
+    name = "content";
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return name == 'id' ? this.idProperty : this.contentProperty;
+    }
+    getProperties(designItem) {
+        return [this.idProperty, this.contentProperty];
+    }
+    clearValue(designItems, property) {
+        if (property.name == this.contentProperty.name) {
+            designItems[0].clearChildren();
+        }
+        else {
+            super.clearValue(designItems, property);
+        }
+    }
+    isSet(designItems, property) {
+        if (property.name == this.contentProperty.name) {
+            let all = true;
+            let some = false;
+            if (designItems != null && designItems.length !== 0) {
+                designItems.forEach((x) => {
+                    let has = false;
+                    has = x.element.childNodes.length > 0;
+                    all = all && has;
+                    some = some || has;
+                });
+                //todo: optimize perf, do not call bindings service for each property. 
+                const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                    return s.getBindings(designItems[0]);
+                });
+                if (bindings && bindings.find(x => x.target == BindingTarget.property && x.targetName == property.name))
+                    return ValueType.bound;
+            }
+            return all ? ValueType.all : some ? ValueType.some : ValueType.none;
+        }
+        return super.isSet(designItems, property);
+    }
+    getValue(designItems, property) {
+        if (property.name == this.contentProperty.name) {
+            return designItems[0].element.textContent;
+        }
+        return super.getValue(designItems, property);
+    }
+}

package/dist/elements/services/propertiesService/services/ContentPropertiesService.d.ts

@@ -0,0 +1,14 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class ContentAndIdPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    contentProperty: IProperty;
+    private idProperty;
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

package/dist/elements/services/propertiesService/services/ContentPropertiesService.js

@@ -0,0 +1,30 @@
+import { PropertyType } from '../PropertyType.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class ContentAndIdPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
+    }
+    contentProperty = {
+        name: "content",
+        type: "string",
+        service: this,
+        propertyType: PropertyType.complex
+    };
+    idProperty = {
+        name: "content",
+        type: "string",
+        service: this,
+        propertyType: PropertyType.complex
+    };
+    name = "content";
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return name == 'id' ? this.idProperty : this.contentProperty;
+    }
+    getProperties(designItem) {
+        return [this.idProperty, this.contentProperty];
+    }
+}

package/dist/elements/services/propertiesService/services/CssPropertiesService.js

@@ -90,7 +90,7 @@ export class CssPropertiesService extends CommonPropertiesService {
         return true;
     }
     getProperty(designItem, name) {
-        return this[this.name][name];
+        return this._getPropertyDef(name);
     }
     getProperties(designItem) {
         const propNames = this[this.name];

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.js

@@ -183,7 +183,7 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
         return false;
     }
     getProperty(designItem, name) {
-        return this.getProperties(designItem)[name];
+        return this.getProperties(designItem).find(x => x.name == name);
     }
     getProperties(designItem) {
         if (!this.isHandledElement(designItem))

package/dist/elements/services/propertiesService/services/SVGElementsPropertiesService.js

@@ -237,7 +237,7 @@ export class SVGElementsPropertiesService extends CommonPropertiesService {
         return false;
     }
     getProperty(designItem, name) {
-        return this.getProperties(designItem)[name];
+        return this.getProperties(designItem).find(x => x.name == name);
     }
     getProperties(designItem) {
         if (!this.isHandledElement(designItem))

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

@@ -1,6 +1,7 @@
 import { IProperty } from '../../services/propertiesService/IProperty.js';
 import { ServiceContainer } from '../../services/ServiceContainer.js';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { IPropertyEditor } from '../../services/propertiesService/IPropertyEditor.js';
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPropertiesService } from '../../services/propertiesService/IPropertiesService.js';
 export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
@@ -17,6 +18,8 @@ export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazy
     private createPropertyGroups;
     private createPropertyEditors;
     openContextMenu(event: MouseEvent, property: IProperty): void;
+    static openContextMenu(event: MouseEvent, designItems: IDesignItem[], property: IProperty): void;
     designItemsChanged(designItems: IDesignItem[]): void;
     refreshForDesignItems(items: IDesignItem[]): void;
+    static refreshIsSetElementAndEditorForDesignItems(isSetElement: HTMLElement, property: IProperty, items: IDesignItem[], propertiesService: IPropertiesService, editor?: IPropertyEditor): void;
 }

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

@@ -207,22 +207,25 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         }
     }
     openContextMenu(event, property) {
+        PropertyGridPropertyList.openContextMenu(event, this._designItems, property);
+    }
+    static openContextMenu(event, designItems, property) {
         const ctxMenu = [
             {
                 title: 'clear', action: (e) => {
-                    property.service.clearValue(this._designItems, property);
-                    this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems);
+                    property.service.clearValue(designItems, property);
+                    designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
                 }
             },
         ];
-        if (this._serviceContainer.config.openBindingsEditor) {
+        if (designItems[0].serviceContainer.config.openBindingsEditor) {
             ctxMenu.push(...[
                 { title: '-' },
                 {
                     title: 'edit binding', action: () => {
-                        let target = this._propertiesService.getPropertyTarget(this._designItems[0], property);
-                        let binding = this._propertiesService.getBinding(this._designItems, property);
-                        this._serviceContainer.config.openBindingsEditor(property, this._designItems, binding, target);
+                        let target = property.service.getPropertyTarget(designItems[0], property);
+                        let binding = property.service.getBinding(designItems, property);
+                        designItems[0].serviceContainer.config.openBindingsEditor(property, designItems, binding, target);
                     }
                 }
             ]);
@@ -238,21 +241,24 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     }
     refreshForDesignItems(items) {
         for (let m of this._propertyMap) {
-            let s = this._propertiesService.isSet(items, m[0]);
-            let v = this._propertiesService.getValue(items, m[0]);
-            m[1].isSetElement.title = s;
-            if (s == ValueType.none) {
-                m[1].isSetElement.style.background = '';
-                v = this._propertiesService.getUnsetValue(items, m[0]);
-            }
-            else if (s == ValueType.all)
-                m[1].isSetElement.style.background = 'white';
-            else if (s == ValueType.some)
-                m[1].isSetElement.style.background = 'gray';
-            else if (s == ValueType.bound)
-                m[1].isSetElement.style.background = 'orange';
-            m[1].editor.refreshValueWithoutNotification(s, v);
+            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(m[1].isSetElement, m[0], items, this._propertiesService, m[1].editor);
+        }
+    }
+    static refreshIsSetElementAndEditorForDesignItems(isSetElement, property, items, propertiesService, editor) {
+        let s = propertiesService.isSet(items, property);
+        let v = propertiesService.getValue(items, property);
+        isSetElement.title = s;
+        if (s == ValueType.none) {
+            isSetElement.style.background = '';
+            v = propertiesService.getUnsetValue(items, property);
         }
+        else if (s == ValueType.all)
+            isSetElement.style.background = 'white';
+        else if (s == ValueType.some)
+            isSetElement.style.background = 'gray';
+        else if (s == ValueType.bound)
+            isSetElement.style.background = 'orange';
+        editor?.refreshValueWithoutNotification(s, v);
     }
 }
 customElements.define('node-projects-property-grid-property-list', PropertyGridPropertyList);

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

@@ -10,6 +10,9 @@ export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAp
     private _pg;
     private _selectionChangedHandler;
     private _instanceServiceContainer;
+    private _idRect;
+    private _contentRect;
+    private _propertiesService;
     constructor();
     set serviceContainer(value: ServiceContainer);
     set instanceServiceContainer(value: InstanceServiceContainer);

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

@@ -1,6 +1,8 @@
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { sleep } from '../../helper/Helper.js';
 import { NodeType } from '../../item/NodeType.js';
+import { PropertyGridPropertyList } from './PropertyGridPropertyList.js';
+import { ContentAndIdPropertiesService } from '../../services/propertiesService/services/ContentAndIdPropertiesService.js';
 export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
@@ -11,9 +13,9 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
       background: var(--medium-grey, #2f3545);
       color: white;
     }
-    div {
+    div.root {
       display: grid;
-      grid-template-columns: auto 1fr;
+      grid-template-columns: 15px auto 1fr;
       padding: 3px 6px;
       font-family: monospace; 
       align-items: center;
@@ -41,9 +43,11 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     }
     `;
     static template = html `
-  <div>
-    <span class="desc">Type:</span><span id="type"></span>
+  <div class="root">
+    <span style="grid-column: span 2;" class="desc">Type:</span><span id="type"></span>
+    <div id="idRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
     <span class="desc">Id:</span><input type="text" id="id">
+    <div id="contentRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
     <span class="desc">Content:</span><input type="text" id="content">
   </div>
   <node-projects-property-grid id="pg"></node-projects-property-grid>
@@ -54,6 +58,9 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     _pg;
     _selectionChangedHandler;
     _instanceServiceContainer;
+    _idRect;
+    _contentRect;
+    _propertiesService;
     constructor() {
         super();
         this._restoreCachedInititalValues();
@@ -61,6 +68,17 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._id = this._getDomElement('id');
         this._content = this._getDomElement('content');
         this._pg = this._getDomElement('pg');
+        this._idRect = this._getDomElement('idRect');
+        this._contentRect = this._getDomElement('contentRect');
+        this._propertiesService = new ContentAndIdPropertiesService();
+        this._idRect.oncontextmenu = (event) => {
+            event.preventDefault();
+            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.idProperty);
+        };
+        this._contentRect.oncontextmenu = (event) => {
+            event.preventDefault();
+            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty);
+        };
         this._id.onkeydown = e => {
             if (e.key == 'Enter')
                 this._instanceServiceContainer.selectionService.primarySelection.id = this._id.value;
@@ -111,6 +129,8 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
             else
                 this._content.value = '';
             this._content.title = this._content.value;
+            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
+            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._contentRect, this._propertiesService.contentProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
         });
     }
 }

package/dist/index.d.ts

@@ -102,6 +102,7 @@ export * from "./elements/services/propertiesService/propertyEditors/special/Gri
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
+export * from "./elements/services/propertiesService/services/ContentAndIdPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssCurrentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
 export * from "./elements/services/propertiesService/services/ListPropertiesService.js";

package/dist/index.js

@@ -65,6 +65,7 @@ export * from "./elements/services/propertiesService/propertyEditors/special/Gri
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
+export * from "./elements/services/propertiesService/services/ContentAndIdPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssCurrentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
 export * from "./elements/services/propertiesService/services/ListPropertiesService.js";

package/package.json

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