@node-projects/web-component-designer 0.0.130 → 0.0.131

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -33,6 +33,10 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
     getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
+    getNormalizedElementCoordinatesAndRealSizes(element: Element): IRect & {
+        realWidth: number;
+        realHeight: number;
+    };
     captureActiveTool(tool: ITool): any;
     releaseActiveTool(): any;
     getDesignSurfaceDimensions(): ISize;

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -100,6 +100,10 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
      */
     getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
+    getNormalizedElementCoordinatesAndRealSizes(element: Element): IRect & {
+        realWidth: number;
+        realHeight: number;
+    };
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     elementFromPoint(x: number, y: number): Element;
     elementsFromPoint(x: number, y: number): Element[];

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

@@ -736,6 +736,17 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         const targetRect = element.getBoundingClientRect();
         return { x: (targetRect.x - this.containerBoundingRect.x) / this.scaleFactor, y: (targetRect.y - this.containerBoundingRect.y) / this.scaleFactor, width: targetRect.width / this.scaleFactor, height: targetRect.height / this.scaleFactor };
     }
+    getNormalizedElementCoordinatesAndRealSizes(element) {
+        let ret = this.getNormalizedElementCoordinates(element);
+        const st = getComputedStyle(element);
+        let realWidth = ret.width;
+        let realHeight = ret.height;
+        if (st.boxSizing != 'border-box') {
+            realWidth = realWidth - (parseFloat(st.borderLeft) + parseFloat(st.paddingLeft) + parseFloat(st.paddingRight) + parseFloat(st.borderRight));
+            realHeight = realHeight - (parseFloat(st.borderTop) + parseFloat(st.paddingTop) + parseFloat(st.paddingBottom) + parseFloat(st.borderBottom));
+        }
+        return { ...ret, realWidth, realHeight };
+    }
     getNormalizedOffsetInElement(event, element) {
         const normEvt = this.getNormalizedEventCoordinates(event);
         const normEl = this.getNormalizedElementCoordinates(element);

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

@@ -72,12 +72,12 @@ export class ResizeExtension extends AbstractExtension {
                 this._initialPoint = currentPoint;
                 this._initialSizes = [];
                 this._actionModeStarted = actionMode;
-                let rect = this.extendedItem.element.getBoundingClientRect();
-                this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                let rect = this.designerCanvas.getNormalizedElementCoordinatesAndRealSizes(this.extendedItem.element);
+                this._initialSizes.push({ width: rect.realWidth, height: rect.realHeight });
                 if (this.resizeAllSelected) {
                     for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                        rect = designItem.element.getBoundingClientRect();
-                        this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                        rect = this.designerCanvas.getNormalizedElementCoordinatesAndRealSizes(designItem.element);
+                        this._initialSizes.push({ width: rect.realWidth, height: rect.realHeight });
                     }
                 }
                 if (this.designerCanvas.alignOnSnap)

package/package.json

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