diff options
| -rw-r--r-- | org-roam-ui.el | 21 | ||||
| -rw-r--r-- | pages/index.tsx | 29 |
2 files changed, 28 insertions, 22 deletions
diff --git a/org-roam-ui.el b/org-roam-ui.el index fe012f6..9420bf3 100644 --- a/org-roam-ui.el +++ b/org-roam-ui.el @@ -95,15 +95,15 @@ ROWS is the sql result, while COLUMN-NAMES is the columns to use." res)) (defservlet* theme application/json () - (when (boundp 'doom-themes--colors) + (progn + (when (boundp 'doom-themes--colors) (let* - ((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 (json-encode ui-theme)) - (httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*"))))) + ((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 (json-encode ui-theme))))) + (httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*"))) + (defservlet* id/:id text/html () (let ((node (org-roam-populate (org-roam-node-create :id id))) @@ -116,10 +116,9 @@ ROWS is the sql result, while COLUMN-NAMES is the columns to use." (insert html-string))) (defservlet* current-node-id text/event-stream () - (insert (format "data: %s\n\n" + (insert (format "data: %s\n\n" org-roam-ui-current-node-id)) - (httpd-send-header t "text/event-stream" 200 :Access-Control-Allow-Origin "*") - ) + (httpd-send-header t "text/event-stream" 200 :Access-Control-Allow-Origin "*")) (defun org-roam-ui-update () "Track changes within Emacs to update Org-roam UI. diff --git a/pages/index.tsx b/pages/index.tsx index 522b047..e0619ba 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -10,7 +10,6 @@ import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api' import { GraphData, NodeObject } from 'force-graph' import { useWindowSize } from '@react-hook/window-size' -import useConstant from 'use-constant' import { Accordion, @@ -139,7 +138,7 @@ export function GraphPage() { const [physics, setPhysics] = usePersistantState('physics', initialPhysics) const [theme, setTheme] = useState(initialTheme) const [graphData, setGraphData] = useState<GraphData | null>(null) - const [emacsNode, setEmacsNode] = useState<string>('') + const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null) const nodeByIdRef = useRef<NodeById>({}) const linksByNodeIdRef = useRef<LinksByNodeId>({}) @@ -148,9 +147,8 @@ export function GraphPage() { const trackEmacs = new EventSource('http://127.0.0.1:35901/current-node-id') trackEmacs.addEventListener('message', (e) => { - setEmacsNode(e.data) - console.log(e.data) - console.log(emacsNode) + const emacsNodeId = e.data + setEmacsNodeId(emacsNodeId) }) fetch('http://localhost:35901/theme') .then((res) => res.json()) @@ -201,7 +199,7 @@ export function GraphPage() { physics, graphData, threeDim, - emacsNode, + emacsNodeId, }} /> </div> @@ -530,11 +528,11 @@ export interface GraphProps { graphData: GraphData physics: typeof initialPhysics threeDim: boolean - emacsNode: string + emacsNodeId: string | null } export const Graph = function (props: GraphProps) { - const { physics, graphData, threeDim, linksByNodeId, emacsNode } = props + const { physics, graphData, threeDim, linksByNodeId, emacsNodeId } = props const graph2dRef = useRef<any>(null) const graph3dRef = useRef<any>(null) @@ -547,6 +545,16 @@ export const Graph = function (props: GraphProps) { const [hoverNode, setHoverNode] = useState<NodeObject | null>(null) const [scope, setScope] = useState<Scope>({ nodeIds: [] }) + useEffect(() => { + if (!emacsNodeId) { + return + } + + setScope({ + nodeIds: [emacsNodeId], + }) + }, [emacsNodeId]) + const centralHighlightedNode = hoverNode const highlightedNodes = (() => { if (!centralHighlightedNode) { @@ -687,9 +695,7 @@ export const Graph = function (props: GraphProps) { nodeRelSize: physics.nodeRel, nodeVal: (node) => { const links = linksByNodeId[node.id!] ?? [] - const basicSize = 3 + links.length - const highlightSize = highlightedNodes[node.id!] ? 2 : 0 - return basicSize + highlightSize + return 3 + links.length }, nodeCanvasObject: (node, ctx, globalScale) => { if (!physics.labels) { @@ -752,6 +758,7 @@ export const Graph = function (props: GraphProps) { return linkIsHighlighted ? '#a991f1' : '#666666' }, linkWidth: (link) => { + return physics.linkWidth const linkIsHighlighted = (link.source as NodeObject).id! === centralHighlightedNode?.id! || (link.target as NodeObject).id! === centralHighlightedNode?.id! |