@node-projects/web-component-designer 0.0.216 → 0.0.217

package/dist/elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js

@@ -1,27 +1,27 @@
-const offset = 10;
-export class ZoomToElementContextMenu {
-    shouldProvideContextmenu(event, designerCanvas, designItem, initiator) {
-        return true;
-    }
-    provideContextMenuItems(event, designerCanvas, designItem) {
-        return [
-            {
-                title: 'zoom to', action: () => {
-                    const coord = designerCanvas.getNormalizedElementCoordinates(designItem.element);
-                    const startPoint = { x: coord.x - offset, y: coord.y - offset };
-                    const endPoint = { x: coord.x + coord.width + offset, y: coord.y + coord.height + offset };
-                    let rect = {
-                        x: startPoint.x < endPoint.x ? startPoint.x : endPoint.x,
-                        y: startPoint.y < endPoint.y ? startPoint.y : endPoint.y,
-                        width: Math.abs(startPoint.x - endPoint.x),
-                        height: Math.abs(startPoint.y - endPoint.y),
-                    };
-                    let zFactorWidth = designerCanvas.outerRect.width / rect.width;
-                    let zFactorHeight = designerCanvas.outerRect.height / rect.height;
-                    let zoomFactor = zFactorWidth >= zFactorHeight ? zFactorHeight : zFactorWidth;
-                    designerCanvas.zoomPoint({ x: coord.x + coord.width / 2, y: coord.y + coord.height / 2 }, zoomFactor);
-                }
-            },
-        ];
-    }
-}
+const offset = 10;
+export class ZoomToElementContextMenu {
+    shouldProvideContextmenu(event, designerCanvas, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [
+            {
+                title: 'zoom to', action: () => {
+                    const coord = designerCanvas.getNormalizedElementCoordinates(designItem.element);
+                    const startPoint = { x: coord.x - offset, y: coord.y - offset };
+                    const endPoint = { x: coord.x + coord.width + offset, y: coord.y + coord.height + offset };
+                    let rect = {
+                        x: startPoint.x < endPoint.x ? startPoint.x : endPoint.x,
+                        y: startPoint.y < endPoint.y ? startPoint.y : endPoint.y,
+                        width: Math.abs(startPoint.x - endPoint.x),
+                        height: Math.abs(startPoint.y - endPoint.y),
+                    };
+                    let zFactorWidth = designerCanvas.outerRect.width / rect.width;
+                    let zFactorHeight = designerCanvas.outerRect.height / rect.height;
+                    let zoomFactor = zFactorWidth >= zFactorHeight ? zFactorHeight : zFactorWidth;
+                    designerCanvas.zoomPoint({ x: coord.x + coord.width / 2, y: coord.y + coord.height / 2 }, zoomFactor);
+                }
+            },
+        ];
+    }
+}

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

@@ -1,15 +1,15 @@
-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 _texts;
-    private _gaps;
-    private gridInformation;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(event?: Event): void;
-    refresh(event?: Event): void;
-    dispose(): void;
-    _initSVGArrays(): void;
-}
+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 _texts;
+    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

@@ -1,56 +1,56 @@
-import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
-import { AbstractExtension } from '../AbstractExtension.js';
-import { OverlayLayer } from "../OverlayLayer.js";
-export class DisplayGridExtension extends AbstractExtension {
-    _cells;
-    _texts;
-    _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.Normal);
-            });
-            //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) {
-                        this._texts[i][j] = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', this._texts[i][j], OverlayLayer.Background);
-                        this._texts[i][j].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._texts = new Array(this.gridInformation.cells.length);
-        this.gridInformation.cells.forEach((row, i) => this._texts[i] = new Array(row.length));
-        this._gaps = new Array(this.gridInformation.gaps.length);
-    }
-}
+import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { AbstractExtension } from '../AbstractExtension.js';
+import { OverlayLayer } from "../OverlayLayer.js";
+export class DisplayGridExtension extends AbstractExtension {
+    _cells;
+    _texts;
+    _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.Normal);
+            });
+            //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) {
+                        this._texts[i][j] = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', this._texts[i][j], OverlayLayer.Background);
+                        this._texts[i][j].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._texts = new Array(this.gridInformation.cells.length);
+        this.gridInformation.cells.forEach((row, i) => this._texts[i] = new Array(row.length));
+        this._gaps = new Array(this.gridInformation.gaps.length);
+    }
+}

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

@@ -1,11 +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;
-}
+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

@@ -1,16 +1,16 @@
-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);
-    }
+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; }
@@ -18,5 +18,5 @@ export class DisplayGridExtensionProvider {
     .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
     .svg-grid-header { fill: #ff944722; stroke: orange; }
     .svg-grid-plus-sign { stroke: black; }
-  `;
-}
+  `;
+}

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

@@ -1,17 +1,17 @@
-import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from '../AbstractExtension.js';
-import { IExtensionManager } from '../IExtensionManger.js';
-export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
-    gridInformation: ReturnType<typeof CalculateGridInformation>;
-    private _resizers;
-    private _initalPos;
-    private _initialSizes;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(event?: Event): void;
-    refresh(event?: Event): void;
-    private _pointerActionTypeResize;
-    private _convertCssUnits;
-    dispose(): void;
-}
+import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
+    gridInformation: ReturnType<typeof CalculateGridInformation>;
+    private _resizers;
+    private _initalPos;
+    private _initialSizes;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(event?: Event): void;
+    refresh(event?: Event): void;
+    private _pointerActionTypeResize;
+    private _convertCssUnits;
+    dispose(): void;
+}

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

@@ -1,111 +1,111 @@
-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 EditGridColumnRowSizesExtension extends AbstractExtension {
-    gridInformation;
-    _resizers = [];
-    _initalPos;
-    _initialSizes;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend(event) {
-        this.refresh(event);
-    }
-    refresh(event) {
-        this.gridInformation = CalculateGridInformation(this.extendedItem);
-        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]) {
-                this._resizers[i] = rect;
-                rect.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, rect, gap));
-                rect.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, rect, gap));
-                rect.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, rect, gap));
-            }
-        });
-    }
-    _pointerActionTypeResize(event, rect, gap) {
-        event.stopPropagation();
-        const templatePropertyName = gap.type == 'h' ? 'gridTemplateRows' : 'gridTemplateColumns';
-        const axisPropertyName = gap.type == 'h' ? 'Y' : 'X';
-        const index = (gap.type == 'h' ? gap.row : gap.column) - 1;
-        const sizeType = gap.type == 'h' ? 'height' : 'width';
-        const pos = event['client' + axisPropertyName];
-        switch (event.type) {
-            case EventNames.PointerDown:
-                rect.setPointerCapture(event.pointerId);
-                this._initalPos = pos;
-                this._initialSizes = getComputedStyle(this.extendedItem.element)[templatePropertyName];
-                break;
-            case EventNames.PointerMove:
-                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.extensionManager.refreshExtensions([this.extendedItem], null, event);
-                }
-                break;
-            case EventNames.PointerUp:
-                rect.releasePointerCapture(event.pointerId);
-                const diff = this._initalPos - pos;
-                const realStyle = this.extendedItem.getStyleFromSheetOrLocalOrComputed(templatePropertyName);
-                const initialParts = this._initialSizes.split(' ');
-                const parts = realStyle.split(' ');
-                let units = parts.map(x => getCssUnit(x));
-                if (parts.length != initialParts.length) {
-                    units = initialParts.map(x => getCssUnit(x));
-                }
-                this.extendedItem.element.style[templatePropertyName] = '';
-                const targetPixelSizes = initialParts.map(x => parseFloat(x));
-                targetPixelSizes[index] -= diff;
-                targetPixelSizes[index + 1] += diff;
-                const newSizes = this._convertCssUnits(targetPixelSizes, units, this.extendedItem.element, sizeType);
-                this.extendedItem.updateStyleInSheetOrLocal(templatePropertyName, newSizes.join(' '));
-                this._initalPos = null;
-                this._initialSizes = null;
-                this.extensionManager.refreshExtensions([this.extendedItem]);
-                break;
-        }
-    }
-    _convertCssUnits(pixelSizes, targetUnits, target, percentTarget) {
-        let cp = getComputedStyle(target);
-        let bounding = target.getBoundingClientRect();
-        let containerSize = bounding[percentTarget];
-        let amountGaps = percentTarget == "height" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
-        let gapValue = percentTarget == "width" ? cp.columnGap : cp.rowGap;
-        if (gapValue == "normal")
-            gapValue = '0px';
-        let gapSize = convertCssUnitToPixel(gapValue, target, percentTarget) ?? 0;
-        let containerSizeWithoutGaps = containerSize - gapSize * amountGaps;
-        let sizeForFrs = containerSizeWithoutGaps;
-        for (let i = 0; i < pixelSizes.length; i++) {
-            if (targetUnits[i] != 'fr')
-                sizeForFrs -= pixelSizes[i];
-        }
-        let result = [];
-        for (let i = 0; i < pixelSizes.length; i++) {
-            if (targetUnits[i] != 'fr') {
-                result.push(convertCssUnit(pixelSizes[i], target, percentTarget, targetUnits[i]));
-            }
-            else {
-                result.push(((pixelSizes[i] / sizeForFrs) * 10).toFixed(2) + 'fr');
-            }
-        }
-        return result;
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+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 EditGridColumnRowSizesExtension extends AbstractExtension {
+    gridInformation;
+    _resizers = [];
+    _initalPos;
+    _initialSizes;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(event) {
+        this.refresh(event);
+    }
+    refresh(event) {
+        this.gridInformation = CalculateGridInformation(this.extendedItem);
+        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]) {
+                this._resizers[i] = rect;
+                rect.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, rect, gap));
+                rect.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, rect, gap));
+                rect.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, rect, gap));
+            }
+        });
+    }
+    _pointerActionTypeResize(event, rect, gap) {
+        event.stopPropagation();
+        const templatePropertyName = gap.type == 'h' ? 'gridTemplateRows' : 'gridTemplateColumns';
+        const axisPropertyName = gap.type == 'h' ? 'Y' : 'X';
+        const index = (gap.type == 'h' ? gap.row : gap.column) - 1;
+        const sizeType = gap.type == 'h' ? 'height' : 'width';
+        const pos = event['client' + axisPropertyName];
+        switch (event.type) {
+            case EventNames.PointerDown:
+                rect.setPointerCapture(event.pointerId);
+                this._initalPos = pos;
+                this._initialSizes = getComputedStyle(this.extendedItem.element)[templatePropertyName];
+                break;
+            case EventNames.PointerMove:
+                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.extensionManager.refreshExtensions([this.extendedItem], null, event);
+                }
+                break;
+            case EventNames.PointerUp:
+                rect.releasePointerCapture(event.pointerId);
+                const diff = this._initalPos - pos;
+                const realStyle = this.extendedItem.getStyleFromSheetOrLocalOrComputed(templatePropertyName);
+                const initialParts = this._initialSizes.split(' ');
+                const parts = realStyle.split(' ');
+                let units = parts.map(x => getCssUnit(x));
+                if (parts.length != initialParts.length) {
+                    units = initialParts.map(x => getCssUnit(x));
+                }
+                this.extendedItem.element.style[templatePropertyName] = '';
+                const targetPixelSizes = initialParts.map(x => parseFloat(x));
+                targetPixelSizes[index] -= diff;
+                targetPixelSizes[index + 1] += diff;
+                const newSizes = this._convertCssUnits(targetPixelSizes, units, this.extendedItem.element, sizeType);
+                this.extendedItem.updateStyleInSheetOrLocal(templatePropertyName, newSizes.join(' '));
+                this._initalPos = null;
+                this._initialSizes = null;
+                this.extensionManager.refreshExtensions([this.extendedItem]);
+                break;
+        }
+    }
+    _convertCssUnits(pixelSizes, targetUnits, target, percentTarget) {
+        let cp = getComputedStyle(target);
+        let bounding = target.getBoundingClientRect();
+        let containerSize = bounding[percentTarget];
+        let amountGaps = percentTarget == "height" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
+        let gapValue = percentTarget == "width" ? cp.columnGap : cp.rowGap;
+        if (gapValue == "normal")
+            gapValue = '0px';
+        let gapSize = convertCssUnitToPixel(gapValue, target, percentTarget) ?? 0;
+        let containerSizeWithoutGaps = containerSize - gapSize * amountGaps;
+        let sizeForFrs = containerSizeWithoutGaps;
+        for (let i = 0; i < pixelSizes.length; i++) {
+            if (targetUnits[i] != 'fr')
+                sizeForFrs -= pixelSizes[i];
+        }
+        let result = [];
+        for (let i = 0; i < pixelSizes.length; i++) {
+            if (targetUnits[i] != 'fr') {
+                result.push(convertCssUnit(pixelSizes[i], target, percentTarget, targetUnits[i]));
+            }
+            else {
+                result.push(((pixelSizes[i] / sizeForFrs) * 10).toFixed(2) + 'fr');
+            }
+        }
+        return result;
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,10 +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 EditGridColumnRowSizesExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+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 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/EditGridColumnRowSizesExtensionProvider.js

@@ -1,20 +1,20 @@
-import { EditGridColumnRowSizesExtension } from './EditGridColumnRowSizesExtension.js';
-import { css } from "@node-projects/base-custom-webcomponent";
-import { gridExtensionShowOverlayOptionName } from './DisplayGridExtensionProvider.js';
-export class EditGridColumnRowSizesExtensionProvider {
-    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 EditGridColumnRowSizesExtension(extensionManager, designerCanvas, designItem);
-    }
+import { EditGridColumnRowSizesExtension } from './EditGridColumnRowSizesExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+import { gridExtensionShowOverlayOptionName } from './DisplayGridExtensionProvider.js';
+export class EditGridColumnRowSizesExtensionProvider {
+    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 EditGridColumnRowSizesExtension(extensionManager, designerCanvas, designItem);
+    }
     style = css `
     .svg-grid-resizer-v { fill: transparent; cursor: ew-resize; pointer-events: all; }
     .svg-grid-resizer-v:hover { fill: #ff7f5052; }
     .svg-grid-resizer-h { fill: transparent; cursor: ns-resize; pointer-events: all; }
     .svg-grid-resizer-h:hover { fill: #ff7f5052; }
-  `;
-}
+  `;
+}

package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.d.ts

@@ -1,13 +1,13 @@
-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 ApplyFirstMachingExtensionProvider implements IDesignerExtensionProvider {
-    private extensions;
-    private extIndex;
-    style: CSSStyleSheet[];
-    constructor(...extensions: IDesignerExtensionProvider[]);
-    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-}
+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 ApplyFirstMachingExtensionProvider implements IDesignerExtensionProvider {
+    private extensions;
+    private extIndex;
+    style: CSSStyleSheet[];
+    constructor(...extensions: IDesignerExtensionProvider[]);
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}