@tmagic/editor 1.3.16 → 1.4.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.16",
+  "version": "1.4.0-beta.2",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,14 +42,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.3.16",
-    "@tmagic/dep": "1.3.16",
-    "@tmagic/design": "1.3.16",
-    "@tmagic/form": "1.3.16",
-    "@tmagic/schema": "1.3.16",
-    "@tmagic/stage": "1.3.16",
-    "@tmagic/table": "1.3.16",
-    "@tmagic/utils": "1.3.16",
+    "@tmagic/core": "1.4.0-beta.2",
+    "@tmagic/dep": "1.4.0-beta.2",
+    "@tmagic/design": "1.4.0-beta.2",
+    "@tmagic/form": "1.4.0-beta.2",
+    "@tmagic/schema": "1.4.0-beta.2",
+    "@tmagic/stage": "1.4.0-beta.2",
+    "@tmagic/table": "1.4.0-beta.2",
+    "@tmagic/utils": "1.4.0-beta.2",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -57,16 +57,16 @@
     "gesto": "^1.19.1",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.41.0",
+    "monaco-editor": "^0.47.0",
     "moveable": "^0.51.1",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.3.8"
+    "vue": "^3.4.21"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.16",
-    "@tmagic/form": "1.3.16",
-    "monaco-editor": "^0.41.0",
-    "vue": "^3.3.8"
+    "@tmagic/design": "1.4.0-beta.2",
+    "@tmagic/form": "1.4.0-beta.2",
+    "monaco-editor": "^0.47.0",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -74,18 +74,20 @@
     "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
     "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/compiler-sfc": "^3.3.8",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/compiler-sfc": "^3.4.21",
+    "@vue/test-utils": "^2.4.4",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "tsc-alias": "^1.8.5",
-    "typescript": "^5.0.4",
-    "vite": "^5.0.7",
-    "vue-tsc": "^1.8.25"
+    "type-fest": "^4.10.3",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vue-tsc": "^2.0.6"
   },
   "scripts": {
     "build": "npm run build:type && vite build",
     "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "clear:type": "rimraf ./types"
+    "clear:type": "rimraf ./types",
+    "type:check": "vue-tsc --noEmit"
   }
 }

package/src/components/CodeBlockEditor.vue

@@ -1,26 +1,39 @@
 <template>
-  <component
-    :is="slideType === 'box' ? MFormBox : MFormDrawer"
-    class="m-editor-code-block-editor"
-    ref="fomDrawer"
-    label-width="80px"
-    :close-on-press-escape="false"
-    :title="content.name"
-    :width="size"
-    :config="functionConfig"
-    :values="content"
-    :disabled="disabled"
+  <!-- 代码块编辑区 -->
+  <FloatingBox
+    v-model:visible="boxVisible"
+    v-model:width="width"
+    v-model:height="codeBlockEditorHeight"
+    :title="content.name ? `${disabled ? '查看' : '编辑'}${content.name}` : '新增代码'"
+    :position="boxPosition"
     :before-close="beforeClose"
-    @change="changeHandler"
-    @submit="submitForm"
-    @error="errorHandler"
-    @open="openHandler"
-    @closed="closedHandler"
   >
-    <template #left>
-      <TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+    <template #body>
+      <div ref="floatingBoxBody" style="height: 100%"></div>
     </template>
-  </component>
+  </FloatingBox>
+
+  <Teleport :to="floatingBoxBody" :disabled="slideType === 'box'" v-if="editVisible">
+    <MFormBox
+      class="m-editor-code-block-editor"
+      ref="formBox"
+      label-width="80px"
+      :close-on-press-escape="false"
+      :title="content.name"
+      :config="functionConfig"
+      :values="content"
+      :disabled="disabled"
+      :height="floatingBoxBody?.clientHeight"
+      @change="changeHandler"
+      @submit="submitForm"
+      @error="errorHandler"
+      @closed="closedHandler"
+    >
+      <template #left>
+        <TMagicButton v-if="!disabled" type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+      </template>
+    </MFormBox>
+  </Teleport>
 
   <TMagicDialog v-model="difVisible" title="查看修改" fullscreen>
     <div style="display: flex; margin-bottom: 10px">
@@ -34,8 +47,8 @@
       type="diff"
       language="json"
       :initValues="content.content"
-      :modifiedValues="fomDrawer?.form?.values.content"
-      :style="`height: ${height - 200}px`"
+      :modifiedValues="formBox?.form?.values.content"
+      :style="`height: ${windowRect.height - 150}px`"
     ></CodeEditor>
 
     <template #footer>
@@ -48,12 +61,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref } from 'vue';
+import { computed, inject, nextTick, ref } from 'vue';
 
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import { ColumnConfig, FormConfig, FormState, MFormBox, MFormDrawer } from '@tmagic/form';
+import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
 
+import FloatingBox from '@editor/components/FloatingBox.vue';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import { useWindowRect } from '@editor/hooks/use-window-rect';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { Services, SlideType } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
@@ -62,6 +78,9 @@ defineOptions({
   name: 'MEditorCodeBlockEditor',
 });
 
+const width = defineModel<number>('width', { default: 670 });
+const boxVisible = defineModel<boolean>('visible', { default: false });
+
 const props = defineProps<{
   content: CodeBlockContent;
   disabled?: boolean;
@@ -76,38 +95,23 @@ const emit = defineEmits<{
 
 const services = inject<Services>('services');
 
-const difVisible = ref(false);
-const height = ref(globalThis.innerHeight);
-
-const windowReizehandler = () => {
-  height.value = globalThis.innerHeight;
-};
-
-globalThis.addEventListener('resize', windowReizehandler);
+const { height: codeBlockEditorHeight } = useEditorContentHeight();
 
-onBeforeUnmount(() => {
-  globalThis.removeEventListener('resize', windowReizehandler);
-});
+const difVisible = ref(false);
+const { rect: windowRect } = useWindowRect();
 
 const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();
 
 const diffChange = () => {
-  if (!magicVsEditor.value || !fomDrawer.value?.form) {
+  if (!magicVsEditor.value || !formBox.value?.form) {
     return;
   }
 
-  fomDrawer.value.form.values.content = magicVsEditor.value.getEditorValue();
+  formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
 
   difVisible.value = false;
 };
 
-const columnWidth = computed(() => services?.uiService.get('columnWidth'));
-const size = computed(() =>
-  columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600,
-);
-
-const codeEditorHeight = ref('600px');
-
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',
   label: '参数类型',
@@ -191,7 +195,7 @@ const functionConfig = computed<FormConfig>(() => [
     name: 'content',
     type: 'vs-code',
     options: inject('codeOptions', {}),
-    height: codeEditorHeight.value,
+    height: '500px',
     onChange: (formState: FormState | undefined, code: string) => {
       try {
         // 检测js代码是否存在语法错误
@@ -208,6 +212,7 @@ const functionConfig = computed<FormConfig>(() => [
 ]);
 
 const submitForm = (values: CodeBlockContent) => {
+  changedValue.value = undefined;
   emit('submit', values);
 };
 
@@ -215,16 +220,7 @@ const errorHandler = (error: any) => {
   tMagicMessage.error(error.message);
 };
 
-const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
-
-const openHandler = () => {
-  setTimeout(() => {
-    if (fomDrawer.value) {
-      const height = fomDrawer.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
-      codeEditorHeight.value = `${height > 100 ? height : 600}px`;
-    }
-  });
-};
+const formBox = ref<InstanceType<typeof MFormBox>>();
 
 const changedValue = ref<CodeBlockContent>();
 const changeHandler = (values: CodeBlockContent) => {
@@ -233,6 +229,7 @@ const changeHandler = (values: CodeBlockContent) => {
 
 const beforeClose = (done: (cancel?: boolean) => void) => {
   if (!changedValue.value) {
+    editVisible.value = false;
     done();
     return;
   }
@@ -245,10 +242,14 @@ const beforeClose = (done: (cancel?: boolean) => void) => {
     })
     .then(() => {
       changedValue.value && submitForm(changedValue.value);
+      editVisible.value = false;
       done();
     })
     .catch((action: string) => {
-      done(action === 'close');
+      if (action === 'cancel') {
+        editVisible.value = false;
+      }
+      done(action === 'cancel');
     });
 };
 
@@ -256,13 +257,35 @@ const closedHandler = () => {
   changedValue.value = undefined;
 };
 
+const editVisible = ref<boolean>(false);
+const floatingBoxBody = ref<HTMLDivElement>();
+
+const boxPosition = computed(() => {
+  const columnWidth = services?.uiService?.get('columnWidth');
+  const navMenuRect = services?.uiService?.get('navMenuRect');
+  return {
+    left: columnWidth?.left ?? 0,
+    top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+  };
+});
+
 defineExpose({
-  show() {
-    fomDrawer.value?.show();
+  async show() {
+    if (props.slideType !== 'box') {
+      boxVisible.value = true;
+      await nextTick();
+    }
+
+    editVisible.value = true;
   },
 
-  hide() {
-    fomDrawer.value?.hide();
+  async hide() {
+    editVisible.value = false;
+
+    if (props.slideType !== 'box') {
+      await nextTick();
+      boxVisible.value = false;
+    }
   },
 });
 </script>

package/src/components/FloatingBox.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body" v-if="visible">
-    <div ref="target" class="m-editor-float-box" :style="style">
-      <div ref="dragTarget" class="m-editor-float-box-title">
+    <div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
+      <div ref="titleEl" class="m-editor-float-box-title">
         <slot name="title">
           <span>{{ title }}</span>
         </slot>
@@ -9,7 +9,7 @@
           <TMagicButton link size="small" :icon="Close" @click="closeHandler"></TMagicButton>
         </div>
       </div>
-      <div class="m-editor-float-box-body">
+      <div class="m-editor-float-box-body" :style="{ height: `${bodyHeight}px` }">
         <slot name="body"></slot>
       </div>
     </div>
@@ -21,37 +21,53 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
-import { TMagicButton } from '@tmagic/design';
+import { TMagicButton, useZIndex } from '@tmagic/design';
 
 interface Position {
   left: number;
   top: number;
 }
 
-interface Rect {
-  width: number | string;
-  height: number | string;
-}
-
-const props = withDefaults(defineProps<{ visible: boolean; position?: Position; rect?: Rect; title?: string }>(), {
-  visible: false,
-  title: '',
-  position: () => ({ left: 0, top: 0 }),
-  rect: () => ({ width: 'auto', height: 'auto' }),
-});
+const width = defineModel<number>('width', { default: 0 });
+const height = defineModel<number>('height', { default: 0 });
+const visible = defineModel<boolean>('visible', { default: false });
 
-const emit = defineEmits<{
-  'update:visible': [boolean];
-}>();
+const props = withDefaults(
+  defineProps<{
+    position?: Position;
+    title?: string;
+    beforeClose?: (done: (cancel?: boolean) => void) => void;
+  }>(),
+  {
+    title: '',
+    position: () => ({ left: 0, top: 0 }),
+  },
+);
 
 const target = ref<HTMLDivElement>();
-const dragTarget = ref<HTMLDivElement>();
+const titleEl = ref<HTMLDivElement>();
+
+const zIndex = useZIndex();
+const curZIndex = ref<number>(zIndex.nextZIndex());
+
+const titleHeight = ref(0);
+const bodyHeight = computed(() => {
+  if (height.value) {
+    return height.value - titleHeight.value;
+  }
+
+  if (target.value) {
+    return target.value.clientHeight - titleHeight.value;
+  }
+
+  return 'auto';
+});
 
 const style = computed(() => ({
   left: `${props.position.left}px`,
   top: `${props.position.top}px`,
-  width: typeof props.rect.width === 'string' ? props.rect.width : `${props.rect.width}px`,
-  height: typeof props.rect.height === 'string' ? props.rect.height : `${props.rect.height}px`,
+  width: width.value ? `${width.value}px` : 'auto',
+  height: height.value ? `${height.value}px` : 'auto',
 }));
 
 let moveable: VanillaMoveable | null = null;
@@ -66,10 +82,11 @@ const initMoveable = () => {
     keepRatio: false,
     origin: false,
     snappable: true,
-    dragTarget: dragTarget.value,
+    dragTarget: titleEl.value,
     dragTargetSelf: false,
     linePadding: 10,
     controlPadding: 10,
+    bounds: { left: 0, top: 0, right: 0, bottom: 0, position: 'css' },
   });
 
   moveable.on('drag', (e) => {
@@ -77,6 +94,8 @@ const initMoveable = () => {
   });
 
   moveable.on('resize', (e) => {
+    width.value = e.width;
+    height.value = e.height;
     e.target.style.width = `${e.width}px`;
     e.target.style.height = `${e.height}px`;
     e.target.style.transform = e.drag.transform;
@@ -89,11 +108,22 @@ const destroyMoveable = () => {
 };
 
 watch(
-  () => props.visible,
+  visible,
   async (visible) => {
     if (visible) {
       await nextTick();
-      initMoveable();
+
+      const targetRect = target.value?.getBoundingClientRect();
+      if (targetRect) {
+        width.value = targetRect.width;
+        height.value = targetRect.height;
+        initMoveable();
+      }
+
+      if (titleEl.value) {
+        const titleRect = titleEl.value.getBoundingClientRect();
+        titleHeight.value = titleRect.height;
+      }
     } else {
       destroyMoveable();
     }
@@ -107,11 +137,27 @@ onBeforeUnmount(() => {
   destroyMoveable();
 });
 
+const hide = (cancel?: boolean) => {
+  if (cancel !== false) {
+    visible.value = false;
+  }
+};
+
 const closeHandler = () => {
-  emit('update:visible', false);
+  if (typeof props.beforeClose === 'function') {
+    props.beforeClose(hide);
+  } else {
+    hide();
+  }
+};
+
+const nextZIndex = () => {
+  curZIndex.value = zIndex.nextZIndex();
 };
 
 defineExpose({
+  bodyHeight,
   target,
+  titleEl,
 });
 </script>

package/src/components/SplitView.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
 import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
@@ -34,6 +34,7 @@ const emit = defineEmits(['update:left', 'change', 'update:right']);
 
 const props = withDefaults(
   defineProps<{
+    width?: number;
     left?: number;
     right?: number;
     minLeft?: number;
@@ -54,8 +55,11 @@ const el = ref<HTMLElement>();
 
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');
+const center = ref(0);
+
+let clientWidth = 0;
 
-const getCenterWidth = (clientWidth: number, l = 0, r = 0) => {
+const getCenterWidth = (l = 0, r = 0) => {
   let right = r > 0 ? r : 0;
   let left = l > 0 ? l : 0;
   let center = clientWidth - left - right;
@@ -76,45 +80,51 @@ const getCenterWidth = (clientWidth: number, l = 0, r = 0) => {
   };
 };
 
-let clientWidth = 0;
-const resizerObserver = new ResizeObserver((entries) => {
-  for (const { contentRect } of entries) {
-    clientWidth = contentRect.width;
+const widthChange = (width: number) => {
+  if (width <= 0) {
+    return;
+  }
 
-    let left = props.left || 0;
-    let right = props.right || 0;
+  clientWidth = width;
+  let left = props.left || 0;
+  let right = props.right || 0;
 
-    if (left > clientWidth) {
-      left = clientWidth / 3;
-    }
+  if (left > clientWidth) {
+    left = clientWidth / 3;
+  }
 
-    if (right > clientWidth) {
-      right = clientWidth / 3;
-    }
+  if (right > clientWidth) {
+    right = clientWidth / 3;
+  }
 
-    const columnWidth = getCenterWidth(clientWidth, left, right);
+  const columnWidth = getCenterWidth(left, right);
 
-    center.value = columnWidth.center;
+  center.value = columnWidth.center;
 
-    emit('change', {
-      left: columnWidth.left,
-      center: center.value,
-      right: columnWidth.right,
-    });
-  }
-});
+  emit('change', columnWidth);
+};
 
-onMounted(() => {
-  if (el.value) {
-    resizerObserver.observe(el.value);
-  }
-});
+if (typeof props.width !== 'number') {
+  const resizerObserver = new ResizeObserver((entries) => {
+    for (const { contentRect } of entries) {
+      widthChange(contentRect.width);
+    }
+  });
 
-onBeforeUnmount(() => {
-  resizerObserver.disconnect();
-});
+  onMounted(() => {
+    if (el.value) {
+      resizerObserver.observe(el.value);
+    }
+  });
 
-const center = ref(0);
+  onBeforeUnmount(() => {
+    resizerObserver.disconnect();
+  });
+} else {
+  watchEffect(() => {
+    if (typeof props.width === 'number') widthChange(props.width);
+  });
+}
 
 const changeLeft = ({ deltaX }: OnDrag) => {
   if (typeof props.left === 'undefined') return;
@@ -125,7 +135,7 @@ const changeLeft = ({ deltaX }: OnDrag) => {
     left = props.left;
   }
 
-  const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+  const columnWidth = getCenterWidth(left, props.right || 0);
 
   center.value = columnWidth.center;
 
@@ -145,7 +155,7 @@ const changeRight = ({ deltaX }: OnDrag) => {
     right = props.right;
   }
 
-  const columnWidth = getCenterWidth(clientWidth, props.left, right);
+  const columnWidth = getCenterWidth(props.left, right);
 
   center.value = columnWidth.center;
 
@@ -158,7 +168,8 @@ const changeRight = ({ deltaX }: OnDrag) => {
 
 defineExpose({
   updateWidth() {
-    const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+    clientWidth = props.width ?? el.value?.clientWidth ?? clientWidth;
+    const columnWidth = getCenterWidth(props.left, props.right);
 
     emit('change', {
       left: columnWidth.left,

package/src/fields/Code.vue

@@ -13,12 +13,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
 defineOptions({
-  name: 'MEditorCode',
+  name: 'MFieldsVsCode',
 });
 
 const emit = defineEmits<{
@@ -27,14 +27,16 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
-      language?: string;
-      options?: {
-        [key: string]: any;
-      };
-      height?: string;
-      parse?: boolean;
-    }>
+    FieldProps<
+      {
+        language?: string;
+        options?: {
+          [key: string]: any;
+        };
+        height?: string;
+        parse?: boolean;
+      } & FormItem
+    >
   >(),
   {
     disabled: false,