fix: resolved bug with top/left being sticky when resizing from l/t side

GrapesJS · Mar 31, 2023 · 050a635 · 050a635
1 parent 802b3c9
commit 050a635
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/commands/view/SelectComponent.ts b/src/commands/view/SelectComponent.ts
@@ -455,6 +455,9 @@ export default {
             style[keyHeight] = autoHeight ? 'auto' : `${rect.h}${unitHeight}`;
           }
 
+          style.top = rect.t + unitHeight;
+          style.left = rect.l + unitWidth;
+
           modelToStyle.addStyle({ ...style, en }, { avoidStore: !store });
           const updateEvent = 'update:component:style';
           const eventToListen = `${updateEvent}:${keyHeight} ${updateEvent}:${keyWidth}`;

diff --git a/src/utils/Resizer.ts b/src/utils/Resizer.ts
@@ -571,6 +571,8 @@ export default class Resizer {
       const elStyle = el.style as Record<string, any>;
       elStyle[keyWidth!] = rect.w + unitWidth!;
       elStyle[keyHeight!] = rect.h + unitHeight!;
+      elStyle.top = rect.t + unitHeight!;
+      elStyle.left = rect.l + unitWidth!;
     }
 
     this.updateContainer();
@@ -663,9 +665,9 @@ export default class Resizer {
     const unitHeight = this.opts.unitHeight;
     const startW = unitWidth === '%' ? (startDim.w / 100) * parentW : startDim.w;
     const startH = unitHeight === '%' ? (startDim.h / 100) * parentH : startDim.h;
-    var box = {
-      t: 0,
-      l: 0,
+    var box: RectDim = {
+      t: startDim.t,
+      l: startDim.l,
       w: startW,
       h: startH,
     };
@@ -722,10 +724,10 @@ export default class Resizer {
     }
 
     if (~attr.indexOf('l')) {
-      box.l = startDim.w - box.w;
+      box.l += startDim.w - box.w;
     }
     if (~attr.indexOf('t')) {
-      box.t = startDim.h - box.h;
+      box.t += startDim.h - box.h;
     }
 
     return box;