From 2201fbe80c5e14254c4f5746f1b82209711aef5e Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 30 Aug 2022 17:37:39 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor,stage,ui,runtime):=20=E6=B5=81?=
 =?UTF-8?q?=E5=BC=8F=E5=B8=83=E5=B1=80=E4=B8=8B=EF=BC=8Cheight=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E8=AE=BE=E7=BD=AE=E6=88=90auto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #298
---
 packages/editor/src/Editor.vue                |   2 +-
 packages/editor/src/layouts/PropsPanel.vue    | 104 +++++++++---------
 packages/stage/src/StageDragResize.ts         |   3 +-
 packages/stage/src/style.css                  |   4 +
 packages/ui-react/src/container/Container.tsx |   2 +-
 packages/ui-react/src/container/formConfig.ts |  11 ++
 packages/ui-react/src/page/Page.tsx           |   4 +-
 packages/ui-react/src/page/formConfig.ts      |  11 ++
 packages/ui-vue2/src/container/Container.vue  |   2 +-
 packages/ui-vue2/src/container/formConfig.ts  |  11 ++
 packages/ui-vue2/src/container/initValue.ts   |   8 +-
 packages/ui-vue2/src/page/Page.vue            |   4 +-
 packages/ui-vue2/src/page/formConfig.ts       |  11 ++
 packages/ui/src/container/src/Container.vue   |   2 +-
 packages/ui/src/container/src/formConfig.ts   |  11 ++
 packages/ui/src/page/src/formConfig.ts        |  11 ++
 packages/ui/src/page/src/index.vue            |   4 +-
 runtime/vue2/playground/App.vue               |  11 +-
 runtime/vue3/playground/App.vue               |  10 ++
 19 files changed, 163 insertions(+), 63 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 8c6a8f07..95a1f5de 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -31,7 +31,7 @@
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel ref="propsPanel" @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
+        <props-panel @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 969df168..31a6409a 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -2,9 +2,9 @@
   <div class="`m-editor-props-panel">
     <slot name="props-panel-header"></slot>
     <m-form
+      ref="configForm"
       :class="`m-editor-props-panel ${propsPanelSize}`"
       :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
-      ref="configForm"
       :size="propsPanelSize"
       :init-values="values"
       :config="curFormConfig"
@@ -13,69 +13,67 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+<script lang="ts" setup>
+import { computed, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import type { FormValue, MForm } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
 
 import type { Services } from '../type';
 
-export default defineComponent({
-  name: 'm-editor-props-panel',
+const emit = defineEmits(['mounted']);
 
-  emits: ['mounted'],
+const internalInstance = getCurrentInstance();
+const values = ref<FormValue>({});
+const configForm = ref<InstanceType<typeof MForm>>();
+// ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
+const curFormConfig = ref<any>([]);
+const services = inject<Services>('services');
+const node = computed(() => services?.editorService.get<MNode | null>('node'));
+const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
+const stage = computed(() => services?.editorService.get<StageCore>('stage'));
 
-  setup(props, { emit }) {
-    const internalInstance = getCurrentInstance();
-    const values = ref<FormValue>({});
-    const configForm = ref<InstanceType<typeof MForm>>();
-    // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
-    const curFormConfig = ref<any>([]);
-    const services = inject<Services>('services');
-    const node = computed(() => services?.editorService.get<MNode | null>('node'));
+const init = async () => {
+  if (!node.value) {
+    curFormConfig.value = [];
+    return;
+  }
 
-    const init = async () => {
-      if (!node.value) {
-        curFormConfig.value = [];
-        return;
-      }
+  const type = node.value.type || (node.value.items ? 'container' : 'text');
+  curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
+  values.value = node.value;
+};
 
-      const type = node.value.type || (node.value.items ? 'container' : 'text');
-      curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
-      values.value = node.value;
-    };
+watchEffect(init);
+services?.propsService.on('props-configs-change', init);
 
-    watchEffect(init);
-    services?.propsService.on('props-configs-change', init);
-
-    onMounted(() => {
-      emit('mounted', internalInstance);
-    });
-
-    return {
-      values,
-      configForm,
-      curFormConfig,
-      propsPanelSize: computed(() => services?.uiService.get('propsPanelSize') || 'small'),
-
-      async submit() {
-        try {
-          const values = await configForm.value?.submitForm();
-          services?.editorService.update(values);
-        } catch (e: any) {
-          console.error(e);
-          ElMessage.closeAll();
-          ElMessage.error({
-            duration: 10000,
-            showClose: true,
-            message: e.message,
-            dangerouslyUseHTMLString: true,
-          });
-        }
-      },
-    };
-  },
+onMounted(() => {
+  emit('mounted', internalInstance);
 });
+
+watchEffect(() => {
+  if (configForm.value && stage.value) {
+    configForm.value.formState.stage = stage.value;
+  }
+});
+
+const submit = async () => {
+  try {
+    const values = await configForm.value?.submitForm();
+    services?.editorService.update(values);
+  } catch (e: any) {
+    console.error(e);
+    ElMessage.closeAll();
+    ElMessage.error({
+      duration: 10000,
+      showClose: true,
+      message: e.message,
+      dangerouslyUseHTMLString: true,
+    });
+  }
+};
+
+defineExpose({ submit });
 </script>
diff --git a/packages/stage/src/StageDragResize.ts b/packages/stage/src/StageDragResize.ts
index 67531c85..d135ded5 100644
--- a/packages/stage/src/StageDragResize.ts
+++ b/packages/stage/src/StageDragResize.ts
@@ -519,6 +519,7 @@ export default class StageDragResize extends EventEmitter {
 
     const isAbsolute = this.mode === Mode.ABSOLUTE;
     const isFixed = this.mode === Mode.FIXED;
+    const isSortable = this.mode === Mode.SORTABLE;
 
     let { moveableOptions = {} } = this.core.config;
 
@@ -573,7 +574,7 @@ export default class StageDragResize extends EventEmitter {
         // 设置0的话无法移动到left为0，所以只能设置为-1
         left: -1,
         right: this.container.clientWidth - 1,
-        bottom: this.container.clientHeight,
+        bottom: isSortable ? undefined : this.container.clientHeight,
         ...(moveableOptions.bounds || {}),
       },
       ...options,
diff --git a/packages/stage/src/style.css b/packages/stage/src/style.css
index e381e107..e5d54a20 100644
--- a/packages/stage/src/style.css
+++ b/packages/stage/src/style.css
@@ -9,3 +9,7 @@
   opacity: .1;
   pointer-events: none;
 }
+
+.magic-ui-container.magic-layout-relative {
+  min-height: 50px;
+}
diff --git a/packages/ui-react/src/container/Container.tsx b/packages/ui-react/src/container/Container.tsx
index 9c2b86cb..dab1b071 100644
--- a/packages/ui-react/src/container/Container.tsx
+++ b/packages/ui-react/src/container/Container.tsx
@@ -37,7 +37,7 @@ const Container: React.FC<ContainerProps> = ({ config, id }) => {
   return (
     <div
       id={`${id || config.id || ''}`}
-      className={`magic-ui-container${config.className ? ` ${config.className}` : ''}`}
+      className={`magic-ui-container magic-layout-${config.layout}${config.className ? ` ${config.className}` : ''}`}
       style={app.transformStyle(config.style || {})}
     >
       {config.items?.map((item: MComponent | MContainer) => {
diff --git a/packages/ui-react/src/container/formConfig.ts b/packages/ui-react/src/container/formConfig.ts
index d9e97a47..20c71b84 100644
--- a/packages/ui-react/src/container/formConfig.ts
+++ b/packages/ui-react/src/container/formConfig.ts
@@ -26,5 +26,16 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
+    onChange: (formState: any, v: string, { model }: any) => {
+      if (!model.style) return v;
+      if (v === 'relative') {
+        model.style.height = 'auto';
+      } else {
+        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        if (el) {
+          model.style.height = el.getBoundingClientRect().height;
+        }
+      }
+    },
   },
 ];
diff --git a/packages/ui-react/src/page/Page.tsx b/packages/ui-react/src/page/Page.tsx
index 1a8b3ac8..993effc0 100644
--- a/packages/ui-react/src/page/Page.tsx
+++ b/packages/ui-react/src/page/Page.tsx
@@ -39,7 +39,9 @@ const Page: React.FC<PageProps> = ({ config }) => {
   return (
     <div
       id={`${config.id || ''}`}
-      className={`magic-ui-page magic-ui-container${config.className ? ` ${config.className}` : ''}`}
+      className={`magic-ui-page magic-ui-container magic-layout-${config.layout}${
+        config.className ? ` ${config.className}` : ''
+      }`}
       style={app.transformStyle(config.style || {})}
     >
       {config.items?.map((item: MComponent | MContainer) => {
diff --git a/packages/ui-react/src/page/formConfig.ts b/packages/ui-react/src/page/formConfig.ts
index 54fd0012..d543b155 100644
--- a/packages/ui-react/src/page/formConfig.ts
+++ b/packages/ui-react/src/page/formConfig.ts
@@ -36,5 +36,16 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
+    onChange: (formState: any, v: string, { model }: any) => {
+      if (!model.style) return v;
+      if (v === 'relative') {
+        model.style.height = 'auto';
+      } else {
+        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        if (el) {
+          model.style.height = el.getBoundingClientRect().height;
+        }
+      }
+    },
   },
 ];
diff --git a/packages/ui-vue2/src/container/Container.vue b/packages/ui-vue2/src/container/Container.vue
index e11cf880..4b6c372a 100644
--- a/packages/ui-vue2/src/container/Container.vue
+++ b/packages/ui-vue2/src/container/Container.vue
@@ -2,7 +2,7 @@
   <div
     v-if="display()"
     :id="config.id"
-    :class="`magic-ui-container${config.className ? ` ${config.className}` : ''}`"
+    :class="`magic-ui-container magic-layout-${config.layout}${config.className ? ` ${config.className}` : ''}`"
     :style="style"
   >
     <slot></slot>
diff --git a/packages/ui-vue2/src/container/formConfig.ts b/packages/ui-vue2/src/container/formConfig.ts
index d9e97a47..20c71b84 100644
--- a/packages/ui-vue2/src/container/formConfig.ts
+++ b/packages/ui-vue2/src/container/formConfig.ts
@@ -26,5 +26,16 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
+    onChange: (formState: any, v: string, { model }: any) => {
+      if (!model.style) return v;
+      if (v === 'relative') {
+        model.style.height = 'auto';
+      } else {
+        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        if (el) {
+          model.style.height = el.getBoundingClientRect().height;
+        }
+      }
+    },
   },
 ];
diff --git a/packages/ui-vue2/src/container/initValue.ts b/packages/ui-vue2/src/container/initValue.ts
index 21dc884a..29663a51 100644
--- a/packages/ui-vue2/src/container/initValue.ts
+++ b/packages/ui-vue2/src/container/initValue.ts
@@ -16,4 +16,10 @@
  * limitations under the License.
  */
 
-export default {};
+export default {
+  items: [],
+  style: {
+    width: '375',
+    height: '100',
+  },
+};
diff --git a/packages/ui-vue2/src/page/Page.vue b/packages/ui-vue2/src/page/Page.vue
index 4896db85..d82c67d1 100644
--- a/packages/ui-vue2/src/page/Page.vue
+++ b/packages/ui-vue2/src/page/Page.vue
@@ -1,7 +1,9 @@
 <template>
   <div
     :id="config.id"
-    :class="`magic-ui-page magic-ui-container${config.className ? ` ${config.className}` : ''}`"
+    :class="`magic-ui-page magic-ui-container magic-layout-${config.layout}${
+      config.className ? ` ${config.className}` : ''
+    }`"
     :style="style"
   >
     <slot></slot>
diff --git a/packages/ui-vue2/src/page/formConfig.ts b/packages/ui-vue2/src/page/formConfig.ts
index 54fd0012..d543b155 100644
--- a/packages/ui-vue2/src/page/formConfig.ts
+++ b/packages/ui-vue2/src/page/formConfig.ts
@@ -36,5 +36,16 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
+    onChange: (formState: any, v: string, { model }: any) => {
+      if (!model.style) return v;
+      if (v === 'relative') {
+        model.style.height = 'auto';
+      } else {
+        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        if (el) {
+          model.style.height = el.getBoundingClientRect().height;
+        }
+      }
+    },
   },
 ];
diff --git a/packages/ui/src/container/src/Container.vue b/packages/ui/src/container/src/Container.vue
index ad8d4f82..c6f8b093 100644
--- a/packages/ui/src/container/src/Container.vue
+++ b/packages/ui/src/container/src/Container.vue
@@ -2,7 +2,7 @@
   <div
     v-if="display()"
     :id="`${config.id || ''}`"
-    :class="`magic-ui-container${config.className ? ` ${config.className}` : ''}`"
+    :class="`magic-ui-container magic-layout-${config.layout}${config.className ? ` ${config.className}` : ''}`"
     :style="style"
   >
     <slot></slot>
diff --git a/packages/ui/src/container/src/formConfig.ts b/packages/ui/src/container/src/formConfig.ts
index d9e97a47..20c71b84 100644
--- a/packages/ui/src/container/src/formConfig.ts
+++ b/packages/ui/src/container/src/formConfig.ts
@@ -26,5 +26,16 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
+    onChange: (formState: any, v: string, { model }: any) => {
+      if (!model.style) return v;
+      if (v === 'relative') {
+        model.style.height = 'auto';
+      } else {
+        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        if (el) {
+          model.style.height = el.getBoundingClientRect().height;
+        }
+      }
+    },
   },
 ];
diff --git a/packages/ui/src/page/src/formConfig.ts b/packages/ui/src/page/src/formConfig.ts
index 54fd0012..d543b155 100644
--- a/packages/ui/src/page/src/formConfig.ts
+++ b/packages/ui/src/page/src/formConfig.ts
@@ -36,5 +36,16 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
+    onChange: (formState: any, v: string, { model }: any) => {
+      if (!model.style) return v;
+      if (v === 'relative') {
+        model.style.height = 'auto';
+      } else {
+        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        if (el) {
+          model.style.height = el.getBoundingClientRect().height;
+        }
+      }
+    },
   },
 ];
diff --git a/packages/ui/src/page/src/index.vue b/packages/ui/src/page/src/index.vue
index 9a241a5b..05ddd13d 100644
--- a/packages/ui/src/page/src/index.vue
+++ b/packages/ui/src/page/src/index.vue
@@ -1,7 +1,9 @@
 <template>
   <div
     :id="`${config.id || ''}`"
-    :class="`magic-ui-page magic-ui-container${config.className ? ` ${config.className}` : ''}`"
+    :class="`magic-ui-page magic-ui-container magic-layout-${config.layout}${
+      config.className ? ` ${config.className}` : ''
+    }`"
     :style="style"
   >
     <slot></slot>
diff --git a/runtime/vue2/playground/App.vue b/runtime/vue2/playground/App.vue
index 5653c6de..51455daa 100644
--- a/runtime/vue2/playground/App.vue
+++ b/runtime/vue2/playground/App.vue
@@ -67,10 +67,14 @@ export default defineComponent({
 
       add({ config, parentId }: UpdateData) {
         console.log('add config', config);
+
         if (!root.value) throw new Error('error');
         if (!selectedId.value) throw new Error('error');
+        if (!parentId) throw new Error('error');
+
         const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父节点');
+
         if (parent.id !== selectedId.value) {
           const index = parent.items?.findIndex((child: MNode) => child.id === selectedId.value);
           parent.items?.splice(index + 1, 0, config);
@@ -82,11 +86,16 @@ export default defineComponent({
 
       update({ config, parentId }: UpdateData) {
         console.log('update config', config);
+
         if (!root.value) throw new Error('error');
+
         const node = getNodePath(config.id, [root.value]).pop();
-        const parent = getNodePath(parentId, [root.value]).pop();
         if (!node) throw new Error('未找到目标节点');
+
+        if (!parentId) throw new Error('error');
+        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, reactive(config));
       },
diff --git a/runtime/vue3/playground/App.vue b/runtime/vue3/playground/App.vue
index eb97f819..c5edd146 100644
--- a/runtime/vue3/playground/App.vue
+++ b/runtime/vue3/playground/App.vue
@@ -67,8 +67,11 @@ export default defineComponent({
 
       add({ config, parentId }: UpdateData) {
         console.log('add config', config);
+
         if (!root.value) throw new Error('error');
         if (!selectedId.value) throw new Error('error');
+        if (!parentId) throw new Error('error');
+
         const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父节点');
         if (parent.id !== selectedId.value) {
@@ -82,9 +85,13 @@ export default defineComponent({
 
       update({ config, parentId }: UpdateData) {
         console.log('update config', config);
+
         if (!root.value) throw new Error('error');
         const node = getNodePath(config.id, [root.value]).pop();
+
+        if (!parentId) throw new Error('error');
         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);
@@ -93,10 +100,13 @@ export default defineComponent({
 
       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('未找到父元素');
+
         const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
         parent.items.splice(index, 1);
       },