feat(plugin): support enhanceColor

koishijs · May 25, 2023 · d9c8883 · d9c8883
1 parent 683cef9
commit d9c8883
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 55 deletions.
diff --git a/packages/plugin/clients/enhance/client/index.ts b/packages/plugin/clients/enhance/client/index.ts
@@ -1,4 +1,5 @@
 import { Context } from '@koishijs/client'
+import * as colorString from 'color-string'
 
 declare global {
   interface Window {
@@ -25,6 +26,24 @@ declare global {
 
 const styleSheetId = 'koishell-enhance-stylesheet'
 
+const baseCSS = `
+input,
+textarea {
+  -webkit-touch-callout: auto !important;
+  user-select: auto !important;
+  -webkit-user-select: auto !important;
+  cursor: auto !important;
+}
+
+*:not(input, textarea, .monaco-mouse-cursor-text, .monaco-mouse-cursor-text *) {
+  -webkit-touch-callout: none !important;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  cursor: default !important;
+}
+
+`
+
 const enhanceCSS = `
 body,
 nav.layout-activity {
@@ -41,38 +60,35 @@ nav.layout-activity {
   border: 0 !important;
 }
 
-input,
-textarea {
-  -webkit-touch-callout: auto !important;
-  user-select: auto !important;
-  -webkit-user-select: auto !important;
-  cursor: auto !important;
-}
+`
 
-*:not(input, textarea, .monaco-mouse-cursor-text, .monaco-mouse-cursor-text *) {
-  -webkit-touch-callout: none !important;
-  user-select: none !important;
-  -webkit-user-select: none !important;
-  cursor: default !important;
+const enhanceColorCSS = `
+.layout-activity,
+.layout-container {
+  border-top: var(--k-color-divider-dark) 1px solid;
 }
+
 `
 
-const shellThemeMap = {
-  light: 'TL',
-  dark: 'TD',
-  reset: 'TR',
-} as const
+let themeObserver: MutationObserver
+let styleSheet: HTMLStyleElement
+
+const getComputedColorHex = (s: string) => {
+  const r = colorString.get(
+    window.getComputedStyle(window.document.documentElement).getPropertyValue(s)
+  )
+  if (!r || !r.value) return '000000'
+  return colorString.to.hex(r.value).slice(1, 7)
+}
 
-const sendTheme = (theme: keyof typeof shellThemeMap) => {
+const send = (message: string) => {
   switch (window.__KOI_SHELL__?.agent) {
     case 'shellwin':
-      window.chrome?.webview?.postMessage?.(shellThemeMap[theme])
+      window.chrome?.webview?.postMessage?.(message)
       return
 
     case 'shellmac':
-      window.webkit?.messageHandlers?.shellmacHandler?.postMessage?.(
-        shellThemeMap[theme]
-      )
+      window.webkit?.messageHandlers?.shellmacHandler?.postMessage?.(message)
       return
 
     case 'shelllinux':
@@ -83,7 +99,50 @@ const sendTheme = (theme: keyof typeof shellThemeMap) => {
   }
 }
 
-let themeObserver: MutationObserver
+const syncStyleSheet = () => {
+  if (!styleSheet) return
+
+  // TODO: Get config
+  switch ('enhanceColor' as 'enhanceColor' | 'enhance') {
+    case 'enhanceColor':
+      styleSheet.innerHTML = baseCSS + enhanceColorCSS
+      break
+    case 'enhance':
+      styleSheet.innerHTML = baseCSS + enhanceCSS
+      break
+  }
+}
+
+const syncTheme = () => {
+  // TODO: Get config
+  switch ('enhanceColor' as 'enhanceColor' | 'enhance') {
+    case 'enhanceColor':
+      send(
+        `T${
+          window.document.documentElement.classList.contains('dark') ? 'D' : 'L'
+        }C${getComputedColorHex('--k-color-border')}${getComputedColorHex(
+          '--bg1'
+        )}${getComputedColorHex('--fg1')}`
+      )
+      break
+    case 'enhance':
+      send(
+        window.document.documentElement.classList.contains('dark') ? 'TD' : 'TL'
+      )
+      break
+  }
+}
+
+const resetTheme = () => send('TR')
+
+const sync = () => {
+  syncStyleSheet()
+  syncTheme()
+}
+
+const reset = () => {
+  resetTheme()
+}
 
 const supportsEnhance = () =>
   Array.isArray(window.__KOI_SHELL__?.supports) &&
@@ -92,51 +151,33 @@ const supportsEnhance = () =>
 const enhance = () => {
   if (!supportsEnhance()) return
 
-  sendTheme(
-    window.document.documentElement.classList.contains('dark')
-      ? 'dark'
-      : 'light'
-  )
-
-  themeObserver = new MutationObserver((mutations) => {
-    for (const mutation of mutations) {
-      if (mutation.attributeName === 'class')
-        sendTheme(
-          (mutation.target as HTMLElement).classList.contains('dark')
-            ? 'dark'
-            : 'light'
-        )
-    }
-  })
-  themeObserver.observe(window.document.documentElement, { attributes: true })
-
-  let styleSheet = window.document.getElementById(
-    styleSheetId
-  ) as HTMLStyleElement
   if (!styleSheet) {
+    styleSheet = window.document.getElementById(
+      styleSheetId
+    ) as HTMLStyleElement
     styleSheet = document.createElement('style')
     styleSheet.id = styleSheetId
-    styleSheet.innerHTML = enhanceCSS
     document.head.appendChild(styleSheet)
   }
+
+  if (!themeObserver) {
+    themeObserver = new MutationObserver(sync)
+    themeObserver.observe(window.document.documentElement, { attributes: true })
+  }
+
+  sync()
 }
 
 const disposeEnhance = () => {
   if (!supportsEnhance()) return
 
-  sendTheme('reset')
-
-  themeObserver.disconnect()
-
-  const styleSheet = window.document.getElementById(styleSheetId)
   if (styleSheet) window.document.head.removeChild(styleSheet)
+  if (themeObserver) themeObserver.disconnect()
+
+  reset()
 }
 
 export default (ctx: Context) => {
   enhance()
-  const timer = setInterval(enhance, 4000)
-  ctx.on('dispose', () => {
-    clearInterval(timer)
-    disposeEnhance()
-  })
+  ctx.on('dispose', disposeEnhance)
 }
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -32,6 +32,12 @@
     "@koishijs/plugin-console": "^5",
     "koishi": "^4.10.3"
   },
+  "devDependencies": {
+    "@koishijs/plugin-console": "^5",
+    "@types/color-string": "^1.5.2",
+    "color-string": "^1.9.1",
+    "koishi": "^4.10.3"
+  },
   "koishi": {
     "description": {
       "en": "Koishi Desktop support",