diff options
| -rw-r--r-- | pages/index.tsx | 56 |
1 files changed, 33 insertions, 23 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index e0619ba..16a0f31 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 = { @@ -283,7 +287,7 @@ export interface TweakProps { setPhysics: any threeDim: boolean } -export const Tweaks = function (props: TweakProps) { +export const Tweaks = function(props: TweakProps) { const { physics, setPhysics, threeDim } = props return ( <Box @@ -446,36 +450,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> @@ -531,7 +535,7 @@ export interface GraphProps { emacsNodeId: string | null } -export const Graph = function (props: GraphProps) { +export const Graph = function(props: GraphProps) { const { physics, graphData, threeDim, linksByNodeId, emacsNodeId } = props const graph2dRef = useRef<any>(null) @@ -599,12 +603,12 @@ export const Graph = function (props: GraphProps) { scope.nodeIds.length === 0 ? graphData : { - nodes: scopedNodes, - links: scopedLinks, - } + nodes: scopedNodes, + links: scopedLinks, + } useEffect(() => { - ;(async () => { + ; (async () => { const fg = threeDim ? graph3dRef.current : graph2dRef.current const d3 = await d3promise if (physics.gravityOn) { @@ -695,7 +699,13 @@ export const Graph = function (props: GraphProps) { nodeRelSize: physics.nodeRel, nodeVal: (node) => { const links = linksByNodeId[node.id!] ?? [] +<<<<<<< variant A + const basicSize = 3 + links.length + const highlightSize = highlightedNodes[node.id!] ? physics.highlightNodeSize : 1 + return basicSize * highlightSize +>>>>>>> variant B return 3 + links.length +======= end }, nodeCanvasObject: (node, ctx, globalScale) => { if (!physics.labels) { @@ -749,7 +759,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! || @@ -763,9 +773,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, |