Card size/position is now stored in LocalStorage

src/api/utils/GetLocalStorage.ts

@@ -0,0 +1 @@
+export const GetLocalStorage = <T>(key: string) => JSON.parse(window.localStorage.getItem(key)) as T ?? null;

src/api/utils/SetLocalStorage.ts

@@ -0,0 +1 @@
+export const SetLocalStorage = <T>(key: string, value: T) => window.localStorage.setItem(key, JSON.stringify(value));

src/api/utils/WindowSaveOptions.ts

@@ -0,0 +1,5 @@
+export interface WindowSaveOptions
+{
+    offset: { x: number, y: number };
+    size: { width: number, height: number };
+}

src/api/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './CloneObject';
 export * from './ColorUtils';
 export * from './ConvertSeconds';
+export * from './GetLocalStorage';
 export * from './LocalizeBadgeDescription';
 export * from './LocalizeBageName';
 export * from './LocalizeFormattedNumber';
@@ -11,4 +12,6 @@ export * from './PlaySound';
 export * from './ProductImageUtility';
 export * from './Randomizer';
 export * from './RoomChatFormatter';
+export * from './SetLocalStorage';
 export * from './SoundNames';
+export * from './WindowSaveOptions';

src/common/card/NitroCardView.tsx

@@ -1,5 +1,6 @@
-import { FC, useMemo } from 'react';
+import { FC, useEffect, useMemo, useRef } from 'react';
 import { Column, ColumnProps } from '..';
+import { GetLocalStorage, SetLocalStorage, WindowSaveOptions } from '../../api';
 import { DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../draggable-window';
 import { NitroCardContextProvider } from './NitroCardContext';
 
@@ -11,6 +12,7 @@ export interface NitroCardViewProps extends DraggableWindowProps, ColumnProps
 export const NitroCardView: FC<NitroCardViewProps> = props =>
 {
     const { theme = 'primary', uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, overflow = 'hidden', position = 'relative', gap = 0, classNames = [], ...rest } = props;
+    const elementRef = useRef<HTMLDivElement>();
 
     const getClassNames = useMemo(() =>
     {
@@ -23,10 +25,40 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
         return newClassNames;
     }, [ theme, classNames ]);
 
+    useEffect(() =>
+    {
+        if(!uniqueKey || !elementRef || !elementRef.current) return;
+
+        const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`);
+        const element = elementRef.current;
+
+        if(localStorage && localStorage.size)
+        {
+            element.style.width = `${ localStorage.size.width }px`;
+            element.style.height = `${ localStorage.size.height }px`;
+        }
+
+        const observer = new ResizeObserver(event =>
+        {
+            const newStorage = { ...GetLocalStorage<Partial<WindowSaveOptions>>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions;
+
+            newStorage.size = { width: element.offsetWidth, height: element.offsetHeight };
+
+            SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
+        });
+
+        observer.observe(element);
+
+        return () =>
+        {
+            observer.disconnect();
+        }
+    }, [ uniqueKey ]);
+
     return (
         <NitroCardContextProvider value={ { theme } }>
             <DraggableWindow uniqueKey={ uniqueKey } handleSelector={ handleSelector } windowPosition={ windowPosition } disableDrag={ disableDrag }>
-                <Column overflow={ overflow } position={ position } gap={ gap } classNames={ getClassNames } { ...rest } />
+                <Column innerRef={ elementRef } overflow={ overflow } position={ position } gap={ gap } classNames={ getClassNames } { ...rest } />
             </DraggableWindow>
         </NitroCardContextProvider>
     );

src/common/draggable-window/DraggableWindow.tsx

@@ -2,10 +2,10 @@ 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 { createPortal } from 'react-dom';
 import { Base } from '..';
+import { GetLocalStorage, SetLocalStorage, WindowSaveOptions } from '../../api';
 import { DraggableWindowPosition } from './DraggableWindowPosition';
 
 const CURRENT_WINDOWS: HTMLElement[] = [];
-const POS_MEMORY: Map<Key, { x: number, y: number }> = new Map();
 const BOUNDS_THRESHOLD_TOP: number = 0;
 const BOUNDS_THRESHOLD_LEFT: number = 0;
 
@@ -138,7 +138,14 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
         setOffset({ x: offsetX, y: offsetY });
         setIsDragging(false);
 
-        if(uniqueKey !== null) POS_MEMORY.set(uniqueKey, { x: offsetX, y: offsetY });
+        if(uniqueKey !== null)
+        {
+            const newStorage = { ...GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions;
+
+            newStorage.offset = { x: offsetX, y: offsetY };
+
+            SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
+        }
     }, [ dragHandler, delta, offset, uniqueKey ]);
 
     const onDragMouseUp = useCallback((event: MouseEvent) =>
@@ -187,17 +194,6 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
                 break;
         }
 
-        if(uniqueKey !== null)
-        {
-            const memory = POS_MEMORY.get(uniqueKey);
-
-            if(memory)
-            {
-                offsetX = memory.x;
-                offsetY = memory.y;
-            }
-        }
-
         setDelta({ x: 0, y: 0 });
         setOffset({ x: offsetX, y: offsetY });
 
@@ -253,6 +249,18 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
         }
     }, [ isDragging, onDragMouseUp, onDragMouseMove, onDragTouchUp, onDragTouchMove ]);
 
+    useEffect(() =>
+    {
+        if(!uniqueKey) return;
+
+        const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`);
+
+        if(!localStorage || !localStorage.offset) return;
+
+        setDelta({ x: 0, y: 0 });
+        if(localStorage.offset) setOffset(localStorage.offset);
+    }, [ uniqueKey ]);
+
     return (
         createPortal(
             <Base position="absolute" innerRef={ elementRef } className="draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart } style={ dragStyle }>

src/hooks/useLocalStorage.ts

@@ -1,5 +1,6 @@
 import { NitroLogger } from '@nitrots/nitro-renderer';
 import { Dispatch, SetStateAction, useState } from 'react';
+import { GetLocalStorage, SetLocalStorage } from '../api';
 
 const useLocalStorageState = <T>(key: string, initialValue: T): [ T, Dispatch<SetStateAction<T>>] =>
 {
@@ -9,9 +10,9 @@ const useLocalStorageState = <T>(key: string, initialValue: T): [ T, Dispatch<Se
 
         try
         {
-            const item = window.localStorage.getItem(key);
+            const item = GetLocalStorage<T>(key);
 
-            return item ? JSON.parse(item) : initialValue;
+            return item ?? initialValue;
         }
 
         catch(error)
@@ -28,7 +29,7 @@ const useLocalStorageState = <T>(key: string, initialValue: T): [ T, Dispatch<Se
 
             setStoredValue(valueToStore);
 
-            if(typeof window !== 'undefined') window.localStorage.setItem(key, JSON.stringify(valueToStore));
+            if(typeof window !== 'undefined') SetLocalStorage(key, valueToStore);
         }
 
         catch(error)