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

package/dist/elements/item/DesignItem.js

@@ -473,6 +473,8 @@ export class DesignItem {
         }
     }
     getPlacementService(style) {
+        if (this.nodeType != NodeType.Element)
+            return null;
         style ??= getComputedStyle(this.element);
         return this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this, style));
     }

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

@@ -7,8 +7,6 @@ import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor.js';
 import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor.js';
 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)
@@ -50,14 +48,6 @@ export class DefaultEditorTypesService {
                 {
                     return new ThicknessPropertyEditor(property);
                 }
-            case "metrics":
-                {
-                    return new MetricsPropertyEditor(property);
-                }
-            case "assigned-row-column":
-                {
-                    return new GridAssignedRowColumnPropertyEditor(property);
-                }
             case "css-length":
             case "string":
             default:

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

@@ -7,7 +7,7 @@ export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
         this._root.style.display = 'grid';
         this._root.style.padding = '4px 0px';
         this._root.style.boxSizing = 'border-box';
-        this._root.style.height = '50px';
+        this._root.style.minHeight = '50px';
         this.element = this._root;
     }
     refreshValue(valueType, value) {
@@ -28,6 +28,7 @@ export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
             for (let p = 1; p <= cntRow; p++) {
                 for (let n = 1; n <= cntCol; n++) {
                     const b = document.createElement('button');
+                    b.style.minHeight = '10px';
                     b.onclick = () => {
                         let grp = this.designItems[0].openGroup('Change grid row/column');
                         this.designItems[0].setStyle("grid-row", p + ' / ' + (p + 1));

package/dist/elements/services/propertiesService/propertyEditors/special/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/special/GridAssignedRowColumnPropertyEditor.js

@@ -0,0 +1,46 @@
+import { BasePropertyEditor } from '../BasePropertyEditor.js';
+export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
+    //Todo: multiple cell selection, grid area support, span support
+    _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.minHeight = '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.style.minHeight = '10px';
+                    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/special/MetricsPropertyEditor.d.ts

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

package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js

@@ -0,0 +1,15 @@
+import { BasePropertyEditor } from '../BasePropertyEditor.js';
+import { MetricsEditor } from '../../../../controls/MetricsEditor.js';
+export class MetricsPropertyEditor extends BasePropertyEditor {
+    //Todo: metrics editor does not work at all yet
+    constructor(property) {
+        super(property);
+        const selector = new MetricsEditor();
+        selector.property = property.name;
+        //selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        //this.element.valueLeft = value;
+    }
+}

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

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

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

@@ -16,5 +16,6 @@ export declare class CssPropertiesService extends CommonPropertiesService {
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    _getPropertyDef(name: string): IProperty;
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
 }

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

@@ -3,6 +3,8 @@ import { PropertyType } from '../PropertyType.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { PropertiesHelper } from './PropertiesHelper.js';
+import { GridAssignedRowColumnPropertyEditor } from '../propertyEditors/special/GridAssignedRowColumnPropertyEditor.js';
+import { MetricsPropertyEditor } from '../propertyEditors/special/MetricsPropertyEditor.js';
 //TODO: remove this code when import asserts are supported
 let cssProperties;
 //@ts-ignore
@@ -36,7 +38,8 @@ export class CssPropertiesService extends CommonPropertiesService {
         "margin",
         "border",
         "padding",
-        "overflow"
+        "overflow",
+        "metrics"
     ];
     grid = [
         "display",
@@ -91,18 +94,26 @@ export class CssPropertiesService extends CommonPropertiesService {
     }
     getProperties(designItem) {
         const propNames = this[this.name];
-        const propertiesList = propNames.map(x => {
-            const camelName = PropertiesHelper.dashToCamelCase(x);
-            return {
-                name: x,
-                type: cssProperties[camelName]?.type ?? 'string',
-                values: cssProperties[camelName]?.values ? [...cssProperties[camelName]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
-                service: this,
-                propertyType: PropertyType.cssValue
-            };
-        });
+        const propertiesList = propNames.map(x => this._getPropertyDef(x));
         return propertiesList;
     }
+    _getPropertyDef(name) {
+        const camelName = PropertiesHelper.dashToCamelCase(name);
+        switch (camelName) {
+            case 'assignedRowColumn':
+                return { name, service: this, propertyType: PropertyType.complex, createEditor: (p) => new GridAssignedRowColumnPropertyEditor(p) };
+            case 'metrics':
+                return { name, service: this, propertyType: PropertyType.complex, createEditor: (p) => new MetricsPropertyEditor(p) };
+            default:
+                return {
+                    name,
+                    type: cssProperties[camelName]?.type ?? 'string',
+                    values: cssProperties[camelName]?.values ? [...cssProperties[camelName]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
+                    service: this,
+                    propertyType: PropertyType.cssValue
+                };
+        }
+    }
     getPropertyTarget(designItem, property) {
         return BindingTarget.css;
     }

package/dist/elements/widgets/debugView/debug-view.js

@@ -189,14 +189,16 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
             requestAnimationFrame(() => {
                 let element = designItem?.element;
                 if (element) {
-                    this.computedStyle = getComputedStyle(designItem.element);
-                    this.selectedElementOffsetParent = designItem.element.offsetParent;
+                    if (element.nodeType == 3)
+                        element = element.parentNode;
+                    this.computedStyle = getComputedStyle(element);
+                    this.selectedElementOffsetParent = element.offsetParent;
                     if (this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element) {
                         this.selectedElementOffsetParentText = null;
                         this.selectedElementOffsetParent = null;
                     }
                     else
-                        this.selectedElementOffsetParentText = generateSelector(designItem.element.offsetParent);
+                        this.selectedElementOffsetParentText = generateSelector(element.offsetParent);
                     if (element && element.nodeType === 1) {
                         const closest = getClosestStackingContext(element);
                         this.createsStackingContext = element === closest.node;

package/dist/elements/widgets/designerView/extensions/ExtensionManager.js

@@ -41,11 +41,11 @@ export class ExtensionManager {
         if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
             this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection);
             this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection);
-            if (selectionChangedEvent.selectedElements[0].getPlacementService().isEnterableContainer(selectionChangedEvent.selectedElements[0]))
+            if (selectionChangedEvent.selectedElements[0].getPlacementService()?.isEnterableContainer(selectionChangedEvent.selectedElements[0]))
                 this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
             const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
             this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
-            if (primaryContainer.getPlacementService().isEnterableContainer(primaryContainer))
+            if (primaryContainer.getPlacementService()?.isEnterableContainer(primaryContainer))
                 this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
         }
         //this.refreshExtensions(selectionChangedEvent.selectedElements);

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

@@ -91,12 +91,14 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
             if (this._designerTabControl.selectedIndex < 0)
                 this._designerTabControl.selectedIndex = 0;
             for (const a of this._propertyGridPropertyLists) {
-                a.designItemsChanged(items);
+                if (visibleDict.has(a.title))
+                    a.designItemsChanged(items);
             }
             if (items) {
                 if (items.length == 1) {
                     for (const a of this._propertyGridPropertyLists) {
-                        a.refreshForDesignItems(items);
+                        if (visibleDict.has(a.title))
+                            a.refreshForDesignItems(items);
                     }
                     this._observeItems();
                 }

package/dist/index.d.ts

@@ -90,11 +90,12 @@ export * from "./elements/services/propertiesService/propertyEditors/DatePropert
 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/propertyEditors/special/MetricsPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.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";

package/dist/index.js

@@ -55,11 +55,12 @@ export * from "./elements/services/propertiesService/propertyEditors/DatePropert
 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/propertyEditors/special/MetricsPropertyEditor.js";
+export * from "./elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.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";

package/package.json

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