@node-projects/web-component-designer 0.0.198 → 0.0.200

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

@@ -1,346 +1,71 @@
 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;
+export class EditGridColumnRowSizesExtension extends AbstractExtension {
     gridInformation;
-    defaultHeaderSize = 20;
-    defaultPlusSize = this.defaultHeaderSize * 2 / 3;
-    defaultDistanceToBox = 5;
-    defaultDistanceBetweenHeaders = 10;
-    defaultSizeOfNewRowOrColumn = "50px";
+    _resizers = [];
+    _initalPos;
+    _initialSizes;
     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();
+    extend(event) {
+        this.refresh(event);
     }
-    _initSVGArrays() {
-        this._removeAllOverlays();
+    refresh(event) {
         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);
+        this.gridInformation.gaps.forEach((gap, i) => {
+            if (gap.width < 3) {
+                gap.width = 3;
+                gap.x--;
+            }
+            if (gap.height < 3) {
+                gap.height = 3;
+                gap.y--;
+            }
+            let rect = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-resizer-' + gap.type, this._resizers[i], OverlayLayer.Normal);
+            if (!this._resizers[i]) {
+                rect.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, rect, gap, i));
+                rect.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, rect, gap, i));
+                rect.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, rect, gap, i));
+            }
         });
-        return { x: rX, xUnit: rXUnit, y: rY, yUnit: rYUnit };
     }
-    _pointerActionTypeResize(event, circle, gapColumn, gapRow) {
+    _pointerActionTypeResize(event, rect, gap, index) {
         event.stopPropagation();
+        const templatePropertyName = gap.type == 'h' ? 'gridTemplateRows' : 'gridTemplateColumns';
+        const axisPropertyName = gap.type == 'h' ? 'Y' : 'X';
+        const pos = event['client' + axisPropertyName];
         switch (event.type) {
             case EventNames.PointerDown:
-                circle.setPointerCapture(event.pointerId);
-                this._initialPoint = { x: event.clientX, y: event.clientY };
-                this._initialSizes = this._getInitialSizes();
+                rect.setPointerCapture(event.pointerId);
+                this._initalPos = pos;
+                this._initialSizes = getComputedStyle(this.extendedItem.element)[templatePropertyName];
                 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");
+                if (this._initialSizes) {
+                    const diff = this._initalPos - pos;
+                    let parts = this._initialSizes.split(' ');
+                    parts[index] = (parseFloat(parts[index]) - diff) + 'px';
+                    parts[index + 1] = (parseFloat(parts[index + 1]) + diff) + 'px';
+                    this.extendedItem.element.style[templatePropertyName] = parts.join(' ');
                     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;
+                rect.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._initalPos = 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);
+    dispose() {
+        this._removeAllOverlays();
     }
 }

package/dist/elements/widgets/designerView/extensions/grid/EditGridExtensionProvider copy.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 copy.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; }
+  `;
+}

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

@@ -3,7 +3,7 @@ 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 {
+export declare class EditGridColumnRowSizesExtensionProvider 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

@@ -1,7 +1,7 @@
-import { EditGridExtension } from './EditGridExtension.js';
+import { EditGridColumnRowSizesExtension } from './EditGridExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 import { gridExtensionShowOverlayOptionName } from './DisplayGridExtensionProvider.js';
-export class EditGridExtensionProvider {
+export class EditGridColumnRowSizesExtensionProvider {
     shouldExtend(extensionManager, designerCanvas, designItem) {
         const display = getComputedStyle(designItem.element).display;
         if (display == 'grid' || display == 'inline-grid')
@@ -9,14 +9,10 @@ export class EditGridExtensionProvider {
         return false;
     }
     getExtension(extensionManager, designerCanvas, designItem) {
-        return new EditGridExtension(extensionManager, designerCanvas, designItem);
+        return new EditGridColumnRowSizesExtension(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; }
+    .svg-grid-resizer-v { fill: transparent; cursor: ew-resize; pointer-events: all; }
+    .svg-grid-resizer-h { fill: transparent; cursor: ns-resize; pointer-events: all; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/grid/NewEditGridExtensionProvider.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/NewEditGridExtensionProvider.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; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/grid/OldEditGridExtension.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;
+}