diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/config.ts | 24 | ||||
| -rw-r--r-- | components/tweaks.tsx | 142 |
2 files changed, 131 insertions, 35 deletions
diff --git a/components/config.ts b/components/config.ts index d6c2296..753f2db 100644 --- a/components/config.ts +++ b/components/config.ts @@ -64,3 +64,27 @@ export const initialFilter = { links: [], date: [], } + +export const initialVisuals = { + particles: false, + particlesNumber: 0, + particlesWidth: 4, + linkOpacity: 0.7, + linkWidth: 1, + nodeRel: 4, + nodeOpacity: 0.9, + nodeResolution: 8, + labels: 2, + labelScale: 1.5, + highlight: true, + highlightNodeSize: 2, + highlightLinkSize: 2, + highlightAnim: false, + animationSpeed: 250, + algorithms: algorithms, + algorithmOptions: options, + algorithmName: 'CubicOut', + linkColorScheme: 'plain', + nodeColorScheme: 'colorful', + highlightColor: 'purple', +} diff --git a/components/tweaks.tsx b/components/tweaks.tsx index f9c58a1..15fadcf 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -32,9 +32,11 @@ import { Heading, Collapse, } from '@chakra-ui/react' -import React, { useState } from 'react' +import React, { useState, useContext } from 'react' import Scrollbars from 'react-custom-scrollbars-2' -import { initialPhysics, initialFilter } from './config' +import { initialPhysics, initialFilter, initialVisuals } from './config' + +import { ThemeContext } from '../pages/themecontext' export interface TweakProps { physics: typeof initialPhysics @@ -43,11 +45,15 @@ export interface TweakProps { setThreeDim: (newValue: boolean) => void filter: typeof initialFilter setFilter: any + visuals: typeof initialVisuals + setVisuals: any } export const Tweaks = (props: TweakProps) => { - const { physics, setPhysics, threeDim, setThreeDim, filter, setFilter } = props + const { physics, setPhysics, threeDim, setThreeDim, filter, setFilter, visuals, setVisuals } = + props const [showTweaks, setShowTweaks] = useState(true) + const { highlightColor, setHighlightColor } = useContext(ThemeContext) return ( <> @@ -67,24 +73,19 @@ export const Tweaks = (props: TweakProps) => { <Collapse in={showTweaks} animateOpacity> <Box bg="alt.100" - w="xs" + w={300} marginTop={10} marginLeft={10} borderRadius="xl" maxH={650} paddingBottom={5} - zIndex="overlay" + zIndex={300} position="relative" boxShadow="xl" > <Box display="flex" justifyContent="space-between" alignItems="center"> <Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}> - <Button - onClick={() => setThreeDim(!threeDim)} - colorScheme="purple" - variant="ghost" - zIndex="overlay" - > + <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay"> {threeDim ? '3D' : '2D'} </Button> </Tooltip> @@ -94,14 +95,12 @@ export const Tweaks = (props: TweakProps) => { aria-label="Reset Defaults" icon={<RepeatClockIcon />} onClick={() => setPhysics(initialPhysics)} - colorScheme="purple" variant="none" size="sm" /> </Tooltip> <IconButton size="sm" - colorScheme="purple" icon={<CloseIcon />} aria-label="Close Tweak Panel" variant="ghost" @@ -120,7 +119,7 @@ export const Tweaks = (props: TweakProps) => { ...style, borderRadius: 10, }} - bg="purple.500" + bg={highlightColor + '.500'} /> )} > @@ -142,7 +141,6 @@ export const Tweaks = (props: TweakProps) => { <Flex justifyContent="space-between"> <Text>Orphans</Text> <Switch - colorScheme="purple" onChange={() => { setFilter({ ...filter, orphans: !filter.orphans }) }} @@ -152,7 +150,6 @@ export const Tweaks = (props: TweakProps) => { <Flex justifyContent="space-between"> <Text>Link nodes with parent file</Text> <Switch - colorScheme="purple" onChange={() => { setFilter({ ...filter, parents: !filter.parents }) }} @@ -172,7 +169,6 @@ export const Tweaks = (props: TweakProps) => { id="physicsOn" onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })} isChecked={physics.enabled} - colorScheme="purple" /> </AccordionButton> <AccordionPanel> @@ -270,7 +266,7 @@ export const Tweaks = (props: TweakProps) => { label="Centering Strength" value={physics.centeringStrength} max={2} - step={0.1} + step={0.01} onChange={(v) => setPhysics({ ...physics, centeringStrength: v })} /> </EnableSection> @@ -296,13 +292,95 @@ export const Tweaks = (props: TweakProps) => { paddingLeft={7} color="gray.800" > - <EnableSection - label="Colors" - onChange={() => setPhysics({ ...physics, colorful: !physics.colorful })} - value={physics.colorful} - > - <Text>Child</Text> - </EnableSection> + <Accordion> + <AccordionItem> + <AccordionButton> + <AccordionIcon marginRight={2} /> + <Heading size="sm">Visual</Heading> + </AccordionButton> + <AccordionPanel> + <VStack + spacing={2} + justifyContent="flex-start" + divider={<StackDivider borderColor="gray.500" />} + align="stretch" + paddingLeft={7} + color="gray.800" + > + <Box> + <Flex alignItems="center" justifyContent="space-between"> + <Text>Node Color Scheme</Text> + <Menu> + <MenuButton as={Button} rightIcon={<ChevronDownIcon />}> + {visuals.nodeColorScheme === 'colorful' ? 'Colorful' : 'Plain'} + </MenuButton> + <MenuList bgColor="gray.200"> + <MenuItem onClick={() => setPhysics({ ...physics, labels: 1 })}> + Colorful + </MenuItem> + <MenuItem onClick={() => setPhysics({ ...physics, labels: 2 })}> + Plain + </MenuItem> + </MenuList> + </Menu> + </Flex> + <Flex alignItems="center" justifyContent="space-between"> + <Text>Link Color Scheme</Text> + <Menu> + <MenuButton as={Button} rightIcon={<ChevronDownIcon />}> + {visuals.linkColorScheme === 'colorful' ? 'Colorful' : 'Plain'} + </MenuButton> + <MenuList bgColor="gray.200"> + <MenuItem onClick={() => setPhysics({ ...physics, labels: 1 })}> + Colorful + </MenuItem> + <MenuItem onClick={() => setPhysics({ ...physics, labels: 2 })}> + Plain + </MenuItem> + </MenuList> + </Menu> + </Flex> + <Flex alignItems="center" justifyContent="space-between"> + <Text>Highlight color</Text> + <Menu> + <MenuButton as={Button} rightIcon={<ChevronDownIcon />}> + {highlightColor[0]!.toUpperCase() + highlightColor!.slice(1)} + </MenuButton> + <MenuList bgColor="gray.200" width={50}> + {[ + 'red', + 'orange', + 'yellow', + 'green', + 'cyan', + 'blue', + 'pink', + 'purple', + ].map((color) => ( + <MenuItem + key={color} + onClick={() => setHighlightColor(color)} + justifyContent="space-between" + alignItems="center" + display="flex" + > + <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text> + <Box + bgColor={color + '.500'} + borderRadius="sm" + height={6} + width={6} + ></Box> + </MenuItem> + ))} + </MenuList> + </Menu> + </Flex> + </Box> + </VStack> + </AccordionPanel> + </AccordionItem> + </Accordion> <SliderWithInfo label="Node size" value={physics.nodeRel} @@ -516,24 +594,18 @@ export const SliderWithInfo = ({ ...rest }: SliderWithInfoProps) => { const { onChange, label, infoText } = rest + const { highlightColor } = useContext(ThemeContext) return ( <Box> <Box display="flex" alignItems="flex-end"> <Text>{label}</Text> {infoText && <InfoTooltip infoText={infoText} />} </Box> - <Slider - value={value} - onChange={onChange} - min={min} - max={max} - step={step} - colorScheme="purple" - > + <Slider value={value} onChange={onChange} min={min} max={max} step={step}> <SliderTrack> <SliderFilledTrack /> </SliderTrack> - <Tooltip bg="purple.500" label={value.toFixed(1)}> + <Tooltip bg={highlightColor + '.500'} label={value.toFixed(1)}> <SliderThumb bg="white" /> </Tooltip> </Slider> @@ -558,7 +630,7 @@ export const EnableSection = (props: EnableSectionProps) => { <Text>{label}</Text> {infoText && <InfoTooltip infoText={infoText} />} </Box> - <Switch isChecked={!!value} onChange={onChange} colorScheme="purple" /> + <Switch isChecked={!!value} onChange={onChange} /> </Box> <Collapse in={!!value} animateOpacity> <Box paddingLeft={4} paddingTop={2}> |