Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated note text sizes to be relative to the note height

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-11-06 16:27:47 +11:00
parent cb2c432d0a
commit 485c418b57
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/note/Note.js
View File

@ -10,7 +10,6 @@ import colors from "../../helpers/colors";
import usePrevious from "../../helpers/usePrevious"; import usePrevious from "../../helpers/usePrevious";
const snappingThreshold = 1 / 5; const snappingThreshold = 1 / 5;
const textPadding = 4;
function Note({ function Note({
note, note,
@ -28,6 +27,7 @@ function Note({
const noteWidth = map && (mapWidth / map.grid.size.x) * note.size; const noteWidth = map && (mapWidth / map.grid.size.x) * note.size;
const noteHeight = map && (mapHeight / map.grid.size.y) * note.size; const noteHeight = map && (mapHeight / map.grid.size.y) * note.size;
const notePadding = noteWidth / 10;
function handleDragStart(event) { function handleDragStart(event) {
onNoteDragStart && onNoteDragStart(event, note.id); onNoteDragStart && onNoteDragStart(event, note.id);
@ -98,15 +98,15 @@ function Note({
} }
function findFontSize() { function findFontSize() {
// Create an array from 4 to 18 scaled to the note size // Create an array from 1 / 10 of the note height to the full note height
const sizes = Array.from( const sizes = Array.from(
{ length: 14 * note.size }, { length: Math.ceil(noteHeight - notePadding * 2) },
(_, i) => i + 4 * note.size (_, i) => i + Math.ceil(noteHeight / 10)
); );
return sizes.reduce((prev, curr) => { return sizes.reduce((prev, curr) => {
text.fontSize(curr); text.fontSize(curr);
const width = text.getTextWidth() + textPadding * 2; const width = text.getTextWidth() + notePadding * 2;
if (width < noteWidth) { if (width < noteWidth) {
return curr; return curr;
} else { } else {
@ -115,7 +115,7 @@ function Note({
}); });
} }
setFontSize(findFontSize()); setFontSize(findFontSize());
}, [note, noteWidth]); }, [note, noteWidth, noteHeight, notePadding]);
const textRef = useRef(); const textRef = useRef();
@ -174,12 +174,11 @@ function Note({
} }
align="center" align="center"
verticalAlign="middle" verticalAlign="middle"
padding={textPadding} padding={notePadding}
fontSize={fontSize} fontSize={fontSize}
wrap="word" wrap="word"
width={noteWidth} width={noteWidth}
height={noteHeight} height={noteHeight}
ellipsis={true}
/> />
{/* Use an invisible text block to work out text sizing */} {/* Use an invisible text block to work out text sizing */}
<Text visible={false} ref={textRef} text={note.text} wrap="none" /> <Text visible={false} ref={textRef} text={note.text} wrap="none" />