diff options
-rw-r--r-- | org-roam-ui.el | 29 | ||||
-rw-r--r-- | pages/_app.tsx | 43 | ||||
-rw-r--r-- | pages/index.tsx | 34 |
3 files changed, 69 insertions, 37 deletions
diff --git a/org-roam-ui.el b/org-roam-ui.el index 7a84d2f..c218aee 100644 --- a/org-roam-ui.el +++ b/org-roam-ui.el @@ -107,12 +107,18 @@ This serves the web-build and API over HTTP." :host 'local :on-open (lambda (ws) (progn (setq oru-ws ws) (org-roam-ui--send-graphdata) (message "Connection established with org-roam-ui"))) :on-close (lambda (_websocket) (setq oru-ws nil) (message "Connection with org-roam-ui closed succesfully.")))) + (if (boundp 'counsel-load-theme +(advice-add 'counsel-load-theme :after #'org-roam-ui-sync-theme--advice) + (advice-add 'load-theme :after #'org-roam-ui-sync-theme-manually))) (add-hook 'post-command-hook #'org-roam-ui--update-current-node) (add-hook 'post-command-hook #'org-roam-ui-update)) (t (progn (remove-hook 'post-command-hook #'org-roam-ui-update) (remove-hook 'post-command-hook #'org-roam-ui--update-current-node) + (if (boundp 'counsel-load-theme +(advice-remove 'counsel-load-theme #'org-roam-ui-sync-theme--advice) + (advice-remove 'load-theme #'org-roam-ui-sync-theme--advice))) (websocket-server-close org-roam-ui-ws) (delete-process org-roam-ui-ws) (httpd-stop))))) @@ -137,6 +143,27 @@ This serves the web-build and API over HTTP." (interactive) (websocket-send-text oru-ws (json-encode `((type . "command") (data . ((commandName . "follow") (id . ,(org-roam-id-at-point)))))))) +(defun org-roam-ui-sync-theme--advice () + (websocket-send-text oru-ws (json-encode `((type . "theme") (data . ,(org-roam-ui--update-theme)))))) + +(defun org-roam-ui-sync-theme-manually () + (interactive) + (websocket-send-text oru-ws (json-encode `((type . "theme") (data . ,(org-roam-ui--update-theme)))))) + +(defun org-roam-ui--update-theme () + (let ((ui-theme (list nil))) + (if org-roam-ui-sync-theme + (if (boundp 'doom-themes--colors) + (let* + ((colors (butlast doom-themes--colors (- (length doom-themes--colors) 25))) doom-theme (list-nil)) + (progn + (dolist (color colors) (push (cons (car color) (car (cdr color))) doom-theme))) + (setq ui-theme doom-theme)) + (setq ui-theme (org-roam-ui-get-theme))) + (when org-roam-ui-custom-theme + org-roam-ui-custom-theme)) + ui-theme)) + (defservlet* graph application/json () (let* ((nodes-columns [id file title level]) (links-columns [source dest type]) @@ -221,7 +248,7 @@ This function is added to `post-command-hook'." ((colors (butlast doom-themes--colors (- (length doom-themes--colors) 25))) ui-theme (list nil)) (progn (dolist (color colors) (push (cons (car color) (car (cdr color))) ui-theme)) - (insert (format "data: %s\n\n" (json-encode ui-theme))))) + ui-theme))))) (insert (format "data: %s\n\n" (json-encode (org-roam-ui-get-theme))))) (when org-roam-ui-custom-theme (insert (format "data %s\n\n" (json-encode org-roam-ui-custom-theme))))) 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, {}]), ) |