From 938a8e121667ab8bb0e495af6b35d9cb1affdaa7 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Wed, 28 Jul 2021 21:45:53 +0200 Subject: added the ability to change the main highlight color --- pages/_app.tsx | 120 +++++++++++++++++++++++++++++++++++++++----------------- pages/index.tsx | 41 ++++++++++++++----- 2 files changed, 116 insertions(+), 45 deletions(-) (limited to 'pages') 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(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 ( + + + + + + ) +} + +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 ( - - - - ) + const extendedTheme = extendTheme(theme, withDefaultColorScheme({ colorScheme: highlightColor })) + return {children} } 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 + return } -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(null) const [emacsNodeId, setEmacsNodeId] = useState(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, }} /> @@ -194,6 +205,7 @@ export function GraphPage(setEmacsTheme: any) { threeDim, emacsNodeId, filter, + visuals, }} /> @@ -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(null) const graph3dRef = useRef(null) @@ -410,10 +424,15 @@ export const Graph = function (props: GraphProps) { } }, [hoverNode]) const theme = useTheme() + const themeContext = useContext(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) -- cgit v1.2.3