diff --git a/src/commands/view/SelectComponent.ts b/src/commands/view/SelectComponent.ts index 9d4378a0e..770b39df4 100644 --- a/src/commands/view/SelectComponent.ts +++ b/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 }); diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index faf599991..aab8f1c0c 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -351,13 +351,21 @@ export default class Component extends StyleableModel { /** * 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 diff --git a/src/dom_components/model/types.ts b/src/dom_components/model/types.ts index fbce40c22..56f4279e2 100644 --- a/src/dom_components/model/types.ts +++ b/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 { /** diff --git a/src/editor/index.ts b/src/editor/index.ts index 24eec7862..bc37d4eee 100644 --- a/src/editor/index.ts +++ b/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 { * @param {String} value Drag mode, options: 'absolute' | 'translate' * @returns {this} */ - setDragMode(value: string) { + setDragMode(value: DragMode) { this.em.setDragMode(value); return this; } diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index 658f44484..1c4785d41 100644 --- a/src/editor/model/Editor.ts +++ b/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'; } /** diff --git a/src/utils/Resizer.ts b/src/utils/Resizer.ts index 6f9a0c3a4..9b22e7fb4 100644 --- a/src/utils/Resizer.ts +++ b/src/utils/Resizer.ts @@ -571,6 +571,8 @@ export default class Resizer { const elStyle = el.style as Record; 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;