From 2501adebd2fea49827aaa3ce7919d7625ac04374 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Wed, 8 Oct 2025 17:22:26 +0100
Subject: [PATCH] fix: wrap main canvas application around div to fix cursor
 problems

---
 src/components/canvas/Canvas.tsx | 76 +++++++++++++++++---------------
 1 file changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx
index 550b135..0b2ef2c 100644
--- a/src/components/canvas/Canvas.tsx
+++ b/src/components/canvas/Canvas.tsx
@@ -496,44 +496,48 @@ function Canvas() {
 	if (loading) return null;
 
 	return (
-		<div
-			ref={stageContainerRef}
-			tabIndex={0}
-			onClick={onClick}
-			onKeyDown={onKeyDown}
-			onKeyUp={onKeyUp}
-			onPointerDown={onPointerDown}
-			onPointerMove={onPointerMove}
-			onPointerUp={onPointerUp}
-			onWheel={onWheel}
-			style={{ cursor: cssCursor }}
-			className="relative"
-		>
-			<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
-					isSelectionLayer
-					blocks={selectionLayerBlocks}
-					missingTexture={missingTexture}
-					textures={textures}
-					coords={coords}
-					scale={scale}
-					version={version}
-				/>
+		// Relative for canvas information
+		<div className="relative">
+			{/* Wrap application around div to use events */}
+			<div
+				ref={stageContainerRef}
+				tabIndex={0}
+				onClick={onClick}
+				onKeyDown={onKeyDown}
+				onKeyUp={onKeyUp}
+				onPointerDown={onPointerDown}
+				onPointerMove={onPointerMove}
+				onPointerUp={onPointerUp}
+				onWheel={onWheel}
+				style={{ cursor: cssCursor }}
+				className="size-full"
+			>
+				<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
+						isSelectionLayer
+						blocks={selectionLayerBlocks}
+						missingTexture={missingTexture}
+						textures={textures}
+						coords={coords}
+						scale={scale}
+						version={version}
+					/>
 
-				<pixiContainer x={coords.x} y={coords.y} scale={scale}>
-					{settings.canvasBorder && <CanvasBorder canvasSize={canvasSize} isDark={isDark} />}
-					<Cursor mouseCoords={mouseCoords} radius={radius} isDark={isDark} />
-					<Selection selection={selectionCoords} isDark={isDark} />
-				</pixiContainer>
-
-				{settings.grid && (
-					<pixiContainer filters={[new PIXI.AlphaFilter({ alpha: 0.1 })]}>
-						<Grid stageSize={stageSize} coords={coords} scale={scale} isDark={isDark} />
+					<pixiContainer x={coords.x} y={coords.y} scale={scale}>
+						{settings.canvasBorder && <CanvasBorder canvasSize={canvasSize} isDark={isDark} />}
+						<Cursor mouseCoords={mouseCoords} radius={radius} isDark={isDark} />
+						<Selection selection={selectionCoords} isDark={isDark} />
 					</pixiContainer>
-				)}
-			</Application>
+
+					{settings.grid && (
+						<pixiContainer filters={[new PIXI.AlphaFilter({ alpha: 0.1 })]}>
+							<Grid stageSize={stageSize} coords={coords} scale={scale} isDark={isDark} />
+						</pixiContainer>
+					)}
+				</Application>
+			</div>
 
 			<CursorInformation mouseCoords={mouseCoords} />
 			<CanvasInformation />