Scaling fixed

package.json

@@ -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",

src/api/nitro/room/DispatchMouseEvent.ts

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

src/api/nitro/room/GetRoomObjectBounds.ts

@@ -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;
 }

src/api/nitro/room/GetRoomObjectScreenLocation.ts

@@ -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;
+}

src/api/nitro/room/index.ts

@@ -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';

src/components/room/RoomView.tsx

@@ -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);
 

src/components/room/widgets/context-menu/ContextMenuView.tsx

@@ -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 x = ~~(location.x - (elementRef.current.offsetWidth / 2));
-        let y = Math.round(deltaY + offset);
+        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 ]);

src/components/room/widgets/object-location/ObjectLocationView.tsx

@@ -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 ]);

yarn.lock

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