summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-08-06 02:31:59 +0200
committerThomas F. K. Jorna <[email protected]>2021-08-06 02:31:59 +0200
commitb92b006e2c22302e708672de97b9a05081ecca1c (patch)
tree7117eee455b6b8e4b60e4265e36f258a3a360f73 /components
parentd1a7d3c00a603cb774697e49696e9a0d2c4661b9 (diff)
features!: context menu, better ui, and smoother updates
Diffstat (limited to 'components')
-rw-r--r--components/config.ts46
-rw-r--r--components/contextmenu.tsx6
-rw-r--r--components/tweaks.tsx2004
3 files changed, 1026 insertions, 1030 deletions
diff --git a/components/config.ts b/components/config.ts
index 2487168..ef48973 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -21,9 +21,9 @@ export const initialPhysics = {
collisionStrength: 20,
centering: true,
centeringStrength: 0.05,
- linkStrength: 0.1,
+ linkStrength: 0.3,
linkIts: 1,
- alphaDecay: 0.02,
+ alphaDecay: 0.1,
alphaTarget: 0,
alphaMin: 0,
velocityDecay: 0.25,
@@ -34,9 +34,10 @@ export const initialPhysics = {
export const initialFilter = {
orphans: false,
parents: true,
- fileless_cites: false,
+ filelessCites: false,
tagsBlacklist: [],
tagsWhitelist: [],
+ bad: true,
nodes: [],
links: [],
date: [],
@@ -60,10 +61,11 @@ export const initialVisuals = {
highlight: true,
highlightNodeSize: 2,
highlightLinkSize: 2,
+ highlightFade: 0.8,
highlightAnim: true,
- animationSpeed: 700,
+ animationSpeed: 420,
algorithmOptions: options,
- algorithmName: 'BackOut',
+ algorithmName: 'SinusoidalOut',
linkColorScheme: 'gray.500',
nodeColorScheme: [
'red.500',
@@ -76,26 +78,26 @@ export const initialVisuals = {
'purple.500',
'orange.500',
],
- nodeHighlight: '',
+ nodeHighlight: 'purple.500',
linkHighlight: 'purple.500',
backgroundColor: 'white',
emacsNodeColor: 'gray.800',
- labelTextColor: 'black',
- labelBackgroundColor: 'white',
+ labelTextColor: 'gray.900',
+ labelBackgroundColor: '',
labelBackgroundOpacity: 0.7,
citeDashes: true,
citeDashLength: 35,
citeGapLength: 15,
- citeLinkColor: 'gray.600',
+ citeLinkColor: 'gray.700',
citeLinkHighlightColor: '',
citeNodeColor: 'black',
refDashes: true,
refDashLength: 35,
refGapLength: 15,
- refLinkColor: 'gray.400',
+ refLinkColor: 'gray.700',
refLinkHighlightColor: '',
refNodeColor: 'black',
- nodeSizeLinks: 2,
+ nodeSizeLinks: 0.5,
}
export interface TagColors {
@@ -114,3 +116,25 @@ export const initialMouse = {
local: 'click',
follow: 'double',
}
+
+export const colorList = [
+ 'red.500',
+ 'orange.500',
+ 'yellow.500',
+ 'green.500',
+ 'cyan.500',
+ 'blue.500',
+ 'pink.500',
+ 'purple.500',
+ 'white',
+ 'gray.100',
+ 'gray.200',
+ 'gray.300',
+ 'gray.400',
+ 'gray.500',
+ 'gray.600',
+ 'gray.700',
+ 'gray.800',
+ 'gray.900',
+ 'black',
+]
diff --git a/components/contextmenu.tsx b/components/contextmenu.tsx
index 228a780..755bd9d 100644
--- a/components/contextmenu.tsx
+++ b/components/contextmenu.tsx
@@ -54,6 +54,7 @@ export default interface ContextMenuProps {
menuClose: () => void
scope: { nodeIds: string[] }
deleteNodeInEmacs: (node: OrgRoamNode) => void
+ createNodeInEmacs: (node: OrgRoamNode) => void
}
export const ContextMenu = (props: ContextMenuProps) => {
@@ -67,6 +68,7 @@ export const ContextMenu = (props: ContextMenuProps) => {
scope,
openNodeInEmacs,
deleteNodeInEmacs,
+ createNodeInEmacs,
} = props
const { isOpen, onOpen, onClose } = useDisclosure()
const copyRef = useRef<any>()
@@ -104,7 +106,9 @@ export const ContextMenu = (props: ContextMenuProps) => {
Open in Emacs
</MenuItem>
) : (
- <MenuItem icon={<AddIcon />}>Create node</MenuItem>
+ <MenuItem icon={<AddIcon />} onClick={() => createNodeInEmacs(node)}>
+ Create node
+ </MenuItem>
)}
{node?.properties.ROAM_REFS && (
<MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem>
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index bed075f..c62cbd0 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -45,7 +45,7 @@ import {
} from '@chakra-ui/react'
import { CUIAutoComplete } from 'chakra-ui-autocomplete'
-import React, { useState, useContext } from 'react'
+import React, { useState, useContext, useEffect } from 'react'
import Scrollbars from 'react-custom-scrollbars-2'
import {
initialPhysics,
@@ -54,6 +54,7 @@ import {
initialMouse,
initialBehavior,
TagColors,
+ colorList,
} from './config'
import { ThemeContext } from '../util/themecontext'
@@ -96,381 +97,434 @@ export const Tweaks = (props: TweakProps) => {
} = props
const [showTweaks, setShowTweaks] = useState(true)
const { highlightColor, setHighlightColor } = useContext(ThemeContext)
- const colorList = [
- 'red.500',
- 'orange.500',
- 'yellow.500',
- 'green.500',
- 'cyan.500',
- 'blue.500',
- 'pink.500',
- 'purple.500',
- 'white',
- 'gray.100',
- 'gray.200',
- 'gray.300',
- 'gray.400',
- 'gray.500',
- 'gray.600',
- 'gray.700',
- 'gray.800',
- 'gray.900',
- 'black',
- ]
- return (
- <>
- <SlideFade in={!showTweaks}>
- <Box
- position="absolute"
- zIndex="overlay"
- marginTop={10}
- marginLeft={10}
- display={showTweaks ? 'none' : 'block'}
- >
+ return !showTweaks ? (
+ <Box
+ position="absolute"
+ zIndex="overlay"
+ marginTop={10}
+ marginLeft={10}
+ display={showTweaks ? 'none' : 'block'}
+ >
+ <IconButton
+ variant="ghost"
+ aria-label="Settings"
+ icon={<SettingsIcon />}
+ onClick={() => setShowTweaks(true)}
+ />
+ </Box>
+ ) : (
+ <Box
+ bg="alt.100"
+ w="xs"
+ marginTop={10}
+ marginLeft={10}
+ borderRadius="xl"
+ paddingBottom={5}
+ zIndex={300}
+ position="relative"
+ boxShadow="xl"
+ maxH={0.95 * globalThis.innerHeight}
+ >
+ <Box
+ display="flex"
+ justifyContent="space-between"
+ alignItems="center"
+ paddingRight={2}
+ paddingTop={1}
+ >
+ <Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}>
+ <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay">
+ {threeDim ? '3D' : '2D'}
+ </Button>
+ </Tooltip>
+ <Box display="flex" alignItems="center">
+ <Tooltip label="Reset settings to defaults">
+ <IconButton
+ aria-label="Reset Defaults"
+ icon={<RepeatClockIcon />}
+ onClick={() => {
+ setVisuals(initialVisuals)
+ setFilter(initialFilter)
+ setMouse(initialMouse)
+ setPhysics(initialPhysics)
+ setBehavior(initialBehavior)
+ }}
+ variant="none"
+ size="sm"
+ />
+ </Tooltip>
<IconButton
- aria-label="Settings"
- icon={<SettingsIcon />}
- onClick={() => setShowTweaks(true)}
+ size="sm"
+ icon={<CloseIcon />}
+ aria-label="Close Tweak Panel"
+ variant="ghost"
+ onClick={() => setShowTweaks(false)}
/>
</Box>
- </SlideFade>
- <SlideFade in={showTweaks}>
- <Box
- bg="alt.100"
- w="xs"
- marginTop={10}
- marginLeft={10}
- borderRadius="xl"
- maxH={650}
- paddingBottom={5}
- zIndex={300}
- position="relative"
- boxShadow="xl"
- >
+ </Box>
+ <Scrollbars
+ autoHeight
+ autoHeightMax={0.85 * globalThis.innerHeight}
+ autoHide
+ renderThumbVertical={({ style, ...props }) => (
<Box
- display="flex"
- justifyContent="space-between"
- alignItems="center"
- paddingRight={2}
- paddingTop={1}
- >
- <Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}>
- <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay">
- {threeDim ? '3D' : '2D'}
- </Button>
- </Tooltip>
- <Box display="flex" alignItems="center">
- <Tooltip label="Reset settings to defaults">
- <IconButton
- aria-label="Reset Defaults"
- icon={<RepeatClockIcon />}
- onClick={() => {
- setVisuals(initialVisuals)
- setFilter(initialFilter)
- setMouse(initialMouse)
- setPhysics(initialPhysics)
- setBehavior(initialBehavior)
- }}
- variant="none"
- size="sm"
- />
- </Tooltip>
- <IconButton
- size="sm"
- icon={<CloseIcon />}
- aria-label="Close Tweak Panel"
- variant="ghost"
- onClick={() => setShowTweaks(false)}
- />
- </Box>
- </Box>
- <Scrollbars
- autoHeight
- autoHeightMax={600}
- autoHide
- renderThumbVertical={({ style, ...props }) => (
- <Box
- {...props}
- style={{
- ...style,
- borderRadius: 10,
- }}
- bg={highlightColor}
- />
- )}
- >
- <Accordion allowMultiple allowToggle color="black">
- <AccordionItem>
- <AccordionButton>
- <AccordionIcon marginRight={2} />
- <Heading size="sm">Filter</Heading>
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- paddingLeft={7}
- color="gray.800"
- >
- <Flex justifyContent="space-between">
- <Text>Orphans</Text>
- <Switch
- onChange={() => {
- setFilter({ ...filter, orphans: !filter.orphans })
- }}
- isChecked={filter.orphans}
- ></Switch>
- </Flex>
- <Flex justifyContent="space-between">
- <Text>Link nodes with parent file</Text>
- <Switch
- onChange={() => {
- setFilter({ ...filter, parents: !filter.parents })
- }}
- isChecked={filter.parents}
- ></Switch>
- </Flex>
- <Flex justifyContent="space-between">
- <Text>Citations without note files</Text>
- <Switch
- onChange={() => {
- setFilter({ ...filter, fileless_cites: !filter.fileless_cites })
- }}
- isChecked={filter.fileless_cites}
- ></Switch>
- </Flex>
- </VStack>
- <Accordion padding={0} allowToggle allowMultiple paddingLeft={3}>
- <AccordionItem>
- <AccordionButton>
- Tag filters
- <AccordionIcon />
- </AccordionButton>
- <AccordionPanel pr={0} mr={0}>
- <TagPanel
- highlightColor={highlightColor}
- filter={filter}
- setFilter={setFilter}
- tags={tags}
- mode="blacklist"
- />
- <TagPanel
- highlightColor={highlightColor}
- filter={filter}
- setFilter={setFilter}
- tags={tags}
- mode="whitelist"
- />
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- Tag Colors
- <AccordionIcon />
- </AccordionButton>
- <AccordionPanel pr={0} mr={0}>
- <TagColorPanel
- tags={tags}
- colorList={colorList}
- tagColors={tagColors}
- setTagColors={setTagColors}
- highlightColor={highlightColor}
- />
- </AccordionPanel>
- </AccordionItem>
- </Accordion>
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton display="flex" justifyContent="space-between">
- <Box display="flex">
- <AccordionIcon marginRight={2} />
- <Heading size="sm">Physics</Heading>
- </Box>
- {/* <Switch
+ {...props}
+ style={{
+ ...style,
+ borderRadius: 10,
+ }}
+ bg={highlightColor}
+ />
+ )}
+ >
+ <Accordion allowMultiple allowToggle color="black">
+ <AccordionItem>
+ <AccordionButton>
+ <AccordionIcon marginRight={2} />
+ <Heading size="sm">Filter</Heading>
+ </AccordionButton>
+ <AccordionPanel>
+ <VStack
+ spacing={2}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.500" />}
+ align="stretch"
+ paddingLeft={7}
+ color="gray.800"
+ >
+ <Flex justifyContent="space-between">
+ <Text>Orphans</Text>
+ <Switch
+ onChange={() => {
+ setFilter({ ...filter, orphans: !filter.orphans })
+ }}
+ isChecked={filter.orphans}
+ ></Switch>
+ </Flex>
+ <Flex justifyContent="space-between">
+ <Text>Link nodes with parent file</Text>
+ <Switch
+ onChange={() => {
+ setFilter({ ...filter, parents: !filter.parents })
+ }}
+ isChecked={filter.parents}
+ ></Switch>
+ </Flex>
+ <Flex justifyContent="space-between">
+ <Text>Citations without note files</Text>
+ <Switch
+ onChange={() => {
+ setFilter({ ...filter, filelessCites: !filter.filelessCites })
+ }}
+ isChecked={filter.filelessCites}
+ ></Switch>
+ </Flex>
+ <Flex justifyContent="space-between">
+ <Text>Non-existant nodes</Text>
+ <Switch
+ onChange={() => {
+ setTagColors({ ...tagColors, bad: 'white' })
+ setFilter({ ...filter, bad: !filter.bad })
+ }}
+ isChecked={filter.bad}
+ ></Switch>
+ </Flex>
+ </VStack>
+ <Accordion padding={0} allowToggle allowMultiple paddingLeft={3}>
+ <AccordionItem>
+ <AccordionButton>
+ Tag filters
+ <AccordionIcon />
+ </AccordionButton>
+ <AccordionPanel pr={0} mr={0}>
+ <TagPanel
+ highlightColor={highlightColor}
+ filter={filter}
+ setFilter={setFilter}
+ tags={tags}
+ mode="blacklist"
+ />
+ <TagPanel
+ highlightColor={highlightColor}
+ filter={filter}
+ setFilter={setFilter}
+ tags={tags}
+ mode="whitelist"
+ />
+ </AccordionPanel>
+ </AccordionItem>
+ <AccordionItem>
+ <AccordionButton>
+ Tag Colors
+ <AccordionIcon />
+ </AccordionButton>
+ <AccordionPanel pr={0} mr={0}>
+ <TagColorPanel
+ tags={tags}
+ colorList={colorList}
+ tagColors={tagColors}
+ setTagColors={setTagColors}
+ highlightColor={highlightColor}
+ />
+ </AccordionPanel>
+ </AccordionItem>
+ </Accordion>
+ </AccordionPanel>
+ </AccordionItem>
+ <AccordionItem>
+ <AccordionButton display="flex" justifyContent="space-between">
+ <Box display="flex">
+ <AccordionIcon marginRight={2} />
+ <Heading size="sm">Physics</Heading>
+ </Box>
+ {/* <Switch
id="physicsOn"
onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })}
isChecked={physics.enabled}
/> */}
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- paddingLeft={7}
- color="gray.800"
- >
- <EnableSection
- label="Gravity"
- value={physics.gravityOn}
- onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })}
- >
- <SliderWithInfo
- label="Strength"
- value={physics.gravity * 10}
- onChange={(v) => setPhysics({ ...physics, gravity: v / 10 })}
- />
- </EnableSection>
- <SliderWithInfo
- value={-physics.charge / 100}
- onChange={(value) => setPhysics({ ...physics, charge: -100 * value })}
- label="Repulsive Force"
- />
- <EnableSection
- label="Collision"
- infoText="Perfomance sap, disable if slow"
- value={physics.collision}
- onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
- >
- <SliderWithInfo
- value={physics.collisionStrength / 5}
- onChange={(value) =>
- setPhysics({ ...physics, collisionStrength: value * 5 })
- }
- label="Collision Radius"
- infoText="Easy with this one, high values can lead to a real jiggly mess"
- />
- </EnableSection>
- <SliderWithInfo
- value={physics.linkStrength * 5}
- onChange={(value) => setPhysics({ ...physics, linkStrength: value / 5 })}
- label="Link Force"
- />
- <SliderWithInfo
- label="Link Iterations"
- value={physics.linkIts}
- onChange={(value) => setPhysics({ ...physics, linkIts: value })}
- min={0}
- max={6}
- step={1}
- infoText="How many links down the line the physics of a single node affects (Slow)"
- />
- <SliderWithInfo
- label="Viscosity"
- value={physics.velocityDecay * 10}
- onChange={(value) => setPhysics({ ...physics, velocityDecay: value / 10 })}
- />
- </VStack>
- <Box>
- <Accordion paddingLeft={3} allowToggle>
- <AccordionItem>
- <AccordionButton>
- <Text>Advanced</Text>
- <AccordionIcon marginRight={2} />
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- paddingLeft={3}
- color="gray.800"
- >
- <SliderWithInfo
- label="Stabilization rate"
- value={physics.alphaDecay * 50}
- onChange={(value) =>
- setPhysics({ ...physics, alphaDecay: value / 50 })
- }
- />
- <EnableSection
- label="Center nodes"
- value={physics.centering}
- onChange={() =>
- setPhysics({ ...physics, centering: !physics.centering })
- }
- infoText="Keeps the nodes in the center of the viewport. If disabled you can drag the nodes anywhere you want."
- >
- <SliderWithInfo
- label="Centering Strength"
- value={physics.centeringStrength}
- max={2}
- step={0.01}
- onChange={(v) => setPhysics({ ...physics, centeringStrength: v })}
+ </AccordionButton>
+ <AccordionPanel>
+ <VStack
+ spacing={2}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.500" />}
+ align="stretch"
+ paddingLeft={7}
+ color="gray.800"
+ >
+ <EnableSection
+ label="Gravity"
+ value={physics.gravityOn}
+ onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })}
+ >
+ <SliderWithInfo
+ label="Strength"
+ value={physics.gravity * 10}
+ onChange={(v) => setPhysics({ ...physics, gravity: v / 10 })}
+ />
+ </EnableSection>
+ <SliderWithInfo
+ value={-physics.charge / 100}
+ onChange={(value) => setPhysics({ ...physics, charge: -100 * value })}
+ label="Repulsive Force"
+ />
+ <EnableSection
+ label="Collision"
+ infoText="Perfomance sap, disable if slow"
+ value={physics.collision}
+ onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
+ >
+ <SliderWithInfo
+ value={physics.collisionStrength / 5}
+ onChange={(value) => setPhysics({ ...physics, collisionStrength: value * 5 })}
+ label="Collision Radius"
+ infoText="Easy with this one, high values can lead to a real jiggly mess"
+ />
+ </EnableSection>
+ <SliderWithInfo
+ value={physics.linkStrength * 5}
+ onChange={(value) => setPhysics({ ...physics, linkStrength: value / 5 })}
+ label="Link Force"
+ />
+ <SliderWithInfo
+ label="Link Iterations"
+ value={physics.linkIts}
+ onChange={(value) => setPhysics({ ...physics, linkIts: value })}
+ min={0}
+ max={6}
+ step={1}
+ infoText="How many links down the line the physics of a single node affects (Slow)"
+ />
+ <SliderWithInfo
+ label="Viscosity"
+ value={physics.velocityDecay * 10}
+ onChange={(value) => setPhysics({ ...physics, velocityDecay: value / 10 })}
+ />
+ </VStack>
+ <Box>
+ <Accordion paddingLeft={3} allowToggle>
+ <AccordionItem>
+ <AccordionButton>
+ <Text>Advanced</Text>
+ <AccordionIcon marginRight={2} />
+ </AccordionButton>
+ <AccordionPanel>
+ <VStack
+ spacing={2}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.500" />}
+ align="stretch"
+ paddingLeft={3}
+ color="gray.800"
+ >
+ <SliderWithInfo
+ label="Stabilization rate"
+ value={physics.alphaDecay * 50}
+ onChange={(value) => setPhysics({ ...physics, alphaDecay: value / 50 })}
+ />
+ <EnableSection
+ label="Center nodes"
+ value={physics.centering}
+ onChange={() => setPhysics({ ...physics, centering: !physics.centering })}
+ infoText="Keeps the nodes in the center of the viewport. If disabled you can drag the nodes anywhere you want."
+ >
+ <SliderWithInfo
+ label="Centering Strength"
+ value={physics.centeringStrength}
+ max={2}
+ step={0.01}
+ onChange={(v) => setPhysics({ ...physics, centeringStrength: v })}
+ />
+ </EnableSection>
+ </VStack>
+ </AccordionPanel>
+ </AccordionItem>
+ </Accordion>
+ </Box>
+ </AccordionPanel>
+ </AccordionItem>
+ <AccordionItem>
+ <AccordionButton>
+ <AccordionIcon marginRight={2} />
+ <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),
+ })
+ }}
/>
- </EnableSection>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- </Accordion>
- </Box>
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- <AccordionIcon marginRight={2} />
- <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>
+ <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 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 })
}}
- />
- </Tooltip>
- <Menu placement="right" closeOnSelect={false} matchWidth>
- <MenuButton
- width={20}
- as={Button}
- colorScheme=""
- color="black"
- rightIcon={<ChevronDownIcon />}
>
+ {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 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}
@@ -486,671 +540,587 @@ export const Tweaks = (props: TweakProps) => {
></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 placement="right">
- <MenuButton
- as={Button}
- colorScheme=""
- color="black"
- rightIcon={<ChevronDownIcon />}
+ )}
+ </Box>
+ </MenuButton>
+ <Portal>
+ {' '}
+ <MenuList minW={10} zIndex="popover" bgColor="gray.200">
+ <MenuItem
+ onClick={() => setVisuals({ ...visuals, linkColorScheme: '' })}
+ justifyContent="space-between"
+ alignItems="center"
+ display="flex"
>
- <Box>
- {visuals.linkColorScheme ? (
+ <Flex
+ height={6}
+ width={6}
+ flexDirection="column"
+ flexWrap="wrap"
+ >
+ {visuals.nodeColorScheme.map((color) => (
<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>
+ bgColor={color}
+ flex="1 1 8px"
+ borderRadius="2xl"
+ ></Box>
))}
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Accent</Text>
- <Menu placement="right">
- <MenuButton
- as={Button}
- colorScheme=""
- color="black"
- rightIcon={<ChevronDownIcon />}
- >
- {
+ </Flex>
+ </MenuItem>
+ {colorList.map((color) => (
+ <MenuItem
+ key={color}
+ onClick={() =>
+ setVisuals({
+ ...visuals,
+ linkColorScheme: color,
+ })
+ }
+ justifyContent="space-between"
+ alignItems="center"
+ display="flex"
+ >
<Box
- bgColor={highlightColor}
+ bgColor={color}
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"
- visuals={visuals}
- setVisuals={setVisuals}
- value="linkHighlight"
- visValue={visuals.linkHighlight}
- />
- <ColorMenu
- colorList={colorList}
- label="Node highlight"
- visuals={visuals}
- setVisuals={setVisuals}
- value="nodeHighlight"
- visValue={visuals.nodeHighlight}
- />
- <ColorMenu
- colorList={colorList}
- label="Background"
- visuals={visuals}
- setVisuals={setVisuals}
- value="backgroundColor"
- visValue={visuals.backgroundColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Emacs node"
- visuals={visuals}
- setVisuals={setVisuals}
- value="emacsNodeColor"
- visValue={visuals.emacsNodeColor}
- />
- </Box>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- </Accordion>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- paddingLeft={7}
- color="gray.800"
- >
- <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 })}
- />
- {threeDim && (
- <>
- <SliderWithInfo
- label="Node opacity"
- value={visuals.nodeOpacity}
- min={0}
- max={1}
- onChange={(value) => setVisuals({ ...visuals, nodeOpacity: value })}
+ </MenuItem>
+ ))}
+ </MenuList>
+ </Portal>
+ </Menu>
+ </Flex>
+ <Flex alignItems="center" justifyContent="space-between">
+ <Text>Accent</Text>
+ <Menu 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"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ value="linkHighlight"
+ visValue={visuals.linkHighlight}
/>
- <SliderWithInfo
- label="Node resolution"
- value={visuals.nodeResolution}
- min={5}
- max={32}
- step={1}
- onChange={(value) => setVisuals({ ...visuals, nodeResolution: value })}
+ <ColorMenu
+ colorList={colorList}
+ label="Node highlight"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ value="nodeHighlight"
+ visValue={visuals.nodeHighlight}
/>
- </>
- )}
+ <ColorMenu
+ colorList={colorList}
+ label="Background"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ value="backgroundColor"
+ visValue={visuals.backgroundColor}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Emacs node"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ value="emacsNodeColor"
+ visValue={visuals.emacsNodeColor}
+ />
+ </Box>
+ </VStack>
+ </AccordionPanel>
+ </AccordionItem>
+ </Accordion>
+ <VStack
+ spacing={2}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.500" />}
+ align="stretch"
+ paddingLeft={7}
+ color="gray.800"
+ >
+ <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 })}
+ />
+ {threeDim && (
+ <>
<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="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"
- visuals={visuals}
- setVisuals={setVisuals}
- value={'citeNodeColor'}
- visValue={visuals.citeNodeColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Citation link color"
- visuals={visuals}
- setVisuals={setVisuals}
- value={'citeLinkColor'}
- visValue={visuals.citeLinkColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Reference link highlight"
- visuals={visuals}
- setVisuals={setVisuals}
- 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"
- visuals={visuals}
- setVisuals={setVisuals}
- value={'refNodeColor'}
- visValue={visuals.refNodeColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Reference link color"
- visuals={visuals}
- setVisuals={setVisuals}
- value={'refLinkColor'}
- visValue={visuals.refLinkColor}
+ label="Node opacity"
+ value={visuals.nodeOpacity}
+ min={0}
+ max={1}
+ onChange={(value) => setVisuals({ ...visuals, nodeOpacity: value })}
/>
- <ColorMenu
- colorList={colorList}
- label="Reference link highlight"
- visuals={visuals}
- setVisuals={setVisuals}
- value={'refLinkHighlightColor'}
- visValue={visuals.refLinkHighlightColor}
+ <SliderWithInfo
+ label="Node resolution"
+ value={visuals.nodeResolution}
+ min={5}
+ max={32}
+ step={1}
+ onChange={(value) => setVisuals({ ...visuals, nodeResolution: value })}
/>
- <Box>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Labels</Text>
- <Menu 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>
- <Collapse in={visuals.labels > 0} animateOpacity>
- <VStack
- spacing={1}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.400" />}
- align="stretch"
- paddingLeft={2}
- color="gray.800"
- >
- <ColorMenu
- colorList={colorList}
- label="Text"
- visuals={visuals}
- setVisuals={setVisuals}
- value="labelTextColor"
- visValue={visuals.labelTextColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Text"
- visuals={visuals}
- setVisuals={setVisuals}
- 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>
- </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 })}
- />
- <ColorMenu
- colorList={colorList}
- label="Arrow Color"
- visuals={visuals}
- setVisuals={setVisuals}
- 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>
- <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 })
- }
- />
- {/*<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>
- </VStack>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- <AccordionIcon marginRight={2} />
- <Heading size="sm">Behavior</Heading>
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- paddingLeft={7}
- color="gray.800"
+ </>
+ )}
+ <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="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"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ value={'citeNodeColor'}
+ visValue={visuals.citeNodeColor}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Citation link color"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ value={'citeLinkColor'}
+ visValue={visuals.citeLinkColor}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Reference link highlight"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ 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"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ value={'refNodeColor'}
+ visValue={visuals.refNodeColor}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Reference link color"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ value={'refLinkColor'}
+ visValue={visuals.refLinkColor}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Reference link highlight"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ value={'refLinkHighlightColor'}
+ visValue={visuals.refLinkHighlightColor}
+ />
+ <Box>
<Flex alignItems="center" justifyContent="space-between">
- <Flex>
- <Text>Expand Node</Text>
- <InfoTooltip infoText="View only the node and its direct neighbors" />
- </Flex>
+ <Text>Labels</Text>
<Menu placement="right">
<MenuButton
as={Button}
- rightIcon={<ChevronDownIcon />}
colorScheme=""
color="black"
- >
- <Text>
- {mouse.local
- ? mouse.local[0]!.toUpperCase() + mouse.local!.slice(1)
- : 'Never'}
- </Text>
- </MenuButton>
- <Portal>
- {' '}
- <MenuList zIndex="popover" bgColor="gray.200">
- <MenuItem onClick={() => setMouse({ ...mouse, local: '' })}>
- Never
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, local: 'click' })}>
- Click
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, local: 'double' })}>
- Double Click
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, local: 'right' })}>
- Right Click
- </MenuItem>
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Open in Emacs</Text>
- <Menu placement="right">
- <MenuButton
- as={Button}
rightIcon={<ChevronDownIcon />}
- colorScheme=""
- color="black"
>
- <Text>
- {mouse.follow
- ? mouse.follow[0]!.toUpperCase() + mouse.follow!.slice(1)
- : 'Never'}
- </Text>
+ {!visuals.labels
+ ? 'Never'
+ : visuals.labels < 2
+ ? 'On Highlight'
+ : 'Always'}
</MenuButton>
<Portal>
{' '}
- <MenuList bgColor="gray.200" zIndex="popover">
- <MenuItem onClick={() => setMouse({ ...mouse, follow: '' })}>
+ <MenuList zIndex="popover" bgColor="gray.200">
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 0 })}>
Never
</MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, follow: 'click' })}>
- Click
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 1 })}>
+ On Highlight
</MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, follow: 'double' })}>
- Double Click
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 2 })}>
+ Always
</MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, follow: 'right' })}>
- Right Click
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 3 })}>
+ Always (even in 3D)
</MenuItem>
</MenuList>
</Portal>
</Menu>
</Flex>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Follow Emacs by...</Text>
- <Menu placement="right">
- <MenuButton
- as={Button}
- rightIcon={<ChevronDownIcon />}
- colorScheme=""
- color="black"
+ <Collapse in={visuals.labels > 0} animateOpacity>
+ <VStack
+ spacing={1}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.400" />}
+ align="stretch"
+ paddingLeft={2}
+ color="gray.800"
+ >
+ <ColorMenu
+ colorList={colorList}
+ label="Text"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ value="labelTextColor"
+ visValue={visuals.labelTextColor}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Text"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ 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>
+ </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 })}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Arrow Color"
+ visuals={visuals}
+ setVisuals={setVisuals}
+ 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>
+ <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 })
+ }}
>
- <Text>{behavior.follow[0].toUpperCase() + behavior.follow.slice(1)}</Text>
- </MenuButton>
- <Portal>
- {' '}
- <MenuList bgColor="gray.200" zIndex="popover">
- <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'color' })}>
- Just coloring the currently opened node
- </MenuItem>
- <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'local' })}>
- Opening the local graph
- </MenuItem>
- <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'zoom' })}>
- Zooming to the current node
- </MenuItem>
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- {/* <Flex alignItems="center" justifyContent="space-between">
+ {visuals.algorithmOptions.map((opt: string) => (
+ <option key={opt} value={opt}>
+ {opt}
+ </option>
+ ))}
+ </Select>
+ </EnableSection>
+ </VStack>
+ </EnableSection>
+ </VStack>
+ </VStack>
+ </AccordionPanel>
+ </AccordionItem>
+ <AccordionItem>
+ <AccordionButton>
+ <AccordionIcon marginRight={2} />
+ <Heading size="sm">Behavior</Heading>
+ </AccordionButton>
+ <AccordionPanel>
+ <VStack
+ spacing={2}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.500" />}
+ align="stretch"
+ paddingLeft={7}
+ color="gray.800"
+ >
+ <Flex alignItems="center" justifyContent="space-between">
+ <Flex>
+ <Text>Expand Node</Text>
+ <InfoTooltip infoText="View only the node and its direct neighbors" />
+ </Flex>
+ <Menu placement="right">
+ <MenuButton
+ as={Button}
+ rightIcon={<ChevronDownIcon />}
+ colorScheme=""
+ color="black"
+ >
+ <Text>
+ {mouse.local
+ ? mouse.local[0]!.toUpperCase() + mouse.local!.slice(1)
+ : 'Never'}
+ </Text>
+ </MenuButton>
+ <Portal>
+ {' '}
+ <MenuList zIndex="popover" bgColor="gray.200">
+ <MenuItem onClick={() => setMouse({ ...mouse, local: '' })}>Never</MenuItem>
+ <MenuItem onClick={() => setMouse({ ...mouse, local: 'click' })}>
+ Click
+ </MenuItem>
+ <MenuItem onClick={() => setMouse({ ...mouse, local: 'double' })}>
+ Double Click
+ </MenuItem>
+ <MenuItem onClick={() => setMouse({ ...mouse, local: 'right' })}>
+ Right Click
+ </MenuItem>
+ </MenuList>
+ </Portal>
+ </Menu>
+ </Flex>
+ <Flex alignItems="center" justifyContent="space-between">
+ <Text>Open in Emacs</Text>
+ <Menu placement="right">
+ <MenuButton
+ as={Button}
+ rightIcon={<ChevronDownIcon />}
+ colorScheme=""
+ color="black"
+ >
+ <Text>
+ {mouse.follow
+ ? mouse.follow[0]!.toUpperCase() + mouse.follow!.slice(1)
+ : 'Never'}
+ </Text>
+ </MenuButton>
+ <Portal>
+ {' '}
+ <MenuList bgColor="gray.200" zIndex="popover">
+ <MenuItem onClick={() => setMouse({ ...mouse, follow: '' })}>
+ Never
+ </MenuItem>
+ <MenuItem onClick={() => setMouse({ ...mouse, follow: 'click' })}>
+ Click
+ </MenuItem>
+ <MenuItem onClick={() => setMouse({ ...mouse, follow: 'double' })}>
+ Double Click
+ </MenuItem>
+ <MenuItem onClick={() => setMouse({ ...mouse, follow: 'right' })}>
+ Right Click
+ </MenuItem>
+ </MenuList>
+ </Portal>
+ </Menu>
+ </Flex>
+ <Flex alignItems="center" justifyContent="space-between">
+ <Text>Follow Emacs by...</Text>
+ <Menu placement="right">
+ <MenuButton
+ as={Button}
+ rightIcon={<ChevronDownIcon />}
+ colorScheme=""
+ color="black"
+ >
+ <Text>{behavior.follow[0].toUpperCase() + behavior.follow.slice(1)}</Text>
+ </MenuButton>
+ <Portal>
+ {' '}
+ <MenuList bgColor="gray.200" zIndex="popover">
+ <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'color' })}>
+ Just coloring the currently opened node
+ </MenuItem>
+ <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'local' })}>
+ Opening the local graph
+ </MenuItem>
+ <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'zoom' })}>
+ Zooming to the current node
+ </MenuItem>
+ </MenuList>
+ </Portal>
+ </Menu>
+ </Flex>
+ {/* <Flex alignItems="center" justifyContent="space-between">
<Flex>
<Text>Follow local graph</Text>
<InfoTooltip infoText="When in local mode and opening a node that already exists in Emacs, should I add that local graph or open the new one?" />
@@ -1181,31 +1151,29 @@ export const Tweaks = (props: TweakProps) => {
</Portal>
</Menu>
</Flex> */}
- <SliderWithInfo
- label="Zoom speed"
- value={behavior.zoomSpeed}
- min={0}
- max={4000}
- step={100}
- onChange={(value) => setBehavior({ ...behavior, zoomSpeed: value })}
- />
- <SliderWithInfo
- label="Zoom padding"
- value={behavior.zoomPadding}
- min={0}
- max={400}
- step={1}
- onChange={(value) => setBehavior({ ...behavior, zoomPadding: value })}
- infoText="How much to zoom out to accomodate all nodes when changing the view."
- />
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- </Accordion>
- </Scrollbars>
- </Box>
- </SlideFade>
- </>
+ <SliderWithInfo
+ label="Zoom speed"
+ value={behavior.zoomSpeed}
+ min={0}
+ max={4000}
+ step={100}
+ onChange={(value) => setBehavior({ ...behavior, zoomSpeed: value })}
+ />
+ <SliderWithInfo
+ label="Zoom padding"
+ value={behavior.zoomPadding}
+ min={0}
+ max={400}
+ step={1}
+ onChange={(value) => setBehavior({ ...behavior, zoomPadding: value })}
+ infoText="How much to zoom out to accomodate all nodes when changing the view."
+ />
+ </VStack>
+ </AccordionPanel>
+ </AccordionItem>
+ </Accordion>
+ </Scrollbars>
+ </Box>
)
}
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 07:11:26 +0000