@tmagic/editor 1.3.0-alpha.0 → 1.3.0-alpha.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.0",
+  "version": "1.3.0-alpha.10",
   "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.0",
-    "@tmagic/design": "1.3.0-alpha.0",
-    "@tmagic/form": "1.3.0-alpha.0",
-    "@tmagic/schema": "1.3.0-alpha.0",
-    "@tmagic/stage": "1.3.0-alpha.0",
-    "@tmagic/table": "1.3.0-alpha.0",
-    "@tmagic/utils": "1.3.0-alpha.0",
+    "@tmagic/core": "1.3.0-alpha.10",
+    "@tmagic/design": "1.3.0-alpha.10",
+    "@tmagic/form": "1.3.0-alpha.10",
+    "@tmagic/schema": "1.3.0-alpha.10",
+    "@tmagic/stage": "1.3.0-alpha.10",
+    "@tmagic/table": "1.3.0-alpha.10",
+    "@tmagic/utils": "1.3.0-alpha.10",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.34.0",
+    "monaco-editor": "^0.39.0",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.0",
-    "@tmagic/form": "1.3.0-alpha.0",
-    "monaco-editor": "^0.34.0",
-    "vue": "^3.2.37"
+    "@tmagic/design": "1.3.0-alpha.10",
+    "@tmagic/form": "1.3.0-alpha.10",
+    "monaco-editor": "^0.39.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.3.8",
+    "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">
@@ -51,7 +61,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 +73,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 +99,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 +135,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/CodeDraftEditor.vue

@@ -23,7 +23,7 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup name="MEditorCodeDraftEditor">
+<script lang="ts" setup>
 import { computed, inject, ref, watchEffect } from 'vue';
 import type * as monaco from 'monaco-editor';
 
@@ -34,6 +34,10 @@ import { datetimeFormatter } from '@tmagic/utils';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorCodeDraftEditor',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 代码id */

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/FunctionEditor.vue

@@ -32,8 +32,8 @@
     ></CodeDraftEditor>
   </TMagicCard>
 </template>
-<script lang="ts" setup name="MEditorFunctionEditor">
-import { inject, ref, watchEffect } from 'vue';
+<script lang="ts" setup>
+import { inject, provide, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import { TMagicCard, TMagicInput, tMagicMessage } from '@tmagic/design';
@@ -41,8 +41,16 @@ import { ColumnConfig, TableConfig } from '@tmagic/form';
 import { CodeParam, Id } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
 
 import CodeDraftEditor from './CodeDraftEditor.vue';
+
+defineOptions({
+  name: 'MEditorFunctionEditor',
+});
+
+provide('mForm', null);
+
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',
   label: '参数类型',
@@ -142,9 +150,8 @@ initTableModel();
 // 保存前钩子
 const beforeSave = (codeValue: string): boolean => {
   try {
-    // eval检测js代码是否存在语法错误
-    // eslint-disable-next-line no-eval
-    eval(codeValue);
+    // 检测js代码是否存在语法错误
+    getConfig('parseDSL')(codeValue);
     return true;
   } catch (e: any) {
     tMagicMessage.error(e.stack);

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;

package/src/editorProps.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 
 import type { EventOption } from '@tmagic/core';
-import type { FormConfig } from '@tmagic/form';
+import type { FormConfig, FormState } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
@@ -137,4 +137,8 @@ export default {
   disabledDragStart: {
     type: Boolean,
   },
+
+  extendFormState: {
+    type: Function as PropType<(state: FormState) => Record<string, any> | Promise<Record<string, any>>>,
+  },
 };

package/src/fields/Code.vue

@@ -8,9 +8,13 @@
   ></magic-code-editor>
 </template>
 
-<script lang="ts" setup name="MEditorCode">
+<script lang="ts" setup>
 import { computed } from 'vue';
 
+defineOptions({
+  name: 'MEditorCode',
+});
+
 const emit = defineEmits(['change']);
 
 const props = defineProps<{

package/src/fields/CodeLink.vue

@@ -2,10 +2,16 @@
   <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
 </template>
 
-<script lang="ts" setup name="MEditorCodeLink">
+<script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
+import { getConfig } from '@editor/utils/config';
+
+defineOptions({
+  name: 'MEditorCodeLink',
+});
+
 const props = defineProps<{
   config: {
     type: 'code-link';
@@ -65,8 +71,8 @@ const changeHandler = (v: Record<string, any>) => {
   if (!props.name || !props.model) return;
 
   try {
-    // eslint-disable-next-line no-eval
-    props.model[props.name] = eval(`(${v[props.name]})`);
+    const parseDSL = getConfig('parseDSL');
+    props.model[props.name] = parseDSL(`(${v[props.name]})`);
     emit('change', props.model[props.name]);
   } catch (e) {
     console.error(e);

package/src/fields/CodeSelect.vue

@@ -6,13 +6,17 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeSelect">
-import { computed, defineEmits, defineProps, watch } from 'vue';
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
 import { HookType } from '@tmagic/schema';
 
+defineOptions({
+  name: 'MEditorCodeSelect',
+});
+
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
@@ -32,6 +36,8 @@ const codeConfig = computed(() => ({
   type: 'group-list',
   name: 'hookData',
   enableToggleMode: false,
+  expandAll: true,
+  titleKey: 'codeId',
   items: [
     {
       type: 'code-select-col',

package/src/fields/CodeSelectCol.vue

@@ -16,8 +16,8 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeSelectCol">
-import { computed, defineEmits, defineProps, inject, ref, watch } from 'vue';
+<script lang="ts" setup name="">
+import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
@@ -27,6 +27,10 @@ import { Id } from '@tmagic/schema';
 import Icon from '@editor/components/Icon.vue';
 import type { CodeParamStatement, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorCodeSelectCol',
+});
+
 const services = inject<Services>('services');
 const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);

package/src/fields/DataSourceFields.vue

@@ -24,6 +24,10 @@ import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
 import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
+defineOptions({
+  name: 'MEditorDataSourceFields',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {
@@ -136,7 +140,7 @@ const dataSourceFieldsConfig: FormConfig = [
       {
         validator: ({ value, callback }, { model, parent }) => {
           const index = parent.findIndex((item: Record<string, any>) => item.name === value);
-          if ((model.index === -1 && index > -1) || (model.index > -1 && index !== model.index)) {
+          if ((model.index === -1 && index > -1) || (model.index > -1 && index > -1 && index !== model.index)) {
             return callback(`属性key（${value}）已存在`);
           }
           callback();