diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/index.tsx | 64 |
1 files changed, 36 insertions, 28 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index 04f1fc7..06c7dc2 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -71,10 +71,11 @@ const initialPhysics = { collisionStrength: 0, linkStrength: 0.1, linkIts: 1, - particles: 0, + particles: false, + particlesNumber: 0, + particlesWidth: 4, linkOpacity: 0.4, linkWidth: 1, - particleWidth: 4, nodeRel: 4, labels: true, labelScale: 1.5, @@ -91,6 +92,9 @@ const initialPhysics = { click: 'select', doubleClick: 'local', iterations: 0, + highlight: true, + highlightNodeSize: 2, + highlightLinkSize: 2, } const initialTheme = { @@ -186,16 +190,18 @@ export function GraphPage() { return ( <div> - {showTweeks && <Tweaks - {...{ - physics, - setPhysics, - threeDim, - }} - onClose={() => { - setShowTweeks(false) - }} - />} + {showTweeks && ( + <Tweaks + {...{ + physics, + setPhysics, + threeDim, + }} + onClose={() => { + setShowTweeks(false) + }} + /> + )} <Graph nodeById={nodeByIdRef.current!} linksByNodeId={linksByNodeIdRef.current!} @@ -451,36 +457,36 @@ export const Tweaks = function (props: TweakProps) { </EnableSection> <EnableSection label="Directional Particles" - value={physics.particles ? true : false} - onChange={() => setPhysics({ ...physics, particles: physics.particles ? 0 : 1 })} + value={physics.particles} + onChange={() => setPhysics({ ...physics, particles: !physics.particles })} > <SliderWithInfo label="Particle Number" - value={physics.particles} + value={physics.particlesNumber} max={5} step={1} - onChange={(value) => setPhysics({ ...physics, particles: value })} + onChange={(value) => setPhysics({ ...physics, particlesNumber: value })} /> <SliderWithInfo label="Particle Size" - value={physics.particleWidth} + value={physics.particlesWidth} onChange={(value) => setPhysics({ ...physics, particleWidth: value })} /> </EnableSection> <EnableSection - label="Hightlight" - onChange={() => setPhysics({ ...physics, highlight: !physics.hightligth })} - value={physics.hightlight} + label="Highlight" + onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })} + value={physics.highlight} > <SliderWithInfo label="Highlight Link Thickness Multiplier" - value={physics.highlightLink} - onChange={(value) => setPhysics({ ...physics, highlightLink: value })} + value={physics.highlightLinkSize} + onChange={(value) => setPhysics({ ...physics, highlightLinkSize: value })} /> <SliderWithInfo label="Highlight Node Size Multiplier" - value={physics.particleWidth} - onChange={(value) => setPhysics({ ...physics, highlightNode: value })} + value={physics.highlightNodeSize} + onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })} /> <Flex justifyContent="space-between"> <Text></Text> @@ -700,7 +706,9 @@ export const Graph = function (props: GraphProps) { nodeRelSize: physics.nodeRel, nodeVal: (node) => { const links = linksByNodeId[node.id!] ?? [] - return 3 + 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) { @@ -754,7 +762,7 @@ export const Graph = function (props: GraphProps) { }, nodeCanvasObjectMode: () => 'after', - linkDirectionalParticles: physics.particles, + linkDirectionalParticles: physics.particles ? physics.particlesNumber : undefined, linkColor: (link) => { const linkIsHighlighted = (link.source as NodeObject).id! === centralHighlightedNode?.id! || @@ -768,9 +776,9 @@ export const Graph = function (props: GraphProps) { (link.source as NodeObject).id! === centralHighlightedNode?.id! || (link.target as NodeObject).id! === centralHighlightedNode?.id! - return linkIsHighlighted ? 2 * physics.linkWidth : physics.linkWidth + return linkIsHighlighted ? physics.highlightLinkSize * physics.linkWidth : physics.linkWidth }, - linkDirectionalParticleWidth: physics.particleWidth, + linkDirectionalParticleWidth: physics.particlesWidth, d3AlphaDecay: physics.alphaDecay, d3AlphaMin: physics.alphaMin, |