Save window state on move/resize

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,