Add more utility functions to Selection object

Author: rChaoz

.idea/react-grapher.iml

@@ -100,6 +100,8 @@ export function Background({id, className, pattern, color, size, strokeWidth, an
         const sizeMul = typeof size === "number" ? size : patternSizeMap[size ?? "md"]
         const strokeWidthMul = strokeWidth ?? 1
         switch (pattern) {
+            case null:
+            case undefined:
             case "grid":
                 return patternGrid(color, strokeWidthMul, sizeMul)
             case "lines":

src/components/Background/Background.tsx

@@ -587,9 +587,9 @@ export function ReactGrapher<N, E>(props: ControlledGraphProps<N, E> | Uncontrol
                             node: n,
                         })
                     }
-                } else s.selection.setNodesSelection([])
+                } else s.selection.deselectAllNodes() // if an unselected node is moved, move just that one, deselect the others
                 // Deselect edges TODO should edges stay selected?
-                s.selection.setEdgesSelection([])
+                s.selection.deselectAllEdges()
 
                 sendChanges(changes, s)
             }
@@ -789,14 +789,16 @@ export function ReactGrapher<N, E>(props: ControlledGraphProps<N, E> | Uncontrol
                 }
             }
         },
-        // Null because it's set below
+        // Doesn't matter because it's set below
+        nodeBeingResized: false,
         getNode: null as any,
         getEdge: null as any,
     }), [id, props.static, config.nodesOverEdges])
     // This is not put in the useMemo above because nodes/edges objects changing should not trigger a context value change & subsequent re-renders
     // As the result of the function itself does not change
     internalContext.getNode = nodes.internalMap.get.bind(nodes.internalMap)
     internalContext.getEdge = edges.internalMap.get.bind(edges.internalMap)
+    internalContext.nodeBeingResized = grabbed.type === "resizing"
 
     // Context for other components outside the Viewport
     const grapherContext: GrapherContextValue = useMemo(() => ({

src/components/ReactGrapher/ReactGrapher.tsx

@@ -35,6 +35,31 @@ export interface Selection {
      */
     setEdgeSelected(node: string, selected: boolean, newSelection?: boolean): void
 
+    /**
+     * Selects all nodes
+     */
+    selectAllNodes(): void
+
+    /**
+     * Deselects all nodes
+     */
+    deselectAllNodes(): void
+
+    /**
+     * Selects all edges
+     */
+    selectAllEdges(): void
+
+    /**
+     * Deselects all edges
+     */
+    deselectAllEdges(): void
+
+    /**
+     * Selects everything
+     */
+    selectAll(): void
+
     /**
      * Deselect all nodes and edges
      */

src/data/Selection.ts

@@ -60,6 +60,22 @@ export function useSelection<N, E>(nodes: Nodes<N>, edges: Edges<E>): Selection
                 if (selected) this.setEdgesSelection(edgesSelection.concat(id))
             }
         },
+        selectAllNodes() {
+            this.setNodesSelection(nodes.map(node => node.id))
+        },
+        deselectAllNodes() {
+            this.setNodesSelection([])
+        },
+        selectAllEdges() {
+            this.setEdgesSelection(edges.map(edge => edge.id))
+        },
+        deselectAllEdges() {
+            this.setEdgesSelection([])
+        },
+        selectAll() {
+            this.selectAllNodes()
+            this.selectAllEdges()
+        },
         deselectAll() {
             this.setNodesSelection([])
             this.setEdgesSelection([])

src/hooks/useSelection.ts

@@ -2,15 +2,15 @@
 const TAG = "[ReactGrapher]"
 
 function critical(...message: any) {
-    console.error(TAG + " - CRITICAL: ", message)
+    console.error(TAG + " - CRITICAL:", message)
 }
 
 function error(...message: any) {
-    console.error(TAG + " - ERROR: ", ...message)
+    console.error(TAG + " - ERROR:", ...message)
 }
 
 function warn(...message: any) {
-    console.warn(TAG + " - WARN: ", ...message)
+    console.warn(TAG + " - WARN:", ...message)
 }
 
 // Critical errors