nitro
/
nitro
mirror of https://github.com/Gurkengewuerz/nitro.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: window position saving with different localstorage structure

This commit is contained in:
Niklas 2023-03-22 00:57:38 +01:00
parent 3d8e3c5cd5
commit 12b803eeac
4 changed files with 28 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/frontend/src/api/utils/WindowSaveOptions.ts
View File

@ -2,3 +2,7 @@ export interface WindowSaveOptions {
offset: {x: number; y: number};
size: {width: number; height: number};
}
export interface WindowSaveScreenOptions {
[Key: string]: WindowSaveOptions;
}

20
apps/frontend/src/common/card/NitroCardView.tsx
View File

@ -1,7 +1,7 @@
import {FC, useEffect, useMemo, useRef} from "react";
import {Column, ColumnProps} from "..";
import {GetLocalStorage, SetLocalStorage, WindowSaveOptions} from "../../api";
import {GetLocalStorage, SetLocalStorage, WindowSaveOptions, WindowSaveScreenOptions} from "../../api";
import {DraggableWindow, DraggableWindowPosition, DraggableWindowProps} from "../draggable-window";
import {NitroCardContextProvider} from "./NitroCardContext";
@ -37,18 +37,22 @@ export const NitroCardView: FC<NitroCardViewProps> = props => {
useEffect(() => {
if (!uniqueKey || !elementRef || !elementRef.current) return;
const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${uniqueKey}`);
const screen = `${window.innerWidth}x${window.innerHeight}`;
const localStorage = GetLocalStorage<WindowSaveScreenOptions>(`nitro.windows.${uniqueKey}`);
const windowOptions = localStorage?.[screen] as WindowSaveOptions;
const element = elementRef.current;
if (localStorage && localStorage.size && localStorage.size.width > 0 && localStorage.size.height > 0) {
element.style.width = `${localStorage.size.width}px`;
element.style.height = `${localStorage.size.height}px`;
if (windowOptions && windowOptions.size && windowOptions.size.width > 0 && windowOptions.size.height > 0) {
element.style.width = `${windowOptions.size.width}px`;
element.style.height = `${windowOptions.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);
const screen = `${window.innerWidth}x${window.innerHeight}`;
const newStorage = {...GetLocalStorage<Partial<WindowSaveScreenOptions>>(`nitro.windows.${uniqueKey}`)} as WindowSaveScreenOptions;
newStorage[screen] = newStorage?.[screen] || {} as WindowSaveOptions;
newStorage[screen].size = {width: element.offsetWidth, height: element.offsetHeight};
SetLocalStorage<WindowSaveScreenOptions>(`nitro.windows.${uniqueKey}`, newStorage);
});
observer.observe(element);

21
apps/frontend/src/common/draggable-window/DraggableWindow.tsx
View File

@ -3,7 +3,7 @@ import {CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, ReactNode, TouchE
import {createPortal} from "react-dom";
import {Base} from "..";
import {GetLocalStorage, SetLocalStorage, WindowSaveOptions} from "../../api";
import {GetLocalStorage, SetLocalStorage, WindowSaveOptions, WindowSaveScreenOptions} from "../../api";
import {DraggableWindowPosition} from "./DraggableWindowPosition";
const CURRENT_WINDOWS: HTMLElement[] = [];
@ -141,11 +141,11 @@ export const DraggableWindow: FC<DraggableWindowProps> = props => {
setIsDragging(false);
if (uniqueKey !== null) {
const newStorage = {...GetLocalStorage<WindowSaveOptions>(`nitro.windows.${uniqueKey}`)} as WindowSaveOptions;
newStorage.offset = {x: offsetX, y: offsetY};
SetLocalStorage<WindowSaveOptions>(`nitro.windows.${uniqueKey}`, newStorage);
const screen = `${window.innerWidth}x${window.innerHeight}`;
const newStorage = {...GetLocalStorage<Partial<WindowSaveScreenOptions>>(`nitro.windows.${uniqueKey}`)} as WindowSaveScreenOptions;
newStorage[screen] = newStorage?.[screen] || {} as WindowSaveOptions;
newStorage[screen].offset = {x: offsetX, y: offsetY};
SetLocalStorage<WindowSaveScreenOptions>(`nitro.windows.${uniqueKey}`, newStorage);
}
}, [dragHandler, delta, offset, uniqueKey]);
@ -248,12 +248,15 @@ export const DraggableWindow: FC<DraggableWindowProps> = props => {
useEffect(() => {
if (!uniqueKey) return;
const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${uniqueKey}`);
const screen = `${window.innerWidth}x${window.innerHeight}`;
const localStorage = GetLocalStorage<WindowSaveScreenOptions>(`nitro.windows.${uniqueKey}`);
const windowOptions = localStorage?.[screen] as WindowSaveOptions;
if (!localStorage || !localStorage.offset) return;
if (!windowOptions || !windowOptions.offset) return;
setDelta({x: 0, y: 0});
if (localStorage.offset) setOffset(localStorage.offset);
if (localStorage.offset) setOffset(windowOptions.offset);
}, [uniqueKey]);
return createPortal(

24
apps/frontend/src/hooks/session/useSessionInfo.ts
View File

@ -52,30 +52,6 @@ const useSessionInfoState = () => {
setChatStyleId(parser.chatType);
});
useEffect(() => {
const currentScreenSize = <{width: number; height: number}>GetLocalStorage("nitro.screensize");
if (currentScreenSize && (currentScreenSize.width !== window.innerWidth || currentScreenSize.height !== window.innerHeight)) {
let i = window.localStorage.length;
while (i > 0) {
const key = window.localStorage.key(i);
if (key && key.startsWith("nitro.window")) window.localStorage.removeItem(key);
i--;
}
}
const onResize = (event: UIEvent) => setScreenSize({width: window.innerWidth, height: window.innerHeight});
window.addEventListener("resize", onResize);
return () => {
window.removeEventListener("resize", onResize);
};
}, [setScreenSize]);
return {userInfo, userFigure, chatStyleId, userRespectRemaining, petRespectRemaining, respectUser, respectPet, updateChatStyleId};
};