Merge pull request #28 from easyops-cn/zekun/diagram

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

Author: weareoutman

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

@@ -13,6 +13,7 @@ import type {
   NodeBrickConf,
   NodeCell,
   EditableLine,
+  BaseEdgeCell,
 } from "./interfaces";
 import {
   isContainerDecoratorCell,
@@ -51,6 +52,10 @@ export interface CellComponentProps {
   unrelatedCells: Cell[];
   dragNodeToContainerActive?: boolean;
   allowEdgeToArea?: boolean;
+  curActiveEditableEdge?: BaseEdgeCell | null;
+  updateCurActiveEditableEdge?: (
+    activeEditableEdge: BaseEdgeCell | null
+  ) => void;
   onCellsMoving?(info: MoveCellPayload[]): void;
   onCellsMoved?(info: MoveCellPayload[]): void;
   onCellResizing?(info: ResizeCellPayload): void;
@@ -82,6 +87,8 @@ export function CellComponent({
   hoverCell,
   unrelatedCells,
   allowEdgeToArea,
+  curActiveEditableEdge,
+  updateCurActiveEditableEdge,
   onCellsMoving,
   onCellsMoved,
   onCellResizing,
@@ -96,7 +103,6 @@ export function CellComponent({
   onCellMouseLeave,
 }: CellComponentProps): JSX.Element | null {
   const {
-    activeEditableEdge,
     lineEditorState,
     smartConnectLineState,
     setSmartConnectLineState,
@@ -109,7 +115,7 @@ export function CellComponent({
     () => unrelatedCells.some((item) => sameTarget(item, cell)),
     [cell, unrelatedCells]
   );
-  // `containerRect` is undefined when it's an edge cell.
+
   const containerRect = useMemo((): DecoratorView | undefined => {
     if (isContainerDecoratorCell(cell) && isNoManualLayout(layout)) {
       const containCells = cells.filter(
@@ -150,6 +156,7 @@ export function CellComponent({
           onCellsMoving,
           onCellsMoved,
           onSwitchActiveTarget,
+          updateCurActiveEditableEdge,
         });
       }
     };
@@ -169,7 +176,6 @@ export function CellComponent({
     readOnly,
     transform.k,
   ]);
-
   // istanbul ignore next: experimental
   useEffect(() => {
     const g = gRef.current;
@@ -196,10 +202,10 @@ export function CellComponent({
           );
         }
         setSmartConnectLineState(null);
-      } else if (activeEditableEdge && lineEditorState) {
+      } else if (curActiveEditableEdge && lineEditorState) {
         const { type } = lineEditorState;
-        const { source, target } = editableLineMap.get(activeEditableEdge)!;
-        const { view } = activeEditableEdge;
+        const { source, target } = editableLineMap.get(curActiveEditableEdge)!;
+        const { view } = curActiveEditableEdge;
 
         const isEntry = type === "entry";
         if ((isEntry ? target : source) === cell) {
@@ -225,7 +231,7 @@ export function CellComponent({
       g.removeEventListener("mouseup", onMouseUp);
     };
   }, [
-    activeEditableEdge,
+    curActiveEditableEdge,
     editableLineMap,
     allowEdgeToArea,
     cell,
@@ -235,6 +241,7 @@ export function CellComponent({
     setLineEditorState,
     setSmartConnectLineState,
     smartConnectLineState,
+    updateCurActiveEditableEdge,
   ]);
 
   const handleContextMenu = useCallback(
@@ -276,7 +283,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");
@@ -54,14 +64,18 @@ export function LineEditorComponent({
       exit.removeEventListener("mousedown", handleStartMouseDown);
       entry.removeEventListener("mousedown", handleEndMouseDown);
     };
-  }, [activeEditableEdge, rootRef, setLineEditorState]);
+  }, [
+    activeEditableEdge,
+    rootRef,
+    setLineEditorState,
+    updateCurActiveEditableEdge,
+  ]);
 
   const controlPoints = useMemo(() => {
     return activeEditableEdge && !isStraightType(activeEditableEdge.view?.type)
       ? getControlPoints(editableLineMap.get(activeEditableEdge)!.points!)
       : [];
   }, [activeEditableEdge, editableLineMap]);
-
   useEffect(() => {
     if (!activeEditableEdge) {
       return;
@@ -71,6 +85,7 @@ export function LineEditorComponent({
       return (e: MouseEvent) => {
         e.stopPropagation();
         e.preventDefault();
+        updateCurActiveEditableEdge?.(activeEditableEdge);
         const rect = rootRef.current!.getBoundingClientRect();
         setLineEditorState({
           offset: [rect.left, rect.top],
@@ -91,7 +106,13 @@ export function LineEditorComponent({
         el?.removeEventListener("mousedown", handlers[i]);
       });
     };
-  }, [activeEditableEdge, controlPoints, rootRef, setLineEditorState]);
+  }, [
+    activeEditableEdge,
+    controlPoints,
+    rootRef,
+    setLineEditorState,
+    updateCurActiveEditableEdge,
+  ]);
 
   const gRef = useRef<SVGGElement>(null);
   useEffect(() => {