diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.tsx | 43 | ||||
| -rw-r--r-- | pages/index.tsx | 34 |
2 files changed, 41 insertions, 36 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index aa0e428..410b333 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -32,28 +32,31 @@ function MyApp({ Component, pageProps }: AppProps) { 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) - 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) - } - setEmacsTheme(themeData) - }) - }, []) - + /* 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 missingColor = d3int.interpolate(emacsTheme.base1, emacsTheme.base2)(0.2) const theme = useMemo(() => { + console.log('ii') return { colors: { white: emacsTheme.bg, @@ -124,7 +127,7 @@ function MyApp({ Component, pageProps }: AppProps) { const extendedTheme = extendTheme(theme) return ( <ChakraProvider theme={extendedTheme}> - <Component {...pageProps} /> + <Component {...pageProps} setEmacsTheme={setEmacsTheme} /> </ChakraProvider> ) } diff --git a/pages/index.tsx b/pages/index.tsx index 00e87d8..db925da 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -35,7 +35,7 @@ export type Scope = { nodeIds: string[] } -export default function Home() { +export default function Home(setEmacsTheme: any) { // only render on the client const [showPage, setShowPage] = useState(false) useEffect(() => { @@ -46,10 +46,10 @@ export default function Home() { return null } - return <GraphPage /> + return <GraphPage setEmacsTheme={setEmacsTheme} /> } -export function GraphPage() { +export function GraphPage(setEmacsTheme: any) { const [physics, setPhysics] = usePersistantState('physics', initialPhysics) const [filter, setFilter] = usePersistantState('filter', initialFilter) const [graphData, setGraphData] = useState<GraphData | null>(null) @@ -62,6 +62,7 @@ export function GraphPage() { return fetch('http://localhost:35901/graph') .then((res) => res.json()) .then((orgRoamGraphData) => { + console.log('fetching graphdata') parseGraphData(orgRoamGraphData) }) } @@ -115,34 +116,35 @@ export function GraphPage() { } useEffect(() => { - //const trackEmacs = new EventSource('http://127.0.0.1:35901/current-node-id') - //trackEmacs.addEventListener('message', (e) => { - // const emacsNodeId = e.data - //setEmacsNodeId(emacsNodeId) - //}) const socket = new WebSocket('ws://localhost:35903') socket.addEventListener('open', (e) => { console.log('Connection with Emacs established') }) socket.addEventListener('message', (event) => { - const data = JSON.parse(event.data) - console.log(typeof data.type) - switch (data.type) { + const message = JSON.parse(event.data) + console.log(typeof message.type) + switch (message.type) { case 'graphdata': console.log('hey') - parseGraphData(data.data) + parseGraphData(message.data) + break + case 'theme': + console.log('Received theme data') + console.log(message.data) + console.log(setEmacsTheme) + setEmacsTheme.setEmacsTheme.setEmacsTheme(message.data) break case 'command': console.log('command') - switch (data.data.commandName) { + switch (message.data.commandName) { case 'follow': - setEmacsNodeId(data.data.id) + setEmacsNodeId(message.data.id) break case 'zoom': { - const links = linksByNodeIdRef.current[data.data.id!] ?? [] + const links = linksByNodeIdRef.current[message.data.id!] ?? [] const nodes = Object.fromEntries( [ - data.commandData.id! as string, + message.commandData.id! as string, ...links.flatMap((link) => [link.source, link.target]), ].map((nodeId) => [nodeId, {}]), ) |