Merge branch 'PaulRill00-fix-absolute-position-on-resize' into dev

src/commands/view/SelectComponent.ts

@@ -443,7 +443,6 @@ export default {
           const onlyHeight = ['tc', 'bc'].indexOf(selectedHandler) >= 0;
           const onlyWidth = ['cl', 'cr'].indexOf(selectedHandler) >= 0;
           const style: any = {};
-          const en = !store ? 1 : ''; // this will trigger the final change
 
           if (!onlyHeight) {
             const bodyw = canvas.getBody().offsetWidth;
@@ -455,7 +454,19 @@ export default {
             style[keyHeight] = autoHeight ? 'auto' : `${rect.h}${unitHeight}`;
           }
 
-          modelToStyle.addStyle({ ...style, en }, { avoidStore: !store });
+          if (em.getDragMode(model)) {
+            style.top = `${rect.t}${unitHeight}`;
+            style.left = `${rect.l}${unitWidth}`;
+          }
+
+          modelToStyle.addStyle(
+            {
+              ...style,
+              // value for the partial update
+              __p: !store ? 1 : '',
+            },
+            { avoidStore: !store }
+          );
           const updateEvent = 'update:component:style';
           const eventToListen = `${updateEvent}:${keyHeight} ${updateEvent}:${keyWidth}`;
           em && em.trigger(eventToListen, null, null, { noEmit: 1 });

src/dom_components/model/Component.ts

@@ -351,13 +351,21 @@ export default class Component extends StyleableModel<ComponentProperties> {
   /**
    * Change the drag mode of the component.
    * To get more about this feature read: https://github.com/GrapesJS/grapesjs/issues/1936
-   * @param {String} value Drag mode, options: 'absolute' | 'translate'
+   * @param {String} value Drag mode, options: `'absolute'` | `'translate'` | `''`
    * @returns {this}
    */
   setDragMode(value?: DragMode) {
     return this.set('dmode', value);
   }
 
+  /**
+   * Get the drag mode of the component.
+   * @returns {String} Drag mode value, options: `'absolute'` | `'translate'` | `''`
+   */
+  getDragMode(): DragMode {
+    return this.get('dmode') || '';
+  }
+
   /**
    * Find inner components by query string.
    * **ATTENTION**: this method works only with already rendered component

src/dom_components/model/types.ts

@@ -9,7 +9,7 @@ import Component from './Component';
 import Components from './Components';
 import { ToolbarButtonProps } from './ToolbarButton';
 
-export type DragMode = 'translate' | 'absolute';
+export type DragMode = 'translate' | 'absolute' | '';
 
 export interface ComponentProperties {
   /**

src/editor/index.ts

@@ -69,6 +69,7 @@ import ComponentManager, { ComponentEvent } from '../dom_components';
 import Component from '../dom_components/model/Component';
 import Components from '../dom_components/model/Components';
 import ComponentWrapper from '../dom_components/model/ComponentWrapper';
+import { DragMode } from '../dom_components/model/types';
 import I18nModule from '../i18n';
 import KeymapsModule, { KeymapEvent } from '../keymaps';
 import ModalModule, { ModalEvent } from '../modal_dialog';
@@ -682,7 +683,7 @@ export default class Editor implements IBaseModule<EditorConfig> {
    * @param {String} value Drag mode, options: 'absolute' | 'translate'
    * @returns {this}
    */
-  setDragMode(value: string) {
+  setDragMode(value: DragMode) {
     this.em.setDragMode(value);
     return this;
   }

src/editor/model/Editor.ts

@@ -40,6 +40,7 @@ import ComponentView from '../../dom_components/view/ComponentView';
 import { ProjectData } from '../../storage_manager/model/IStorage';
 import CssRules from '../../css_composer/model/CssRules';
 import Frame from '../../canvas/model/Frame';
+import { DragMode } from '../../dom_components/model/types';
 
 Backbone.$ = $;
 
@@ -935,10 +936,15 @@ export default class EditorModel extends Model {
     return this.get('Canvas').getZoomMultiplier();
   }
 
-  setDragMode(value: string) {
+  setDragMode(value: DragMode) {
     return this.set('dmode', value);
   }
 
+  getDragMode(component?: Component): DragMode {
+    const mode = component?.getDragMode() || this.get('dmode');
+    return mode || '';
+  }
+
   t(...args: any[]) {
     const i18n = this.get('I18n');
     return i18n?.t(...args);
@@ -948,8 +954,8 @@ export default class EditorModel extends Model {
    * Returns true if the editor is in absolute mode
    * @returns {Boolean}
    */
-  inAbsoluteMode() {
-    return this.get('dmode') === 'absolute';
+  inAbsoluteMode(component?: Component) {
+    return this.getDragMode(component) === 'absolute';
   }
 
   /**

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();
@@ -648,7 +650,7 @@ export default class Resizer {
    * All positioning logic
    * @return {Object}
    */
-  calc(data: Resizer) {
+  calc(data: Resizer): RectDim | undefined {
     let value;
     const opts = this.opts || {};
     const step = opts.step!;
@@ -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,
+    const box: RectDim = {
+      t: startDim.t,
+      l: startDim.l,
       w: startW,
       h: startH,
     };
@@ -722,10 +724,15 @@ 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;
+    }
+
+    for (const key in box) {
+      const i = key as keyof RectDim;
+      box[i] = parseInt(`${box[i]}`, 10);
     }
 
     return box;