duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Update for Draggable Window

Browse Source 
Moving the touchstart listener to the native DOM element (elementRef.current) and explicitly setting { passive: true }
This commit is contained in:
DuckieTM 2025-03-08 13:21:13 +01:00
parent 30881bafc7
commit 187b1b39d3
1 changed files with 77 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
src/common/draggable-window/DraggableWindow.tsx
View File

@ -10,8 +10,7 @@ const POS_MEMORY: Map<Key, { x: number, y: number }> = new Map();
const BOUNDS_THRESHOLD_TOP: number = 0; const BOUNDS_THRESHOLD_TOP: number = 0;
const BOUNDS_THRESHOLD_LEFT: number = 0; const BOUNDS_THRESHOLD_LEFT: number = 0;
export interface DraggableWindowProps export interface DraggableWindowProps {
{
uniqueKey?: Key; uniqueKey?: Key;
handleSelector?: string; handleSelector?: string;
windowPosition?: string; windowPosition?: string;
@ -22,8 +21,7 @@ export interface DraggableWindowProps
children?: ReactNode; children?: ReactNode;
} }
export const DraggableWindow: FC<DraggableWindowProps> = props => export const DraggableWindow: FC<DraggableWindowProps> = props => {
{
const { uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, dragStyle = {}, children = null, offsetLeft = 0, offsetTop = 0 } = props; const { uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, dragStyle = {}, children = null, offsetLeft = 0, offsetTop = 0 } = props;
const [ delta, setDelta ] = useState<{ x: number, y: number }>(null); const [ delta, setDelta ] = useState<{ x: number, y: number }>(null);
const [ offset, setOffset ] = useState<{ x: number, y: number }>(null); const [ offset, setOffset ] = useState<{ x: number, y: number }>(null);
@ -32,106 +30,73 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
const [ dragHandler, setDragHandler ] = useState<HTMLElement>(null); const [ dragHandler, setDragHandler ] = useState<HTMLElement>(null);
const elementRef = useRef<HTMLDivElement>(); const elementRef = useRef<HTMLDivElement>();
const bringToTop = useCallback(() => const bringToTop = useCallback(() => {
{
let zIndex = 400; let zIndex = 400;
for (const existingWindow of CURRENT_WINDOWS) {
for(const existingWindow of CURRENT_WINDOWS)
{
zIndex += 1; zIndex += 1;
existingWindow.style.zIndex = zIndex.toString(); existingWindow.style.zIndex = zIndex.toString();
} }
}, []); }, []);
const moveCurrentWindow = useCallback(() => const moveCurrentWindow = useCallback(() => {
{
const index = CURRENT_WINDOWS.indexOf(elementRef.current); const index = CURRENT_WINDOWS.indexOf(elementRef.current);
if (index === -1) {
if(index === -1)
{
CURRENT_WINDOWS.push(elementRef.current); CURRENT_WINDOWS.push(elementRef.current);
} } else if (index === (CURRENT_WINDOWS.length - 1)) return;
else if (index >= 0) {
else if(index === (CURRENT_WINDOWS.length - 1)) return;
else if(index >= 0)
{
CURRENT_WINDOWS.splice(index, 1); CURRENT_WINDOWS.splice(index, 1);
CURRENT_WINDOWS.push(elementRef.current); CURRENT_WINDOWS.push(elementRef.current);
} }
bringToTop(); bringToTop();
}, [ bringToTop ]); }, [ bringToTop ]);
const onMouseDown = useCallback((event: ReactMouseEvent<HTMLDivElement>) => const onMouseDown = useCallback((event: ReactMouseEvent<HTMLDivElement>) => {
{
moveCurrentWindow(); moveCurrentWindow();
}, [ moveCurrentWindow ]); }, [ moveCurrentWindow ]);
const onTouchStart = useCallback((event: ReactTouchEvent<HTMLDivElement>) => const onTouchDownHandler = useCallback((event: TouchEvent) => {
{
moveCurrentWindow(); moveCurrentWindow();
}, [ moveCurrentWindow ]); }, [ moveCurrentWindow ]);
const startDragging = useCallback((startX: number, startY: number) => const startDragging = useCallback((startX: number, startY: number) => {
{
setStart({ x: startX, y: startY }); setStart({ x: startX, y: startY });
setIsDragging(true); setIsDragging(true);
}, []); }, []);
const onDragMouseDown = useCallback((event: MouseEvent) => const onDragMouseDown = useCallback((event: MouseEvent) => {
{
startDragging(event.clientX, event.clientY); startDragging(event.clientX, event.clientY);
}, [ startDragging ]); }, [ startDragging ]);
const onTouchDown = useCallback((event: TouchEvent) => const onTouchDown = useCallback((event: TouchEvent) => {
{
const touch = event.touches[0]; const touch = event.touches[0];
startDragging(touch.clientX, touch.clientY); startDragging(touch.clientX, touch.clientY);
}, [ startDragging ]); }, [ startDragging ]);
const onDragMouseMove = useCallback((event: MouseEvent) => const onDragMouseMove = useCallback((event: MouseEvent) => {
{
setDelta({ x: (event.clientX - start.x), y: (event.clientY - start.y) }); setDelta({ x: (event.clientX - start.x), y: (event.clientY - start.y) });
}, [ start ]); }, [ start ]);
const onDragTouchMove = useCallback((event: TouchEvent) => const onDragTouchMove = useCallback((event: TouchEvent) => {
{
const touch = event.touches[0]; const touch = event.touches[0];
setDelta({ x: (touch.clientX - start.x), y: (touch.clientY - start.y) }); setDelta({ x: (touch.clientX - start.x), y: (touch.clientY - start.y) });
}, [ start ]); }, [ start ]);
const completeDrag = useCallback(() => const completeDrag = useCallback(() => {
{ if (!elementRef.current || !dragHandler) return;
if(!elementRef.current || !dragHandler) return;
let offsetX = (offset.x + delta.x); let offsetX = (offset.x + delta.x);
let offsetY = (offset.y + delta.y); let offsetY = (offset.y + delta.y);
const left = elementRef.current.offsetLeft + offsetX; const left = elementRef.current.offsetLeft + offsetX;
const top = elementRef.current.offsetTop + offsetY; const top = elementRef.current.offsetTop + offsetY;
if(top < BOUNDS_THRESHOLD_TOP) if (top < BOUNDS_THRESHOLD_TOP) {
{
offsetY = -elementRef.current.offsetTop; offsetY = -elementRef.current.offsetTop;
} } else if ((top + dragHandler.offsetHeight) >= (document.body.offsetHeight - BOUNDS_THRESHOLD_TOP)) {
else if((top + dragHandler.offsetHeight) >= (document.body.offsetHeight - BOUNDS_THRESHOLD_TOP))
{
offsetY = (document.body.offsetHeight - elementRef.current.offsetHeight) - elementRef.current.offsetTop; offsetY = (document.body.offsetHeight - elementRef.current.offsetHeight) - elementRef.current.offsetTop;
} }
if((left + elementRef.current.offsetWidth) < BOUNDS_THRESHOLD_LEFT) if ((left + elementRef.current.offsetWidth) < BOUNDS_THRESHOLD_LEFT) {
{
offsetX = -elementRef.current.offsetLeft; offsetX = -elementRef.current.offsetLeft;
} } else if (left >= (document.body.offsetWidth - BOUNDS_THRESHOLD_LEFT)) {
else if(left >= (document.body.offsetWidth - BOUNDS_THRESHOLD_LEFT))
{
offsetX = (document.body.offsetWidth - elementRef.current.offsetWidth) - elementRef.current.offsetLeft; offsetX = (document.body.offsetWidth - elementRef.current.offsetWidth) - elementRef.current.offsetLeft;
} }
@ -139,42 +104,33 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
setOffset({ x: offsetX, y: offsetY }); setOffset({ x: offsetX, y: offsetY });
setIsDragging(false); setIsDragging(false);
if(uniqueKey !== null) POS_MEMORY.set(uniqueKey, { if (uniqueKey !== null) POS_MEMORY.set(uniqueKey, { x: offsetX, y: offsetY });
x: offsetX, y: offsetY }); }, [ dragHandler, delta, offset, uniqueKey ]);
}, [ dragHandler, delta, offset, uniqueKey ]);
const onDragMouseUp = useCallback((event: MouseEvent) => const onDragMouseUp = useCallback((event: MouseEvent) => {
{
completeDrag(); completeDrag();
}, [ completeDrag ]); }, [ completeDrag ]);
const onDragTouchUp = useCallback((event: TouchEvent) => const onDragTouchUp = useCallback((event: TouchEvent) => {
{
completeDrag(); completeDrag();
}, [ completeDrag ]); }, [ completeDrag ]);
useEffect(() => useEffect(() => {
{ const element = elementRef.current;
const element = (elementRef.current as HTMLElement); if (!element) return;
if(!element) return;
CURRENT_WINDOWS.push(element); CURRENT_WINDOWS.push(element);
bringToTop(); bringToTop();
if(!disableDrag) if (!disableDrag) {
{ const handle = element.querySelector(handleSelector) as HTMLElement;
const handle = (element.querySelector(handleSelector) as HTMLElement); if (handle) setDragHandler(handle);
if(handle) setDragHandler(handle);
} }
let offsetX = 0; let offsetX = 0;
let offsetY = 0; let offsetY = 0;
switch(windowPosition) switch (windowPosition) {
{
case DraggableWindowPosition.TOP_CENTER: case DraggableWindowPosition.TOP_CENTER:
element.style.top = 50 + offsetTop + 'px'; element.style.top = 50 + offsetTop + 'px';
element.style.left = `calc(50vw - ${ (element.offsetWidth / 2 + offsetLeft) }px)`; element.style.left = `calc(50vw - ${ (element.offsetWidth / 2 + offsetLeft) }px)`;
@ -188,13 +144,10 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
element.style.left = 50 + offsetLeft + 'px'; element.style.left = 50 + offsetLeft + 'px';
break; break;
} }
if(uniqueKey !== null)
{
const memory = POS_MEMORY.get(uniqueKey);
if(memory) if (uniqueKey !== null) {
{ const memory = POS_MEMORY.get(uniqueKey);
if (memory) {
offsetX = memory.x; offsetX = memory.x;
offsetY = memory.y; offsetY = memory.y;
} }
@ -203,74 +156,77 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
setDelta({ x: 0, y: 0 }); setDelta({ x: 0, y: 0 });
setOffset({ x: offsetX, y: offsetY }); setOffset({ x: offsetX, y: offsetY });
return () => return () => {
{
const index = CURRENT_WINDOWS.indexOf(element); const index = CURRENT_WINDOWS.indexOf(element);
if (index >= 0) CURRENT_WINDOWS.splice(index, 1);
if(index >= 0) CURRENT_WINDOWS.splice(index, 1); };
}
}, [ handleSelector, windowPosition, uniqueKey, disableDrag, offsetLeft, offsetTop, bringToTop ]); }, [ handleSelector, windowPosition, uniqueKey, disableDrag, offsetLeft, offsetTop, bringToTop ]);
useEffect(() => useEffect(() => {
{ if (!offset && !delta) return;
if(!offset && !delta) return; const element = elementRef.current;
if (!element) return;
const element = (elementRef.current as HTMLElement);
if(!element) return;
element.style.transform = `translate(${ offset.x + delta.x }px, ${ offset.y + delta.y }px)`; element.style.transform = `translate(${ offset.x + delta.x }px, ${ offset.y + delta.y }px)`;
element.style.visibility = 'visible'; element.style.visibility = 'visible';
}, [ offset, delta ]); }, [ offset, delta ]);
useEffect(() => useEffect(() => {
{ if (!dragHandler) return;
if(!dragHandler) return;
dragHandler.addEventListener(MouseEventType.MOUSE_DOWN, onDragMouseDown); dragHandler.addEventListener(MouseEventType.MOUSE_DOWN, onDragMouseDown);
dragHandler.addEventListener(TouchEventType.TOUCH_START, onTouchDown); dragHandler.addEventListener(TouchEventType.TOUCH_START, onTouchDown, { passive: true });
return () => return () => {
{
dragHandler.removeEventListener(MouseEventType.MOUSE_DOWN, onDragMouseDown); dragHandler.removeEventListener(MouseEventType.MOUSE_DOWN, onDragMouseDown);
dragHandler.removeEventListener(TouchEventType.TOUCH_START, onTouchDown); dragHandler.removeEventListener(TouchEventType.TOUCH_START, onTouchDown);
} };
}, [ dragHandler, onDragMouseDown, onTouchDown ]); }, [ dragHandler, onDragMouseDown, onTouchDown ]);
useEffect(() => useEffect(() => {
{ if (!isDragging) return;
if(!isDragging) return;
document.addEventListener(MouseEventType.MOUSE_UP, onDragMouseUp); document.addEventListener(MouseEventType.MOUSE_UP, onDragMouseUp);
document.addEventListener(TouchEventType.TOUCH_END, onDragTouchUp); document.addEventListener(TouchEventType.TOUCH_END, onDragTouchUp);
document.addEventListener(MouseEventType.MOUSE_MOVE, onDragMouseMove); document.addEventListener(MouseEventType.MOUSE_MOVE, onDragMouseMove);
document.addEventListener(TouchEventType.TOUCH_MOVE, onDragTouchMove); document.addEventListener(TouchEventType.TOUCH_MOVE, onDragTouchMove);
return () => return () => {
{
document.removeEventListener(MouseEventType.MOUSE_UP, onDragMouseUp); document.removeEventListener(MouseEventType.MOUSE_UP, onDragMouseUp);
document.removeEventListener(TouchEventType.TOUCH_END, onDragTouchUp); document.removeEventListener(TouchEventType.TOUCH_END, onDragTouchUp);
document.removeEventListener(MouseEventType.MOUSE_MOVE, onDragMouseMove); document.removeEventListener(MouseEventType.MOUSE_MOVE, onDragMouseMove);
document.removeEventListener(TouchEventType.TOUCH_MOVE, onDragTouchMove); document.removeEventListener(TouchEventType.TOUCH_MOVE, onDragTouchMove);
} };
}, [ isDragging, onDragMouseUp, onDragMouseMove, onDragTouchUp, onDragTouchMove ]); }, [ isDragging, onDragMouseUp, onDragMouseMove, onDragTouchUp, onDragTouchMove ]);
useEffect(() => useEffect(() => {
{ const element = elementRef.current;
if(!uniqueKey) return; if (!element) return;
element.addEventListener('touchstart', onTouchDownHandler, { passive: true });
return () => {
element.removeEventListener('touchstart', onTouchDownHandler);
};
}, [ onTouchDownHandler ]);
useEffect(() => {
if (!uniqueKey) return;
const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`); const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`);
if (!localStorage || !localStorage.offset) return;
if(!localStorage || !localStorage.offset) return;
setDelta({ x: 0, y: 0 }); setDelta({ x: 0, y: 0 });
if(localStorage.offset) setOffset(localStorage.offset); if (localStorage.offset) setOffset(localStorage.offset);
}, [ uniqueKey ]); }, [ uniqueKey ]);
return ( return (
createPortal( createPortal(
<Base position="absolute" innerRef={ elementRef } className="draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart } style={ dragStyle }> <Base
{ children } position="absolute"
</Base>, document.getElementById('draggable-windows-container')) innerRef={elementRef}
className="draggable-window"
onMouseDownCapture={onMouseDown}
style={dragStyle}
>
{children}
</Base>,
document.getElementById('draggable-windows-container')
)
); );
} };