From 8f5acff0a64925dff8913e50c067543128130d27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E6=98=8E=E5=8D=8E?= <51693922+WangMingHua111@users.noreply.github.com> Date: Fri, 12 Aug 2022 13:15:26 +0800 Subject: [PATCH] =?UTF-8?q?fix(stage):=20=E4=BF=AE=E5=A4=8D=E5=A4=9A?= =?UTF-8?q?=E9=80=89=E7=BB=84=E4=BB=B6=E5=A4=84=E4=BA=8E=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=97=B6=E7=94=BB=E5=B8=83=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=91=BD=E4=B8=AD=E9=AB=98=E4=BA=AE=E7=9A=84=E9=97=AE=E9=A2=98?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E5=A4=9A=E9=80=89=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E4=BD=93=E9=AA=8C=20(#265)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(stage): 修复多选组件处于拖拽状态时画布组件命中高亮的问题，优化多选拖拽体验 * fix(stage): 修复多选组件处于拖拽状态时画布组件命中高亮的问题，优化多选拖拽体验 * fix(stage): type.ts 中定义全局拖拽状态枚举 StageDragStatus，并修改相关的枚举使用项 Co-authored-by: jia000 <398009049@qq.com> --- packages/stage/src/StageCore.ts | 3 ++ packages/stage/src/StageDragResize.ts | 41 +++++++++------------- packages/stage/src/StageMultiDragResize.ts | 8 ++++- packages/stage/src/types.ts | 10 ++++++ 4 files changed, 36 insertions(+), 26 deletions(-) diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts index b4a3e4bf..a31f3759 100644 --- a/packages/stage/src/StageCore.ts +++ b/packages/stage/src/StageCore.ts @@ -35,6 +35,7 @@ import { Runtime, SortEventData, StageCoreConfig, + StageDragStatus, UpdateData, UpdateEventData, } from './types'; @@ -101,6 +102,8 @@ export default class StageCore extends EventEmitter { .on('highlight', async (event: MouseEvent) => { const el = await this.getElementFromPoint(event); if (!el) return; + // 如果多选组件处于拖拽状态时不进行组件高亮 + if (this.multiDr.dragStatus === StageDragStatus.ING) return; await this.highlight(el); if (this.highlightedDom === this.selectedDom) { this.highlightLayer.clearHighlight(); diff --git a/packages/stage/src/StageDragResize.ts b/packages/stage/src/StageDragResize.ts index 2f49c28f..7f8c3e9b 100644 --- a/packages/stage/src/StageDragResize.ts +++ b/packages/stage/src/StageDragResize.ts @@ -29,18 +29,9 @@ import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from import StageCore from './StageCore'; import StageMask from './StageMask'; import type { StageDragResizeConfig } from './types'; +import { StageDragStatus } from './types'; import { calcValueByFontsize, down, getAbsolutePosition, getMode, getOffset, getTargetElStyle, up } from './util'; -/** 拖动状态 */ -enum ActionStatus { - /** 开始拖动 */ - START = 'start', - /** 拖动中 */ - ING = 'ing', - /** 拖动结束 */ - END = 'end', -} - /** * 选中框 */ @@ -66,7 +57,7 @@ export default class StageDragResize extends EventEmitter { private moveableOptions: MoveableOptions = {}; /** 拖动状态 */ - private dragStatus: ActionStatus = ActionStatus.END; + private dragStatus: StageDragStatus = StageDragStatus.END; /** 流式布局下，目标节点的镜像节点 */ private ghostEl: HTMLElement | undefined; private moveableHelper?: MoveableHelper; @@ -165,7 +156,7 @@ export default class StageDragResize extends EventEmitter { this.moveable?.destroy(); this.destroyGhostEl(); this.destroyDragEl(); - this.dragStatus = ActionStatus.END; + this.dragStatus = StageDragStatus.END; this.removeAllListeners(); } @@ -243,7 +234,7 @@ export default class StageDragResize extends EventEmitter { .on('resizeStart', (e) => { if (!this.target) return; - this.dragStatus = ActionStatus.START; + this.dragStatus = StageDragStatus.START; this.moveableHelper?.onResizeStart(e); frame.top = this.target.offsetTop; @@ -254,7 +245,7 @@ export default class StageDragResize extends EventEmitter { if (!this.moveable || !this.target || !this.dragEl) return; const { beforeTranslate } = drag; - this.dragStatus = ActionStatus.ING; + this.dragStatus = StageDragStatus.ING; this.moveableHelper?.onResize(e); @@ -270,7 +261,7 @@ export default class StageDragResize extends EventEmitter { this.target.style.height = `${height}px`; }) .on('resizeEnd', () => { - this.dragStatus = ActionStatus.END; + this.dragStatus = StageDragStatus.END; this.update(true); }); } @@ -292,7 +283,7 @@ export default class StageDragResize extends EventEmitter { .on('dragStart', (e) => { if (!this.target) throw new Error('未选中组件'); - this.dragStatus = ActionStatus.START; + this.dragStatus = StageDragStatus.START; this.moveableHelper?.onDragStart(e); @@ -313,7 +304,7 @@ export default class StageDragResize extends EventEmitter { timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]); - this.dragStatus = ActionStatus.ING; + this.dragStatus = StageDragStatus.ING; // 流式布局 if (this.ghostEl) { @@ -339,7 +330,7 @@ export default class StageDragResize extends EventEmitter { } // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件 - if (this.dragStatus === ActionStatus.ING) { + if (this.dragStatus === StageDragStatus.ING) { if (parentEl) { this.update(false, parentEl); } else { @@ -353,7 +344,7 @@ export default class StageDragResize extends EventEmitter { } } - this.dragStatus = ActionStatus.END; + this.dragStatus = StageDragStatus.END; this.destroyGhostEl(); }); } @@ -363,18 +354,18 @@ export default class StageDragResize extends EventEmitter { this.moveable .on('rotateStart', (e) => { - this.dragStatus = ActionStatus.START; + this.dragStatus = StageDragStatus.START; this.moveableHelper?.onRotateStart(e); }) .on('rotate', (e) => { if (!this.target || !this.dragEl) return; - this.dragStatus = ActionStatus.ING; + this.dragStatus = StageDragStatus.ING; this.moveableHelper?.onRotate(e); const frame = this.moveableHelper?.getFrame(e.target); this.target.style.transform = frame?.toCSSObject().transform || ''; }) .on('rotateEnd', (e) => { - this.dragStatus = ActionStatus.END; + this.dragStatus = StageDragStatus.END; const frame = this.moveableHelper?.getFrame(e.target); this.emit('update', { el: this.target, @@ -390,18 +381,18 @@ export default class StageDragResize extends EventEmitter { this.moveable .on('scaleStart', (e) => { - this.dragStatus = ActionStatus.START; + this.dragStatus = StageDragStatus.START; this.moveableHelper?.onScaleStart(e); }) .on('scale', (e) => { if (!this.target || !this.dragEl) return; - this.dragStatus = ActionStatus.ING; + this.dragStatus = StageDragStatus.ING; this.moveableHelper?.onScale(e); const frame = this.moveableHelper?.getFrame(e.target); this.target.style.transform = frame?.toCSSObject().transform || ''; }) .on('scaleEnd', (e) => { - this.dragStatus = ActionStatus.END; + this.dragStatus = StageDragStatus.END; const frame = this.moveableHelper?.getFrame(e.target); this.emit('update', { el: this.target, diff --git a/packages/stage/src/StageMultiDragResize.ts b/packages/stage/src/StageMultiDragResize.ts index 39c2ccca..a7fd57e5 100644 --- a/packages/stage/src/StageMultiDragResize.ts +++ b/packages/stage/src/StageMultiDragResize.ts @@ -25,8 +25,9 @@ import MoveableHelper from 'moveable-helper'; import { DRAG_EL_ID_PREFIX, PAGE_CLASS } from './const'; import StageCore from './StageCore'; import StageMask from './StageMask'; -import { StageDragResizeConfig } from './types'; +import { StageDragResizeConfig, StageDragStatus } from './types'; import { calcValueByFontsize, getMode, getTargetElStyle } from './util'; + export default class StageMultiDragResize extends EventEmitter { public core: StageCore; public mask: StageMask; @@ -38,6 +39,8 @@ export default class StageMultiDragResize extends EventEmitter { public dragElList: HTMLDivElement[] = []; /** Moveable多选拖拽类实例 */ public moveableForMulti?: Moveable; + /** 拖动状态 */ + public dragStatus: StageDragStatus = StageDragStatus.END; private multiMoveableHelper?: MoveableHelper; constructor(config: StageDragResizeConfig) { @@ -99,6 +102,7 @@ export default class StageMultiDragResize extends EventEmitter { id: matchEventTarget.id, }); }); + this.dragStatus = StageDragStatus.START; }) .on('dragGroup', (params) => { const { events } = params; @@ -121,9 +125,11 @@ export default class StageMultiDragResize extends EventEmitter { } }); this.multiMoveableHelper?.onDragGroup(params); + this.dragStatus = StageDragStatus.ING; }) .on('dragGroupEnd', () => { this.update(); + this.dragStatus = StageDragStatus.END; }) .on('clickGroup', (params) => { const { inputTarget, targets } = params; diff --git a/packages/stage/src/types.ts b/packages/stage/src/types.ts index 83f3fb47..0399082c 100644 --- a/packages/stage/src/types.ts +++ b/packages/stage/src/types.ts @@ -61,6 +61,16 @@ export interface StageDragResizeConfig { mask: StageMask; } +/** 拖动状态 */ +export enum StageDragStatus { + /** 开始拖动 */ + START = 'start', + /** 拖动中 */ + ING = 'ing', + /** 拖动结束 */ + END = 'end', +} + export type Rect = { width: number; height: number;