From d6ce297b2baa870c7c628733091759b3b5a120a1 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 8024b24a6..115a2b0f3 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 11a453909..51a51acd8 100644
--- a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
@@ -172,9 +172,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,
});
@@ -185,8 +187,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