diff options
| -rw-r--r-- | org-roam-ui.el | 21 | ||||
| -rw-r--r-- | pages/index.tsx | 41 |
2 files changed, 37 insertions, 25 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 d36d6de..16a0f31 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, @@ -143,7 +142,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>({}) @@ -152,9 +151,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()) @@ -205,7 +203,7 @@ export function GraphPage() { physics, graphData, threeDim, - emacsNode, + emacsNodeId, }} /> </div> @@ -289,7 +287,7 @@ export interface TweakProps { setPhysics: any threeDim: boolean } -export const Tweaks = function (props: TweakProps) { +export const Tweaks = function(props: TweakProps) { const { physics, setPhysics, threeDim } = props return ( <Box @@ -534,11 +532,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 +export const Graph = function(props: GraphProps) { + const { physics, graphData, threeDim, linksByNodeId, emacsNodeId } = props const graph2dRef = useRef<any>(null) const graph3dRef = useRef<any>(null) @@ -551,6 +549,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) { @@ -595,12 +603,12 @@ export const Graph = function (props: GraphProps) { scope.nodeIds.length === 0 ? graphData : { - nodes: scopedNodes, - links: scopedLinks, - } + nodes: scopedNodes, + links: scopedLinks, + } useEffect(() => { - ;(async () => { + ; (async () => { const fg = threeDim ? graph3dRef.current : graph2dRef.current const d3 = await d3promise if (physics.gravityOn) { @@ -691,9 +699,13 @@ export const Graph = function (props: GraphProps) { nodeRelSize: physics.nodeRel, nodeVal: (node) => { const links = linksByNodeId[node.id!] ?? [] +<<<<<<< variant A const basicSize = 3 + links.length const highlightSize = highlightedNodes[node.id!] ? physics.highlightNodeSize : 1 return basicSize * highlightSize +>>>>>>> variant B + return 3 + links.length +======= end }, nodeCanvasObject: (node, ctx, globalScale) => { if (!physics.labels) { @@ -756,6 +768,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! |