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

feat(editor): 新增组件自动设置到视窗中间

Browse Source
This commit is contained in:
roymondchen 2022-04-08 20:31:50 +08:00 committed by jia000
parent 9c83a540da
commit 0e74970bfe
2 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/editor/src/services/editor.ts
View File

@ -22,7 +22,7 @@ import serialize from 'serialize-javascript';
import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema'; import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
import { NodeType } from '@tmagic/schema'; import { NodeType } from '@tmagic/schema';
import type StageCore from '@tmagic/stage'; import StageCore from '@tmagic/stage';
import { getNodePath, isPop } from '@tmagic/utils'; import { getNodePath, isPop } from '@tmagic/utils';
import historyService, { StepValue } from '@editor/services/history'; import historyService, { StepValue } from '@editor/services/history';
@ -228,7 +228,12 @@ class Editor extends BaseService {
if (!parentNode) throw new Error('未找到父元素'); if (!parentNode) throw new Error('未找到父元素');
const layout = await this.getLayout(parentNode); const layout = await this.getLayout(parentNode);
const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type)), ...config }, layout); const newNode = initPosition(
{ ...toRaw(await propsService.getPropsValue(type)), ...config },
layout,
parentNode,
this.get<StageCore>('stage'),
);
if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) { if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
throw new Error('app下不能添加组件'); throw new Error('app下不能添加组件');

29
packages/editor/src/utils/editor.ts
View File

@ -20,7 +20,8 @@ import { random } from 'lodash-es';
import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema'; import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
import { NodeType } from '@tmagic/schema'; import { NodeType } from '@tmagic/schema';
import { getNodePath, isPop } from '@tmagic/utils'; import type StageCore from '@tmagic/stage';
import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
import { Layout } from '@editor/type'; import { Layout } from '@editor/type';
@ -105,7 +106,7 @@ const updatePopId = (oldId: Id, popId: Id, pageConfig: MPage) => {
export const setNewItemId = (config: MNode, parent?: MPage) => { export const setNewItemId = (config: MNode, parent?: MPage) => {
const oldId = config.id; const oldId = config.id;
config.id = generateId(config.type); config.id = generateId(config.type || 'component');
config.name = `${config.name?.replace(/_(\d+)$/, '')}_${config.id}`; config.name = `${config.name?.replace(/_(\d+)$/, '')}_${config.id}`;
// 只有弹窗在页面下的一级子元素才有效 // 只有弹窗在页面下的一级子元素才有效
@ -139,11 +140,29 @@ export const toRelative = (node: MNode) => {
return node; return node;
}; };
export const initPosition = (node: MNode, layout: Layout) => { const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
const style = node.style || {};
const height = style.height || 0;
if (!stage || style.top || !parentNode.style || !isNumber(height)) return style;
const { height: parentHeight } = parentNode.style;
if (isPage(parentNode)) {
const { scrollTop = 0, wrapperHeight } = stage.mask;
style.top = (wrapperHeight - height) / 2 + scrollTop;
} else {
style.top = (parentHeight - height) / 2;
}
return style;
};
export const initPosition = (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => {
if (layout === Layout.ABSOLUTE) { if (layout === Layout.ABSOLUTE) {
node.style = { node.style = {
position: 'absolute', position: 'absolute',
...(node.style || {}), ...setTop2Middle(node, parentNode, stage),
}; };
return node; return node;
} }
@ -200,6 +219,8 @@ export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNo
const offset = { const offset = {
left: cur?.style?.left || 0, left: cur?.style?.left || 0,
top: cur?.style?.top || 0, top: cur?.style?.top || 0,
right: '',
bottom: '',
}; };
path.forEach((value) => { path.forEach((value) => {