diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableHead.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableHead.tsx index bdd653b058..b64e216be8 100644 --- a/webview/src/plots/components/comparisonTable/ComparisonTableHead.tsx +++ b/webview/src/plots/components/comparisonTable/ComparisonTableHead.tsx @@ -58,6 +58,7 @@ export const ComparisonTableHead: React.FC = ({ wrapperTag: 'div' }} hideDragged={false} + draggedImageClassName={styles.draggedColumnCellGhost} /> diff --git a/webview/src/plots/components/comparisonTable/styles.module.scss b/webview/src/plots/components/comparisonTable/styles.module.scss index 0f865eee09..ff508fcf5c 100644 --- a/webview/src/plots/components/comparisonTable/styles.module.scss +++ b/webview/src/plots/components/comparisonTable/styles.module.scss @@ -144,11 +144,16 @@ $gap: 4px; height: 100%; top: 0; left: 0; - background:rgba(0,0,0,0.6); + background: rgba(0, 0, 0, 0.6); opacity: 1; } } +.draggedColumnCellGhost { + background-color: $accent-color; + min-width: 302px; +} + .cell { max-height: 100vh; width: 100%; diff --git a/webview/src/shared/components/dragDrop/DragDropContainer.tsx b/webview/src/shared/components/dragDrop/DragDropContainer.tsx index c16ce4b99e..a7ec722550 100644 --- a/webview/src/shared/components/dragDrop/DragDropContainer.tsx +++ b/webview/src/shared/components/dragDrop/DragDropContainer.tsx @@ -64,6 +64,7 @@ interface DragDropContainerProps { onDrop?: OnDrop dropTarget: DropTargetInfo hideDragged?: boolean + draggedImageClassName?: string wrapperComponent?: { component: React.FC props: { @@ -81,12 +82,14 @@ export const DragDropContainer: React.FC = ({ onDrop, dropTarget, wrapperComponent, - hideDragged = true + hideDragged = true, + draggedImageClassName // eslint-disable-next-line sonarjs/cognitive-complexity }) => { const [draggedOverId, setDraggedOverId] = useState('') const [draggedId, setDraggedId] = useState('') const [direction, setDirection] = useState(DragEnterDirection.LEFT) + const draggedImage = useRef() const { draggedRef, setDraggedRef } = useContext(DragDropContext) const draggedOverIdTimeout = useRef(0) @@ -95,18 +98,37 @@ export const DragDropContainer: React.FC = ({ setDraggedOverId('') setDraggedId('') setDirection(DragEnterDirection.LEFT) + + draggedImage?.current?.remove() + draggedImage.current = undefined } useEffect(() => { - return () => clearTimeout(draggedOverIdTimeout.current) + return () => { + clearTimeout(draggedOverIdTimeout.current) + draggedImage?.current?.remove() + draggedImage.current = undefined + } }, []) useEffect(() => { cleanup() }, [order]) + const setHighlightedDragImageRef = (element: HTMLElement) => { + const oldElementClone = element.cloneNode(true) as HTMLElement + oldElementClone.style.position = 'absolute' + oldElementClone.style.marginLeft = '-999px' + draggedImageClassName && + oldElementClone.classList.add(draggedImageClassName) + + document.body.append(oldElementClone) + draggedImage.current = oldElementClone + } + const handleDragStart = (e: DragEvent) => { const { id } = e.currentTarget + const idx = order.indexOf(id) let toIdx = idx + 1 if (toIdx === order.length) { @@ -116,6 +138,7 @@ export const DragDropContainer: React.FC = ({ toIdx = 0 } } + const itemIndex = idx.toString() e.dataTransfer.setData('itemIndex', itemIndex) e.dataTransfer.setData('itemId', id) @@ -127,6 +150,14 @@ export const DragDropContainer: React.FC = ({ itemId: id, itemIndex }) + + if (draggedImageClassName) { + setHighlightedDragImageRef(e.currentTarget) + + draggedImage.current && + e.dataTransfer?.setDragImage?.(draggedImage.current, 150, 0) + } + draggedOverIdTimeout.current = window.setTimeout(() => { setDraggedId(id)