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(() => { useEffect(() => {
if (!divRef.current) return; if (!divRef.current) return;
setStageWidth(divRef.current.clientWidth); setStageWidth(divRef.current.clientWidth);
}, [divRef.current?.clientWidth]);
console.log(stageWidth);
}, []);
return ( return (
<DialogContent ref={divRef}> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Open Image</DialogTitle> <DialogTitle>Open Image</DialogTitle>
<DialogDescription>Open your image to load as blocks into the canvas</DialogDescription> <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)} /> <Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
<ScrollArea className="h-96"> <ScrollArea className="h-60">
<BlockSelector <BlockSelector
stageWidth={stageWidth} stageWidth={stageWidth}
searchInput={searchInput} 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 [hoverPosition, setHoverPosition] = useState<Position | null>(null);
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(462 / (32 + 2)); const blocksPerColumn = Math.floor(stageWidth / (32 + 2));
const onClick = (block: string) => { const onClick = (block: string) => {
if (selectedBlocks.includes(block)) { if (selectedBlocks.includes(block)) {
@ -36,7 +36,7 @@ function BlockSelector({ stageWidth, searchInput, selectedBlocks, setSelectedBlo
return ( return (
<Stage <Stage
width={462} 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 }}
onMouseLeave={() => setHoverPosition(null)} onMouseLeave={() => setHoverPosition(null)}