From b6652624e396b73657867759a3d34c852f6de43f Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 15 Mar 2023 15:32:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(runtime):=20vue=20playgound=20=E4=B8=ADdsl?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=B2=A1=E6=9C=89=E5=90=8C=E6=AD=A5=E5=88=B0?=
 =?UTF-8?q?Core=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 runtime/react/page/App.tsx          |  4 ++--
 runtime/react/page/index.html       |  6 +++---
 runtime/react/playground/index.html |  4 ++--
 runtime/react/playground/main.tsx   |  8 +++++++-
 runtime/vue2/playground/App.vue     | 31 +++++++++++++++++++++++++++--
 runtime/vue3/playground/App.vue     | 29 +++++++++++++++++++++++++--
 6 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/runtime/react/page/App.tsx b/runtime/react/page/App.tsx
index cbd6a7eb..bde5a17c 100644
--- a/runtime/react/page/App.tsx
+++ b/runtime/react/page/App.tsx
@@ -19,7 +19,7 @@
 import React, { useContext } from 'react';
 
 import Core from '@tmagic/core';
-import type { Page } from '@tmagic/schema';
+import type { MPage } from '@tmagic/schema';
 import { AppContent } from '@tmagic/ui-react';
 
 function App() {
@@ -31,7 +31,7 @@ function App() {
 
   const MagicUiPage = app.resolveComponent('page');
 
-  return <MagicUiPage config={app?.page?.data as Page}></MagicUiPage>;
+  return <MagicUiPage config={app?.page?.data as MPage}></MagicUiPage>;
 }
 
 export default App;
diff --git a/runtime/react/page/index.html b/runtime/react/page/index.html
index 31b0602b..a8ee410d 100644
--- a/runtime/react/page/index.html
+++ b/runtime/react/page/index.html
@@ -9,17 +9,17 @@
     <style>
       html,
       body,
-      #app {
+      #root {
         width: 100%;
         height: 100%;
       }
 
-      #app {
+      #root {
         position: relative;
         overflow: auto;
       }
 
-      #app::-webkit-scrollbar {
+      #root::-webkit-scrollbar {
         width: 0 !important;
         display: none;
       }
diff --git a/runtime/react/playground/index.html b/runtime/react/playground/index.html
index 80855842..b1b2549a 100644
--- a/runtime/react/playground/index.html
+++ b/runtime/react/playground/index.html
@@ -19,12 +19,12 @@
 
     html,
     body,
-    #app {
+    #root {
       width: 100%;
       height: 100%;
     }
 
-    #app {
+    #root {
       position: relative;
       overflow: auto;
     }
diff --git a/runtime/react/playground/main.tsx b/runtime/react/playground/main.tsx
index cbfce901..56582e92 100644
--- a/runtime/react/playground/main.tsx
+++ b/runtime/react/playground/main.tsx
@@ -29,6 +29,12 @@ import plugins from '../.tmagic/plugin-entry';
 
 import App from './App';
 
+declare global {
+  interface Window {
+    appInstance: Core;
+  }
+}
+
 const designWidth = document.documentElement.getBoundingClientRect().width;
 
 const app = new Core({
@@ -107,7 +113,7 @@ const operations = {
 
   sortNode({ root }: SortEventData) {
     console.log('sort config', root);
-    updateConfig(root);
+    root && updateConfig(root);
   },
 
   remove({ root }: RemoveData) {
diff --git a/runtime/vue2/playground/App.vue b/runtime/vue2/playground/App.vue
index 2fdb9147..ecf4b8f1 100644
--- a/runtime/vue2/playground/App.vue
+++ b/runtime/vue2/playground/App.vue
@@ -6,13 +6,14 @@
 import { computed, defineComponent, nextTick, provide, reactive, ref, watch } from 'vue';
 
 import Core from '@tmagic/core';
-import type { Id, MApp, MNode } from '@tmagic/schema';
+import type { Id, MApp, MNode, MPage } from '@tmagic/schema';
 import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
 import { getNodePath } from '@tmagic/utils';
 
 declare global {
   interface Window {
     magic: Magic;
+    appInstance: Core;
   }
 }
 
@@ -34,7 +35,7 @@ export default defineComponent({
       platform: 'editor',
     });
 
-    globalThis.appInstance = app;
+    window.appInstance = app;
 
     provide('app', app);
 
@@ -64,6 +65,11 @@ export default defineComponent({
       select(id: Id) {
         console.log('select config', id);
         selectedId.value = id;
+
+        if (app.getPage(id)) {
+          this.updatePageId?.(id);
+        }
+
         const el = document.getElementById(`${id}`);
         if (el) return el;
         // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
@@ -80,6 +86,13 @@ export default defineComponent({
         const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父节点');
 
+        if (config.type === 'page') {
+          app?.addPage(config as MPage);
+        } else {
+          const parentNode = app?.page?.getNode(parent.id);
+          parentNode && app?.page?.initNode(config, parentNode);
+        }
+
         if (parent.id !== selectedId.value) {
           const index = parent.items?.findIndex((child: MNode) => child.id === selectedId.value);
           parent.items?.splice(index + 1, 0, config);
@@ -101,16 +114,30 @@ export default defineComponent({
         const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父节点');
 
+        const nodeInstance = app.page?.getNode(config.id);
+        if (nodeInstance) {
+          nodeInstance.setData(config);
+        }
+
         const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
         parent.items.splice(index, 1, reactive(config));
       },
 
       remove({ id, parentId }: RemoveData) {
         if (!root.value) throw new Error('error');
+
         const node = getNodePath(id, [root.value]).pop();
         if (!node) throw new Error('未找到目标元素');
+
         const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父元素');
+
+        if (node.type === 'page') {
+          app?.deletePage(node.id);
+        } else {
+          app.page?.deleteNode(node.id);
+        }
+
         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 97c466e4..d06dc646 100644
--- a/runtime/vue3/playground/App.vue
+++ b/runtime/vue3/playground/App.vue
@@ -6,7 +6,7 @@
 import { computed, defineComponent, nextTick, provide, reactive, ref, watch } from 'vue';
 
 import Core from '@tmagic/core';
-import type { Id, MApp, MNode } from '@tmagic/schema';
+import type { Id, MApp, MNode, MPage } from '@tmagic/schema';
 import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
 import { getNodePath } from '@tmagic/utils';
 
@@ -33,7 +33,7 @@ export default defineComponent({
       platform: 'editor',
     });
 
-    globalThis.appInstance = app;
+    window.appInstance = app;
 
     provide('app', app);
 
@@ -63,6 +63,11 @@ export default defineComponent({
       select(id: Id) {
         console.log('select config', id);
         selectedId.value = id;
+
+        if (app.getPage(id)) {
+          this.updatePageId?.(id);
+        }
+
         const el = document.getElementById(`${id}`);
         if (el) return el;
         // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
@@ -78,6 +83,14 @@ export default defineComponent({
 
         const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父节点');
+
+        if (config.type === 'page') {
+          app?.addPage(config as MPage);
+        } else {
+          const parentNode = app?.page?.getNode(parent.id);
+          parentNode && app?.page?.initNode(config, parentNode);
+        }
+
         if (parent.id !== selectedId.value) {
           const index = parent.items?.findIndex((child: MNode) => child.id === selectedId.value);
           parent.items?.splice(index + 1, 0, config);
@@ -98,6 +111,12 @@ export default defineComponent({
 
         if (!node) throw new Error('未找到目标节点');
         if (!parent) throw new Error('未找到父节点');
+
+        const nodeInstance = app.page?.getNode(config.id);
+        if (nodeInstance) {
+          nodeInstance.setData(config);
+        }
+
         const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
         parent.items.splice(index, 1, reactive(config));
       },
@@ -111,6 +130,12 @@ export default defineComponent({
         const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父元素');
 
+        if (node.type === 'page') {
+          app?.deletePage(node.id);
+        } else {
+          app.page?.deleteNode(node.id);
+        }
+
         const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
         parent.items.splice(index, 1);
       },