JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-26 19:19:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(stage): 所有父节点中如果有translate，导致选中框定位出错

Browse Source
This commit is contained in:
roymondchen 2022-06-15 15:21:26 +08:00 committed by jia000
parent 48c4f784c4
commit feff6177c9
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/stage/src/StageDragResize.ts
View File

@ -25,7 +25,7 @@ import MoveableHelper from 'moveable-helper';
import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from './const';
import StageCore from './StageCore';
import type { Offset, SortEventData, StageDragResizeConfig } from './types';
import type { SortEventData, StageDragResizeConfig } from './types';
import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
/** 拖动状态 */
@ -233,10 +233,16 @@ export default class StageDragResize extends EventEmitter {
this.moveableHelper?.onResize(e);
this.target.style.width = `${width}px`;
this.target.style.height = `${height}px`;
// 流式布局
if (this.mode === Mode.SORTABLE) {
this.target.style.top = '0px';
} else {
this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
}
this.target.style.width = `${width}px`;
this.target.style.height = `${height}px`;
})
.on('resizeEnd', () => {
this.dragStatus = ActionStatus.END;
@ -247,7 +253,10 @@ export default class StageDragResize extends EventEmitter {
private bindDragEvent(): void {
if (!this.moveable) throw new Error('moveable 为初始化');
let offset: Offset | null = null;
const frame = {
left: 0,
top: 0,
};
this.moveable
.on('dragStart', (e) => {
@ -260,29 +269,25 @@ export default class StageDragResize extends EventEmitter {
if (this.mode === Mode.SORTABLE) {
this.ghostEl = this.generateGhostEl(this.target);
}
frame.top = this.target.offsetTop;
frame.left = this.target.offsetLeft;
})
.on('drag', (e) => {
if (!this.target || !this.dragEl) return;
if (!offset) {
offset = getAbsolutePosition(this.target, { left: 0, top: 0 });
}
this.dragStatus = ActionStatus.ING;
const { left, top } = e;
// 流式布局
if (this.ghostEl) {
this.dragEl.style.top = `${top}px`;
this.ghostEl.style.top = `${top + offset.top}px`;
this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}px`;
return;
}
this.moveableHelper?.onDrag(e);
this.target.style.left = `${left + offset.left}px`;
this.target.style.top = `${top + offset.top}px`;
this.target.style.left = `${frame.left + e.beforeTranslate[0]}px`;
this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
})
.on('dragEnd', () => {
// 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
@ -295,7 +300,6 @@ export default class StageDragResize extends EventEmitter {
this.update();
}
}
offset = null;
this.dragStatus = ActionStatus.END;
this.destroyGhostEl();