From 700ee58627e32db1f391d8cb5b5f59118c1141c7 Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.collaris@me.com>
Date: Wed, 5 Jun 2024 23:24:28 +0200
Subject: [PATCH] fix: use the correct mouse offset for pill drag and drop
---
libs/shared/lib/components/pills/Pill.tsx | 7 ++++++-
libs/shared/lib/querybuilder/panel/QueryBuilder.tsx | 8 +++++---
2 files changed, 11 insertions(+), 4 deletions(-)
diff --git a/libs/shared/lib/components/pills/Pill.tsx b/libs/shared/lib/components/pills/Pill.tsx
index aa653ca40..aea075576 100644
--- a/libs/shared/lib/components/pills/Pill.tsx
+++ b/libs/shared/lib/components/pills/Pill.tsx
@@ -62,7 +62,12 @@ export const Pill = React.memo((props: PillI) => {
dragImage.style.transform = 'translate(0, 0)'; // Removes the background from drag image in Chrome
document.body.appendChild(dragImage);
- event.dataTransfer.setDragImage(dragImage, pillWidth / 2, pillHeight / 2);
+ const mouse_x = event.clientX - pill.getBoundingClientRect().left;
+ const mouse_y = event.clientY - pill.getBoundingClientRect().top;
+
+ event.dataTransfer.setDragImage(dragImage, mouse_x, mouse_y);
+ event.dataTransfer.setData('mouse_x', String(mouse_x))
+ event.dataTransfer.setData('mouse_y', String(mouse_y))
setTimeout(() => {
dragImage.remove();
diff --git a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
index 9299eac7f..858066c24 100644
--- a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
@@ -174,9 +174,11 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
const data: string = event.dataTransfer.getData('application/reactflow');
if (data.length == 0 || !reactFlow) return;
+ const mouse_x = parseFloat(event.dataTransfer.getData('mouse_x'));
+ const mouse_y = parseFloat(event.dataTransfer.getData('mouse_y'));
+
const dragData = JSON.parse(data);
const position = reactFlow.screenToFlowPosition({
- //TODO: this position should be centre of entity, rather than topleft
x: event.clientX,
y: event.clientY,
});
@@ -187,8 +189,8 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
graphologyGraph.addPill2Graphology(
{
type: QueryElementTypes.Entity,
- x: position.x - (150 / 2),
- y: position.y - (24 / 2),
+ x: position.x - mouse_x,
+ y: position.y - mouse_y,
name: dragData.name,
schemaKey: dragData.name,
},
--
GitLab