120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import Konva from "konva";
|
|
import { useRef, useEffect, useState } from "react";
|
|
import { Rect, Text, Group } from "react-konva";
|
|
|
|
import useSetting from "../../hooks/useSetting";
|
|
import { TokenState } from "../../types/TokenState";
|
|
|
|
const maxTokenSize = 3;
|
|
const defaultFontSize = 16;
|
|
|
|
type TokenLabelProps = {
|
|
tokenState: TokenState;
|
|
width: number;
|
|
height: number;
|
|
};
|
|
|
|
function TokenLabel({ tokenState, width, height }: TokenLabelProps) {
|
|
const [labelSize] = useSetting<number>("map.labelSize");
|
|
|
|
const paddingY =
|
|
(height / 12 / tokenState.size) * Math.min(tokenState.size, maxTokenSize);
|
|
const paddingX =
|
|
(height / 8 / tokenState.size) * Math.min(tokenState.size, maxTokenSize);
|
|
|
|
const [fontScale, setFontScale] = useState(0);
|
|
useEffect(() => {
|
|
const text = textSizerRef.current;
|
|
|
|
if (!text) {
|
|
return;
|
|
}
|
|
|
|
let fontSizes: number[] = [];
|
|
for (let size = 20 * labelSize; size >= 6; size--) {
|
|
const verticalSize = height / size / tokenState.size;
|
|
const tokenSize = Math.min(tokenState.size, maxTokenSize);
|
|
const fontSize = verticalSize * tokenSize * labelSize;
|
|
fontSizes.push(fontSize);
|
|
}
|
|
|
|
const findFontScale = () => {
|
|
const size = fontSizes.reduce((prev, curr) => {
|
|
text.fontSize(curr);
|
|
const textWidth = text.getTextWidth() + paddingX * 2;
|
|
if (textWidth < width) {
|
|
return curr;
|
|
} else {
|
|
return prev;
|
|
}
|
|
}, 1);
|
|
|
|
setFontScale(size / defaultFontSize);
|
|
};
|
|
|
|
findFontScale();
|
|
}, [
|
|
tokenState.label,
|
|
tokenState.visible,
|
|
width,
|
|
height,
|
|
tokenState,
|
|
labelSize,
|
|
paddingX,
|
|
]);
|
|
|
|
const [rectWidth, setRectWidth] = useState(0);
|
|
const [textWidth, setTextWidth] = useState(0);
|
|
useEffect(() => {
|
|
const text = textRef.current;
|
|
if (text && tokenState.label) {
|
|
setRectWidth(text.getTextWidth() * fontScale + paddingX * 2);
|
|
setTextWidth(text.getTextWidth() * fontScale);
|
|
} else {
|
|
setRectWidth(0);
|
|
setTextWidth(0);
|
|
}
|
|
}, [tokenState.label, paddingX, width, fontScale]);
|
|
|
|
const textRef = useRef<Konva.Text>(null);
|
|
const textSizerRef = useRef<Konva.Text>(null);
|
|
|
|
return (
|
|
<Group y={height - (defaultFontSize * fontScale + paddingY) / 2}>
|
|
<Rect
|
|
y={-paddingY / 2}
|
|
width={rectWidth}
|
|
offsetX={width / 2}
|
|
x={width - rectWidth / 2}
|
|
height={defaultFontSize * fontScale + paddingY}
|
|
fill="hsla(230, 25%, 18%, 0.8)"
|
|
cornerRadius={(defaultFontSize * fontScale + paddingY) / 2}
|
|
/>
|
|
<Group offsetX={(textWidth - width) / 2}>
|
|
<Text
|
|
ref={textRef}
|
|
text={tokenState.label}
|
|
fontSize={defaultFontSize}
|
|
lineHeight={1}
|
|
// Scale font instead of changing font size to avoid kerning issues with Firefox
|
|
scaleX={fontScale}
|
|
scaleY={fontScale}
|
|
fill="white"
|
|
wrap="none"
|
|
ellipsis={false}
|
|
hitFunc={() => {}}
|
|
/>
|
|
</Group>
|
|
{/* Use an invisible text block to work out text sizing */}
|
|
<Text
|
|
visible={false}
|
|
ref={textSizerRef}
|
|
text={tokenState.label}
|
|
wrap="none"
|
|
/>
|
|
</Group>
|
|
);
|
|
}
|
|
|
|
export default TokenLabel;
|