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

fix: height issues in open image dialog

Browse source
This commit is contained in:
trafficlunar 2024-12-28 20:35:13 +00:00
parent 25f519074a
commit cf83d2fc7c
2 changed files with 5 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/dialogs/OpenImage.tsx
View file

@ -116,12 +116,10 @@ function OpenImage({ close }: DialogProps) {
useEffect(() => {
if (!divRef.current) return;
setStageWidth(divRef.current.clientWidth);
console.log(stageWidth);
}, []);
}, [divRef.current?.clientWidth]);
return (
<DialogContent ref={divRef}>
<DialogContent>
<DialogHeader>
<DialogTitle>Open Image</DialogTitle>
<DialogDescription>Open your image to load as blocks into the canvas</DialogDescription>
@ -252,7 +250,7 @@ function OpenImage({ close }: DialogProps) {
<Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
<ScrollArea className="h-96">
<ScrollArea className="h-60">
<BlockSelector
stageWidth={stageWidth}
searchInput={searchInput}

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

@ -24,7 +24,7 @@ function BlockSelector({ stageWidth, searchInput, selectedBlocks, setSelectedBlo
const [hoverPosition, setHoverPosition] = useState<Position | null>(null);
const filteredBlocks = useMemo(() => Object.keys(blockData).filter((value) => value.includes(searchInput)), [searchInput, blockData]);
const blocksPerColumn = Math.floor(462 / (32 + 2));
const blocksPerColumn = Math.floor(stageWidth / (32 + 2));
const onClick = (block: string) => {
if (selectedBlocks.includes(block)) {
@ -36,7 +36,7 @@ function BlockSelector({ stageWidth, searchInput, selectedBlocks, setSelectedBlo
return (
<Stage
width={462}
width={stageWidth}
height={Math.ceil(Object.keys(blockData).length / blocksPerColumn) * (32 + 2)}
options={{ backgroundAlpha: 0 }}
onMouseLeave={() => setHoverPosition(null)}