@tmagic/editor 1.3.0-alpha.9 → 1.3.0-beta.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.9",
+  "version": "1.3.0-beta.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,27 +46,27 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.9",
-    "@tmagic/design": "1.3.0-alpha.9",
-    "@tmagic/form": "1.3.0-alpha.9",
-    "@tmagic/schema": "1.3.0-alpha.9",
-    "@tmagic/stage": "1.3.0-alpha.9",
-    "@tmagic/table": "1.3.0-alpha.9",
-    "@tmagic/utils": "1.3.0-alpha.9",
+    "@tmagic/core": "1.3.0-beta.1",
+    "@tmagic/design": "1.3.0-beta.1",
+    "@tmagic/form": "1.3.0-beta.1",
+    "@tmagic/schema": "1.3.0-beta.1",
+    "@tmagic/stage": "1.3.0-beta.1",
+    "@tmagic/table": "1.3.0-beta.1",
+    "@tmagic/utils": "1.3.0-beta.1",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
-    "gesto": "^1.7.0",
-    "keycon": "^1.1.2",
+    "gesto": "^1.19.1",
+    "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.39.0",
+    "monaco-editor": "^0.41.0",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.9",
-    "@tmagic/form": "1.3.0-alpha.9",
-    "monaco-editor": "^0.39.0",
+    "@tmagic/design": "1.3.0-beta.1",
+    "@tmagic/form": "1.3.0-beta.1",
+    "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {
@@ -81,7 +81,7 @@
     "sass": "^1.35.1",
     "tsc-alias": "^1.8.5",
     "typescript": "^5.0.4",
-    "vite": "^4.3.8",
+    "vite": "^4.4.4",
     "vue-tsc": "^1.6.5"
   }
 }

package/src/Editor.vue

@@ -40,10 +40,6 @@
           <template #code-block-panel-tool="{ id, data }">
             <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
           </template>
-
-          <template #code-block-edit-panel-header="{ id }">
-            <slot name="code-block-edit-panel-header" :id="id"></slot>
-          </template>
         </Sidebar>
       </slot>
     </template>
@@ -61,7 +57,10 @@
 
     <template #props-panel>
       <slot name="props-panel">
-        <PropsPanel @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
+        <PropsPanel
+          :extend-state="extendFormState"
+          @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
+        >
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>

package/src/components/CodeBlockEditor.vue

@@ -0,0 +1,266 @@
+<template>
+  <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"
+    :before-close="beforeClose"
+    @change="changeHandler"
+    @submit="submitForm"
+    @error="errorHandler"
+    @open="openHandler"
+    @closed="closedHandler"
+  >
+    <template #left>
+      <TMagicButton type="primary" text @click="difVisible = true">查看修改</TMagicButton>
+    </template>
+  </MFormDrawer>
+
+  <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, onUnmounted, ref } from 'vue';
+
+import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
+import { ColumnConfig, FormConfig, FormState, MFormDrawer } from '@tmagic/form';
+import type { CodeBlockContent } from '@tmagic/schema';
+
+import CodeEditor from '@editor/layouts/CodeEditor.vue';
+import type { Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
+
+defineOptions({
+  name: 'MEditorCodeBlockEditor',
+});
+
+const props = defineProps<{
+  content: CodeBlockContent;
+  disabled?: boolean;
+  isDataSource?: boolean;
+  dataSourceType?: string;
+}>();
+
+const emit = defineEmits<{
+  submit: [values: CodeBlockContent];
+}>();
+
+const services = inject<Services>('services');
+
+const difVisible = ref(false);
+const height = ref(globalThis.innerHeight);
+
+const windowReizehandler = () => {
+  height.value = globalThis.innerHeight;
+};
+
+globalThis.addEventListener('resize', windowReizehandler);
+
+onUnmounted(() => {
+  globalThis.removeEventListener('resize', windowReizehandler);
+});
+
+const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();
+
+const diffChange = () => {
+  if (!magicVsEditor.value || !fomDrawer.value?.form) {
+    return;
+  }
+
+  fomDrawer.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: '参数类型',
+  items: [
+    {
+      text: '参数类型',
+      labelWidth: '70px',
+      type: 'select',
+      name: 'type',
+      options: [
+        {
+          text: '数字',
+          label: '数字',
+          value: 'number',
+        },
+        {
+          text: '字符串',
+          label: '字符串',
+          value: 'text',
+        },
+        {
+          text: '组件',
+          label: '组件',
+          value: 'ui-select',
+        },
+      ],
+    },
+  ],
+};
+
+const functionConfig = computed<FormConfig>(() => [
+  {
+    text: '名称',
+    name: 'name',
+    rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  },
+  {
+    text: '描述',
+    name: 'desc',
+  },
+  {
+    text: '执行时机',
+    name: 'timing',
+    type: 'select',
+    options: () => {
+      const options = [
+        { text: '初始化前', value: 'beforeInit' },
+        { text: '初始化后', value: 'afterInit' },
+      ];
+      if (props.dataSourceType !== 'base') {
+        options.push({ text: '请求前', value: 'beforeRequest' });
+        options.push({ text: '请求后', value: 'afterRequest' });
+      }
+      return options;
+    },
+    display: () => props.isDataSource,
+  },
+  {
+    type: 'table',
+    border: true,
+    text: '参数',
+    enableFullscreen: false,
+    enableToggleMode: false,
+    name: 'params',
+    dropSort: false,
+    items: [
+      {
+        type: 'text',
+        label: '参数名',
+        name: 'name',
+      },
+      {
+        type: 'text',
+        label: '描述',
+        name: 'extra',
+      },
+      services?.codeBlockService.getParamsColConfig() || defaultParamColConfig,
+    ],
+  },
+  {
+    name: 'content',
+    type: 'vs-code',
+    options: inject('codeOptions', {}),
+    height: codeEditorHeight.value,
+    onChange: (formState: FormState | undefined, code: string) => {
+      try {
+        // 检测js代码是否存在语法错误
+        getConfig('parseDSL')(code);
+
+        return code;
+      } catch (error: any) {
+        tMagicMessage.error(error.message);
+
+        throw error;
+      }
+    },
+  },
+]);
+
+const submitForm = (values: CodeBlockContent) => {
+  emit('submit', values);
+};
+
+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 changedValue = ref<CodeBlockContent>();
+const changeHandler = (values: CodeBlockContent) => {
+  changedValue.value = values;
+};
+
+const beforeClose = (done: (cancel?: boolean) => void) => {
+  if (!changedValue.value) {
+    done();
+    return;
+  }
+  tMagicMessageBox
+    .confirm('当前代码块已修改，是否保存？', '提示', {
+      confirmButtonText: '保存并关闭',
+      cancelButtonText: '不保存并关闭',
+      type: 'warning',
+      distinguishCancelAndClose: true,
+    })
+    .then(() => {
+      changedValue.value && submitForm(changedValue.value);
+      done();
+    })
+    .catch((action: string) => {
+      done(action === 'close');
+    });
+};
+
+const closedHandler = () => {
+  changedValue.value = undefined;
+};
+
+defineExpose({
+  show() {
+    fomDrawer.value?.show();
+  },
+
+  hide() {
+    fomDrawer.value?.hide();
+  },
+});
+</script>

package/src/components/CodeParams.vue

@@ -0,0 +1,60 @@
+<template>
+  <MForm
+    ref="form"
+    :config="codeParamsConfig"
+    :init-values="model"
+    :disabled="disabled"
+    :size="size"
+    :watch-props="false"
+    @change="onParamsChangeHandler"
+  ></MForm>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { FormConfig, MForm } from '@tmagic/form';
+
+import type { CodeParamStatement } from '@editor/type';
+import { error } from '@editor/utils';
+
+defineOptions({
+  name: 'MEditorCodeParams',
+});
+
+const props = defineProps<{
+  model: any;
+  size?: 'small' | 'default' | 'large';
+  disabled?: boolean;
+  name: string;
+  paramsConfig: CodeParamStatement[];
+}>();
+
+const emit = defineEmits(['change']);
+
+const form = ref<InstanceType<typeof MForm>>();
+
+const getFormConfig = (items: FormConfig = []) => [
+  {
+    type: 'fieldset',
+    items,
+    legend: '参数',
+    labelWidth: '70px',
+    name: props.name,
+  },
+];
+
+const codeParamsConfig = computed(() => getFormConfig(props.paramsConfig));
+
+/**
+ * 参数值修改更新
+ */
+const onParamsChangeHandler = async () => {
+  try {
+    const value = await form.value?.submitForm(true);
+    emit('change', value);
+  } catch (e) {
+    error(e);
+  }
+};
+</script>

package/src/components/ContentMenu.vue

@@ -1,30 +1,42 @@
 <template>
-  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
-    <div>
-      <ToolButton
-        v-for="(item, index) in menuData"
-        event-type="mouseup"
-        :data="item"
-        :key="index"
-        @mouseup="hide"
-        @mouseenter="showSubMenu(item)"
-      ></ToolButton>
+  <transition name="fade">
+    <div
+      v-show="visible"
+      class="magic-editor-content-menu"
+      ref="menu"
+      :style="menuStyle"
+      @mouseenter="mouseenterHandler()"
+    >
+      <slot name="title"></slot>
+      <div>
+        <ToolButton
+          v-for="(item, index) in menuData"
+          event-type="mouseup"
+          ref="buttons"
+          :class="{ active: active && item.id === active }"
+          :data="item"
+          :key="index"
+          @mouseup="clickHandler"
+          @mouseenter="showSubMenu(item, index)"
+        ></ToolButton>
+      </div>
+      <teleport to="body">
+        <content-menu
+          v-if="subMenuData.length"
+          class="sub-menu"
+          ref="subMenu"
+          :active="active"
+          :menu-data="subMenuData"
+          :is-sub-menu="true"
+          @hide="hide"
+        ></content-menu>
+      </teleport>
     </div>
-    <teleport to="body">
-      <content-menu
-        v-if="subMenuData.length"
-        class="sub-menu"
-        ref="subMenu"
-        :menu-data="subMenuData"
-        :is-sub-menu="true"
-        @hide="hide"
-      ></content-menu>
-    </teleport>
-  </div>
+  </transition>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '@editor/type';
 
@@ -38,24 +50,38 @@ const props = withDefaults(
   defineProps<{
     menuData?: (MenuButton | MenuComponent)[];
     isSubMenu?: boolean;
+    active?: string | number;
+    autoHide?: boolean;
   }>(),
   {
     menuData: () => [],
     isSubMenu: false,
+    autoHide: true,
   },
 );
 
-const emit = defineEmits(['hide', 'show']);
+const emit = defineEmits<{
+  hide: [];
+  show: [];
+  mouseenter: [];
+}>();
 
 const menu = ref<HTMLDivElement>();
+const buttons = ref<InstanceType<typeof ToolButton>[]>();
 const subMenu = ref<any>();
 const visible = ref(false);
 const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
-const menuStyle = ref({
-  left: '0',
-  top: '0',
+
+const menuPosition = ref({
+  left: 0,
+  top: 0,
 });
 
+const menuStyle = computed(() => ({
+  top: `${menuPosition.value.top}px`,
+  left: `${menuPosition.value.left}px`,
+}));
+
 const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
 
 const hide = () => {
@@ -67,7 +93,15 @@ const hide = () => {
   emit('hide');
 };
 
-const hideHandler = (e: MouseEvent) => {
+const clickHandler = () => {
+  if (!props.autoHide) return;
+
+  hide();
+};
+
+const outsideClickhideHandler = (e: MouseEvent) => {
+  if (!props.autoHide) return;
+
   const target = e.target as HTMLElement | undefined;
   if (!visible.value || !target) {
     return;
@@ -78,30 +112,38 @@ const hideHandler = (e: MouseEvent) => {
   hide();
 };
 
-const show = (e: MouseEvent) => {
+const setPosition = (e: { clientY: number; clientX: number }) => {
+  const menuHeight = menu.value?.clientHeight || 0;
+
+  let top = e.clientY;
+  if (menuHeight + e.clientY > document.body.clientHeight) {
+    top = document.body.clientHeight - menuHeight;
+  }
+
+  menuPosition.value = {
+    top,
+    left: e.clientX,
+  };
+};
+
+const show = (e?: MouseEvent) => {
   // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
   setTimeout(() => {
     visible.value = true;
 
-    nextTick(() => {
-      const menuHeight = menu.value?.clientHeight || 0;
-
-      let top = e.clientY;
-      if (menuHeight + e.clientY > document.body.clientHeight) {
-        top = document.body.clientHeight - menuHeight;
-      }
+    if (!e) {
+      return;
+    }
 
-      menuStyle.value = {
-        top: `${top}px`,
-        left: `${e.clientX}px`,
-      };
+    nextTick(() => {
+      setPosition(e);
 
       emit('show');
     });
   }, 300);
 };
 
-const showSubMenu = (item: MenuButton | MenuComponent) => {
+const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
   const menuItem = item as MenuButton;
   if (typeof item !== 'object' || !menuItem.items?.length) {
     return;
@@ -110,30 +152,42 @@ const showSubMenu = (item: MenuButton | MenuComponent) => {
   subMenuData.value = menuItem.items || [];
   setTimeout(() => {
     if (menu.value) {
+      // 将子菜单放置在按钮右侧，与按钮齐平
+      let y = menu.value.offsetTop;
+      if (buttons.value?.[index].$el) {
+        const rect = buttons.value?.[index].$el.getBoundingClientRect();
+        y = rect.top;
+      }
       subMenu.value?.show({
         clientX: menu.value.offsetLeft + menu.value.clientWidth,
-        clientY: menu.value.offsetTop,
+        clientY: y,
       });
     }
   }, 0);
 };
 
+const mouseenterHandler = () => {
+  emit('mouseenter');
+};
+
 onMounted(() => {
   if (props.isSubMenu) return;
 
-  globalThis.addEventListener('mousedown', hideHandler, true);
+  globalThis.addEventListener('mousedown', outsideClickhideHandler, true);
 });
 
 onUnmounted(() => {
   if (props.isSubMenu) return;
 
-  globalThis.removeEventListener('mousedown', hideHandler, true);
+  globalThis.removeEventListener('mousedown', outsideClickhideHandler, true);
 });
 
 defineExpose({
   menu,
+  menuPosition,
   hide,
   show,
   contains,
+  setPosition,
 });
 </script>

package/src/components/Resizer.vue

@@ -5,41 +5,19 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import Gesto from 'gesto';
+import { ref } from 'vue';
+import type { OnDrag } from 'gesto';
+
+import { useGetSo } from '@editor/hooks/use-getso';
 
 defineOptions({
   name: 'MEditorResizer',
 });
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [e: OnDrag];
+}>();
 
 const target = ref<HTMLSpanElement>();
-const isDraging = ref(false);
-
-let getso: Gesto;
-
-onMounted(() => {
-  if (!target.value) return;
-  getso = new Gesto(target.value, {
-    container: window,
-    pinchOutside: true,
-  })
-    .on('drag', (e) => {
-      if (!target.value) return;
-
-      emit('change', e.deltaX);
-    })
-    .on('dragStart', () => {
-      isDraging.value = true;
-    })
-    .on('dragEnd', () => {
-      isDraging.value = false;
-    });
-});
-
-onUnmounted(() => {
-  getso?.unset();
-  isDraging.value = false;
-});
+const { isDraging } = useGetSo(target, emit);
 </script>