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

Closes CMDB_VIEW-314

Author: panzekun

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

@@ -96,7 +96,7 @@ export function CellComponent({
   onCellMouseLeave,
 }: CellComponentProps): JSX.Element | null {
   const {
-    activeEditableEdge,
+    activeEditableEdges,
     lineEditorState,
     smartConnectLineState,
     setSmartConnectLineState,
@@ -109,6 +109,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)) {
@@ -276,7 +285,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/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/LineEditorComponent.tsx

@@ -16,14 +16,15 @@ const POINT_HELPER_BG_SIZE = 22;
 export interface LineEditorComponentProps {
   scale: number;
   editableLineMap: WeakMap<EdgeCell, EditableLine>;
+  activeEditableEdge: EdgeCell;
 }
 
 export function LineEditorComponent({
   scale,
   editableLineMap,
+  activeEditableEdge,
 }: 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)[]>([]);
@@ -61,7 +62,6 @@ export function LineEditorComponent({
       ? getControlPoints(editableLineMap.get(activeEditableEdge)!.points!)
       : [];
   }, [activeEditableEdge, editableLineMap]);
-
   useEffect(() => {
     if (!activeEditableEdge) {
       return;

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

@@ -13,7 +13,7 @@ import { ReactNextElement } from "@next-core/react-element";
 import type { UseSingleBrickConf } from "@next-core/react-runtime";
 import { unwrapProvider } from "@next-core/utils/general";
 import "@next-core/theme";
-import { uniqueId } from "lodash";
+import { get, uniqueId } from "lodash";
 import classNames from "classnames";
 import { select } from "d3-selection";
 import type { lockBodyScroll as _lockBodyScroll } from "@next-bricks/basic/data-providers/lock-body-scroll/lock-body-scroll";
@@ -520,7 +520,7 @@ class EoDrawCanvas extends ReactNextElement implements EoDrawCanvasProps {
       source,
       target,
       data,
-      view: this.lineSettings,
+      view: this.lineSettings!,
     };
     this.#canvasRef.current?.addEdge(newEdge);
     return newEdge;
@@ -1041,25 +1041,24 @@ function LegacyEoDrawCanvasComponent(
     },
     [zoomer]
   );
-
   const { lineConfMap, lineConnectorConf, markers } = useLineMarkers({
     cells,
     defaultEdgeLines,
     lineConnector,
     markerPrefix,
   });
+
   const editableLineMap = useEditableLineMap({ cells, lineConfMap });
-  const activeEditableEdge = useMemo(() => {
-    let edge: EdgeCell | undefined;
-    if (activeTarget?.type === "edge") {
-      edge = cells.find((cell) =>
-        targetIsActive(cell, activeTarget)
-      ) as EdgeCell;
-    }
-    if (edge && editableLineMap.has(edge)) {
-      return edge;
-    }
-    return null;
+
+  const activeEditableEdges = useMemo(() => {
+    let edges: EdgeCell[] = [];
+    edges = cells.filter(
+      (cell) =>
+        targetIsActive(cell, activeTarget) &&
+        cell.type === "edge" &&
+        editableLineMap.has(cell)
+    ) as EdgeCell[];
+    return edges;
   }, [activeTarget, cells, editableLineMap]);
 
   const ready = useReady({ cells, layout, centered });
@@ -1181,7 +1180,7 @@ function LegacyEoDrawCanvasComponent(
       smartConnectLineState,
       unsetHoverStateTimeoutRef,
       hoverState,
-      activeEditableEdge,
+      activeEditableEdges,
       lineEditorState,
       setLineEditorState,
       setHoverState,
@@ -1190,7 +1189,7 @@ function LegacyEoDrawCanvasComponent(
       onChangeEdgeView: handleEdgeChangeView,
     }),
     [
-      activeEditableEdge,
+      activeEditableEdges,
       handleEdgeChangeView,
       handleSmartConnect,
       hoverState,
@@ -1214,20 +1213,23 @@ function LegacyEoDrawCanvasComponent(
         },
         onLassoed(rect) {
           setLassoRect(null);
-          const lassoedCells: (NodeCell | DecoratorCell)[] = [];
+          const lassoedCells: (NodeCell | DecoratorCell | EdgeCell)[] = [];
           for (const cell of cells) {
             if (
               isContainerDecoratorCell(cell) ||
               isNodeOrAreaDecoratorCell(cell) ||
-              isTextDecoratorCell(cell)
+              isTextDecoratorCell(cell) ||
+              isEdgeCell(cell)
             ) {
-              const x = cell.view.x;
-              const y = cell.view.y;
+              const x = get(cell, "view.x", 0);
+              const y = get(cell, "view.y", 0);
+              const width = get(cell, "view.width", 0);
+              const height = get(cell, "view.height", 0);
               if (
                 x >= rect.x &&
-                x + cell.view.width <= rect.x + rect.width &&
+                x + width <= rect.x + rect.width &&
                 y >= rect.y &&
-                y + cell.view.height <= rect.y + rect.height
+                y + height <= rect.y + rect.height
               ) {
                 lassoedCells.push(cell);
               }
@@ -1352,12 +1354,15 @@ function LegacyEoDrawCanvasComponent(
             ))}
           </g>
           <g>
-            {lineConnectorConf && (
-              <LineEditorComponent
-                editableLineMap={editableLineMap}
-                scale={transform.k}
-              />
-            )}
+            {lineConnectorConf &&
+              activeEditableEdges?.map((activeEdge) => (
+                <LineEditorComponent
+                  editableLineMap={editableLineMap}
+                  scale={transform.k}
+                  activeEditableEdge={activeEdge}
+                  key={`${activeEdge.source}-${activeEdge.target}`}
+                />
+              ))}
           </g>
           {lineConnectorConf && (
             <LineConnectorComponent

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

@@ -99,6 +99,10 @@ export interface EdgeView extends LineSettings {
   exitPosition?: NodePosition | null;
   entryPosition?: NodePosition | null;
   vertices?: NodePosition[] | null;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
 }
 
 export interface EdgeLineConf extends BaseEdgeLineConf {

bricks/diagram/src/draw-canvas/processors/handleKeyboard.ts

@@ -30,7 +30,6 @@ export function handleKeyboard(
     event.key ||
     /* istanbul ignore next: compatibility */ event.keyCode ||
     /* istanbul ignore next: compatibility */ event.which;
-
   switch (key) {
     case "Backspace":
     case 8:

bricks/diagram/src/draw-canvas/processors/handleMouseDown.ts

@@ -7,6 +7,7 @@ import type {
   LayoutType,
   NodeCell,
   SnapToObjectPosition,
+  ActiveTargetOfSingular,
 } from "../interfaces";
 import type {
   MoveCellPayload,
@@ -21,6 +22,7 @@ import {
 import { cellToTarget } from "./cellToTarget";
 import { getSnapPositions, type SnapPositions } from "./getSnapPositions";
 import { normalizeSnapOptions } from "./normalizeSnapOptions";
+import { sameTarget } from "./sameTarget";
 import { targetIsActive } from "./targetIsActive";
 
 const HORIZONTAL_POSITIONS = ["left", "center", "right"];
@@ -58,9 +60,26 @@ export function handleMouseDown(
 ) {
   event.stopPropagation();
   // Drag node
-  if (action === "resize" || !targetIsActive(cell, activeTarget)) {
-    onSwitchActiveTarget?.(cellToTarget(cell));
+  const preActive = targetIsActive(cell, activeTarget);
+  if (event.shiftKey) {
+    const activeTargets = activeTarget
+      ? activeTarget?.type === "multi"
+        ? activeTarget.targets
+        : [activeTarget]
+      : [];
+    let targets: ActiveTargetOfSingular[] = [];
+    if (preActive) {
+      targets = activeTargets.filter((target) => !sameTarget(target, cell));
+    } else {
+      targets = [...activeTargets, cell];
+    }
+    onSwitchActiveTarget?.({ type: "multi", targets });
+  } else {
+    if (action === "resize" || !preActive) {
+      onSwitchActiveTarget?.(cellToTarget(cell));
+    }
   }
+
   if (isEdgeCell(cell)) {
     return;
   }

bricks/diagram/src/editable-label/styles.shadow.css

@@ -46,6 +46,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  user-select: none;
 }
 
 .label.editing .label-text,

bricks/diagram/src/shared/canvas/styles.shadow.css

@@ -77,7 +77,7 @@
 
 .decorator-area .area,
 .decorator-container .container {
-  fill: rgba(119, 141, 195, 0.1);
+  fill: rgba(73, 126, 255, 0.1);
   stroke: none;
   stroke-width: 0;
 }
@@ -214,7 +214,7 @@
     padding: 0.5em;
     text-align: center;
     font-size: 16px;
-    background-color: rgba(119, 141, 195, 0.6);
+    background-color: rgba(73, 126, 255, 0.6);
     overflow: hidden;
   }