feat(components): Support passing shadow root as document

src/components/Handle/handler.ts

@@ -31,7 +31,8 @@ function checkElementBelowIsValid(
   isTarget: boolean,
   nodeId: ElementId,
   handleId: ElementId | null,
-  isValidConnection: ValidConnectionFunc
+  isValidConnection: ValidConnectionFunc,
+  document: Document | ShadowRoot
 ) {
   const elementBelow = document.elementFromPoint(event.clientX, event.clientY);
   const elementBelowIsTarget = elementBelow?.classList.contains('target') || false;
@@ -95,7 +96,8 @@ export function onMouseDown(
   connectionMode: ConnectionMode,
   onConnectStart?: OnConnectStartFunc,
   onConnectStop?: OnConnectStopFunc,
-  onConnectEnd?: OnConnectEndFunc
+  onConnectEnd?: OnConnectEndFunc,
+  document: Document | ShadowRoot = window.document
 ): void {
   const reactFlowNode = (event.target as Element).closest('.react-flow');
   const elementBelow = document.elementFromPoint(event.clientX, event.clientY);
@@ -131,7 +133,8 @@ export function onMouseDown(
       isTarget,
       nodeId,
       handleId,
-      isValidConnection
+      isValidConnection,
+      document
     );
 
     if (!isHoveringHandle) {
@@ -154,7 +157,8 @@ export function onMouseDown(
       isTarget,
       nodeId,
       handleId,
-      isValidConnection
+      isValidConnection,
+      document
     );
 
     onConnectStop?.(event);
@@ -168,10 +172,10 @@ export function onMouseDown(
     resetRecentHandle(recentHoveredHandle);
     setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
 
-    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
-    document.removeEventListener('mouseup', onMouseUp);
+    document.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
   }
 
-  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
-  document.addEventListener('mouseup', onMouseUp);
+  document.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
 }

src/components/Handle/index.tsx

@@ -28,6 +28,7 @@ const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
   const onConnectStop = useStoreState((state) => state.onConnectStop);
   const onConnectEnd = useStoreState((state) => state.onConnectEnd);
   const connectionMode = useStoreState((state) => state.connectionMode);
+  const document = useStoreState(state => state.document);
   const handleId = id || null;
   const isTarget = type === 'target';
 
@@ -53,7 +54,8 @@ const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
         connectionMode,
         onConnectStart,
         onConnectStop,
-        onConnectEnd
+        onConnectEnd,
+        document
       );
     },
     [
@@ -68,6 +70,7 @@ const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
       onConnectStart,
       onConnectStop,
       onConnectEnd,
+      document
     ]
   );
 

src/container/GraphView/index.tsx

@@ -91,6 +91,7 @@ const GraphView = ({
   onEdgeMouseMove,
   onEdgeMouseLeave,
   edgeUpdaterRadius,
+  document,
 }: GraphViewProps) => {
   const isInitialized = useRef<boolean>(false);
   const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
@@ -107,6 +108,7 @@ const GraphView = ({
   const setTranslateExtent = useStoreActions((actions) => actions.setTranslateExtent);
   const setNodeExtent = useStoreActions((actions) => actions.setNodeExtent);
   const setConnectionMode = useStoreActions((actions) => actions.setConnectionMode);
+  const setDocument = useStoreActions(actions => actions.setDocument);
   const currentStore = useStore();
   const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
 
@@ -129,6 +131,10 @@ const GraphView = ({
     }
   }, [onLoad, zoomIn, zoomOut, zoomTo, transform, fitView, initialized]);
 
+  useEffect(() => {
+    setDocument(document);
+  }, [document])
+
   useEffect(() => {
     if (onConnect) {
       setOnConnect(onConnect);

src/container/ReactFlow/index.tsx

@@ -115,6 +115,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
   onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
   edgeUpdaterRadius?: number;
+  document?: Document | ShadowRoot;
   nodeTypesId?: string;
   edgeTypesId?: string;
 }
@@ -189,6 +190,7 @@ const ReactFlow = ({
   edgeUpdaterRadius = 10,
   nodeTypesId = '1',
   edgeTypesId = '1',
+  document = window.document,
   ...rest
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypesId]);
@@ -262,6 +264,7 @@ const ReactFlow = ({
           onEdgeMouseMove={onEdgeMouseMove}
           onEdgeMouseLeave={onEdgeMouseLeave}
           edgeUpdaterRadius={edgeUpdaterRadius}
+          document={document}
         />
         <ElementUpdater elements={elements} />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}

src/store/actions.ts

@@ -42,6 +42,11 @@ export const setOnConnectEnd = (onConnectEnd: OnConnectEndFunc) =>
     onConnectEnd,
   });
 
+export const setDocument = (document: Document | ShadowRoot) =>
+  createAction(constants.SET_DOCUMENT, {
+    document
+  })
+
 export const setElements = (elements: Elements) => createAction(constants.SET_ELEMENTS, elements);
 
 export const updateNodeDimensions = (updates: NodeDimensionUpdate[]) =>
@@ -160,4 +165,5 @@ export type ReactFlowAction = ReturnType<
   | typeof setMultiSelectionActive
   | typeof setConnectionMode
   | typeof setNodeExtent
+  | typeof setDocument
 >;

src/store/contants.ts

@@ -31,3 +31,4 @@ export const SET_ELEMENTS_SELECTABLE = 'SET_ELEMENTS_SELECTABLE';
 export const SET_MULTI_SELECTION_ACTIVE = 'SET_MULTI_SELECTION_ACTIVE';
 export const SET_CONNECTION_MODE = 'SET_CONNECTION_MODE';
 export const SET_NODE_EXTENT = 'SET_NODE_EXTENT';
+export const SET_DOCUMENT = 'SET_DOCUMENT';

src/store/index.ts

@@ -3,6 +3,7 @@ import configureStore from './configure-store';
 import { ReactFlowState, ConnectionMode } from '../types';
 
 export const initialState: ReactFlowState = {
+  document: window.document,
   width: 0,
   height: 0,
   transform: [0, 0, 1],

src/store/reducer.ts

@@ -334,6 +334,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
     case constants.SET_ELEMENTS_SELECTABLE:
     case constants.SET_MULTI_SELECTION_ACTIVE:
     case constants.SET_CONNECTION_MODE:
+    case constants.SET_DOCUMENT:
       return { ...state, ...action.payload };
     default:
       return state;

src/types/index.ts

@@ -430,6 +430,8 @@ export interface ReactFlowState {
   onConnectStart?: OnConnectStartFunc;
   onConnectStop?: OnConnectStopFunc;
   onConnectEnd?: OnConnectEndFunc;
+
+  document: Document | ShadowRoot;
 }
 
 export type UpdateNodeInternals = (nodeId: ElementId) => void;