Add custom drag context wrapper to inject the overlay rect on drag end
This commit is contained in:
parent
5727bade36
commit
b75db97c26
@ -1,10 +1,9 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { Box, Flex } from "theme-ui";
|
||||
import SimpleBar from "simplebar-react";
|
||||
import {
|
||||
DragOverlay,
|
||||
DndContext,
|
||||
MouseSensor,
|
||||
TouchSensor,
|
||||
KeyboardSensor,
|
||||
@ -24,6 +23,7 @@ import usePreventSelect from "../../hooks/usePreventSelect";
|
||||
import { useTokenData } from "../../contexts/TokenDataContext";
|
||||
import { useAuth } from "../../contexts/AuthContext";
|
||||
import { useMapStage } from "../../contexts/MapStageContext";
|
||||
import DragContext from "../../contexts/DragContext";
|
||||
|
||||
import {
|
||||
createTokenState,
|
||||
@ -40,10 +40,6 @@ function TokenBar({ onMapTokensStateCreate }) {
|
||||
const [dragId, setDragId] = useState();
|
||||
|
||||
const mapStageRef = useMapStage();
|
||||
// Use a ref to the drag overlay to get it's position on dragEnd
|
||||
// TODO: use active.rect when dnd-kit bug is fixed
|
||||
// https://github.com/clauderic/dnd-kit/issues/238
|
||||
const dragOverlayRef = useRef();
|
||||
|
||||
const mouseSensor = useSensor(MouseSensor, {
|
||||
activationConstraint: { distance: 5 },
|
||||
@ -61,13 +57,12 @@ function TokenBar({ onMapTokensStateCreate }) {
|
||||
preventSelect();
|
||||
}
|
||||
|
||||
function handleDragEnd({ active }) {
|
||||
function handleDragEnd({ active, overlayNodeClientRect }) {
|
||||
setDragId(null);
|
||||
|
||||
const mapStage = mapStageRef.current;
|
||||
const dragOverlay = dragOverlayRef.current;
|
||||
if (mapStage && dragOverlay) {
|
||||
const dragRect = dragOverlay.getBoundingClientRect();
|
||||
if (mapStage) {
|
||||
const dragRect = overlayNodeClientRect;
|
||||
const dragPosition = {
|
||||
x: dragRect.left + dragRect.width / 2,
|
||||
y: dragRect.top + dragRect.height / 2,
|
||||
@ -146,7 +141,7 @@ function TokenBar({ onMapTokensStateCreate }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
<DragContext
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDragCancel={handleDragCancel}
|
||||
@ -185,24 +180,13 @@ function TokenBar({ onMapTokensStateCreate }) {
|
||||
<SelectTokensButton onMapTokensStateCreate={onMapTokensStateCreate} />
|
||||
</Flex>
|
||||
{createPortal(
|
||||
<DragOverlay
|
||||
// Ensure a drop animation plays to allow us to get the position of the drag overlay in drag end
|
||||
dropAnimation={{
|
||||
dragSourceOpacity: 0,
|
||||
duration: 1,
|
||||
easing: "ease",
|
||||
}}
|
||||
>
|
||||
{dragId && (
|
||||
<div ref={dragOverlayRef}>
|
||||
{renderToken(findGroup(tokenGroups, dragId), false)}
|
||||
</div>
|
||||
)}
|
||||
<DragOverlay dropAnimation={null}>
|
||||
{dragId && renderToken(findGroup(tokenGroups, dragId), false)}
|
||||
</DragOverlay>,
|
||||
document.body
|
||||
)}
|
||||
</Box>
|
||||
</DndContext>
|
||||
</DragContext>
|
||||
);
|
||||
}
|
||||
|
||||
|
75
src/contexts/DragContext.js
Normal file
75
src/contexts/DragContext.js
Normal file
@ -0,0 +1,75 @@
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React, { useRef, ReactNode } from "react";
|
||||
import {
|
||||
DndContext,
|
||||
useDndContext,
|
||||
useDndMonitor,
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
DragEndEvent,
|
||||
} from "@dnd-kit/core";
|
||||
|
||||
/**
|
||||
* Wrap a dnd-kit DndContext with a position monitor to get the
|
||||
* active drag element on drag end
|
||||
* TODO: use look into fixing this upstream
|
||||
* Related: https://github.com/clauderic/dnd-kit/issues/238
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef DragEndOverlayEvent
|
||||
* @property {DOMRect} overlayNodeClientRect
|
||||
*
|
||||
* @typedef {DragEndEvent & DragEndOverlayEvent} DragEndWithOverlayProps
|
||||
*/
|
||||
|
||||
/**
|
||||
* @callback DragEndWithOverlayEvent
|
||||
* @param {DragEndWithOverlayProps} props
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef CustomDragProps
|
||||
* @property {DragEndWithOverlayEvent=} onDragEnd
|
||||
* @property {ReactNode} children
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {CustomDragProps} props
|
||||
*/
|
||||
function DragPositionMonitor({ children, onDragEnd }) {
|
||||
const { overlayNode } = useDndContext();
|
||||
|
||||
const overlayNodeClientRectRef = useRef();
|
||||
function handleDragMove() {
|
||||
if (overlayNode?.nodeRef?.current) {
|
||||
overlayNodeClientRectRef.current = overlayNode.nodeRef.current.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
|
||||
function handleDragEnd(props) {
|
||||
onDragEnd &&
|
||||
onDragEnd({
|
||||
...props,
|
||||
overlayNodeClientRect: overlayNodeClientRectRef.current,
|
||||
});
|
||||
}
|
||||
useDndMonitor({ onDragEnd: handleDragEnd, onDragMove: handleDragMove });
|
||||
|
||||
return children;
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO: Import Props interface from dnd-kit with conversion to Typescript
|
||||
* @param {CustomDragProps} props
|
||||
*/
|
||||
function DragContext({ children, onDragEnd, ...props }) {
|
||||
return (
|
||||
<DndContext {...props}>
|
||||
<DragPositionMonitor onDragEnd={onDragEnd}>
|
||||
{children}
|
||||
</DragPositionMonitor>
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
|
||||
export default DragContext;
|
@ -1,6 +1,5 @@
|
||||
import React, { useState, useContext } from "react";
|
||||
import {
|
||||
DndContext,
|
||||
MouseSensor,
|
||||
TouchSensor,
|
||||
KeyboardSensor,
|
||||
@ -9,6 +8,8 @@ import {
|
||||
closestCenter,
|
||||
} from "@dnd-kit/core";
|
||||
|
||||
import DragContext from "./DragContext";
|
||||
|
||||
import { useGroup } from "./GroupContext";
|
||||
|
||||
import { moveGroupsInto, moveGroups, ungroup } from "../helpers/group";
|
||||
@ -108,7 +109,7 @@ export function TileDragProvider({
|
||||
}
|
||||
|
||||
function handleDragEnd(event) {
|
||||
const { active, over } = event;
|
||||
const { active, over, overlayNodeClientRect } = event;
|
||||
|
||||
setDragId();
|
||||
setOverId();
|
||||
@ -143,7 +144,9 @@ export function TileDragProvider({
|
||||
}
|
||||
onGroupsChange(newGroups);
|
||||
} else if (over.id === ADD_TO_MAP_ID) {
|
||||
onDragAdd && onDragAdd(selectedGroupIds, over.rect);
|
||||
onDragAdd &&
|
||||
overlayNodeClientRect &&
|
||||
onDragAdd(selectedGroupIds, overlayNodeClientRect);
|
||||
} else if (!filter) {
|
||||
// Hanlde tile move only if we have no filter
|
||||
const overGroupIndex = activeGroups.findIndex(
|
||||
@ -210,7 +213,7 @@ export function TileDragProvider({
|
||||
const value = { dragId, overId, dragCursor };
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
<DragContext
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDragOver={handleDragOver}
|
||||
@ -221,7 +224,7 @@ export function TileDragProvider({
|
||||
<TileDragContext.Provider value={value}>
|
||||
{children}
|
||||
</TileDragContext.Provider>
|
||||
</DndContext>
|
||||
</DragContext>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -144,8 +144,8 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
|
||||
const mapStageRef = useMapStage();
|
||||
function handleTokensAddToMap(groupIds, rect) {
|
||||
let clientPosition = new Vector2(
|
||||
rect.width / 2 + rect.offsetLeft,
|
||||
rect.height / 2 + rect.offsetTop
|
||||
rect.width / 2 + rect.left,
|
||||
rect.height / 2 + rect.top
|
||||
);
|
||||
const mapStage = mapStageRef.current;
|
||||
if (!mapStage) {
|
||||
|
Loading…
Reference in New Issue
Block a user