diff --git a/libs/shared/lib/components/pills/Pill.tsx b/libs/shared/lib/components/pills/Pill.tsx index 05bf3475e265a99a616757b37bf00d0c3c724e60..aea0755762a58d04c981e421f225847ba3d17453 100644 --- a/libs/shared/lib/components/pills/Pill.tsx +++ b/libs/shared/lib/components/pills/Pill.tsx @@ -56,8 +56,26 @@ export const Pill = React.memo((props: PillI) => { clipPath: corner === 'diamond' ? 'polygon(0% 50%, 5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%)' : '', }; + const onDragStart = (event: React.DragEvent<HTMLDivElement>) => { + const pill = event.target as HTMLDivElement; + const dragImage = pill.cloneNode(true) as HTMLDivElement; + dragImage.style.transform = 'translate(0, 0)'; // Removes the background from drag image in Chrome + document.body.appendChild(dragImage); + + 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(); + }, 1); + } + return ( - <div className={(props.className ? props.className + ' ' : '') + 'flex flex-row flex-grow-0 text-xs text-justify'}> + <div draggable="true" onDragStart={onDragStart} className={(props.className ? props.className + ' ' : '') + 'flex flex-row flex-grow-0 text-xs text-justify'}> <div className={'bg-secondary-200 ' + (corner !== 'square' ? 'rounded' : '')} style={{ diff --git a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx index 5793a554bad4b88c19da9e0959d9e0a8ab8e1492..858066c2483588c2419e7d54573899cccf488d8c 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, - y: position.y, + x: position.x - mouse_x, + y: position.y - mouse_y, name: dragData.name, schemaKey: dragData.name, },