@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.21

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.2",
+  "version": "1.3.0-alpha.21",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,43 +46,42 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.2",
-    "@tmagic/design": "1.3.0-alpha.2",
-    "@tmagic/form": "1.3.0-alpha.2",
-    "@tmagic/schema": "1.3.0-alpha.2",
-    "@tmagic/stage": "1.3.0-alpha.2",
-    "@tmagic/table": "1.3.0-alpha.2",
-    "@tmagic/utils": "1.3.0-alpha.2",
+    "@tmagic/core": "1.3.0-alpha.21",
+    "@tmagic/design": "1.3.0-alpha.21",
+    "@tmagic/form": "1.3.0-alpha.21",
+    "@tmagic/schema": "1.3.0-alpha.21",
+    "@tmagic/stage": "1.3.0-alpha.21",
+    "@tmagic/table": "1.3.0-alpha.21",
+    "@tmagic/utils": "1.3.0-alpha.21",
     "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.34.0",
+    "monaco-editor": "^0.41.0",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.2",
-    "@tmagic/form": "1.3.0-alpha.2",
-    "monaco-editor": "^0.34.0",
-    "vue": "^3.2.37"
+    "@tmagic/design": "1.3.0-alpha.21",
+    "@tmagic/form": "1.3.0-alpha.21",
+    "monaco-editor": "^0.41.0",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "tsc-alias": "^1.8.5",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.0.11"
+    "vite": "^4.4.4",
+    "vue-tsc": "^1.6.5"
   }
 }

package/src/Editor.vue

@@ -1,9 +1,19 @@
 <template>
-  <Framework :code-options="codeOptions">
+  <Framework>
+    <template #header>
+      <slot name="header"></slot>
+    </template>
+
     <template #nav>
       <slot name="nav" :editorService="editorService"><TMagicNavMenu :data="menu"></TMagicNavMenu></slot>
     </template>
 
+    <template #content-before>
+      <slot name="content-before"></slot>
+    </template>
+
+    <template #src-code><slot name="src-code" :editorService="editorService"></slot></template>
+
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
         <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
@@ -30,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>
@@ -51,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>
@@ -60,6 +69,14 @@
     </template>
 
     <template #empty><slot name="empty" :editorService="editorService"></slot></template>
+
+    <template #content-after>
+      <slot name="content-after"></slot>
+    </template>
+
+    <template #footer>
+      <slot name="footer"></slot>
+    </template>
   </Framework>
 </template>
 
@@ -78,15 +95,17 @@ import depService from './services/dep';
 import editorService from './services/editor';
 import eventsService from './services/events';
 import historyService from './services/history';
+import keybindingService from './services/keybinding';
 import propsService from './services/props';
 import storageService from './services/storage';
 import uiService from './services/ui';
+import keybindingConfig from './utils/keybinding-config';
 import editorProps from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
 import type { Services } from './type';
 
 export default defineComponent({
-  name: 'm-editor',
+  name: 'MEditor',
 
   components: {
     TMagicNavMenu: NavMenu,
@@ -112,10 +131,13 @@ export default defineComponent({
       codeBlockService,
       depService,
       dataSourceService,
+      keybindingService,
     };
 
     initServiceEvents(props, emit, services);
     initServiceState(props, services);
+    keybindingService.registe(keybindingConfig);
+    keybindingService.registeEl('global');
 
     provide('services', services);
 

package/src/components/CodeBlockEditor.vue

@@ -0,0 +1,170 @@
+<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"
+    @submit="submitForm"
+    @error="errorHandler"
+    @open="openHandler"
+  ></MFormDrawer>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+
+import { tMagicMessage } from '@tmagic/design';
+import { ColumnConfig, FormState, MFormDrawer } from '@tmagic/form';
+import type { CodeBlockContent } from '@tmagic/schema';
+
+import type { Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
+
+defineOptions({
+  name: 'MEditorCodeBlockEditor',
+});
+
+const props = defineProps<{
+  content: CodeBlockContent;
+  disabled?: boolean;
+  isDataSource?: boolean;
+}>();
+
+const emit = defineEmits<{
+  submit: [values: CodeBlockContent];
+}>();
+
+const services = inject<Services>('services');
+
+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(() => [
+  {
+    text: '名称',
+    name: 'name',
+  },
+  {
+    text: '描述',
+    name: 'desc',
+  },
+  {
+    text: '执行时机',
+    name: 'timing',
+    type: 'select',
+    options: [
+      { text: '初始化前', value: 'beforeInit' },
+      { text: '初始化后', value: 'afterInit' },
+    ],
+    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 = async (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`;
+    }
+  });
+};
+
+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

@@ -4,14 +4,16 @@
       <ToolButton
         v-for="(item, index) in menuData"
         event-type="mouseup"
+        ref="buttons"
         :data="item"
         :key="index"
         @mouseup="hide"
-        @mouseenter="showSubMenu(item)"
+        @mouseenter="showSubMenu(item, index)"
       ></ToolButton>
     </div>
     <teleport to="body">
       <content-menu
+        v-if="subMenuData.length"
         class="sub-menu"
         ref="subMenu"
         :menu-data="subMenuData"
@@ -22,13 +24,17 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorContentMenu">
+<script lang="ts" setup>
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '@editor/type';
 
 import ToolButton from './ToolButton.vue';
 
+defineOptions({
+  name: 'MEditorContentMenu',
+});
+
 const props = withDefaults(
   defineProps<{
     menuData?: (MenuButton | MenuComponent)[];
@@ -43,6 +49,7 @@ const props = withDefaults(
 const emit = defineEmits(['hide', 'show']);
 
 const menu = ref<HTMLDivElement>();
+const buttons = ref<InstanceType<typeof ToolButton>[]>();
 const subMenu = ref<any>();
 const visible = ref(false);
 const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
@@ -51,6 +58,8 @@ const menuStyle = ref({
   top: '0',
 });
 
+const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
+
 const hide = () => {
   if (!visible.value) return;
 
@@ -65,7 +74,7 @@ const hideHandler = (e: MouseEvent) => {
   if (!visible.value || !target) {
     return;
   }
-  if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+  if (contains(target)) {
     return;
   }
   hide();
@@ -94,19 +103,27 @@ const show = (e: MouseEvent) => {
   }, 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;
   }
 
-  subMenuData.value = menuItem.items;
-  if (menu.value) {
-    subMenu.value.show({
-      clientX: menu.value.offsetLeft + menu.value.clientWidth,
-      clientY: menu.value.offsetTop,
-    });
-  }
+  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: y,
+      });
+    }
+  }, 0);
 };
 
 onMounted(() => {
@@ -122,7 +139,9 @@ onUnmounted(() => {
 });
 
 defineExpose({
+  menu,
   hide,
   show,
+  contains,
 });
 </script>

package/src/components/Icon.vue

@@ -7,12 +7,16 @@
   <TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
 </template>
 
-<script lang="ts" setup name="MEditorIcon">
+<script lang="ts" setup>
 import { toRaw } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorIcon',
+});
+
 defineProps<{
   icon?: any;
 }>();

package/src/components/Resizer.vue

@@ -0,0 +1,45 @@
+<template>
+  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-draging': isDraging }">
+    <slot></slot>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import Gesto from 'gesto';
+
+defineOptions({
+  name: 'MEditorResizer',
+});
+
+const emit = defineEmits(['change']);
+
+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;
+});
+</script>

package/src/components/ScrollBar.vue

@@ -4,10 +4,14 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorScrollBar">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
+defineOptions({
+  name: 'MEditorScrollBar',
+});
+
 const props = defineProps<{
   size: number;
   scrollSize: number;

package/src/components/ScrollViewer.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorScrollViewer">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import type { ScrollViewerEvent } from '@editor/type';
@@ -30,6 +30,10 @@ import { ScrollViewer } from '@editor/utils/scroll-viewer';
 
 import ScrollBar from './ScrollBar.vue';
 
+defineOptions({
+  name: 'MEditorScrollViewer',
+});
+
 const props = withDefaults(
   defineProps<{
     width?: number;

package/src/components/SearchInput.vue

@@ -19,6 +19,10 @@ import { Search } from '@element-plus/icons-vue';
 
 import { TMagicIcon, TMagicInput } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorSearchInput',
+});
+
 const emit = defineEmits(['search']);
 
 const filterText = ref('');

package/src/components/{Layout.vue → SplitView.vue}

@@ -1,6 +1,6 @@
 <template>
   <div ref="el" class="m-editor-layout">
-    <template v-if="hasLeft">
+    <template v-if="hasLeft && $slots.left">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
       </div>
@@ -11,7 +11,7 @@
       <slot name="center"></slot>
     </div>
 
-    <template v-if="hasRight">
+    <template v-if="hasRight && $slots.right">
       <Resizer @change="changeRight"></Resizer>
       <div class="m-editor-layout-right" :class="rightClass" :style="`width: ${right}px`">
         <slot name="right"></slot>
@@ -20,10 +20,14 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorLayout">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
-import Resizer from '@editor/layouts/Resizer.vue';
+import Resizer from './Resizer.vue';
+
+defineOptions({
+  name: 'MEditorLayout',
+});
 
 const emit = defineEmits(['update:left', 'change', 'update:right']);
 

package/src/components/ToolButton.vue

@@ -43,7 +43,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorToolButton">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 
@@ -60,6 +60,10 @@ import {
 import MIcon from '../components/Icon.vue';
 import type { MenuButton, MenuComponent, Services } from '../type';
 
+defineOptions({
+  name: 'MEditorToolButton',
+});
+
 const props = withDefaults(
   defineProps<{
     data?: MenuButton | MenuComponent;