forked from pavol-brunclik-m2ms/fragalysis-frontend
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
133 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { useDrag, useDrop } from 'react-dnd'; | ||
|
|
||
| const DND_TYPE = 'DATASET_MOLECULE_VIEW'; | ||
|
|
||
| // Taken and adjusted from https://react-dnd.github.io/react-dnd/examples/sortable/simple | ||
| export const useDragDropMoleculeView = (ref, id, index, moveMolecule) => { | ||
| const [{ handlerId }, drop] = useDrop({ | ||
| accept: DND_TYPE, | ||
| collect(monitor) { | ||
| return { | ||
| handlerId: monitor.getHandlerId() | ||
| }; | ||
| }, | ||
| hover(item, monitor) { | ||
| if (!ref.current) { | ||
| return; | ||
| } | ||
| const dragIndex = item.index; | ||
| const hoverIndex = index; | ||
| // Don't replace items with themselves | ||
| if (dragIndex === hoverIndex) { | ||
| return; | ||
| } | ||
| // Determine rectangle on screen | ||
| const hoverBoundingRect = ref.current?.getBoundingClientRect(); | ||
| // Get vertical middle | ||
| const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; | ||
| // Determine mouse position | ||
| const clientOffset = monitor.getClientOffset(); | ||
| // Get pixels to the top | ||
| const hoverClientY = clientOffset.y - hoverBoundingRect.top; | ||
| // Only perform the move when the mouse has crossed half of the items height | ||
| // When dragging downwards, only move when the cursor is below 50% | ||
| // When dragging upwards, only move when the cursor is above 50% | ||
| // Dragging downwards | ||
| if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { | ||
| return; | ||
| } | ||
| // Dragging upwards | ||
| if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { | ||
| return; | ||
| } | ||
| // Time to actually perform the action | ||
| moveMolecule(dragIndex, hoverIndex); | ||
| // Note: we're mutating the monitor item here! | ||
| // Generally it's better to avoid mutations, | ||
| // but it's good here for the sake of performance | ||
| // to avoid expensive index searches. | ||
| item.index = hoverIndex; | ||
| } | ||
| }); | ||
|
|
||
| const [{ isDragging }, drag] = useDrag({ | ||
| type: DND_TYPE, | ||
| item: () => { | ||
| return { id, index }; | ||
| }, | ||
| collect: monitor => ({ | ||
| isDragging: monitor.isDragging() | ||
| }) | ||
| }); | ||
| drag(drop(ref)); | ||
|
|
||
| return { handlerId, isDragging }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters