diff options
| author | Thomas F. K. Jorna <[email protected]> | 2021-07-28 15:03:38 +0200 |
|---|---|---|
| committer | Thomas F. K. Jorna <[email protected]> | 2021-07-28 15:03:38 +0200 |
| commit | 8b9d53389fe346259f4288f341abc2df5d5679aa (patch) | |
| tree | 933c5b4980f23bbbeb854de71492347a67dd17bc | |
| parent | 49aee30dccde55e331b06232703dcd386efd72f3 (diff) | |
added more node/link opacity and resolution options
| -rw-r--r-- | components/config.ts | 4 | ||||
| -rw-r--r-- | components/tweaks.tsx | 28 | ||||
| -rw-r--r-- | pages/index.tsx | 3 |
3 files changed, 34 insertions, 1 deletions
diff --git a/components/config.ts b/components/config.ts index 80f89d1..3331288 100644 --- a/components/config.ts +++ b/components/config.ts @@ -22,9 +22,11 @@ export const initialPhysics = { particles: false, particlesNumber: 0, particlesWidth: 4, - linkOpacity: 0.4, + linkOpacity: 0.7, linkWidth: 1, nodeRel: 4, + nodeOpacity: 0.9, + nodeResolution: 8, labels: 2, labelScale: 1.5, alphaDecay: 0.02, diff --git a/components/tweaks.tsx b/components/tweaks.tsx index 7e5fd6c..bfb932c 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -300,11 +300,39 @@ export const Tweaks = (props: TweakProps) => { value={physics.nodeRel} onChange={(value) => setPhysics({ ...physics, nodeRel: value })} /> + {threeDim && ( + <> + <SliderWithInfo + label="Node opacity" + value={physics.nodeOpacity} + min={0} + max={1} + onChange={(value) => setPhysics({ ...physics, nodeOpacity: value })} + /> + <SliderWithInfo + label="Node resolution" + value={physics.nodeResolution} + min={5} + max={32} + step={1} + onChange={(value) => setPhysics({ ...physics, nodeResolution: value })} + /> + </> + )} <SliderWithInfo label="Link width" value={physics.linkWidth} onChange={(value) => setPhysics({ ...physics, linkWidth: value })} /> + {threeDim && ( + <SliderWithInfo + label="Link opacity" + min={0} + max={1} + value={physics.linkOpacity} + onChange={(value) => setPhysics({ ...physics, linkOpacity: value })} + /> + )} <Box> <Flex alignItems="center" justifyContent="space-between"> <Text>Labels</Text> diff --git a/pages/index.tsx b/pages/index.tsx index d197ae5..00e87d8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -598,6 +598,9 @@ export const Graph = function (props: GraphProps) { {...graphCommonProps} nodeThreeObjectExtend={true} backgroundColor={theme.colors.white} + nodeOpacity={physics.nodeOpacity} + nodeResolution={physics.nodeResolution} + linkOpacity={physics.linkOpacity} /> ) : ( <ForceGraph2D ref={graph2dRef} {...graphCommonProps} /> |