diff --git a/packages/stage/src/DragResizeHelper.ts b/packages/stage/src/DragResizeHelper.ts index 31c1a2ec..3913f7cc 100644 --- a/packages/stage/src/DragResizeHelper.ts +++ b/packages/stage/src/DragResizeHelper.ts @@ -39,8 +39,6 @@ import TargetShadow from './TargetShadow'; import type { DragResizeHelperConfig, Rect, TargetElement } from './types'; import { getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from './util'; -const getId = getIdFromEl(); - /** * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改； * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的； @@ -243,15 +241,17 @@ export default class DragResizeHelper { events.forEach((ev) => { const { width, height, beforeTranslate } = ev.drag; const frameSnapShot = this.framesSnapShot.find( - (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''), + (frameItem) => frameItem.id === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''), ); if (!frameSnapShot) return; const targeEl = this.targetList.find( - (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''), + (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''), ); if (!targeEl) return; // 元素与其所属组同时加入多选列表时，只更新父元素 - const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement)); + const isParentIncluded = this.targetList.find( + (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement), + ); if (!isParentIncluded) { // 更新页面元素位置 @@ -281,18 +281,21 @@ export default class DragResizeHelper { // 拖动过程更新 events.forEach((ev) => { const frameSnapShot = this.framesSnapShot.find( - (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id), + (frameItem) => + getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id), ); if (!frameSnapShot) return; const targeEl = this.targetList.find( (targetItem) => - getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && - getId(targetItem) && - getId(ev.target)?.endsWith(getId(targetItem)!), + getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && + getIdFromEl()(targetItem) && + getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem)!), ); if (!targeEl) return; // 元素与其所属组同时加入多选列表时，只更新父元素 - const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement)); + const isParentIncluded = this.targetList.find( + (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement), + ); if (!isParentIncluded) { // 更新页面元素位置 const { marginLeft, marginTop } = getMarginValue(targeEl); @@ -319,7 +322,7 @@ export default class DragResizeHelper { const shadowEls = this.getShadowEls(); if (shadowEls.length) { - shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || '')); + shadowEl = shadowEls.find((item) => getIdFromEl()(item)?.endsWith(getIdFromEl()(el) || '')); } if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) { @@ -356,11 +359,12 @@ export default class DragResizeHelper { // 实际目标元素 const matchEventTarget = this.targetList.find( (targetItem) => - getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || ''), + getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && + getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem) || ''), ); if (!matchEventTarget) return; - const id = getId(matchEventTarget); + const id = getIdFromEl()(matchEventTarget); id && this.framesSnapShot.push({ left: matchEventTarget.offsetLeft, @@ -378,25 +382,31 @@ export default class DragResizeHelper { this.destroyGhostEl(); } - const ghostEl = el.cloneNode(true) as HTMLElement; - this.setGhostElChildrenId(ghostEl); + const ghostEl = document.createElement('div') as HTMLElement; const { top, left } = getAbsolutePosition(el, getOffset(el)); - setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`); - ghostEl.style.zIndex = ZIndex.GHOST_EL; - ghostEl.style.opacity = '.5'; - ghostEl.style.position = 'absolute'; - ghostEl.style.left = `${left}px`; - ghostEl.style.top = `${top}px`; - ghostEl.style.marginLeft = '0'; - ghostEl.style.marginTop = '0'; + + setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getIdFromEl()(el)}`); + + ghostEl.style.cssText = ` + z-index: ${ZIndex.GHOST_EL}; + opacity: .6; + position: absolute; + left: ${left}px; + top: ${top}px; + margin: 0; + background: blue; + width: ${el.clientWidth}px; + height: ${el.clientHeight}px; + `; el.after(ghostEl); + return ghostEl; } private setGhostElChildrenId(el: Element): void { for (const child of Array.from(el.children)) { const el = child as HTMLElement; - const id = getId(el); + const id = getIdFromEl()(el); if (id) { setIdToEl()(el, `${GHOST_EL_ID_PREFIX}${id}`); } diff --git a/packages/stage/src/StageDragResize.ts b/packages/stage/src/StageDragResize.ts index 3da78357..1975d90f 100644 --- a/packages/stage/src/StageDragResize.ts +++ b/packages/stage/src/StageDragResize.ts @@ -22,7 +22,7 @@ import Moveable, { MoveableOptions } from 'moveable'; import { getIdFromEl } from '@tmagic/utils'; import { Mode, StageDragStatus } from './const'; -import DragResizeHelper from './DragResizeHelper'; +import type DragResizeHelper from './DragResizeHelper'; import MoveableOptionsManager from './MoveableOptionsManager'; import type { DelayedMarkContainer, diff --git a/packages/stage/src/util.ts b/packages/stage/src/util.ts index dec15ba0..b633b67f 100644 --- a/packages/stage/src/util.ts +++ b/packages/stage/src/util.ts @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { removeClassName } from '@tmagic/utils'; +import { getIdFromEl, removeClassName } from '@tmagic/utils'; import { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS, ZIndex } from './const'; import type { Offset, SortEventData, TargetElement } from './types'; @@ -170,7 +170,7 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData => let swapIndex = 0; let addUpH = target.clientHeight; const brothers = Array.from(target.parentNode?.children || []).filter( - (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX), + (child) => !getIdFromEl()(child as HTMLElement)?.startsWith(GHOST_EL_ID_PREFIX), ); const index = brothers.indexOf(target); // 往下移动 @@ -189,9 +189,12 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData => addUpH += ele.clientHeight / 2; swapIndex = i; } + + const src = getIdFromEl()(target) || ''; + return { - src: target.id, - dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id, + src, + dist: downEls.length && swapIndex > -1 ? getIdFromEl()(downEls[swapIndex]) || '' : src, }; }; @@ -204,7 +207,7 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData => */ export const up = (deltaTop: number, target: TargetElement): SortEventData => { const brothers = Array.from(target.parentNode?.children || []).filter( - (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX), + (child) => !getIdFromEl()(child as HTMLElement)?.startsWith(GHOST_EL_ID_PREFIX), ); const index = brothers.indexOf(target); // 往上移动 @@ -225,9 +228,12 @@ export const up = (deltaTop: number, target: TargetElement): SortEventData => { swapIndex = i; } + + const src = getIdFromEl()(target) || ''; + return { - src: target.id, - dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id, + src, + dist: upEls.length && swapIndex > -1 ? getIdFromEl()(upEls[swapIndex]) || '' : src, }; };