diff --git a/libs/shared/lib/components/pills/Pill.tsx b/libs/shared/lib/components/pills/Pill.tsx index 05b35b689834b3908b1e44b03d82ed08f73c2d22..8024b24a6500192bdcb20c5494f2472227283438 100644 --- a/libs/shared/lib/components/pills/Pill.tsx +++ b/libs/shared/lib/components/pills/Pill.tsx @@ -56,8 +56,21 @@ 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); + + event.dataTransfer.setDragImage(dragImage, pillWidth / 2, pillHeight / 2); + + 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 5c3b9a459401e449d5e554015481ab31c2796669..11a453909f1b2e6c509da3231baf04bd3e20e5f3 100644 --- a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx +++ b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx @@ -185,8 +185,8 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => { graphologyGraph.addPill2Graphology( { type: QueryElementTypes.Entity, - x: position.x, - y: position.y, + x: position.x - (150 / 2), + y: position.y - (24 / 2), name: dragData.name, schemaKey: dragData.name, },