diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.tsx | 8 | ||||
| -rw-r--r-- | pages/index.tsx | 113 |
2 files changed, 47 insertions, 74 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index 9833717..976785c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -180,7 +180,13 @@ function SubApp(props: any) { backgroundColor: highlightColor, }, filledTrack: { - backgroundColor: 'gray.200', + backgroundColor: 'gray.400', + }, + track: { + backgroundColor: 'gray.400', + borderColor: 'gray.400', + borderWidth: '5px', + borderRadius: 'lg', }, }), }, diff --git a/pages/index.tsx b/pages/index.tsx index a2c99be..1d8ae78 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -43,6 +43,7 @@ import { initialBehavior, initialColoring, initialFilter, + initialLocal, initialMouse, initialPhysics, initialVisuals, @@ -54,6 +55,7 @@ import { Tweaks } from '../components/Tweaks' import { usePersistantState } from '../util/persistant-state' import { ThemeContext, ThemeContextProps } from '../util/themecontext' import { openNodeInEmacs } from '../util/webSocketFunctions' +import { drawLabels } from '../components/Graph/drawLabels' const d3promise = import('d3-force-3d') @@ -109,6 +111,8 @@ export function GraphPage() { const [behavior, setBehavior] = usePersistantState('behavior', initialBehavior) const [mouse, setMouse] = usePersistantState('mouse', initialMouse) const [coloring, setColoring] = usePersistantState('coloring', initialColoring) + const [local, setLocal] = usePersistantState('local', initialLocal) + const [ previewNodeState, { @@ -546,6 +550,8 @@ export function GraphPage() { setTagColors, coloring, setColoring, + local, + setLocal, }} tags={tagsRef.current} /> @@ -582,6 +588,7 @@ export function GraphPage() { graphRef, clusterRef, coloring, + local, }} /> )} @@ -689,6 +696,7 @@ export interface GraphProps { visuals: typeof initialVisuals behavior: typeof initialBehavior mouse: typeof initialMouse + local: typeof initialLocal scope: Scope setScope: any webSocket: any @@ -723,6 +731,7 @@ export const Graph = function (props: GraphProps) { behavior, mouse, scope, + local, setScope, webSocket, tagColors, @@ -922,7 +931,7 @@ export const Graph = function (props: GraphProps) { } const oldScopedNodes = scope.nodeIds.length > 1 ? scopedGraphData.nodes : [] const oldScopedNodeIds = oldScopedNodes.map((node) => node.id as string) - const neighbs = findNthNeighbors(scope.nodeIds, 1) + const neighbs = findNthNeighbors(scope.nodeIds, local.neighbors) const newScopedNodes = filteredGraphData.nodes .filter((node) => { if (oldScopedNodes.length) { @@ -970,7 +979,14 @@ export const Graph = function (props: GraphProps) { const scopedLinks = [...oldScopedLinks, ...newScopedLinks] setScopedGraphData({ nodes: scopedNodes, links: scopedLinks }) - }, [filter, scope, JSON.stringify(graphData), filteredGraphData.links, filteredGraphData.nodes]) + }, [ + local.neighbors, + filter, + scope, + JSON.stringify(graphData), + filteredGraphData.links, + filteredGraphData.nodes, + ]) useEffect(() => { ;(async () => { @@ -1150,6 +1166,7 @@ export const Graph = function (props: GraphProps) { const getNodeColor = (node: OrgRoamNode, theme: any) => { const needsHighlighting = highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!] + //const needsHighlighting = hoverNode?.id === node.id! || lastHoverNode?.current?.id === node.id // if we are matching the node color and don't have a highlight color // or we don't have our own scheme and we're not being highlighted if (visuals.emacsNodeColor && node.id === emacsNodeId) { @@ -1222,7 +1239,7 @@ export const Graph = function (props: GraphProps) { warmupTicks: scope.nodeIds.length === 1 ? 100 : scope.nodeIds.length > 1 ? 20 : 0, //onZoom: ({ k, x, y }) => setZoom(k), onZoom: ({ k, x, y }) => (scaleRef.current = k), - //nodeLabel: (node) => (node as OrgRoamNode).title, + //nodeLabel: (node) => , nodeColor: (node) => { return getNodeColor(node as OrgRoamNode, theme) }, @@ -1231,76 +1248,23 @@ export const Graph = function (props: GraphProps) { return nodeSize(node) / Math.pow(scaleRef.current, visuals.nodeZoomSize) }, nodeCanvasObject: (node, ctx, globalScale) => { - if (!node) { - return - } - if (dragging) { - return - } - - if (!visuals.labels) { - return - } - const wasHighlightedNode = previouslyHighlightedNodes[node.id!] - - if ( - (globalScale <= visuals.labelScale || visuals.labels === 1) && - !highlightedNodes[node.id!] && - !wasHighlightedNode - ) { - return - } - - const nodeTitle = (node as OrgRoamNode).title! - const label = nodeTitle.substring(0, visuals.labelLength) - const fontSize = visuals.labelFontSize / (0.75 * Math.min(Math.max(0.5, globalScale), 3)) - const textWidth = ctx.measureText(label).width - const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) as [ - number, - number, - ] // some padding - - const fadeFactor = Math.min((3 * (globalScale - visuals.labelScale)) / visuals.labelScale, 1) - - // draw label background - const getLabelOpacity = () => { - if (visuals.labels === 1) { - return opacity - } - if (globalScale <= visuals.labelScale) { - return opacity - } - return highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!] - ? Math.max(fadeFactor, opacity) - : 1 * fadeFactor * (-1 * (visuals.highlightFade * opacity - 1)) - } - const nodeS = 8 * Math.cbrt(nodeSize(node) * visuals.nodeRel) - if (visuals.labelBackgroundColor && visuals.labelBackgroundOpacity) { - const backgroundOpacity = getLabelOpacity() * visuals.labelBackgroundOpacity - const labelBackground = hexToRGBA(labelBackgroundColor, backgroundOpacity) - ctx.fillStyle = labelBackground - ctx.fillRect( - node.x! - bckgDimensions[0] / 2, - node.y! - bckgDimensions[1] / 2 + nodeS, - ...bckgDimensions, - ) - } - - // draw label text - const textOpacity = getLabelOpacity() - ctx.textAlign = 'center' - ctx.textBaseline = 'middle' - const labelText = hexToRGBA(labelTextColor, textOpacity) - ctx.fillStyle = labelText - ctx.font = `${fontSize}px Sans-Serif` - const wordsArray = wrap(label, { width: visuals.labelWordWrap }).split('\n') - - const truncatedWords = - nodeTitle.length > visuals.labelLength - ? [...wordsArray.slice(0, -1), `${wordsArray.slice(-1)}...`] - : wordsArray - truncatedWords.forEach((word, index) => { - ctx.fillText(word, node.x!, node.y! + nodeS + visuals.labelLineSpace * fontSize * index) + drawLabels({ + nodeRel: visuals.nodeRel, + filteredLinksByNodeId: filteredLinksByNodeIdRef.current, + lastHoverNode: lastHoverNode.current, + ...{ + node, + ctx, + globalScale, + highlightedNodes, + previouslyHighlightedNodes, + visuals, + opacity, + nodeSize, + labelTextColor, + labelBackgroundColor, + hoverNode, + }, }) }, nodeCanvasObjectMode: () => 'after', @@ -1392,6 +1356,9 @@ export const Graph = function (props: GraphProps) { if (!visuals.highlight) { return } + if (dragging) { + return + } if (!hoverNode) { fadeOutCancel() |