diff options
| -rw-r--r-- | components/tweaks.tsx | 768 |
1 files changed, 8 insertions, 760 deletions
diff --git a/components/tweaks.tsx b/components/tweaks.tsx index d6f5ba1..1a7e72c 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -54,6 +54,7 @@ import { SliderWithInfo } from './SliderWithInfo' import { EnableSection } from './EnableSection' import { InfoTooltip } from './InfoTooltip' import { PhysicsPanel } from './PhysicsPanel' +import { VisualsPanel } from './VisualsPanel' export interface TweakProps { physics: typeof initialPhysics @@ -94,8 +95,6 @@ export const Tweaks = (props: TweakProps) => { const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false) const { highlightColor, setHighlightColor } = useContext(ThemeContext) - const setVisualsCallback = useCallback((val) => setVisuals(val), []) - return !showTweaks ? ( <Box position="absolute" @@ -212,764 +211,13 @@ export const Tweaks = (props: TweakProps) => { <Heading size="sm">Visual</Heading> </AccordionButton> <AccordionPanel> - <VStack justifyContent="flex-start" align="stretch"> - <Accordion allowToggle defaultIndex={[0]} paddingLeft={3}> - <AccordionItem> - <AccordionButton> - <Flex justifyContent="space-between" w="100%"> - <Text>Colors</Text> - <AccordionIcon marginRight={2} /> - </Flex> - </AccordionButton> - <AccordionPanel> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} - align="stretch" - color="gray.800" - > - <Box> - <Flex alignItems="center" justifyContent="space-between"> - <Text>Nodes</Text> - <Tooltip label="Shuffle node colors"> - <IconButton - aria-label="Shuffle node colors" - size="sm" - icon={<RepeatIcon />} - variant="ghost" - onClick={() => { - const arr = visuals.nodeColorScheme ?? [] - setVisuals({ - ...visuals, - //shuffle that guy - //definitely thought of this myself - nodeColorScheme: arr - .map((x: any) => [Math.random(), x]) - .sort(([a], [b]) => a - b) - .map(([_, x]) => x), - }) - }} - /> - </Tooltip> - <Tooltip label="Cycle node colors"> - <IconButton - aria-label="Shift node colors" - icon={<ArrowRightIcon />} - size="sm" - variant="ghost" - onClick={() => { - const arr = visuals.nodeColorScheme ?? [] - setVisuals({ - ...visuals, - nodeColorScheme: [...arr.slice(1, arr.length), arr[0]], - }) - }} - /> - </Tooltip> - <Menu isLazy placement="right" closeOnSelect={false} matchWidth> - <MenuButton - width={20} - as={Button} - colorScheme="" - color="black" - rightIcon={<ChevronDownIcon />} - > - <Flex height={6} width={6} flexDirection="column" flexWrap="wrap"> - {visuals.nodeColorScheme.map((color) => ( - <Box - key={color} - bgColor={color} - flex="1 1 8px" - borderRadius="2xl" - ></Box> - ))} - </Flex> - </MenuButton> - <Portal> - {' '} - <MenuList minW={10} zIndex="popover" bgColor="gray.200"> - <MenuOptionGroup - width={500} - type="checkbox" - defaultValue={visuals.nodeColorScheme} - onChange={(colors) => { - if (!colors.length) { - return - } - setVisuals({ ...visuals, nodeColorScheme: colors }) - }} - > - {colorList.map((color) => ( - <MenuItemOption - key={color} - isChecked={visuals.nodeColorScheme.some((c) => c === color)} - value={color} - isDisabled={ - visuals.nodeColorScheme.length === 1 && - visuals.nodeColorScheme[0] === color - } - > - <Box - justifyContent="space-between" - alignItems="center" - display="flex" - > - <Box - bgColor={color} - borderRadius="sm" - height={6} - width={6} - ></Box> - </Box> - </MenuItemOption> - ))} - </MenuOptionGroup> - </MenuList> - </Portal> - </Menu> - </Flex> - <Flex alignItems="center" justifyContent="space-between"> - <Text>Links</Text> - <Menu isLazy placement="right"> - <MenuButton - as={Button} - colorScheme="" - color="black" - rightIcon={<ChevronDownIcon />} - > - <Box> - {visuals.linkColorScheme ? ( - <Box - bgColor={visuals.linkColorScheme} - borderRadius="sm" - height={6} - width={6} - ></Box> - ) : ( - <Flex - height={6} - width={6} - flexDirection="column" - flexWrap="wrap" - > - {visuals.nodeColorScheme.map((color) => ( - <Box - key={color} - bgColor={color} - flex="1 1 8px" - borderRadius="2xl" - ></Box> - ))} - </Flex> - )} - </Box> - </MenuButton> - <Portal> - {' '} - <MenuList minW={10} zIndex="popover" bgColor="gray.200"> - <MenuItem - onClick={() => setVisuals({ ...visuals, linkColorScheme: '' })} - justifyContent="space-between" - alignItems="center" - display="flex" - > - <Flex - height={6} - width={6} - flexDirection="column" - flexWrap="wrap" - > - {visuals.nodeColorScheme.map((color) => ( - <Box - key={color} - bgColor={color} - flex="1 1 8px" - borderRadius="2xl" - ></Box> - ))} - </Flex> - </MenuItem> - {colorList.map((color) => ( - <MenuItem - key={color} - onClick={() => - setVisuals({ - ...visuals, - linkColorScheme: color, - }) - } - justifyContent="space-between" - alignItems="center" - display="flex" - > - <Box - bgColor={color} - borderRadius="sm" - height={6} - width={6} - ></Box> - </MenuItem> - ))} - </MenuList> - </Portal> - </Menu> - </Flex> - <Flex alignItems="center" justifyContent="space-between"> - <Text>Accent</Text> - <Menu isLazy placement="right"> - <MenuButton - as={Button} - colorScheme="" - color="black" - rightIcon={<ChevronDownIcon />} - > - { - <Box - bgColor={highlightColor} - borderRadius="sm" - height={6} - width={6} - ></Box> - } - </MenuButton> - <Portal> - {' '} - <MenuList minW={10} zIndex="popover" bgColor="gray.200"> - {colorList.map((color) => ( - <MenuItem - key={color} - onClick={() => setHighlightColor(color)} - justifyContent="space-between" - alignItems="center" - display="flex" - > - <Box - bgColor={color} - borderRadius="sm" - height={6} - width={6} - ></Box> - </MenuItem> - ))} - </MenuList> - </Portal> - </Menu> - </Flex> - <ColorMenu - colorList={colorList} - label="Link highlight" - setVisuals={setVisualsCallback} - value="linkHighlight" - visValue={visuals.linkHighlight} - /> - <ColorMenu - colorList={colorList} - label="Node highlight" - setVisuals={setVisualsCallback} - value="nodeHighlight" - visValue={visuals.nodeHighlight} - /> - <ColorMenu - colorList={colorList} - label="Background" - setVisuals={setVisualsCallback} - value="backgroundColor" - visValue={visuals.backgroundColor} - /> - <ColorMenu - colorList={colorList} - label="Emacs node" - setVisuals={setVisualsCallback} - value="emacsNodeColor" - visValue={visuals.emacsNodeColor} - /> - </Box> - </VStack> - </AccordionPanel> - </AccordionItem> - <AccordionItem> - <AccordionButton> - <Flex justifyContent="space-between" w="100%"> - <Text>Nodes & Links</Text> - <AccordionIcon marginRight={2} /> - </Flex> - </AccordionButton> - <AccordionPanel> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} - align="stretch" - color="gray.800" - > - <Box> - <SliderWithInfo - label="Node size" - value={visuals.nodeRel} - onChange={(value) => setVisuals({ ...visuals, nodeRel: value })} - /> - <SliderWithInfo - label="Node connections size scale" - value={visuals.nodeSizeLinks} - min={0} - max={2} - onChange={(value) => setVisuals({ ...visuals, nodeSizeLinks: value })} - /> - <SliderWithInfo - label="Node zoom invariance" - value={visuals.nodeZoomSize} - min={0} - max={2} - infoText="How much the graph will try to keep the nodesize consistent across zoom scales. 0 is no consistency, node will always be their true size, 1 is linear, 2 is quadratic." - onChange={(value) => - setVisuals((prev: typeof initialVisuals) => ({ - ...prev, - nodeZoomSize: value, - })) - } - /> - {threeDim && ( - <> - <SliderWithInfo - label="Node opacity" - value={visuals.nodeOpacity} - min={0} - max={1} - onChange={(value) => setVisuals({ ...visuals, nodeOpacity: value })} - /> - <SliderWithInfo - label="Node resolution" - value={visuals.nodeResolution} - min={5} - max={32} - step={1} - onChange={(value) => - setVisuals({ ...visuals, nodeResolution: value }) - } - /> - </> - )} - <SliderWithInfo - label="Link width" - value={visuals.linkWidth} - onChange={(value) => setVisuals({ ...visuals, linkWidth: value })} - /> - {threeDim && ( - <SliderWithInfo - label="Link opacity" - min={0} - max={1} - value={visuals.linkOpacity} - onChange={(value) => setVisuals({ ...visuals, linkOpacity: value })} - /> - )} - <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 })} - /> - <ColorMenu - colorList={colorList} - label="Arrow Color" - key="arrow" - setVisuals={setVisualsCallback} - value="arrowsColor" - visValue={visuals.arrowsColor} - /> - </EnableSection> - <EnableSection - label="Directional Particles" - value={visuals.particles} - onChange={() => - setVisuals({ ...visuals, particles: !visuals.particles }) - } - > - <SliderWithInfo - label="Particle Number" - value={visuals.particlesNumber} - max={5} - step={1} - onChange={(value) => - setVisuals({ ...visuals, particlesNumber: value }) - } - /> - <SliderWithInfo - label="Particle Size" - value={visuals.particlesWidth} - onChange={(value) => - setVisuals({ ...visuals, particlesWidth: value }) - } - /> - </EnableSection> - </Box> - </VStack> - </AccordionPanel> - </AccordionItem> - {/* <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} - align="stretch" - paddingLeft={7} - color="gray.800" - > */} - <AccordionItem> - <AccordionButton> - <Flex justifyContent="space-between" w="100%"> - <Text>Labels</Text> - <AccordionIcon marginRight={2} /> - </Flex> - </AccordionButton> - <AccordionPanel> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} - align="stretch" - color="gray.800" - > - <Box> - <Flex alignItems="center" justifyContent="space-between"> - <Text>Show labels</Text> - <Menu isLazy placement="right"> - <MenuButton - as={Button} - colorScheme="" - color="black" - rightIcon={<ChevronDownIcon />} - > - {!visuals.labels - ? 'Never' - : visuals.labels < 2 - ? 'On Highlight' - : 'Always'} - </MenuButton> - <Portal> - {' '} - <MenuList zIndex="popover" bgColor="gray.200"> - <MenuItem onClick={() => setVisuals({ ...visuals, labels: 0 })}> - Never - </MenuItem> - <MenuItem onClick={() => setVisuals({ ...visuals, labels: 1 })}> - On Highlight - </MenuItem> - <MenuItem onClick={() => setVisuals({ ...visuals, labels: 2 })}> - Always - </MenuItem> - <MenuItem onClick={() => setVisuals({ ...visuals, labels: 3 })}> - Always (even in 3D) - </MenuItem> - </MenuList> - </Portal> - </Menu> - </Flex> - <VStack - spacing={1} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.400" />} - align="stretch" - paddingLeft={2} - color="gray.800" - > - <SliderWithInfo - label="Label font size" - value={visuals.labelFontSize} - min={5} - max={20} - step={0.5} - onChange={(value) => setVisuals({ ...visuals, labelFontSize: value })} - /> - <SliderWithInfo - label="Max. label characters" - value={visuals.labelLength} - min={10} - max={100} - step={1} - onChange={(value) => setVisuals({ ...visuals, labelLength: value })} - /> - <SliderWithInfo - label="Max. label line length" - value={visuals.labelWordWrap} - min={10} - max={100} - step={1} - onChange={(value) => setVisuals({ ...visuals, labelWordWrap: value })} - /> - <SliderWithInfo - label="Space between label lines" - value={visuals.labelLineSpace} - min={0.2} - max={3} - step={0.1} - onChange={(value) => - setVisuals({ ...visuals, labelLineSpace: value }) - } - /> - <ColorMenu - colorList={colorList} - label="Text" - setVisuals={setVisualsCallback} - value="labelTextColor" - visValue={visuals.labelTextColor} - /> - <ColorMenu - colorList={colorList} - label="Background" - setVisuals={setVisualsCallback} - value="labelBackgroundColor" - visValue={visuals.labelBackgroundColor} - /> - <Collapse in={!!visuals.labelBackgroundColor} animateOpacity> - <Box paddingTop={2}> - <SliderWithInfo - label="Background opacity" - value={visuals.labelBackgroundOpacity} - onChange={(value) => { - console.log(visuals.labelBackgroundOpacity) - setVisuals({ ...visuals, labelBackgroundOpacity: value }) - }} - min={0} - max={1} - step={0.01} - /> - </Box> - </Collapse> - <Collapse in={visuals.labels > 1} animateOpacity> - <Box paddingTop={2}> - <SliderWithInfo - label="Label Appearance Scale" - value={visuals.labelScale * 5} - onChange={(value) => - setVisuals({ ...visuals, labelScale: value / 5 }) - } - /> - </Box> - </Collapse> - </VStack> - </Box> - </VStack> - </AccordionPanel> - </AccordionItem> - <AccordionItem> - <AccordionButton> - <Flex justifyContent="space-between" w="100%"> - <Text>Highlighting</Text> - <AccordionIcon marginRight={2} /> - </Flex> - </AccordionButton> - <AccordionPanel> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} - align="stretch" - color="gray.800" - > - <Box> - <EnableSection - label="Highlight" - onChange={() => - setVisuals({ ...visuals, highlight: !visuals.highlight }) - } - value={visuals.highlight} - > - <VStack - spacing={1} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.400" />} - align="stretch" - paddingLeft={0} - > - <SliderWithInfo - label="Highlight Link Thickness" - value={visuals.highlightLinkSize} - onChange={(value) => - setVisuals({ ...visuals, highlightLinkSize: value }) - } - /> - <SliderWithInfo - label="Highlight Node Size" - value={visuals.highlightNodeSize} - onChange={(value) => - setVisuals({ ...visuals, highlightNodeSize: value }) - } - /> - <SliderWithInfo - min={0} - max={1} - label="Highlight Fade" - value={visuals.highlightFade} - onChange={(value) => - setVisuals({ ...visuals, highlightFade: value }) - } - /> - {/*<Flex justifyContent="space-between"> - <Text> Highlight node color </Text> - </Flex> - <Flex justifyContent="space-between"> - <Text> Highlight link color </Text> - </Flex>*/} - <EnableSection - label="Highlight Animation" - onChange={() => { - setVisuals({ ...visuals, highlightAnim: !visuals.highlightAnim }) - }} - value={visuals.highlightAnim} - > - <SliderWithInfo - label="Animation speed" - onChange={(v) => setVisuals({ ...visuals, animationSpeed: v })} - value={visuals.animationSpeed} - infoText="Slower speed has a chance of being buggy" - min={50} - max={1000} - step={10} - /> - <Select - placeholder={visuals.algorithmName} - onChange={(v) => { - setVisuals({ ...visuals, algorithmName: v.target.value }) - }} - > - {visuals.algorithmOptions.map((opt: string) => ( - <option key={opt} value={opt}> - {opt} - </option> - ))} - </Select> - </EnableSection> - </VStack> - </EnableSection> - </Box> - </VStack> - </AccordionPanel> - </AccordionItem> - <AccordionItem> - <AccordionButton> - <Flex justifyContent="space-between" w="100%"> - <Text>Citations</Text> - <AccordionIcon marginRight={2} /> - </Flex> - </AccordionButton> - <AccordionPanel> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} - align="stretch" - color="gray.800" - > - <Box> - <EnableSection - label="Dash cite links" - infoText="Add dashes to citation links made with org-roam-bibtex" - value={visuals.citeDashes} - onChange={() => - setVisuals({ ...visuals, citeDashes: !visuals.citeDashes }) - } - > - <SliderWithInfo - label="Dash length" - value={visuals.citeDashLength / 10} - onChange={(value) => - setVisuals({ ...visuals, citeDashLength: value * 10 }) - } - /> - <SliderWithInfo - label="Gap length" - value={visuals.citeGapLength / 5} - onChange={(value) => - setVisuals({ ...visuals, citeGapLength: value * 5 }) - } - /> - </EnableSection> - <ColorMenu - colorList={colorList} - label="Citation node color" - setVisuals={setVisualsCallback} - value={'citeNodeColor'} - visValue={visuals.citeNodeColor} - /> - <ColorMenu - colorList={colorList} - label="Citation link color" - setVisuals={setVisualsCallback} - value={'citeLinkColor'} - visValue={visuals.citeLinkColor} - /> - <ColorMenu - colorList={colorList} - label="Reference link highlight" - setVisuals={setVisualsCallback} - value={'citeLinkHighlightColor'} - visValue={visuals.citeLinkHighlightColor} - /> - <EnableSection - label="Dash ref links" - infoText="Add dashes to citation links, whose target has a note, made with org-roam-bibtex" - value={visuals.refDashes} - onChange={() => - setVisuals({ ...visuals, refDashes: !visuals.refDashes }) - } - > - <SliderWithInfo - label="Dash length" - value={visuals.refDashLength / 10} - onChange={(value) => - setVisuals({ ...visuals, refDashLength: value * 10 }) - } - /> - <SliderWithInfo - label="Gap length" - value={visuals.refGapLength / 5} - onChange={(value) => - setVisuals({ ...visuals, refGapLength: value * 5 }) - } - /> - </EnableSection> - <ColorMenu - colorList={colorList} - label="Reference node color" - setVisuals={setVisualsCallback} - value={'refNodeColor'} - visValue={visuals.refNodeColor} - /> - <ColorMenu - colorList={colorList} - label="Reference link color" - setVisuals={setVisualsCallback} - value={'refLinkColor'} - visValue={visuals.refLinkColor} - /> - <ColorMenu - colorList={colorList} - label="Reference link highlight" - setVisuals={setVisualsCallback} - value={'refLinkHighlightColor'} - visValue={visuals.refLinkHighlightColor} - /> - </Box> - </VStack> - </AccordionPanel> - </AccordionItem> - </Accordion> - </VStack> + <VisualsPanel + visuals={visuals} + setVisuals={setVisuals} + highlightColor={highlightColor} + setHighlightColor={setHighlightColor} + threeDim={threeDim} + /> </AccordionPanel> </AccordionItem> <AccordionItem> |