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

View File

@ -236,6 +236,7 @@ export function createFreeLayoutPreset(
return true; return true;
}, },
ignoreOneSelect: true, // 自由布局不选择单个节点 ignoreOneSelect: true, // 自由布局不选择单个节点
ignoreChildrenLength: true, // 自由布局忽略子节点数量
...(opts.selectBox || {}), ...(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 { 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; const BOUNDS_PADDING = 2;
export function getSelectionBounds( export function getSelectionBounds(
selection: Entity[], selection: Entity[],
ignoreOneSelect?: boolean, // 忽略单选 ignoreOneSelect: boolean = true // 忽略单选
): Rectangle { ): Rectangle {
const selectedNodes = selection.filter(node => node instanceof FlowNodeEntity); const selectedNodes = selection.filter((node) => node instanceof WorkflowNodeEntity);
if (!selectedNodes?.length) {
return Rectangle.EMPTY;
}
// 选中单个的时候不显示 // 选中单个的时候不显示
if ( return selectedNodes.length > (ignoreOneSelect ? 1 : 0)
ignoreOneSelect && ? Rectangle.enlarge(selectedNodes.map((n) => n.getData(FlowNodeTransformData)!.bounds)).pad(
selectedNodes.length === 1 && BOUNDS_PADDING
// 选中的节点不包含多个子节点 )
(selectedNodes[0] as FlowNodeEntity).childrenLength <= 1 : Rectangle.EMPTY;
) {
return Rectangle.EMPTY;
}
return Rectangle.enlarge(selectedNodes.map(n => n.getData(FlowNodeTransformData)!.bounds)).pad(
BOUNDS_PADDING,
);
} }