@tmagic/editor 1.4.8 → 1.4.10

package/src/utils/compose.ts

@@ -0,0 +1,52 @@
+/**
+ * @param {Array} middleware
+ * @return {Function}
+ */
+export const compose = (middleware: Function[], isAsync: boolean) => {
+  if (!Array.isArray(middleware)) throw new TypeError('Middleware 必须是一个数组!');
+  for (const fn of middleware) {
+    if (typeof fn !== 'function') throw new TypeError('Middleware 必须由函数组成!');
+  }
+
+  /**
+   * @param {Object} args
+   * @return {Promise}
+   * @api public
+   */
+  return (args: any[], next?: Function) => {
+    // last called middleware #
+    let index = -1;
+    return dispatch(0);
+    function dispatch(i: number): Promise<void> | void {
+      if (i <= index) {
+        const error = new Error('next() 被多次调用');
+        if (isAsync) {
+          return Promise.reject(error);
+        }
+        throw error;
+      }
+      index = i;
+      let fn = middleware[i];
+      if (i === middleware.length && next) fn = next;
+      if (!fn) {
+        if (isAsync) {
+          return Promise.resolve();
+        }
+        return;
+      }
+
+      if (isAsync) {
+        try {
+          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      }
+      try {
+        return fn(...args, dispatch.bind(null, i + 1));
+      } catch (err) {
+        throw err;
+      }
+    }
+  };
+};

package/src/utils/config.ts

@@ -0,0 +1,29 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { InstallOptions } from '@editor/type';
+
+let $TMAGIC_EDITOR: InstallOptions = {} as any;
+
+const setConfig = (option: InstallOptions): void => {
+  $TMAGIC_EDITOR = option;
+};
+
+const getConfig = <K extends keyof InstallOptions>(key: K): InstallOptions[K] => $TMAGIC_EDITOR[key];
+
+export { getConfig, setConfig };

package/src/utils/content-menu.ts

@@ -0,0 +1,95 @@
+import { computed, markRaw, Ref } from 'vue';
+import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
+
+import { Id, MContainer, NodeType } from '@tmagic/schema';
+import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
+
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { MenuButton, Services } from '@editor/type';
+
+import { COPY_STORAGE_KEY } from './editor';
+
+export const useDeleteMenu = (): MenuButton => ({
+  type: 'button',
+  text: '删除',
+  icon: Delete,
+  display: (services) => {
+    const node = services?.editorService?.get('node');
+    return node?.type !== NodeType.ROOT && !isPage(node) && !isPageFragment(node);
+  },
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    nodes && services?.editorService?.remove(nodes);
+  },
+});
+
+export const useCopyMenu = (): MenuButton => ({
+  type: 'button',
+  text: '复制',
+  icon: markRaw(CopyDocument),
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    nodes && services?.editorService?.copy(nodes);
+  },
+});
+
+export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undefined>): MenuButton => ({
+  type: 'button',
+  text: '粘贴',
+  icon: markRaw(DocumentCopy),
+  display: (services) => !!services?.storageService?.getItem(COPY_STORAGE_KEY),
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    if (!nodes || nodes.length === 0) return;
+
+    if (menu?.value?.$el) {
+      const stage = services?.editorService?.get('stage');
+      const rect = menu.value.$el.getBoundingClientRect();
+      const parentRect = stage?.container?.getBoundingClientRect();
+      const initialLeft =
+        calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
+        services.uiService.get('zoom');
+      const initialTop =
+        calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
+        services.uiService.get('zoom');
+      services?.editorService?.paste({ left: initialLeft, top: initialTop });
+    } else {
+      services?.editorService?.paste();
+    }
+  },
+});
+
+const moveTo = (id: Id, services?: Services) => {
+  if (!services?.editorService) return;
+
+  const nodes = services.editorService.get('nodes') || [];
+  const parent = services.editorService.getNodeById(id) as MContainer;
+
+  if (!parent) return;
+
+  services?.editorService.add(nodes, parent);
+  services?.editorService.remove(nodes);
+};
+
+export const useMoveToMenu = (services?: Services): MenuButton => {
+  const root = computed(() => services?.editorService?.get('root'));
+
+  return {
+    type: 'button',
+    text: '移动至',
+    display: (services) => {
+      const node = services?.editorService?.get('node');
+      const pageLength = services?.editorService?.get('pageLength') || 0;
+      return !isPage(node) && pageLength > 1;
+    },
+    items: (root.value?.items || [])
+      .filter((page) => page.id !== services?.editorService?.get('page')?.id)
+      .map((page) => ({
+        text: `${page.name}(${page.id})`,
+        type: 'button',
+        handler: (services?: Services) => {
+          moveTo(page.id, services);
+        },
+      })),
+  };
+};

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

@@ -0,0 +1,30 @@
+import type { FormConfig } from '@tmagic/form';
+
+export default function (): FormConfig {
+  return [
+    {
+      name: 'id',
+      type: 'hidden',
+    },
+    {
+      name: 'type',
+      text: '类型',
+      type: 'hidden',
+      defaultValue: 'base',
+    },
+    {
+      name: 'title',
+      text: '名称',
+      rules: [
+        {
+          required: true,
+          message: '请输入名称',
+        },
+      ],
+    },
+    {
+      name: 'description',
+      text: '描述',
+    },
+  ];
+}

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

@@ -0,0 +1,60 @@
+import { FormConfig } from '@tmagic/form';
+
+export default [
+  {
+    name: 'autoFetch',
+    text: '自动请求',
+    type: 'switch',
+    defaultValue: true,
+  },
+  {
+    name: 'responseOptions',
+    items: [
+      {
+        name: 'dataPath',
+        text: '数据路径',
+      },
+    ],
+  },
+  {
+    type: 'fieldset',
+    name: 'options',
+    legend: 'HTTP 配置',
+    items: [
+      {
+        name: 'url',
+        text: 'URL',
+      },
+      {
+        name: 'method',
+        text: 'Method',
+        type: 'select',
+        options: [
+          { text: 'GET', value: 'GET' },
+          { text: 'POST', value: 'POST' },
+          { text: 'PUT', value: 'PUT' },
+          { text: 'DELETE', value: 'DELETE' },
+        ],
+      },
+      {
+        name: 'params',
+        type: 'key-value',
+        defaultValue: {},
+        text: '参数',
+      },
+      {
+        name: 'data',
+        type: 'key-value',
+        defaultValue: {},
+        advanced: true,
+        text: '请求体',
+      },
+      {
+        name: 'headers',
+        type: 'key-value',
+        defaultValue: {},
+        text: '请求头',
+      },
+    ],
+  },
+] as FormConfig;

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

@@ -0,0 +1,249 @@
+import { CascaderOption, FormConfig, FormState } from '@tmagic/form';
+import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, isNumber } from '@tmagic/utils';
+
+import BaseFormConfig from './formConfigs/base';
+import HttpFormConfig from './formConfigs/http';
+
+const fillConfig = (config: FormConfig): FormConfig => [
+  ...BaseFormConfig(),
+  ...config,
+  {
+    type: 'tab',
+    items: [
+      {
+        title: '数据定义',
+        items: [
+          {
+            name: 'fields',
+            type: 'data-source-fields',
+            defaultValue: () => [],
+          },
+        ],
+      },
+      {
+        title: '方法定义',
+        items: [
+          {
+            name: 'methods',
+            type: 'data-source-methods',
+            defaultValue: () => [],
+          },
+        ],
+      },
+      {
+        title: '事件配置',
+        items: [
+          {
+            name: 'events',
+            src: 'datasource',
+            type: 'event-select',
+          },
+        ],
+      },
+      {
+        title: 'mock数据',
+        items: [
+          {
+            name: 'mocks',
+            type: 'data-source-mocks',
+            defaultValue: () => [],
+          },
+        ],
+      },
+      {
+        title: '请求参数裁剪',
+        display: (formState: FormState, { model }: any) => model.type === 'http',
+        items: [
+          {
+            name: 'beforeRequest',
+            type: 'vs-code',
+            parse: true,
+            height: '600px',
+          },
+        ],
+      },
+      {
+        title: '响应数据裁剪',
+        display: (formState: FormState, { model }: any) => model.type === 'http',
+        items: [
+          {
+            name: 'afterResponse',
+            type: 'vs-code',
+            parse: true,
+            height: '600px',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {
+  switch (type) {
+    case 'base':
+      return fillConfig([]);
+    case 'http':
+      return fillConfig(HttpFormConfig);
+    default:
+      return fillConfig(configs[type] || []);
+  }
+};
+
+export const getFormValue = (type: string, values: Partial<DataSourceSchema>): Partial<DataSourceSchema> => {
+  if (type !== 'http') {
+    return values;
+  }
+
+  return {
+    beforeRequest: `(options, context) => {
+  /**
+   * 用户可以直接编写函数，在原始接口调用之前，会运行该函数，将这个函数的返回值作为该数据源接口的入参
+   *
+   * options: HttpOptions
+   *
+   * interface HttpOptions {
+   *  // 请求链接
+   *  url: string;
+   *  // query参数
+   *  params?: Record<string, string>;
+   *  // body数据
+   *  data?: Record<string, any>;
+   *  // 请求头
+   *  headers?: Record<string, string>;
+   *  // 请求方法 GET/POST
+   *  method?: Method;
+   * }
+   *
+   * context：上下文对象
+   *
+   * interface Content {
+   *  app: AppCore;
+   *  dataSource: HttpDataSource;
+   * }
+   *
+   * return: HttpOptions
+   */
+
+  // 此处的返回值会作为这个接口的入参
+  return options;
+}`,
+    afterResponse: `(response, context) => {
+  /**
+   * 用户可以直接编写函数，在原始接口返回之后，会运行该函数，将这个函数的返回值作为该数据源接口的返回
+
+    * context：上下文对象
+    *
+    * interface Content {
+    *  app: AppCore;
+    *  dataSource: HttpDataSource;
+    * }
+    *
+    */
+
+  // 此处的返回值会作为这个接口的返回值
+  return response;
+}`,
+    ...values,
+  };
+};
+
+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]
+      .replaceAll(/\[(\d+)\]/g, '.$1')
+      .split('.')
+      .forEach((item, index) => {
+        if (index === 0) {
+          ds = dataSources.find((ds) => ds.id === item);
+          dsText += ds?.title || item;
+          fields = ds?.fields;
+          return;
+        }
+
+        if (isNumber(item)) {
+          dsText += `[${item}]`;
+        } else {
+          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;
+};
+
+export const getCascaderOptionsFromFields = (
+  fields: DataSchema[] = [],
+  dataSourceFieldType: DataSourceFieldType[] = ['any'],
+): CascaderOption[] => {
+  const child: CascaderOption[] = [];
+  fields.forEach((field) => {
+    if (!dataSourceFieldType.length) {
+      dataSourceFieldType.push('any');
+    }
+
+    let children: CascaderOption[] = [];
+    if (field.type && ['any', 'array', 'object'].includes(field.type)) {
+      children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
+    }
+
+    const item = {
+      label: `${field.title || field.name}(${field.type})`,
+      value: field.name,
+      children,
+    };
+
+    const fieldType = field.type || 'any';
+    if (dataSourceFieldType.includes('any') || dataSourceFieldType.includes(fieldType)) {
+      child.push(item);
+      return;
+    }
+
+    if (!dataSourceFieldType.includes(fieldType) && !['array', 'object', 'any'].includes(fieldType)) {
+      return;
+    }
+
+    if (!children.length && ['object', 'array', 'any'].includes(field.type || '')) {
+      return;
+    }
+
+    child.push(item);
+  });
+  return child;
+};
+
+export const removeDataSourceFieldPrefix = (id?: string) =>
+  id?.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, '') || '';