diff --git a/src/common/draggable-window/DraggableWindow.tsx b/src/common/draggable-window/DraggableWindow.tsx index b71a353..15c7fd0 100644 --- a/src/common/draggable-window/DraggableWindow.tsx +++ b/src/common/draggable-window/DraggableWindow.tsx @@ -1,5 +1,5 @@ import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer'; -import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, ReactNode, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react'; +import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, ReactNode, TouchEvent as ReactTouchEvent, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { GetLocalStorage, SetLocalStorage, WindowSaveOptions } from '../../api'; import { DraggableWindowPosition } from './DraggableWindowPosition'; @@ -26,7 +26,7 @@ export const DraggableWindow: FC = props => { const [offset, setOffset] = useState<{ x: number, y: number }>({ x: 0, y: 0 }); const [start, setStart] = useState<{ x: number, y: number }>({ x: 0, y: 0 }); const [isDragging, setIsDragging] = useState(false); - const [isPositioned, setIsPositioned] = useState(false); // New state to control visibility + const [isPositioned, setIsPositioned] = useState(false); const [dragHandler, setDragHandler] = useState(null); const elementRef = useRef(); @@ -137,7 +137,7 @@ export const DraggableWindow: FC = props => { completeDrag(); }, [completeDrag]); - useEffect(() => { + useLayoutEffect(() => { const element = elementRef.current as HTMLElement; if (!element) return; @@ -170,11 +170,9 @@ export const DraggableWindow: FC = props => { } const clampedPos = clampPosition(offsetX, offsetY); - element.style.left = '0px'; - element.style.top = '0px'; setOffset({ x: clampedPos.x, y: clampedPos.y }); setDelta({ x: 0, y: 0 }); - setIsPositioned(true); // Mark as positioned after setting initial offset + setIsPositioned(true); return () => { const index = CURRENT_WINDOWS.indexOf(element); @@ -182,14 +180,6 @@ export const DraggableWindow: FC = props => { }; }, [handleSelector, windowPosition, uniqueKey, disableDrag, offsetLeft, offsetTop, bringToTop]); - useEffect(() => { - const element = elementRef.current as HTMLElement; - if (!element || !isPositioned) return; - - element.style.transform = `translate(${offset.x + delta.x}px, ${offset.y + delta.y}px)`; - element.style.visibility = 'visible'; - }, [offset, delta, isPositioned]); - useEffect(() => { if (!dragHandler) return; @@ -227,14 +217,20 @@ export const DraggableWindow: FC = props => { const clampedPos = clampPosition(localStorage.offset.x, localStorage.offset.y); setDelta({ x: 0, y: 0 }); setOffset({ x: clampedPos.x, y: clampedPos.y }); - setIsPositioned(true); // Ensure positioned when loading from storage + setIsPositioned(true); }, [uniqueKey, clampPosition]); return createPortal(
@@ -242,4 +238,4 @@ export const DraggableWindow: FC = props => {
, document.getElementById('draggable-windows-container') ); -}; \ No newline at end of file +};