refactor(styling): dont inject styles

packages/core/src/container/FlowRenderer/Pane.tsx

@@ -0,0 +1,34 @@
+import { MouseEvent } from 'react';
+import cc from 'classcat';
+
+import { useStore } from '../../hooks/useStore';
+import { containerStyle } from '../../styles';
+import type { ReactFlowState } from '../../types';
+import type { FlowRendererProps } from '.';
+
+type PaneProps = Pick<FlowRendererProps, 'onClick' | 'onContextMenu' | 'onWheel'> & {
+  onMouseEnter?: (event: MouseEvent) => void;
+  onMouseMove?: (event: MouseEvent) => void;
+  onMouseLeave?: (event: MouseEvent) => void;
+};
+
+const selector = (s: ReactFlowState) => s.paneDragging;
+
+function Pane({ onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onWheel }: PaneProps) {
+  const dragging = useStore(selector);
+
+  return (
+    <div
+      className={cc(['react-flow__pane', { dragging }])}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseMove={onMouseMove}
+      onMouseLeave={onMouseLeave}
+      onContextMenu={onContextMenu}
+      onWheel={onWheel}
+      style={containerStyle}
+    />
+  );
+}
+
+export default Pane;

packages/core/src/container/FlowRenderer/index.tsx

@@ -7,9 +7,9 @@ import { GraphViewProps } from '../GraphView';
 import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
+import Pane from './Pane';
 
 import { ReactFlowState } from '../../types';
-import { containerStyle } from '../../styles';
 
 export type FlowRendererProps = Omit<
   GraphViewProps,
@@ -110,15 +110,13 @@ const FlowRenderer = ({
           disableKeyboardA11y={disableKeyboardA11y}
         />
       )}
-      <div
-        className="react-flow__pane"
+      <Pane
         onClick={onClick}
         onMouseEnter={onPaneMouseEnter}
         onMouseMove={onPaneMouseMove}
         onMouseLeave={onPaneMouseLeave}
         onContextMenu={onContextMenu}
         onWheel={onWheel}
-        style={containerStyle}
       />
     </ZoomPane>
   );

packages/core/src/container/ReactFlow/index.tsx

@@ -1,6 +1,5 @@
 import { CSSProperties, forwardRef, useId } from 'react';
 import cc from 'classcat';
-import { injectStyle } from '@react-flow/css-utils';
 
 import Attribution from '../../components/Attribution';
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
@@ -9,9 +8,6 @@ import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
-import baseStyle from '../../styles/base';
-
-injectStyle(baseStyle);
 
 import {
   ConnectionLineType,

packages/core/src/container/ZoomPane/index.tsx

@@ -169,7 +169,9 @@ const ZoomPane = ({
     if (d3Zoom) {
       d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         isZoomingOrPanning.current = true;
-
+        if (event.sourceEvent?.type === 'mousedown') {
+          store.setState({ paneDragging: true });
+        }
         if (onMoveStart) {
           const flowTransform = eventToFlowTransform(event.transform);
           prevTransform.current = flowTransform;
@@ -184,6 +186,7 @@ const ZoomPane = ({
     if (d3Zoom) {
       d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         isZoomingOrPanning.current = false;
+        store.setState({ paneDragging: false });
 
         if (onMoveEnd && viewChanged(prevTransform.current, event.transform)) {
           const flowTransform = eventToFlowTransform(event.transform);