refactor(stlyes): use react-flow__container helper

src/components/ConnectionLine/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, CSSProperties } from 'react';
+import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
 import { getBezierPath } from '../Edges/BezierEdge';
@@ -6,7 +7,6 @@ import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import {
   ElementId,
   NodeLookupItem,
-  Transform,
   HandleElement,
   Position,
   ConnectionLineType,
@@ -23,13 +23,12 @@ interface ConnectionLineProps {
   connectionPositionX: number;
   connectionPositionY: number;
   connectionLineType: ConnectionLineType;
-  transform: Transform;
   isConnectable: boolean;
   connectionLineStyle?: CSSProperties;
   CustomConnectionLineComponent?: ConnectionLineComponent;
 }
 
-const selector = (s: ReactFlowState) => s.nodeLookup;
+const selector = (s: ReactFlowState) => ({ nodeLookup: s.nodeLookup, transform: s.transform });
 
 export default ({
   connectionNodeId,
@@ -39,11 +38,10 @@ export default ({
   connectionPositionX,
   connectionPositionY,
   connectionLineType = ConnectionLineType.Bezier,
-  transform,
   isConnectable,
   CustomConnectionLineComponent,
 }: ConnectionLineProps) => {
-  const nodeLookup = useStore(selector);
+  const { nodeLookup, transform } = useStore(selector, shallow);
   const [sourceNode, setSourceNode] = useState<NodeLookupItem | null>(null);
   const nodeId = connectionNodeId;
   const handleId = connectionHandleId;

src/components/Nodes/wrapNode.tsx

@@ -23,8 +23,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     scale,
     xPos,
     yPos,
-    width,
-    height,
     isSelected,
     onClick,
     onMouseEnter,
@@ -74,8 +72,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave ? 'all' : 'none',
         // prevents jumping of nodes on start
         // opacity: isInitialized ? 1 : 0,
-        width: isParentNode && width !== null ? width : 'auto',
-        height: isParentNode && height !== null ? height : 'auto',
         ...style,
       }),
       [
@@ -91,8 +87,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         onMouseMove,
         onMouseLeave,
         isParentNode,
-        width,
-        height,
       ]
     );
 

src/components/NodesSelection/index.tsx

@@ -103,7 +103,7 @@ export default ({
   }
 
   return (
-    <div className="react-flow__nodesselection" style={style}>
+    <div className="react-flow__nodesselection react-flow__container" style={style}>
       <ReactDraggable
         scale={tScale}
         grid={grid}

src/components/UserSelection/index.tsx

@@ -36,7 +36,7 @@ const SelectionRect = () => {
 
   return (
     <div
-      className="react-flow__selection"
+      className="react-flow__selection react-flow__container"
       style={{
         width: userSelectionRect.width,
         height: userSelectionRect.height,
@@ -102,7 +102,7 @@ export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
 
   return (
     <div
-      className="react-flow__selectionpane"
+      className="react-flow__selectionpane react-flow__container"
       onMouseDown={onMouseDown}
       onMouseMove={onMouseMove}
       onMouseUp={onMouseUp}