nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Scaling fixed

Browse Source
This commit is contained in:
Bill 2022-04-05 03:10:16 -04:00
parent f1fd556b42
commit 7dee962785
9 changed files with 52 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -15,7 +15,7 @@
"@fortawesome/fontawesome-svg-core": "^6.1.0",
"@fortawesome/free-solid-svg-icons": "^6.1.0",
"@fortawesome/react-fontawesome": "^0.1.17",
"@nitrots/nitro-renderer": "^1.1.22",
"@nitrots/nitro-renderer": "^1.1.23",
"animate.css": "^4.1.1",
"classnames": "^2.3.1",
"cross-env": "^7.0.3",

4
src/api/nitro/room/DispatchMouseEvent.ts
View File

@ -8,8 +8,8 @@ let clickCount = 0;
export function DispatchMouseEvent(roomId: number, canvasId: number, event: MouseEvent)
{
const x = event.clientX;
const y = event.clientY;
const x = (event.clientX * window.devicePixelRatio);
const y = (event.clientY * window.devicePixelRatio);
let eventType = event.type;

15
src/api/nitro/room/GetRoomObjectBounds.ts
View File

@ -1,7 +1,16 @@
import { NitroRectangle } from '@nitrots/nitro-renderer';
import { GetRoomEngine } from './GetRoomEngine';
export function GetRoomObjectBounds(roomId: number, objectId: number, category: number, canvasId = 1): NitroRectangle
export const GetRoomObjectBounds = (roomId: number, objectId: number, category: number, canvasId = 1) =>
{
return GetRoomEngine().getRoomObjectBoundingRectangle(roomId, objectId, category, canvasId);
const rectangle = GetRoomEngine().getRoomObjectBoundingRectangle(roomId, objectId, category, canvasId);
if(!rectangle) return null;
if(window.devicePixelRatio !== 1)
{
rectangle.x /= window.devicePixelRatio;
rectangle.y /= window.devicePixelRatio;
}
return rectangle;
}

16
src/api/nitro/room/GetRoomObjectScreenLocation.ts Normal file
View File

@ -0,0 +1,16 @@
import { GetRoomEngine } from './GetRoomEngine';
export const GetRoomObjectScreenLocation = (roomId: number, objectId: number, category: number, canvasId = 1) =>
{
const point = GetRoomEngine().getRoomObjectScreenLocation(roomId, objectId, category, canvasId);
if(!point) return null;
if(window.devicePixelRatio !== 1)
{
point.x /= window.devicePixelRatio;
point.y /= window.devicePixelRatio;
}
return point;
}

1
src/api/nitro/room/index.ts
View File

@ -3,6 +3,7 @@ export * from './DispatchTouchEvent';
export * from './GetOwnRoomObject';
export * from './GetRoomEngine';
export * from './GetRoomObjectBounds';
export * from './GetRoomObjectScreenLocation';
export * from './InitializeRoomInstanceRenderingCanvas';
export * from './IsFurnitureSelectionDisabled';
export * from './ProcessRoomObjectOperation';

12
src/components/room/RoomView.tsx
View File

@ -55,7 +55,7 @@ export const RoomView: FC<RoomViewProps> = props =>
setWidgetHandler(widgetHandlerManager);
GetNitroInstance().renderer.resize(window.innerWidth, window.innerHeight);
GetNitroInstance().renderer.resize((window.innerWidth * window.devicePixelRatio), (window.innerHeight * window.devicePixelRatio));
const canvasId = 1;
@ -95,6 +95,14 @@ export const RoomView: FC<RoomViewProps> = props =>
if(!canvas) return;
if(window.devicePixelRatio !== 1)
{
let scaleValue = (1 / window.devicePixelRatio);
canvas.style.transform = `scale(${ scaleValue })`;
canvas.style.transformOrigin = 'top left';
}
canvas.onclick = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
canvas.onmousemove = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
canvas.onmousedown = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
@ -107,7 +115,7 @@ export const RoomView: FC<RoomViewProps> = props =>
window.onresize = () =>
{
GetNitroInstance().renderer.resize(window.innerWidth, window.innerHeight);
GetNitroInstance().renderer.resize((window.innerWidth * window.devicePixelRatio), (window.innerHeight * window.devicePixelRatio));
InitializeRoomInstanceRenderingCanvas(roomSession.roomId, canvasId, GetNitroInstance().width, GetNitroInstance().height);

8
src/components/room/widgets/context-menu/ContextMenuView.tsx
View File

@ -1,6 +1,6 @@
import { FixedSizeStack, NitroPoint, NitroRectangle, RoomObjectType } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { GetNitroInstance, GetRoomEngine, GetRoomObjectBounds, GetRoomSession, GetTicker } from '../../../../api';
import { GetNitroInstance, GetRoomObjectBounds, GetRoomObjectScreenLocation, GetRoomSession, GetTicker } from '../../../../api';
import { Base, BaseProps } from '../../../../common';
interface ContextMenuViewProps extends BaseProps<HTMLDivElement>
@ -89,8 +89,8 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
const deltaY = (location.y - maxStack);
let x = Math.round(location.x - (elementRef.current.offsetWidth / 2));
let y = Math.round(deltaY + offset);
let x = ~~(location.x - (elementRef.current.offsetWidth / 2));
let y = ~~(deltaY + offset);
const maxLeft = ((GetNitroInstance().width - elementRef.current.offsetWidth) - SPACE_AROUND_EDGES);
const maxTop = ((GetNitroInstance().height - elementRef.current.offsetHeight) - SPACE_AROUND_EDGES);
@ -110,7 +110,7 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
if(!elementRef.current || !updateFade(time)) return;
const bounds = GetRoomObjectBounds(GetRoomSession().roomId, objectId, category);
const location = GetRoomEngine().getRoomObjectScreenLocation(GetRoomSession().roomId, objectId, category);
const location = GetRoomObjectScreenLocation(GetRoomSession().roomId, objectId, category);
updatePosition(bounds, location);
}, [ objectId, category, updateFade, updatePosition ]);

4
src/components/room/widgets/object-location/ObjectLocationView.tsx
View File

@ -1,5 +1,5 @@
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { GetNitroInstance, GetRoomEngine, GetRoomSession } from '../../../../api';
import { GetNitroInstance, GetRoomObjectBounds, GetRoomSession } from '../../../../api';
import { Base, BaseProps } from '../../../../common';
interface ObjectLocationViewProps extends BaseProps<HTMLDivElement>
@ -18,7 +18,7 @@ export const ObjectLocationView: FC<ObjectLocationViewProps> = props =>
const getObjectLocation = useCallback(() =>
{
const roomSession = GetRoomSession();
const objectBounds = GetRoomEngine().getRoomObjectBoundingRectangle(roomSession.roomId, objectId, category, 1);
const objectBounds = GetRoomObjectBounds(roomSession.roomId, objectId, category, 1);
return objectBounds;
}, [ objectId, category ]);

8
yarn.lock
View File

@ -1450,10 +1450,10 @@
"@jridgewell/resolve-uri" "^3.0.3"
"@jridgewell/sourcemap-codec" "^1.4.10"
"@nitrots/nitro-renderer@^1.1.22":
version "1.1.22"
resolved "https://registry.yarnpkg.com/@nitrots/nitro-renderer/-/nitro-renderer-1.1.22.tgz#169bf524bd0367a1ca4527545e3bb547d05a2a96"
integrity sha512-KCc3fwyd0WFDb97BWQ/dIIZCJbqcpEATH5DlaMv52Xh6vkzsPStsGtnnnjxo4PHQ8fLOuzh+YiZcPMKNIwHtkw==
"@nitrots/nitro-renderer@^1.1.23":
version "1.1.23"
resolved "https://registry.yarnpkg.com/@nitrots/nitro-renderer/-/nitro-renderer-1.1.23.tgz#a45107beb07beefce5de8a6215f6a35e11f79d2f"
integrity sha512-diFiEE0u3flvKA7FitCnoKy1h+4eQuwnc9wcJlesxGHuXoySkOsuQC96qqPfnyz0WZrYxlybr14HZPyKMtTsYA==
dependencies:
"@pixi/canvas-renderer" "^6.3.0"
"@pixi/extract" "^6.3.0"