diff --git a/src/components/token/TokenLabel.js b/src/components/token/TokenLabel.js index bc107fe..19eaa88 100644 --- a/src/components/token/TokenLabel.js +++ b/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) * - Math.min(tokenState.size, maxTokenSize) * - labelSize; + (height / 12 / tokenState.size) * Math.min(tokenState.size, maxTokenSize); const paddingX = - (height / 8 / tokenState.size) * - Math.min(tokenState.size, maxTokenSize) * - labelSize; + (height / 8 / tokenState.size) * Math.min(tokenState.size, maxTokenSize); + + 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 ( @@ -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 */} + ); }