Browse Source

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

liuyangxing 10 months ago
parent
commit
561c7c620c

+ 6 - 8
packages/canvas-engine/renderer/src/layers/flow-selector-bounds-layer.tsx

@@ -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',

+ 1 - 0
packages/client/free-layout-editor/src/preset/free-layout-preset.ts

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

+ 10 - 20
packages/plugins/free-hover-plugin/src/selection-utils.ts

@@ -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;
 }