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

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

@@ -12,6 +12,6 @@ export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
     extend(event?: Event): void;
     refresh(event?: Event): void;
     _pointerActionTypeResize(event: PointerEvent, rect: SVGRectElement, gap: ReturnType<typeof CalculateGridInformation>['gaps'][0]): void;
-    _convertCssUnitIncludingFr(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string, units: string[]): string;
+    _convertCssUnits(pixelSizes: number[], targetUnits: string[], target: HTMLElement, percentTarget: 'width' | 'height'): string[];
     dispose(): void;
 }

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

@@ -68,42 +68,38 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
                     units = initialParts.map(x => getCssUnit(x));
                 }
                 this.extendedItem.element.style[templatePropertyName] = '';
-                const unit1 = units[index];
-                initialParts[index] = this._convertCssUnitIncludingFr(parseFloat(initialParts[index]) - diff, this.extendedItem.element, sizeType, unit1, units);
-                const unit2 = units[index + 1];
-                initialParts[index + 1] = this._convertCssUnitIncludingFr(parseFloat(initialParts[index + 1]) + diff, this.extendedItem.element, sizeType, unit2, units);
-                this.extendedItem.updateStyleInSheetOrLocal(templatePropertyName, initialParts.join(' '));
+                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;
         }
     }
-    _convertCssUnitIncludingFr(cssValue, target, percentTarget, unit, units) {
-        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) ?? 0;
-            let containerSizeWithoutGaps = containerSize - gapSize * amountGaps;
-            let amountFrSizes = 0;
-            let leftOver = containerSizeWithoutGaps;
-            this.gridInformation.cells[0].forEach((column, i) => {
-                if (units[i] == "fr")
-                    amountFrSizes++;
-                else
-                    leftOver -= column[percentTarget];
-            });
-            let frRatio = leftOver / amountFrSizes;
-            if (typeof cssValue == "number") {
-                //expected Value in Pixel
-                return (cssValue / frRatio).toFixed(2) + "fr";
+    _convertCssUnits(pixelSizes, targetUnits, target, percentTarget) {
+        let bounding = target.getBoundingClientRect();
+        let containerSize = bounding[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) ?? 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 {
-                return (convertCssUnitToPixel(cssValue, target, percentTarget) / frRatio).toFixed(2) + "fr";
+                result.push((pixelSizes[i] / sizeForFrs).toFixed(2) + 'fr');
             }
         }
-        else
-            return convertCssUnit(cssValue, target, percentTarget, unit);
+        return result;
     }
     dispose() {
         this._removeAllOverlays();

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.200",
+  "version": "0.0.202",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",