refactor(easy-peasy): return single values from useStoreState

src/container/EdgeRenderer/index.tsx

@@ -187,23 +187,13 @@ function renderEdge(
 }
 
 const EdgeRenderer = memo((props: EdgeRendererProps) => {
-  const {
-    transform,
-    edges,
-    nodes,
-    connectionSourceId,
-    connectionPosition: { x, y },
-    selectedElements,
-    isInteractive,
-  } = useStoreState((s) => ({
-    transform: s.transform,
-    edges: s.edges,
-    nodes: s.nodes,
-    connectionSourceId: s.connectionSourceId,
-    connectionPosition: s.connectionPosition,
-    selectedElements: s.selectedElements,
-    isInteractive: s.isInteractive,
-  }));
+  const [tX, tY, tScale] = useStoreState((s) => s.transform);
+  const edges = useStoreState((s) => s.edges);
+  const nodes = useStoreState((s) => s.nodes);
+  const connectionSourceId = useStoreState((s) => s.connectionSourceId);
+  const connectionPosition = useStoreState((s) => s.connectionPosition);
+  const selectedElements = useStoreState((s) => s.selectedElements);
+  const isInteractive = useStoreState((s) => s.isInteractive);
 
   const { width, height, connectionLineStyle, connectionLineType } = props;
 
@@ -211,8 +201,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
     return null;
   }
 
-  const [tx, ty, tScale] = transform;
-  const transformStyle = `translate(${tx},${ty}) scale(${tScale})`;
+  const transformStyle = `translate(${tX},${tY}) scale(${tScale})`;
 
   return (
     <svg width={width} height={height} className="react-flow__edges">
@@ -222,9 +211,9 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
           <ConnectionLine
             nodes={nodes}
             connectionSourceId={connectionSourceId}
-            connectionPositionX={x}
-            connectionPositionY={y}
-            transform={transform}
+            connectionPositionX={connectionPosition.x}
+            connectionPositionY={connectionPosition.y}
+            transform={[tX, tY, tScale]}
             connectionLineStyle={connectionLineStyle}
             connectionLineType={connectionLineType}
             isInteractive={isInteractive}

src/container/GraphView/index.tsx

@@ -58,14 +58,11 @@ const GraphView = memo(
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
-    const state = useStoreState((s) => ({
-      width: s.width,
-      height: s.height,
-      nodes: s.nodes,
-      edges: s.edges,
-      d3Initialised: s.d3Initialised,
-      nodesSelectionActive: s.nodesSelectionActive,
-    }));
+    const width = useStoreState((s) => s.width);
+    const height = useStoreState((s) => s.height);
+    const d3Initialised = useStoreState((s) => s.d3Initialised);
+    const nodesSelectionActive = useStoreState((s) => s.nodesSelectionActive);
+
     const updateSize = useStoreActions((actions) => actions.updateSize);
     const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
     const setOnConnect = useStoreActions((a) => a.setOnConnect);
@@ -106,7 +103,7 @@ const GraphView = memo(
     useD3Zoom({ zoomPane, onMove, selectionKeyPressed });
 
     useEffect(() => {
-      if (state.d3Initialised && onLoad) {
+      if (d3Initialised && onLoad) {
         onLoad({
           fitView,
           zoomIn,
@@ -114,7 +111,7 @@ const GraphView = memo(
           project,
         });
       }
-    }, [state.d3Initialised, onLoad]);
+    }, [d3Initialised, onLoad]);
 
     useEffect(() => {
       setSnapGrid({ snapToGrid, snapGrid });
@@ -137,15 +134,15 @@ const GraphView = memo(
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}
         />
         <EdgeRenderer
-          width={state.width}
-          height={state.height}
+          width={width}
+          height={height}
           edgeTypes={edgeTypes}
           onElementClick={onElementClick}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
         />
         {selectionKeyPressed && <UserSelection isInteractive={isInteractive} />}
-        {state.nodesSelectionActive && <NodesSelection />}
+        {nodesSelectionActive && <NodesSelection />}
         <div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
       </div>
     );

src/container/NodeRenderer/index.tsx

@@ -49,18 +49,15 @@ function renderNode(
 }
 
 const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => {
-  const { nodes, transform, selectedElements, width, height, isInteractive } = useStoreState((s) => ({
-    nodes: s.nodes,
-    transform: s.transform,
-    selectedElements: s.selectedElements,
-    width: s.width,
-    height: s.height,
-    isInteractive: s.isInteractive,
-  }));
-
-  const [tx, ty, tScale] = transform;
+  const nodes = useStoreState((s) => s.nodes);
+  const transform = useStoreState((s) => s.transform);
+  const selectedElements = useStoreState((s) => s.selectedElements);
+  const width = useStoreState((s) => s.width);
+  const height = useStoreState((s) => s.height);
+  const isInteractive = useStoreState((s) => s.isInteractive);
+  const [tX, tY, tScale] = transform;
   const transformStyle = {
-    transform: `translate(${tx}px,${ty}px) scale(${tScale})`,
+    transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
   };
 
   const renderNodes = onlyRenderVisibleNodes