@tmagic/editor 1.2.10 → 1.2.12

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.10",
+  "version": "1.2.12",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,12 +46,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.10",
-    "@tmagic/design": "1.2.10",
-    "@tmagic/form": "1.2.10",
-    "@tmagic/schema": "1.2.10",
-    "@tmagic/stage": "1.2.10",
-    "@tmagic/utils": "1.2.10",
+    "@tmagic/core": "1.2.12",
+    "@tmagic/design": "1.2.12",
+    "@tmagic/form": "1.2.12",
+    "@tmagic/schema": "1.2.12",
+    "@tmagic/stage": "1.2.12",
+    "@tmagic/utils": "1.2.12",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.10",
-    "@tmagic/form": "1.2.10",
+    "@tmagic/design": "1.2.12",
+    "@tmagic/form": "1.2.12",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/Editor.vue

@@ -64,18 +64,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch } from 'vue';
-
-import { EventOption } from '@tmagic/core';
-import type { FormConfig } from '@tmagic/form';
-import type { MApp, MNode } from '@tmagic/schema';
-import StageCore, {
-  CONTAINER_HIGHLIGHT_CLASS_NAME,
-  ContainerHighlightType,
-  CustomizeMoveableOptionsCallbackConfig,
-  MoveableOptions,
-  UpdateDragEl,
-} from '@tmagic/stage';
+import { defineComponent, provide, reactive } from 'vue';
 
 import Framework from './layouts/Framework.vue';
 import NavMenu from './layouts/NavMenu.vue';
@@ -84,13 +73,16 @@ import Sidebar from './layouts/sidebar/Sidebar.vue';
 import Workspace from './layouts/workspace/Workspace.vue';
 import codeBlockService from './services/codeBlock';
 import componentListService from './services/componentList';
+import depService from './services/dep';
 import editorService from './services/editor';
 import eventsService from './services/events';
 import historyService from './services/history';
 import propsService from './services/props';
 import storageService from './services/storage';
 import uiService from './services/ui';
-import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, Services, SideBarData, StageRect } from './type';
+import editorProps from './editorProps';
+import { initServiceEvents, initServiceState } from './initService';
+import type { Services } from './type';
 
 export default defineComponent({
   name: 'm-editor',
@@ -103,239 +95,11 @@ export default defineComponent({
     Framework,
   },
 
-  props: {
-    /** 页面初始值 */
-    modelValue: {
-      type: Object as PropType<MApp>,
-      default: () => ({}),
-      require: true,
-    },
-
-    /** 左侧面板中的组件列表 */
-    componentGroupList: {
-      type: Array as PropType<ComponentGroup[]>,
-      default: () => [],
-    },
-
-    /** 左侧面板配置 */
-    sidebar: {
-      type: Object as PropType<SideBarData>,
-    },
-
-    /** 顶部工具栏配置 */
-    menu: {
-      type: Object as PropType<MenuBarData>,
-      default: () => ({ left: [], right: [] }),
-    },
-
-    /** 组件树右键菜单 */
-    layerContentMenu: {
-      type: Array as PropType<(MenuButton | MenuComponent)[]>,
-      default: () => [],
-    },
-
-    /** 画布右键菜单 */
-    stageContentMenu: {
-      type: Array as PropType<(MenuButton | MenuComponent)[]>,
-      default: () => [],
-    },
-
-    /** 中间工作区域中画布渲染的内容 */
-    render: {
-      type: Function as PropType<(stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>>,
-    },
-
-    /** 中间工作区域中画布通过iframe渲染时的页面url */
-    runtimeUrl: String,
-
-    /** 选中时是否自动滚动到可视区域 */
-    autoScrollIntoView: Boolean,
-
-    /** 组件的属性配置表单的dsl */
-    propsConfigs: {
-      type: Object as PropType<Record<string, FormConfig>>,
-      default: () => ({}),
-    },
-
-    /** 添加组件时的默认值 */
-    propsValues: {
-      type: Object as PropType<Record<string, MNode>>,
-      default: () => ({}),
-    },
-
-    /** 组件联动事件选项列表 */
-    eventMethodList: {
-      type: Object as PropType<Record<string, { events: EventOption[]; methods: EventOption[] }>>,
-      default: () => ({}),
-    },
-
-    /** 画布中组件选中框的移动范围 */
-    moveableOptions: {
-      type: [Object, Function] as PropType<
-        MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)
-      >,
-    },
-
-    /** 编辑器初始化时默认选中的组件ID */
-    defaultSelected: {
-      type: [Number, String],
-    },
-
-    canSelect: {
-      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-      default: (el: HTMLElement) => Boolean(el.id),
-    },
-
-    isContainer: {
-      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-      default: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
-    },
-
-    containerHighlightClassName: {
-      type: String,
-      default: CONTAINER_HIGHLIGHT_CLASS_NAME,
-    },
-
-    containerHighlightDuration: {
-      type: Number,
-      default: 800,
-    },
-
-    containerHighlightType: {
-      type: String as PropType<ContainerHighlightType>,
-      default: ContainerHighlightType.DEFAULT,
-    },
-
-    stageRect: {
-      type: [String, Object] as PropType<StageRect>,
-    },
-
-    codeOptions: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    updateDragEl: {
-      type: Function as PropType<UpdateDragEl>,
-    },
-
-    disabledDragStart: {
-      type: Boolean,
-    },
-  },
+  props: editorProps,
 
   emits: ['props-panel-mounted', 'update:modelValue'],
 
   setup(props, { emit }) {
-    const rootChangeHandler = (value: MApp, preValue?: MApp | null) => {
-      const nodeId = editorService.get('node')?.id || props.defaultSelected;
-      let node;
-      if (nodeId) {
-        node = editorService.getNodeById(nodeId);
-      }
-
-      if (node && node !== value) {
-        editorService.select(node.id);
-      } else if (value?.items?.length) {
-        editorService.select(value.items[0]);
-      } else if (value?.id) {
-        editorService.set('nodes', [value]);
-        editorService.set('parent', null);
-        editorService.set('page', null);
-      }
-
-      if (toRaw(value) !== toRaw(preValue)) {
-        emit('update:modelValue', value);
-      }
-
-      value.codeBlocks = value.codeBlocks || {};
-
-      codeBlockService.setCodeDsl(value.codeBlocks);
-    };
-
-    editorService.on('root-change', rootChangeHandler);
-
-    // 初始值变化，重新设置节点信息
-    watch(
-      () => props.modelValue,
-      (modelValue) => {
-        editorService.set('root', modelValue);
-      },
-      {
-        immediate: true,
-      },
-    );
-
-    watch(
-      () => props.componentGroupList,
-      (componentGroupList) => componentListService.setList(componentGroupList),
-      {
-        immediate: true,
-      },
-    );
-
-    watch(
-      () => props.propsConfigs,
-      (configs) => propsService.setPropsConfigs(configs),
-      {
-        immediate: true,
-      },
-    );
-
-    watch(
-      () => props.propsValues,
-      (values) => propsService.setPropsValues(values),
-      {
-        immediate: true,
-      },
-    );
-
-    watch(
-      () => props.eventMethodList,
-      (eventMethodList) => {
-        const eventsList: Record<string, EventOption[]> = {};
-        const methodsList: Record<string, EventOption[]> = {};
-
-        Object.keys(eventMethodList).forEach((type: string) => {
-          eventsList[type] = eventMethodList[type].events;
-          methodsList[type] = eventMethodList[type].methods;
-        });
-
-        eventsService.setEvents(eventsList);
-        eventsService.setMethods(methodsList);
-      },
-      {
-        immediate: true,
-      },
-    );
-
-    watch(
-      () => props.defaultSelected,
-      (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
-      {
-        immediate: true,
-      },
-    );
-
-    watch(
-      () => props.stageRect,
-      (stageRect) => stageRect && uiService.set('stageRect', stageRect),
-      {
-        immediate: true,
-      },
-    );
-
-    onUnmounted(() => {
-      editorService.resetState();
-      historyService.resetState();
-      propsService.resetState();
-      uiService.resetState();
-      componentListService.resetState();
-      codeBlockService.resetState();
-
-      editorService.off('root-change', rootChangeHandler);
-    });
-
     const services: Services = {
       componentListService,
       eventsService,
@@ -345,8 +109,12 @@ export default defineComponent({
       uiService,
       storageService,
       codeBlockService,
+      depService,
     };
 
+    initServiceEvents(props, emit, services);
+    initServiceState(props, services);
+
     provide('services', services);
 
     provide('codeOptions', props.codeOptions);
@@ -366,8 +134,6 @@ export default defineComponent({
         disabledDragStart: props.disabledDragStart,
       }),
     );
-    // 监听组件update
-    codeBlockService.addCodeRelationListener();
 
     return services;
   },

package/src/components/CodeDraftEditor.vue

@@ -25,6 +25,7 @@
 </template>
 <script lang="ts" setup name="MEditorCodeDraftEditor">
 import { computed, inject, ref, watchEffect } from 'vue';
+import type { Action } from 'element-plus';
 import type * as monaco from 'monaco-editor';
 
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
@@ -109,18 +110,21 @@ const close = async (): Promise<void> => {
   if (codeDraft) {
     tMagicMessageBox
       .confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
+        confirmButtonText: '保存并关闭',
+        cancelButtonText: '直接关闭',
         type: 'warning',
+        distinguishCancelAndClose: true,
       })
       .then(async () => {
         // 保存之后再关闭
         saveAndClose();
       })
-      .catch(() => {
-        // 删除草稿 直接关闭
-        services?.codeBlockService.removeCodeDraft(props.id);
-        emit('close');
+      .catch((action: Action) => {
+        if (action === 'cancel') {
+          // 删除草稿 直接关闭
+          services?.codeBlockService.removeCodeDraft(props.id);
+          emit('close');
+        }
       });
   } else {
     emit('close');

package/src/editorProps.ts

@@ -0,0 +1,135 @@
+import type { PropType } from 'vue';
+
+import type { EventOption } from '@tmagic/core';
+import type { FormConfig } from '@tmagic/form';
+import type { MApp, MNode } from '@tmagic/schema';
+import StageCore, {
+  CONTAINER_HIGHLIGHT_CLASS_NAME,
+  ContainerHighlightType,
+  CustomizeMoveableOptionsCallbackConfig,
+  MoveableOptions,
+  UpdateDragEl,
+} from '@tmagic/stage';
+
+import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, SideBarData, StageRect } from './type';
+
+export default {
+  /** 页面初始值 */
+  modelValue: {
+    type: Object as PropType<MApp>,
+    default: () => ({}),
+    require: true,
+  },
+
+  /** 左侧面板中的组件列表 */
+  componentGroupList: {
+    type: Array as PropType<ComponentGroup[]>,
+    default: () => [],
+  },
+
+  /** 左侧面板配置 */
+  sidebar: {
+    type: Object as PropType<SideBarData>,
+  },
+
+  /** 顶部工具栏配置 */
+  menu: {
+    type: Object as PropType<MenuBarData>,
+    default: () => ({ left: [], right: [] }),
+  },
+
+  /** 组件树右键菜单 */
+  layerContentMenu: {
+    type: Array as PropType<(MenuButton | MenuComponent)[]>,
+    default: () => [],
+  },
+
+  /** 画布右键菜单 */
+  stageContentMenu: {
+    type: Array as PropType<(MenuButton | MenuComponent)[]>,
+    default: () => [],
+  },
+
+  /** 中间工作区域中画布渲染的内容 */
+  render: {
+    type: Function as PropType<(stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>>,
+  },
+
+  /** 中间工作区域中画布通过iframe渲染时的页面url */
+  runtimeUrl: String,
+
+  /** 选中时是否自动滚动到可视区域 */
+  autoScrollIntoView: Boolean,
+
+  /** 组件的属性配置表单的dsl */
+  propsConfigs: {
+    type: Object as PropType<Record<string, FormConfig>>,
+    default: () => ({}),
+  },
+
+  /** 添加组件时的默认值 */
+  propsValues: {
+    type: Object as PropType<Record<string, MNode>>,
+    default: () => ({}),
+  },
+
+  /** 组件联动事件选项列表 */
+  eventMethodList: {
+    type: Object as PropType<Record<string, { events: EventOption[]; methods: EventOption[] }>>,
+    default: () => ({}),
+  },
+
+  /** 画布中组件选中框的移动范围 */
+  moveableOptions: {
+    type: [Object, Function] as PropType<
+      MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)
+    >,
+  },
+
+  /** 编辑器初始化时默认选中的组件ID */
+  defaultSelected: {
+    type: [Number, String],
+  },
+
+  canSelect: {
+    type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+    default: (el: HTMLElement) => Boolean(el.id),
+  },
+
+  isContainer: {
+    type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+    default: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
+  },
+
+  containerHighlightClassName: {
+    type: String,
+    default: CONTAINER_HIGHLIGHT_CLASS_NAME,
+  },
+
+  containerHighlightDuration: {
+    type: Number,
+    default: 800,
+  },
+
+  containerHighlightType: {
+    type: String as PropType<ContainerHighlightType>,
+    default: ContainerHighlightType.DEFAULT,
+  },
+
+  stageRect: {
+    type: [String, Object] as PropType<StageRect>,
+  },
+
+  codeOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  updateDragEl: {
+    type: Function as PropType<UpdateDragEl>,
+  },
+
+  disabledDragStart: {
+    type: Boolean,
+  },
+};

package/src/fields/CodeSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-fields-code-select">
+  <div class="m-fields-code-select" :class="config.className">
     <m-form-table
       :config="tableConfig"
       :model="model[name]"
@@ -11,7 +11,7 @@
     >
       <template #operateCol="{ scope }">
         <Icon
-          v-if="scope.row.codeId"
+          v-if="scope.row.codeId && config.editable"
           :icon="editable ? Edit : View"
           class="edit-icon"
           @click="editCode(scope.row.codeId)"
@@ -35,15 +35,25 @@ const services = inject<Services>('services');
 const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
-const props = defineProps<{
-  config: {
-    tableConfig?: TableConfig;
-  };
-  model: any;
-  prop: string;
-  name: string;
-  size: 'mini' | 'small' | 'medium';
-}>();
+const props = withDefaults(
+  defineProps<{
+    config: {
+      tableConfig?: TableConfig;
+      className?: string;
+      editable?: boolean;
+    };
+    model: any;
+    prop: string;
+    name: string;
+    size: 'small' | 'default' | 'large';
+  }>(),
+  {
+    config: () => ({
+      editable: true,
+    }),
+  },
+);
+
 const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
 
 const tableConfig = computed<FormItem>(() => {
@@ -80,7 +90,7 @@ const tableConfig = computed<FormItem>(() => {
         itemsFunction: (row: HookData) => {
           const paramsConfig = getParamsConfig(row.codeId);
           // 如果参数没有填值，则使用createValues补全空值
-          if (isEmpty(row.params) || !row.params) {
+          if (!row.params || isEmpty(row.params)) {
             createValues(mForm, paramsConfig, {}, row.params);
           }
           return paramsConfig;
@@ -124,6 +134,7 @@ const getParamsConfig = (codeId: Id): CodeParamStatement[] => {
   return paramStatements.map((paramState: CodeParamStatement) => ({
     labelWidth: '100px',
     text: paramState.name,
+    inline: true,
     ...paramState,
   }));
 };

package/src/fields/CodeSelectCol.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="m-fields-code-select-col">
+    <!-- 代码块下拉框 -->
+    <m-form-container :config="selectConfig" :model="model" @change="onParamsChangeHandler"></m-form-container>
+    <!-- 参数填写框 -->
+    <m-form-container :config="codeParamsConfig" :model="model" @change="onParamsChangeHandler"></m-form-container>
+  </div>
+</template>
+
+<script lang="ts" setup name="MEditorCodeSelectCol">
+import { computed, defineEmits, defineProps, inject, ref, watch } from 'vue';
+import { isEmpty, map } from 'lodash-es';
+
+import { createValues, FieldsetConfig, FormState } from '@tmagic/form';
+import { Id } from '@tmagic/schema';
+
+import { CodeParamStatement, Services } from '../type';
+const services = inject<Services>('services');
+const mForm = inject<FormState>('mForm');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(
+  defineProps<{
+    config: any;
+    model: any;
+    prop: string;
+    name: string;
+    size: 'small' | 'default' | 'large';
+  }>(),
+  {},
+);
+const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
+const codeParamsConfig = ref<FieldsetConfig>({
+  type: 'fieldset',
+  items: [],
+  legend: '参数',
+  labelWidth: '70px',
+  name: 'params',
+  display: false,
+});
+const selectConfig = {
+  type: 'select',
+  text: '代码块',
+  name: 'codeId',
+  labelWidth: '70px',
+  options: () => {
+    if (codeDsl.value) {
+      return map(codeDsl.value, (value, key) => ({
+        text: `${value.name}（${key}）`,
+        label: `${value.name}（${key}）`,
+        value: key,
+      }));
+    }
+    return [];
+  },
+  onChange: (formState: any, codeId: Id, { model }: any) => {
+    // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
+    model.params = {};
+  },
+};
+
+/**
+ * 根据代码块id获取代码块参数配置
+ * @param codeId 代码块ID
+ */
+const getParamItemsConfig = (codeId: Id): CodeParamStatement[] => {
+  if (!codeDsl.value) return [];
+  const paramStatements = codeDsl.value[codeId]?.params;
+  if (isEmpty(paramStatements)) return [];
+  return paramStatements.map((paramState: CodeParamStatement) => ({
+    labelWidth: '100px',
+    text: paramState.name,
+    ...paramState,
+  }));
+};
+
+/**
+ * 根据代码块id获取参数fieldset表单配置
+ * @param codeId 代码块ID
+ */
+const getCodeParamsConfig = (codeId: Id) => {
+  const paramsConfig = getParamItemsConfig(codeId);
+  // 如果参数没有填值，则使用createValues补全空值
+  if (!props.model.params || isEmpty(props.model.params)) {
+    props.model.params = {};
+    createValues(mForm, paramsConfig, {}, props.model.params);
+  }
+  codeParamsConfig.value = {
+    type: 'fieldset',
+    items: paramsConfig,
+    legend: '参数',
+    labelWidth: '70px',
+    name: 'params',
+    display: !isEmpty(paramsConfig),
+  };
+};
+
+/**
+ * 参数值修改更新
+ */
+const onParamsChangeHandler = () => {
+  emit('change', props.model);
+};
+
+// 监听代码块顺序变化以及下拉选择的变化，并更新参数配置
+// TODO onchange在watch之前触发
+watch(
+  () => props.model.codeId,
+  (codeId: Id) => {
+    if (!codeId) return;
+    getCodeParamsConfig(codeId);
+  },
+  {
+    immediate: true,
+  },
+);
+</script>