diff --git a/components/system/Window/RndWindow/useRnd.ts b/components/system/Window/RndWindow/useRnd.ts index b1c1729a..34f4a30b 100644 --- a/components/system/Window/RndWindow/useRnd.ts +++ b/components/system/Window/RndWindow/useRnd.ts @@ -6,9 +6,11 @@ import rndDefaults, { import useDraggable from "components/system/Window/RndWindow/useDraggable"; import useResizable from "components/system/Window/RndWindow/useResizable"; import { useProcesses } from "contexts/process"; +import { useSession } from "contexts/session"; +import { useCallback, useMemo } from "react"; import type { DraggableEventHandler } from "react-draggable"; import type { Props, RndResizeCallback } from "react-rnd"; -import { getWindowViewport } from "utils/functions"; +import { getWindowViewport, pxToNum } from "utils/functions"; const enableIframeCapture = (enable = true): void => document.querySelectorAll("iframe").forEach((iframe) => { @@ -26,46 +28,68 @@ const useRnd = (id: string, maximized = false): Props => { } = {}, }, } = useProcesses(); + const { setWindowStates } = useSession(); const [size, setSize] = useResizable(id, autoSizing); const [position, setPosition] = useDraggable(id, size); - const onDragStop: DraggableEventHandler = ( - _event, - { x: positionX, y: positionY } - ) => { - enableIframeCapture(); + const onDragStop: DraggableEventHandler = useCallback( + (_event, { x, y }) => { + enableIframeCapture(); - const newPosition = { x: positionX, y: positionY }; + const newPosition = { x, y }; - if ( - !isWindowOutsideBounds( - { position: newPosition, size }, - getWindowViewport(), - true - ) - ) { - setPosition(newPosition); - } - }; - const onResizeStop: RndResizeCallback = ( - _event, - _direction, - { style: { height: elementHeight, width: elementWidth } }, - _delta, - { x: positionX, y: positionY } - ) => { - enableIframeCapture(); - setSize({ height: elementHeight, width: elementWidth }); - setPosition({ x: positionX, y: positionY }); - }; + if ( + !isWindowOutsideBounds( + { position: newPosition, size }, + getWindowViewport(), + true + ) + ) { + setPosition(newPosition); + setWindowStates((currentWindowStates) => ({ + ...currentWindowStates, + [id]: { + ...currentWindowStates[id], + position: newPosition, + }, + })); + } + }, + [id, setPosition, setWindowStates, size] + ); + const onResizeStop: RndResizeCallback = useCallback( + (_event, _direction, { style: { height, width } }, _delta, newPositon) => { + const newSize = { height: pxToNum(height), width: pxToNum(width) }; + + enableIframeCapture(); + setSize(newSize); + setPosition(newPositon); + setWindowStates((currentWindowStates) => ({ + ...currentWindowStates, + [id]: { + ...currentWindowStates[id], + position: newPositon, + size: newSize, + }, + })); + }, + [id, setPosition, setSize, setWindowStates] + ); + const disableIframeCapture = useCallback( + () => enableIframeCapture(false), + [] + ); + const enableResizing = useMemo( + () => (allowResizing && !maximized ? RESIZING_ENABLED : RESIZING_DISABLED), + [allowResizing, maximized] + ); return { disableDragging: maximized, - enableResizing: - allowResizing && !maximized ? RESIZING_ENABLED : RESIZING_DISABLED, + enableResizing, lockAspectRatio, - onDragStart: () => enableIframeCapture(false), + onDragStart: disableIframeCapture, onDragStop, - onResizeStart: () => enableIframeCapture(false), + onResizeStart: disableIframeCapture, onResizeStop, position, size,