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

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',
@@ -17,15 +20,81 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
     ],
   },
+  {
+    type: 'panel',
+    title: '方法定义',
+    items: [
+      {
+        name: 'methods',
+        type: 'data-source-methods',
+        defaultValue: [],
+      },
+    ],
+  },
 ];
 
-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/dep.ts

@@ -1,16 +1,21 @@
 import { isEmpty } from 'lodash-es';
 
-import { CodeBlockContent, DataSourceSchema, HookType, Id } from '@tmagic/schema';
+import { CodeBlockContent, HookType, Id } from '@tmagic/schema';
 
+import dataSourceService from '@editor/services/dataSource';
 import { Target } from '@editor/services/dep';
-import type { HookData } from '@editor/type';
+import { DepTargetType, HookData } from '@editor/type';
 
 export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
   new Target({
-    type: 'code-block',
+    type: DepTargetType.CODE_BLOCK,
     id,
     name: codeBlock.name,
     isTarget: (key: string | number, value: any) => {
+      if (id === value) {
+        return true;
+      }
+
       if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
         const index = value.hookData.findIndex((item: HookData) => item.codeId === id);
         return Boolean(index > -1);
@@ -20,10 +25,37 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
     },
   });
 
-export const createDataSourceTarget = (id: Id, ds: DataSourceSchema) =>
+export const createDataSourceTarget = (id: Id) =>
+  new Target({
+    type: DepTargetType.DATA_SOURCE,
+    id,
+    isTarget: (key: string | number, value: any) =>
+      // 关联数据源对象或者在模板在使用数据源
+      (value?.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`)),
+  });
+
+export const createDataSourceCondTarget = (id: string) =>
+  new Target({
+    type: DepTargetType.DATA_SOURCE_COND,
+    id,
+    isTarget: (key: string | number, value: any) => {
+      if (!Array.isArray(value) || value[0] !== id) return false;
+
+      const ds = dataSourceService.getDataSourceById(id);
+
+      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
+    },
+  });
+
+export const createDataSourceMethodTarget = (id: string) =>
   new Target({
-    type: 'data-source',
+    type: DepTargetType.DATA_SOURCE_METHOD,
     id,
-    name: ds.title || `${id}`,
-    isTarget: (key: string | number, value: any) => typeof value === 'string' && value.includes(`${id}`),
+    isTarget: (key: string | number, value: any) => {
+      if (!Array.isArray(value) || value[0] !== id) return false;
+
+      const ds = dataSourceService.getDataSourceById(id);
+
+      return Boolean(ds?.methods?.find((method) => method.name === value[1]));
+    },
   });

package/src/utils/index.ts

@@ -20,5 +20,5 @@ export * from './config';
 export * from './props';
 export * from './logger';
 export * from './editor';
-export * from './stage';
 export * from './operator';
+export * from './data-source';

package/src/utils/keybinding-config.ts

@@ -0,0 +1,120 @@
+import { KeyBindingCommand, KeyBindingItem } from '@editor/type';
+
+export default [
+  {
+    command: KeyBindingCommand.DELETE_NODE,
+    keybinding: ['delete', 'backspace'],
+    when: [
+      ['stage', 'keyup'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.COPY_NODE,
+    keybinding: 'ctrl+c',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.PASTE_NODE,
+    keybinding: 'ctrl+v',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.CUT_NODE,
+    keybinding: 'ctrl+x',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.UNDO,
+    keybinding: 'ctrl+z',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.REDO,
+    keybinding: 'ctrl+shift+z',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.MOVE_UP_1,
+    keybinding: 'up',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_DOWN_1,
+    keybinding: 'down',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_LEFT_1,
+    keybinding: 'left',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_RIGHT_1,
+    keybinding: 'right',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_UP_10,
+    keybinding: 'ctrl+up',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_DOWN_10,
+    keybinding: 'ctrl+down',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_LEFT_10,
+    keybinding: 'ctrl+left',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_RIGHT_10,
+    keybinding: 'ctrl+right',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.SWITCH_NODE,
+    keybinding: 'tab',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_IN,
+    keybinding: ['ctrl+=', 'ctrl+numpadplus'],
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_OUT,
+    keybinding: ['ctrl+-', 'ctrl+numpad-'],
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_FIT,
+    keybinding: 'ctrl+0',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_RESET,
+    keybinding: 'ctrl+1',
+    when: [['stage', 'keydown']],
+  },
+] as KeyBindingItem[];