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-09-09 17:08:35 +08:00 committed by roymondchen
parent dbb58e507d
commit 054474634e
3 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,8 +39,6 @@ import TargetShadow from './TargetShadow';
import type { DragResizeHelperConfig, Rect, TargetElement } from './types'; import type { DragResizeHelperConfig, Rect, TargetElement } from './types';
import { getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from './util'; import { getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from './util';
const getId = getIdFromEl();
/** /**
* 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改； * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
* 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的； * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
@ -243,15 +241,17 @@ export default class DragResizeHelper {
events.forEach((ev) => { events.forEach((ev) => {
const { width, height, beforeTranslate } = ev.drag; const { width, height, beforeTranslate } = ev.drag;
const frameSnapShot = this.framesSnapShot.find( 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; if (!frameSnapShot) return;
const targeEl = this.targetList.find( 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; 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) { if (!isParentIncluded) {
// 更新页面元素位置 // 更新页面元素位置
@ -281,18 +281,21 @@ export default class DragResizeHelper {
// 拖动过程更新 // 拖动过程更新
events.forEach((ev) => { events.forEach((ev) => {
const frameSnapShot = this.framesSnapShot.find( 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; if (!frameSnapShot) return;
const targeEl = this.targetList.find( const targeEl = this.targetList.find(
(targetItem) => (targetItem) =>
getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
getId(targetItem) && getIdFromEl()(targetItem) &&
getId(ev.target)?.endsWith(getId(targetItem)!), getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem)!),
); );
if (!targeEl) return; 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) { if (!isParentIncluded) {
// 更新页面元素位置 // 更新页面元素位置
const { marginLeft, marginTop } = getMarginValue(targeEl); const { marginLeft, marginTop } = getMarginValue(targeEl);
@ -319,7 +322,7 @@ export default class DragResizeHelper {
const shadowEls = this.getShadowEls(); const shadowEls = this.getShadowEls();
if (shadowEls.length) { 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) { if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
@ -356,11 +359,12 @@ export default class DragResizeHelper {
// 实际目标元素 // 实际目标元素
const matchEventTarget = this.targetList.find( const matchEventTarget = this.targetList.find(
(targetItem) => (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; if (!matchEventTarget) return;
const id = getId(matchEventTarget); const id = getIdFromEl()(matchEventTarget);
id && id &&
this.framesSnapShot.push({ this.framesSnapShot.push({
left: matchEventTarget.offsetLeft, left: matchEventTarget.offsetLeft,
@ -378,25 +382,31 @@ export default class DragResizeHelper {
this.destroyGhostEl(); this.destroyGhostEl();
} }
const ghostEl = el.cloneNode(true) as HTMLElement; const ghostEl = document.createElement('div') as HTMLElement;
this.setGhostElChildrenId(ghostEl);
const { top, left } = getAbsolutePosition(el, getOffset(el)); const { top, left } = getAbsolutePosition(el, getOffset(el));
setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
ghostEl.style.zIndex = ZIndex.GHOST_EL; setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getIdFromEl()(el)}`);
ghostEl.style.opacity = '.5';
ghostEl.style.position = 'absolute'; ghostEl.style.cssText = `
ghostEl.style.left = `${left}px`; z-index: ${ZIndex.GHOST_EL};
ghostEl.style.top = `${top}px`; opacity: .6;
ghostEl.style.marginLeft = '0'; position: absolute;
ghostEl.style.marginTop = '0'; left: ${left}px;
top: ${top}px;
margin: 0;
background: blue;
width: ${el.clientWidth}px;
height: ${el.clientHeight}px;
`;
el.after(ghostEl); el.after(ghostEl);
return ghostEl; return ghostEl;
} }
private setGhostElChildrenId(el: Element): void { private setGhostElChildrenId(el: Element): void {
for (const child of Array.from(el.children)) { for (const child of Array.from(el.children)) {
const el = child as HTMLElement; const el = child as HTMLElement;
const id = getId(el); const id = getIdFromEl()(el);
if (id) { if (id) {
setIdToEl()(el, `${GHOST_EL_ID_PREFIX}${id}`); setIdToEl()(el, `${GHOST_EL_ID_PREFIX}${id}`);
} }

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

@ -22,7 +22,7 @@ import Moveable, { MoveableOptions } from 'moveable';
import { getIdFromEl } from '@tmagic/utils'; import { getIdFromEl } from '@tmagic/utils';
import { Mode, StageDragStatus } from './const'; import { Mode, StageDragStatus } from './const';
import DragResizeHelper from './DragResizeHelper'; import type DragResizeHelper from './DragResizeHelper';
import MoveableOptionsManager from './MoveableOptionsManager'; import MoveableOptionsManager from './MoveableOptionsManager';
import type { import type {
DelayedMarkContainer, DelayedMarkContainer,

20
packages/stage/src/util.ts
View File

@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * 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 { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS, ZIndex } from './const';
import type { Offset, SortEventData, TargetElement } from './types'; import type { Offset, SortEventData, TargetElement } from './types';
@ -170,7 +170,7 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
let swapIndex = 0; let swapIndex = 0;
let addUpH = target.clientHeight; let addUpH = target.clientHeight;
const brothers = Array.from(target.parentNode?.children || []).filter( 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); const index = brothers.indexOf(target);
// 往下移动 // 往下移动
@ -189,9 +189,12 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
addUpH += ele.clientHeight / 2; addUpH += ele.clientHeight / 2;
swapIndex = i; swapIndex = i;
} }
const src = getIdFromEl()(target) || '';
return { return {
src: target.id, src,
dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id, 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 => { export const up = (deltaTop: number, target: TargetElement): SortEventData => {
const brothers = Array.from(target.parentNode?.children || []).filter( 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); const index = brothers.indexOf(target);
// 往上移动 // 往上移动
@ -225,9 +228,12 @@ export const up = (deltaTop: number, target: TargetElement): SortEventData => {
swapIndex = i; swapIndex = i;
} }
const src = getIdFromEl()(target) || '';
return { return {
src: target.id, src,
dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id, dist: upEls.length && swapIndex > -1 ? getIdFromEl()(upEls[swapIndex]) || '' : src,
}; };
}; };