fix(core): subtract container bounds when getting pointer position (#1829)
* fix(core): subtract container bounds when getting pointer position Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(changeset): add Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore: cleanup Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --------- Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@vue-flow/core": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Subtract container bounds when calculating pointer position.
|
||||||
@@ -9,17 +9,18 @@ import type { UseDragEvent } from './useDrag'
|
|||||||
* @internal
|
* @internal
|
||||||
*/
|
*/
|
||||||
export function useGetPointerPosition() {
|
export function useGetPointerPosition() {
|
||||||
const { viewport, snapGrid, snapToGrid } = useVueFlow()
|
const { viewport, snapGrid, snapToGrid, vueFlowRef } = useVueFlow()
|
||||||
|
|
||||||
// returns the pointer position projected to the VF coordinate system
|
// returns the pointer position projected to the VF coordinate system
|
||||||
return (event: UseDragEvent | MouseTouchEvent) => {
|
return (event: UseDragEvent | MouseTouchEvent) => {
|
||||||
|
const containerBounds = vueFlowRef.value?.getBoundingClientRect() ?? { left: 0, top: 0 }
|
||||||
const evt = isUseDragEvent(event) ? event.sourceEvent : event
|
const evt = isUseDragEvent(event) ? event.sourceEvent : event
|
||||||
|
|
||||||
const { x, y } = getEventPosition(evt)
|
const { x, y } = getEventPosition(evt, containerBounds as DOMRect)
|
||||||
const pointerPos = pointToRendererPoint({ x, y }, viewport.value)
|
const pointerPos = pointToRendererPoint({ x, y }, viewport.value)
|
||||||
const { x: xSnapped, y: ySnapped } = snapToGrid.value ? snapPosition(pointerPos, snapGrid.value) : pointerPos
|
const { x: xSnapped, y: ySnapped } = snapToGrid.value ? snapPosition(pointerPos, snapGrid.value) : pointerPos
|
||||||
|
|
||||||
// we need the snapped position in order to be able to skip unnecessary drag events
|
// we need the snapped position to be able to skip unnecessary drag events
|
||||||
return {
|
return {
|
||||||
xSnapped,
|
xSnapped,
|
||||||
ySnapped,
|
ySnapped,
|
||||||
|
|||||||
Reference in New Issue
Block a user