@node-projects/web-component-designer 0.0.170 → 0.0.171

package/dist/elements/services/stylesheetService/IStylesheetService.d.ts

@@ -1,6 +1,5 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { IDesignItem } from "../../item/IDesignItem.js";
-import { IProperty } from "../propertiesService/IProperty.js";
 export interface IStyleRule {
     selector: string;
     declarations: IStyleDeclaration[];
@@ -17,12 +16,13 @@ export interface IStylesheet {
     name: string;
 }
 export interface IStylesheetService {
-    setStylesheets(stylesheets: IStylesheet[]): any;
+    setStylesheets(stylesheets: IStylesheet[]): void;
     getStylesheets(): IStylesheet[];
     getAppliedRules(designItem: IDesignItem): IStyleRule[];
-    getDeclarations(designItem: IDesignItem, property: IProperty): IStyleDeclaration[];
-    updateDeclarationWithProperty(designItem: IDesignItem, property: IProperty, value: string, important: boolean): boolean;
+    getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
     updateDeclarationWithDeclaration(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
+    insertDeclarationIntoRule(rule: IStyleRule, declaration: IStyleDeclaration, important: boolean): boolean;
+    removeDeclarationFromRule(rule: IStyleRule, declaration: IStyleDeclaration): boolean;
     stylesheetChanged: TypedEvent<{
         stylesheet: IStylesheet;
     }>;

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

@@ -5,16 +5,47 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class GridExtension extends AbstractExtension {
     private _initialPoint;
     private _initialSizes;
-    private _rects;
+    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;
-    _drawResizeCircles(gap: any, oldCircle?: SVGCircleElement): SVGCircleElement;
+    _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: any, diff: any, gapIndex: any, percentTarget: 'width' | 'heigth'): string;
-    _getCssUnit(cssValue: string): string;
+    _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/GridExtension.js

@@ -6,43 +6,90 @@ import { OverlayLayer } from "./OverlayLayer.js";
 export class GridExtension extends AbstractExtension {
     _initialPoint;
     _initialSizes;
-    _rects;
+    _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() {
-        let gridInformation = CalculateGridInformation(this.extendedItem);
-        this._rects = new Array(gridInformation.cells.length);
-        gridInformation.cells.forEach((cellRow, i) => {
-            this._rects[i] = new Array(cellRow.length);
-        });
-        this._gaps = new Array(gridInformation.gaps.length);
-        this._resizeCircles = new Array(gridInformation.gaps.length);
+        this._initSVGArrays();
         this.refresh();
     }
     refresh() {
-        let gridInformation = CalculateGridInformation(this.extendedItem);
-        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._drawResizeCircles(gap, this._resizeCircles[i]);
-        });
-        gridInformation.cells.forEach((cellRow, i) => {
-            cellRow.forEach((cell, j) => {
-                this._rects[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._rects[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");
-                }
+        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();
     }
-    _drawResizeCircles(gap, oldCircle) {
+    _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";
@@ -53,107 +100,247 @@ export class GridExtension extends AbstractExtension {
         }
         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 = { x: this.extendedItem.element.style.gridTemplateColumns.split(' '), y: this.extendedItem.element.style.gridTemplateRows.split(' ') };
+                this._initialSizes = this._getInitialSizes();
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
                     let elementStyle = this.extendedItem.element.style;
                     this.extendedItem.element.getBoundingClientRect;
-                    switch (circle.style.cursor) {
-                        case "ew-resize":
-                            elementStyle.gridTemplateColumns = this._calculateNewSize(this._initialSizes.x, (event.clientX - this._initialPoint.x) / this.designerCanvas.zoomFactor, gapColumn, "width");
-                            break;
-                        case "ns-resize":
-                            elementStyle.gridTemplateRows = this._calculateNewSize(this._initialSizes.y, (event.clientY - this._initialPoint.y) / this.designerCanvas.zoomFactor, gapRow, "heigth");
-                            break;
-                    }
+                    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;
-                if (this.extendedItem.getStyle("grid-template-columns") != this.extendedItem.element.style.gridTemplateColumns)
-                    this.extendedItem.setStyle("grid-template-columns", this.extendedItem.element.style.gridTemplateColumns);
-                if (this.extendedItem.getStyle("grid-template-rows") != this.extendedItem.element.style.gridTemplateRows)
-                    this.extendedItem.setStyle("grid-template-rows", this.extendedItem.element.style.gridTemplateRows);
+                this.refresh();
                 break;
         }
     }
-    _calculateNewSize(iSizes, diff, gapIndex, percentTarget) {
+    _calculateNewSize(iSizes, iUnits, diff, gapIndex, percentTarget, pointerUp = false) {
         let newSizes = [];
         let edited = [];
         for (let i = 0; i < iSizes.length; i++) {
-            if (i + 1 == gapIndex || i == gapIndex) {
-                if (this._getCssUnit(iSizes[i]) == "fr") {
-                    newSizes.push(iSizes[i]);
-                    edited.push(true);
-                }
-                else {
-                    let convertedDiff = parseFloat(convertCssUnit(diff, this.extendedItem.element, percentTarget, this._getCssUnit(iSizes[i])).toString());
-                    newSizes.push((i + 1 == gapIndex ? parseFloat(iSizes[i]) + convertedDiff : i == gapIndex ? parseFloat(iSizes[i]) - convertedDiff : null) + this._getCssUnit(iSizes[i]));
-                    edited.push(true);
+            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;
                 }
             }
-            else {
-                newSizes.push(iSizes[i]);
-                edited.push(false);
+            if (newSizes[i] < this.minPixelSize) {
+                newSizes[index] = newSizes[i] + newSizes[index] - this.minPixelSize;
+                newSizes[i] = this.minPixelSize;
+                break;
             }
         }
-        for (let i = 0; i < newSizes.length; i++) {
-            if (this._getCssUnit(newSizes[i]) == "fr") {
-                let editedIndex;
-                if (edited[i + 1])
-                    editedIndex = i + 1;
-                else if (edited[i - 1])
-                    editedIndex = i - 1;
-                else
-                    continue;
-                //check if newSize smaller than minimum
-                if (convertCssUnitToPixel(newSizes[editedIndex], this.extendedItem.element, percentTarget) < this.minPixelSize) {
-                    newSizes[editedIndex] = convertCssUnit(this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(newSizes[editedIndex]));
-                }
-                //check if fr is smaller than 10px
-                let totalSize = parseFloat(percentTarget == "width" ? this.extendedItem.element.style.width : this.extendedItem.element.style.height);
-                let totalGapSize = percentTarget == "width" ?
-                    parseFloat(this.extendedItem.element.style.columnGap) * this.extendedItem.element.style.gridTemplateColumns.split(' ').length - 1 :
-                    parseFloat(this.extendedItem.element.style.rowGap) * this.extendedItem.element.style.gridTemplateColumns.split(' ').length - 1;
-                let totalSizeExceptFr = 0;
-                newSizes.forEach(newSize => {
-                    if (this._getCssUnit(newSize) != "fr")
-                        totalSizeExceptFr += convertCssUnitToPixel(newSize, this.extendedItem.element, percentTarget);
+        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 == "width" ? 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;
                 });
-                let totalSizeExceptEdited = 0;
-                newSizes.forEach((newSize, k) => {
-                    if (!edited[k])
-                        totalSizeExceptEdited += convertCssUnitToPixel(newSize, this.extendedItem.element, percentTarget);
+            }
+            else {
+                this.gridInformation.cells.forEach((row, i) => {
+                    if (row[0].initHeightUnit == "fr")
+                        amountFrSizes++;
+                    else
+                        leftOver -= row[0].height;
                 });
-                if (totalSize - totalSizeExceptFr - totalGapSize < this.minPixelSize) {
-                    newSizes[editedIndex] = convertCssUnit(totalSize - totalSizeExceptEdited - totalGapSize - this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(iSizes[editedIndex]));
-                }
+            }
+            let frRatio = leftOver / amountFrSizes;
+            if (typeof cssValue == "number") {
+                //expected Value in Pixel
+                return (cssValue / frRatio) + "fr";
             }
             else {
-                if (convertCssUnitToPixel(newSizes[i], this.extendedItem.element, percentTarget) < this.minPixelSize) {
-                    let index = edited[i + 1] ? i + 1 : edited[i - 1] ? i - 1 : null;
-                    if (this._getCssUnit(newSizes[index]) != "fr")
-                        newSizes[index] = convertCssUnit(convertCssUnitToPixel(newSizes[i], this.extendedItem.element, percentTarget) + convertCssUnitToPixel(newSizes[index], this.extendedItem.element, percentTarget) - this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(newSizes[index]));
-                    newSizes[i] = convertCssUnit(this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(newSizes[i]));
-                    break;
-                }
+                return (convertCssUnitToPixel(cssValue, target, percentTarget) / frRatio) + "fr";
             }
         }
-        let retVal = "";
-        newSizes.forEach(newSize => retVal += newSize + ' ');
-        return retVal;
-    }
-    _getCssUnit(cssValue) {
-        return cssValue.substring(cssValue.length - 2, cssValue.length) == "fr" ? "fr" : getCssUnit(cssValue);
+        else
+            return convertCssUnit(cssValue, target, percentTarget, unit);
     }
 }

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

@@ -15,6 +15,8 @@ export class GridExtensionProvider {
     .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-resizer { fill: white; stroke: #3899ec; }
+    .svg-grid-header { fill: #ff944722; stroke: orange; }
+    .svg-grid-plus-sign { stroke: black; }
   `;
 }

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

@@ -67,7 +67,7 @@ export class TransformOriginExtension extends AbstractExtension {
                             let newXs = convertCssUnit(newX, this.extendedItem.element, 'width', getCssUnit(oldSplit[0]));
                             let newYs = convertCssUnit(newX, this.extendedItem.element, 'width', getCssUnit(oldSplit[0]));
                             if (oldSplit.length > 1) {
-                                newYs = convertCssUnit(newY, this.extendedItem.element, 'heigth', getCssUnit(oldSplit[1]));
+                                newYs = convertCssUnit(newY, this.extendedItem.element, 'height', getCssUnit(oldSplit[1]));
                             }
                             this.extendedItem.setStyle('transform-origin', newXs + ' ' + newYs);
                         }

package/dist/index.d.ts

@@ -102,6 +102,7 @@ export type { ISelectionService } from "./elements/services/selectionService/ISe
 export * from "./elements/services/selectionService/SelectionService.js";
 export type { IStyleRule, IStyleDeclaration, IStylesheet, IStylesheetService } from "./elements/services/stylesheetService/IStylesheetService.js";
 export * from "./elements/services/stylesheetService/CssTreeStylesheetService.js";
+export * from "./elements/services/stylesheetService/CssToolsStylesheetService.js";
 export * from "./elements/services/stylesheetService/SpecificityCalculator.js";
 export * from "./elements/services/undoService/ChangeGroup.js";
 export type { ITransactionItem } from "./elements/services/undoService/ITransactionItem.js";

package/dist/index.js

@@ -69,6 +69,7 @@ export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/propertiesService/PropertyTabsService.js";
 export * from "./elements/services/selectionService/SelectionService.js";
 export * from "./elements/services/stylesheetService/CssTreeStylesheetService.js";
+export * from "./elements/services/stylesheetService/CssToolsStylesheetService.js";
 export * from "./elements/services/stylesheetService/SpecificityCalculator.js";
 export * from "./elements/services/undoService/ChangeGroup.js";
 export * from "./elements/services/undoService/UndoService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.170",
+  "version": "0.0.171",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -18,6 +18,7 @@
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
+    "@adobe/css-tools": "^4.0.2",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.5.1",
     "@papyrs/stylo": "^0.0.42",