feat(playground): 完善form editor

packages/form/src/containers/Container.vue

@@ -2,6 +2,7 @@
   <div
     v-if="config"
     :id="config.id"
+    :data-magic-id="config.id"
     :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
     :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
   >

packages/stage/src/ActionManager.ts

@@ -181,7 +181,7 @@ export default class ActionManager extends EventEmitter {
     return el.id === this.selectedEl?.id;
   }
 
-  public setSelectedEl(el: HTMLElement): void {
+  public setSelectedEl(el?: HTMLElement): void {
     this.selectedEl = el;
   }
 
@@ -258,7 +258,7 @@ export default class ActionManager extends EventEmitter {
   }
 
   public select(el: HTMLElement, event: MouseEvent | undefined): void {
-    this.selectedEl = el;
+    this.setSelectedEl(el);
     this.clearSelectStatus(SelectStatus.MULTI_SELECT);
     this.dr.select(el, event);
   }
@@ -399,7 +399,7 @@ export default class ActionManager extends EventEmitter {
     // 如果已有单选选中元素，不是magic-ui-page就可以加入多选列表
     if (this.selectedEl && !this.selectedEl.className.includes(PAGE_CLASS)) {
       this.selectedElList.push(this.selectedEl as HTMLElement);
-      this.selectedEl = undefined;
+      this.setSelectedEl(undefined);
     }
     // 判断元素是否已在多选列表
     const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);

packages/stage/src/StageRender.ts

@@ -156,12 +156,6 @@ export default class StageRender extends EventEmitter {
         x = x - rect.left;
         y = y - rect.top;
       }
-    } else if (this.nativeContainer) {
-      const rect = this.nativeContainer.getClientRects()[0];
-      if (rect) {
-        x = x - rect.left;
-        y = y - rect.top;
-      }
     }
 
     return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom) as HTMLElement[];

playground/src/configs/form-config/checkbox.ts

@@ -0,0 +1,3 @@
+import type { FormConfig } from '@tmagic/form';
+
+export default [] as FormConfig;

playground/src/configs/form-config/common.ts

@@ -0,0 +1,27 @@
+import type { FormConfig } from '@tmagic/form';
+
+export default [
+  {
+    name: 'id',
+    type: 'hidden',
+  },
+  {
+    name: 'type',
+    type: 'hidden',
+  },
+  {
+    name: 'name',
+    text: '表单key',
+    extra: '字段名',
+  },
+  {
+    name: 'text',
+    text: '标签文本',
+    extra: 'label 标签的文本',
+  },
+  {
+    name: 'labelWidth',
+    text: '标签宽度',
+    extra: '表单域标签的的宽度，例如 "50px"。支持 auto。',
+  },
+] as FormConfig;

playground/src/configs/form-config/display.ts

@@ -0,0 +1,3 @@
+import type { FormConfig } from '@tmagic/form';
+
+export default [] as FormConfig;

playground/src/configs/form-config/index.ts

@@ -0,0 +1,13 @@
+import checkbox from './checkbox';
+import display from './display';
+import number from './number';
+import switchConfig from './switch';
+import text from './text';
+
+export default {
+  text,
+  checkbox,
+  display,
+  number,
+  switch: switchConfig,
+};

playground/src/configs/form-config/number.ts

@@ -0,0 +1,23 @@
+import type { FormConfig } from '@tmagic/form';
+
+export default [
+  {
+    type: 'number',
+    name: 'min',
+    text: '最小值',
+  },
+  {
+    type: 'number',
+    name: 'max',
+    text: '最大值',
+  },
+  {
+    type: 'number',
+    name: 'step',
+    text: '步数',
+  },
+  {
+    name: 'placeholder',
+    text: 'placeholder',
+  },
+] as FormConfig;

playground/src/configs/form-config/switch.ts

@@ -0,0 +1,3 @@
+import type { FormConfig } from '@tmagic/form';
+
+export default [] as FormConfig;

playground/src/configs/form-config/text.ts

@@ -0,0 +1,26 @@
+import type { FormConfig } from '@tmagic/form';
+
+export default [
+  {
+    name: 'placeholder',
+    text: 'placeholder',
+  },
+  {
+    name: 'append',
+    legend: '后置按钮',
+    type: 'fieldset',
+    labelWidth: '80px',
+    items: [
+      {
+        name: 'text',
+        text: '按钮文案',
+      },
+      {
+        name: 'handler',
+        type: 'vs-code',
+        height: '400px',
+        text: '点击',
+      },
+    ],
+  },
+] as FormConfig;

playground/src/pages/Editor.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, toRaw } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, toRaw } from 'vue';
 import { useRouter } from 'vue-router';
 import { Coin, Connection, Document } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
@@ -233,6 +233,10 @@ editorService.usePlugin({
     return [config, parent];
   },
 });
+
+onBeforeUnmount(() => {
+  editorService.removeAllPlugins();
+});
 </script>
 
 <style lang="scss">

playground/src/pages/FormEditor.vue

@@ -4,11 +4,11 @@
     :menu="menu"
     :sidebar="sidebar"
     :component-group-list="componentGroupList"
-    :render-type="RenderType.NATIVE"
+    :props-configs="propsConfigs"
     :render="render"
     :can-select="canSelect"
-    :update-drag-el="updateDragEl"
     :stage-rect="{ width: 'calc(100% - 70px)', height: '100%' }"
+    :moveable-options="{ resizable: false }"
   >
     <template #layer-node-label="{ data }">
       {{ data.text || data.name || 'container' }}
@@ -17,21 +17,33 @@
 </template>
 
 <script setup lang="tsx">
-import { createApp, nextTick, ref } from 'vue';
+import { createApp, onBeforeUnmount, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Document } from '@element-plus/icons-vue';
+import cssStyle from 'element-plus/dist/index.css?raw';
 
-import { ComponentGroup, MenuBarData, SideBarData, TMagicEditor, traverseNode, uiService } from '@tmagic/editor';
-import MagicForm, { MForm } from '@tmagic/form';
-import { MApp, MNode, NodeType } from '@tmagic/schema';
-import { getOffset, RenderType, RuntimeWindow, TargetElement } from '@tmagic/stage';
-import { guid } from '@tmagic/utils';
+import {
+  ComponentGroup,
+  MenuBarData,
+  propsService,
+  SideBarData,
+  TMagicEditor,
+  traverseNode,
+  uiService,
+} from '@tmagic/editor';
+import MagicForm, { type FormConfig, MForm } from '@tmagic/form';
+import { type MApp, type MNode, NodeType } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
+import { guid, injectStyle } from '@tmagic/utils';
 
+import propsConfigs from '../configs/form-config';
+import commonConfig from '../configs/form-config/common';
 import formDsl from '../configs/formDsl';
 
 formDsl.forEach((item) => {
   traverseNode<any>(item, (item) => {
     item.id = `${item.type}_${guid()}`;
+    item.type = item.type || (item.items ? 'container' : 'text');
     item.style = {
       left: 0,
       top: 0,
@@ -53,30 +65,43 @@ const config = ref<MApp>({
   ],
 });
 
-const render = () => {
-  const el = globalThis.document.createElement('div');
-  el.style.position = 'relative';
+const render = (stage: StageCore) => {
+  injectStyle(stage.renderer.getDocument()!, cssStyle);
+  injectStyle(
+    stage.renderer.getDocument()!,
+    `
+html,
+  body,
+  #app {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+  ::-webkit-scrollbar {
+    width: 0;
+  }
+`,
+  );
+
+  const el: HTMLDivElement = globalThis.document.createElement('div');
+  el.id = 'app';
+  el.style.overflow = 'auto';
   createApp(MForm, {
-    config: formDsl,
+    config: config.value.items[0].items,
     initValues: {},
   })
     .use(MagicForm)
     .mount(el);
 
-  nextTick(() => {
-    (globalThis as unknown as RuntimeWindow).magic.onPageElUpdate(el);
+  stage.renderer.contentWindow?.magic?.onRuntimeReady({});
+  setTimeout(() => {
+    stage.renderer.contentWindow?.magic.onPageElUpdate(el.children[0] as HTMLElement);
     uiService.set('showRule', false);
   });
 
   return el;
 };
 
-const updateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => {
-  const { left, top } = getOffset(container);
-  el.style.left = `${globalThis.parseFloat(el.style.left) - left}px`;
-  el.style.top = `${globalThis.parseFloat(el.style.top) - top}px`;
-};
-
 const componentGroupList: ComponentGroup[] = [
   {
     title: '容器',
@@ -162,5 +187,26 @@ const sidebar: SideBarData = {
   items: ['component-list', 'layer'],
 };
 
-const canSelect = (el: HTMLElement) => el.classList.contains('m-form-container');
+const canSelect = (el: HTMLElement) => Boolean(el.dataset.magicId);
+
+propsService.usePlugin({
+  afterFillConfig(config: FormConfig, itemConfig: FormConfig) {
+    return [
+      {
+        type: 'tab',
+        items: [
+          {
+            title: '属性',
+            labelWidth: '80px',
+            items: [...commonConfig, ...itemConfig],
+          },
+        ],
+      },
+    ];
+  },
+});
+
+onBeforeUnmount(() => {
+  propsService.removeAllPlugins();
+});
 </script>