@node-projects/web-component-designer 0.0.253 → 0.0.254

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

@@ -8,6 +8,7 @@ import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor.j
 import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor.js';
 import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
 import { MetricsPropertyEditor } from './propertyEditors/MetricsPropertyEditor.js';
+import { GridAssignedRowColumnPropertyEditor } from './propertyEditors/GridAssignedRowColumnPropertyEditor.js';
 export class DefaultEditorTypesService {
     getEditorForProperty(property) {
         if (property.createEditor)
@@ -53,6 +54,10 @@ export class DefaultEditorTypesService {
                 {
                     return new MetricsPropertyEditor(property);
                 }
+            case "assigned-row-column":
+                {
+                    return new GridAssignedRowColumnPropertyEditor(property);
+                }
             case "css-length":
             case "string":
             default:

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

@@ -10,6 +10,14 @@ export declare class PropertyTabsService implements IPropertyTabsService {
         name: string;
         propertiesService: IPropertiesService;
     }[];
+    protected _gridChild: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    protected _flexChild: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
     getPropertygroups(designItems: IDesignItem[]): {
         name: string;
         propertiesService: IPropertiesService;

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

@@ -19,13 +19,25 @@ export class PropertyTabsService {
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
         { name: 'svg', propertiesService: new CssPropertiesService("svg") },
     ];
+    _gridChild = [
+        { name: 'gridChild', propertiesService: new CssPropertiesService("gridChild") },
+    ];
+    _flexChild = [
+        { name: 'flexChild', propertiesService: new CssPropertiesService("flexChild") },
+    ];
     getPropertygroups(designItems) {
         if (designItems == null || designItems.length == 0)
             return [];
         this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
+        let lst = this._pgList;
         if (designItems[0].element instanceof SVGElement)
-            return this._svgPgList;
-        return this._pgList;
+            lst = this._svgPgList;
+        const parentStyle = getComputedStyle(designItems[0].element.parentElement);
+        if (parentStyle.display.includes('grid'))
+            lst = [...lst, this._gridChild[0]];
+        else if (parentStyle.display.includes('flex'))
+            lst = [...lst, this._flexChild[0]];
+        return lst;
     }
 }

package/dist/elements/services/propertiesService/propertyEditors/GridAssignedRowColumnPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    _root: HTMLDivElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/GridAssignedRowColumnPropertyEditor.js

@@ -0,0 +1,44 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
+    _root;
+    constructor(property) {
+        super(property);
+        this._root = document.createElement('div');
+        this._root.style.display = 'grid';
+        this._root.style.padding = '4px 0px';
+        this._root.style.boxSizing = 'border-box';
+        this._root.style.height = '50px';
+        this.element = this._root;
+    }
+    refreshValue(valueType, value) {
+        this._root.innerHTML = "";
+        if (this.designItems != null && this.designItems.length) {
+            let styleContainer = getComputedStyle(this.designItems[0].element.parentElement);
+            let style = getComputedStyle(this.designItems[0].element);
+            let cntCol = styleContainer.gridTemplateColumns.split(' ').length;
+            let cntRow = styleContainer.gridTemplateRows.split(' ').length;
+            this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
+            this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
+            let rowStart = parseInt(style.gridRowStart);
+            let rowEnd = style.gridRowEnd == 'auto' ? rowStart : parseInt(style.gridRowEnd);
+            rowEnd = rowEnd <= rowStart ? rowStart + 1 : rowEnd;
+            let colStart = parseInt(style.gridColumnStart);
+            let colEnd = style.gridColumnEnd == 'auto' ? colStart : parseInt(style.gridColumnEnd);
+            colEnd = colEnd <= colStart ? colStart + 1 : colEnd;
+            for (let p = 1; p <= cntRow; p++) {
+                for (let n = 1; n <= cntCol; n++) {
+                    const b = document.createElement('button');
+                    b.onclick = () => {
+                        let grp = this.designItems[0].openGroup('Change grid row/column');
+                        this.designItems[0].setStyle("grid-row", p + ' / ' + (p + 1));
+                        this.designItems[0].setStyle("grid-column", n + ' / ' + (n + 1));
+                        grp.commit();
+                    };
+                    if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd)
+                        b.style.backgroundColor = 'coral';
+                    this._root.appendChild(b);
+                }
+            }
+        }
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/GridRowColumnPropertyEditor.d.ts

@@ -0,0 +1,10 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare class GridRowColumnPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    _root: HTMLDivElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+    designItemsChanged(designItems: IDesignItem[]): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/GridRowColumnPropertyEditor.js

@@ -0,0 +1,25 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class GridRowColumnPropertyEditor extends BasePropertyEditor {
+    _root;
+    constructor(property) {
+        super(property);
+        this._root = document.createElement('div');
+        this.element = this._root;
+    }
+    refreshValue(valueType, value) {
+    }
+    designItemsChanged(designItems) {
+        super.designItemsChanged(designItems);
+        this._root.innerHTML == "";
+        if (this.designItems != null && this.designItems.length) {
+            let style = getComputedStyle(this.designItems[0].element);
+            let cntCol = style.gridTemplateColumns.split(' ').length;
+            let cntRow = style.gridTemplateRows.split(' ').length;
+            this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
+            this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
+            for (let n = 0; n < cntCol * cntRow; n++) {
+                this._root.appendChild(document.createElement('button'));
+            }
+        }
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor copy.d.ts

@@ -0,0 +1,9 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class JsonPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    static template: HTMLTemplateElement;
+    _input: HTMLInputElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor copy.js

@@ -0,0 +1,21 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { html } from '@node-projects/base-custom-webcomponent';
+export class JsonPropertyEditor extends BasePropertyEditor {
+    static template = html `
+    <div style="display: flex;">
+      <input id="input" type="text">
+      <button style="width: 30px;">...</button>
+    </div>
+  `;
+    _input;
+    constructor(property) {
+        super(property);
+        let el = JsonPropertyEditor.template.content.cloneNode(true);
+        this._input = el.getElementById('input');
+        this._input.onchange = (e) => this._valueChanged(this._input.value);
+        this.element = el;
+    }
+    refreshValue(valueType, value) {
+        this._input.value = value;
+    }
+}

package/dist/elements/services/propertiesService/services/CssProperties.json

@@ -612,5 +612,8 @@
     "x": {},
     "y": {},
     "zIndex": {},
-    "zoom": {}
+    "zoom": {},
+    "assignedRowColumn": {
+        "type": "assigned-row-column"
+    }
 }

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

@@ -8,9 +8,11 @@ export declare class CssPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     layout: string[];
     grid: string[];
+    gridChild: string[];
     flex: string[];
+    flexChild: string[];
     svg: string[];
-    constructor(name: 'layout' | 'grid' | 'flex' | 'svg');
+    constructor(name: 'layout' | 'grid' | 'gridChild' | 'flex' | 'flexChild' | 'svg');
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];

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

@@ -48,7 +48,14 @@ export class CssPropertiesService extends CommonPropertiesService {
         "align-content",
         "justify-content",
         "align-items",
-        "justify-items"
+        "justify-items",
+    ];
+    gridChild = [
+        "grid-row",
+        "grid-column",
+        "assigned-row-column",
+        "align-self",
+        "justify-self"
     ];
     flex = [
         "display",
@@ -59,6 +66,10 @@ export class CssPropertiesService extends CommonPropertiesService {
         "justify-content",
         "align-items"
     ];
+    flexChild = [
+        "align-self",
+        "justify-self"
+    ];
     svg = [
         "fill",
         "fill-rule",

package/dist/elements/services/selectionService/SelectionService.js

@@ -10,7 +10,7 @@ export class SelectionService {
         this._undoSelectionChanges = undoSelectionChanges;
     }
     setSelectedElements(designItems) {
-        if (this.selectedElements != designItems) {
+        if (this.selectedElements != designItems && !(this.selectedElements.length === 0 && (designItems == null || designItems.length === 0))) {
             if (this._undoSelectionChanges) {
                 const action = new SelectionChangedAction(this.selectedElements, designItems, this);
                 this._designerCanvas.instanceServiceContainer.undoService.execute(action);

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

@@ -64,44 +64,46 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         return this._selectedItems;
     }
     set selectedItems(items) {
-        this._selectedItems = items;
-        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;
+        if (this._selectedItems != items) {
+            this._selectedItems = items;
+            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);
             }
-            lst.setPropertiesService(p.propertiesService);
-            lst.createElements(items[0]);
-            visibleDict.add(p.name);
-        }
-        this._designerTabControl.refreshItems();
-        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);
-        }
-        if (items) {
-            if (items.length == 1) {
-                for (const a of this._propertyGridPropertyLists) {
-                    a.refreshForDesignItems(items);
+            for (let p of this._propertyGridPropertyLists) {
+                if (visibleDict.has(p.title))
+                    p.style.display = 'block';
+                else
+                    p.style.display = 'none';
+            }
+            this._designerTabControl.refreshItems();
+            if (this._designerTabControl.selectedIndex < 0)
+                this._designerTabControl.selectedIndex = 0;
+            for (const a of this._propertyGridPropertyLists) {
+                a.designItemsChanged(items);
+            }
+            if (items) {
+                if (items.length == 1) {
+                    for (const a of this._propertyGridPropertyLists) {
+                        a.refreshForDesignItems(items);
+                    }
+                    this._observeItems();
                 }
-                this._observeItems();
             }
-        }
-        else {
-            this._itemsObserver.disconnect();
+            else {
+                this._itemsObserver.disconnect();
+            }
         }
     }
     _observeItems() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.253",
+  "version": "0.0.254",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -24,8 +24,8 @@
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^20.4.8",
-    "ace-builds": "^1.23.4",
+    "@types/node": "^20.4.9",
+    "ace-builds": "^1.24.0",
     "codemirror": "^5.0.0",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",