diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue index a4edce6c..75a728dc 100644 --- a/packages/editor/src/fields/UISelect.vue +++ b/packages/editor/src/fields/UISelect.vue @@ -49,7 +49,7 @@ import { TMagicButton, TMagicTooltip } from '@tmagic/design'; import type { FieldProps, FormState } from '@tmagic/form'; import type { Id } from '@tmagic/schema'; -import type { Services } from '@editor/type'; +import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type'; defineOptions({ name: 'MEditorUISelect', @@ -68,7 +68,7 @@ const cancelHandler = () => { if (!services?.uiService) return; services.uiService.set('uiSelectMode', false); uiSelectMode.value = false; - globalThis.document.removeEventListener('ui-select', clickHandler as EventListener); + globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener); }; const clickHandler = ({ detail }: Event & { detail: any }) => { @@ -92,7 +92,7 @@ const startSelect = () => { if (!services?.uiService) return; services.uiService.set('uiSelectMode', true); uiSelectMode.value = true; - globalThis.document.addEventListener('ui-select', clickHandler as EventListener); + globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener); }; const deleteHandler = () => { diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts index 64eba92b..c310deb9 100644 --- a/packages/editor/src/hooks/use-stage.ts +++ b/packages/editor/src/hooks/use-stage.ts @@ -5,7 +5,12 @@ import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData import editorService from '@editor/services/editor'; import uiService from '@editor/services/ui'; -import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '@editor/type'; +import { + H_GUIDE_LINE_STORAGE_KEY, + StageOptions, + UI_SELECT_MODE_EVENT_NAME, + V_GUIDE_LINE_STORAGE_KEY, +} from '@editor/type'; import { getGuideLineFromCache } from '@editor/utils/editor'; const root = computed(() => editorService.get('root')); @@ -30,7 +35,7 @@ export const useStage = (stageOptions: StageOptions) => { const elCanSelect = stageOptions.canSelect(el); // 在组件联动过程中不能再往下选择,返回并触发 ui-select if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') { - document.dispatchEvent(new CustomEvent('ui-select', { detail: el })); + document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el })); return stop(); } diff --git a/packages/editor/src/layouts/sidebar/layer/LayerNode.vue b/packages/editor/src/layouts/sidebar/layer/LayerNode.vue index b457dc04..a36d6af6 100644 --- a/packages/editor/src/layouts/sidebar/layer/LayerNode.vue +++ b/packages/editor/src/layouts/sidebar/layer/LayerNode.vue @@ -62,7 +62,7 @@ import type { Id, MContainer, MNode } from '@tmagic/schema'; import { isPage } from '@tmagic/utils'; import MIcon from '@editor/components/Icon.vue'; -import type { LayerNodeSlots, LayerNodeStatus, Services } from '@editor/type'; +import { LayerNodeSlots, LayerNodeStatus, Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type'; import LayerNodeTool from './LayerNodeTool.vue'; import { useDrag } from './use-drag'; @@ -128,7 +128,7 @@ const nodeClickHandler = () => { if (!nodeStatusMap?.value) return; if (uiService?.get('uiSelectMode')) { - document.dispatchEvent(new CustomEvent('ui-select', { detail: props.data })); + document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: props.data })); return; } @@ -155,7 +155,7 @@ const nodeContentmenuHandler = (event: MouseEvent, node: MNode) => { emit('node-contextmenu', event, node); }; -// 触发画布单选 +// 触发画布选中 const select = async (data: MNode) => { if (!data.id) { throw new Error('没有id'); diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts index ced24200..9c467a6c 100644 --- a/packages/editor/src/type.ts +++ b/packages/editor/src/type.ts @@ -467,6 +467,7 @@ export interface EventSelectConfig { name: string; type: 'event-select'; src: 'datasource' | 'component'; + labelWidth?: string; /** 事件名称表单配置 */ eventNameConfig?: FormItem; /** 动作类型配置 */ @@ -539,6 +540,7 @@ export interface KeyBindingCacheItem { export interface CodeSelectColConfig { type: 'code-select-col'; name: string; + text: string; labelWidth?: number | string; disabled?: boolean | FilterFunction; display?: boolean | FilterFunction; @@ -547,6 +549,7 @@ export interface CodeSelectColConfig { export interface DataSourceMethodSelectConfig { type: 'data-source-method-select'; name: string; + text: string; labelWidth?: number | string; disabled?: boolean | FilterFunction; display?: boolean | FilterFunction; @@ -561,6 +564,7 @@ export interface DataSourceFieldSelectConfig { display?: boolean | FilterFunction; } +/** 依赖收集的目标类型 */ export enum DepTargetType { DEFAULT = 'default', /** 代码块 */ @@ -573,18 +577,31 @@ export enum DepTargetType { DATA_SOURCE_COND = 'data-source-cond', } +/** 可新增的数据源类型选项 */ export interface DatasourceTypeOption { + /** 数据源类型 */ type: string; + /** 数据源名称 */ text: string; } +/** 组件树节点状态 */ export interface LayerNodeStatus { + /** 显隐 */ visible: boolean; + /** 展开子节点 */ expand: boolean; + /** 选中 */ selected: boolean; } +/** 拖拽类型 */ export enum DragType { + /** 从组件列表拖到画布 */ COMPONENT_LIST = 'component-list', + /** 拖动组件树节点 */ LAYER_TREE = 'layer-tree', } + +/** 当uiService.get('uiSelectMode')为true,点击组件(包括任何形式,组件树/画布)时触发的事件名 */ +export const UI_SELECT_MODE_EVENT_NAME = 'ui-select';