@tmagic/editor 1.4.0-beta.1 → 1.4.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0-beta.1",
+  "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.4.0-beta.1",
-    "@tmagic/dep": "1.4.0-beta.1",
-    "@tmagic/design": "1.4.0-beta.1",
-    "@tmagic/form": "1.4.0-beta.1",
-    "@tmagic/schema": "1.4.0-beta.1",
-    "@tmagic/stage": "1.4.0-beta.1",
-    "@tmagic/table": "1.4.0-beta.1",
-    "@tmagic/utils": "1.4.0-beta.1",
+    "@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",
@@ -63,8 +63,8 @@
     "vue": "^3.4.21"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.4.0-beta.1",
-    "@tmagic/form": "1.4.0-beta.1",
+    "@tmagic/design": "1.4.0-beta.2",
+    "@tmagic/form": "1.4.0-beta.2",
     "monaco-editor": "^0.47.0",
     "vue": "^3.4.21"
   },

package/src/components/CodeBlockEditor.vue

@@ -1,30 +1,36 @@
 <template>
   <!-- 代码块编辑区 -->
-  <FloatingBox v-model:visible="boxVisible" title="代码编辑" :position="boxPosition" :before-close="beforeClose">
+  <FloatingBox
+    v-model:visible="boxVisible"
+    v-model:width="width"
+    v-model:height="codeBlockEditorHeight"
+    :title="content.name ? `${disabled ? '查看' : '编辑'}${content.name}` : '新增代码'"
+    :position="boxPosition"
+    :before-close="beforeClose"
+  >
     <template #body>
-      <div ref="floatingBoxBody"></div>
+      <div ref="floatingBoxBody" style="height: 100%"></div>
     </template>
   </FloatingBox>
 
   <Teleport :to="floatingBoxBody" :disabled="slideType === 'box'" v-if="editVisible">
     <MFormBox
       class="m-editor-code-block-editor"
-      ref="fomDrawer"
+      ref="formBox"
       label-width="80px"
       :close-on-press-escape="false"
       :title="content.name"
-      :width="size"
       :config="functionConfig"
       :values="content"
       :disabled="disabled"
+      :height="floatingBoxBody?.clientHeight"
       @change="changeHandler"
       @submit="submitForm"
       @error="errorHandler"
-      @open="openHandler"
       @closed="closedHandler"
     >
       <template #left>
-        <TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+        <TMagicButton v-if="!disabled" type="primary" link @click="difVisible = true">查看修改</TMagicButton>
       </template>
     </MFormBox>
   </Teleport>
@@ -41,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>
@@ -55,13 +61,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, 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';
@@ -70,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;
@@ -84,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: '参数类型',
@@ -199,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代码是否存在语法错误
@@ -216,6 +212,7 @@ const functionConfig = computed<FormConfig>(() => [
 ]);
 
 const submitForm = (values: CodeBlockContent) => {
+  changedValue.value = undefined;
   emit('submit', values);
 };
 
@@ -223,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) => {
@@ -241,6 +229,7 @@ const changeHandler = (values: CodeBlockContent) => {
 
 const beforeClose = (done: (cancel?: boolean) => void) => {
   if (!changedValue.value) {
+    editVisible.value = false;
     done();
     return;
   }
@@ -253,9 +242,13 @@ const beforeClose = (done: (cancel?: boolean) => void) => {
     })
     .then(() => {
       changedValue.value && submitForm(changedValue.value);
+      editVisible.value = false;
       done();
     })
     .catch((action: string) => {
+      if (action === 'cancel') {
+        editVisible.value = false;
+      }
       done(action === 'cancel');
     });
 };
@@ -264,7 +257,6 @@ const closedHandler = () => {
   changedValue.value = undefined;
 };
 
-const boxVisible = ref<boolean>(false);
 const editVisible = ref<boolean>(false);
 const floatingBoxBody = ref<HTMLDivElement>();
 
@@ -281,14 +273,19 @@ defineExpose({
   async show() {
     if (props.slideType !== 'box') {
       boxVisible.value = true;
+      await nextTick();
     }
-    await nextTick();
+
     editVisible.value = true;
-    fomDrawer.value?.show();
   },
 
-  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, zIndex: curZIndex }" @mousedown="nextZIndex">
-      <div ref="dragTarget" class="m-editor-float-box-title">
+      <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>
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
@@ -28,54 +28,46 @@ interface Position {
   top: number;
 }
 
-interface Rect {
-  width: number | string;
-  height: number | string;
-}
+const width = defineModel<number>('width', { default: 0 });
+const height = defineModel<number>('height', { default: 0 });
+const visible = defineModel<boolean>('visible', { default: false });
 
 const props = withDefaults(
   defineProps<{
-    visible: boolean;
     position?: Position;
-    rect?: Rect;
     title?: string;
     beforeClose?: (done: (cancel?: boolean) => void) => void;
   }>(),
   {
-    visible: false,
     title: '',
     position: () => ({ left: 0, top: 0 }),
-    rect: () => ({ width: 'auto', height: 'auto' }),
   },
 );
 
-const emit = defineEmits<{
-  'update:visible': [boolean];
-}>();
-
 const target = ref<HTMLDivElement>();
-const dragTarget = ref<HTMLDivElement>();
+const titleEl = ref<HTMLDivElement>();
 
 const zIndex = useZIndex();
 const curZIndex = ref<number>(zIndex.nextZIndex());
 
-const rect = ref({
-  width: props.rect.width,
-  height: props.rect.height,
-});
+const titleHeight = ref(0);
+const bodyHeight = computed(() => {
+  if (height.value) {
+    return height.value - titleHeight.value;
+  }
 
-watchEffect(() => {
-  rect.value = {
-    width: props.rect.width,
-    height: props.rect.height,
-  };
+  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 rect.value.width === 'string' ? rect.value.width : `${rect.value.width}px`,
-  height: typeof rect.value.height === 'string' ? rect.value.height : `${rect.value.height}px`,
+  width: width.value ? `${width.value}px` : 'auto',
+  height: height.value ? `${height.value}px` : 'auto',
 }));
 
 let moveable: VanillaMoveable | null = null;
@@ -90,7 +82,7 @@ const initMoveable = () => {
     keepRatio: false,
     origin: false,
     snappable: true,
-    dragTarget: dragTarget.value,
+    dragTarget: titleEl.value,
     dragTargetSelf: false,
     linePadding: 10,
     controlPadding: 10,
@@ -102,8 +94,8 @@ const initMoveable = () => {
   });
 
   moveable.on('resize', (e) => {
-    rect.value.width = e.width;
-    rect.value.height = e.height;
+    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;
@@ -116,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();
     }
@@ -136,7 +139,7 @@ onBeforeUnmount(() => {
 
 const hide = (cancel?: boolean) => {
   if (cancel !== false) {
-    emit('update:visible', false);
+    visible.value = false;
   }
 };
 
@@ -153,6 +156,8 @@ const 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/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) return;
+    height.value = editorContentHeight.value;
+  });
+
+  return {
+    height,
+  };
+};

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

@@ -26,34 +26,34 @@ 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) => {
     floatBoxStates.value[key] = {
       left: e.clientX,
       top: e.clientY,
       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;
+    (slideKeys) => {
+      slideKeys.forEach((key) => {
+        if (floatBoxStates.value[key]) return;
         floatBoxStates.value[key] = {
           status: false,
           top: 0,
           left: 0,
         };
-      }
+      });
     },
     {
       deep: true,

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,
+  };
+};