@node-projects/web-component-designer 0.0.194 → 0.0.197

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -11,7 +11,6 @@ import { DefaultHtmlParserService } from './htmlParserService/DefaultHtmlParserS
 import { Lit2PropertiesService } from './propertiesService/services/Lit2PropertiesService.js';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
 import { ElementDragTitleExtensionProvider } from '../widgets/designerView/extensions/ElementDragTitleExtensionProvider.js';
-import { GridExtensionProvider } from '../widgets/designerView/extensions/GridExtensionProvider.js';
 import { TransformOriginExtensionProvider } from '../widgets/designerView/extensions/TransformOriginExtensionProvider.js';
 import { CanvasExtensionProvider } from '../widgets/designerView/extensions/CanvasExtensionProvider.js';
 import { PositionExtensionProvider } from '../widgets/designerView/extensions/PositionExtensionProvider.js';
@@ -77,6 +76,9 @@ import { SelectionService } from './selectionService/SelectionService.js';
 import { ContentService } from './contentService/ContentService.js';
 import { StylesheetServiceDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
 import { JumpToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js';
+import { EditGridExtensionProvider } from '../widgets/designerView/extensions/grid/EditGridExtensionProvider.js';
+import { DisplayGridExtensionProvider } from '../widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js';
+import { ApplyFirstMachingExtensionProvider } from '../widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -110,7 +112,7 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ElementDragTitleExtensionProvider(),
-        new GridExtensionProvider(),
+        new EditGridExtensionProvider(),
         new FlexboxExtensionProvider(),
         new TransformOriginExtensionProvider(),
         new CanvasExtensionProvider(),
@@ -126,7 +128,7 @@ export function createDefaultServiceContainer() {
         new SelectionDefaultExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainer, [
-        new GridExtensionProvider(),
+        new EditGridExtensionProvider(),
         new FlexboxExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [
@@ -139,11 +141,11 @@ export function createDefaultServiceContainer() {
         new GrayOutExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOver, [
-        new GrayOutDragOverContainerExtensionProvider(),
+        new ApplyFirstMachingExtensionProvider(new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider()),
         new AltToEnterContainerExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOver, [
-        new GrayOutDragOverContainerExtensionProvider()
+        new ApplyFirstMachingExtensionProvider(new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider()),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [
         new EditTextExtensionProvider()

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -48,7 +48,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
     elementsFromPoint(x: number, y: number): Element[];
-    showHoverExtension(element: Element): any;
+    showHoverExtension(element: Element, event: Event): any;
     zoomTowardsPoint(point: IPoint, scalechange: number): void;
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -113,7 +113,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     elementFromPoint(x: number, y: number): Element;
     elementsFromPoint(x: number, y: number): Element[];
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
-    showHoverExtension(element: Element): void;
+    showHoverExtension(element: Element, event: Event): void;
     private _pointerEventHandler;
     captureActiveTool(tool: ITool): void;
     releaseActiveTool(): void;

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

@@ -609,9 +609,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 let [newContainer] = this._getPossibleContainerForDrop(event);
                 if (this._dragOverExtensionItem != newContainer) {
                     this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
-                    this.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver);
+                    this.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
                     this._dragOverExtensionItem = newContainer;
                 }
+                else {
+                    this.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+                }
             }
         }
     }
@@ -677,19 +680,17 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 let [newContainer] = this._getPossibleContainerForDrop(event);
                 if (!newContainer)
                     newContainer = this.rootDesignItem;
-                let pos = this.getNormalizedElementCoordinates(newContainer.element);
                 this._fillCalculationrects();
-                const position = this.getNormalizedEventCoordinates(event);
                 //TODO : we need to use container service for adding to element, so also grid and flexbox work correct
                 const transferData = event.dataTransfer.getData(dragDropFormatNameElementDefinition);
                 const elementDefinition = JSON.parse(transferData);
                 const di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
                 const grp = di.openGroup("Insert of <" + di.name + ">");
                 di.setStyle('position', 'absolute');
-                di.setStyle('left', (position.x - pos.x) + 'px');
-                di.setStyle('top', (position.y - pos.y) + 'px');
                 const containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
                 containerService.enterContainer(newContainer, [di]);
+                containerService.place(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, this.getNormalizedEventCoordinates(event), [di]);
+                containerService.finishPlace(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, this.getNormalizedEventCoordinates(event), [di]);
                 this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
                 requestAnimationFrame(() => {
                     this.instanceServiceContainer.selectionService.setSelectedElements([di]);
@@ -712,7 +713,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     _onDblClick(event) {
         event.preventDefault();
-        this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick);
+        this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
     }
     onKeyUp(event) {
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
@@ -885,13 +886,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         return currentElement;
     }
-    showHoverExtension(element) {
+    showHoverExtension(element, event) {
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(element, this.serviceContainer, this.instanceServiceContainer);
         if (this._lastHoverDesignItem != currentDesignItem) {
             if (this._lastHoverDesignItem)
                 this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver);
             if (currentDesignItem && currentDesignItem != this.rootDesignItem && DomHelper.getHost(element.parentNode) !== this.overlayLayer)
-                this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver);
+                this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver, event);
             this._lastHoverDesignItem = currentDesignItem;
         }
     }
@@ -930,7 +931,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         this.clickOverlay.style.cursor = this._canvas.style.cursor;
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, this.serviceContainer, this.instanceServiceContainer);
-        this.showHoverExtension(currentDesignItem.element);
+        this.showHoverExtension(currentDesignItem.element, event);
         //TODO: needed ??
         if (currentElement && DomHelper.getHost(currentElement.parentNode) === this.overlayLayer) {
             if (this.eatEvents)

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

@@ -9,13 +9,13 @@ export declare class ExtensionManager implements IExtensionManager {
     constructor(designerCanvas: IDesignerCanvas);
     private _contentChanged;
     private _selectedElementsChanged;
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): IDesignerExtension[];
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): void;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): void;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
-    removeExtensions(designItems: IDesignItem[], includeChildren: boolean, extensionType?: ExtensionType): void;
-    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
-    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, ignoredExtension?: any): void;
-    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: any): void;
+    removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): void;
+    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): void;
+    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension): void;
+    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): void;
     refreshAllAppliedExtentions(): void;
     reapplyAllAppliedExtentions(): void;
     private static getAllChildElements;

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

@@ -13,13 +13,13 @@ export class ExtensionManager {
         requestAnimationFrame(() => {
             switch (contentChanged.changeType) {
                 case 'added':
-                    this.applyExtensions(contentChanged.designItems, ExtensionType.Permanent, true);
+                    this.applyExtensions(contentChanged.designItems, ExtensionType.Permanent, null, true);
                     break;
                 case 'moved':
                     this.refreshExtensions(contentChanged.designItems, ExtensionType.Permanent);
                     break;
                 case 'parsed':
-                    this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, true);
+                    this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, null, true);
                     break;
                 case 'removed':
                     this.removeExtensions(contentChanged.designItems, true, ExtensionType.Permanent);
@@ -44,7 +44,7 @@ export class ExtensionManager {
         }
         //this.refreshExtensions(selectionChangedEvent.selectedElements);
     }
-    applyExtension(designItem, extensionType, recursive = false) {
+    applyExtension(designItem, extensionType, event, recursive = false) {
         if (designItem && designItem.nodeType == NodeType.Element) {
             const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
             let extensions = [];
@@ -61,7 +61,7 @@ export class ExtensionManager {
                             appE = [];
                         const ext = e.getExtension(this, this.designerCanvas, designItem);
                         try {
-                            ext.extend();
+                            ext.extend(event);
                             extensions.push(ext);
                         }
                         catch (err) {
@@ -75,14 +75,14 @@ export class ExtensionManager {
             }
             if (recursive) {
                 for (const d of designItem.children()) {
-                    this.applyExtension(d, extensionType, recursive);
+                    this.applyExtension(d, extensionType, event, recursive);
                 }
             }
             return extensions;
         }
         return null;
     }
-    applyExtensions(designItems, extensionType, recursive = false) {
+    applyExtensions(designItems, extensionType, event, recursive = false) {
         if (designItems) {
             const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
             if (extProv) {
@@ -93,13 +93,13 @@ export class ExtensionManager {
                             shouldAppE = [];
                         shouldAppE.push(e);
                         i.shouldAppliedDesignerExtensions.set(extensionType, shouldAppE);
-                        if ( /*i.nodeType == NodeType.Element &&*/e.shouldExtend(this, this.designerCanvas, i)) {
+                        if (e.shouldExtend(this, this.designerCanvas, i)) {
                             let appE = i.appliedDesignerExtensions.get(extensionType);
                             if (!appE)
                                 appE = [];
                             const ext = e.getExtension(this, this.designerCanvas, i);
                             try {
-                                ext.extend();
+                                ext.extend(event);
                             }
                             catch (err) {
                                 console.error(err);
@@ -113,7 +113,7 @@ export class ExtensionManager {
             }
             if (recursive) {
                 for (const d of designItems) {
-                    this.applyExtensions(Array.from(d.children()), extensionType, recursive);
+                    this.applyExtensions(Array.from(d.children()), extensionType, event, recursive);
                 }
             }
         }
@@ -154,11 +154,11 @@ export class ExtensionManager {
             }
         }
     }
-    removeExtensions(designItems, includeChildren, extensionType) {
+    removeExtensions(designItems, recursive, extensionType) {
         if (designItems) {
             if (extensionType) {
                 for (let i of designItems) {
-                    if (includeChildren && i.hasChildren) {
+                    if (recursive && i.hasChildren) {
                         this.removeExtensions([...i.children()], true, extensionType);
                     }
                     i.shouldAppliedDesignerExtensions.delete(extensionType);
@@ -180,7 +180,7 @@ export class ExtensionManager {
             }
             else {
                 for (let i of designItems) {
-                    if (includeChildren && i.hasChildren) {
+                    if (recursive && i.hasChildren) {
                         this.removeExtensions([...i.children()], true, extensionType);
                     }
                     i.shouldAppliedDesignerExtensions.clear();
@@ -200,14 +200,14 @@ export class ExtensionManager {
             }
         }
     }
-    refreshExtension(designItem, extensionType) {
+    refreshExtension(designItem, extensionType, event) {
         if (designItem) {
             if (extensionType) {
                 let exts = designItem.appliedDesignerExtensions.get(extensionType);
                 if (exts) {
                     for (let e of exts) {
                         try {
-                            e.refresh();
+                            e.refresh(event);
                         }
                         catch (err) {
                             console.error(err);
@@ -219,7 +219,7 @@ export class ExtensionManager {
                 for (let appE of designItem.appliedDesignerExtensions) {
                     for (let e of appE[1]) {
                         try {
-                            e.refresh();
+                            e.refresh(event);
                         }
                         catch (err) {
                             console.error(err);
@@ -229,7 +229,7 @@ export class ExtensionManager {
             }
         }
     }
-    refreshExtensions(designItems, extensionType, ignoredExtension) {
+    refreshExtensions(designItems, extensionType, event, ignoredExtension) {
         if (designItems) {
             if (extensionType) {
                 for (let i of designItems) {
@@ -238,7 +238,7 @@ export class ExtensionManager {
                         for (let e of exts) {
                             try {
                                 if (e != ignoredExtension)
-                                    e.refresh();
+                                    e.refresh(event);
                             }
                             catch (err) {
                                 console.error(err);
@@ -253,7 +253,7 @@ export class ExtensionManager {
                         for (let e of appE[1]) {
                             try {
                                 if (e != ignoredExtension)
-                                    e.refresh();
+                                    e.refresh(event);
                             }
                             catch (err) {
                                 console.error(err);
@@ -266,17 +266,17 @@ export class ExtensionManager {
     }
     refreshAllExtensions(designItems, ignoredExtension) {
         if (designItems) {
-            this.refreshExtensions(designItems, ExtensionType.Permanent, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.Selection, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.PrimarySelection, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.MouseOver, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.ContainerDragOver, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.ContainerDrag, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.Doubleclick, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.Placement, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Permanent, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Selection, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelection, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer, null, ignoredExtension);
+            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.ContainerDrag, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Doubleclick, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Placement, null, ignoredExtension);
         }
     }
     refreshAllAppliedExtentions() {

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

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

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

@@ -1,7 +1,7 @@
 import { css } from "@node-projects/base-custom-webcomponent";
 import { GrayOutDragOverContainerExtension } from "./GrayOutDragOverContainerExtension.js";
 export class GrayOutDragOverContainerExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {

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

@@ -1,5 +1,5 @@
 import { IDisposable } from '../../../../interfaces/IDisposable.js';
 export interface IDesignerExtension extends IDisposable {
-    extend(): any;
-    refresh(): any;
+    extend(event?: Event): any;
+    refresh(event?: Event): any;
 }

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

@@ -5,5 +5,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export interface IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    style?: CSSStyleSheet;
+    style?: CSSStyleSheet | CSSStyleSheet[];
 }

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

@@ -2,13 +2,13 @@ import { IDesignItem } from '../../../item/IDesignItem.js';
 import { ExtensionType } from './ExtensionType.js';
 import { IDesignerExtension } from './IDesignerExtension.js';
 export interface IExtensionManager {
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): IDesignerExtension[];
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): any;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): any;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
-    removeExtensions(designItems: IDesignItem[], includeChildren: boolean, extensionType?: ExtensionType): any;
-    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
-    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
-    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: any): any;
+    removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): any;
+    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): any;
+    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event): any;
+    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): any;
     refreshAllAppliedExtentions(): any;
     reapplyAllAppliedExtentions(): any;
 }

package/dist/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js

@@ -1,4 +1,4 @@
-import { gridExtensionShowOverlayOptionName } from "../GridExtensionProvider.js";
+import { gridExtensionShowOverlayOptionName } from "../grid/DisplayGridExtensionProvider.js";
 import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
 export class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
     constructor() {

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

@@ -0,0 +1,14 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class DisplayGridExtension extends AbstractExtension {
+    private _cells;
+    private _gaps;
+    private gridInformation;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(event?: Event): void;
+    refresh(event?: Event): void;
+    dispose(): void;
+    _initSVGArrays(): void;
+}

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

@@ -0,0 +1,53 @@
+import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { AbstractExtension } from '../AbstractExtension.js';
+import { OverlayLayer } from "../OverlayLayer.js";
+export class DisplayGridExtension extends AbstractExtension {
+    _cells;
+    _gaps;
+    gridInformation;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(event) {
+        this._initSVGArrays();
+        this.refresh(event);
+    }
+    refresh(event) {
+        this.gridInformation = CalculateGridInformation(this.extendedItem);
+        let cells = this.gridInformation.cells;
+        if (cells[0][0] && !isNaN(cells[0][0].height) && !isNaN(cells[0][0].width)) {
+            if (this.gridInformation.cells.length != this._cells.length || this.gridInformation.cells[0].length != this._cells[0].length)
+                this._initSVGArrays();
+            //draw gaps
+            this.gridInformation.gaps.forEach((gap, i) => {
+                this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Foregorund);
+            });
+            //draw cells
+            cells.forEach((row, i) => {
+                row.forEach((cell, j) => {
+                    this._cells[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._cells[i][j], OverlayLayer.Background);
+                    if (cell.name) {
+                        const text = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', null, OverlayLayer.Background);
+                        text.setAttribute("dominant-baseline", "hanging");
+                    }
+                    if (event && event instanceof MouseEvent) {
+                        let crd = this.designerCanvas.getNormalizedEventCoordinates(event);
+                        if (crd.x >= cell.x && crd.y >= cell.y && crd.x <= cell.x + cell.width && crd.y <= cell.y + cell.height) {
+                            this._cells[i][j].setAttribute("class", "svg-grid-current-cell");
+                        }
+                    }
+                });
+            });
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+    _initSVGArrays() {
+        this._removeAllOverlays();
+        this.gridInformation = CalculateGridInformation(this.extendedItem);
+        this._cells = new Array(this.gridInformation.cells.length);
+        this.gridInformation.cells.forEach((row, i) => this._cells[i] = new Array(row.length));
+        this._gaps = new Array(this.gridInformation.gaps.length);
+    }
+}

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

@@ -0,0 +1,11 @@
+import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerExtension } from '../IDesignerExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare const gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
+export declare class DisplayGridExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,23 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { DisplayGridExtension } from './DisplayGridExtension.js';
+export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
+export class DisplayGridExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        const display = getComputedStyle(designItem.element).display;
+        if (display == 'grid' || display == 'inline-grid')
+            return designerCanvas.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new DisplayGridExtension(extensionManager, designerCanvas, designItem);
+    }
+    style = css `
+    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
+    .svg-grid-current-cell { stroke: orange; stroke-dasharray: 5; fill: #e3ff4722; }
+    .svg-grid-area { font-size: 8px; }
+    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
+    .svg-grid-resizer { fill: white; stroke: #3899ec; }
+    .svg-grid-header { fill: #ff944722; stroke: orange; }
+    .svg-grid-plus-sign { stroke: black; }
+  `;
+}

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

@@ -0,0 +1,51 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class EditGridExtension extends AbstractExtension {
+    private _initialPoint;
+    private _initialSizes;
+    private _cells;
+    private _gaps;
+    private _headers;
+    private _headerTexts;
+    private _plusCircles;
+    private _resizeCircles;
+    private minPixelSize;
+    private gridInformation;
+    private defaultHeaderSize;
+    private defaultPlusSize;
+    private defaultDistanceToBox;
+    private defaultDistanceBetweenHeaders;
+    private defaultSizeOfNewRowOrColumn;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _initSVGArrays(): void;
+    _drawResizeCircle(gap: any, oldCircle?: SVGCircleElement): SVGCircleElement;
+    _drawHeader(cell: any, oldHeader: any, index: any, alignment: "vertical" | "horizontal"): SVGRectElement;
+    _drawHeaderText(cell: any, oldHeaderText: any, alignment: "vertical" | "horizontal"): SVGTextElement;
+    _drawPlusCircle(x: any, y: any, oldPlusElement: {
+        circle: SVGCircleElement;
+        verticalLine: SVGLineElement;
+        horizontalLine: SVGLineElement;
+    }, index: any, alignment: "vertical" | "horizontal", final?: boolean): {
+        circle: any;
+        verticalLine: any;
+        horizontalLine: any;
+    };
+    _getHeaderText(size: number, unit: string, percentTarget: "width" | "height"): string;
+    _getInitialSizes(): {
+        x: any[];
+        xUnit: any[];
+        y: any[];
+        yUnit: any[];
+    };
+    _pointerActionTypeResize(event: PointerEvent, circle: SVGCircleElement, gapColumn: any, gapRow: any): void;
+    _calculateNewSize(iSizes: number[], iUnits: string[], diff: any, gapIndex: any, percentTarget: 'width' | 'height', pointerUp?: boolean): string;
+    _editGrid(pos: number, alignment: "vertical" | "horizontal", task: "add" | "del"): void;
+    _calculateNewElementSize(elementTarget: "width" | "height"): string;
+    _toggleDisplayPlusCircles(index: any, alignment: "vertical" | "horizontal", double?: boolean): void;
+    _convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string): string | number;
+}