diff options
| -rw-r--r-- | pages/index.tsx | 99 |
1 files changed, 41 insertions, 58 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index 1923698..c27a0a3 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -354,13 +354,15 @@ export const Graph = function (props: GraphProps) { if (hoverNode) { lastHoverNode.current = hoverNode } - if (!physics.highlightAnim) { - return + return hoverNode ? setOpacity(1) : setOpacity(0) } + if (hoverNode) { fadeIn() } else { + // to prevent fadeout animation from starting at 1 + // when quickly moving away from a hovered node cancel() opacity > 0.5 ? fadeOut() : setOpacity(0) } @@ -422,22 +424,14 @@ export const Graph = function (props: GraphProps) { ? links.filter((link) => link.type === 'parent' || link.type === 'cite').length : 0 const basicSize = 3 + links.length - (!filter.parents ? parentNeighbors : 0) - if (physics.highlightAnim) { - const wasHighlightedNode = links.some((link) => - isLinkRelatedToNode(link, lastHoverNode.current), - ) - const highlightSize = highlightedNodes[node.id!] - ? 1 + opacity * (physics.highlightNodeSize - 1) - : lastHoverNode.current?.id! === node.id! - ? 1 + opacity * (physics.highlightNodeSize - 1) - : wasHighlightedNode + const wasHighlightedNode = links.some((link) => + isLinkRelatedToNode(link, lastHoverNode.current), + ) + const highlightSize = + highlightedNodes[node.id!] || wasHighlightedNode ? 1 + opacity * (physics.highlightNodeSize - 1) : 1 - return basicSize * highlightSize - } else { - const highlightSize = highlightedNodes[node.id!] ? physics.highlightNodeSize : 1 - return basicSize * highlightSize - } + return basicSize * highlightSize }, nodeCanvasObject: (node, ctx, globalScale) => { if (!node) { @@ -448,10 +442,15 @@ export const Graph = function (props: GraphProps) { return } const links = linksByNodeId[node.id!] ?? [] - const wasHighlightedNode = - physics.highlightAnim && - links.some((link) => isLinkRelatedToNode(link, lastHoverNode.current)) - if (globalScale <= physics.labelScale && !highlightedNodes[node.id!] && !wasHighlightedNode) { + const wasHighlightedNode = links.some((link) => + isLinkRelatedToNode(link, lastHoverNode.current), + ) + + if ( + (globalScale <= physics.labelScale || physics.labels === 1) && + !highlightedNodes[node.id!] && + !wasHighlightedNode + ) { return } @@ -469,35 +468,31 @@ export const Graph = function (props: GraphProps) { // draw label background const getLabelOpacity = () => { - if (physics.highlightAnim) { - if (globalScale <= physics.labelScale) { - return opacity - } - return Object.keys(highlightedNodes).length === 0 - ? lastHoverNode.current?.id! === node.id - ? 1 - : 1 * fadeFactor * (-1 * (0.5 * opacity - 1)) - : highlightedNodes[node.id!] || wasHighlightedNode + if (physics.labels === 1) { + return opacity + } + if (globalScale <= physics.labelScale) { + return opacity + } + return Object.keys(highlightedNodes).length === 0 + ? lastHoverNode.current?.id! === node.id ? 1 : 1 * fadeFactor * (-1 * (0.5 * opacity - 1)) - } else { - return Object.keys(highlightedNodes).length === 0 - ? 1 * fadeFactor - : highlightedNodes[node.id!] - ? 1 - : 1 * fadeFactor - } + : highlightedNodes[node.id!] || wasHighlightedNode + ? 1 + : 1 * fadeFactor * (-1 * (0.5 * opacity - 1)) + } + if (physics.labels === 2 && (wasHighlightedNode || highlightedNodes[node.id!])) { + const backgroundOpacity = 0.5 * getLabelOpacity() + ctx.fillStyle = `rgba(20, 20, 20, ${backgroundOpacity})` + ctx.fillRect( + node.x! - bckgDimensions[0] / 2, + node.y! - bckgDimensions[1] / 2, + ...bckgDimensions, + ) } - const backgroundOpacity = 0.5 * getLabelOpacity() - ctx.fillStyle = `rgba(20, 20, 20, ${backgroundOpacity})` - ctx.fillRect( - node.x! - bckgDimensions[0] / 2, - node.y! - bckgDimensions[1] / 2, - ...bckgDimensions, - ) - // draw label text - const textOpacity = 2 * backgroundOpacity + const textOpacity = getLabelOpacity() ctx.textAlign = 'center' ctx.textBaseline = 'middle' ctx.fillStyle = `rgb(255, 255, 255, ${textOpacity})` @@ -510,24 +505,12 @@ export const Graph = function (props: GraphProps) { linkColor: (link) => { const linkIsHighlighted = isLinkRelatedToNode(link, centralHighlightedNode) const linkWasHighlighted = isLinkRelatedToNode(link, lastHoverNode.current) - if (physics.highlightAnim) { - return linkIsHighlighted - ? interPurple(opacity) /*the.colors.purple[500]*/ - : linkWasHighlighted - ? interPurple(opacity) /*the.colors.purple[500]*/ - : theme.colors.gray[500] - } else { - return linkIsHighlighted ? theme.colors.purple[500] : theme.colors.gray[500] - } + return linkIsHighlighted || linkWasHighlighted ? interPurple(opacity) : theme.colors.gray[500] }, linkWidth: (link) => { const linkIsHighlighted = isLinkRelatedToNode(link, centralHighlightedNode) const linkWasHighlighted = isLinkRelatedToNode(link, lastHoverNode.current) - if (!physics.highlightAnim) { - return linkIsHighlighted ? physics.linkWidth * physics.highlightLinkSize : physics.linkWidth - } - return linkIsHighlighted || linkWasHighlighted ? physics.linkWidth * (1 + opacity * (physics.highlightLinkSize - 1)) : physics.linkWidth |