From 41a84000956fea8d73fdf171df4a232cec4ca99c Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 16 Aug 2022 15:19:07 +0800
Subject: [PATCH] =?UTF-8?q?fix(playground,runtime):=20=E6=8B=96=E5=8A=A8?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BC=B9=E7=AA=97=E6=97=B6=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E4=B8=8D=E5=AF=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 playground/src/pages/Editor.vue | 20 ++++++++++++++++++--
 runtime/vue2/playground/App.vue | 20 ++++++++------------
 runtime/vue3/playground/App.vue | 20 ++++++++------------
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index a632c104..964c2ed6 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -38,8 +38,8 @@ import { Coin, Connection, Document } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import serialize from 'serialize-javascript';
 
-import type { MenuBarData, MoveableOptions, TMagicEditor } from '@tmagic/editor';
-import type { Id } from '@tmagic/schema';
+import { editorService, MenuBarData, MoveableOptions, TMagicEditor } from '@tmagic/editor';
+import type { Id, MContainer, MNode } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { asyncLoadJs } from '@tmagic/utils';
@@ -169,6 +169,22 @@ asyncLoadJs(`${VITE_ENTRY_PATH}/event/index.umd.js`).then(() => {
 });
 
 save();
+
+editorService.usePlugin({
+  beforeDoAdd: (config: MNode, parent?: MContainer | null) => {
+    if (config.type === 'overlay') {
+      config.style = {
+        ...config.style,
+        left: 0,
+        top: 0,
+      };
+
+      return [config, editorService.get('page')];
+    }
+
+    return [config, parent];
+  },
+});
 </script>
 
 <style lang="scss">
diff --git a/runtime/vue2/playground/App.vue b/runtime/vue2/playground/App.vue
index 98d423b8..dc65380e 100644
--- a/runtime/vue2/playground/App.vue
+++ b/runtime/vue2/playground/App.vue
@@ -65,35 +65,31 @@ export default defineComponent({
         return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
       },
 
-      add({ config }: UpdateData) {
+      add({ config, parentId }: UpdateData) {
         console.log('add config', config);
         if (!root.value) throw new Error('error');
         if (!selectedId.value) throw new Error('error');
-        const path = getNodePath(selectedId.value, [root.value]);
-        const node = path.pop();
-        const parent = node?.items ? node : path.pop();
+        const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父节点');
         parent.items?.push(config);
       },
 
-      update({ config }: UpdateData) {
+      update({ config, parentId }: UpdateData) {
         console.log('update config', config);
         if (!root.value) throw new Error('error');
-        const path = getNodePath(config.id, [root.value]);
-        const node = path.pop();
-        const parent = path.pop();
+        const node = getNodePath(config.id, [root.value]).pop();
+        const parent = getNodePath(parentId, [root.value]).pop();
         if (!node) throw new Error('未找到目标节点');
         if (!parent) throw new Error('未找到父节点');
         const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
         parent.items.splice(index, 1, reactive(config));
       },
 
-      remove({ id }: RemoveData) {
+      remove({ id, parentId }: RemoveData) {
         if (!root.value) throw new Error('error');
-        const path = getNodePath(id, [root.value]);
-        const node = path.pop();
+        const node = getNodePath(id, [root.value]).pop();
         if (!node) throw new Error('未找到目标元素');
-        const parent = path.pop();
+        const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父元素');
         const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
         parent.items.splice(index, 1);
diff --git a/runtime/vue3/playground/App.vue b/runtime/vue3/playground/App.vue
index e093f165..0c7d6691 100644
--- a/runtime/vue3/playground/App.vue
+++ b/runtime/vue3/playground/App.vue
@@ -65,35 +65,31 @@ export default defineComponent({
         return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
       },
 
-      add({ config }: UpdateData) {
+      add({ config, parentId }: UpdateData) {
         console.log('add config', config);
         if (!root.value) throw new Error('error');
         if (!selectedId.value) throw new Error('error');
-        const path = getNodePath(selectedId.value, [root.value]);
-        const node = path.pop();
-        const parent = node?.items ? node : path.pop();
+        const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父节点');
         parent.items?.push(config);
       },
 
-      update({ config }: UpdateData) {
+      update({ config, parentId }: UpdateData) {
         console.log('update config', config);
         if (!root.value) throw new Error('error');
-        const path = getNodePath(config.id, [root.value]);
-        const node = path.pop();
-        const parent = path.pop();
+        const node = getNodePath(config.id, [root.value]).pop();
+        const parent = getNodePath(parentId, [root.value]).pop();
         if (!node) throw new Error('未找到目标节点');
         if (!parent) throw new Error('未找到父节点');
         const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
         parent.items.splice(index, 1, reactive(config));
       },
 
-      remove({ id }: RemoveData) {
+      remove({ id, parentId }: RemoveData) {
         if (!root.value) throw new Error('error');
-        const path = getNodePath(id, [root.value]);
-        const node = path.pop();
+        const node = getNodePath(id, [root.value]).pop();
         if (!node) throw new Error('未找到目标元素');
-        const parent = path.pop();
+        const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父元素');
         const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
         parent.items.splice(index, 1);