Added automatic token label fitting

src/components/token/TokenLabel.js

@@ -8,30 +8,57 @@ const maxTokenSize = 3;
 function TokenLabel({ tokenState, width, height }) {
   const [labelSize] = useSetting("map.labelSize");
 
-  const fontSize =
-    (height / 6 / tokenState.size) *
-    Math.min(tokenState.size, maxTokenSize) *
-    labelSize;
   const paddingY =
-    (height / 16 / tokenState.size) *
+    (height / 12 / tokenState.size) * Math.min(tokenState.size, maxTokenSize);
-    Math.min(tokenState.size, maxTokenSize) *
-    labelSize;
   const paddingX =
-    (height / 8 / tokenState.size) *
+    (height / 8 / tokenState.size) * Math.min(tokenState.size, maxTokenSize);
-    Math.min(tokenState.size, maxTokenSize) *
+
-    labelSize;
+  const [fontSize, setFontSize] = useState(1);
+  useEffect(() => {
+    const text = textSizerRef.current;
+
+    if (!text) {
+      return;
+    }
+
+    let fontSizes = [];
+    for (let size = 10 * labelSize; size >= 6; size--) {
+      fontSizes.push(
+        (height / size / tokenState.size) *
+          Math.min(tokenState.size, maxTokenSize) *
+          labelSize
+      );
+    }
+
+    function findFontSize() {
+      const size = fontSizes.reduce((prev, curr) => {
+        text.fontSize(curr);
+        const textWidth = text.getTextWidth() + paddingX * 2;
+        if (textWidth < width) {
+          return curr;
+        } else {
+          return prev;
+        }
+      });
+
+      setFontSize(size);
+    }
+
+    findFontSize();
+  }, [width, height, tokenState, labelSize, paddingX]);
 
   const [rectWidth, setRectWidth] = useState(0);
   useEffect(() => {
     const text = textRef.current;
     if (text && tokenState.label) {
-      setRectWidth(text.getTextWidth() + paddingX);
+      setRectWidth(text.getTextWidth() + paddingX * 2);
     } else {
       setRectWidth(0);
     }
-  }, [tokenState.label, paddingX, width]);
+  }, [tokenState.label, paddingX, width, fontSize]);
 
   const textRef = useRef();
+  const textSizerRef = useRef();
 
   return (
     <Group y={height - (fontSize + paddingY) / 2}>
@@ -56,9 +83,16 @@ function TokenLabel({ tokenState, width, height }) {
         paddingX={paddingX}
         paddingY={paddingY}
         wrap="none"
-        ellipsis={true}
+        ellipsis={false}
         hitFunc={() => {}}
       />
+      {/* Use an invisible text block to work out text sizing */}
+      <Text
+        visible={false}
+        ref={textSizerRef}
+        text={tokenState.label}
+        wrap="none"
+      />
     </Group>
   );
 }