From 4dea73fe10aa685303bf90606e9dbd5d0fd2e392 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Sun, 1 Aug 2021 15:29:08 +0200
Subject: added arrows

---
 components/config.ts  |  4 +++
 components/tweaks.tsx | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+)

(limited to 'components')

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
@@ -1037,6 +1037,100 @@ export const Tweaks = (props: TweakProps) => {
                           </VStack>
                         </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}
-- 
cgit v1.2.3