diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/config.ts | 4 | ||||
| -rw-r--r-- | components/tweaks.tsx | 94 |
2 files changed, 98 insertions, 0 deletions
diff --git a/components/config.ts b/components/config.ts index cc2beb8..ac4f9c8 100644 --- a/components/config.ts +++ b/components/config.ts @@ -44,6 +44,10 @@ export const initialVisuals = { particles: false, particlesNumber: 0, particlesWidth: 4, + arrows: false, + arrowsLength: 1, + arrowsPos: 0.5, + arrowsColor: '', linkOpacity: 0.8, linkWidth: 1, nodeRel: 4, diff --git a/components/tweaks.tsx b/components/tweaks.tsx index 39130a5..b4733b8 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -1038,6 +1038,100 @@ export const Tweaks = (props: TweakProps) => { </Collapse> </Box> <EnableSection + label="Link arrows" + value={visuals.arrows} + onChange={() => setVisuals({ ...visuals, arrows: !visuals.arrows })} + > + <SliderWithInfo + label="Arrow size" + value={visuals.arrowsLength / 10} + onChange={(value) => setVisuals({ ...visuals, arrowsLength: 10 * value })} + /> + <SliderWithInfo + label="Arrow Position" + value={visuals.arrowsPos} + min={0} + max={1} + step={0.01} + onChange={(value) => setVisuals({ ...visuals, arrowsPos: value })} + /> + <Flex alignItems="center" justifyContent="space-between"> + <Text>Arrow Color</Text> + <Menu placement="right"> + <MenuButton + as={Button} + colorScheme="" + color="black" + rightIcon={<ChevronDownIcon />} + > + { + <Box + bgColor={visuals.arrowsColor} + borderRadius="sm" + height={6} + width={6} + ></Box> + } + </MenuButton> + <Portal> + {' '} + <MenuList minW={10} zIndex="popover" bgColor="gray.200"> + <MenuItem + onClick={() => setVisuals({ ...visuals, arrowsColor: '' })} + justifyContent="space-between" + alignItems="center" + display="flex" + > + <Box height={6} width={6}></Box> + </MenuItem> + {colorList.map((color) => ( + <MenuItem + key={color} + onClick={() => + setVisuals({ + ...visuals, + arrowsColor: color, + }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + <Box + bgColor={color} + borderRadius="sm" + height={6} + width={6} + ></Box> + </MenuItem> + ))} + {grays.map((color) => ( + <MenuItem + key={color} + onClick={() => + setVisuals({ + ...visuals, + arrowsColor: color, + }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + <Box + bgColor={color} + borderRadius="sm" + height={6} + width={6} + ></Box> + </MenuItem> + ))} + </MenuList> + </Portal> + </Menu> + </Flex> + </EnableSection> + <EnableSection label="Directional Particles" value={visuals.particles} onChange={() => setVisuals({ ...visuals, particles: !visuals.particles })} |