JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

fix(stage): 多选后拖动没有响应

Browse Source
This commit is contained in:
roymondchen 2024-03-05 14:51:01 +08:00
parent 0315389ce9
commit 5cf137e5e8
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/stage/src/DragResizeHelper.ts
View File

@ -230,6 +230,9 @@ export default class DragResizeHelper {
*/
public onResizeGroup(e: OnResizeGroup): void {
const { events } = e;
this.moveableHelper.onResizeGroup(e);
// 拖动过程更新
events.forEach((ev) => {
const { width, height, beforeTranslate } = ev.drag;
@ -255,26 +258,28 @@ export default class DragResizeHelper {
targeEl.style.width = `${width}px`;
targeEl.style.height = `${height}px`;
});
this.moveableHelper.onResizeGroup(e);
}
public onDragGroupStart(e: OnDragGroupStart): void {
const { events } = e;
this.moveableHelper.onDragGroupStart(e);
const { events } = e;
// 记录拖动前快照
this.setFramesSnapShot(events);
}
public onDragGroup(e: OnDragGroup): void {
this.moveableHelper.onDragGroup(e);
const { events } = e;
// 拖动过程更新
events.forEach((ev) => {
const frameSnapShot = this.framesSnapShot.find(
(frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
(frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id),
);
if (!frameSnapShot) return;
const targeEl = this.targetList.find(
(targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
(targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id),
);
if (!targeEl) return;
// 元素与其所属组同时加入多选列表时，只更新父元素
@ -286,7 +291,6 @@ export default class DragResizeHelper {
targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1] - marginTop}px`;
}
});
this.moveableHelper.onDragGroup(e);
}
public getUpdatedElRect(el: HTMLElement, parentEl: HTMLElement | null, doc: Document): Rect {
@ -342,7 +346,7 @@ export default class DragResizeHelper {
events.forEach((ev) => {
// 实际目标元素
const matchEventTarget = this.targetList.find(
(targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
(targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id),
);
if (!matchEventTarget) return;
this.framesSnapShot.push({

4
packages/stage/src/StageMultiDragResize.ts
View File

@ -120,6 +120,10 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
this.dragStatus = StageDragStatus.ING;
})
.on('dragGroupEnd', () => {
if (timeout) {
globalThis.clearTimeout(timeout);
timeout = undefined;
}
const parentEl = this.markContainerEnd();
this.update(false, parentEl);
this.dragStatus = StageDragStatus.END;

2
packages/stage/src/TargetShadow.ts
View File

@ -93,7 +93,7 @@ export default class TargetShadow {
private updateEl(target: ShadowElement, src?: ShadowElement): ShadowElement {
const el = src || globalThis.document.createElement('div');
el.id = `${this.idPrefix}${target.id}`;
el.id = `${this.idPrefix}_${target.id}`;
el.style.cssText = getTargetElStyle(target, this.zIndex);