diff options
Diffstat (limited to 'frontend/views/graph/components/graph.canvas.js')
| -rw-r--r-- | frontend/views/graph/components/graph.canvas.js | 13 |
1 files changed, 10 insertions, 3 deletions
diff --git a/frontend/views/graph/components/graph.canvas.js b/frontend/views/graph/components/graph.canvas.js index fa74e50..d10de4f 100644 --- a/frontend/views/graph/components/graph.canvas.js +++ b/frontend/views/graph/components/graph.canvas.js @@ -7,6 +7,8 @@ const BACKLINK_SPACING = 10 const ARROWHEAD_LENGTH = 10 const GRAPH_LINK_COLOR = "#ff88ff" const GRAPH_BACKLINK_COLOR = "#88ffff" +const GRAPH_UNHOVER_LINK_COLOR = "#884488" +const GRAPH_UNHOVER_BACKLINK_COLOR = "#448888" export default class GraphCanvas extends Component { constructor(props) { @@ -26,7 +28,7 @@ export default class GraphCanvas extends Component { draw(prevProps) { const { current: canvas } = this.canvasRef - const { bounds, pages, currentPage, box, measurements } = this.props + const { bounds, pages, currentPage, box, measurements, highlightedPageId } = this.props const { width, height } = bounds if (prevProps.bounds !== bounds) { canvas.width = width @@ -56,6 +58,7 @@ export default class GraphCanvas extends Component { page.backlinks.map(tile => { if (tile.target_page_id <= 0) return const targetCoord = coordsLookup[tile.page_id] + const isHighlightedPage = !highlightedPageId || highlightedPageId === page.id || highlightedPageId === tile.page_id let tile_measurement = measurements[tile.page_id] || DEFAULT_MEASUREMENT let target_measurement = measurements[tile.target_page_id] || DEFAULT_MEASUREMENT let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y) @@ -80,7 +83,9 @@ export default class GraphCanvas extends Component { // if this is the first time encountering this link... if (!targetCoord.backlinks.has(tile.target_page_id)) { sourceCoord.backlinks.add(tile.page_id) - ctx.strokeStyle = GRAPH_LINK_COLOR + ctx.strokeStyle = isHighlightedPage + ? GRAPH_LINK_COLOR + : GRAPH_UNHOVER_LINK_COLOR } else { // otherwise this is a two-way link x1_offset += BACKLINK_SPACING * Math.sin(theta) y1_offset += BACKLINK_SPACING * Math.cos(theta) @@ -90,7 +95,9 @@ export default class GraphCanvas extends Component { // y1_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2) // x2_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2) // y2_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2) - ctx.strokeStyle = GRAPH_BACKLINK_COLOR + ctx.strokeStyle = isHighlightedPage + ? GRAPH_BACKLINK_COLOR + : GRAPH_UNHOVER_BACKLINK_COLOR } ctx.beginPath() const x1 = targetCoord.x * width + x1_offset |