@tmagic/editor 1.4.6 → 1.4.8

package/src/components/Tree.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="m-editor-tree" @dragover="handleDragOver">
-    <template v-if="data?.length">
-      <TreeNode v-for="item in data" :key="item.id" :data="item" :indent="indent" :node-status-map="nodeStatusMap">
-        <template #tree-node-content="{ data: nodeData }">
-          <slot name="tree-node-content" :data="nodeData"> </slot>
-        </template>
-
-        <template #tree-node-label="{ data: nodeData }">
-          <slot name="tree-node-label" :data="nodeData"> </slot>
-        </template>
-
-        <template #tree-node-tool="{ data: nodeData }">
-          <slot name="tree-node-tool" :data="nodeData"> </slot>
-        </template>
-      </TreeNode>
-    </template>
-    <div v-else class="m-editor-tree-empty">
-      <p>{{ emptyText }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { provide } from 'vue';
-
-import type { Id } from '@tmagic/schema';
-
-import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
-
-import TreeNode from './TreeNode.vue';
-
-defineSlots<{
-  'tree-node-content'(props: { data: TreeNodeData }): any;
-  'tree-node-label'(props: { data: TreeNodeData }): any;
-  'tree-node-tool'(props: { data: TreeNodeData }): any;
-}>();
-
-defineOptions({
-  name: 'MEditorTree',
-});
-
-const emit = defineEmits<{
-  'node-dragover': [event: DragEvent];
-  'node-dragstart': [event: DragEvent, data: TreeNodeData];
-  'node-dragleave': [event: DragEvent, data: TreeNodeData];
-  'node-dragend': [event: DragEvent, data: TreeNodeData];
-  'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
-  'node-mouseenter': [event: MouseEvent, data: TreeNodeData];
-  'node-click': [event: MouseEvent, data: TreeNodeData];
-}>();
-
-provide('treeEmit', emit);
-
-withDefaults(
-  defineProps<{
-    data: TreeNodeData[];
-    nodeStatusMap: Map<Id, LayerNodeStatus>;
-    indent?: number;
-    emptyText?: string;
-  }>(),
-  {
-    indent: 0,
-    emptyText: '暂无数据',
-  },
-);
-
-const handleDragOver = (event: DragEvent) => {
-  emit('node-dragover', event);
-};
-</script>

package/src/components/TreeNode.vue

@@ -1,148 +0,0 @@
-<template>
-  <div
-    v-show="visible"
-    class="m-editor-tree-node"
-    :draggable="draggable"
-    :data-node-id="data.id"
-    :data-is-container="Array.isArray(data.items)"
-    @dragstart="handleDragStart"
-    @dragleave="handleDragLeave"
-    @dragend="handleDragEnd"
-  >
-    <div
-      class="tree-node"
-      :class="{ selected, expanded }"
-      :style="`padding-left: ${indent}px`"
-      @contextmenu="nodeContentmenuHandler"
-      @mouseenter="mouseenterHandler"
-    >
-      <MIcon
-        class="expand-icon"
-        :style="hasChildren ? '' : 'color: transparent; cursor: default'"
-        :icon="expanded ? ArrowDown : ArrowRight"
-        @click="expandHandler"
-      ></MIcon>
-
-      <div class="tree-node-content" @click="nodeClickHandler">
-        <slot name="tree-node-content" :data="data">
-          <div class="tree-node-label">
-            <slot name="tree-node-label" :data="data">{{ `${data.name} (${data.id})` }}</slot>
-          </div>
-          <div class="tree-node-tool">
-            <slot name="tree-node-tool" :data="data"></slot>
-          </div>
-        </slot>
-      </div>
-    </div>
-
-    <div v-if="hasChildren && expanded" class="m-editor-tree-node-children">
-      <TreeNode
-        v-for="item in data.items"
-        :key="item.id"
-        :data="item"
-        :node-status-map="nodeStatusMap"
-        :indent="indent + 11"
-      >
-        <template #tree-node-content="{ data: nodeData }">
-          <slot name="tree-node-content" :data="nodeData"> </slot>
-        </template>
-        <template #tree-node-label="{ data: nodeData }">
-          <slot name="tree-node-label" :data="nodeData"> </slot>
-        </template>
-        <template #tree-node-tool="{ data: nodeData }">
-          <slot name="tree-node-tool" :data="nodeData"> </slot>
-        </template>
-      </TreeNode>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
-
-import type { Id } from '@tmagic/schema';
-
-import MIcon from '@editor/components/Icon.vue';
-import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { updateStatus } from '@editor/utils/tree';
-
-defineSlots<{
-  'tree-node-label'(props: { data: TreeNodeData }): any;
-  'tree-node-tool'(props: { data: TreeNodeData }): any;
-  'tree-node-content'(props: { data: TreeNodeData }): any;
-}>();
-
-defineOptions({
-  name: 'MEditorTreeNode',
-});
-
-const emit = defineEmits<{
-  'node-dragstart': [event: DragEvent, data: TreeNodeData];
-  'node-dragleave': [event: DragEvent, data: TreeNodeData];
-  'node-dragend': [event: DragEvent, data: TreeNodeData];
-  'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
-  'node-mouseenter': [event: MouseEvent, data: TreeNodeData];
-  'node-click': [event: MouseEvent, data: TreeNodeData];
-}>();
-
-const treeEmit = inject<typeof emit>('treeEmit');
-
-const props = withDefaults(
-  defineProps<{
-    data: TreeNodeData;
-    nodeStatusMap: Map<Id, LayerNodeStatus>;
-    indent?: number;
-  }>(),
-  {
-    indent: 0,
-  },
-);
-
-const nodeStatus = computed(
-  () =>
-    props.nodeStatusMap?.get(props.data.id) || {
-      selected: false,
-      expand: false,
-      visible: false,
-      draggable: false,
-    },
-);
-
-const expanded = computed(() => nodeStatus.value.expand);
-const selected = computed(() => nodeStatus.value.selected);
-const visible = computed(() => nodeStatus.value.visible);
-const draggable = computed(() => nodeStatus.value.draggable);
-
-const hasChildren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
-
-const handleDragStart = (event: DragEvent) => {
-  treeEmit?.('node-dragstart', event, props.data);
-};
-
-const handleDragLeave = (event: DragEvent) => {
-  treeEmit?.('node-dragleave', event, props.data);
-};
-
-const handleDragEnd = (event: DragEvent) => {
-  treeEmit?.('node-dragend', event, props.data);
-};
-
-const nodeContentmenuHandler = (event: MouseEvent) => {
-  treeEmit?.('node-contextmenu', event, props.data);
-};
-
-const mouseenterHandler = (event: MouseEvent) => {
-  treeEmit?.('node-mouseenter', event, props.data);
-};
-
-const expandHandler = () => {
-  updateStatus(props.nodeStatusMap, props.data.id, {
-    expand: !expanded.value,
-  });
-};
-
-const nodeClickHandler = (event: MouseEvent) => {
-  treeEmit?.('node-click', event, props.data);
-};
-</script>

package/src/editorProps.ts

@@ -1,124 +0,0 @@
-import type { EventOption } from '@tmagic/core';
-import type { CustomTargetOptions } from '@tmagic/dep';
-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;
-  /** 自定义依赖收集器，复制组件时会将关联组件一并复制 */
-  collectorOptions?: CustomTargetOptions;
-  /** 自定义依赖收集器，复制组件时会将关联代码块一并复制 */
-  collectorOptionsForCode?: CustomTargetOptions;
-  /** 自定义依赖收集器，复制组件时会将关联数据源一并复制 */
-  collectorOptionsForDataSource?: CustomTargetOptions;
-  /** 标尺配置 */
-  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>