feat(): 拓扑图支持快捷键shift快速选择和取消选择多个元素，原框选功能需要支持选中边

Closes CMDB_VIEW-314

Author: panzekun

bricks/diagram/src/draw-canvas/CellComponent.tsx

@@ -13,6 +13,7 @@ import type {
   NodeBrickConf,
   NodeCell,
   EditableLine,
+  BaseEdgeCell,
 } from "./interfaces";
 import {
   isContainerDecoratorCell,
@@ -51,6 +52,9 @@ export interface CellComponentProps {
   unrelatedCells: Cell[];
   dragNodeToContainerActive?: boolean;
   allowEdgeToArea?: boolean;
+  updateCurActiveEditableEdge?: (
+    activeEditableEdge: BaseEdgeCell | null
+  ) => void;
   onCellsMoving?(info: MoveCellPayload[]): void;
   onCellsMoved?(info: MoveCellPayload[]): void;
   onCellResizing?(info: ResizeCellPayload): void;
@@ -82,6 +86,7 @@ export function CellComponent({
   hoverCell,
   unrelatedCells,
   allowEdgeToArea,
+  updateCurActiveEditableEdge,
   onCellsMoving,
   onCellsMoved,
   onCellResizing,
@@ -96,7 +101,7 @@ export function CellComponent({
   onCellMouseLeave,
 }: CellComponentProps): JSX.Element | null {
   const {
-    activeEditableEdge,
+    activeEditableEdges,
     lineEditorState,
     smartConnectLineState,
     setSmartConnectLineState,
@@ -109,6 +114,15 @@ export function CellComponent({
     () => unrelatedCells.some((item) => sameTarget(item, cell)),
     [cell, unrelatedCells]
   );
+  const activeEditableEdge = useMemo(
+    () =>
+      cell.type === "edge"
+        ? activeEditableEdges.find(
+            (edge) => edge.source === cell.source && edge.target === cell.target
+          )
+        : null,
+    [cell, activeEditableEdges]
+  );
   // `containerRect` is undefined when it's an edge cell.
   const containerRect = useMemo((): DecoratorView | undefined => {
     if (isContainerDecoratorCell(cell) && isNoManualLayout(layout)) {
@@ -196,7 +210,9 @@ export function CellComponent({
           );
         }
         setSmartConnectLineState(null);
-      } else if (activeEditableEdge && lineEditorState) {
+      } else if (!activeEditableEdge) {
+        updateCurActiveEditableEdge?.(null);
+      } else if (lineEditorState) {
         const { type } = lineEditorState;
         const { source, target } = editableLineMap.get(activeEditableEdge)!;
         const { view } = activeEditableEdge;
@@ -276,7 +292,6 @@ export function CellComponent({
   }, [cell, onCellMouseLeave]);
 
   const active = targetIsActive(cell, activeTarget);
-
   return (
     <g
       className={classNames("cell", {

bricks/diagram/src/draw-canvas/EdgeComponent.tsx

@@ -139,10 +139,18 @@ export function EdgeComponent({
       if (element) {
         // Jest does not support `SVGPathElement::getTotalLength`
         setPathLength(element.getTotalLength?.() ?? 100);
+        const rect = element.getBBox?.();
+        edge.view = {
+          ...edge.view,
+          x: rect?.x,
+          y: rect?.y,
+          width: rect?.width,
+          height: rect?.height,
+        };
       }
       updateLabelPosition();
     },
-    [updateLabelPosition]
+    [updateLabelPosition, edge]
   );
 
   const [labelElement, setLabelElement] = useState<HTMLElement | null>(null);

bricks/diagram/src/draw-canvas/EditingLineComponent.tsx

@@ -26,24 +26,21 @@ export interface EditingLineComponentProps {
   editableLineMap: WeakMap<EdgeCell, EditableLine>;
   transform: TransformLiteral;
   options: ComputedLineConnecterConf;
+  activeEditableEdge: EdgeCell | null;
 }
 
 export function EditingLineComponent({
   cells,
   editableLineMap,
   transform,
   options,
+  activeEditableEdge,
 }: EditingLineComponentProps): JSX.Element {
   const [connectLineTo, setConnectLineTo] = useState<PositionTuple | null>(
     null
   );
-  const {
-    activeEditableEdge,
-    hoverState,
-    lineEditorState,
-    setLineEditorState,
-    onChangeEdgeView,
-  } = useHoverStateContext();
+  const { hoverState, lineEditorState, setLineEditorState, onChangeEdgeView } =
+    useHoverStateContext();
   const movedRef = useRef(false);
 
   useEffect(() => {

bricks/diagram/src/draw-canvas/HoverStateContext.ts

@@ -23,7 +23,7 @@ export const HoverStateContext = React.createContext<{
   smartConnectLineState: SmartConnectLineState | null;
   unsetHoverStateTimeoutRef: React.MutableRefObject<number | null>;
   hoverState: HoverState | null;
-  activeEditableEdge: EdgeCell | null;
+  activeEditableEdges: EdgeCell[];
   lineEditorState: LineEditorState | null;
   setLineEditorState: React.Dispatch<
     React.SetStateAction<LineEditorState | null>
@@ -48,7 +48,7 @@ export const HoverStateContext = React.createContext<{
   smartConnectLineState: null,
   unsetHoverStateTimeoutRef: { current: null },
   hoverState: null,
-  activeEditableEdge: null,
+  activeEditableEdges: [],
   lineEditorState: null,
   setLineEditorState: () => {},
   setHoverState: () => {},

bricks/diagram/src/draw-canvas/LineConnectorComponent.tsx

@@ -22,21 +22,22 @@ export interface LineConnectorComponentProps {
   activeTarget: ActiveTarget | null;
   editableLineMap: WeakMap<EdgeCell, EditableLine>;
   scale: number;
+  activeEditableEdge: EdgeCell | null;
   disabled?: boolean;
 }
 
 export function LineConnectorComponent({
   activeTarget,
   editableLineMap,
   scale,
+  activeEditableEdge,
   disabled,
 }: LineConnectorComponentProps): JSX.Element | null {
   const {
     unsetHoverStateTimeoutRef,
     hoverState,
     setHoverState,
     smartConnectLineState,
-    activeEditableEdge,
     lineEditorState,
   } = useHoverStateContext();
 
@@ -112,6 +113,7 @@ export function LineConnectorComponent({
               index={index}
               point={point}
               scale={scale}
+              activeEditableEdge={activeEditableEdge}
               unsetActivePointIndex={unsetActivePointIndex}
               unsetTimeout={unsetTimeout}
             />
@@ -127,6 +129,7 @@ interface ConnectPointComponentProps {
   index: number;
   point: NodePosition;
   scale: number;
+  activeEditableEdge: EdgeCell | null;
   unsetTimeout: () => void;
   unsetActivePointIndex: () => void;
 }
@@ -136,6 +139,7 @@ function ConnectPointComponent({
   index,
   point,
   scale,
+  activeEditableEdge,
   unsetTimeout,
   unsetActivePointIndex,
 }: ConnectPointComponentProps): JSX.Element {
@@ -146,7 +150,6 @@ function ConnectPointComponent({
     setHoverState,
     setSmartConnectLineState,
     onConnect,
-    activeEditableEdge,
     lineEditorState,
     setLineEditorState,
     onChangeEdgeView,

bricks/diagram/src/draw-canvas/LineEditorComponent.tsx

@@ -2,7 +2,12 @@
 import React, { useEffect, useMemo, useRef } from "react";
 import type { NodePosition } from "../diagram/interfaces";
 import { useHoverStateContext } from "./HoverStateContext";
-import type { ControlPoint, EdgeCell, EditableLine } from "./interfaces";
+import type {
+  BaseEdgeCell,
+  ControlPoint,
+  EdgeCell,
+  EditableLine,
+} from "./interfaces";
 import { isStraightType } from "./processors/asserts";
 
 const POINT_HELPER_IMAGE =
@@ -16,18 +21,22 @@ const POINT_HELPER_BG_SIZE = 22;
 export interface LineEditorComponentProps {
   scale: number;
   editableLineMap: WeakMap<EdgeCell, EditableLine>;
+  activeEditableEdge: EdgeCell;
+  updateCurActiveEditableEdge?: (
+    activeEditableEdge: BaseEdgeCell | null
+  ) => void;
 }
 
 export function LineEditorComponent({
   scale,
   editableLineMap,
+  activeEditableEdge,
+  updateCurActiveEditableEdge,
 }: LineEditorComponentProps): JSX.Element | null {
-  const { rootRef, activeEditableEdge, setLineEditorState } =
-    useHoverStateContext();
+  const { rootRef, setLineEditorState } = useHoverStateContext();
   const exitRef = useRef<SVGImageElement>(null);
   const entryRef = useRef<SVGImageElement>(null);
   const controlPointsRef = useRef<(SVGImageElement | null)[]>([]);
-
   useEffect(() => {
     const exit = exitRef.current;
     const entry = entryRef.current;
@@ -44,6 +53,7 @@ export function LineEditorComponent({
           from: [e.clientX, e.clientY],
           type,
         });
+        updateCurActiveEditableEdge?.(activeEditableEdge);
       };
     };
     const handleStartMouseDown = handleMouseDownFactory("exit");
@@ -61,7 +71,6 @@ export function LineEditorComponent({
       ? getControlPoints(editableLineMap.get(activeEditableEdge)!.points!)
       : [];
   }, [activeEditableEdge, editableLineMap]);
-
   useEffect(() => {
     if (!activeEditableEdge) {
       return;