diff --git a/src/components/Handle/handler.ts b/src/components/Handle/handler.ts index b900369f..96196f02 100644 --- a/src/components/Handle/handler.ts +++ b/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, - document: Document | ShadowRoot + isValidConnection: ValidConnectionFunc ) { 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, - document: Document | ShadowRoot | undefined = getInitialDocument() + onConnectEnd?: OnConnectEndFunc ): 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, - document + isValidConnection ); 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, - document + isValidConnection ); 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('mouseup', onMouseUp as EventListenerOrEventListenerObject); - }; + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + } - document.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject); - document.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject); + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); } diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx index c0302bab..0b6da001 100644 --- a/src/components/Handle/index.tsx +++ b/src/components/Handle/index.tsx @@ -28,7 +28,6 @@ const Handle: FC, '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, 'id'>> = ({ connectionMode, onConnectStart, onConnectStop, - onConnectEnd, - document + onConnectEnd ); }, [ @@ -70,7 +68,6 @@ const Handle: FC, 'id'>> = ({ onConnectStart, onConnectStop, onConnectEnd, - document ] ); diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index d378a885..7408d54d 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -91,7 +91,6 @@ const GraphView = ({ onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, - document, }: GraphViewProps) => { const isInitialized = useRef(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); diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 92aca0fa..809fef98 100644 --- a/src/container/ReactFlow/index.tsx +++ b/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, '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} /> {onSelectionChange && } diff --git a/src/store/actions.ts b/src/store/actions.ts index d68f9a74..0f6bbc47 100644 --- a/src/store/actions.ts +++ b/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 >; diff --git a/src/store/contants.ts b/src/store/contants.ts index 168139bb..389432df 100644 --- a/src/store/contants.ts +++ b/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'; diff --git a/src/store/index.ts b/src/store/index.ts index 4f317ce1..6640d9e0 100644 --- a/src/store/index.ts +++ b/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], diff --git a/src/store/reducer.ts b/src/store/reducer.ts index 245a64d6..57d4ea97 100644 --- a/src/store/reducer.ts +++ b/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; diff --git a/src/types/index.ts b/src/types/index.ts index 0deb7992..cbf38518 100644 --- a/src/types/index.ts +++ b/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; diff --git a/src/utils/document.ts b/src/utils/document.ts deleted file mode 100644 index a7f4c8b1..00000000 --- a/src/utils/document.ts +++ /dev/null @@ -1 +0,0 @@ -export const getInitialDocument = () => typeof window === 'undefined' ? undefined : window.document