fix(tmagic-form-runtime): 画布无法点击选中组件

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 });
     }
 

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';
 

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">

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,

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',
   });