From 050a635cb6ad899a80e0e8427fa3f7ae7a1e263b Mon Sep 17 00:00:00 2001 From: Paul Rill Date: Fri, 31 Mar 2023 11:30:25 +0200 Subject: [PATCH 1/4] fix: resolved bug with top/left being sticky when resizing from l/t side --- src/commands/view/SelectComponent.ts | 3 +++ src/utils/Resizer.ts | 12 +++++++----- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/commands/view/SelectComponent.ts b/src/commands/view/SelectComponent.ts index 9d4378a0e..d754fbf1f 100644 --- 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 index 6f9a0c3a4..24668d816 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(); @@ -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; From eb4e438bdfd97ba686312268464ef9ef40aa73d3 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 31 Mar 2023 16:23:26 +0400 Subject: [PATCH 2/4] Prevent top/left update if not in standard drag mode --- src/commands/view/SelectComponent.ts | 6 ++++-- src/dom_components/model/Component.ts | 10 +++++++++- src/dom_components/model/types.ts | 2 +- src/editor/index.ts | 3 ++- src/editor/model/Editor.ts | 12 +++++++++--- 5 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/commands/view/SelectComponent.ts b/src/commands/view/SelectComponent.ts index d754fbf1f..732808992 100644 --- a/src/commands/view/SelectComponent.ts +++ b/src/commands/view/SelectComponent.ts @@ -455,8 +455,10 @@ export default { style[keyHeight] = autoHeight ? 'auto' : `${rect.h}${unitHeight}`; } - style.top = rect.t + unitHeight; - style.left = rect.l + unitWidth; + if (em.getDragMode(model)) { + style.top = `${rect.t}${unitHeight}`; + style.left = `${rect.l}${unitWidth}`; + } modelToStyle.addStyle({ ...style, en }, { avoidStore: !store }); const updateEvent = 'update:component:style'; 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'; } /** From 24dd628ebe7b018c7458d92f952d3cd39a39373c Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 31 Mar 2023 16:33:53 +0400 Subject: [PATCH 3/4] Up Resizer dim values --- src/utils/Resizer.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/utils/Resizer.ts b/src/utils/Resizer.ts index 24668d816..9b22e7fb4 100644 --- a/src/utils/Resizer.ts +++ b/src/utils/Resizer.ts @@ -650,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!; @@ -665,7 +665,7 @@ 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: RectDim = { + const box: RectDim = { t: startDim.t, l: startDim.l, w: startW, @@ -730,6 +730,11 @@ export default class Resizer { 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; } } From f5a9c389efaa005420818a6f15446a0d4c4d976d Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 31 Mar 2023 16:36:55 +0400 Subject: [PATCH 4/4] Up key for the partial update --- src/commands/view/SelectComponent.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/commands/view/SelectComponent.ts b/src/commands/view/SelectComponent.ts index 732808992..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; @@ -460,7 +459,14 @@ export default { style.left = `${rect.l}${unitWidth}`; } - modelToStyle.addStyle({ ...style, en }, { avoidStore: !store }); + 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 });