From 1f09a6e26286ea04d7e27b2704da4b4ba8dd521c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Tue, 16 Apr 2024 15:37:20 +0100 Subject: [PATCH] stickies: a bit of fuzziness when calculating certain text (#3493) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes https://linear.app/tldraw/issue/TLD-2402/long-words-in-stickies-sometimes-wrap-before-the-font-size-shrinks https://github.com/tldraw/tldraw/assets/15892272/0b6f6d3c-d21d-430b-97d0-7c9b5abefa0b ### Change Type - [x] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff - [x] `bugfix` — Bug fix - [ ] `feature` — New feature - [ ] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know --- packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx index f9df09cfd..4a0e1144f 100644 --- a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx @@ -315,6 +315,12 @@ function getNoteLabelSize(editor: Editor, shape: TLNoteShape) { let labelHeight = NOTE_SIZE let labelWidth = NOTE_SIZE + // N.B. For some note shapes with text like 'hjhjhjhjhjhjhjhj', you'll run into + // some text measurement fuzziness where the browser swears there's no overflow (scrollWidth === width) + // but really there is when you enable overflow-wrap again. This helps account for that little bit + // of give. + const FUZZ = 1 + // We slightly make the font smaller if the text is too big for the note, width-wise. do { fontSizeAdjustment = Math.min(unadjustedFontSize, unadjustedFontSize - iterations) @@ -322,7 +328,7 @@ function getNoteLabelSize(editor: Editor, shape: TLNoteShape) { ...TEXT_PROPS, fontFamily: FONT_FAMILIES[shape.props.font], fontSize: fontSizeAdjustment, - maxWidth: NOTE_SIZE - LABEL_PADDING * 2, + maxWidth: NOTE_SIZE - LABEL_PADDING * 2 - FUZZ, disableOverflowWrapBreaking: true, }) @@ -336,7 +342,7 @@ function getNoteLabelSize(editor: Editor, shape: TLNoteShape) { ...TEXT_PROPS, fontFamily: FONT_FAMILIES[shape.props.font], fontSize: fontSizeAdjustment, - maxWidth: NOTE_SIZE - LABEL_PADDING * 2, + maxWidth: NOTE_SIZE - LABEL_PADDING * 2 - FUZZ, }) labelHeight = nextTextSizeWithOverflowBreak.h + LABEL_PADDING * 2 labelWidth = nextTextSizeWithOverflowBreak.w + LABEL_PADDING * 2