From 0e74970bfef78d0e032c8a8bebaeedb9c141e26b Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 8 Apr 2022 20:31:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=96=B0=E5=A2=9E=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=87=AA=E5=8A=A8=E8=AE=BE=E7=BD=AE=E5=88=B0=E8=A7=86?=
 =?UTF-8?q?=E7=AA=97=E4=B8=AD=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/services/editor.ts |  9 ++++++--
 packages/editor/src/utils/editor.ts    | 29 ++++++++++++++++++++++----
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
index eec65cc9..26a30871 100644
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@@ -22,7 +22,7 @@ import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } 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 historyService, { StepValue } from '@editor/services/history';
@@ -228,7 +228,12 @@ class Editor extends BaseService {
     if (!parentNode) throw new Error('未找到父元素');
 
     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) {
       throw new Error('app下不能添加组件');
diff --git a/packages/editor/src/utils/editor.ts b/packages/editor/src/utils/editor.ts
index 5e1a9f1a..3306de17 100644
--- a/packages/editor/src/utils/editor.ts
+++ b/packages/editor/src/utils/editor.ts
@@ -20,7 +20,8 @@ import { random } from 'lodash-es';
 
 import type { Id, MApp, MContainer, MNode, MPage } 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';
 
@@ -105,7 +106,7 @@ const updatePopId = (oldId: Id, popId: Id, pageConfig: MPage) => {
 export const setNewItemId = (config: MNode, parent?: MPage) => {
   const oldId = config.id;
 
-  config.id = generateId(config.type);
+  config.id = generateId(config.type || 'component');
   config.name = `${config.name?.replace(/_(\d+)$/, '')}_${config.id}`;
 
   // 只有弹窗在页面下的一级子元素才有效
@@ -139,11 +140,29 @@ export const toRelative = (node: MNode) => {
   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) {
     node.style = {
       position: 'absolute',
-      ...(node.style || {}),
+      ...setTop2Middle(node, parentNode, stage),
     };
     return node;
   }
@@ -200,6 +219,8 @@ export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNo
   const offset = {
     left: cur?.style?.left || 0,
     top: cur?.style?.top || 0,
+    right: '',
+    bottom: '',
   };
 
   path.forEach((value) => {