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

package/dist/elements/item/DesignItem.d.ts

@@ -8,6 +8,7 @@ import { IDesignerExtension } from '../widgets/designerView/extensions/IDesigner
 import { ISize } from '../../interfaces/ISize.js';
 import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
 import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
+import { IPlacementService } from '../services/placementService/IPlacementService.js';
 export declare class DesignItem implements IDesignItem {
     lastContainerSize: ISize;
     parsedNode: any;
@@ -85,4 +86,5 @@ export declare class DesignItem implements IDesignItem {
     _insertChildInternal(designItem: IDesignItem, index?: number): void;
     _removeChildInternal(designItem: IDesignItem): void;
     _refreshIfStyleSheet(): void;
+    getPlacementService(style?: CSSStyleDeclaration): IPlacementService;
 }

package/dist/elements/item/DesignItem.js

@@ -422,8 +422,10 @@ export class DesignItem {
     }
     // Internal implementations wich don't use undo/redo
     _insertChildInternal(designItem, index) {
-        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem) {
             designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
+        }
         if (designItem.parent) {
             designItem.parent._removeChildInternal(designItem);
         }
@@ -438,13 +440,18 @@ export class DesignItem {
         }
         designItem._parent = this;
         //todo: is this still needed???
-        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
+        if (this.instanceServiceContainer.selectionService.primarySelection == designItem) {
             designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+            if (designItem.getPlacementService().isEnterableContainer(this))
+                designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
+        }
         this._refreshIfStyleSheet();
     }
     _removeChildInternal(designItem) {
-        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem) {
             designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionAndCanBeEntered);
+        }
         designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtensions([designItem], true);
         const index = this._childArray.indexOf(designItem);
         if (index > -1) {
@@ -465,4 +472,8 @@ export class DesignItem {
         else if (this.name == 'link') {
         }
     }
+    getPlacementService(style) {
+        style ??= getComputedStyle(this.element);
+        return this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this, style));
+    }
 }

package/dist/elements/item/IDesignItem.d.ts

@@ -7,6 +7,7 @@ import { IDesignerExtension } from '../widgets/designerView/extensions/IDesigner
 import { ISize } from "../../interfaces/ISize.js";
 import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
 import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
+import { IPlacementService } from '../services/placementService/IPlacementService.js';
 export interface IDesignItem {
     lastContainerSize: ISize;
     replaceNode(newNode: Node): any;
@@ -67,4 +68,5 @@ export interface IDesignItem {
     hideAtDesignTime: boolean;
     hideAtRunTime: boolean;
     lockAtDesignTime: boolean;
+    getPlacementService(style?: CSSStyleDeclaration): IPlacementService;
 }

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -85,6 +85,10 @@ import { MultipleSelectionRectExtensionProvider } from '../widgets/designerView/
 import { DragDropService } from './dragDropService/DragDropService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
+    let defaultPlacementService = new DefaultPlacementService();
+    serviceContainer.register("containerService", defaultPlacementService);
+    serviceContainer.register("containerService", new GridPlacementService(defaultPlacementService));
+    serviceContainer.register("containerService", new FlexBoxPlacementService(defaultPlacementService));
     serviceContainer.register("propertyService", new PolymerPropertiesService());
     serviceContainer.register("propertyService", new LitElementPropertiesService());
     serviceContainer.register("propertyService", new NativeElementsPropertiesService());
@@ -95,9 +99,6 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("instanceService", new DefaultInstanceService());
     serviceContainer.register("editorTypesService", new DefaultEditorTypesService());
     serviceContainer.register("htmlWriterService", new HtmlWriterService());
-    serviceContainer.register("containerService", new DefaultPlacementService());
-    serviceContainer.register("containerService", new GridPlacementService());
-    serviceContainer.register("containerService", new FlexBoxPlacementService());
     serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService());
     serviceContainer.register("htmlParserService", new DefaultHtmlParserService());
     serviceContainer.register("elementAtPointService", new ElementAtPointService());
@@ -118,9 +119,6 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ElementDragTitleExtensionProvider(),
-        new DisplayGridExtensionProvider(),
-        new EditGridColumnRowSizesExtensionProvider(),
-        new FlexboxExtensionProvider(),
         new TransformOriginExtensionProvider(),
         new CanvasExtensionProvider(),
         new PositionExtensionProvider(),
@@ -132,10 +130,15 @@ export function createDefaultServiceContainer() {
         new RotateExtensionProvider(),
         new MultipleSelectionRectExtensionProvider(),
     ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionAndCanBeEntered, [
+        new DisplayGridExtensionProvider(),
+        new EditGridColumnRowSizesExtensionProvider(),
+        new FlexboxExtensionProvider(),
+    ]);
     serviceContainer.designerExtensions.set(ExtensionType.Selection, [
         new SelectionDefaultExtensionProvider()
     ]);
-    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainer, [
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainerAndCanBeEntered, [
         new DisplayGridExtensionProvider(),
         new EditGridColumnRowSizesExtensionProvider(),
         new FlexboxExtensionProvider()
@@ -149,11 +152,11 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.ContainerDrag, [
         new GrayOutExtensionProvider()
     ]);
-    serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOver, [
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOverAndCanBeEntered, [
         new ApplyFirstMachingExtensionProvider(new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider()),
         new AltToEnterContainerExtensionProvider()
     ]);
-    serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOver, [
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOverAndCanBeEntered, [
         new ApplyFirstMachingExtensionProvider(new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider()),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [

package/dist/elements/services/dragDropService/DragDropService.js

@@ -10,28 +10,28 @@ export class DragDropService {
     }
     dragLeave(designerCanvas, event) {
         if (this._dragOverExtensionItem) {
-            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOverAndCanBeEntered);
             this._dragOverExtensionItem = null;
         }
     }
     dragOver(designerCanvas, event) {
         let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event);
         if (this._dragOverExtensionItem != newContainer) {
-            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
-            designerCanvas.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOverAndCanBeEntered);
+            designerCanvas.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOverAndCanBeEntered, event);
             this._dragOverExtensionItem = newContainer;
         }
         else {
             if (event.x != this._oldX && event.y != this._oldY) {
                 this._oldX = event.x;
                 this._oldY = event.y;
-                designerCanvas.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+                designerCanvas.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOverAndCanBeEntered, event);
             }
         }
     }
     async drop(designerCanvas, event) {
         if (this._dragOverExtensionItem) {
-            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOverAndCanBeEntered);
             this._dragOverExtensionItem = null;
         }
         let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event);
@@ -76,7 +76,7 @@ export class DragDropService {
                 newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
                 if (newContainerService) {
                     //TODO: Maybe the check for SVG Elemnt should be in "canEnterByDrop"?
-                    if (newContainerService.canEnterByDrop(newContainerElementDesignItem) && !(newContainerElementDesignItem.element instanceof SVGElement)) {
+                    if (newContainerService.isEnterableContainer(newContainerElementDesignItem) && !(newContainerElementDesignItem.element instanceof SVGElement)) {
                         break;
                     }
                     else {

package/dist/elements/services/placementService/DefaultPlacementService.d.ts

@@ -4,8 +4,8 @@ import type { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class DefaultPlacementService implements IPlacementService {
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    isEnterableContainer(container: IDesignItem): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
-    canEnterByDrop(container: IDesignItem): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     private calculateTrack;

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -10,19 +10,17 @@ export class DefaultPlacementService {
             return false;
         return true;
     }
-    canEnter(container, items) {
+    isEnterableContainer(container) {
         if (DomConverter.IsSelfClosingElement(container.element.localName))
             return false;
         if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
             return false;
-        if (!items.every(x => !x.element.contains(container.element)))
-            return false;
         return true;
     }
-    canEnterByDrop(container) {
-        if (DomConverter.IsSelfClosingElement(container.element.localName))
+    canEnter(container, items) {
+        if (!this.isEnterableContainer(container))
             return false;
-        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+        if (!items.every(x => !x.element.contains(container.element)))
             return false;
         return true;
     }

package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts

@@ -3,11 +3,13 @@ import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 import { IPlacementService } from './IPlacementService.js';
 export declare class FlexBoxPlacementService implements IPlacementService {
+    private _basePlacementService;
+    constructor(basePlacementService: IPlacementService);
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
-    canEnterByDrop(container: IDesignItem): boolean;
+    isEnterableContainer(container: IDesignItem): any;
+    canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;

package/dist/elements/services/placementService/FlexBoxPlacementService.js

@@ -1,5 +1,9 @@
 import { DefaultPlacementService } from './DefaultPlacementService.js';
 export class FlexBoxPlacementService {
+    _basePlacementService;
+    constructor(basePlacementService) {
+        this._basePlacementService = basePlacementService ?? new DefaultPlacementService();
+    }
     enterContainer(container, items) {
         for (let i of items) {
             i.removeStyle("position");
@@ -22,11 +26,11 @@ export class FlexBoxPlacementService {
             return true;
         return false;
     }
-    canEnter(container, items) {
-        return true;
+    isEnterableContainer(container) {
+        return this._basePlacementService.isEnterableContainer(container);
     }
-    canEnterByDrop(container) {
-        return true;
+    canEnter(container, items) {
+        return this._basePlacementService.canEnter(container, items);
     }
     canLeave(container, items) {
         return true;

package/dist/elements/services/placementService/GridPlacementService.d.ts

@@ -3,11 +3,13 @@ import type { IPlacementService } from './IPlacementService.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class GridPlacementService implements IPlacementService {
+    private _basePlacementService;
+    constructor(basePlacementService: IPlacementService);
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
-    canEnterByDrop(container: IDesignItem): boolean;
+    isEnterableContainer(container: IDesignItem): any;
+    canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;

package/dist/elements/services/placementService/GridPlacementService.js

@@ -2,6 +2,10 @@ import { CalculateGridInformation } from '../../helper/GridHelper.js';
 import { pointInRect } from '../../helper/Helper.js';
 import { DefaultPlacementService } from './DefaultPlacementService.js';
 export class GridPlacementService {
+    _basePlacementService;
+    constructor(basePlacementService) {
+        this._basePlacementService = basePlacementService ?? new DefaultPlacementService();
+    }
     enterContainer(container, items) {
         for (let i of items) {
             i.removeStyle("position");
@@ -26,11 +30,11 @@ export class GridPlacementService {
             return true;
         return false;
     }
-    canEnter(container, items) {
-        return true;
+    isEnterableContainer(container) {
+        return this._basePlacementService.isEnterableContainer(container);
     }
-    canEnterByDrop(container) {
-        return true;
+    canEnter(container, items) {
+        return this._basePlacementService.canEnter(container, items);
     }
     canLeave(container, items) {
         return true;

package/dist/elements/services/placementService/IPlacementService.d.ts

@@ -4,7 +4,7 @@ import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 import { IPoint } from '../../../interfaces/IPoint.js';
 export interface IPlacementService extends IService {
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    canEnterByDrop(container: IDesignItem): boolean;
+    isEnterableContainer(container: IDesignItem): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     enterContainer(container: IDesignItem, items: IDesignItem[]): any;

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/designerView/extensions/EditText/EditTextExtension.js

@@ -27,6 +27,7 @@ export class EditTextExtension extends AbstractExtension {
         //maybe use a html edit framework
         this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
         //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelectionAndCanBeEntered);
         //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
         this.extendedItem.element.setAttribute('contenteditable', '');
         this.extendedItem.element.addEventListener('input', this._contentEditedBound);

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

@@ -32,15 +32,21 @@ export class ExtensionManager {
             if (selectionChangedEvent.oldSelectedElements[0].parent) {
                 const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
                 this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
+                this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
                 this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelection);
+                this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
                 this.removeExtensions(selectionChangedEvent.oldSelectedElements, false, ExtensionType.Selection);
             }
         }
         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]))
+                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))
+                this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
         }
         //this.refreshExtensions(selectionChangedEvent.selectedElements);
     }
@@ -273,10 +279,12 @@ export class ExtensionManager {
             this.refreshExtensions(designItems, ExtensionType.MouseOver, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.ContainerDragOver, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDragOverAndCanBeEntered, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.ContainerDrag, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.Doubleclick, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.Placement, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionAndCanBeEntered, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainerAndCanBeEntered, null, ignoredExtension);
         }
     }
     refreshAllAppliedExtentions() {

package/dist/elements/widgets/designerView/extensions/ExtensionType.d.ts

@@ -9,15 +9,22 @@ export declare enum ExtensionType {
     /**
      * Extension for the Container wich the dragged element is draged over.
      */
-    ContainerDragOver = 8,
+    ContainerDragOverAndCanBeEntered = 8,
     /**
     * Extension for the Container on wich a new element is draged over.
     */
-    ContainerExternalDragOver = 9,
+    ContainerExternalDragOverAndCanBeEntered = 9,
     /**
      * Extension for the Current Container wich the dragged element is contained.
      */
     ContainerDrag = 10,
     Doubleclick = 11,
-    Placement = 12
+    Placement = 12,
+    /**
+     * Extensions only when the container can be Entered.
+     * So for Example on a custome webcomponent wich uses a grid layout for it's root, but can not show children,
+     * do not display grid extension.
+     */
+    PrimarySelectionAndCanBeEntered = 13,
+    PrimarySelectionContainerAndCanBeEntered = 14
 }

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

@@ -10,15 +10,22 @@ export var ExtensionType;
     /**
      * Extension for the Container wich the dragged element is draged over.
      */
-    ExtensionType[ExtensionType["ContainerDragOver"] = 8] = "ContainerDragOver";
+    ExtensionType[ExtensionType["ContainerDragOverAndCanBeEntered"] = 8] = "ContainerDragOverAndCanBeEntered";
     /**
     * Extension for the Container on wich a new element is draged over.
     */
-    ExtensionType[ExtensionType["ContainerExternalDragOver"] = 9] = "ContainerExternalDragOver";
+    ExtensionType[ExtensionType["ContainerExternalDragOverAndCanBeEntered"] = 9] = "ContainerExternalDragOverAndCanBeEntered";
     /**
      * Extension for the Current Container wich the dragged element is contained.
      */
     ExtensionType[ExtensionType["ContainerDrag"] = 10] = "ContainerDrag";
     ExtensionType[ExtensionType["Doubleclick"] = 11] = "Doubleclick";
     ExtensionType[ExtensionType["Placement"] = 12] = "Placement";
+    /**
+     * Extensions only when the container can be Entered.
+     * So for Example on a custome webcomponent wich uses a grid layout for it's root, but can not show children,
+     * do not display grid extension.
+     */
+    ExtensionType[ExtensionType["PrimarySelectionAndCanBeEntered"] = 13] = "PrimarySelectionAndCanBeEntered";
+    ExtensionType[ExtensionType["PrimarySelectionContainerAndCanBeEntered"] = 14] = "PrimarySelectionContainerAndCanBeEntered";
 })(ExtensionType || (ExtensionType = {}));

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -249,17 +249,17 @@ export class PointerTool {
                                 //if we found a new enterable container create extensions 
                                 if (newContainerElementDesignItem != null) {
                                     if (this._dragOverExtensionItem != newContainerElementDesignItem) {
-                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
-                                        designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver, event);
+                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
+                                        designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOverAndCanBeEntered, event);
                                         this._dragOverExtensionItem = newContainerElementDesignItem;
                                     }
                                     else {
-                                        designerCanvas.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver, event);
+                                        designerCanvas.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOverAndCanBeEntered, event);
                                     }
                                 }
                                 else {
                                     if (this._dragOverExtensionItem) {
-                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
+                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
                                         this._dragOverExtensionItem = null;
                                     }
                                 }
@@ -325,7 +325,7 @@ export class PointerTool {
                         }
                         designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
                         this._dragExtensionItem = null;
-                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
+                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
                         this._dragOverExtensionItem = null;
                         this._moveItemsOffset = { x: 0, y: 0 };
                     }

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.252",
+  "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",