trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: wrap main canvas application around div to fix cursor problems

Browse source
This commit is contained in:
trafficlunar 2025-10-08 17:22:26 +01:00
parent 0b6f044982
commit 2501adebd2
1 changed files with 40 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/components/canvas/Canvas.tsx
View file

@ -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 />