fix(canvas-core): select container node should not render selector layer in free layout

This commit is contained in:
liuyangxing 2025-03-17 19:54:30 +08:00
parent f49f359db4
commit 561c7c620c
3 changed files with 17 additions and 28 deletions

View File

@ -1,11 +1,9 @@
import React from 'react';
import { inject, injectable } from 'inversify';
import {
FlowNodeEntity,
FlowNodeRenderData,
FlowNodeTransformData,
} from '@flowgram.ai/document';
import { domUtils } from '@flowgram.ai/utils';
import { Rectangle } from '@flowgram.ai/utils';
import { FlowNodeEntity, FlowNodeRenderData, FlowNodeTransformData } from '@flowgram.ai/document';
import {
CommandRegistry,
EditorState,
@ -16,8 +14,6 @@ import {
observeEntity,
observeEntityDatas,
} from '@flowgram.ai/core';
import { domUtils } from '@flowgram.ai/utils';
import { Rectangle } from '@flowgram.ai/utils';
import { FlowRendererKey, FlowRendererRegistry } from '../flow-renderer-registry';
import { FlowSelectConfigEntity, SelectorBoxConfigEntity } from '../entities';
@ -32,6 +28,7 @@ export interface SelectorBoxPopoverProps {
export interface FlowSelectorBoundsLayerOptions extends LayerOptions {
ignoreOneSelect?: boolean;
ignoreChildrenLength?: boolean;
boundsPadding?: number; // 边框留白,默认 10
disableBackground?: boolean; // 禁用背景框
backgroundClassName?: string; // 节点下边
@ -130,6 +127,7 @@ export class FlowSelectorBoundsLayer extends Layer<FlowSelectorBoundsLayerOption
render(): JSX.Element {
const {
ignoreOneSelect,
ignoreChildrenLength,
SelectorBoxPopover: SelectorBoxPopoverFromOpts,
disableBackground,
CustomBoundsRenderer,
@ -148,7 +146,7 @@ export class FlowSelectorBoundsLayer extends Layer<FlowSelectorBoundsLayerOption
(ignoreOneSelect &&
selectedNodes.length === 1 &&
// 选中的节点不包含多个子节点
(selectedNodes[0] as FlowNodeEntity).childrenLength <= 1)
(ignoreChildrenLength || (selectedNodes[0] as FlowNodeEntity).childrenLength <= 1))
) {
domUtils.setStyle(bg, {
display: 'none',

View File

@ -236,6 +236,7 @@ export function createFreeLayoutPreset(
return true;
},
ignoreOneSelect: true, // 自由布局不选择单个节点
ignoreChildrenLength: true, // 自由布局忽略子节点数量
...(opts.selectBox || {}),
})
);

View File

@ -1,30 +1,20 @@
import { FlowNodeTransformData, FlowNodeEntity } from '@flowgram.ai/document';
import { type Entity } from '@flowgram.ai/core';
import { Rectangle } from '@flowgram.ai/utils';
import { WorkflowNodeEntity } from '@flowgram.ai/free-layout-core';
import { FlowNodeTransformData } from '@flowgram.ai/document';
import { type Entity } from '@flowgram.ai/core';
const BOUNDS_PADDING = 2;
export function getSelectionBounds(
selection: Entity[],
ignoreOneSelect?: boolean, // 忽略单选
ignoreOneSelect: boolean = true // 忽略单选
): Rectangle {
const selectedNodes = selection.filter(node => node instanceof FlowNodeEntity);
if (!selectedNodes?.length) {
return Rectangle.EMPTY;
}
const selectedNodes = selection.filter((node) => node instanceof WorkflowNodeEntity);
// 选中单个的时候不显示
if (
ignoreOneSelect &&
selectedNodes.length === 1 &&
// 选中的节点不包含多个子节点
(selectedNodes[0] as FlowNodeEntity).childrenLength <= 1
) {
return Rectangle.EMPTY;
}
return Rectangle.enlarge(selectedNodes.map(n => n.getData(FlowNodeTransformData)!.bounds)).pad(
BOUNDS_PADDING,
);
return selectedNodes.length > (ignoreOneSelect ? 1 : 0)
? Rectangle.enlarge(selectedNodes.map((n) => n.getData(FlowNodeTransformData)!.bounds)).pad(
BOUNDS_PADDING
)
: Rectangle.EMPTY;
}