mirror of
https://gitee.com/ByteDance/flowgram.ai.git
synced 2025-07-07 17:43:29 +08:00
fix(canvas-core): select container node should not render selector layer in free layout
This commit is contained in:
parent
f49f359db4
commit
561c7c620c
@ -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',
|
||||||
|
|||||||
@ -236,6 +236,7 @@ export function createFreeLayoutPreset(
|
|||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
ignoreOneSelect: true, // 自由布局不选择单个节点
|
ignoreOneSelect: true, // 自由布局不选择单个节点
|
||||||
|
ignoreChildrenLength: true, // 自由布局忽略子节点数量
|
||||||
...(opts.selectBox || {}),
|
...(opts.selectBox || {}),
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user