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; if (loading) return null;
return ( return (
<div // Relative for canvas information
ref={stageContainerRef} <div className="relative">
tabIndex={0} {/* Wrap application around div to use events */}
onClick={onClick} <div
onKeyDown={onKeyDown} ref={stageContainerRef}
onKeyUp={onKeyUp} tabIndex={0}
onPointerDown={onPointerDown} onClick={onClick}
onPointerMove={onPointerMove} onKeyDown={onKeyDown}
onPointerUp={onPointerUp} onKeyUp={onKeyUp}
onWheel={onWheel} onPointerDown={onPointerDown}
style={{ cursor: cssCursor }} onPointerMove={onPointerMove}
className="relative" onPointerUp={onPointerUp}
> onWheel={onWheel}
<Application resizeTo={stageContainerRef} ref={appRef} backgroundAlpha={0} className="touch-none select-none"> style={{ cursor: cssCursor }}
<Blocks blocks={visibleBlocks} missingTexture={missingTexture} textures={textures} coords={coords} scale={scale} version={version} /> className="size-full"
{/* Selection layer */} >
<Blocks <Application resizeTo={stageContainerRef} ref={appRef} backgroundAlpha={0} className="touch-none select-none">
isSelectionLayer <Blocks blocks={visibleBlocks} missingTexture={missingTexture} textures={textures} coords={coords} scale={scale} version={version} />
blocks={selectionLayerBlocks} {/* Selection layer */}
missingTexture={missingTexture} <Blocks
textures={textures} isSelectionLayer
coords={coords} blocks={selectionLayerBlocks}
scale={scale} missingTexture={missingTexture}
version={version} textures={textures}
/> coords={coords}
scale={scale}
version={version}
/>
<pixiContainer x={coords.x} y={coords.y} scale={scale}> <pixiContainer x={coords.x} y={coords.y} scale={scale}>
{settings.canvasBorder && <CanvasBorder canvasSize={canvasSize} isDark={isDark} />} {settings.canvasBorder && <CanvasBorder canvasSize={canvasSize} isDark={isDark} />}
<Cursor mouseCoords={mouseCoords} radius={radius} isDark={isDark} /> <Cursor mouseCoords={mouseCoords} radius={radius} isDark={isDark} />
<Selection selection={selectionCoords} 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> </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} /> <CursorInformation mouseCoords={mouseCoords} />
<CanvasInformation /> <CanvasInformation />