Revert "Merge pull request #1003 from TheUnderScorer/main"

This reverts commit 106f1f0b61, reversing
changes made to 9206e65522.

src/components/Handle/handler.ts

@@ -11,7 +11,6 @@ import {
   SetConnectionId,
   Connection,
 } from '../../types';
-import { getInitialDocument } from '../../utils/document';
 
 type ValidConnectionFunc = (connection: Connection) => boolean;
 export type SetSourceIdFunc = (params: SetConnectionId) => void;
@@ -32,8 +31,7 @@ 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;
@@ -97,13 +95,8 @@ export function onMouseDown(
   connectionMode: ConnectionMode,
   onConnectStart?: OnConnectStartFunc,
   onConnectStop?: OnConnectStopFunc,
-  onConnectEnd?: OnConnectEndFunc,
+  onConnectEnd?: OnConnectEndFunc
-  document: Document | ShadowRoot | undefined = getInitialDocument()
 ): void {
-  if(!document) {
-    return;
-  }
-
   const reactFlowNode = (event.target as Element).closest('.react-flow');
   const elementBelow = document.elementFromPoint(event.clientX, event.clientY);
   const elementBelowIsTarget = elementBelow?.classList.contains('target');
@@ -126,7 +119,7 @@ export function onMouseDown(
   setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleId: handleId, connectionHandleType: handleType });
   onConnectStart?.(event, { nodeId, handleId, handleType });
 
-  const onMouseMove = (event: MouseEvent) => {
+  function onMouseMove(event: MouseEvent) {
     setPosition({
       x: event.clientX - containerBounds.left,
       y: event.clientY - containerBounds.top,
@@ -138,8 +131,7 @@ export function onMouseDown(
       isTarget,
       nodeId,
       handleId,
-      isValidConnection,
+      isValidConnection
-      document
     );
 
     if (!isHoveringHandle) {
@@ -153,17 +145,16 @@ export function onMouseDown(
       elementBelow.classList.add('react-flow__handle-connecting');
       elementBelow.classList.toggle('react-flow__handle-valid', isValid);
     }
-  };
+  }
 
-  const onMouseUp = (event: MouseEvent) => {
+  function onMouseUp(event: MouseEvent) {
     const { connection, isValid } = checkElementBelowIsValid(
       event,
       connectionMode,
       isTarget,
       nodeId,
       handleId,
-      isValidConnection,
+      isValidConnection
-      document
     );
 
     onConnectStop?.(event);
@@ -177,10 +168,10 @@ export function onMouseDown(
     resetRecentHandle(recentHoveredHandle);
     setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
 
-    document.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
+    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
+    document.removeEventListener('mouseup', onMouseUp);
-  };
+  }
 
-  document.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
+  document.addEventListener('mousemove', onMouseMove);
-  document.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
+  document.addEventListener('mouseup', onMouseUp);
 }

src/components/Handle/index.tsx

@@ -28,7 +28,6 @@ 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';
 
@@ -54,8 +53,7 @@ const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
         connectionMode,
         onConnectStart,
         onConnectStop,
-        onConnectEnd,
+        onConnectEnd
-        document
       );
     },
     [
@@ -70,7 +68,6 @@ const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
       onConnectStart,
       onConnectStop,
       onConnectEnd,
-      document
     ]
   );
 

src/container/GraphView/index.tsx

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

src/container/ReactFlow/index.tsx

@@ -35,7 +35,6 @@ import {
 
 import '../../style.css';
 import '../../theme-default.css';
-import { getInitialDocument } from '../../utils/document';
 
 const defaultNodeTypes = {
   input: InputNode,
@@ -116,7 +115,6 @@ 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;
 }
@@ -191,7 +189,6 @@ const ReactFlow = ({
   edgeUpdaterRadius = 10,
   nodeTypesId = '1',
   edgeTypesId = '1',
-  document = getInitialDocument(),
   ...rest
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypesId]);
@@ -265,7 +262,6 @@ const ReactFlow = ({
           onEdgeMouseMove={onEdgeMouseMove}
           onEdgeMouseLeave={onEdgeMouseLeave}
           edgeUpdaterRadius={edgeUpdaterRadius}
-          document={document}
         />
         <ElementUpdater elements={elements} />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}

src/store/actions.ts

@@ -42,11 +42,6 @@ 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[]) =>
@@ -165,5 +160,4 @@ export type ReactFlowAction = ReturnType<
   | typeof setMultiSelectionActive
   | typeof setConnectionMode
   | typeof setNodeExtent
-  | typeof setDocument
 >;

src/store/contants.ts

@@ -31,4 +31,3 @@ 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

@@ -1,10 +1,8 @@
 import configureStore from './configure-store';
 
 import { ReactFlowState, ConnectionMode } from '../types';
-import { getInitialDocument } from '../utils/document';
 
 export const initialState: ReactFlowState = {
-  document: getInitialDocument(),
   width: 0,
   height: 0,
   transform: [0, 0, 1],

src/store/reducer.ts

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

src/utils/document.ts

@@ -1 +0,0 @@
-export const getInitialDocument = () => typeof window === 'undefined' ? undefined : window.document