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

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,8 @@ 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';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -110,7 +111,7 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ElementDragTitleExtensionProvider(),
-        new GridExtensionProvider(),
+        new EditGridExtensionProvider(),
         new FlexboxExtensionProvider(),
         new TransformOriginExtensionProvider(),
         new CanvasExtensionProvider(),
@@ -126,7 +127,7 @@ export function createDefaultServiceContainer() {
         new SelectionDefaultExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainer, [
-        new GridExtensionProvider(),
+        new EditGridExtensionProvider(),
         new FlexboxExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [
@@ -140,10 +141,12 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOver, [
         new GrayOutDragOverContainerExtensionProvider(),
-        new AltToEnterContainerExtensionProvider()
+        new AltToEnterContainerExtensionProvider(),
+        new DisplayGridExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOver, [
-        new GrayOutDragOverContainerExtensionProvider()
+        new GrayOutDragOverContainerExtensionProvider(),
+        new DisplayGridExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [
         new EditTextExtensionProvider()

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

@@ -677,19 +677,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]);

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(): void;
+    refresh(): void;
+    dispose(): void;
+    _initSVGArrays(): void;
+}

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

@@ -0,0 +1,47 @@
+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() {
+        this._initSVGArrays();
+        this.refresh();
+    }
+    refresh() {
+        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");
+                    }
+                });
+            });
+        }
+    }
+    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,22 @@
+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-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;
+}

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

@@ -0,0 +1,346 @@
+import { EventNames } from "../../../../../enums/EventNames.js";
+import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../../helper/CssUnitConverter.js";
+import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { AbstractExtension } from '../AbstractExtension.js';
+import { OverlayLayer } from "../OverlayLayer.js";
+export class EditGridExtension extends AbstractExtension {
+    _initialPoint;
+    _initialSizes;
+    _cells;
+    _gaps;
+    _headers;
+    _headerTexts;
+    _plusCircles;
+    _resizeCircles;
+    minPixelSize = 10;
+    gridInformation;
+    defaultHeaderSize = 20;
+    defaultPlusSize = this.defaultHeaderSize * 2 / 3;
+    defaultDistanceToBox = 5;
+    defaultDistanceBetweenHeaders = 10;
+    defaultSizeOfNewRowOrColumn = "50px";
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this._initSVGArrays();
+        this.refresh();
+    }
+    refresh() {
+        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);
+                this._resizeCircles[i] = this._drawResizeCircle(gap, this._resizeCircles[i]);
+            });
+            //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");
+                    }
+                });
+            });
+            //draw headers
+            cells.forEach((row, i) => {
+                this._headers[0][i] = this._drawHeader(row[0], this._headers[0][i], i, "vertical");
+                this._headerTexts[0][i] = this._drawHeaderText(row[0], this._headerTexts[0][i], "vertical");
+            });
+            cells[0].forEach((column, i) => {
+                this._headers[1][i] = this._drawHeader(column, this._headers[1][i], i, "horizontal");
+                this._headerTexts[1][i] = this._drawHeaderText(column, this._headerTexts[1][i], "horizontal");
+            });
+            //draw circles for adding rows/columns
+            for (let i = 0; i < this._plusCircles[0].length; i++)
+                if (i < this._plusCircles[0].length - 1)
+                    this._plusCircles[0][i] = this._drawPlusCircle(cells[i][0].x, cells[i][0].y, this._plusCircles[0][i], i, "vertical");
+                else
+                    this._plusCircles[0][i] = this._drawPlusCircle(cells[i - 1][0].x, cells[i - 1][0].y + cells[i - 1][0].height, this._plusCircles[0][i], i, "vertical", true);
+            for (let i = 0; i < this._plusCircles[1].length; i++)
+                if (i < this._plusCircles[1].length - 1)
+                    this._plusCircles[1][i] = this._drawPlusCircle(cells[0][i].x, cells[0][i].y, this._plusCircles[1][i], i, "horizontal");
+                else
+                    this._plusCircles[1][i] = this._drawPlusCircle(cells[0][i - 1].x + cells[0][i - 1].width, cells[0][i - 1].y, this._plusCircles[1][i], i, "horizontal", true);
+        }
+    }
+    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);
+        this._headers = new Array(2);
+        this._headers[0] = new Array(this.gridInformation.cells.length + 1); //array for the headers of columns
+        this._headers[1] = new Array(this.gridInformation.cells[0].length + 1); //array for the headers of rows
+        this._headerTexts = new Array(2);
+        this._headerTexts[0] = new Array(this.gridInformation.cells.length + 1);
+        this._headerTexts[1] = new Array(this.gridInformation.cells[0].length + 1);
+        this._plusCircles = new Array(2);
+        this._plusCircles[0] = new Array(this.gridInformation.cells.length + 1);
+        this._plusCircles[1] = new Array(this.gridInformation.cells[0].length + 1);
+        this._resizeCircles = new Array(this.gridInformation.gaps.length);
+    }
+    _drawResizeCircle(gap, oldCircle) {
+        let resizeCircle = this._drawCircle((gap.x + (gap.width / 2)), (gap.y + (gap.height / 2)), 1.5, 'svg-grid-resizer', oldCircle, OverlayLayer.Foregorund);
+        resizeCircle.style.pointerEvents = "all";
+        resizeCircle.style.cursor = gap.width < gap.height ? "ew-resize" : "ns-resize";
+        if (!oldCircle) {
+            resizeCircle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, resizeCircle, gap.column, gap.row));
+            resizeCircle.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, resizeCircle, gap.column, gap.row));
+            resizeCircle.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, resizeCircle, gap.column, gap.row));
+        }
+        return resizeCircle;
+    }
+    _drawHeader(cell, oldHeader, index, alignment) {
+        let xOffset;
+        let yOffset;
+        let width;
+        let height;
+        if (alignment == "vertical") {
+            xOffset = -(this.defaultHeaderSize + this.defaultDistanceToBox);
+            yOffset = this.defaultDistanceBetweenHeaders / 2;
+            width = this.defaultHeaderSize;
+            height = cell.height - this.defaultDistanceBetweenHeaders;
+        }
+        else {
+            xOffset = this.defaultDistanceBetweenHeaders / 2;
+            yOffset = -(this.defaultHeaderSize + this.defaultDistanceToBox);
+            width = cell.width - this.defaultDistanceBetweenHeaders;
+            height = this.defaultHeaderSize;
+        }
+        let tmpHeader = this._drawRect(cell.x + xOffset, cell.y + yOffset, width, height, "svg-grid-header", oldHeader, OverlayLayer.Foregorund);
+        tmpHeader.style.pointerEvents = "all";
+        if (!oldHeader) {
+            tmpHeader.addEventListener(EventNames.PointerMove, event => {
+                this._toggleDisplayPlusCircles(index, alignment, true);
+            });
+        }
+        return tmpHeader;
+    }
+    _drawHeaderText(cell, oldHeaderText, alignment) {
+        let text;
+        let xOffset;
+        let yOffset;
+        if (alignment == "vertical") {
+            text = this._getHeaderText(cell.height, cell.initHeightUnit, "height");
+            xOffset = -12.5;
+            yOffset = cell.height / 2;
+        }
+        else {
+            text = this._getHeaderText(cell.width, cell.initWidthUnit, "width");
+            xOffset = cell.width / 2;
+            yOffset = -12.5;
+        }
+        let rText = this._drawText(text, cell.x + xOffset, cell.y + yOffset, null, oldHeaderText, OverlayLayer.Background);
+        if (alignment == "vertical")
+            rText.setAttribute("transform", "rotate(-90, " + (cell.x + xOffset) + ", " + (cell.y + yOffset) + ")");
+        return rText;
+    }
+    _drawPlusCircle(x, y, oldPlusElement, index, alignment, final = false) {
+        let plusElement = { circle: null, verticalLine: null, horizontalLine: null };
+        let posX;
+        let posY;
+        let gapOffset = index == 0 || final ? 0 : -(convertCssUnitToPixel(this.extendedItem.getStyle(alignment == "vertical" ? "row-gap" : "column-gap"), this.extendedItem.element, alignment == "vertical" ? "height" : "width") / 2);
+        if (alignment == "vertical") {
+            posX = x - this.defaultDistanceToBox - this.defaultHeaderSize / 2;
+            posY = y + gapOffset;
+        }
+        else {
+            posX = x + gapOffset;
+            posY = y - this.defaultDistanceToBox - this.defaultHeaderSize / 2;
+        }
+        plusElement.circle = this._drawCircle(posX, posY, this.defaultHeaderSize / 2, 'svg-grid-resizer', oldPlusElement ? oldPlusElement.circle : null, OverlayLayer.Foregorund);
+        plusElement.circle.style.pointerEvents = "all";
+        plusElement.circle.style.cursor = "pointer";
+        plusElement.circle.style.display = "none";
+        if (!oldPlusElement) {
+            plusElement.circle.addEventListener(EventNames.PointerMove, event => this._toggleDisplayPlusCircles(index, alignment));
+            plusElement.circle.addEventListener(EventNames.PointerDown, event => {
+                this._editGrid(index, alignment, "add");
+                event.stopPropagation();
+            });
+        }
+        plusElement.verticalLine = this._drawLine(posX, posY - this.defaultPlusSize / 2, posX, posY + this.defaultPlusSize / 2, "svg-grid-plus-sign", oldPlusElement ? oldPlusElement.verticalLine : null, OverlayLayer.Foregorund);
+        plusElement.verticalLine.style.display = "none";
+        plusElement.horizontalLine = this._drawLine(posX - this.defaultPlusSize / 2, posY, posX + this.defaultPlusSize / 2, posY, "svg-grid-plus-sign", oldPlusElement ? oldPlusElement.horizontalLine : null, OverlayLayer.Foregorund);
+        plusElement.horizontalLine.style.display = "none";
+        return plusElement;
+    }
+    _getHeaderText(size, unit, percentTarget) {
+        return Math.round(parseFloat(this._convertCssUnit(size, this.extendedItem.element, percentTarget, unit)) * 10) / 10 + unit;
+    }
+    _getInitialSizes() {
+        let rX = []; //in pixels
+        let rXUnit = []; //original unit
+        let rY = []; //in pixels
+        let rYUnit = []; //original unit
+        this.gridInformation.cells[0].forEach(row => {
+            rX.push(row.width);
+            rXUnit.push(row.initWidthUnit);
+        });
+        this.gridInformation.cells.forEach(column => {
+            rY.push(column[0].height);
+            rYUnit.push(column[0].initHeightUnit);
+        });
+        return { x: rX, xUnit: rXUnit, y: rY, yUnit: rYUnit };
+    }
+    _pointerActionTypeResize(event, circle, gapColumn, gapRow) {
+        event.stopPropagation();
+        switch (event.type) {
+            case EventNames.PointerDown:
+                circle.setPointerCapture(event.pointerId);
+                this._initialPoint = { x: event.clientX, y: event.clientY };
+                this._initialSizes = this._getInitialSizes();
+                break;
+            case EventNames.PointerMove:
+                if (this._initialPoint) {
+                    let elementStyle = this.extendedItem.element.style;
+                    this.extendedItem.element.getBoundingClientRect;
+                    if (circle.style.cursor == "ew-resize")
+                        elementStyle.gridTemplateColumns = this._calculateNewSize(this._initialSizes.x, this._initialSizes.xUnit, (event.clientX - this._initialPoint.x) / this.designerCanvas.zoomFactor, gapColumn, "width");
+                    else if (circle.style.cursor == "ns-resize")
+                        elementStyle.gridTemplateRows = this._calculateNewSize(this._initialSizes.y, this._initialSizes.yUnit, (event.clientY - this._initialPoint.y) / this.designerCanvas.zoomFactor, gapRow, "height");
+                    this.refresh();
+                }
+                break;
+            case EventNames.PointerUp:
+                circle.releasePointerCapture(event.pointerId);
+                if (circle.style.cursor == "ew-resize")
+                    this.extendedItem.setStyle("grid-template-columns", this._calculateNewSize(this._initialSizes.x, this._initialSizes.xUnit, (event.clientX - this._initialPoint.x) / this.designerCanvas.zoomFactor, gapColumn, "width", true));
+                else if (circle.style.cursor == "ns-resize")
+                    this.extendedItem.setStyle("grid-template-rows", this._calculateNewSize(this._initialSizes.y, this._initialSizes.yUnit, (event.clientY - this._initialPoint.y) / this.designerCanvas.zoomFactor, gapRow, "height", true));
+                this._initialPoint = null;
+                this._initialSizes = null;
+                this.refresh();
+                break;
+        }
+    }
+    _calculateNewSize(iSizes, iUnits, diff, gapIndex, percentTarget, pointerUp = false) {
+        let newSizes = [];
+        let edited = [];
+        for (let i = 0; i < iSizes.length; i++) {
+            newSizes.push(i + 1 == gapIndex ? iSizes[i] + diff : i == gapIndex ? iSizes[i] - diff : iSizes[i]);
+            edited.push(i + 1 == gapIndex || i == gapIndex);
+        }
+        for (let i = 0; i < newSizes.length; i++) {
+            let index = edited[i + 1] ? i + 1 : edited[i - 1] ? i - 1 : null;
+            if (newSizes[i] < 0 && pointerUp) {
+                if (confirm("Do you want to delete this " + (percentTarget == "width" ? "column" : "row") + "?")) {
+                    this._editGrid(i, percentTarget == "width" ? "horizontal" : "vertical", "del");
+                    newSizes[index] = iSizes[i] + iSizes[index];
+                    newSizes.splice(i, 1);
+                    break;
+                }
+            }
+            if (newSizes[i] < this.minPixelSize) {
+                newSizes[index] = newSizes[i] + newSizes[index] - this.minPixelSize;
+                newSizes[i] = this.minPixelSize;
+                break;
+            }
+        }
+        let retVal = "";
+        newSizes.forEach((newSize, i) => retVal += this._convertCssUnit(newSize + "px", this.extendedItem.element, percentTarget, iUnits[i]) + ' ');
+        return retVal;
+    }
+    _editGrid(pos, alignment, task) {
+        let cellTarget;
+        let elementTarget;
+        if (alignment == "vertical") {
+            cellTarget = "grid-template-rows";
+            elementTarget = "height";
+        }
+        else {
+            cellTarget = "grid-template-columns";
+            elementTarget = "width";
+        }
+        let sizes = this.extendedItem.getStyle(cellTarget).split(' ');
+        if (task == "add")
+            sizes.splice(pos, 0, this.defaultSizeOfNewRowOrColumn);
+        else
+            sizes.splice(pos, 1);
+        this.extendedItem.setStyle(cellTarget, sizes.join(' '));
+        if (task == "add") {
+            this.extendedItem.setStyle(elementTarget, convertCssUnit(this._calculateNewElementSize(elementTarget), this.designerCanvas.canvas, elementTarget, getCssUnit(this.extendedItem.getStyle(elementTarget))));
+        }
+        else {
+            this.extendedItem.setStyle(elementTarget, convertCssUnit(convertCssUnitToPixel(this.extendedItem.getStyle(elementTarget), this.designerCanvas.canvas, elementTarget) - convertCssUnitToPixel(this.extendedItem.getStyle(alignment == "vertical" ? "row-gap" : "column-gap"), this.extendedItem.element, elementTarget), this.designerCanvas.canvas, elementTarget, getCssUnit(this.extendedItem.getStyle(elementTarget))));
+        }
+    }
+    _calculateNewElementSize(elementTarget) {
+        let gc = CalculateGridInformation(this.extendedItem);
+        let tmpSize = 0;
+        if (elementTarget == "width") {
+            gc.cells[0].forEach(cell => { tmpSize += cell.width; });
+            tmpSize += convertCssUnitToPixel(this.extendedItem.getStyle("column-gap"), this.extendedItem.element, elementTarget) * (gc.cells[0].length - 1);
+        }
+        else {
+            gc.cells.forEach(row => { tmpSize += row[0].height; });
+            tmpSize += convertCssUnitToPixel(this.extendedItem.getStyle("row-gap"), this.extendedItem.element, elementTarget) * (gc.cells.length - 1);
+        }
+        return tmpSize + "px";
+    }
+    _toggleDisplayPlusCircles(index, alignment, double = false) {
+        this._plusCircles.forEach(alignment => {
+            alignment.forEach(element => {
+                element.circle.style.display = "none";
+                element.verticalLine.style.display = "none";
+                element.horizontalLine.style.display = "none";
+            });
+        });
+        if (index != -1) {
+            this._plusCircles[alignment == "vertical" ? 0 : 1][index].circle.style.display = "inline";
+            this._plusCircles[alignment == "vertical" ? 0 : 1][index].verticalLine.style.display = "inline";
+            this._plusCircles[alignment == "vertical" ? 0 : 1][index].horizontalLine.style.display = "inline";
+            if (double) {
+                this._plusCircles[alignment == "vertical" ? 0 : 1][index + 1].circle.style.display = "inline";
+                this._plusCircles[alignment == "vertical" ? 0 : 1][index + 1].verticalLine.style.display = "inline";
+                this._plusCircles[alignment == "vertical" ? 0 : 1][index + 1].horizontalLine.style.display = "inline";
+            }
+        }
+    }
+    _convertCssUnit(cssValue, target, percentTarget, unit) {
+        if (unit == "fr") {
+            let containerSize = convertCssUnitToPixel(target.style.width, target, percentTarget);
+            let amountGaps = percentTarget == "height" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
+            let gapSize = convertCssUnitToPixel(percentTarget == "width" ? target.style.columnGap : target.style.rowGap, target, percentTarget);
+            let containerSizeWithoutGaps = containerSize - gapSize * amountGaps;
+            let amountFrSizes = 0;
+            let leftOver = containerSizeWithoutGaps;
+            if (percentTarget == "width") {
+                this.gridInformation.cells[0].forEach((column, i) => {
+                    if (column.initWidthUnit == "fr")
+                        amountFrSizes++;
+                    else
+                        leftOver -= column.width;
+                });
+            }
+            else {
+                this.gridInformation.cells.forEach((row, i) => {
+                    if (row[0].initHeightUnit == "fr")
+                        amountFrSizes++;
+                    else
+                        leftOver -= row[0].height;
+                });
+            }
+            let frRatio = leftOver / amountFrSizes;
+            if (typeof cssValue == "number") {
+                //expected Value in Pixel
+                return (cssValue / frRatio) + "fr";
+            }
+            else {
+                return (convertCssUnitToPixel(cssValue, target, percentTarget) / frRatio) + "fr";
+            }
+        }
+        else
+            return convertCssUnit(cssValue, target, percentTarget, unit);
+    }
+}

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

@@ -0,0 +1,10 @@
+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 class EditGridExtensionProvider 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/EditGridExtensionProvider.js

@@ -0,0 +1,22 @@
+import { EditGridExtension } from './EditGridExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+import { gridExtensionShowOverlayOptionName } from './DisplayGridExtensionProvider.js';
+export class EditGridExtensionProvider {
+    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 EditGridExtension(extensionManager, designerCanvas, designItem);
+    }
+    style = css `
+    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
+    .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; }
+  `;
+}