Comments (2)
I like that idea! We can add it for v12.
from xyflow.
I've put together a custom function in userland to keep me moving for now, though the actual change is small so I'll see about finding some time for it!
import {
Transform,
XYPosition,
useStoreApi,
} from 'reactflow'
function useScreenToFlowPositionWithoutSnapping() {
const store = useStoreApi()
return (position: XYPosition) => {
const { transform, domNode } = store.getState()
if (!domNode) {
return position
}
const { x: domX, y: domY } = domNode.getBoundingClientRect()
const correctedPosition = {
x: position.x - domX,
y: position.y - domY,
}
const pointToRendererPoint = (
{ x, y }: XYPosition,
[tx, ty, tScale]: Transform,
): XYPosition => {
const position: XYPosition = {
x: (x - tx) / tScale,
y: (y - ty) / tScale,
}
return position
}
return pointToRendererPoint(correctedPosition, transform)
}
}
from xyflow.
Related Issues (20)
- Dnd kit problem with component dragging and positioning HOT 3
- d3-hierarchy useAutoLayout HOT 1
- React Flow v12: addNodes/addEdges doesn't work HOT 2
- <Control/> doesn't propogate aria-label HOT 5
- Create Svelte RFC for component prop warnings HOT 1
- @xyflow/system: refactor public stuff HOT 1
- Svelte: Add onInit/useFlowInitialized HOT 2
- v12: Edge Always Connects to First of Multiple Target Handles HOT 3
- @xyflow/react: refactor setNodes/setEdges of useReactFlow HOT 1
- Edge labels: selectable and default background
- Add keyboard support for moving nodes and selecting node/edges
- How to get Reactflow bounding co-ordinates based on zooming or onPaneMove. HOT 1
- disableKeyboardA11y property of <ReactFlow /> is different in Docs HOT 1
- Add getNode/getNodes and getEdge/getEdges to useSvelteFlow HOT 1
- The property 'focusable' of Node type doesn't exist HOT 1
- Edges not rendered when persisting state and onlyRenderVisibleElements HOT 2
- screen offset issue when zooming in/out and multiple node dimensions being updated simultaneously, using (v11 & v12) HOT 2
- v12 - Edge marker/style can be missing in some configuration HOT 2
- Add `deselectOnSelectNodesOnDrag` prop for configuring if dragging (and hence selecting) a node clears other selected elements 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.