Fix minimal board size behavior

jrmi · Feb 14, 2022 · f339f1f · f339f1f
1 parent f37a85c
commit f339f1f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git 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 = ({
               >
                 <ItemList itemTemplates={itemTemplates} />
               </div>
+              <div
+                style={{
+                  ...itemExtent,
+                  border: "3px solid red",
+                  position: "absolute",
+                }}
+              />
             </CursorPane>
           </ActionPane>
         </Selector>

diff --git 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,