Blame · DraggingOverlay.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type {DragHandler} from './DragHandle';
b69ab31	9
b69ab31	10	import * as stylex from '@stylexjs/stylex';
b69ab31	11	import {ViewportOverlay} from 'isl-components/ViewportOverlay';
b69ab31	12	import {getZoomLevel} from 'isl-components/zoom';
b69ab31	13	import React, {useEffect, useRef} from 'react';
b69ab31	14
b69ab31	15	const styles = stylex.create({
b69ab31	16	draggingElement: {
b69ab31	17	paddingLeft: 'var(--pad)',
b69ab31	18	background: 'var(--background)',
b69ab31	19	border: '1px solid var(--tooltip-border)',
b69ab31	20	boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.2)',
b69ab31	21	},
b69ab31	22	hint: {
b69ab31	23	display: 'flex',
b69ab31	24	justifyContent: 'center',
b69ab31	25	marginTop: 'var(--pad)',
b69ab31	26	},
b69ab31	27	});
b69ab31	28
b69ab31	29	type DraggingOverlayProps = React.HTMLProps<HTMLDivElement> & {
b69ab31	30	/**
b69ab31	31	* Callback ref to update the position of the element.
b69ab31	32	*
b69ab31	33	* It is compatible with the `onDrag: DragHandler` property of `DragHandler`,
b69ab31	34	* or the `clientX`, `clientY` properties of the 'pointermove' event on
b69ab31	35	* `document.body`.
b69ab31	36	*/
b69ab31	37	onDragRef: React.MutableRefObject<DragHandler \| null>;
b69ab31	38
b69ab31	39	/** X offset. Default: `- var(--pad)`. */
b69ab31	40	dx?: string;
b69ab31	41
b69ab31	42	/** Y offset. Default: `- 50%`. */
b69ab31	43	dy?: string;
b69ab31	44
b69ab31	45	/** Extra "hint" message. Will be rendered as a tooltip. */
b69ab31	46	hint?: string \| null;
b69ab31	47	};
b69ab31	48
b69ab31	49	/**
b69ab31	50	* Render children as the "dragging overlay".
b69ab31	51	*
b69ab31	52	* The callsite needs to update the content (children) and position of
b69ab31	53	* the dragging overlay. For performance, the position update requires
b69ab31	54	* the callsite to call `props.onDragRef.current` instead of using React
b69ab31	55	* props.
b69ab31	56	*/
b69ab31	57	export function DraggingOverlay(props: DraggingOverlayProps) {
b69ab31	58	const draggingDivRef = useRef<HTMLDivElement \| null>(null);
b69ab31	59	const {key, children, onDragRef, dx = '- var(--pad)', dy = '- 50%', hint, ...rest} = props;
b69ab31	60
b69ab31	61	useEffect(() => {
b69ab31	62	const zoom = getZoomLevel();
b69ab31	63	onDragRef.current = (x, y, isDragging) => {
b69ab31	64	const draggingDiv = draggingDivRef.current;
b69ab31	65	if (draggingDiv != null) {
b69ab31	66	if (isDragging) {
b69ab31	67	Object.assign(draggingDiv.style, {
b69ab31	68	transform: `translate(calc(${Math.round(x / zoom)}px ${dx}), calc(${Math.round(
b69ab31	69	y / zoom,
b69ab31	70	)}px ${dy}))`,
b69ab31	71	opacity: '1',
b69ab31	72	});
b69ab31	73	} else {
b69ab31	74	draggingDiv.style.opacity = '0';
b69ab31	75	}
b69ab31	76	}
b69ab31	77	};
b69ab31	78	});
b69ab31	79
b69ab31	80	return (
b69ab31	81	<ViewportOverlay key={key}>
b69ab31	82	<div style={{width: 'fit-content', opacity: 0}} ref={draggingDivRef}>
b69ab31	83	<div {...stylex.props(styles.draggingElement)} {...rest}>
b69ab31	84	{children}
b69ab31	85	</div>
b69ab31	86	{hint != null && (
b69ab31	87	<div {...stylex.props(styles.hint)}>
b69ab31	88	<span className="tooltip" style={{height: 'fit-content'}}>
b69ab31	89	{hint}
b69ab31	90	</span>
b69ab31	91	</div>
b69ab31	92	)}
b69ab31	93	</div>
b69ab31	94	</ViewportOverlay>
b69ab31	95	);
b69ab31	96	}