@tmagic/editor 1.2.10 → 1.2.11

package/src/fields/EventSelect.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="m-fields-event-select">
+    <m-form-container
+      v-if="isOldVersion"
+      ref="eventForm"
+      :size="props.size"
+      :model="model"
+      :config="tableConfig"
+      @change="onChangeHandler"
+    ></m-form-container>
+
+    <div v-else class="fullWidth">
+      <TMagicButton class="create-button" type="primary" size="small" @click="addEvent()">添加事件</TMagicButton>
+      <m-form-panel
+        v-for="(cardItem, index) in model[name]"
+        :key="index"
+        :config="actionsConfig"
+        :model="cardItem"
+        @change="onChangeHandler"
+      >
+        <template #header>
+          <m-form-container
+            class="fullWidth"
+            :config="eventNameConfig"
+            :model="cardItem"
+            @change="onChangeHandler"
+          ></m-form-container>
+          <TMagicButton style="color: #f56c6c" text :icon="Delete" @click="removeEvent(index)"></TMagicButton>
+        </template>
+      </m-form-panel>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="MEditorEventSelect">
+import { computed, defineProps, inject } from 'vue';
+import { Delete } from '@element-plus/icons-vue';
+import { has } from 'lodash-es';
+
+import { TMagicButton } from '@tmagic/design';
+import { FormState } from '@tmagic/form';
+import { ActionType } from '@tmagic/schema';
+
+import { EventSelectConfig, Services } from '../type';
+const services = inject<Services>('services');
+
+const props = defineProps<{
+  config: EventSelectConfig;
+  model: any;
+  prop: string;
+  name: string;
+  size: 'small' | 'default' | 'large';
+}>();
+const emit = defineEmits(['change']);
+
+// 事件名称下拉框表单配置
+const eventNameConfig = computed(() => {
+  const defaultEventNameConfig = {
+    name: 'name',
+    text: '事件',
+    type: 'select',
+    labelWidth: '40px',
+    options: (mForm: FormState, { formValue }: any) =>
+      services?.eventsService.getEvent(formValue.type).map((option: any) => ({
+        text: option.label,
+        value: option.value,
+      })),
+  };
+  return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
+});
+
+// 联动类型
+const actionTypeConfig = computed(() => {
+  const defaultActionTypeConfig = {
+    name: 'actionType',
+    text: '联动类型',
+    labelWidth: '70px',
+    type: 'select',
+    defaultValue: ActionType.COMP,
+    options: () => [
+      {
+        text: '组件',
+        label: '组件',
+        value: ActionType.COMP,
+      },
+      {
+        text: '代码',
+        label: '代码',
+        value: ActionType.CODE,
+      },
+    ],
+  };
+  return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
+});
+
+// 联动组件配置
+const targetCompConfig = computed(() => {
+  const defaultTargetCompConfig = {
+    name: 'to',
+    text: '联动组件',
+    labelWidth: '70px',
+    type: 'ui-select',
+    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
+  };
+  return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
+});
+
+// 联动组件动作配置
+const compActionConfig = computed(() => {
+  const defaultCompActionConfig = {
+    name: 'method',
+    text: '动作',
+    labelWidth: '70px',
+    type: 'select',
+    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
+    options: (mForm: FormState, { model }: any) => {
+      const node = services?.editorService.getNodeById(model.to);
+      if (!node?.type) return [];
+
+      return services?.eventsService.getMethod(node.type).map((option: any) => ({
+        text: option.label,
+        value: option.value,
+      }));
+    },
+  };
+  return { ...defaultCompActionConfig, ...props.config.compActionConfig };
+});
+
+// 代码联动配置
+const codeActionConfig = computed(() => {
+  const defaultCodeActionConfig = {
+    type: 'code-select-col',
+    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.CODE,
+  };
+  return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
+});
+
+// 兼容旧的数据格式
+const tableConfig = computed(() => ({
+  type: 'table',
+  name: 'events',
+  items: [
+    {
+      name: 'name',
+      label: '事件名',
+      type: eventNameConfig.value.type,
+      options: (mForm: FormState, { formValue }: any) =>
+        services?.eventsService.getEvent(formValue.type).map((option: any) => ({
+          text: option.label,
+          value: option.value,
+        })),
+    },
+    {
+      name: 'to',
+      label: '联动组件',
+      type: 'ui-select',
+    },
+    {
+      name: 'method',
+      label: '动作',
+      type: compActionConfig.value.type,
+      options: (mForm: FormState, { model }: any) => {
+        const node = services?.editorService.getNodeById(model.to);
+        if (!node?.type) return [];
+
+        return services?.eventsService.getMethod(node.type).map((option: any) => ({
+          text: option.label,
+          value: option.value,
+        }));
+      },
+    },
+  ],
+}));
+
+// 组件动作组表单配置
+const actionsConfig = computed(() => ({
+  items: [
+    {
+      type: 'group-list',
+      name: 'actions',
+      enableToggleMode: false,
+      items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value],
+    },
+  ],
+}));
+
+// 是否为旧的数据格式
+const isOldVersion = computed(() => {
+  if (props.model[props.name].length === 0) return false;
+  return !has(props.model[props.name][0], 'actions');
+});
+
+// 添加事件
+const addEvent = () => {
+  const defaultEvent = {
+    name: '',
+    actions: [],
+  };
+  if (!props.model[props.name]) {
+    props.model[props.name] = [];
+  }
+  props.model[props.name].push(defaultEvent);
+  onChangeHandler();
+};
+
+// 删除事件
+const removeEvent = (index: number) => {
+  if (!props.name) return;
+  props.model[props.name].splice(index, 1);
+  onChangeHandler();
+};
+
+const onChangeHandler = () => {
+  emit('change', props.model);
+};
+</script>

package/src/index.ts

@@ -20,6 +20,8 @@ import { App } from 'vue';
 import Code from './fields/Code.vue';
 import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
+import CodeSelectCol from './fields/CodeSelectCol.vue';
+import EventSelect from './fields/EventSelect.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setConfig } from './utils/config';
@@ -40,9 +42,12 @@ export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
+export { default as depService } from './services/dep';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
+export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
+export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
@@ -67,5 +72,7 @@ export default {
     app.component('m-fields-vs-code', Code);
     app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-code-select', CodeSelect);
+    app.component('m-fields-code-select-col', CodeSelectCol);
+    app.component('m-fields-event-select', EventSelect);
   },
 };

package/src/initService.ts

@@ -0,0 +1,198 @@
+import type { ExtractPropTypes } from 'vue';
+import { onUnmounted, toRaw, watch } from 'vue';
+
+import type { EventOption } from '@tmagic/core';
+import type { CodeBlockContent, Id, MApp, MNode, MPage } from '@tmagic/schema';
+
+import { createCodeBlockTarget } from './utils/dep';
+import editorProps from './editorProps';
+import type { Services } from './type';
+
+export declare type LooseRequired<T> = {
+  [P in string & keyof T]: T[P];
+};
+
+export const initServiceState = (
+  props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>,
+  {
+    editorService,
+    historyService,
+    componentListService,
+    propsService,
+    eventsService,
+    uiService,
+    codeBlockService,
+  }: Services,
+) => {
+  // 初始值变化，重新设置节点信息
+  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();
+  });
+};
+
+export const initServiceEvents = (
+  props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>,
+  emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void,
+  { editorService, codeBlockService, depService }: Services,
+) => {
+  const rootChangeHandler = async (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) {
+      await editorService.select(node.id);
+    } else if (value?.items?.length) {
+      await 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);
+
+    depService.removeTargets('code-block');
+
+    Object.entries(value.codeBlocks).forEach(([id, code]) => {
+      depService.addTarget(createCodeBlockTarget(id, code));
+    });
+
+    if (value && Array.isArray(value.items)) {
+      depService.collect(value.items, true);
+    } else {
+      depService.clear();
+    }
+  };
+
+  const nodeAddHandler = (nodes: MNode[]) => {
+    depService.collect(nodes);
+  };
+
+  const nodeUpdateHandler = (nodes: MNode[]) => {
+    depService.collect(nodes);
+  };
+
+  const nodeRemoveHandler = (nodes: MNode[]) => {
+    depService.clear(nodes);
+  };
+
+  const historyChangeHandler = (page: MPage) => {
+    depService.collect([page], true);
+  };
+
+  editorService.on('history-change', historyChangeHandler);
+  editorService.on('root-change', rootChangeHandler);
+  editorService.on('add', nodeAddHandler);
+  editorService.on('remove', nodeRemoveHandler);
+  editorService.on('update', nodeUpdateHandler);
+
+  const codeBlockAddOrUpdateHandler = (id: Id, codeBlock: CodeBlockContent) => {
+    if (depService.hasTarget(id)) {
+      depService.getTarget(id)!.name = codeBlock.name;
+      return;
+    }
+
+    depService.addTarget(createCodeBlockTarget(id, codeBlock));
+  };
+
+  const codeBlockRemoveHandler = (id: Id) => {
+    depService.removeTarget(id);
+  };
+
+  codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
+  codeBlockService.on('remove', codeBlockRemoveHandler);
+
+  onUnmounted(() => {
+    editorService.off('history-change', historyChangeHandler);
+    editorService.off('root-change', rootChangeHandler);
+    editorService.off('add', nodeAddHandler);
+    editorService.off('remove', nodeRemoveHandler);
+    editorService.off('update', nodeUpdateHandler);
+
+    codeBlockService.off('addOrUpdate', codeBlockAddOrUpdateHandler);
+    codeBlockService.off('remove', codeBlockRemoveHandler);
+  });
+};