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,