summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--org-roam-ui.el29
-rw-r--r--pages/_app.tsx43
-rw-r--r--pages/index.tsx34
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, {}]),
)