@node-projects/web-component-designer 0.0.136 → 0.0.137

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

@@ -1,14 +1,12 @@
 import { PropertyGridPropertyList } from './PropertyGridPropertyList';
 import { DesignerTabControl } from '../../controls/DesignerTabControl';
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-import { CssPropertiesService } from '../../services/propertiesService/services/CssPropertiesService';
-import { CommonPropertiesService } from '../../services/propertiesService/services/CommonPropertiesService';
-import { AttributesPropertiesService } from '../../services/propertiesService/services/AttributesPropertiesService';
 export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _serviceContainer;
     _designerTabControl;
     _selectedItems;
     _propertyGridPropertyLists;
+    _propertyGridPropertyListsDict;
     _itemsObserver;
     _instanceServiceContainer;
     _selectionChangedHandler;
@@ -44,54 +42,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     set serviceContainer(value) {
         this._serviceContainer = value;
         this._propertyGridPropertyLists = [];
-        let elementPropertyEditorAttributeList = new PropertyGridPropertyList(value);
-        elementPropertyEditorAttributeList.setPropertiesService(new CssPropertiesService("styles")); //This is replace in selectedItems
-        elementPropertyEditorAttributeList.title = "properties";
-        this._designerTabControl.appendChild(elementPropertyEditorAttributeList);
-        this._propertyGridPropertyLists.push(elementPropertyEditorAttributeList);
-        let attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new AttributesPropertiesService());
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "attributes";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CommonPropertiesService());
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "common";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("set-styles"));
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "set-styles";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("styles"));
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "styles";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("alignment"));
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "alignment";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("grid"));
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "grid";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("flex"));
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "flex";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        this._designerTabControl.selectedIndex = 0;
+        this._propertyGridPropertyListsDict = {};
     }
     get serviceContainer() {
         return this._serviceContainer;
@@ -109,12 +60,28 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     }
     set selectedItems(items) {
         this._selectedItems = items;
-        if (this.selectedItems && this.selectedItems.length > 0) {
-            const propService = this._serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(this.selectedItems[0]));
-            this._propertyGridPropertyLists[0].setPropertiesService(propService);
-            this._propertyGridPropertyLists[0].createElements(this.selectedItems[0]);
-            this._propertyGridPropertyLists[1].createElements(this.selectedItems[0]);
-            this._propertyGridPropertyLists[3].createElements(this.selectedItems[0]);
+        const pgGroups = this._serviceContainer.propertyGroupService.getPropertygroups(items);
+        const visibleDict = new Set();
+        for (let p of pgGroups) {
+            let lst = this._propertyGridPropertyListsDict[p.name];
+            if (!lst) {
+                lst = new PropertyGridPropertyList(this.serviceContainer);
+                lst.title = p.name;
+                this._designerTabControl.appendChild(lst);
+                this._propertyGridPropertyLists.push(lst);
+                this._propertyGridPropertyListsDict[p.name] = lst;
+            }
+            lst.setPropertiesService(p.propertiesService);
+            lst.createElements(items[0]);
+            visibleDict.add(p.name);
+        }
+        if (this._designerTabControl.selectedIndex < 0)
+            this._designerTabControl.selectedIndex = 0;
+        for (let p of this._propertyGridPropertyLists) {
+            if (visibleDict.has(p.title))
+                p.style.display = 'block';
+            else
+                p.style.display = 'none';
         }
         for (const a of this._propertyGridPropertyLists) {
             a.designItemsChanged(items);
@@ -122,7 +89,6 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         if (items) {
             if (items.length == 1) {
                 for (const a of this._propertyGridPropertyLists) {
-                    a.designItemsChanged(items);
                     a.refreshForDesignItems(items);
                 }
                 this._observeItems();

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

@@ -1,6 +1,7 @@
 import { BaseCustomWebComponentLazyAppend, css, DomHelper } from '@node-projects/base-custom-webcomponent';
 import { ValueType } from '../../services/propertiesService/ValueType';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
+import { PropertyType } from '../../services/propertiesService/PropertyType';
 export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _div;
     _propertyMap = new Map();
@@ -85,47 +86,64 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         this.shadowRoot.appendChild(this._div);
     }
     setPropertiesService(propertiesService) {
-        this._propertiesService = propertiesService;
-        DomHelper.removeAllChildnodes(this._div);
-        this._propertyMap.clear();
+        if (this._propertiesService != propertiesService) {
+            this._propertiesService = propertiesService;
+            DomHelper.removeAllChildnodes(this._div);
+            this._propertyMap.clear();
+        }
     }
     createElements(designItem) {
-        DomHelper.removeAllChildnodes(this._div);
-        this._propertyMap.clear();
-        if (this._propertiesService) {
-            let properties = this._propertiesService.getProperties(designItem);
-            if (properties) {
-                for (const p of properties) {
-                    let editor;
-                    if (p.createEditor)
-                        editor = p.createEditor(p);
-                    else {
-                        editor = this._serviceContainer.forSomeServicesTillResult("editorTypesService", x => x.getEditorForProperty(p));
-                    }
-                    if (editor) {
-                        let rectContainer = document.createElement("div");
-                        rectContainer.style.width = '20px';
-                        rectContainer.style.height = '20px';
-                        rectContainer.style.display = 'flex';
-                        rectContainer.style.alignItems = 'center';
-                        let rect = document.createElement("div");
-                        rect.style.width = '7px';
-                        rect.style.height = '7px';
-                        rect.style.border = '1px white solid';
-                        rectContainer.appendChild(rect);
-                        this._div.appendChild(rectContainer);
-                        rect.oncontextmenu = (event) => {
-                            event.preventDefault();
-                            this.openContextMenu(event, p);
-                        };
-                        let label = document.createElement("label");
-                        label.htmlFor = p.name;
-                        label.textContent = p.name;
-                        label.title = p.name;
-                        this._div.appendChild(label);
-                        editor.element.id = p.name;
-                        this._div.appendChild(editor.element);
-                        this._propertyMap.set(p, { isSetElement: rect, editor: editor });
+        if (this._propertiesService.listNeedsRefresh(designItem) || this._propertyMap.size == 0) {
+            DomHelper.removeAllChildnodes(this._div);
+            this._propertyMap.clear();
+            if (this._propertiesService) {
+                let properties = this._propertiesService.getProperties(designItem);
+                if (properties) {
+                    for (const p of properties) {
+                        let editor;
+                        if (p.createEditor)
+                            editor = p.createEditor(p);
+                        else {
+                            editor = this._serviceContainer.forSomeServicesTillResult("editorTypesService", x => x.getEditorForProperty(p));
+                        }
+                        if (editor) {
+                            let rectContainer = document.createElement("div");
+                            rectContainer.style.width = '20px';
+                            rectContainer.style.height = '20px';
+                            rectContainer.style.display = 'flex';
+                            rectContainer.style.alignItems = 'center';
+                            let rect = document.createElement("div");
+                            rect.style.width = '7px';
+                            rect.style.height = '7px';
+                            rect.style.border = '1px white solid';
+                            if (p.propertyType != PropertyType.complex)
+                                rectContainer.appendChild(rect);
+                            this._div.appendChild(rectContainer);
+                            rect.oncontextmenu = (event) => {
+                                event.preventDefault();
+                                this.openContextMenu(event, p);
+                            };
+                            if (p.type == 'addNew') {
+                                let label = document.createElement("input");
+                                label.value = p.name;
+                                label.onkeyup = e => {
+                                    if (e.key == 'Enter') {
+                                        designItem.setAttribute(label.value, "");
+                                    }
+                                };
+                                this._div.appendChild(label);
+                            }
+                            else {
+                                let label = document.createElement("label");
+                                label.htmlFor = p.name;
+                                label.textContent = p.name;
+                                label.title = p.name;
+                                this._div.appendChild(label);
+                            }
+                            editor.element.id = p.name;
+                            this._div.appendChild(editor.element);
+                            this._propertyMap.set(p, { isSetElement: rect, editor: editor });
+                        }
                     }
                 }
             }
@@ -138,11 +156,13 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         if (this._serviceContainer.config.openBindingsEditor) {
             ctxMenu.push(...[
                 { title: '-' },
-                { title: 'edit binding', action: () => {
+                {
+                    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);
-                    } }
+                    }
+                }
             ]);
         }
         ;

package/dist/index.d.ts

@@ -68,6 +68,19 @@ export * from "./elements/services/propertiesService/DefaultEditorTypesService.j
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";
 export type { IProperty } from "./elements/services/propertiesService/IProperty.js";
+export type { IPropertyGroupsService } from "./elements/services/propertiesService/IPropertyGroupsService";
+export * from "./elements/services/propertiesService/propertyEditors/BasePropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/BooleanPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/ColorPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/DatePropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/MetricsPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/NumberPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/SelectPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/TextPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js";
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
@@ -75,11 +88,13 @@ export * from "./elements/services/propertiesService/services/CssPropertiesServi
 export * from "./elements/services/propertiesService/services/ListPropertiesService.js";
 export * from "./elements/services/propertiesService/services/LitElementPropertiesService.js";
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
+export * from "./elements/services/propertiesService/services/SVGElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
 export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
 export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
+export * from "./elements/services/propertiesService/PropertyGroupsService.js";
 export type { ISelectionChangedEvent } from "./elements/services/selectionService/ISelectionChangedEvent.js";
 export type { ISelectionService } from "./elements/services/selectionService/ISelectionService.js";
 export * from "./elements/services/selectionService/SelectionService.js";

package/dist/index.js

@@ -40,6 +40,18 @@ export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
+export * from "./elements/services/propertiesService/propertyEditors/BasePropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/BooleanPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/ColorPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/DatePropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/MetricsPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/NumberPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/SelectPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/TextPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js";
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
@@ -47,11 +59,13 @@ export * from "./elements/services/propertiesService/services/CssPropertiesServi
 export * from "./elements/services/propertiesService/services/ListPropertiesService.js";
 export * from "./elements/services/propertiesService/services/LitElementPropertiesService.js";
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
+export * from "./elements/services/propertiesService/services/SVGElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
 export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
 export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
+export * from "./elements/services/propertiesService/PropertyGroupsService.js";
 export * from "./elements/services/selectionService/SelectionService.js";
 export * from "./elements/services/undoService/ChangeGroup.js";
 export * from "./elements/services/undoService/UndoService.js";

package/package.json

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