duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Fix screen offset being stale after resize

Browse Source
This commit is contained in:
duckietm
2026-03-18 13:53:14 +01:00
parent c703029c34
commit 50a0e3911a
4 changed files with 42 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MainView.tsx
+1
View File
@@ -85,6 +85,7 @@ export const MainView: FC<{}> = props =>
<AnimatePresence>
{ landingViewVisible &&
<motion.div
className="w-full h-full"
initial={ { opacity: 0 }}
animate={ { opacity: 1 }}
exit={ { opacity: 0 }}>
src/components/hotel-view/HotelView.tsx
+27 -18
View File
@@ -83,27 +83,36 @@ export const HotelView: FC<{}> = props =>
if(!container) return;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight - 55;
const lobbyEl = container.querySelector<HTMLElement>('.nitro-hotel-view-lobby');
if(lobbyEl)
const centerView = () =>
{
const containerRect = container.getBoundingClientRect();
const lobbyRect = lobbyEl.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight - 55;
const lobbyCenterX = (lobbyRect.left - containerRect.left) + container.scrollLeft + lobbyRect.width / 2;
const lobbyCenterY = (lobbyRect.top - containerRect.top) + container.scrollTop + lobbyRect.height / 2;
const lobbyEl = container.querySelector<HTMLElement>('.nitro-hotel-view-lobby');
container.scrollLeft = Math.max(0, lobbyCenterX - viewportWidth / 2);
container.scrollTop = Math.max(0, lobbyCenterY - viewportHeight / 2);
}
else
{
container.scrollLeft = Math.max(0, (2600 - viewportWidth) / 2);
container.scrollTop = Math.max(0, (1425 - viewportHeight) / 2);
}
if(lobbyEl)
{
const containerRect = container.getBoundingClientRect();
const lobbyRect = lobbyEl.getBoundingClientRect();
const lobbyCenterX = (lobbyRect.left - containerRect.left) + container.scrollLeft + lobbyRect.width / 2;
const lobbyCenterY = (lobbyRect.top - containerRect.top) + container.scrollTop + lobbyRect.height / 2;
container.scrollLeft = Math.max(0, lobbyCenterX - viewportWidth / 2);
container.scrollTop = Math.max(0, lobbyCenterY - viewportHeight / 2);
}
else
{
container.scrollLeft = Math.max(0, (2600 - viewportWidth) / 2);
container.scrollTop = Math.max(0, (1425 - viewportHeight) / 2);
}
};
centerView();
window.addEventListener('resize', centerView);
return () => window.removeEventListener('resize', centerView);
}, []);
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) =>
src/components/room/RoomView.tsx
+2 -1
View File
@@ -43,10 +43,11 @@ export const RoomView: FC<{}> = (props) =>
<AnimatePresence>
{
<motion.div
className="w-full h-full"
initial={ { opacity: 0 }}
animate={ { opacity: 1 }}
exit={ { opacity: 0 }}>
<div ref={ elementRef } className="w-100 h-100">
<div ref={ elementRef } className="w-full h-full">
{ roomSession instanceof RoomSession &&
<>
<RoomWidgetsView />
src/hooks/rooms/useRoom.ts
+12 -7
View File
@@ -1,7 +1,7 @@
import { ColorConverter, GetRenderer, GetRoomEngine, GetStage, IRoomSession, NitroAdjustmentFilter, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectHSLColorEnabledEvent, RoomObjectOperationType, RoomSessionEvent, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
import { useEffect, useState } from 'react';
import { useBetween } from 'use-between';
import { CanManipulateFurniture, DispatchUiEvent, GetRoomSession, InitializeRoomInstanceRenderingCanvas, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent, SetActiveRoomId, StartRoomSession } from '../../api';
import { CanManipulateFurniture, DispatchUiEvent, GetRoomSession, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent, SetActiveRoomId, StartRoomSession } from '../../api';
import { useNitroEvent, useUiEvent } from '../events';
const useRoomState = () =>
@@ -253,15 +253,20 @@ const useRoomState = () =>
const resize = (event: UIEvent) =>
{
const width = Math.floor(window.innerWidth);
const height = Math.floor(window.innerHeight);
const newWidth = Math.floor(window.innerWidth);
const newHeight = Math.floor(window.innerHeight);
renderer.resize(width, height, window.devicePixelRatio);
const offsetX = canvas.screenOffsetX - (newWidth - canvas.width) / 2;
const offsetY = canvas.screenOffsetY - (newHeight - canvas.height) / 2;
background.width = width;
background.height = height;
renderer.resize(newWidth, newHeight, window.devicePixelRatio);
InitializeRoomInstanceRenderingCanvas(width, height, 1);
background.width = newWidth;
background.height = newHeight;
canvas.initialize(newWidth, newHeight);
canvas.screenOffsetX = ~~offsetX;
canvas.screenOffsetY = ~~offsetY;
};
window.addEventListener('resize', resize);