@tmagic/editor 1.3.0-alpha.19 → 1.3.0-alpha.20

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.19",
+  "version": "1.3.0-alpha.20",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,13 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.19",
-    "@tmagic/design": "1.3.0-alpha.19",
-    "@tmagic/form": "1.3.0-alpha.19",
-    "@tmagic/schema": "1.3.0-alpha.19",
-    "@tmagic/stage": "1.3.0-alpha.19",
-    "@tmagic/table": "1.3.0-alpha.19",
-    "@tmagic/utils": "1.3.0-alpha.19",
+    "@tmagic/core": "1.3.0-alpha.20",
+    "@tmagic/design": "1.3.0-alpha.20",
+    "@tmagic/form": "1.3.0-alpha.20",
+    "@tmagic/schema": "1.3.0-alpha.20",
+    "@tmagic/stage": "1.3.0-alpha.20",
+    "@tmagic/table": "1.3.0-alpha.20",
+    "@tmagic/utils": "1.3.0-alpha.20",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +64,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.19",
-    "@tmagic/form": "1.3.0-alpha.19",
+    "@tmagic/design": "1.3.0-alpha.20",
+    "@tmagic/form": "1.3.0-alpha.20",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/components/CodeParams.vue

@@ -16,6 +16,7 @@ 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',
@@ -53,7 +54,7 @@ const onParamsChangeHandler = async () => {
     const value = await form.value?.submitForm(true);
     emit('change', value);
   } catch (e) {
-    console.log(e);
+    error(e);
   }
 };
 </script>

package/src/editorProps.ts

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 
 import type { EventOption } from '@tmagic/core';
 import type { FormConfig, FormState } from '@tmagic/form';
-import type { MApp, MNode } from '@tmagic/schema';
+import type { DataSourceSchema, MApp, MNode } from '@tmagic/schema';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
@@ -11,7 +11,15 @@ import StageCore, {
   UpdateDragEl,
 } from '@tmagic/stage';
 
-import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, SideBarData, StageRect } from './type';
+import type {
+  ComponentGroup,
+  DatasourceTypeOption,
+  MenuBarData,
+  MenuButton,
+  MenuComponent,
+  SideBarData,
+  StageRect,
+} from './type';
 
 export default {
   /** 页面初始值 */
@@ -27,6 +35,12 @@ export default {
     default: () => [],
   },
 
+  /** 左侧面板中的组件列表 */
+  datasourceList: {
+    type: Array as PropType<DatasourceTypeOption[]>,
+    default: () => [],
+  },
+
   /** 左侧面板配置 */
   sidebar: {
     type: Object as PropType<SideBarData>,
@@ -69,7 +83,7 @@ export default {
 
   /** 添加组件时的默认值 */
   propsValues: {
-    type: Object as PropType<Record<string, MNode>>,
+    type: Object as PropType<Record<string, Partial<MNode>>>,
     default: () => ({}),
   },
 
@@ -79,6 +93,19 @@ export default {
     default: () => ({}),
   },
 
+  /** 组件的属性配置表单的dsl */
+  datasourceConfigs: {
+    type: Object as PropType<Record<string, FormConfig>>,
+    default: () => ({}),
+  },
+
+  /** 添加数据源时的默认值 */
+  datasourceValues: {
+    type: Object as PropType<Record<string, Partial<DataSourceSchema>>>,
+    default: () => ({}),
+  },
+
+  /** 数据源的属性配置表单的dsl */
   dataScourceConfigs: {
     type: Object as PropType<Record<string, FormConfig>>,
     default: () => ({}),

package/src/fields/DataSourceInput.vue

@@ -54,6 +54,7 @@ import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
+import { getDisplayField } from '@editor/utils/data-source';
 
 defineOptions({
   name: 'MEditorDataSourceInput',
@@ -87,49 +88,7 @@ const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.inp
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
 const setDisplayState = () => {
-  displayState.value = [];
-
-  const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
-  let index = 0;
-  for (const match of matches) {
-    if (typeof match.index === 'undefined') break;
-
-    displayState.value.push({
-      type: 'text',
-      value: state.value.substring(index, match.index),
-    });
-
-    let dsText = '';
-    let ds: DataSourceSchema | undefined;
-    let fields: DataSchema[] | undefined;
-
-    match[1].split('.').forEach((item, index) => {
-      if (index === 0) {
-        ds = dataSources.value.find((ds) => ds.id === item);
-        dsText += ds?.title || item;
-        fields = ds?.fields;
-        return;
-      }
-
-      const field = fields?.find((field) => field.name === item);
-      fields = field?.fields;
-      dsText += `.${field?.title || item}`;
-    });
-
-    displayState.value.push({
-      type: 'var',
-      value: dsText,
-    });
-
-    index = match.index + match[0].length;
-  }
-
-  if (index < state.value.length) {
-    displayState.value.push({
-      type: 'text',
-      value: state.value.substring(index),
-    });
-  }
+  displayState.value = getDisplayField(dataSources.value, state.value);
 };
 
 watch(
@@ -243,17 +202,21 @@ const fieldQuerySearch = (
   let result: DataSchema[] = [];
 
   const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
+
   // 可能是xx.xx.xx，存在链式调用
   const keys = dsKey.split('.');
+
   // 最前的是数据源id
-  const ds = dataSources.value.find((ds) => ds.id === keys.shift());
+  const dsId = keys.shift();
+  const ds = dataSources.value.find((ds) => ds.id === dsId);
   if (!ds) {
+    cb([]);
     return;
   }
 
   let fields = ds.fields || [];
 
-  // 后面这些事字段
+  // 后面这些是字段
   let key = keys.shift();
   while (key) {
     for (const field of fields) {

package/src/initService.ts

@@ -31,6 +31,7 @@ export const initServiceState = (
     uiService,
     codeBlockService,
     keybindingService,
+    dataSourceService,
   }: Services,
 ) => {
   // 初始值变化，重新设置节点信息
@@ -52,6 +53,14 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.datasourceList,
+    (datasourceList) => dataSourceService.set('datasourceTypeList', datasourceList),
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.propsConfigs,
     (configs) => propsService.setPropsConfigs(configs),
@@ -87,6 +96,30 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.datasourceConfigs,
+    (configs) => {
+      Object.entries(configs).forEach(([key, value]) => {
+        dataSourceService.setFormConfig(key, value);
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.datasourceValues,
+    (values) => {
+      Object.entries(values).forEach(([key, value]) => {
+        dataSourceService.setFormValue(key, value);
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.defaultSelected,
     (defaultSelected) => defaultSelected && editorService.select(defaultSelected),

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -16,6 +16,7 @@
 
 <script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
+import { cloneDeep, mergeWith } from 'lodash-es';
 
 import { tMagicMessage } from '@tmagic/design';
 import { MFormDrawer } from '@tmagic/form';
@@ -56,7 +57,16 @@ const changeHandler = (value: Record<string, any>) => {
     return;
   }
   type.value = value.type || 'base';
-  initValues.value = value;
+
+  initValues.value = mergeWith(
+    cloneDeep(value),
+    services?.dataSourceService.getFormValue(type.value) || {},
+    (objValue, srcValue) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    },
+  );
 };
 
 const submitHandler = (values: any) => {

package/src/services/dataSource.ts

@@ -2,25 +2,30 @@ import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
-import { DataSourceSchema } from '@tmagic/schema';
+import type { DataSourceSchema } from '@tmagic/schema';
 import { guid } from '@tmagic/utils';
 
+import type { DatasourceTypeOption } from '@editor/type';
 import { getFormConfig } from '@editor/utils/data-source';
 
 import BaseService from './BaseService';
 
 interface State {
+  datasourceTypeList: DatasourceTypeOption[];
   dataSources: DataSourceSchema[];
   editable: boolean;
   configs: Record<string, FormConfig>;
+  values: Record<string, Partial<DataSourceSchema>>;
 }
 
 type StateKey = keyof State;
 class DataSource extends BaseService {
   private state = reactive<State>({
+    datasourceTypeList: [],
     dataSources: [],
     editable: true,
     configs: {},
+    values: {},
   });
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -32,13 +37,21 @@ class DataSource extends BaseService {
   }
 
   public getFormConfig(type = 'base') {
-    return getFormConfig(type, this.get('configs'));
+    return getFormConfig(type, this.get('datasourceTypeList'), this.get('configs'));
   }
 
   public setFormConfig(type: string, config: FormConfig) {
     this.get('configs')[type] = config;
   }
 
+  public getFormValue(type = 'base') {
+    return this.get('values')[type];
+  }
+
+  public setFormValue(type: string, value: Partial<DataSourceSchema>) {
+    this.get('values')[type] = value;
+  }
+
   public add(config: DataSourceSchema) {
     const newConfig = {
       ...config,

package/src/services/editor.ts

@@ -705,9 +705,9 @@ class Editor extends BaseService {
     brothers.splice(index, 1);
 
     if (offset === LayerOffset.TOP) {
-      brothers.splice(isRelative ? 0 : brothers.length - 1, 0, node);
+      brothers.splice(isRelative ? 0 : brothers.length, 0, node);
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(isRelative ? brothers.length - 1 : 0, 0, node);
+      brothers.splice(isRelative ? brothers.length : 0, 0, node);
     } else {
       brothers.splice(index + (isRelative ? -offset : offset), 0, node);
     }

package/src/services/props.ts

@@ -80,7 +80,7 @@ class Props extends BaseService {
     return cloneDeep(this.state.propsConfigMap[type] || (await this.fillConfig([])));
   }
 
-  public setPropsValues(values: Record<string, MNode>) {
+  public setPropsValues(values: Record<string, Partial<MNode>>) {
     Object.keys(values).forEach((type: string) => {
       this.setPropsValue(toLine(type), values[type]);
     });
@@ -91,7 +91,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @param value 组件初始值
    */
-  public async setPropsValue(type: string, value: MNode) {
+  public async setPropsValue(type: string, value: Partial<MNode>) {
     this.state.propsValueMap[type] = value;
   }
 

package/src/type.ts

@@ -93,7 +93,7 @@ export type StoreStateKey = keyof StoreState;
 
 export interface PropsState {
   propsConfigMap: Record<string, FormConfig>;
-  propsValueMap: Record<string, MNode>;
+  propsValueMap: Record<string, Partial<MNode>>;
 }
 
 export interface ComponentGroupState {
@@ -520,3 +520,8 @@ export enum DepTargetType {
   /** 数据源条件 */
   DATA_SOURCE_COND = 'data-source-cond',
 }
+
+export interface DatasourceTypeOption {
+  type: string;
+  text: string;
+}

package/src/utils/data-source/formConfigs/base.ts

@@ -1,32 +1,37 @@
 import type { FormConfig } from '@tmagic/form';
 
-export default [
-  {
-    name: 'id',
-    type: 'hidden',
-  },
-  {
-    name: 'type',
-    text: '类型',
-    type: 'select',
-    options: [
-      { text: '基础', value: 'base' },
-      { text: 'HTTP', value: 'http' },
-    ],
-    defaultValue: 'base',
-  },
-  {
-    name: 'title',
-    text: '名称',
-    rules: [
-      {
-        required: true,
-        message: '请输入名称',
-      },
-    ],
-  },
-  {
-    name: 'description',
-    text: '描述',
-  },
-] as FormConfig;
+import type { DatasourceTypeOption } from '@editor/type';
+
+export default function (datasourceTypeList: DatasourceTypeOption[] = []): FormConfig {
+  return [
+    {
+      name: 'id',
+      type: 'hidden',
+    },
+    {
+      name: 'type',
+      text: '类型',
+      type: 'select',
+      options: [
+        { text: '基础', value: 'base' },
+        { text: 'HTTP', value: 'http' },
+        ...datasourceTypeList.map((item) => ({ text: item.text, value: item.type })),
+      ],
+      defaultValue: 'base',
+    },
+    {
+      name: 'title',
+      text: '名称',
+      rules: [
+        {
+          required: true,
+          message: '请输入名称',
+        },
+      ],
+    },
+    {
+      name: 'description',
+      text: '描述',
+    },
+  ];
+}

package/src/utils/data-source/index.ts

@@ -1,10 +1,13 @@
 import { FormConfig } from '@tmagic/form';
+import { DataSchema, DataSourceSchema } from '@tmagic/schema';
+
+import { DatasourceTypeOption } from '@editor/type';
 
 import BaseFormConfig from './formConfigs/base';
 import HttpFormConfig from './formConfigs/http';
 
-const fillConfig = (config: FormConfig): FormConfig => [
-  ...BaseFormConfig,
+const fillConfig = (config: FormConfig, datasourceTypeList: DatasourceTypeOption[]): FormConfig => [
+  ...BaseFormConfig(datasourceTypeList),
   ...config,
   {
     type: 'panel',
@@ -30,13 +33,68 @@ const fillConfig = (config: FormConfig): FormConfig => [
   },
 ];
 
-export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {
+export const getFormConfig = (
+  type: string,
+  datasourceTypeList: DatasourceTypeOption[],
+  configs: Record<string, FormConfig>,
+): FormConfig => {
   switch (type) {
     case 'base':
-      return fillConfig([]);
+      return fillConfig([], datasourceTypeList);
     case 'http':
-      return fillConfig(HttpFormConfig);
+      return fillConfig(HttpFormConfig, datasourceTypeList);
     default:
-      return fillConfig(configs[type] || []);
+      return fillConfig(configs[type] || [], datasourceTypeList);
+  }
+};
+
+export const getDisplayField = (dataSources: DataSourceSchema[], key: string) => {
+  const displayState: { value: string; type: 'var' | 'text' }[] = [];
+
+  // 匹配es6字符串模块
+  const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
+  let index = 0;
+  for (const match of matches) {
+    if (typeof match.index === 'undefined') break;
+
+    // 字符串常量
+    displayState.push({
+      type: 'text',
+      value: key.substring(index, match.index),
+    });
+
+    let dsText = '';
+    let ds: DataSourceSchema | undefined;
+    let fields: DataSchema[] | undefined;
+
+    // 将模块解析成数据源对应的值
+    match[1].split('.').forEach((item, index) => {
+      if (index === 0) {
+        ds = dataSources.find((ds) => ds.id === item);
+        dsText += ds?.title || item;
+        fields = ds?.fields;
+        return;
+      }
+
+      const field = fields?.find((field) => field.name === item);
+      fields = field?.fields;
+      dsText += `.${field?.title || item}`;
+    });
+
+    displayState.push({
+      type: 'var',
+      value: dsText,
+    });
+
+    index = match.index + match[0].length;
   }
+
+  if (index < key.length) {
+    displayState.push({
+      type: 'text',
+      value: key.substring(index),
+    });
+  }
+
+  return displayState;
 };

package/src/utils/index.ts

@@ -21,3 +21,4 @@ export * from './props';
 export * from './logger';
 export * from './editor';
 export * from './operator';
+export * from './data-source';

package/src/utils/undo-redo.ts

@@ -23,7 +23,7 @@ export class UndoRedo<T = any> {
   private listCursor: number;
   private listMaxSize: number;
 
-  constructor(listMaxSize = 200) {
+  constructor(listMaxSize = 20) {
     const minListMaxSize = 2;
     this.elementList = [];
     this.listCursor = 0;

package/types/Editor.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<import("./type").ComponentGroup[]>;
         default: () => never[];
     };
+    datasourceList: {
+        type: import("vue").PropType<import("./type").DatasourceTypeOption[]>;
+        default: () => never[];
+    };
     sidebar: {
         type: import("vue").PropType<import("./type").SideBarData>;
     };
@@ -37,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
     propsValues: {
-        type: import("vue").PropType<Record<string, import("@tmagic/schema").MNode>>;
+        type: import("vue").PropType<Record<string, Partial<import("@tmagic/schema").MNode>>>;
         default: () => {};
     };
     eventMethodList: {
@@ -47,6 +51,14 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         default: () => {};
     };
+    datasourceConfigs: {
+        type: import("vue").PropType<Record<string, import("@tmagic/form").FormConfig>>;
+        default: () => {};
+    };
+    datasourceValues: {
+        type: import("vue").PropType<Record<string, Partial<import("@tmagic/schema").DataSourceSchema>>>;
+        default: () => {};
+    };
     dataScourceConfigs: {
         type: import("vue").PropType<Record<string, import("@tmagic/form").FormConfig>>;
         default: () => {};
@@ -103,6 +115,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<import("./type").ComponentGroup[]>;
         default: () => never[];
     };
+    datasourceList: {
+        type: import("vue").PropType<import("./type").DatasourceTypeOption[]>;
+        default: () => never[];
+    };
     sidebar: {
         type: import("vue").PropType<import("./type").SideBarData>;
     };
@@ -131,7 +147,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
     propsValues: {
-        type: import("vue").PropType<Record<string, import("@tmagic/schema").MNode>>;
+        type: import("vue").PropType<Record<string, Partial<import("@tmagic/schema").MNode>>>;
         default: () => {};
     };
     eventMethodList: {
@@ -141,6 +157,14 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         default: () => {};
     };
+    datasourceConfigs: {
+        type: import("vue").PropType<Record<string, import("@tmagic/form").FormConfig>>;
+        default: () => {};
+    };
+    datasourceValues: {
+        type: import("vue").PropType<Record<string, Partial<import("@tmagic/schema").DataSourceSchema>>>;
+        default: () => {};
+    };
     dataScourceConfigs: {
         type: import("vue").PropType<Record<string, import("@tmagic/form").FormConfig>>;
         default: () => {};
@@ -198,12 +222,15 @@ declare const _default: import("vue").DefineComponent<{
     layerContentMenu: (import("./type").MenuButton | import("./type").MenuComponent)[];
     stageContentMenu: (import("./type").MenuButton | import("./type").MenuComponent)[];
     componentGroupList: import("./type").ComponentGroup[];
+    datasourceList: import("./type").DatasourceTypeOption[];
     propsConfigs: Record<string, import("@tmagic/form").FormConfig>;
-    propsValues: Record<string, import("@tmagic/schema").MNode>;
+    propsValues: Record<string, Partial<import("@tmagic/schema").MNode>>;
     eventMethodList: Record<string, {
         events: import("@tmagic/core").EventOption[];
         methods: import("@tmagic/core").EventOption[];
     }>;
+    datasourceConfigs: Record<string, import("@tmagic/form").FormConfig>;
+    datasourceValues: Record<string, Partial<import("@tmagic/schema").DataSourceSchema>>;
     dataScourceConfigs: Record<string, import("@tmagic/form").FormConfig>;
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
     isContainer: (el: HTMLElement) => boolean | Promise<boolean>;