From df6c3381b1284c4bd1bf3de3922e2e68ff97a8c0 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 2 Mar 2023 14:32:39 +0100 Subject: [PATCH] refactor(utils): remove react dependencies --- .../core/src/components/Handle/handler.ts | 4 ++-- packages/core/src/components/Handle/index.tsx | 10 ++++----- packages/core/src/components/Handle/utils.ts | 2 +- .../src/lib/components/Handle/Handle.svelte | 13 +++-------- packages/system/package.json | 6 ++--- packages/utils/package.json | 11 ++-------- packages/utils/src/utils.ts | 22 ++++--------------- 7 files changed, 19 insertions(+), 49 deletions(-) diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 5e1daeb7..6bc05d47 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -59,7 +59,7 @@ export function handlePointerDown({ let autoPanId = 0; let prevClosestHandle: ConnectionHandle | null; - const { x, y } = getEventPosition(event); + const { x, y } = getEventPosition(event.nativeEvent); const clickedHandle = doc?.elementFromPoint(x, y); const handleType = getHandleType(edgeUpdaterType, clickedHandle); const containerBounds = domNode?.getBoundingClientRect(); @@ -69,7 +69,7 @@ export function handlePointerDown({ } let prevActiveHandle: Element; - let connectionPosition = getEventPosition(event, containerBounds); + let connectionPosition = getEventPosition(event.nativeEvent, containerBounds); let autoPanStarted = false; let connection: Connection | null = null; let isValid = false; diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index 2d0d5d91..89d1290b 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -69,9 +69,9 @@ const Handle = forwardRef( }; const onPointerDown = (event: ReactMouseEvent | ReactTouchEvent) => { - const isMouseTriggered = isMouseEvent(event); + const isMouseTriggered = isMouseEvent(event.nativeEvent); - if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) { + if ((isMouseTriggered && (event as ReactMouseEvent).button === 0) || !isMouseTriggered) { handlePointerDown({ event, handleId, @@ -85,9 +85,9 @@ const Handle = forwardRef( } if (isMouseTriggered) { - onMouseDown?.(event); + onMouseDown?.(event as ReactMouseEvent); } else { - onTouchStart?.(event); + onTouchStart?.(event as ReactTouchEvent); } }; @@ -101,7 +101,7 @@ const Handle = forwardRef( const doc = getHostForElement(event.target as HTMLElement); const { connection, isValid } = isValidHandle( - event, + event.nativeEvent, { nodeId, id: handleId, diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts index 8e03a4ae..a9cd94eb 100644 --- a/packages/core/src/components/Handle/utils.ts +++ b/packages/core/src/components/Handle/utils.ts @@ -73,7 +73,7 @@ const nullConnection: Connection = { source: null, target: null, sourceHandle: n // checks if and returns connection in fom of an object { source: 123, target: 312 } export function isValidHandle( - event: MouseEvent | TouchEvent | ReactMouseEvent | ReactTouchEvent, + event: MouseEvent | TouchEvent, handle: Pick | null, connectionMode: ConnectionMode, fromNodeId: string, diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index 89834704..6dd1327a 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -21,7 +21,6 @@ const handleId = id || null; const dispatch = createEventDispatcher(); - const { connectionMode, domNode, @@ -34,13 +33,13 @@ updateConnection } = useStore(); - function dispatchEvent(eventName: string) { - dispatch(eventName, { nodeId, handleId, type }); + function dispatchEvent(eventName: string, params?: Connection) { + dispatch(eventName, params || { nodeId, handleId, type }); } function onConnectExtended(params: Connection) { addEdge(params); - dispatchEvent('connect') + dispatchEvent('connect', params) } function onPointerDown(event: MouseEvent | TouchEvent) { @@ -66,12 +65,6 @@ onConnectEnd: () => dispatchEvent('connect:end') }); } - - // if (isMouseTriggered) { - // onMouseDown?.(event); - // } else { - // onTouchStart?.(event); - // } } diff --git a/packages/system/package.json b/packages/system/package.json index e15eed34..849027af 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -3,14 +3,12 @@ "version": "11.5.5", "description": "Core system of React Flow.", "keywords": [ - "react", - "svelte", "node-based UI", "graph", "diagram", "workflow", - "react-flow", - "svelte-flow" + "reactflow", + "svelteflow" ], "files": [ "dist" diff --git a/packages/utils/package.json b/packages/utils/package.json index 33b95963..684ef096 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -3,12 +3,12 @@ "version": "11.5.5", "description": "Core utils of React Flow.", "keywords": [ - "react", "node-based UI", "graph", "diagram", "workflow", - "react-flow" + "reactflow", + "svelteflow" ], "files": [ "dist" @@ -43,18 +43,11 @@ "@types/d3-zoom": "^3.0.1", "d3-zoom": "^3.0.0" }, - "peerDependencies": { - "react": ">=17", - "react-dom": ">=17" - }, "devDependencies": { "@reactflow/eslint-config": "workspace:*", "@reactflow/rollup-config": "workspace:*", "@reactflow/tsconfig": "workspace:*", "@types/node": "^18.7.16", - "@types/react": ">=17", - "@types/react-dom": ">=17", - "react": "^18.2.0", "typescript": "^4.9.4" }, "rollup": { diff --git a/packages/utils/src/utils.ts b/packages/utils/src/utils.ts index e27a30ea..a5ca09c3 100644 --- a/packages/utils/src/utils.ts +++ b/packages/utils/src/utils.ts @@ -1,8 +1,3 @@ -import type { - KeyboardEvent as ReactKeyboardEvent, - MouseEvent as ReactMouseEvent, - TouchEvent as ReactTouchEvent, -} from 'react'; import type { Dimensions, XYPosition, CoordinateExtent, Box, Rect, BaseNode, BaseEdge } from '@reactflow/system'; import { getConnectedEdgesBase } from './graph'; @@ -93,13 +88,9 @@ export const devWarn = (id: string, message: string) => { } }; -const isReactKeyboardEvent = (event: KeyboardEvent | ReactKeyboardEvent): event is ReactKeyboardEvent => - 'nativeEvent' in event; - -export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boolean { - const kbEvent = isReactKeyboardEvent(event) ? event.nativeEvent : event; +export function isInputDOMNode(event: KeyboardEvent): boolean { // using composed path for handling shadow dom - const target = (kbEvent.composedPath?.()?.[0] || event.target) as HTMLElement; + const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement; const isInput = ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable'); // we want to be able to do a multi selection event if we are in an input field @@ -109,14 +100,9 @@ export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boole return (isInput && !isModifierKey) || !!target?.closest('.nokey'); } -export const isMouseEvent = ( - event: MouseEvent | ReactMouseEvent | TouchEvent | ReactTouchEvent -): event is MouseEvent | ReactMouseEvent => 'clientX' in event; +export const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => 'clientX' in event; -export const getEventPosition = ( - event: MouseEvent | ReactMouseEvent | TouchEvent | ReactTouchEvent, - bounds?: DOMRect -) => { +export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRect) => { const isMouseTriggered = isMouseEvent(event); const evtX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX; const evtY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY;