From 8f0bcee9d2a58f4922c10db89adb57dd9962902a Mon Sep 17 00:00:00 2001 From: Oliver Roick <oliver@roick.email> Date: Wed, 24 Jan 2024 16:56:40 +1100 Subject: [PATCH] Return default text color if bgcolor is not set --- src/app/utils.js | 4 ++++ src/features/loupe/BoundingBoxLabel.jsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/utils.js b/src/app/utils.js index bac16834..38bc6017 100644 --- a/src/app/utils.js +++ b/src/app/utils.js @@ -126,6 +126,10 @@ export const inViewportTopHalf = (domElement) => { * returns a text color with high contrast relative to a given background color */ export const getTextColor = (bgColor) => { + if (!bgColor) { + return '$textDark'; + } + const threshold = 0.6 const [red, green, blue] = [0, 2, 4].map((i) => parseInt(bgColor.slice(i + 1, i + 3), 16)); const l = (red * 0.299 + green * 0.587 + blue * 0.114) / 255; diff --git a/src/features/loupe/BoundingBoxLabel.jsx b/src/features/loupe/BoundingBoxLabel.jsx index a976fd04..5c337734 100644 --- a/src/features/loupe/BoundingBoxLabel.jsx +++ b/src/features/loupe/BoundingBoxLabel.jsx @@ -144,7 +144,7 @@ const BoundingBoxLabel = forwardRef(({ handleCategorySelectorBlur={handleCategorySelectorBlur} menuPlacement='bottom' /> - <LabelDisplay css={{ display: catSelectorOpen ? 'none' : 'block', color: getTextColor(displayLabel.color) }}> + <LabelDisplay css={{ display: catSelectorOpen ? 'none' : 'block', color: getTextColor(displayLabel?.color) }}> <Category>{displayLabel?.name || "ERROR FINDING LABEL"}</Category> {!object.locked && <Confidence>{conf}%</Confidence>} </LabelDisplay>