diff --git a/src/board/Board.jsx b/src/board/Board.jsx index 795dd66..8c61a3a 100644 --- a/src/board/Board.jsx +++ b/src/board/Board.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { useSetRecoilState } from "recoil"; +import { useRecoilValue, useSetRecoilState } from "recoil"; import { ItemList, SubscribeItemEvents } from "./Items"; import Selector from "./Selector"; @@ -19,6 +19,7 @@ export const Board = ({ }) => { const setConfiguration = useSetRecoilState(ConfigurationAtom); const { updateItemExtent } = useDim(); + const { itemExtent } = useRecoilValue(ConfigurationAtom); const boardStyle = React.useMemo( () => ({ @@ -41,6 +42,7 @@ export const Board = ({ React.useEffect(() => { updateItemExtent(); + setTimeout(updateItemExtent, 2000); }, [updateItemExtent]); return ( @@ -59,6 +61,13 @@ export const Board = ({ > +
diff --git a/src/board/useDim.js b/src/board/useDim.js index 8fd6dbe..b9943e8 100644 --- a/src/board/useDim.js +++ b/src/board/useDim.js @@ -7,6 +7,7 @@ import { getItemBoundingBox } from "../utils"; import { BoardTransformAtom, ConfigurationAtom } from "./atoms"; const TOLERANCE = 100; +const MIN_SIZE = 1000; const translateBoundaries = ({ x, @@ -43,7 +44,6 @@ const useDim = () => { const setDim = useSetRecoilState(BoardTransformAtom); const scaleBoundariesRef = React.useRef([0.1, 8]); const { itemExtent: itemExtentGlobal } = useRecoilValue(ConfigurationAtom); - const setDimSafe = useRecoilCallback( ({ snapshot }) => async (fn) => { @@ -214,25 +214,20 @@ const useDim = () => { relativeExtent.right = relativeExtent.left + relativeExtent.width; relativeExtent.bottom = relativeExtent.top + relativeExtent.height; - // Correct if not minimal - if (relativeExtent.left > boardSize / 2 - 500) { - relativeExtent.left = boardSize / 2 - 500; - } - - if (relativeExtent.top > boardSize / 2 - 500) { - relativeExtent.top = boardSize / 2 - 500; + // Resize to have a minimal size + if (relativeExtent.width < MIN_SIZE) { + const delta = (MIN_SIZE - relativeExtent.width) / 2; + relativeExtent.left -= delta; + relativeExtent.right += delta; + relativeExtent.width = MIN_SIZE; } - if (relativeExtent.right < boardSize / 2 + 500) { - relativeExtent.right = boardSize / 2 + 500; + if (relativeExtent.height < MIN_SIZE) { + const delta = (MIN_SIZE - relativeExtent.height) / 2; + relativeExtent.top -= delta; + relativeExtent.bottom += delta; + relativeExtent.height = MIN_SIZE; } - if (relativeExtent.bottom < boardSize / 2 + 500) { - relativeExtent.bottom = boardSize / 2 + 500; - } - - relativeExtent.width = relativeExtent.right - relativeExtent.left; - relativeExtent.height = relativeExtent.bottom - relativeExtent.top; - set(ConfigurationAtom, (prev) => ({ ...prev, itemExtent: relativeExtent,