@tmagic/editor 1.4.0-beta.1 → 1.4.0

package/package.json

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

package/src/components/CodeBlockEditor.vue

@@ -1,81 +1,90 @@
 <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>
+      <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"
+        style="height: 100%"
+        @change="changeHandler"
+        @submit="submitForm"
+        @error="errorHandler"
+        @closed="closedHandler"
+      >
+        <template #left>
+          <TMagicButton v-if="!disabled" type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+        </template>
+      </MFormBox>
     </template>
   </FloatingBox>
 
-  <Teleport :to="floatingBoxBody" :disabled="slideType === 'box'" v-if="editVisible">
-    <MFormBox
-      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"
-      @change="changeHandler"
-      @submit="submitForm"
-      @error="errorHandler"
-      @open="openHandler"
-      @closed="closedHandler"
-    >
-      <template #left>
-        <TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+  <Teleport to="body">
+    <TMagicDialog title="查看修改" v-model="difVisible" fullscreen>
+      <div style="display: flex; margin-bottom: 10px">
+        <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
+        <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
+      </div>
+
+      <CodeEditor
+        v-if="difVisible"
+        ref="magicVsEditor"
+        type="diff"
+        language="json"
+        :initValues="content.content"
+        :modifiedValues="formBox?.form?.values.content"
+        :style="`height: ${windowRect.height - 150}px`"
+      ></CodeEditor>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <TMagicButton size="small" @click="difVisible = false">取消</TMagicButton>
+          <TMagicButton size="small" type="primary" @click="diffChange">确定</TMagicButton>
+        </span>
       </template>
-    </MFormBox>
+    </TMagicDialog>
   </Teleport>
-
-  <TMagicDialog v-model="difVisible" title="查看修改" fullscreen>
-    <div style="display: flex; margin-bottom: 10px">
-      <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
-      <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
-    </div>
-
-    <CodeEditor
-      v-if="difVisible"
-      ref="magicVsEditor"
-      type="diff"
-      language="json"
-      :initValues="content.content"
-      :modifiedValues="fomDrawer?.form?.values.content"
-      :style="`height: ${height - 200}px`"
-    ></CodeEditor>
-
-    <template #footer>
-      <span class="dialog-footer">
-        <TMagicButton size="small" @click="difVisible = false">取消</TMagicButton>
-        <TMagicButton size="small" type="primary" @click="diffChange">确定</TMagicButton>
-      </span>
-    </template>
-  </TMagicDialog>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, onBeforeUnmount, ref } from 'vue';
+import { computed, inject, Ref, 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 { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
+import { useWindowRect } from '@editor/hooks/use-window-rect';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
-import type { Services, SlideType } from '@editor/type';
+import type { Services } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
 defineOptions({
   name: 'MEditorCodeBlockEditor',
 });
 
+const width = defineModel<number>('width', { default: 670 });
+const boxVisible = defineModel<boolean>('visible', { default: false });
+
 const props = defineProps<{
   content: CodeBlockContent;
   disabled?: boolean;
   isDataSource?: boolean;
   dataSourceType?: string;
-  slideType?: SlideType;
 }>();
 
 const emit = defineEmits<{
@@ -84,38 +93,23 @@ const emit = defineEmits<{
 
 const services = inject<Services>('services');
 
-const difVisible = ref(false);
-const height = ref(globalThis.innerHeight);
-
-const windowReizehandler = () => {
-  height.value = globalThis.innerHeight;
-};
+const { height: codeBlockEditorHeight } = useEditorContentHeight();
 
-globalThis.addEventListener('resize', windowReizehandler);
-
-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 +193,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 +210,7 @@ const functionConfig = computed<FormConfig>(() => [
 ]);
 
 const submitForm = (values: CodeBlockContent) => {
+  changedValue.value = undefined;
   emit('submit', values);
 };
 
@@ -223,16 +218,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) => {
@@ -256,6 +242,8 @@ const beforeClose = (done: (cancel?: boolean) => void) => {
       done();
     })
     .catch((action: string) => {
+      if (action === 'cancel') {
+      }
       done(action === 'cancel');
     });
 };
@@ -264,31 +252,17 @@ const closedHandler = () => {
   changedValue.value = undefined;
 };
 
-const boxVisible = ref<boolean>(false);
-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),
-  };
-});
+const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
 
 defineExpose({
   async show() {
-    if (props.slideType !== 'box') {
-      boxVisible.value = true;
-    }
-    await nextTick();
-    editVisible.value = true;
-    fomDrawer.value?.show();
+    calcBoxPosition();
+    boxVisible.value = true;
   },
 
-  hide() {
-    fomDrawer.value?.hide();
+  async hide() {
+    boxVisible.value = false;
   },
 });
 </script>

package/src/components/FloatingBox.vue

@@ -1,15 +1,15 @@
 <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>
         <div>
-          <TMagicButton link size="small" :icon="Close" @click="closeHandler"></TMagicButton>
+          <TMagicButton link size="small" @click="closeHandler"><MIcon :icon="Close"></MIcon></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,67 +17,71 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
 import { TMagicButton, useZIndex } from '@tmagic/design';
 
+import MIcon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+
 interface Position {
   left: number;
   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 curZIndex = ref<number>(0);
 
-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;
+  }
+
+  if (target.value) {
+    return target.value.clientHeight - titleHeight.value;
+  }
+
+  return 'auto';
 });
 
-watchEffect(() => {
-  rect.value = {
-    width: props.rect.width,
-    height: props.rect.height,
+const services = inject<Services>('services');
+const frameworkWidth = computed(() => services?.uiService.get('frameworkRect').width || 0);
+const style = computed(() => {
+  let { left } = props.position;
+  if (width.value) {
+    left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+  }
+
+  return {
+    left: `${left}px`,
+    top: `${props.position.top}px`,
+    width: width.value ? `${width.value}px` : 'auto',
+    height: height.value ? `${height.value}px` : '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`,
-}));
-
 let moveable: VanillaMoveable | null = null;
 
 const initMoveable = () => {
@@ -90,7 +94,7 @@ const initMoveable = () => {
     keepRatio: false,
     origin: false,
     snappable: true,
-    dragTarget: dragTarget.value,
+    dragTarget: titleEl.value,
     dragTargetSelf: false,
     linePadding: 10,
     controlPadding: 10,
@@ -102,8 +106,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 +120,23 @@ const destroyMoveable = () => {
 };
 
 watch(
-  () => props.visible,
+  visible,
   async (visible) => {
     if (visible) {
       await nextTick();
-      initMoveable();
+      curZIndex.value = zIndex.nextZIndex();
+
+      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 +152,7 @@ onBeforeUnmount(() => {
 
 const hide = (cancel?: boolean) => {
   if (cancel !== false) {
-    emit('update:visible', false);
+    visible.value = false;
   }
 };
 
@@ -152,7 +168,11 @@ const nextZIndex = () => {
   curZIndex.value = zIndex.nextZIndex();
 };
 
+provide('parentFloating', target);
+
 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/DataSourceFieldSelect.vue

@@ -19,9 +19,9 @@
       style="margin-left: 5px"
       link
       :type="showDataSourceFieldSelect ? 'primary' : 'default'"
-      :icon="Coin"
       :size="size"
       @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+      ><MIcon :icon="Coin"></MIcon
     ></TMagicButton>
   </div>
 </template>
@@ -36,6 +36,7 @@ import { MCascader } from '@tmagic/form';
 import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
+import MIcon from '@editor/components/Icon.vue';
 import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
 
 defineOptions({