From a2c79c79cd07e8aa686ed6985d1e6f1284077ff9 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 4 Sep 2024 19:45:52 +0800
Subject: [PATCH] =?UTF-8?q?fix(tmagic-form-runtime):=20=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E7=82=B9=E5=87=BB=E9=80=89=E4=B8=AD=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/App.ts                 | 3 ++-
 playground/src/pages/FormEditor.vue      | 8 +-------
 runtime/tmagic-form/src/App.vue          | 9 +--------
 runtime/tmagic-form/src/index.ts         | 2 --
 runtime/tmagic-form/src/useFormConfig.ts | 1 +
 5 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/packages/core/src/App.ts b/packages/core/src/App.ts
index 4e11aedf..36d11c7d 100644
--- a/packages/core/src/App.ts
+++ b/packages/core/src/App.ts
@@ -38,6 +38,7 @@ interface AppOptionsConfig {
   designWidth?: number;
   curPage?: Id;
   useMock?: boolean;
+  disabledFlexible?: boolean;
   pageFragmentContainerType?: string | string[];
   iteratorContainerType?: string | string[];
   transformStyle?: (style: Record<string, any>) => Record<string, any>;
@@ -94,7 +95,7 @@ class App extends EventEmitter {
       this.useMock = options.useMock;
     }
 
-    if (this.jsEngine === 'browser') {
+    if (this.jsEngine === 'browser' && !options.disabledFlexible) {
       this.flexible = new Flexible({ designWidth: options.designWidth });
     }
 
diff --git a/playground/src/pages/FormEditor.vue b/playground/src/pages/FormEditor.vue
index e46996eb..69ed6198 100644
--- a/playground/src/pages/FormEditor.vue
+++ b/playground/src/pages/FormEditor.vue
@@ -6,7 +6,6 @@
     :component-group-list="componentGroupList"
     :props-configs="propsConfigs"
     :render="render"
-    :can-select="canSelect"
     :disabled-page-fragment="true"
     :disabled-stage-overlay="true"
     :stage-rect="{ width: 'calc(100% - 70px)', height: '100%' }"
@@ -25,12 +24,7 @@ import { Document } from '@element-plus/icons-vue';
 
 import { guid, type MApp, NodeType } from '@tmagic/core';
 import { MenuBarData, SideBarData, TMagicEditor, traverseNode } from '@tmagic/editor';
-import {
-  canSelect,
-  COMPONENT_GROUP_LIST as componentGroupList,
-  propsConfigs,
-  useRuntime,
-} from '@tmagic/tmagic-form-runtime';
+import { COMPONENT_GROUP_LIST as componentGroupList, propsConfigs, useRuntime } from '@tmagic/tmagic-form-runtime';
 
 import formDsl from '../configs/formDsl';
 
diff --git a/runtime/tmagic-form/src/App.vue b/runtime/tmagic-form/src/App.vue
index d4d82c9f..293b771c 100644
--- a/runtime/tmagic-form/src/App.vue
+++ b/runtime/tmagic-form/src/App.vue
@@ -1,12 +1,5 @@
 <template>
-  <MForm
-    ref="mForm"
-    :key="config?.id"
-    :id="config?.id"
-    :data-magic-id="config?.id"
-    :config="formConfig"
-    :init-values="values"
-  ></MForm>
+  <MForm ref="mForm" :key="config?.id" :data-tmagic-id="config?.id" :config="formConfig" :init-values="values"></MForm>
 </template>
 
 <script setup lang="ts">
diff --git a/runtime/tmagic-form/src/index.ts b/runtime/tmagic-form/src/index.ts
index ada0d811..81ce08b2 100644
--- a/runtime/tmagic-form/src/index.ts
+++ b/runtime/tmagic-form/src/index.ts
@@ -12,8 +12,6 @@ export * from './component-group-list';
 
 export const propsConfigs = formConfigs;
 
-export const canSelect = (el: HTMLElement) => Boolean(el.dataset.magicId);
-
 export const useRuntime = ({
   plugins = [],
   fillConfig = (config) => config,
diff --git a/runtime/tmagic-form/src/useFormConfig.ts b/runtime/tmagic-form/src/useFormConfig.ts
index 69b18603..dcedaa37 100644
--- a/runtime/tmagic-form/src/useFormConfig.ts
+++ b/runtime/tmagic-form/src/useFormConfig.ts
@@ -24,6 +24,7 @@ export const useFormConfig = (props: AppProps) => {
 
   let app: TMagicApp | undefined = new TMagicApp({
     ua: contentWindow?.navigator.userAgent,
+    disabledFlexible: true,
     platform: 'editor',
   });