trafficlunar/blockmatic
1
0
Fork 0
mirror of https://github.com/trafficlunar/blockmatic.git synced 2026-06-28 06:34:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: center canvas on image open

Browse source
This commit is contained in:
trafficlunar 2025-01-25 23:15:32 +00:00
parent e82a0ef158
commit e22d51947a
2 changed files with 39 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,7 +24,7 @@ import VersionCombobox from "../VersionCombobox";
import { findBlockFromRgb } from "@/utils/findBlockFromRgb";
function OpenImage({ close }: DialogProps) {
const { version, setVersion, setBlocks } = useContext(CanvasContext);
const { version, setBlocks, setVersion, centerCanvas } = useContext(CanvasContext);
const { setLoading } = useContext(LoadingContext);
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
@ -52,6 +52,8 @@ function OpenImage({ close }: DialogProps) {
falling: false,
});
const [isFinished, setIsFinished] = useState(false);
useEffect(() => {
if (acceptedFiles[0]) {
const img = new Image();
@ -96,6 +98,7 @@ function OpenImage({ close }: DialogProps) {
const onSubmit = async () => {
if (image) {
setIsFinished(false);
setLoading(true);
// Wait for loading indicator to appear
await new Promise((resolve) => setTimeout(resolve, 100));
@ -131,10 +134,18 @@ function OpenImage({ close }: DialogProps) {
}
setLoading(false);
close();
setIsFinished(true);
}
};
useEffect(() => {
if (!isFinished) return;
centerCanvas();
close();
return () => setIsFinished(false);
}, [isFinished, centerCanvas, close]);
useEffect(() => {
Object.keys(blockTypeCheckboxesChecked).forEach((property) => {
const blocksWithProperty = Object.entries(blockData)