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 { public onResizeGroup(e: OnResizeGroup): void {
const { events } = e; const { events } = e;
this.moveableHelper.onResizeGroup(e);
// 拖动过程更新 // 拖动过程更新
events.forEach((ev) => { events.forEach((ev) => {
const { width, height, beforeTranslate } = ev.drag; const { width, height, beforeTranslate } = ev.drag;
@ -255,26 +258,28 @@ export default class DragResizeHelper {
targeEl.style.width = `${width}px`; targeEl.style.width = `${width}px`;
targeEl.style.height = `${height}px`; targeEl.style.height = `${height}px`;
}); });
this.moveableHelper.onResizeGroup(e);
} }
public onDragGroupStart(e: OnDragGroupStart): void { public onDragGroupStart(e: OnDragGroupStart): void {
const { events } = e;
this.moveableHelper.onDragGroupStart(e); this.moveableHelper.onDragGroupStart(e);
const { events } = e;
// 记录拖动前快照 // 记录拖动前快照
this.setFramesSnapShot(events); this.setFramesSnapShot(events);
} }
public onDragGroup(e: OnDragGroup): void { public onDragGroup(e: OnDragGroup): void {
this.moveableHelper.onDragGroup(e);
const { events } = e; const { events } = e;
// 拖动过程更新 // 拖动过程更新
events.forEach((ev) => { events.forEach((ev) => {
const frameSnapShot = this.framesSnapShot.find( 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; if (!frameSnapShot) return;
const targeEl = this.targetList.find( 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; if (!targeEl) return;
// 元素与其所属组同时加入多选列表时，只更新父元素 // 元素与其所属组同时加入多选列表时，只更新父元素
@ -286,7 +291,6 @@ export default class DragResizeHelper {
targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1] - marginTop}px`; targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1] - marginTop}px`;
} }
}); });
this.moveableHelper.onDragGroup(e);
} }
public getUpdatedElRect(el: HTMLElement, parentEl: HTMLElement | null, doc: Document): Rect { public getUpdatedElRect(el: HTMLElement, parentEl: HTMLElement | null, doc: Document): Rect {
@ -342,7 +346,7 @@ export default class DragResizeHelper {
events.forEach((ev) => { events.forEach((ev) => {
// 实际目标元素 // 实际目标元素
const matchEventTarget = this.targetList.find( 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; if (!matchEventTarget) return;
this.framesSnapShot.push({ 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; this.dragStatus = StageDragStatus.ING;
}) })
.on('dragGroupEnd', () => { .on('dragGroupEnd', () => {
if (timeout) {
globalThis.clearTimeout(timeout);
timeout = undefined;
}
const parentEl = this.markContainerEnd(); const parentEl = this.markContainerEnd();
this.update(false, parentEl); this.update(false, parentEl);
this.dragStatus = StageDragStatus.END; 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 { private updateEl(target: ShadowElement, src?: ShadowElement): ShadowElement {
const el = src || globalThis.document.createElement('div'); 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); el.style.cssText = getTargetElStyle(target, this.zIndex);