Comments (2)
Moments later, I found a solution! Using the dragging callbacks, I pass the currently drag-engaged node into a ref. In the tick() function, I directly copy the position properties from this ref for the node with matching ID.
const draggingNodeRef = useRef<Node | undefined>(undefined);
const {dispatchWithoutListen} = useGlobalDispatch(draggingNodeKey);
useEffect(() => {
dispatchWithoutListen(draggingNodeRef)
}, [draggingNodeRef, dispatchWithoutListen])
const handleDragStart = useCallback(
(event: ReactMouseEvent, node: Node, nodes: Node[]) => {
draggingNodeRef.current = {...node}
}, [draggingNodeRef])
const handleDragStop = useCallback(
(event: ReactMouseEvent, node: Node, nodes: Node[]) => {
console.log(node, nodes)
draggingNodeRef.current = undefined
}, [draggingNodeRef])
const handleDrag = useCallback(
(event: ReactMouseEvent, node: Node, nodes: Node[]) => {
console.log(node, nodes)
draggingNodeRef.current = {...node}
}, [draggingNodeRef])
useEffect(() => {
setNodes(initialNodes as FlowNode[])
setEdges(initialEdges as FlowEdge[])
}, [initialNodes, initialEdges, setEdges, setNodes])
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
fitView
onNodeDragStart={handleDragStart}
onNodeDrag={handleDrag}
onNodeDragStop={handleDragStop}
>{children}
simulation = simRef.current
const scopedNodes = nodeListRef.current;
let foundDrag = false
for (let i = 0; i < scopedNodes.length; i++){
const node = scopedNodes[i];
const dragging = draggingNode?.current?.id === node?.id
// Setting the fx/fy properties of a node tells the simulation to "fix"
// the node at that position and ignore any forces that would normally
// cause it to move.
if (dragging) {
foundDrag = true
nodeIndex = i
// Copy the current position from the ref
node.fx = draggingNode?.current.position.x;
node.fy = draggingNode?.current.position.y;
} else if (node) {
delete node.fx
delete node.fy
}
}
from xyflow.
Glad you solved your issue! Thanks for posting a solution for future travelers.
from xyflow.
Related Issues (20)
- Edge marker is not dynamically updated HOT 9
- accept array of classes in noPanClassName HOT 5
- snap guidelines HOT 2
- Extra Objects needed HOT 2
- Node position not matching the nodes list and rendered node HOT 5
- defining a fixed markerEnd (or Start) in custom Edge doesn't work? HOT 2
- I face a bug to align center expand and collapse flow HOT 1
- Export type definitions for individual methods and variables of `useSvelteFlow` functionality HOT 4
- add edge mouseenter event HOT 1
- dynamic handle HOT 6
- lavaProps useControl HOT 5
- There is an error in client site
- Removing extent attribute onNodeDragStart doesn't allows for free roam until after onNodeDragStop HOT 7
- Multiple dragging doesn't trigger onNodeDragStop event. HOT 2
- Class for connecting from node HOT 1
- How automatically enabled the lock viewport of controls in ReactFlow HOT 1
- SvelteFlow: Copy/Paste (If not supported out-of-the-box, the easiest way to achieve it) HOT 6
- Source and Target handle getting null HOT 5
- Working Reactflow, when i add a Panel it errors HOT 1
- Drag problem after changing parentNode HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xyflow.