From 444193ce3749fd8646c5b58135d07524ddc7aed0 Mon Sep 17 00:00:00 2001 From: Kirill Rogovoy Date: Fri, 23 Jul 2021 17:16:08 +0300 Subject: Make physical forces disablable --- pages/index.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) (limited to 'pages/index.tsx') diff --git a/pages/index.tsx b/pages/index.tsx index 170935e..b78e357 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -664,12 +664,10 @@ export const Graph = function (props: GraphProps) { fg.d3Force('y', null) threeDim ? fg.d3Force('z', null) : null } - fg.d3Force('link').strength(physics.linkStrength) - fg.d3Force('link').iterations(physics.linkIts) - physics.collision - ? fg.d3Force('collide', d3.forceCollide().radius(20)) - : fg.d3Force('collide', null) - fg.d3Force('charge').strength(physics.charge) + physics.linkStrength && fg.d3Force('link').strength(physics.linkStrength) + physics.linkIts && fg.d3Force('link').iterations(physics.linkIts) + physics.charge && fg.d3Force('charge').strength(physics.charge) + fg.d3Force('collide', physics.collision ? d3.forceCollide().radius(20) : null) })() }) @@ -699,7 +697,6 @@ export const Graph = function (props: GraphProps) { } const theme = useTheme() - console.log(theme) const graphCommonProps: ComponentPropsWithoutRef = { graphData: scopedGraphData, width: windowWidth, @@ -790,8 +787,7 @@ export const Graph = function (props: GraphProps) { d3AlphaDecay: physics.alphaDecay, d3AlphaMin: physics.alphaMin, d3VelocityDecay: physics.velocityDecay, - - onNodeClick: onNodeClick, + onNodeClick, onBackgroundClick: () => { setScope((currentScope) => ({ ...currentScope, -- cgit v1.2.3 From e4559edc53bbb68d611962ab4088c61a848283c3 Mon Sep 17 00:00:00 2001 From: Kirill Rogovoy Date: Fri, 23 Jul 2021 17:38:09 +0300 Subject: Bring back node/link size change when highlighted --- pages/index.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'pages/index.tsx') diff --git a/pages/index.tsx b/pages/index.tsx index b78e357..da9a405 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -720,7 +720,9 @@ export const Graph = function (props: GraphProps) { nodeRelSize: physics.nodeRel, nodeVal: (node) => { const links = linksByNodeId[node.id!] ?? [] - return links.length + const basicSize = 3 + links.length + const highlightSize = highlightedNodes[node.id!] ? physics.highlightNodeSize : 1 + return basicSize * highlightSize }, nodeCanvasObject: (node, ctx, globalScale) => { if (!physics.labels) { @@ -781,12 +783,19 @@ export const Graph = function (props: GraphProps) { return linkIsHighlighted ? theme.colors.purple[500] : theme.colors.gray[500] }, - linkWidth: physics.linkWidth, + linkWidth: (link) => { + const linkIsHighlighted = + (link.source as NodeObject).id! === centralHighlightedNode?.id! || + (link.target as NodeObject).id! === centralHighlightedNode?.id! + + return linkIsHighlighted ? physics.highlightLinkSize * physics.linkWidth : physics.linkWidth + }, linkDirectionalParticleWidth: physics.particlesWidth, d3AlphaDecay: physics.alphaDecay, d3AlphaMin: physics.alphaMin, d3VelocityDecay: physics.velocityDecay, + onNodeClick, onBackgroundClick: () => { setScope((currentScope) => ({ -- cgit v1.2.3