File "use-draggable.ts"
Full Path: /home/markqprx/iniasli.pro/client/ui/interactions/dnd/use-draggable.ts
File size: 6.48 KB
MIME-type: text/html
Charset: utf-8
import React, {RefObject, useLayoutEffect, useRef} from 'react';
import {draggables, dragMonitors, dragSession, droppables} from './drag-state';
import {
InteractableEvent,
interactableEvent,
InteractableRect,
} from '../interactable-event';
import {activeInteraction, setActiveInteraction} from '../active-interaction';
import {domRectToObj} from '../utils/dom-rect-to-obj';
import {updateRects} from './update-rects';
import {useGlobalListeners} from '@react-aria/utils';
import {DragMonitor} from './use-drag-monitor';
import {NativeFileDraggable} from './use-droppable';
interface DragState {
currentRect?: InteractableRect;
lastPosition: {x: number; y: number};
clickedEl?: HTMLElement;
}
export type DragPreviewRenderer = (
draggable: ConnectedDraggable,
callback: (node: HTMLElement) => void
) => void;
export type DraggableId = string | number | object;
export interface ConnectedDraggable<T = any> {
type: string;
id: DraggableId;
getData: () => T;
ref: RefObject<HTMLElement>;
}
// Either draggable from within the app, or file dragged in from the desktop
export type MixedDraggable = ConnectedDraggable | NativeFileDraggable;
interface UseDragProps extends ConnectedDraggable {
disabled?: boolean;
onDragStart?: (e: InteractableEvent, target: ConnectedDraggable) => void;
onDragMove?: (e: InteractableEvent, target: ConnectedDraggable) => void;
onDragEnd?: (e: InteractableEvent, target: ConnectedDraggable) => void;
preview?: RefObject<DragPreviewRenderer>;
hidePreview?: boolean;
}
export function useDraggable({
id,
disabled,
ref,
preview,
hidePreview,
...options
}: UseDragProps) {
const dragHandleRef = useRef<HTMLButtonElement>(null);
const {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
const state = useRef<DragState>({
lastPosition: {x: 0, y: 0},
}).current;
const optionsRef = useRef(options);
optionsRef.current = options;
useLayoutEffect(() => {
if (!disabled) {
draggables.set(id, {
...draggables.get(id),
id,
ref,
type: optionsRef.current.type,
getData: optionsRef.current.getData,
});
} else {
draggables.delete(id);
}
return () => {
draggables.delete(id);
};
}, [id, disabled, optionsRef, ref]);
// notify monitors connected to the same drag type as this draggable
const notifyMonitors = (callback: (m: DragMonitor) => void) => {
dragMonitors.forEach(monitor => {
if (monitor.type === draggables.get(id)?.type) {
callback(monitor);
}
});
};
const onDragStart = (e: React.DragEvent<HTMLElement>) => {
const draggable = draggables.get(id);
const el = ref.current;
const clickedOnHandle =
!dragHandleRef.current ||
!state.clickedEl ||
dragHandleRef.current.contains(state.clickedEl);
// if another interaction is in progress (rotate, resize, drag etc.), bail
if (activeInteraction || !el || !draggable || !clickedOnHandle) {
e.preventDefault();
e.stopPropagation();
return;
}
updateRects(droppables);
setActiveInteraction('drag');
// hide default browser ghost image
if (hidePreview) {
hideNativeGhostImage(e);
}
// this will hide default browser cursor icon, if "dropEffect" is not set in dragOver/dragEnter
e.dataTransfer.effectAllowed = 'move';
state.lastPosition = {x: e.clientX, y: e.clientY};
state.currentRect = domRectToObj(el.getBoundingClientRect());
const ie = interactableEvent({rect: state.currentRect!, e});
// If there is a preview option, use it to render a custom preview image that will
// appear under the pointer while dragging. If not, the element itself is dragged by the browser.
if (preview?.current) {
preview.current(draggable, node => {
e.dataTransfer.setDragImage(node, 0, 0);
});
}
dragSession.status = 'dragging';
dragSession.dragTargetId = id;
if (ref.current) {
ref.current.dataset.dragging = 'true';
}
optionsRef.current.onDragStart?.(ie, draggable);
// wait until next frame so changes made in "onDragStart" are reflected in drag monitors
requestAnimationFrame(() => {
notifyMonitors(m => m.onDragStart?.(ie, draggable));
});
// firefox does not provide clientX/clientY in "onDrag", need to listen for dragOver on window instead
addGlobalListener(window, 'dragover', onDragOver, true);
};
const onDragOver = (e: React.DragEvent<HTMLElement> | DragEvent) => {
e.preventDefault();
if (!state.currentRect) return;
const deltaX = e.clientX - state.lastPosition.x;
const deltaY = e.clientY - state.lastPosition.y;
const newRect = {
...state.currentRect,
left: state.currentRect.left + deltaX,
top: state.currentRect.top + deltaY,
};
const ie = interactableEvent({rect: newRect, e, deltaX, deltaY});
const target = draggables.get(id);
if (target) {
optionsRef.current.onDragMove?.(ie, target);
notifyMonitors(m => m.onDragMove?.(ie, target));
}
state.lastPosition = {x: e.clientX, y: e.clientY};
state.currentRect = newRect;
};
const onDragEnd = (e: React.DragEvent<HTMLElement>) => {
removeAllGlobalListeners();
if (!state.currentRect) return;
setActiveInteraction(null);
if (emptyImage) {
emptyImage.remove();
}
const ie = interactableEvent({rect: state.currentRect, e});
const draggable = draggables.get(id);
if (draggable) {
optionsRef.current.onDragEnd?.(ie, draggable);
notifyMonitors(m => m.onDragEnd?.(ie, draggable, dragSession!.status));
}
// wait a frame before clearing so monitors have a chance to use drag session status
requestAnimationFrame(() => {
dragSession.dragTargetId = undefined;
dragSession.status = 'inactive';
if (ref.current) {
delete ref.current.dataset.dragging;
}
});
};
const draggableProps = {
draggable: !disabled,
onDragStart,
onDragEnd,
onPointerDown: (e: React.PointerEvent) => {
state.clickedEl = e.target as HTMLElement;
},
};
return {draggableProps, dragHandleRef};
}
let emptyImage: HTMLImageElement | undefined;
function hideNativeGhostImage(e: React.DragEvent) {
if (!emptyImage) {
emptyImage = new Image();
// image needs to be in the dom to prevent "globe" icon in chrome
document.body.append(emptyImage);
emptyImage.src =
'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
}
e.dataTransfer.setDragImage(emptyImage, 0, 0);
}