zoom handle
This commit is contained in:
11
src/App.tsx
11
src/App.tsx
@@ -259,6 +259,15 @@ export default function App() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Disable canvas zoom when the cursor is over a node (scroll/pinch only zooms when over the pane)
|
||||
const onWheelCapture = React.useCallback((ev: React.WheelEvent) => {
|
||||
const target = ev.target as HTMLElement
|
||||
if (target.closest('.react-flow__node')) {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
}
|
||||
}, [])
|
||||
|
||||
const onCanvasContextMenu = React.useCallback((ev: React.MouseEvent) => {
|
||||
ev.preventDefault()
|
||||
const clientX = ev.clientX
|
||||
@@ -381,7 +390,7 @@ export default function App() {
|
||||
<FlowContext.Provider value={flowContextValue}>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<div className="flex-1 min-h-0 w-full">
|
||||
<div className="flex-1 min-h-0 w-full" onWheelCapture={onWheelCapture}>
|
||||
<ReactFlowProvider initialNodes={nodes} initialEdges={edges} fitView>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
|
||||
Reference in New Issue
Block a user