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

refactor(stage): 将dragresize中的up down函数移到util中

Browse Source
This commit is contained in:
roymondchen 2022-07-26 15:22:35 +08:00 committed by jia000
parent bf95925878
commit 0450de481f
2 changed files with 74 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,8 +28,8 @@ import { removeClassNameByClassName } from '@tmagic/utils';
import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from './const'; import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from './const';
import StageCore from './StageCore'; import StageCore from './StageCore';
import StageMask from './StageMask'; import StageMask from './StageMask';
import type { SortEventData, StageDragResizeConfig } from './types'; import type { StageDragResizeConfig } from './types';
import { calcValueByFontsize, getAbsolutePosition, getMode, getOffset, getTargetElStyle } from './util'; import { calcValueByFontsize, down, getAbsolutePosition, getMode, getOffset, getTargetElStyle, up } from './util';
/** 拖动状态 */ /** 拖动状态 */
enum ActionStatus { enum ActionStatus {
@ -567,73 +567,3 @@ export default class StageDragResize extends EventEmitter {
}; };
} }
} }
/**
* 下移组件位置
* @param {number} deltaTop 偏移量
* @param {Object} detail 当前选中的组件配置
*/
export const down = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
let swapIndex = 0;
let addUpH = target.clientHeight;
const brothers = Array.from(target.parentNode?.children || []).filter(
(node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
);
const index = brothers.indexOf(target);
// 往下移动
const downEls = brothers.slice(index + 1) as HTMLElement[];
for (let i = 0; i < downEls.length; i++) {
const ele = downEls[i];
// 是 fixed 不做处理
if (ele.style?.position === 'fixed') {
continue;
}
addUpH += ele.clientHeight / 2;
if (deltaTop <= addUpH) {
break;
}
addUpH += ele.clientHeight / 2;
swapIndex = i;
}
return {
src: target.id,
dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id,
};
};
/**
* 上移组件位置
* @param {Array} brothers 处于同一容器下的所有子组件配置
* @param {number} index 当前组件所处的位置
* @param {number} deltaTop 偏移量
* @param {Object} detail 当前选中的组件配置
*/
export const up = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
const brothers = Array.from(target.parentNode?.children || []).filter(
(node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
);
const index = brothers.indexOf(target);
// 往上移动
const upEls = brothers.slice(0, index) as HTMLElement[];
let addUpH = target.clientHeight;
let swapIndex = upEls.length - 1;
for (let i = upEls.length - 1; i >= 0; i--) {
const ele = upEls[i];
if (!ele) continue;
// 是 fixed 不做处理
if (ele.style.position === 'fixed') continue;
addUpH += ele.clientHeight / 2;
if (-deltaTop <= addUpH) break;
addUpH += ele.clientHeight / 2;
swapIndex = i;
}
return {
src: target.id,
dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id,
};
};

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

@ -17,8 +17,8 @@
*/ */
import { removeClassName } from '@tmagic/utils'; import { removeClassName } from '@tmagic/utils';
import { Mode, SELECTED_CLASS, ZIndex } from './const'; import { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS, ZIndex } from './const';
import type { Offset } from './types'; import type { Offset, SortEventData } from './types';
const getParents = (el: Element, relative: Element) => { const getParents = (el: Element, relative: Element) => {
let cur: Element | null = el.parentElement; let cur: Element | null = el.parentElement;
@ -159,3 +159,73 @@ export const calcValueByFontsize = (doc: Document, value: number) => {
return value; return value;
}; };
/**
* 下移组件位置
* @param {number} deltaTop 偏移量
* @param {Object} detail 当前选中的组件配置
*/
export const down = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
let swapIndex = 0;
let addUpH = target.clientHeight;
const brothers = Array.from(target.parentNode?.children || []).filter(
(node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
);
const index = brothers.indexOf(target);
// 往下移动
const downEls = brothers.slice(index + 1) as HTMLElement[];
for (let i = 0; i < downEls.length; i++) {
const ele = downEls[i];
// 是 fixed 不做处理
if (ele.style?.position === 'fixed') {
continue;
}
addUpH += ele.clientHeight / 2;
if (deltaTop <= addUpH) {
break;
}
addUpH += ele.clientHeight / 2;
swapIndex = i;
}
return {
src: target.id,
dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id,
};
};
/**
* 上移组件位置
* @param {Array} brothers 处于同一容器下的所有子组件配置
* @param {number} index 当前组件所处的位置
* @param {number} deltaTop 偏移量
* @param {Object} detail 当前选中的组件配置
*/
export const up = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
const brothers = Array.from(target.parentNode?.children || []).filter(
(node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
);
const index = brothers.indexOf(target);
// 往上移动
const upEls = brothers.slice(0, index) as HTMLElement[];
let addUpH = target.clientHeight;
let swapIndex = upEls.length - 1;
for (let i = upEls.length - 1; i >= 0; i--) {
const ele = upEls[i];
if (!ele) continue;
// 是 fixed 不做处理
if (ele.style.position === 'fixed') continue;
addUpH += ele.clientHeight / 2;
if (-deltaTop <= addUpH) break;
addUpH += ele.clientHeight / 2;
swapIndex = i;
}
return {
src: target.id,
dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id,
};
};