summaryrefslogtreecommitdiff
path: root/pages/index.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-07-27 17:52:46 +0200
committerThomas F. K. Jorna <[email protected]>2021-07-27 17:52:46 +0200
commit75b71ab77b658ad68a4292a14b29fe0902038c75 (patch)
treec523b3d2ff3b4e0c6f6bed772c3ba085f0c9aecb /pages/index.tsx
parentd11bad207094cf13f99cf6cf6128de1664f12e4c (diff)
removed animation checks, instead set opacity globally
Diffstat (limited to 'pages/index.tsx')
-rw-r--r--pages/index.tsx99
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