summaryrefslogtreecommitdiff
path: root/components/tweaks.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-08-01 15:29:08 +0200
committerThomas F. K. Jorna <[email protected]>2021-08-01 15:29:08 +0200
commit4dea73fe10aa685303bf90606e9dbd5d0fd2e392 (patch)
treee4904f0c487fbf7546c4d9116e8489a2fe917e83 /components/tweaks.tsx
parent6c190c6f494552ae8567b3fade91c059ee190bfa (diff)
added arrows
Diffstat (limited to 'components/tweaks.tsx')
-rw-r--r--components/tweaks.tsx94
1 files changed, 94 insertions, 0 deletions
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 })}