mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-06-24 11:19:17 +08:00
127 lines
5.1 KiB
TypeScript
127 lines
5.1 KiB
TypeScript
import type { DataSourceSchema, EventOption, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/core';
|
||
import type { FormConfig, FormState } from '@tmagic/form';
|
||
import StageCore, {
|
||
CONTAINER_HIGHLIGHT_CLASS_NAME,
|
||
ContainerHighlightType,
|
||
type CustomizeMoveableOptionsCallbackConfig,
|
||
type GuidesOptions,
|
||
type MoveableOptions,
|
||
RenderType,
|
||
type UpdateDragEl,
|
||
} from '@tmagic/stage';
|
||
import { getIdFromEl } from '@tmagic/utils';
|
||
|
||
import type {
|
||
ComponentGroup,
|
||
DatasourceTypeOption,
|
||
MenuBarData,
|
||
MenuButton,
|
||
MenuComponent,
|
||
PageBarSortOptions,
|
||
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;
|
||
/** 已选组件、代码编辑、数据源缩进配置 */
|
||
treeIndent?: number;
|
||
/** 已选组件、代码编辑、数据源子节点缩进增量配置 */
|
||
treeNextLevelIndentIncrement?: number;
|
||
/** 中间工作区域中画布渲染的内容 */
|
||
render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
|
||
/** 选中时会在画布上复制出一个大小相同的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>>;
|
||
/** 页面顺序拖拽配置参数 */
|
||
pageBarSortOptions?: PageBarSortOptions;
|
||
/** 页面搜索函数 */
|
||
pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
|
||
}
|
||
|
||
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(getIdFromEl()(el)),
|
||
isContainer: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
|
||
codeOptions: () => ({}),
|
||
};
|