@tmagic/editor 1.4.7 → 1.4.8

package/src/editorProps.ts

@@ -1,117 +0,0 @@
-import type { EventOption } from '@tmagic/core';
-import type { FormConfig, FormState } from '@tmagic/form';
-import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
-import StageCore, {
-  CONTAINER_HIGHLIGHT_CLASS_NAME,
-  ContainerHighlightType,
-  type CustomizeMoveableOptionsCallbackConfig,
-  type GuidesOptions,
-  type MoveableOptions,
-  RenderType,
-  type UpdateDragEl,
-} from '@tmagic/stage';
-
-import type {
-  ComponentGroup,
-  DatasourceTypeOption,
-  MenuBarData,
-  MenuButton,
-  MenuComponent,
-  SideBarData,
-  StageRect,
-} from './type';
-
-export interface EditorProps {
-  /** 页面初始值 */
-  modelValue?: MApp;
-  /** 左侧面板中的组件类型列表 */
-  componentGroupList?: ComponentGroup[];
-  /** 左侧面板中的数据源类型列表 */
-  datasourceList?: DatasourceTypeOption[];
-  /** 左侧面板配置 */
-  sidebar?: SideBarData;
-  /** 顶部工具栏配置 */
-  menu?: MenuBarData;
-  /** 组件树右键菜单 */
-  layerContentMenu?: (MenuButton | MenuComponent)[];
-  /** 画布右键菜单 */
-  stageContentMenu?: (MenuButton | MenuComponent)[];
-  /** 中间工作区域中画布通过iframe渲染时的页面url */
-  runtimeUrl?: string;
-  /** 是用iframe渲染还是直接渲染 */
-  renderType?: RenderType;
-  /** 选中时是否自动滚动到可视区域 */
-  autoScrollIntoView?: boolean;
-  /** 组件的属性配置表单的dsl */
-  propsConfigs?: Record<string, FormConfig>;
-  /** 添加组件时的默认值 */
-  propsValues?: Record<string, Partial<MNode>>;
-  /** 组件联动事件选项列表 */
-  eventMethodList?: Record<string, { events: EventOption[]; methods: EventOption[] }>;
-  /** 添加数据源时的默认值 */
-  datasourceValues?: Record<string, Partial<DataSourceSchema>>;
-  /** 数据源的属性配置表单的dsl */
-  datasourceConfigs?: Record<string, FormConfig>;
-  datasourceEventMethodList?: Record<string, { events: EventOption[]; methods: EventOption[] }>;
-  /** 画布中组件选中框的移动范围 */
-  moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
-  /** 编辑器初始化时默认选中的组件ID */
-  defaultSelected?: Id;
-  /** 拖入画布中容器时，识别到容器后给容器根dom加上的class */
-  containerHighlightClassName?: string;
-  /** 拖入画布中容器时，悬停识别容器的时间 */
-  containerHighlightDuration?: number;
-  /** 拖入画布中容器时，识别容器的操作类型 */
-  containerHighlightType?: ContainerHighlightType;
-  /** 画布大小 */
-  stageRect?: StageRect;
-  /** monaco editor 的配置 */
-  codeOptions?: { [key: string]: any };
-  /** 禁用鼠标左键按下时就开始拖拽，需要先选中再可以拖拽 */
-  disabledDragStart?: boolean;
-  /** 标尺配置 */
-  guidesOptions?: Partial<GuidesOptions>;
-  /** 禁止多选 */
-  disabledMultiSelect?: boolean;
-  /** 禁用页面片 */
-  disabledPageFragment?: boolean;
-  /** 禁用双击在浮层中单独编辑选中组件 */
-  disabledStageOverlay?: boolean;
-  /** 禁用属性配置面板右下角显示源码的按钮 */
-  disabledShowSrc?: boolean;
-  /** 中间工作区域中画布渲染的内容 */
-  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
-  /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
-  updateDragEl?: UpdateDragEl;
-  /** 用于设置画布上的dom是否可以被选中 */
-  canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
-  /** 用于设置画布上的dom是否可以被拖入其中 */
-  isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
-  /** 用于自定义组件树与画布的右键菜单 */
-  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
-  extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
-}
-
-export const defaultEditorProps = {
-  renderType: RenderType.IFRAME,
-  disabledMultiSelect: false,
-  disabledPageFragment: false,
-  disabledStageOverlay: false,
-  containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
-  containerHighlightDuration: 800,
-  containerHighlightType: ContainerHighlightType.DEFAULT,
-  disabledShowSrc: false,
-  componentGroupList: () => [],
-  datasourceList: () => [],
-  menu: () => ({ left: [], right: [] }),
-  layerContentMenu: () => [],
-  stageContentMenu: () => [],
-  propsConfigs: () => ({}),
-  propsValues: () => ({}),
-  eventMethodList: () => ({}),
-  datasourceValues: () => ({}),
-  datasourceConfigs: () => ({}),
-  canSelect: (el: HTMLElement) => Boolean(el.id),
-  isContainer: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
-  codeOptions: () => ({}),
-};

package/src/fields/Code.vue

@@ -1,50 +0,0 @@
-<template>
-  <MagicCodeEditor
-    :height="config.height"
-    :init-values="model[name]"
-    :language="config.language"
-    :options="{
-      ...config.options,
-      readOnly: disabled,
-    }"
-    :parse="config.parse"
-    @save="save"
-  ></MagicCodeEditor>
-</template>
-
-<script lang="ts" setup>
-import type { FieldProps, FormItem } from '@tmagic/form';
-
-import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
-
-defineOptions({
-  name: 'MFieldsVsCode',
-});
-
-const emit = defineEmits<{
-  change: [value: string | any];
-}>();
-
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        language?: string;
-        options?: {
-          [key: string]: any;
-        };
-        height?: string;
-        parse?: boolean;
-      } & FormItem
-    >
-  >(),
-  {
-    disabled: false,
-  },
-);
-
-const save = (v: string | any) => {
-  props.model[props.name] = v;
-  emit('change', v);
-};
-</script>

package/src/fields/CodeLink.vue

@@ -1,80 +0,0 @@
-<template>
-  <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
-</template>
-
-<script lang="ts" setup>
-import { computed, reactive, watch } from 'vue';
-import serialize from 'serialize-javascript';
-
-import type { FieldProps, FormItem } from '@tmagic/form';
-
-import { getConfig } from '@editor/utils/config';
-
-defineOptions({
-  name: 'MFieldsCodeLink',
-});
-
-const props = defineProps<
-  FieldProps<
-    {
-      type: 'code-link';
-      formTitle?: string;
-      codeOptions?: Object;
-    } & FormItem
-  >
->();
-
-const emit = defineEmits(['change']);
-
-const formConfig = computed(() => {
-  const { codeOptions, ...config } = props.config;
-  return {
-    ...config,
-    text: '',
-    type: 'link',
-    form: [
-      {
-        name: props.name,
-        type: 'vs-code',
-        options: {
-          tabSize: 2,
-          ...(codeOptions || {}),
-        },
-      },
-    ],
-  };
-});
-
-const modelValue = reactive<{ form: Record<string, string> }>({
-  form: {
-    [props.name]: '',
-  },
-});
-
-watch(
-  () => props.model[props.name],
-  (value) => {
-    modelValue.form = {
-      [props.name]: serialize(value, {
-        space: 2,
-        unsafe: true,
-      }).replace(/"(\w+)":\s/g, '$1: '),
-    };
-  },
-  {
-    immediate: true,
-  },
-);
-
-const changeHandler = (v: Record<string, any>) => {
-  if (!props.name || !props.model) return;
-
-  try {
-    const parseDSL = getConfig('parseDSL');
-    props.model[props.name] = parseDSL(`(${v[props.name]})`);
-    emit('change', props.model[props.name]);
-  } catch (e) {
-    console.error(e);
-  }
-};
-</script>

package/src/fields/CodeSelect.vue

@@ -1,132 +0,0 @@
-<template>
-  <div class="m-fields-code-select" :class="config.className">
-    <TMagicCard>
-      <MContainer
-        :config="codeConfig"
-        :size="size"
-        :prop="prop"
-        :disabled="disabled"
-        :lastValues="lastValues"
-        :model="model[name]"
-        @change="changeHandler"
-      >
-      </MContainer>
-    </TMagicCard>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import { isEmpty } from 'lodash-es';
-
-import { TMagicCard } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
-import { FormState, MContainer } from '@tmagic/form';
-import { HookCodeType, HookType } from '@tmagic/schema';
-
-import type { Services } from '@editor/type';
-
-defineOptions({
-  name: 'MFieldsCodeSelect',
-});
-
-const emit = defineEmits(['change']);
-
-const services = inject<Services>('services');
-
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        className?: string;
-      } & FormItem
-    >
-  >(),
-  {},
-);
-
-const codeConfig = computed(() => ({
-  type: 'group-list',
-  name: 'hookData',
-  enableToggleMode: false,
-  expandAll: true,
-  title: (mForm: FormState, { model, index }: any) => {
-    if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
-      if (Array.isArray(model.codeId)) {
-        if (model.codeId.length < 2) {
-          return index;
-        }
-
-        const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
-        return `${ds?.title} / ${model.codeId[1]}`;
-      }
-
-      return Array.isArray(model.codeId) ? model.codeId.join('/') : index;
-    }
-    return model.codeId || index;
-  },
-  items: [
-    {
-      type: 'row',
-      items: [
-        {
-          type: 'select',
-          name: 'codeType',
-          span: 8,
-          options: [
-            { value: HookCodeType.CODE, text: '代码块' },
-            { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
-          ],
-          defaultValue: 'code',
-          onChange: (mForm: FormState, v: HookCodeType, { model }: any) => {
-            if (v === HookCodeType.DATA_SOURCE_METHOD) {
-              model.codeId = [];
-            } else {
-              model.codeId = '';
-            }
-
-            return v;
-          },
-        },
-        {
-          type: 'code-select-col',
-          name: 'codeId',
-          span: 16,
-          labelWidth: 0,
-          display: (mForm: FormState, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
-          notEditable: () => !services?.codeBlockService.getEditStatus(),
-        },
-        {
-          type: 'data-source-method-select',
-          name: 'codeId',
-          span: 16,
-          labelWidth: 0,
-          display: (mForm: FormState, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
-          notEditable: () => !services?.dataSourceService.get('editable'),
-        },
-      ],
-    },
-  ],
-}));
-
-watch(
-  () => props.model[props.name],
-  (value) => {
-    // 兼容旧的数据结构
-    if (isEmpty(value)) {
-      // 空值或者空数组
-      props.model[props.name] = {
-        hookType: HookType.CODE,
-        hookData: [],
-      };
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
-const changeHandler = async () => {
-  emit('change', props.model[props.name]);
-};
-</script>

package/src/fields/CodeSelectCol.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="m-fields-code-select-col">
-    <div class="code-select-container">
-      <!-- 代码块下拉框 -->
-      <MContainer
-        class="select"
-        :config="selectConfig"
-        :model="model"
-        :size="size"
-        @change="onParamsChangeHandler"
-      ></MContainer>
-
-      <!-- 查看/编辑按钮 -->
-      <TMagicButton
-        v-if="model[name] && hasCodeBlockSidePanel"
-        class="m-fields-select-action-button"
-        :size="size"
-        @click="editCode(model[name])"
-      >
-        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
-      </TMagicButton>
-    </div>
-
-    <!-- 参数填写框 -->
-    <CodeParams
-      v-if="paramsConfig.length"
-      name="params"
-      :key="model[name]"
-      :model="model"
-      :size="size"
-      :params-config="paramsConfig"
-      @change="onParamsChangeHandler"
-    ></CodeParams>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, ref, watch } from 'vue';
-import { Edit, View } from '@element-plus/icons-vue';
-import { isEmpty, map } from 'lodash-es';
-
-import { TMagicButton } from '@tmagic/design';
-import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
-import type { Id } from '@tmagic/schema';
-
-import CodeParams from '@editor/components/CodeParams.vue';
-import MIcon from '@editor/components/Icon.vue';
-import type { CodeParamStatement, CodeSelectColConfig, EventBus, Services } from '@editor/type';
-import { SideItemKey } from '@editor/type';
-
-defineOptions({
-  name: 'MFieldsCodeSelectCol',
-});
-
-const mForm = inject<FormState | undefined>('mForm');
-const services = inject<Services>('services');
-const eventBus = inject<EventBus>('eventBus');
-const emit = defineEmits(['change']);
-
-const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
-  disabled: false,
-});
-
-const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
-
-const hasCodeBlockSidePanel = computed(() =>
-  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.CODE_BLOCK),
-);
-
-/**
- * 根据代码块id获取代码块参数配置
- * @param codeId 代码块ID
- */
-const getParamItemsConfig = (codeId?: Id): CodeParamStatement[] => {
-  if (!codeDsl.value || !codeId) return [];
-
-  const paramStatements = codeDsl.value[codeId]?.params;
-
-  if (isEmpty(paramStatements)) return [];
-
-  return paramStatements.map((paramState: CodeParamStatement) => ({
-    labelWidth: '100px',
-    text: paramState.name,
-    ...paramState,
-  }));
-};
-
-const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
-const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name]));
-
-watch(
-  () => props.model[props.name],
-  (v, preV) => {
-    if (v !== preV) {
-      paramsConfig.value = getParamItemsConfig(v);
-    }
-  },
-);
-
-const selectConfig = {
-  type: 'select',
-  name: props.name,
-  disable: props.disabled,
-  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
-    paramsConfig.value = getParamItemsConfig(codeId);
-
-    if (paramsConfig.value.length) {
-      model.params = createValues(formState, paramsConfig.value, {}, model.params);
-    } else {
-      model.params = {};
-    }
-
-    return codeId;
-  },
-};
-
-/**
- * 参数值修改更新
- */
-const onParamsChangeHandler = (value: any) => {
-  props.model.params = value.params;
-  emit('change', props.model);
-};
-
-const editCode = (id: string) => {
-  eventBus?.emit('edit-code', id);
-};
-</script>

package/src/fields/DataSourceFieldSelect.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="m-fields-data-source-field-select">
-    <component
-      :is="tagName"
-      :config="showDataSourceFieldSelect || !config.fieldConfig ? cascaderConfig : config.fieldConfig"
-      :model="model"
-      :name="name"
-      :disabled="disabled"
-      :size="size"
-      :last-values="lastValues"
-      :init-values="initValues"
-      :values="values"
-      :prop="`${prop}${prop ? '.' : ''}${name}`"
-      @change="onChangeHandler"
-    ></component>
-
-    <TMagicButton
-      v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId && hasDataSourceSidePanel"
-      class="m-fields-select-action-button"
-      :size="size"
-      @click="editHandler(selectedDataSourceId)"
-      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-    ></TMagicButton>
-
-    <TMagicButton
-      v-if="config.fieldConfig"
-      style="margin-left: 5px"
-      :type="showDataSourceFieldSelect ? 'primary' : 'default'"
-      :size="size"
-      @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
-      ><MIcon :icon="Coin"></MIcon
-    ></TMagicButton>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref, resolveComponent, watch } from 'vue';
-import { Coin, Edit, View } from '@element-plus/icons-vue';
-
-import { TMagicButton } from '@tmagic/design';
-import type { CascaderConfig, FieldProps, FormState } from '@tmagic/form';
-import { filterFunction, MCascader } from '@tmagic/form';
-import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
-
-import MIcon from '@editor/components/Icon.vue';
-import type { DataSourceFieldSelectConfig, EventBus, Services } from '@editor/type';
-import { SideItemKey } from '@editor/type';
-import { getCascaderOptionsFromFields } from '@editor/utils';
-
-defineOptions({
-  name: 'MFieldsDataSourceFieldSelect',
-});
-
-const services = inject<Services>('services');
-const eventBus = inject<EventBus>('eventBus');
-const emit = defineEmits(['change']);
-
-const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
-  disabled: false,
-});
-
-const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
-
-const hasDataSourceSidePanel = computed(() =>
-  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
-);
-
-const selectedDataSourceId = computed(() => {
-  const value = props.model[props.name];
-  if (!Array.isArray(value) || !value.length) {
-    return '';
-  }
-
-  return value[0].replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, '');
-});
-
-const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
-
-const cascaderConfig = computed<CascaderConfig>(() => {
-  const valueIsKey = props.config.value === 'key';
-
-  return {
-    type: 'cascader',
-    checkStrictly: props.config.checkStrictly ?? !valueIsKey,
-    popperClass: 'm-editor-data-source-field-select-popper',
-    options: () => {
-      const options =
-        dataSources.value?.map((ds) => ({
-          label: ds.title || ds.id,
-          value: valueIsKey ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-          children: getCascaderOptionsFromFields(ds.fields, props.config.dataSourceFieldType),
-        })) || [];
-      return options.filter((option) => option.children.length);
-    },
-  };
-});
-
-const showDataSourceFieldSelect = ref(false);
-
-watch(
-  () => props.model[props.name],
-  (value) => {
-    if (
-      Array.isArray(value) &&
-      typeof value[0] === 'string' &&
-      value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
-    ) {
-      showDataSourceFieldSelect.value = true;
-    } else {
-      showDataSourceFieldSelect.value = false;
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
-const mForm = inject<FormState | undefined>('mForm');
-
-const type = computed((): string => {
-  let type = props.config.fieldConfig?.type;
-  if (typeof type === 'function') {
-    type = type(mForm, {
-      model: props.model,
-    });
-  }
-  if (type === 'form') return '';
-  if (type === 'container') return '';
-  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (props.config.items ? '' : 'text');
-});
-
-const tagName = computed(() => {
-  if (showDataSourceFieldSelect.value || !props.config.fieldConfig) {
-    return MCascader;
-  }
-
-  const component = resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
-  if (typeof component !== 'string') return component;
-  return 'm-fields-text';
-});
-
-const onChangeHandler = (value: any) => {
-  emit('change', value);
-};
-
-const editHandler = (id: string) => {
-  eventBus?.emit('edit-data-source', id);
-};
-</script>