@node-projects/web-component-designer 0.1.109 → 0.1.111

package/dist/elements/item/DesignItem.js

@@ -536,10 +536,9 @@ export class DesignItem {
         return value ?? fallback;
     }
     getComputedStyle() {
-        /*if (this.isRootItem) {
-          return window.getComputedStyle((<ShadowRoot>this.node).host);
-        }*/
-        return window.getComputedStyle(this.element);
+        if (this.nodeType == NodeType.Element)
+            return window.getComputedStyle(this.element);
+        return null;
     }
     _stylesCache = null;
     _cacheClearTimer;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -89,6 +89,7 @@ import { GridToolbarExtensionProvider } from '../widgets/designerView/extensions
 import { FlexToolbarExtensionProvider } from '../widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js';
 import { BlockToolbarExtensionProvider } from '../widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js';
 import { ChildContextMenu } from '../widgets/designerView/extensions/contextMenu/ChildContextMenu.js';
+import { GridChildToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -133,6 +134,7 @@ export function createDefaultServiceContainer() {
         new ConditionExtensionProvider(new MultipleSelectionRectExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionRefreshed, [
+        new GridChildToolbarExtensionProvider(),
         new GridToolbarExtensionProvider(),
         new FlexToolbarExtensionProvider(),
         new BlockToolbarExtensionProvider(),

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

@@ -42,7 +42,7 @@ export class DragDropService {
         const elementDefinition = JSON.parse(transferData);
         const di = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
         const grp = di.openGroup("Insert of <" + di.name + ">");
-        const containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, newContainer.getComputedStyle()));
+        const containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, newContainer.getComputedStyle(), di));
         containerService.enterContainer(newContainer, [di], 'drop');
         const containerPos = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
         const evCoord = designerCanvas.getNormalizedEventCoordinates(event);

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

@@ -3,7 +3,7 @@ import type { IPlacementService } from './IPlacementService.js';
 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;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;

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

@@ -4,7 +4,9 @@ import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem } from
 import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
 import { straightenLine } from '../../helper/PathDataPolyfill.js';
 export class DefaultPlacementService {
-    serviceForContainer(container, containerStyle) {
+    serviceForContainer(container, containerStyle, item) {
+        if (item != null && item.getComputedStyle()?.position == 'absolute')
+            return true;
         if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
             containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
             return false;

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

@@ -7,7 +7,7 @@ export declare class FlexBoxPlacementService implements IPlacementService {
     constructor(basePlacementService: IPlacementService);
     enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): any;
     canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;

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

@@ -22,9 +22,12 @@ export class FlexBoxPlacementService {
             }
         }
     }
-    serviceForContainer(container, containerStyle) {
-        if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex')
+    serviceForContainer(container, containerStyle, item) {
+        if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex') {
+            if (item != null && item.getComputedStyle()?.position == 'absolute')
+                return false;
             return true;
+        }
         return false;
     }
     isEnterableContainer(container) {

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

@@ -7,7 +7,7 @@ export declare class GridPlacementService implements IPlacementService {
     constructor(basePlacementService: IPlacementService);
     enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): any;
     canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;

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

@@ -26,9 +26,12 @@ export class GridPlacementService {
             }
         }
     }
-    serviceForContainer(container, containerStyle) {
-        if (containerStyle.display == 'grid' || containerStyle.display == 'inline-grid')
+    serviceForContainer(container, containerStyle, item) {
+        if (containerStyle.display == 'grid' || containerStyle.display == 'inline-grid') {
+            if (item != null && item.getComputedStyle()?.position == 'absolute')
+                return false;
             return true;
+        }
         return false;
     }
     isEnterableContainer(container) {

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

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

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

@@ -53,8 +53,8 @@ export class PropertyGroupsService {
         let lst = this._pgList;
         if (designItems[0].element instanceof SVGElement)
             lst = this._svgPgList;
-        if (designItems[0].element.parentElement) {
-            const parentStyle = getComputedStyle(designItems[0].element.parentElement);
+        if (designItems[0].parent) {
+            const parentStyle = designItems[0].parent.getComputedStyle();
             if (parentStyle.display.includes('grid'))
                 lst = [...lst, this._gridChild[0]];
             else if (parentStyle.display.includes('flex'))

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -626,6 +626,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 this._resizeBackgroundGrid();
             });
         }
+        if (this.isConnected)
+            this.extensionManager.connected();
     }
     connectedCallback() {
         if (!this._firstConnect) {
@@ -638,8 +640,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.clickOverlay.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
             this.clickOverlay.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
             this.clickOverlay.addEventListener(EventNames.Drop, event => this._onDrop(event));
-            this.clickOverlay.addEventListener(EventNames.KeyDown, this.onKeyDown, true);
-            this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp, true);
+            this.clickOverlay.addEventListener(EventNames.KeyDown, this.onKeyDown);
+            this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp);
             this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClick, true);
             this.clickOverlay.addEventListener('zoom', (e) => {
                 this.zoomFactor = this.zoomFactor + (e.detail.diff / 10);
@@ -652,7 +654,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 this.canvasOffset = newCanvasOffset;
             });
         }
-        this.extensionManager.connected();
+        if (this.extensionManager)
+            this.extensionManager.connected();
     }
     disconnectedCallback() {
         this.extensionManager.disconnected();
@@ -882,6 +885,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     onKeyUp(event) {
+        if (this._ignoreEvent === event)
+            return;
         if (this._moveGroup) {
             this._moveGroup.commit();
             this._moveGroup = null;
@@ -889,6 +894,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         event.preventDefault();
     }
     onKeyDown(event) {
+        if (this._ignoreEvent === event)
+            return;
         if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey)
             this.executeCommand({ type: CommandType.undo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'z' && event.shiftKey)

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

@@ -11,8 +11,18 @@ export class AbstractExtension extends AbstractExtensionBase {
     }
     createToolbar(template, width, height, overlayLayer = OverlayLayer.Foreground) {
         const element = template.content.cloneNode(true);
-        element.querySelectorAll('*').forEach(x => x.onpointerdown = (e) => {
-            this.designerCanvas.ignoreEvent(e);
+        element.querySelectorAll('*').forEach(x => {
+            x.onpointerdown = (e) => {
+                this.designerCanvas.ignoreEvent(e);
+            };
+            if (x instanceof HTMLInputElement) {
+                x.addEventListener('keydown', (e) => {
+                    this.designerCanvas.ignoreEvent(e);
+                }, { capture: true });
+                x.addEventListener('keyup', (e) => {
+                    this.designerCanvas.ignoreEvent(e);
+                }, { capture: true });
+            }
         });
         const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
         foreignObject.classList.add('svg-toolbar-container');

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

@@ -2,7 +2,7 @@ import { AbstractExtension, toolbarObject } from "./AbstractExtension.js";
 import { IExtensionManager } from "./IExtensionManger.js";
 import { IDesignerCanvas } from "../IDesignerCanvas.js";
 import { IDesignItem } from "../../../item/IDesignItem.js";
-export declare class BasicDisplayToolbarExtension extends AbstractExtension {
+export declare class BasicStackedToolbarExtension extends AbstractExtension {
     protected static basicTemplate: string;
     protected _toolbar: toolbarObject;
     protected _size: {

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

@@ -1,6 +1,6 @@
 import { assetsPath } from "../../../../Constants.js";
 import { AbstractExtension } from "./AbstractExtension.js";
-export class BasicDisplayToolbarExtension extends AbstractExtension {
+export class BasicStackedToolbarExtension extends AbstractExtension {
     static basicTemplate = `
       <node-projects-image-button-list-selector id="inline" no-value-in-header property="inline">
         <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
@@ -57,8 +57,8 @@ export class BasicDisplayToolbarExtension extends AbstractExtension {
     _addStyleButton(styleAndControlName) {
         const cs = getComputedStyle(this.extendedItem.element);
         const ctl = this._toolbar.getById(styleAndControlName);
-        ctl.addEventListener('value-changed', () => {
-            this.extendedItem.updateStyleInSheetOrLocal(styleAndControlName, ctl.value);
+        ctl.addEventListener('value-changed', async () => {
+            await this.extendedItem.updateStyleInSheetOrLocalAsync(styleAndControlName, ctl.value);
         });
         ctl.value = cs[styleAndControlName];
     }

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

@@ -0,0 +1,21 @@
+import { AbstractExtension, toolbarObject } from "./AbstractExtension.js";
+import { IExtensionManager } from "./IExtensionManger.js";
+import { IDesignerCanvas } from "../IDesignerCanvas.js";
+import { IDesignItem } from "../../../item/IDesignItem.js";
+export declare class BasicStackedToolbarExtension extends AbstractExtension {
+    protected static basicTemplate: string;
+    protected static toolBars: toolbarObject[];
+    protected _toolbar: toolbarObject;
+    protected _size: {
+        width: number;
+        height: number;
+    };
+    protected _display: string;
+    protected _inline: string;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    updateDisplayValue(): Promise<void>;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    protected _addStyleButton(styleAndControlName: string): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,81 @@
+import { assetsPath } from "../../../../Constants.js";
+import { AbstractExtension } from "./AbstractExtension.js";
+export class BasicStackedToolbarExtension extends AbstractExtension {
+    static basicTemplate = `
+      <node-projects-image-button-list-selector id="inline" no-value-in-header property="inline">
+        <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
+        <img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
+      </node-projects-image-button-list-selector>
+      <select title="display" id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
+        <option>block</option>
+        <option>flex</option>
+        <option>grid</option>
+      </select>
+  `;
+    static toolBars = [];
+    _toolbar;
+    _size = { width: 200, height: 30 };
+    _display;
+    _inline;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        const cs = getComputedStyle(this.extendedItem.element);
+        this._display = cs.display.replace('inline-', '').replace('inline', 'block');
+        this._inline = cs.display.startsWith('inline') ? 'inline' : 'block';
+        //@ts-ignore
+        this._toolbar = this.createToolbar(this.constructor.template, this._size.width, this._size.height);
+        BasicStackedToolbarExtension.toolBars.push(this._toolbar);
+        const displayTypeEl = this._toolbar.getById('displayType');
+        if (displayTypeEl) {
+            displayTypeEl.value = this._display;
+            displayTypeEl.onchange = async () => {
+                this._display = displayTypeEl.value;
+                await this.updateDisplayValue();
+                this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
+            };
+        }
+        const inlineEl = this._toolbar.getById('inline');
+        if (inlineEl) {
+            inlineEl.value = this._inline;
+            inlineEl.addEventListener('value-changed', async () => {
+                this._inline = inlineEl.value;
+                if (this._inline && cs.position === 'absolute')
+                    this.extendedItem.setStyle('position', 'static');
+                await this.updateDisplayValue();
+                this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
+            });
+        }
+    }
+    async updateDisplayValue() {
+        let v = (this._inline == 'inline' ? 'inline ' : '') + this._display;
+        if (v === 'inline block')
+            v = 'inline';
+        await this.extendedItem.updateStyleInSheetOrLocalAsync('display', v);
+    }
+    refresh(cache, event) {
+        if (event) {
+            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
+            let tbOffset = 0;
+            for (let i = 0; i < BasicStackedToolbarExtension.toolBars.length - 1; i++) {
+                if (BasicStackedToolbarExtension.toolBars[i] === this._toolbar)
+                    break;
+                tbOffset += this._toolbar.children[0].getBoundingClientRect().height + 4;
+            }
+            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - tbOffset - ((this._size.height + 14) / this.designerCanvas.zoomFactor)) });
+        }
+    }
+    _addStyleButton(styleAndControlName) {
+        const cs = getComputedStyle(this.extendedItem.element);
+        const ctl = this._toolbar.getById(styleAndControlName);
+        ctl.addEventListener('value-changed', async () => {
+            await this.extendedItem.updateStyleInSheetOrLocalAsync(styleAndControlName, ctl.value);
+        });
+        ctl.value = cs[styleAndControlName];
+    }
+    dispose() {
+        BasicStackedToolbarExtension.toolBars.splice(BasicStackedToolbarExtension.toolBars.indexOf(this._toolbar), 1);
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtension.d.ts

@@ -1,8 +1,8 @@
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
 import { IExtensionManager } from "../IExtensionManger.js";
-export declare class BlockToolbarExtension extends BasicDisplayToolbarExtension {
+export declare class BlockToolbarExtension extends BasicStackedToolbarExtension {
     protected static template: HTMLTemplateElement;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event: MouseEvent): void;

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtension.js

@@ -1,9 +1,9 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
-export class BlockToolbarExtension extends BasicDisplayToolbarExtension {
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export class BlockToolbarExtension extends BasicStackedToolbarExtension {
     static template = html `
       <div style="height: 100%; width: 100%;">
-        ${BasicDisplayToolbarExtension.basicTemplate}
+        ${BasicStackedToolbarExtension.basicTemplate}
       </div>
     `;
     constructor(extensionManager, designerView, extendedItem) {

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.d.ts

@@ -6,5 +6,4 @@ import { IExtensionManager } from '../IExtensionManger.js';
 export declare class BlockToolbarExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
 }

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js

@@ -1,6 +1,5 @@
 import { BlockToolbarExtension } from './BlockToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
-import { css } from '@node-projects/base-custom-webcomponent';
 export class BlockToolbarExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         if (designItem.nodeType === NodeType.Element) {
@@ -12,20 +11,4 @@ export class BlockToolbarExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new BlockToolbarExtension(extensionManager, designerView, designItem);
     }
-    style = css `
-  node-projects-image-button-list-selector img {
-    height: 16px;
-    border: 1px solid black;
-    border-radius: 4px;
-    box-sizing: border-box;
-    pointer-events: auto;
-    cursor: pointer;
-  }
-  node-projects-image-button-list-selector img:hover {
-    background: lightgray;
-  }
-  node-projects-image-button-list-selector img:active {
-    translate: 1px 1px
-  }
-  `;
 }

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtension.d.ts

@@ -1,8 +1,8 @@
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { IExtensionManager } from '../IExtensionManger.js';
-import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
-export declare class FlexToolbarExtension extends BasicDisplayToolbarExtension {
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export declare class FlexToolbarExtension extends BasicStackedToolbarExtension {
     protected static template: HTMLTemplateElement;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event: MouseEvent): void;

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js

@@ -1,10 +1,10 @@
 import { html } from "@node-projects/base-custom-webcomponent";
 import { assetsPath } from "../../../../../Constants.js";
-import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
-export class FlexToolbarExtension extends BasicDisplayToolbarExtension {
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export class FlexToolbarExtension extends BasicStackedToolbarExtension {
     static template = html `
     <div style="height: 100%; width: 100%;">
-      ${BasicDisplayToolbarExtension.basicTemplate}
+      ${BasicStackedToolbarExtension.basicTemplate}
       <node-projects-image-button-list-selector property="direction" no-value-in-header id="flex-direction">
         <img data-value="row" src="${assetsPath}images/chromeDevtools/flex-direction-row-icon.svg">
         <img data-value="column" src="${assetsPath}images/chromeDevtools/flex-direction-column-icon.svg">
@@ -57,8 +57,8 @@ export class FlexToolbarExtension extends BasicDisplayToolbarExtension {
     _addFlexDirectionButton() {
         const cs = getComputedStyle(this.extendedItem.element);
         const ctl = this._toolbar.getById('flex-direction');
-        ctl.addEventListener('value-changed', () => {
-            this.extendedItem.updateStyleInSheetOrLocal('flex-direction', ctl.value);
+        ctl.addEventListener('value-changed', async () => {
+            await this.extendedItem.updateStyleInSheetOrLocalAsync('flex-direction', ctl.value);
             this.rotateImagesAcordingFlexDirection(ctl.value);
         });
         ctl.value = cs['flex-direction'];

package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtension.d.ts

@@ -1,12 +1,9 @@
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
 import { IExtensionManager } from '../IExtensionManger.js';
-export declare class GridChildToolbarExtension extends AbstractExtension {
-    private static template;
-    private _toolbar;
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export declare class GridChildToolbarExtension extends BasicStackedToolbarExtension {
+    protected static template: HTMLTemplateElement;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    dispose(): void;
 }

package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtension.js

@@ -1,66 +1,55 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-export class GridChildToolbarExtension extends AbstractExtension {
+import { assetsPath } from "../../../../../Constants.js";
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export class GridChildToolbarExtension extends BasicStackedToolbarExtension {
     static template = html `
     <div style="height: 100%; width: 100%;">
-      <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
-        <option>block</option>
-        <option>flex</option>
-        <option selected>grid</option>
-      </select>
-      <select id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
-        <option>1x1</option>
-        <option>1x16</option>
-        <option>2x8</option>
-        <option>4x4</option>
-        <option>8x2</option>
-        <option>16x1</option>
-        <option>custom</option>
-      </select>
-    </div>
-  `;
-    _toolbar;
+      <div style="display: flex; flex-direction: column;">
+        <span style="font-size: 10px; color: #00aff0;">column:</span>
+        <input type="text" title="column" id="gridColumn" style="pointer-events: all; height: 12px; width: 45px; padding: 0; margin-right: 5px">
+      </div>
+       <div style="display: flex; flex-direction: column;">
+        <span style="font-size: 10px; color: #00aff0;">row:</span>
+        <input type="text" title="column" id="gridRow" style="pointer-events: all; height: 12px; width: 45px; padding: 0; margin-right: 10px">
+      </div>
+      <node-projects-image-button-list-selector property="align-self" no-value-in-header id="align-self">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/align-items-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/align-items-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/align-items-end-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/align-items-stretch-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="justify-self" no-value-in-header id="justify-self">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/justify-items-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/justify-items-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/justify-items-end-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/justify-items-stretch-icon.svg">
+      </node-projects-image-button-list-selector>
+    </div>`;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
+        this._size.width = 250;
     }
     extend(cache, event) {
-        const style = getComputedStyle(this.extendedItem.element);
-        this._toolbar = this.createToolbar(GridChildToolbarExtension.template, 200, 30);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.onchange = () => {
-            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
-        };
-        const gridTypeEl = this._toolbar.getById('gridType');
-        let op = document.createElement('option');
-        op.innerText = style.gridTemplateColumns.split(' ').length + 'x' + style.gridTemplateRows.split(' ').length;
-        gridTypeEl.insertAdjacentElement('afterbegin', op);
-        gridTypeEl.selectedIndex = 0;
-        gridTypeEl.onchange = () => {
-            if (gridTypeEl.value == 'custom') {
-                const columns = prompt("Number of columns?", '4');
-                if (!columns)
-                    return;
-                const rows = prompt("Number of rows?", '4');
-                if (!rows)
-                    return;
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
-            }
-            else {
-                const parts = gridTypeEl.value.split('x');
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
-            }
-        };
-        this.refresh(cache, event);
-    }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 44) });
+        super.extend(cache, event);
+        const cs = getComputedStyle(this.extendedItem.element);
+        const gridColumnEl = this._toolbar.getById('gridColumn');
+        if (gridColumnEl) {
+            gridColumnEl.value = cs.gridColumn;
+            gridColumnEl.onkeyup = async (e) => {
+                if (e.key === 'Enter')
+                    await this.extendedItem.updateStyleInSheetOrLocalAsync('gridColumn', gridColumnEl.value);
+            };
         }
-    }
-    dispose() {
-        this._removeAllOverlays();
+        const gridRowEl = this._toolbar.getById('gridRow');
+        if (gridRowEl) {
+            gridRowEl.value = cs.gridColumn;
+            gridRowEl.onkeyup = async (e) => {
+                if (e.key === 'Enter')
+                    await this.extendedItem.updateStyleInSheetOrLocalAsync('gridRow', gridRowEl.value);
+            };
+        }
+        this._addStyleButton('align-self');
+        this._addStyleButton('justify-self');
+        this.refresh(cache, event);
     }
 }

package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.d.ts

@@ -6,5 +6,4 @@ import { IExtensionManager } from '../IExtensionManger.js';
 export declare class GridChildToolbarExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
 }

package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js

@@ -1,17 +1,15 @@
-import { css } from '@node-projects/base-custom-webcomponent';
 import { NodeType } from '../../../../item/NodeType.js';
 import { GridChildToolbarExtension } from './GridChildToolbarExtension.js';
 export class GridChildToolbarExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.parent.element).display === 'grid')
-            return true;
+        if (designItem.nodeType === NodeType.Element && designItem.parent) {
+            const cs = designItem.parent?.getComputedStyle();
+            if (cs != null && (cs.display === 'grid' || cs.display === 'inline-grid'))
+                return true;
+        }
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new GridChildToolbarExtension(extensionManager, designerView, designItem);
     }
-    style = css `
-    .svg-toolbar-container { overflow: visible }
-    .svg-toolbar-container div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; }
-  `;
 }

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension.d.ts

@@ -1,8 +1,8 @@
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { IExtensionManager } from '../IExtensionManger.js';
-import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
-export declare class GridToolbarExtension extends BasicDisplayToolbarExtension {
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export declare class GridToolbarExtension extends BasicStackedToolbarExtension {
     protected static template: HTMLTemplateElement;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event: MouseEvent): void;

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension.js

@@ -1,10 +1,10 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
 import { assetsPath } from "../../../../../Constants.js";
-export class GridToolbarExtension extends BasicDisplayToolbarExtension {
+export class GridToolbarExtension extends BasicStackedToolbarExtension {
     static template = html `
     <div style="height: 100%; width: 100%;">
-      ${BasicDisplayToolbarExtension.basicTemplate}
+      ${BasicStackedToolbarExtension.basicTemplate}
       <select title="display" id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0; margin-right: 10px">
         <option>1x1</option>
         <option>1x16</option>
@@ -58,7 +58,7 @@ export class GridToolbarExtension extends BasicDisplayToolbarExtension {
         op.innerText = style.gridTemplateColumns.split(' ').length + 'x' + style.gridTemplateRows.split(' ').length;
         gridTypeEl.insertAdjacentElement('afterbegin', op);
         gridTypeEl.selectedIndex = 0;
-        gridTypeEl.onchange = () => {
+        gridTypeEl.onchange = async () => {
             if (gridTypeEl.value == 'custom') {
                 const columns = prompt("Number of columns?", '4');
                 if (!columns)
@@ -66,13 +66,17 @@ export class GridToolbarExtension extends BasicDisplayToolbarExtension {
                 const rows = prompt("Number of rows?", '4');
                 if (!rows)
                     return;
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
+                const cg = this.extendedItem.openGroup('change grid type');
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
+                cg.commit();
             }
             else {
                 const parts = gridTypeEl.value.split('x');
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
+                const cg = this.extendedItem.openGroup('change grid type');
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
+                cg.commit();
             }
         };
         this._addStyleButton('align-content');

package/dist/elements/widgets/designerView/overlayLayerView.js

@@ -23,7 +23,22 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
     .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }
     .svg-toolbar-container { overflow: visible }
-    .svg-toolbar-container div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; }
+    .svg-toolbar-container > div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; }
+    
+    node-projects-image-button-list-selector img {
+      height: 16px;
+      border: 1px solid black;
+      border-radius: 4px;
+      box-sizing: border-box;
+      pointer-events: auto;
+      cursor: pointer;
+    }
+    node-projects-image-button-list-selector img:hover {
+      background: lightgray;
+    }
+    node-projects-image-button-list-selector img:active {
+      translate: 1px 1px
+    }
     `;
     static is = 'node-projects-overlay-layer-view';
     _serviceContainer;

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

@@ -237,7 +237,7 @@ export class PointerTool {
                     }
                     if (this._movedSinceStartedAction) {
                         const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
-                        const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
+                        const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle, this._actionStartedDesignItem));
                         if (currentContainerService) {
                             const dragItem = this._actionStartedDesignItem.parent;
                             if (this._dragParentExtensionItem != dragItem) {
@@ -324,7 +324,7 @@ export class PointerTool {
                     }
                     if (this._movedSinceStartedAction) {
                         const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
-                        let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
+                        let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle, this._actionStartedDesignItem));
                         const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                         if (containerService) {
                             if (!this._changeGroup)
@@ -400,7 +400,7 @@ export class PointerTool {
             else if (e == designerCanvas.rootDesignItem.element) {
                 newContainerElementDesignItem = designerCanvas.rootDesignItem;
                 const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle, designItem));
                 break;
             }
             else if (false) {
@@ -409,7 +409,7 @@ export class PointerTool {
             else {
                 newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle, designItem));
                 if (newContainerService) {
                     if (newContainerService.canEnter(newContainerElementDesignItem, designItems)) {
                         break;

package/dist/index.d.ts

@@ -196,7 +196,7 @@ export * from "./elements/widgets/designerView/tools/ZoomTool.js";
 export type { IDesignerExtension } from "./elements/widgets/designerView/extensions/IDesignerExtension.js";
 export type { IDesignerExtensionProvider } from "./elements/widgets/designerView/extensions/IDesignerExtensionProvider.js";
 export type { IExtensionManager } from "./elements/widgets/designerView/extensions/IExtensionManger.js";
-export * from "./elements/widgets/designerView/extensions/BasicDisplayToolbarExtension.js";
+export * from "./elements/widgets/designerView/extensions/BasicStackedToolbarExtension.js";
 export * from "./elements/widgets/designerView/extensions/OverlayLayer.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";

package/dist/index.js

@@ -137,7 +137,7 @@ export * from "./elements/widgets/designerView/tools/PointerTool.js";
 export * from "./elements/widgets/designerView/tools/RectangleSelectorTool.js";
 export * from "./elements/widgets/designerView/tools/TextTool.js";
 export * from "./elements/widgets/designerView/tools/ZoomTool.js";
-export * from "./elements/widgets/designerView/extensions/BasicDisplayToolbarExtension.js";
+export * from "./elements/widgets/designerView/extensions/BasicStackedToolbarExtension.js";
 export * from "./elements/widgets/designerView/extensions/OverlayLayer.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.109",
+  "version": "0.1.111",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",