Merge pull request #130 from ujiro99/feature/apca-tag

Feature/apca tag
ujiro99 · Aug 12, 2023 · d7d4b6d · d7d4b6d
2 parents b05cc81 + 3bd752e
commit d7d4b6d
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,9 +22,11 @@
     "@dnd-kit/utilities": "^3.2.1",
     "@google-cloud/local-auth": "^2.1.0",
     "@popperjs/core": "^2.11.6",
+    "apca-w3": "^0.1.9",
     "chart.js": "^3.9.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "classnames": "^2.3.2",
+    "colorparsley": "^0.1.8",
     "d3-color": "^3.1.0",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",

diff --git a/src/components/Debug.tsx b/src/components/Debug.tsx
@@ -64,20 +64,23 @@ export function Debug(): JSX.Element {
   }
 
   return (
-    <>
-      <pre className="debug">
-        <code>{nodeToText(root)}</code>
-      </pre>
-      <pre className="debug">
-        <code>{trackingsToText(trackings)}</code>
-      </pre>
-      <pre className="debug">
-        <code>{calendarToText(sCalendar)}</code>
-      </pre>
-      <pre className="debug">
-        <code>alarms</code> <br />
-        <code>{JSON.stringify(sAlarms, null, 2)}</code>
-      </pre>
-    </>
+    <details className="debug">
+      <summary>Debug</summary>
+      <section className="debug__content">
+        <pre className="debug__label">
+          <code>{nodeToText(root)}</code>
+        </pre>
+        <pre className="debug__label">
+          <code>{trackingsToText(trackings)}</code>
+        </pre>
+        <pre className="debug__label">
+          <code>{calendarToText(sCalendar)}</code>
+        </pre>
+        <pre className="debug__label">
+          <code>alarms</code> <br />
+          <code>{JSON.stringify(sAlarms, null, 2)}</code>
+        </pre>
+      </section>
+    </details>
   )
 }
diff --git a/src/components/Popup.css b/src/components/Popup.css
@@ -66,10 +66,28 @@ body {
 }
 
 .debug {
-  font-size: 12px;
-  line-height: 1;
-  background: #f0f0f0;
-  padding: 1em;
-  margin-bottom: 4px;
-  border-radius: 4px;
+  & summary {
+    cursor: pointer;
+    transition: background 0.4s ease-out;
+    padding: 0.4em;
+    border-radius: 4px;
+    margin-bottom: 4px;
+
+    &:hover {
+      background: #f0f0f0;
+    }
+  }
+
+  &__label {
+    font-size: 12px;
+    line-height: 1;
+    background: #f0f0f0;
+    padding: 1em;
+    margin-bottom: 4px;
+    border-radius: 4px;
+  }
+
+  &__content {
+    padding: 0 1em;
+  }
 }
diff --git a/src/components/Tag/TagButton.tsx b/src/components/Tag/TagButton.tsx
@@ -1,56 +1,17 @@
 import React, { useState, useEffect, useRef, CSSProperties } from 'react'
 import classnames from 'classnames'
+import { calcAPCA, reverseAPCA, sRGBtoY } from 'apca-w3'
+import { colorParsley } from 'colorparsley'
+
 import { Tag } from '@/models/tag'
 import { useTagHistory } from '@/hooks/useTagHistory'
 import { tag2str, eventStop, rand } from '@/services/util'
 import { useContextMenu } from '@/lib/react-contexify'
 import { TagContextMenu } from '@/components/Tag/TagContextMenu'
+import { COLOR } from '@/const'
 
 import './TagButton.css'
 
-const Gray50 = '#f9fafb'
-const Gray200 = '#e2e8f0'
-const Gray700 = '#334155'
-
-type Hsv = {
-  h: number
-  s: number
-  v: number
-}
-
-function hex2hsv(hex: string): Hsv {
-  if (hex[0] === '#') {
-    hex = hex.slice(1)
-  }
-  const num = parseInt(hex, 16)
-  const r = (num >> 16) / 255
-  const b = ((num >> 8) & 0x00ff) / 255
-  const g = (num & 0x0000ff) / 255
-
-  const max = Math.max(r, g, b)
-  const min = Math.min(r, g, b)
-  const diff = max - min
-
-  let h = 0
-
-  switch (min) {
-    case max:
-      h = 0
-      break
-    case r:
-      h = 60 * ((b - g) / diff) + 180
-      break
-    case g:
-      h = 60 * ((r - b) / diff) + 300
-      break
-    case b:
-      h = 60 * ((g - r) / diff) + 60
-      break
-  }
-
-  return { h, s: max === 0 ? 0 : diff / max, v: max }
-}
-
 function hex2rgb(hex: string): string {
   if (hex.slice(0, 1) === '#') hex = hex.slice(1)
   if (hex.length === 3)
@@ -67,9 +28,24 @@ function hex2rgb(hex: string): string {
     .join(',')
 }
 
-const calcLabelColor = (rgb: string): string => {
-  const hsv = hex2hsv(rgb)
-  return hsv.s < 0.4 && hsv.v > 0.6 ? Gray700 : Gray50
+const calcApcaFg = (lc: number, bgColor: string): string => {
+  const knownY = sRGBtoY(colorParsley(bgColor))
+  let fgColor = reverseAPCA(lc, knownY, 'bg', 'hex') // dark color
+  if (!fgColor) {
+    fgColor = reverseAPCA(lc * -1, knownY, 'bg', 'hex') // light color
+  }
+  return fgColor
+}
+
+const calcLabelColor = (bgColor: string): string => {
+  let col = calcApcaFg(90, bgColor)
+  if (col) {
+    return col
+  } else {
+    let lcb = Math.abs(calcAPCA(COLOR.Black, bgColor))
+    let lcw = Math.abs(calcAPCA(COLOR.White, bgColor))
+    return lcb > lcw + 5 ? COLOR.Black : COLOR.White
+  }
 }
 
 type TagButtonProps = {
@@ -86,15 +62,15 @@ export const TagButton = (props: TagButtonProps): JSX.Element => {
   const tag = props.tag
   const { tags } = useTagHistory()
   const tagRecord = tags.find((t) => t.name === tag.name)
-  const initialBg = tagRecord?.colorHex || Gray200
+  const initialBg = tagRecord?.colorHex || COLOR.Gray200
   const [bgColor, setBgColor] = useState(initialBg)
-  const [labelColor, setLabelColor] = useState(calcLabelColor(initialBg))
+  const [fbColor, setFbColor] = useState(calcLabelColor(initialBg))
 
   const MENU_ID = MENU_ID_PREFIX + tag.name + rand()
   const { show } = useContextMenu({ id: MENU_ID })
   const pickerRef = props.pickerRef ?? useRef<Element>(null)
-  
-  function openContextMenu(event) {
+
+  function openContextMenu(event: React.MouseEvent) {
     show({ event })
     eventStop(event)
   }
@@ -103,7 +79,7 @@ export const TagButton = (props: TagButtonProps): JSX.Element => {
     const tagRecord = tags.find((t) => t.name === tag.name)
     if (tagRecord) {
       setBgColor(tagRecord.colorHex)
-      setLabelColor(calcLabelColor(tagRecord.colorHex))
+      setFbColor(calcLabelColor(tagRecord.colorHex))
     }
   }, [tags])
 
@@ -122,7 +98,7 @@ export const TagButton = (props: TagButtonProps): JSX.Element => {
         onContextMenu={openContextMenu}
         ref={pickerRef as React.LegacyRef<HTMLButtonElement>}
       >
-        <span style={{ color: labelColor }}>{tag2str(tag)}</span>
+        <span style={{ color: fbColor }}>{tag2str(tag)}</span>
       </button>
 
       {/* context menu */}

diff --git a/src/const.ts b/src/const.ts
@@ -8,6 +8,8 @@ export const KEYCODE_ENTER = 13
 
 export const COLOR = {
   Gray200: '#e2e8f0',
+  White: '#ffffff',
+  Black: '#000000',
 }
 
 // for oAuth