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

fix: #1 - app crashing when closing OpenImage dialog with block selector mounted

Browse source
This commit is contained in:
trafficlunar 2025-02-15 19:09:27 +00:00
parent ee20e23f1d
commit 465273987d
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/dialogs/open-image/BlockSelector.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext, useMemo, useState } from "react"; import React, { useContext, useMemo, useRef, useState } from "react";
import { Container, Graphics, Sprite, Stage } from "@pixi/react"; import { Container, Graphics, Sprite, Stage } from "@pixi/react";
import { CanvasContext } from "@/context/Canvas"; import { CanvasContext } from "@/context/Canvas";
@ -25,6 +25,7 @@ function BlockSelector({ stageWidth, searchInput, selectedBlocks, setSelectedBlo
const textures = useTextures(version); const textures = useTextures(version);
const [hoverPosition, setHoverPosition] = useState<Position | null>(null); const [hoverPosition, setHoverPosition] = useState<Position | null>(null);
const showStage = useRef(true);
const filteredBlocks = useMemo(() => Object.keys(blockData).filter((value) => value.includes(searchInput)), [searchInput, blockData]); const filteredBlocks = useMemo(() => Object.keys(blockData).filter((value) => value.includes(searchInput)), [searchInput, blockData]);
const blocksPerColumn = Math.floor(stageWidth / (32 + 2)); const blocksPerColumn = Math.floor(stageWidth / (32 + 2));
@ -39,12 +40,18 @@ function BlockSelector({ stageWidth, searchInput, selectedBlocks, setSelectedBlo
} }
}; };
// Fixes issue #1 - entire app crashing when closing dialog with Stage mounted
if (!showStage.current) return null;
return ( return (
<Stage <Stage
width={stageWidth} width={stageWidth}
height={Math.ceil(Object.keys(blockData).length / blocksPerColumn) * (32 + 2)} height={Math.ceil(Object.keys(blockData).length / blocksPerColumn) * (32 + 2)}
options={{ backgroundAlpha: 0 }} options={{ backgroundAlpha: 0 }}
onPointerLeave={() => setHoverPosition(null)} onPointerLeave={() => setHoverPosition(null)}
onUnmount={() => {
showStage.current = false;
}}
> >
<Container> <Container>
{filteredBlocks.map((block, index) => { {filteredBlocks.map((block, index) => {