feat(elements): multiselect

src/container/FlowRenderer/index.tsx

@@ -36,6 +36,7 @@ const FlowRenderer = ({
   onMoveStart,
   onMoveEnd,
   selectionKeyCode,
+  multiSelectionKeyCode,
   zoomOnScroll,
   zoomOnDoubleClick,
   paneMoveable,
@@ -48,12 +49,15 @@ const FlowRenderer = ({
   onSelectionContextMenu,
 }: FlowRendererProps) => {
   const zoomPane = useRef<HTMLDivElement>(null);
+
   const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
+  const resetSelectedElements = useStoreActions((actions) => actions.resetSelectedElements);
   const nodesSelectionActive = useStoreState((state) => state.nodesSelectionActive);
+
   const selectionKeyPressed = useKeyPress(selectionKeyCode);
 
   useResizeHandler(zoomPane);
-  useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
+  useGlobalKeyHandler({ onElementsRemove, deleteKeyCode, multiSelectionKeyCode });
 
   useD3Zoom({
     zoomPane,
@@ -73,6 +77,7 @@ const FlowRenderer = ({
     (event: MouseEvent) => {
       onPaneClick?.(event);
       unsetNodesSelection();
+      resetSelectedElements();
     },
     [onPaneClick]
   );

src/container/GraphView/index.tsx

@@ -55,6 +55,7 @@ export interface GraphViewProps {
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;
   deleteKeyCode: number;
+  multiSelectionKeyCode: number;
   snapToGrid: boolean;
   snapGrid: [number, number];
   onlyRenderVisibleNodes: boolean;
@@ -96,6 +97,7 @@ const GraphView = ({
   connectionLineStyle,
   connectionLineComponent,
   selectionKeyCode,
+  multiSelectionKeyCode,
   onElementsRemove,
   deleteKeyCode,
   elements,
@@ -245,6 +247,7 @@ const GraphView = ({
       onElementsRemove={onElementsRemove}
       deleteKeyCode={deleteKeyCode}
       selectionKeyCode={selectionKeyCode}
+      multiSelectionKeyCode={multiSelectionKeyCode}
       onMove={onMove}
       onMoveStart={onMoveStart}
       onMoveEnd={onMoveEnd}

src/container/ReactFlow/index.tsx

@@ -82,6 +82,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   connectionLineComponent?: ConnectionLineComponent;
   deleteKeyCode?: number;
   selectionKeyCode?: number;
+  multiSelectionKeyCode?: number;
   snapToGrid?: boolean;
   snapGrid?: [number, number];
   onlyRenderVisibleNodes?: boolean;
@@ -132,6 +133,7 @@ const ReactFlow = ({
   connectionLineComponent,
   deleteKeyCode = 8,
   selectionKeyCode = 16,
+  multiSelectionKeyCode = 91,
   snapToGrid = false,
   snapGrid = [15, 15],
   onlyRenderVisibleNodes = true,
@@ -182,6 +184,7 @@ const ReactFlow = ({
           selectionKeyCode={selectionKeyCode}
           onElementsRemove={onElementsRemove}
           deleteKeyCode={deleteKeyCode}
+          multiSelectionKeyCode={multiSelectionKeyCode}
           elements={elements}
           onConnect={onConnect}
           onConnectStart={onConnectStart}