added the ability to change the main highlight color

2 files changed, 116 insertions, 45 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 410b333..c2edb69 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,9 +1,12 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
-import { ChakraProvider, extendTheme } from '@chakra-ui/react'
-import { useEffect, useState, useMemo } from 'react'
+import { ChakraProvider, extendTheme, withDefaultColorScheme } from '@chakra-ui/react'
+import { useEffect, useState, useMemo, useContext, useReducer } from 'react'
 import * as d3int from 'd3-interpolate'
 
+import { ThemeContext } from './themecontext'
+import { usePersistantState } from '../util/persistant-state'
+
 function MyApp({ Component, pageProps }: AppProps) {
   const initialTheme = {
     base1: '#1c1f24',
@@ -31,30 +34,81 @@ function MyApp({ Component, pageProps }: AppProps) {
     violet: '#a991f1',
     yellow: '#FCCE7B',
   }
-  const [emacsTheme, setEmacsTheme] = useState<typeof initialTheme>(initialTheme)
-  /* useEffect(() => {
-   *   const trackTheme = new EventSource('http://127.0.0.1:35901/theme')
-   *   trackTheme.addEventListener('message', (e) => {
-   *     const themeData = JSON.parse(e.data)
-   *     console.log("aa")
-   *     if (!themeData.base4) {
-   *       const bgfgInterpolate = d3int.interpolate(emacsTheme.bg, emacsTheme.fg)
-   *       themeData.base1 = bgfgInterpolate(0.1)
-   *       themeData.base2 = bgfgInterpolate(0.2)
-   *       themeData.base3 = bgfgInterpolate(0.3)
-   *       themeData.base4 = bgfgInterpolate(0.4)
-   *       themeData.base5 = bgfgInterpolate(0.5)
-   *       themeData.base6 = bgfgInterpolate(0.6)
-   *       themeData.base7 = bgfgInterpolate(0.7)
-   *       themeData.base8 = bgfgInterpolate(0.8)
-   *       console.log('o  o')
-   *     }
-   *     emacsTheme.bg !== themeData.bg && setEmacsTheme(themeData)
-   *   })
-   * }, [])
-   */
-  const borderColor = emacsTheme.violet + 'aa'
+  const [isInitialized, setIsInitialized] = useState(false)
+
+  const [emacsTheme, setEmacsTheme] = useState(initialTheme)
+  const [highlightColor, setHighlightColor] = useState('purple')
+
+  useEffect(() => {
+    if (isInitialized) {
+      localStorage.setItem('theme', JSON.stringify(emacsTheme))
+    }
+  }, [emacsTheme])
+
+  useEffect(() => {
+    if (isInitialized) {
+      localStorage.setItem('highlightColor', JSON.stringify(highlightColor))
+    }
+  }, [highlightColor])
+
+  useEffect(() => {
+    setEmacsTheme(
+      JSON.parse(localStorage.getItem('theme') ?? JSON.stringify(initialTheme)) ?? initialTheme,
+    )
+    setHighlightColor(
+      JSON.parse(localStorage.getItem('highlightColor') ?? JSON.stringify(highlightColor)) ??
+        highlightColor,
+    )
+    setIsInitialized(true)
+  }, [])
+
+  const themeObject = {
+    emacsTheme: emacsTheme,
+    setEmacsTheme: setEmacsTheme,
+    highlightColor: highlightColor,
+    setHighlightColor: setHighlightColor,
+  }
+  return (
+    <ThemeContext.Provider value={themeObject as typeof themeObject}>
+      <SubApp>
+        <Component {...pageProps} />
+      </SubApp>
+    </ThemeContext.Provider>
+  )
+}
+
+function SubApp(props: any) {
+  const { children } = props
+  const { highlightColor, emacsTheme } = useContext(ThemeContext)
+  // yeah it's annoying, should put this someplace more sensible
+  const getBorderColor = () => {
+    if (highlightColor === 'purple') {
+      return emacsTheme.violet + 'aa'
+    }
+    if (highlightColor === 'pink') {
+      return emacsTheme.magenta + 'aa'
+    }
+    if (highlightColor === 'blue') {
+      return emacsTheme.blue + 'aa'
+    }
+    if (highlightColor === 'cyan') {
+      return emacsTheme.cyan + 'aa'
+    }
+    if (highlightColor === 'green') {
+      return emacsTheme.green + 'aa'
+    }
+    if (highlightColor === 'yellow') {
+      return emacsTheme.yellow + 'aa'
+    }
+    if (highlightColor === 'orange') {
+      return emacsTheme.orange + 'aa'
+    }
+    if (highlightColor === 'red') {
+      return emacsTheme.red + 'aa'
+    }
+  }
   const missingColor = d3int.interpolate(emacsTheme.base1, emacsTheme.base2)(0.2)
+  const borderColor = getBorderColor()
   const theme = useMemo(() => {
     console.log('ii')
     return {
@@ -112,23 +166,19 @@ function MyApp({ Component, pageProps }: AppProps) {
           variants: {
             outline: {
               border: '2px solid',
-              borderColor: 'purple.500',
-              color: 'purple.500',
+              borderColor: highlightColor + '.500',
+              color: highlightColor + '.500',
             },
             ghost: {
-              color: 'purple.500',
+              color: highlightColor + '.500',
             },
           },
         },
       },
     }
-  }, [JSON.stringify(emacsTheme)])
+  }, [highlightColor, JSON.stringify(emacsTheme)])
 
-  const extendedTheme = extendTheme(theme)
-  return (
-    <ChakraProvider theme={extendedTheme}>
-      <Component {...pageProps} setEmacsTheme={setEmacsTheme} />
-    </ChakraProvider>
-  )
+  const extendedTheme = extendTheme(theme, withDefaultColorScheme({ colorScheme: highlightColor }))
+  return <ChakraProvider theme={extendedTheme}>{children}</ChakraProvider>
 }
 export default MyApp
diff --git a/pages/index.tsx b/pages/index.tsx
index e330b91..6add88e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,11 @@
-import React, { ComponentPropsWithoutRef, useEffect, useRef, useState, useMemo } from 'react'
+import React, {
+  ComponentPropsWithoutRef,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useContext,
+} from 'react'
 import { usePersistantState } from '../util/persistant-state'
 const d3promise = import('d3-force-3d')
 import * as d3int from 'd3-interpolate'
@@ -15,9 +22,10 @@ import { useAnimation } from '@lilib/hooks'
 
 import { Box, useTheme } from '@chakra-ui/react'
 
-import { initialPhysics, initialFilter } from '../components/config'
+import { initialPhysics, initialFilter, initialVisuals } from '../components/config'
 import { Tweaks } from '../components/tweaks'
 
+import { ThemeContext, ThemeContextProps } from './themecontext'
 // react-force-graph fails on import when server-rendered
 // https://github.com/vasturiano/react-force-graph/issues/155
 const ForceGraph2D = (
@@ -35,7 +43,7 @@ export type Scope = {
   nodeIds: string[]
 }
 
-export default function Home(setEmacsTheme: any) {
+export default function Home() {
   // only render on the client
   const [showPage, setShowPage] = useState(false)
   useEffect(() => {
@@ -46,12 +54,13 @@ export default function Home(setEmacsTheme: any) {
     return null
   }
 
-  return <GraphPage setEmacsTheme={setEmacsTheme} />
+  return <GraphPage />
 }
 
-export function GraphPage(setEmacsTheme: any) {
+export function GraphPage() {
   const [physics, setPhysics] = usePersistantState('physics', initialPhysics)
   const [filter, setFilter] = usePersistantState('filter', initialFilter)
+  const [visuals, setVisuals] = usePersistantState('visuals', initialVisuals)
   const [graphData, setGraphData] = useState<GraphData | null>(null)
   const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null)
 
@@ -114,7 +123,7 @@ export function GraphPage(setEmacsTheme: any) {
     const orgRoamGraphDataClone = JSON.parse(JSON.stringify(orgRoamGraphDataWithFileLinks))
     setGraphData(orgRoamGraphDataClone)
   }
-
+  const { setEmacsTheme } = useContext(ThemeContext)
   useEffect(() => {
     const socket = new WebSocket('ws://localhost:35903')
     socket.addEventListener('open', (e) => {
@@ -132,7 +141,7 @@ export function GraphPage(setEmacsTheme: any) {
           console.log('Received theme data')
           console.log(message.data)
           console.log(setEmacsTheme)
-          setEmacsTheme.setEmacsTheme.setEmacsTheme(message.data)
+          setEmacsTheme(message.data)
           break
         case 'command':
           console.log('command')
@@ -182,6 +191,8 @@ export function GraphPage(setEmacsTheme: any) {
           setThreeDim,
           filter,
           setFilter,
+          visuals,
+          setVisuals,
         }}
       />
       <Box position="absolute" alignItems="top">
@@ -194,6 +205,7 @@ export function GraphPage(setEmacsTheme: any) {
             threeDim,
             emacsNodeId,
             filter,
+            visuals,
           }}
         />
       </Box>
@@ -209,10 +221,12 @@ export interface GraphProps {
   threeDim: boolean
   filter: typeof initialFilter
   emacsNodeId: string | null
+  visuals: typeof initialVisuals
 }
 
 export const Graph = function (props: GraphProps) {
-  const { physics, graphData, threeDim, linksByNodeId, filter, emacsNodeId, nodeById } = props
+  const { physics, graphData, threeDim, linksByNodeId, filter, emacsNodeId, nodeById, visuals } =
+    props
 
   const graph2dRef = useRef<any>(null)
   const graph3dRef = useRef<any>(null)
@@ -410,10 +424,15 @@ export const Graph = function (props: GraphProps) {
     }
   }, [hoverNode])
   const theme = useTheme()
+  const themeContext = useContext<ThemeContextProps>(ThemeContext)
   const interPurple = useMemo(
     () => d3int.interpolate(theme.colors.gray[500], theme.colors.purple[500]),
     [theme],
   )
+  const interHighlight = useMemo(
+    () => d3int.interpolate(theme.colors.gray[500], theme.colors[themeContext.highlightColor][500]),
+    [theme, visuals.highlightColor],
+  )
   const interGray = useMemo(
     () => d3int.interpolate(theme.colors.gray[500], theme.colors.gray[400]),
     [theme],
@@ -446,7 +465,7 @@ export const Graph = function (props: GraphProps) {
     nodeColor: (node) => {
       if (!physics.colorful) {
         return previouslyHighlightedNodes[node.id!] || highlightedNodes[node.id!]
-          ? interPurple(opacity)
+          ? interHighlight(opacity)
           : interGray(opacity)
       }
       if (node.id === emacsNodeId) {
@@ -554,7 +573,9 @@ export const Graph = function (props: GraphProps) {
     linkColor: (link) => {
       const linkIsHighlighted = isLinkRelatedToNode(link, centralHighlightedNode)
       const linkWasHighlighted = isLinkRelatedToNode(link, lastHoverNode.current)
-      return linkIsHighlighted || linkWasHighlighted ? interPurple(opacity) : theme.colors.gray[500]
+      return linkIsHighlighted || linkWasHighlighted
+        ? interHighlight(opacity)
+        : theme.colors.gray[500]
     },
     linkWidth: (link) => {
       const linkIsHighlighted = isLinkRelatedToNode(link, centralHighlightedNode)