@tmagic/editor 1.4.0-beta.1 → 1.4.0

package/src/fields/DataSourceFields.vue

@@ -7,39 +7,57 @@
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
     </div>
 
-    <MFormDrawer
-      ref="addDialog"
-      label-width="80px"
+    <FloatingBox
+      v-model:visible="addDialogVisible"
+      v-model:width="width"
+      v-model:height="editorHeight"
       :title="fieldTitle"
-      :config="dataSourceFieldsConfig"
-      :values="fieldValues"
-      :parentValues="model[name]"
-      :disabled="disabled"
-      :width="width"
-      @submit="fieldChange"
-    ></MFormDrawer>
-
-    <MFormDrawer
-      ref="addFromJsonDialog"
+      :position="boxPosition"
+    >
+      <template #body>
+        <MFormBox
+          label-width="80px"
+          :title="fieldTitle"
+          :config="dataSourceFieldsConfig"
+          :values="fieldValues"
+          :parentValues="model[name]"
+          :disabled="disabled"
+          @submit="fieldChange"
+        ></MFormBox>
+      </template>
+    </FloatingBox>
+
+    <FloatingBox
+      v-model:visible="addFromJsonDialogVisible"
+      v-model:width="width"
+      v-model:height="editorHeight"
       title="快速添加数据定义"
-      :config="jsonFromConfig"
-      :values="jsonFromValues"
-      :disabled="disabled"
-      :width="width"
-      @submit="addFromJsonFromChange"
-    ></MFormDrawer>
+      :position="boxPosition"
+    >
+      <template #body>
+        <MFormBox
+          :config="jsonFromConfig"
+          :values="jsonFromValues"
+          :disabled="disabled"
+          @submit="addFromJsonFromChange"
+        ></MFormBox>
+      </template>
+    </FloatingBox>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { inject, Ref, ref } from 'vue';
 
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
+import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
 import type { DataSchema } from '@tmagic/schema';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
+import FloatingBox from '@editor/components/FloatingBox.vue';
+import { useEditorContentHeight } from '@editor/hooks';
+import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
 import type { Services } from '@editor/type';
 
 defineOptions({
@@ -61,17 +79,16 @@ const emit = defineEmits(['change']);
 
 const services = inject<Services>('services');
 
-const addDialog = ref<InstanceType<typeof MFormDrawer>>();
-
 const fieldValues = ref<Record<string, any>>({});
 const fieldTitle = ref('');
 
-const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+const width = defineModel<number>('width', { default: 670 });
 
 const newHandler = () => {
   fieldValues.value = {};
   fieldTitle.value = '新增属性';
-  addDialog.value?.show();
+  calcBoxPosition();
+  addDialogVisible.value = true;
 };
 
 const fieldChange = ({ index, ...value }: Record<string, any>) => {
@@ -81,7 +98,7 @@ const fieldChange = ({ index, ...value }: Record<string, any>) => {
     props.model[props.name].push(value);
   }
 
-  addDialog.value?.hide();
+  addDialogVisible.value = false;
 
   emit('change', props.model[props.name]);
 };
@@ -122,7 +139,8 @@ const fieldColumns: ColumnConfig[] = [
             index,
           };
           fieldTitle.value = `编辑${row.title}`;
-          addDialog.value?.show();
+          calcBoxPosition();
+          addDialogVisible.value = true;
         },
       },
       {
@@ -220,7 +238,6 @@ const dataSourceFieldsConfig: FormConfig = [
   },
 ];
 
-const addFromJsonDialog = ref<InstanceType<typeof MFormDrawer>>();
 const jsonFromConfig: FormConfig = [
   {
     name: 'data',
@@ -238,7 +255,8 @@ const jsonFromValues = ref({
 
 const newFromJsonHandler = () => {
   jsonFromValues.value.data = getDefaultValueFromFields(props.model[props.name]);
-  addFromJsonDialog.value?.show();
+  calcBoxPosition();
+  addFromJsonDialogVisible.value = true;
 };
 
 const getValueType = (value: any) => {
@@ -288,11 +306,18 @@ const addFromJsonFromChange = ({ data }: { data: string }) => {
 
     props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
 
-    addFromJsonDialog.value?.hide();
+    addFromJsonDialogVisible.value = false;
 
     emit('change', props.model[props.name]);
   } catch (e: any) {
     tMagicMessage.error(e.message);
   }
 };
+
+const addDialogVisible = defineModel<boolean>('visible', { default: false });
+const addFromJsonDialogVisible = defineModel<boolean>('visible1', { default: false });
+const { height: editorHeight } = useEditorContentHeight();
+
+const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
 </script>

package/src/fields/DataSourceInput.vue

@@ -29,9 +29,13 @@
       </div>
     </template>
   </component>
-  <div :class="`tmagic-data-source-input-text el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
+  <div
+    :class="`tmagic-data-source-input-text el-input t-input t-size-${size?.[0]} el-input--${size}`"
+    @mouseup="mouseupHandler"
+    v-else
+  >
     <div :class="`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
-      <div class="el-input__inner">
+      <div class="el-input__inner t-input__inner">
         <template v-for="(item, index) in displayState">
           <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
           <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>

package/src/fields/DataSourceMocks.vue

@@ -6,32 +6,44 @@
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
     </div>
 
-    <MFormDrawer
-      ref="addDialog"
-      label-width="120px"
+    <FloatingBox
+      v-model:visible="addDialogVisible"
+      v-model:width="width"
+      v-model:height="editorHeight"
       :title="drawerTitle"
-      :config="formConfig"
-      :values="formValues"
-      :parentValues="model[name]"
-      :disabled="disabled"
-      :width="width"
-      @submit="formChangeHandler"
-    ></MFormDrawer>
+      :position="boxPosition"
+    >
+      <template #body>
+        <MFormBox
+          ref="addDialog"
+          label-width="120px"
+          :config="formConfig"
+          :values="formValues"
+          :parentValues="model[name]"
+          :disabled="disabled"
+          @submit="formChangeHandler"
+        ></MFormBox>
+      </template>
+    </FloatingBox>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { inject, Ref, ref } from 'vue';
 
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
+import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
 import type { MockSchema } from '@tmagic/schema';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
+import FloatingBox from '@editor/components/FloatingBox.vue';
+import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import { Services } from '@editor/type';
 
+import { useEditorContentHeight } from '..';
+
 defineOptions({
   name: 'MFieldsDataSourceMocks',
 });
@@ -50,9 +62,8 @@ const props = withDefaults(
 const emit = defineEmits(['change']);
 
 const services = inject<Services>('services');
-const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+const width = defineModel<number>('width', { default: 670 });
 
-const addDialog = ref<InstanceType<typeof MFormDrawer>>();
 const drawerTitle = ref('');
 const formValues = ref<Record<string, any>>({});
 
@@ -182,7 +193,8 @@ const columns: ColumnConfig[] = [
             index,
           };
           drawerTitle.value = `编辑${row.title}`;
-          addDialog.value?.show();
+          calcBoxPosition();
+          addDialogVisible.value = true;
         },
       },
       {
@@ -206,7 +218,8 @@ const newHandler = () => {
     enable: isFirstRow,
   };
   drawerTitle.value = '新增Mock';
-  addDialog.value?.show();
+  calcBoxPosition();
+  addDialogVisible.value = true;
 };
 
 const formChangeHandler = ({ index, ...value }: Record<string, any>) => {
@@ -216,7 +229,7 @@ const formChangeHandler = ({ index, ...value }: Record<string, any>) => {
     props.model[props.name].push(value);
   }
 
-  addDialog.value?.hide();
+  addDialogVisible.value = false;
 
   emit('change', props.model[props.name]);
 };
@@ -234,4 +247,9 @@ const toggleValue = (row: MockSchema, key: 'enable' | 'useInEditor', value: bool
     index,
   });
 };
+
+const addDialogVisible = defineModel<boolean>('visible', { default: false });
+const { height: editorHeight } = useEditorContentHeight();
+const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
 </script>

package/src/hooks/index.ts

@@ -20,3 +20,5 @@ export * from './use-code-block-edit';
 export * from './use-data-source-method';
 export * from './use-stage';
 export * from './use-float-box';
+export * from './use-window-rect';
+export * from './use-editor-content-height';

package/src/hooks/use-code-block-edit.ts

@@ -20,7 +20,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
     }
 
     codeConfig.value = {
-      name: '代码块',
+      name: '',
       content: `({app, params}) => {\n  // place your code here\n}`,
       params: [],
     };

package/src/hooks/use-editor-content-height.ts

@@ -0,0 +1,20 @@
+import { computed, inject, ref, watchEffect } from 'vue';
+
+import type { Services } from '@editor/type';
+
+export const useEditorContentHeight = () => {
+  const services = inject<Services>('services');
+  const frameworkHeight = computed(() => services?.uiService.get('frameworkRect').height || 0);
+  const navMenuHeight = computed(() => services?.uiService.get('navMenuRect').height || 0);
+  const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
+
+  const height = ref(0);
+  watchEffect(() => {
+    if (height.value > 0 && height.value === editorContentHeight.value) return;
+    height.value = editorContentHeight.value;
+  });
+
+  return {
+    height,
+  };
+};

package/src/hooks/use-float-box.ts

@@ -1,4 +1,6 @@
-import { computed, ComputedRef, ref, watch } from 'vue';
+import { computed, ComputedRef, inject, ref, watch } from 'vue';
+
+import type { Services } from '@editor/type';
 
 interface State {
   status: boolean;
@@ -7,6 +9,8 @@ interface State {
 }
 
 export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
+  const services = inject<Services>('services');
+
   const floatBoxStates = ref<{
     [key in (typeof slideKeys.value)[number]]: State;
   }>(
@@ -26,34 +30,36 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
   const showingBoxKeys = computed(() =>
     Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status),
   );
-  const isDraging = ref(false);
+  const isDragging = ref(false);
 
-  const dragstartHandler = () => (isDraging.value = true);
+  const dragstartHandler = () => (isDragging.value = true);
   const dragendHandler = (key: string, e: DragEvent) => {
+    const navMenuRect = services?.uiService?.get('navMenuRect');
     floatBoxStates.value[key] = {
       left: e.clientX,
-      top: e.clientY,
+      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
       status: true,
     };
-    isDraging.value = false;
+    isDragging.value = false;
   };
 
   document.body.addEventListener('dragover', (e: DragEvent) => {
-    if (!isDraging.value) return;
+    if (!isDragging.value) return;
     e.preventDefault();
   });
 
   watch(
     () => slideKeys.value,
-    () => {
-      for (const key in slideKeys.value) {
-        if (floatBoxStates.value[key]) continue;
-        floatBoxStates.value[key] = {
-          status: false,
-          top: 0,
-          left: 0,
-        };
-      }
+    (slideKeys) => {
+      slideKeys.forEach((key) => {
+        if (!floatBoxStates.value[key]) {
+          floatBoxStates.value[key] = {
+            status: false,
+            top: 0,
+            left: 0,
+          };
+        }
+      });
     },
     {
       deep: true,

package/src/hooks/use-next-float-box-position.ts

@@ -0,0 +1,29 @@
+import { Ref, ref } from 'vue';
+
+import { UiService } from '@editor/services/ui';
+
+export const useNextFloatBoxPosition = (uiService?: UiService, parent?: Ref<HTMLDivElement | null>) => {
+  const boxPosition = ref({
+    left: 0,
+    top: 0,
+  });
+
+  const calcBoxPosition = () => {
+    const columnWidth = uiService?.get('columnWidth');
+    const navMenuRect = uiService?.get('navMenuRect');
+    let left = columnWidth?.left ?? 0;
+    if (parent?.value) {
+      const rect = parent?.value?.getBoundingClientRect();
+      left = (rect?.left ?? 0) + (rect?.width ?? 0);
+    }
+    boxPosition.value = {
+      left,
+      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+    };
+  };
+
+  return {
+    boxPosition,
+    calcBoxPosition,
+  };
+};

package/src/hooks/use-window-rect.ts

@@ -0,0 +1,20 @@
+import { onBeforeUnmount, reactive } from 'vue';
+
+export const useWindowRect = () => {
+  const rect = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+
+  const windowResizeHandler = () => {
+    rect.width = globalThis.innerWidth;
+    rect.height = globalThis.innerHeight;
+  };
+
+  globalThis.addEventListener('resize', windowResizeHandler);
+
+  onBeforeUnmount(() => {
+    globalThis.removeEventListener('resize', windowResizeHandler);
+  });
+
+  return {
+    rect,
+  };
+};

package/src/layouts/CodeEditor.vue

@@ -5,12 +5,8 @@
         :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
         :style="!fullScreen && height ? `height: ${height}` : '100%'"
       >
-        <TMagicButton
-          class="magic-code-editor-full-screen-icon"
-          circle
-          size="small"
-          :icon="FullScreen"
-          @click="fullScreenHandler"
+        <TMagicButton class="magic-code-editor-full-screen-icon" circle size="small" @click="fullScreenHandler"
+          ><MIcon :icon="FullScreen"></MIcon
         ></TMagicButton>
         <div ref="codeEditor" class="magic-code-editor-content"></div>
       </div>
@@ -26,6 +22,7 @@ import serialize from 'serialize-javascript';
 
 import { TMagicButton } from '@tmagic/design';
 
+import MIcon from '@editor/components/Icon.vue';
 import { getConfig } from '@editor/utils/config';
 import monaco from '@editor/utils/monaco-editor';
 

package/src/layouts/Framework.vue

@@ -24,6 +24,7 @@
       :min-left="65"
       :min-right="20"
       :min-center="100"
+      :width="frameworkRect?.width || 0"
       @change="columnWidthChange"
     >
       <template #left>
@@ -57,7 +58,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 
@@ -101,40 +102,15 @@ const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 const getLeftColumnWidthCacheData = () =>
   Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
 
-const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
-const RightColumnWidthCacheData =
-  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
-
 const columnWidth = ref<Partial<GetColumnWidth>>({
-  left: leftColumnWidthCacheData,
+  left: getLeftColumnWidthCacheData(),
   center: 0,
-  right: RightColumnWidthCacheData,
+  right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH,
 });
 
-watch(
-  [pageLength, splitView],
-  () => {
-    splitView.value?.updateWidth();
-  },
-  {
-    immediate: true,
-  },
-);
-
-watch(
-  () => columnWidth.value.right,
-  (right) => {
-    if (typeof right === 'undefined') return;
-    globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
-  },
-);
-
-watch(
-  () => columnWidth.value.left,
-  (left) => {
-    globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
-  },
-);
+watch(pageLength, () => {
+  splitView.value?.updateWidth();
+});
 
 watch(
   () => uiService?.get('hideSlideBar'),
@@ -144,12 +120,35 @@ watch(
 );
 
 const columnWidthChange = (columnW: GetColumnWidth) => {
-  columnWidth.value.left = columnW.left;
-  columnWidth.value.center = columnW.center;
-  columnWidth.value.right = columnW.right;
+  columnWidth.value = columnW;
+
+  globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
+  globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
   uiService?.set('columnWidth', columnW);
 };
 
+const frameworkRect = computed(() => uiService?.get('frameworkRect'));
+
+const resizerObserver = new ResizeObserver((entries) => {
+  const { contentRect } = entries[0];
+  uiService?.set('frameworkRect', {
+    width: contentRect.width,
+    height: contentRect.height,
+    left: contentRect.left,
+    top: contentRect.top,
+  });
+});
+
+onMounted(() => {
+  if (content.value) {
+    resizerObserver.observe(content.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizerObserver.disconnect();
+});
+
 const saveCode = (value: string) => {
   try {
     const parseDSL = getConfig('parseDSL');

package/src/layouts/PropsPanel.vue

@@ -12,17 +12,44 @@
       @change="submit"
       @error="errorHandler"
     ></MForm>
+
+    <TMagicButton
+      class="m-editor-props-panel-src-icon"
+      circle
+      size="large"
+      title="源码"
+      :type="showSrc ? 'primary' : ''"
+      @click="showSrc = !showSrc"
+    >
+      <MIcon :icon="DocumentIcon"></MIcon>
+    </TMagicButton>
+
+    <CodeEditor
+      v-if="showSrc"
+      :height="`${editorContentHeight}px`"
+      :init-values="values"
+      :options="codeOptions"
+      :parse="true"
+      @save="saveCode"
+    ></CodeEditor>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
+import { TMagicButton } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
+import type { MNode } from '@tmagic/schema';
 
+import MIcon from '@editor/components/Icon.vue';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import type { PropsPanelSlots, Services } from '@editor/type';
 
+import CodeEditor from './CodeEditor.vue';
+
 defineSlots<PropsPanelSlots>();
 
 defineOptions({
@@ -33,8 +60,12 @@ defineProps<{
   extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
+const codeOptions = inject('codeOptions', {});
+
 const emit = defineEmits(['mounted', 'submit-error', 'form-error']);
 
+const showSrc = ref(false);
+
 const internalInstance = getCurrentInstance();
 const values = ref<FormValue>({});
 const configForm = ref<InstanceType<typeof MForm>>();
@@ -46,6 +77,8 @@ const nodes = computed(() => services?.editorService.get('nodes') || []);
 const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
 const stage = computed(() => services?.editorService.get('stage'));
 
+const { height: editorContentHeight } = useEditorContentHeight();
+
 const init = async () => {
   if (!node.value) {
     curFormConfig.value = [];
@@ -87,5 +120,9 @@ const errorHandler = (e: any) => {
   emit('form-error', e);
 };
 
+const saveCode = (values: MNode) => {
+  services?.editorService.update(values);
+};
+
 defineExpose({ configForm, submit });
 </script>