feat: fps counter

- also fix 1.21.9 version

src/components/canvas/Canvas.tsx

@@ -3,7 +3,7 @@ import { useGesture } from "@use-gesture/react";
 import { isMobile } from "react-device-detect";
 
 import * as PIXI from "pixi.js";
-import { Application } from "@pixi/react";
+import { Application, ApplicationRef } from "@pixi/react";
 
 import { LoadingContext } from "@/context/Loading";
 import { CanvasContext } from "@/context/Canvas";
@@ -38,6 +38,7 @@ import CanvasBorder from "./CanvasBorder";
 import CursorInformation from "./information/Cursor";
 import CanvasInformation from "./information/Canvas";
 import SelectionBar from "./SelectionBar";
+import FPS from "./information/FPS";
 
 // Set scale mode to NEAREST
 PIXI.TextureSource.defaultOptions.scaleMode = "nearest";
@@ -57,6 +58,8 @@ function Canvas() {
 	const blockData = useBlockData(version);
 	const stageContainerRef = useRef<HTMLDivElement>(null);
 
+	const appRef = useRef<ApplicationRef>(null);
+
 	const mousePosition = useRef<Position>({ x: 0, y: 0 });
 	const [mouseCoords, setMouseCoords] = useState<Position>({ x: 0, y: 0 });
 	const mouseMovementRef = useRef<Position>({ x: 0, y: 0 });
@@ -506,7 +509,7 @@ function Canvas() {
 			style={{ cursor: cssCursor }}
 			className="relative"
 		>
-			<Application resizeTo={stageContainerRef} backgroundAlpha={0} className="touch-none select-none">
+			<Application resizeTo={stageContainerRef} ref={appRef} backgroundAlpha={0} className="touch-none select-none">
 				<Blocks blocks={visibleBlocks} missingTexture={missingTexture} textures={textures} coords={coords} scale={scale} version={version} />
 				{/* Selection layer */}
 				<Blocks
@@ -535,6 +538,8 @@ function Canvas() {
 			<CursorInformation mouseCoords={mouseCoords} />
 			<CanvasInformation />
 
+			{settings.fpsCounter && <FPS fps={appRef.current?.getApplication()?.ticker.FPS} />}
+
 			<SelectionBar startBlocks={startBlocksRef.current} startSelectionCoords={startSelectionCoordsRef.current} />
 		</div>
 	);

src/components/canvas/information/FPS.tsx

@@ -0,0 +1,13 @@
+interface Props {
+	fps: number | undefined;
+}
+
+function FPS({ fps }: Props) {
+	return (
+		<div className="absolute left-4 top-4 info-child">
+			<span>FPS: {fps ? Math.round(fps) : "???"}</span>
+		</div>
+	);
+}
+
+export default FPS;

src/components/menubar/ViewMenu.tsx

@@ -39,6 +39,9 @@ function ViewMenu() {
 				<MenubarCheckboxItem checked={settings.canvasBorder} onCheckedChange={onCheckedChange("canvasBorder")}>
 					Canvas Border
 				</MenubarCheckboxItem>
+				<MenubarCheckboxItem checked={settings.fpsCounter} onCheckedChange={onCheckedChange("fpsCounter")}>
+					FPS Counter
+				</MenubarCheckboxItem>
 
 				<MenubarSeparator />
 				<MenubarSub>

src/context/Settings.tsx

@@ -17,6 +17,7 @@ const defaultSettings: Settings = {
 	blockReplacer: true,
 	toolSettings: true,
 	blockSelector: true,
+	fpsCounter: false,
 };
 
 // eslint-disable-next-line react-refresh/only-export-components

src/data/versions.json

@@ -1,5 +1,5 @@
 {
-	"1219": 4554,
+	"1219": 4440,
 	"1214": 4189,
 	"1210": 3953,
 	"1200": 3463,

src/types.d.ts

@@ -34,6 +34,7 @@ interface Settings {
 	blockReplacer: boolean;
 	toolSettings: boolean;
 	blockSelector: boolean;
+	fpsCounter: boolean;
 }
 
 interface DialogProps {