summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/Graph/drawLabels.ts21
-rw-r--r--components/Tweaks/LabelsPanel.tsx217
-rw-r--r--components/Tweaks/SliderWithInfo.tsx2
-rw-r--r--components/Tweaks/TagColorPanel.tsx8
-rw-r--r--components/Tweaks/TagPanel.tsx22
-rw-r--r--components/Tweaks/VisualsPanel.tsx3
-rw-r--r--components/config.ts10
7 files changed, 161 insertions, 122 deletions
diff --git a/components/Graph/drawLabels.ts b/components/Graph/drawLabels.ts
index f559d3c..fa19270 100644
--- a/components/Graph/drawLabels.ts
+++ b/components/Graph/drawLabels.ts
@@ -17,8 +17,8 @@ export interface drawLabelsProps {
nodeSize: (node: NodeObject) => number
filteredLinksByNodeId: LinksByNodeId
nodeRel: number
- hoverNode: NodeObject
- lastHoverNode: OrgRoamNode
+ hoverNode: NodeObject | null
+ lastHoverNode: OrgRoamNode | null
}
export const getLabelOpacity = (
@@ -65,9 +65,14 @@ export function drawLabels(props: drawLabelsProps) {
const isHighlighty = !!(highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!])
const fadeFactor = Math.min(
- 3 * (globalScale - visuals.labelScale) + Math.pow(Math.min(links.length, 10), 1 / 2),
+ 5 * (globalScale - visuals.labelScale) +
+ 2 *
+ Math.pow(Math.min(links.length, visuals.labelDynamicDegree), visuals.labelDynamicStrength),
1,
)
+ if (fadeFactor < 0.01 && !isHighlighty) {
+ return
+ }
const nodeTitle = (node as OrgRoamNode).title ?? ''
const label = nodeTitle.substring(0, visuals.labelLength)
@@ -75,11 +80,11 @@ export function drawLabels(props: drawLabelsProps) {
const nodeS = Math.cbrt(
(visuals.nodeRel * nodeSize(node)) / Math.pow(globalScale, visuals.nodeZoomSize),
)
- const fontSize =
- hoverId == (node as OrgRoamNode).id
- ? Math.max((visuals.labelFontSize * nodeS) / 2, (visuals.labelFontSize * nodeS) / 3)
- : (visuals.labelFontSize * nodeS) / 3
+ const fontSize = visuals.labelFontSize / Math.cbrt(Math.pow(globalScale, visuals.nodeZoomSize))
+ // ? Math.max((visuals.labelFontSize * nodeS) / 2, (visuals.labelFontSize * nodeS) / 3)
+ // : (visuals.labelFontSize * nodeS) / 3
+ // * nodeS) / 3
const textWidth = ctx.measureText(label).width
const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) as [
number,
@@ -118,7 +123,7 @@ export function drawLabels(props: drawLabelsProps) {
truncatedWords.forEach((word, index) => {
ctx.fillText(
word,
- node.x! - 2,
+ node.x!,
node.y! + highlightedNodeOffset * nodeS * 8 + visuals.labelLineSpace * fontSize * index,
)
})
diff --git a/components/Tweaks/LabelsPanel.tsx b/components/Tweaks/LabelsPanel.tsx
index 013409e..c40b689 100644
--- a/components/Tweaks/LabelsPanel.tsx
+++ b/components/Tweaks/LabelsPanel.tsx
@@ -28,112 +28,135 @@ export const LabelsPanel = (props: LabelsPanelProps) => {
<VStack
spacing={2}
justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
+ divider={<StackDivider borderColor="gray.400" />}
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 })}
- />
+ <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>
+ <Collapse in={visuals.labels > 1} animateOpacity>
+ <Box paddingTop={2}>
<SliderWithInfo
- label="Max. label line length"
- value={visuals.labelWordWrap}
- min={10}
- max={100}
- step={1}
- onChange={(value) => setVisuals({ ...visuals, labelWordWrap: value })}
+ label="Label Appearance Scale"
+ value={visuals.labelScale * 2}
+ onChange={(value) => setVisuals({ ...visuals, labelScale: value / 2 })}
/>
+ </Box>
+ <Box paddingTop={2}>
<SliderWithInfo
- label="Space between label lines"
- value={visuals.labelLineSpace}
- min={0.2}
- max={3}
- step={0.1}
- onChange={(value) => setVisuals({ ...visuals, labelLineSpace: value })}
+ label="Label dynamicity"
+ infoText="By default, labels of nodes with more links will appear earlier than those with fewer. This slider changes the strength of this effect, put it at zero to disable it."
+ value={visuals.labelDynamicStrength}
+ min={0}
+ max={1}
+ step={0.05}
+ onChange={(value) =>
+ setVisuals((curr: typeof initialVisuals) => ({
+ ...curr,
+ labelDynamicStrength: value,
+ }))
+ }
/>
- <ColorMenu
- colorList={colorList}
- label="Text"
- setVisuals={setVisuals}
- value="labelTextColor"
- visValue={visuals.labelTextColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Background"
- 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 in={visuals.labelDynamicStrength > 0}>
+ <SliderWithInfo
+ label="Dynamic zoom degree cap"
+ infoText="By default, labels of nodes with more links will appear earlier than those with fewer. This slider changes the strength of this effect, put it at zero to disable it."
+ value={visuals.labelDynamicDegree}
+ min={1}
+ max={15}
+ step={1}
+ onChange={(value) =>
+ setVisuals((curr: typeof initialVisuals) => ({
+ ...curr,
+ labelDynamicDegree: value,
+ }))
+ }
+ />
</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>
+ </Collapse>
+ <ColorMenu
+ colorList={colorList}
+ label="Text"
+ setVisuals={setVisuals}
+ value="labelTextColor"
+ visValue={visuals.labelTextColor}
+ />
+ <Box>
+ <ColorMenu
+ colorList={colorList}
+ label="Background"
+ 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>
</Box>
+ <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 })}
+ />
</VStack>
)
}
diff --git a/components/Tweaks/SliderWithInfo.tsx b/components/Tweaks/SliderWithInfo.tsx
index 9d6903a..7984711 100644
--- a/components/Tweaks/SliderWithInfo.tsx
+++ b/components/Tweaks/SliderWithInfo.tsx
@@ -31,7 +31,7 @@ export const SliderWithInfo = ({
const { highlightColor } = useContext(ThemeContext)
return (
<Box key={label} pt={1} pb={2}>
- <Box display="flex" alignItems="flex-end">
+ <Box display="flex" alignItems="flex-end" mb={2}>
<Text>{label}</Text>
{infoText && <InfoTooltip infoText={infoText} />}
</Box>
diff --git a/components/Tweaks/TagColorPanel.tsx b/components/Tweaks/TagColorPanel.tsx
index 0a595e8..d20b540 100644
--- a/components/Tweaks/TagColorPanel.tsx
+++ b/components/Tweaks/TagColorPanel.tsx
@@ -40,7 +40,8 @@ export const TagColorPanel = (props: TagColorPanelProps) => {
<Box>
<CUIAutoComplete
items={tagArray}
- label="Add tag to filter"
+ labelStyleProps={{ fontWeight: 300, fontSize: 14 }}
+ label="Add tag to color"
placeholder=" "
disableCreateItem={true}
selectedItems={selectedItems}
@@ -60,9 +61,10 @@ export const TagColorPanel = (props: TagColorPanelProps) => {
highlightItemBg="gray.400"
toggleButtonStyleProps={{ variant: 'outline' }}
inputStyleProps={{
+ height: 8,
focusBorderColor: highlightColor,
color: 'gray.800',
- borderColor: 'gray.600',
+ borderColor: 'gray.500',
}}
tagStyleProps={{
display: 'none',
@@ -86,7 +88,7 @@ export const TagColorPanel = (props: TagColorPanelProps) => {
return (
<Flex key={tag} alignItems="center" justifyContent="space-between" width="100%" pl={2}>
<Box width="100%">
- <Text fontWeight="bold">{tag}</Text>
+ <Text>{tag}</Text>
</Box>
<Menu isLazy placement="right">
<MenuButton as={Button} colorScheme="" color="black">
diff --git a/components/Tweaks/TagPanel.tsx b/components/Tweaks/TagPanel.tsx
index 4d2e355..8d63c6f 100644
--- a/components/Tweaks/TagPanel.tsx
+++ b/components/Tweaks/TagPanel.tsx
@@ -25,6 +25,7 @@ export const TagPanel = (props: TagPanelProps) => {
return (
<CUIAutoComplete
+ labelStyleProps={{ fontWeight: 300, fontSize: 14 }}
items={tagArray}
label={'Add tag to ' + mode}
placeholder=" "
@@ -41,16 +42,25 @@ export const TagPanel = (props: TagPanelProps) => {
highlightItemBg="gray.400"
toggleButtonStyleProps={{ variant: 'outline' }}
inputStyleProps={{
+ mt: 2,
+ height: 8,
focusBorderColor: highlightColor,
color: 'gray.800',
- borderColor: 'gray.600',
+ borderColor: 'gray.500',
}}
tagStyleProps={{
- rounded: 'full',
- bg: highlightColor,
- height: 8,
- paddingLeft: 4,
- fontWeight: 'bold',
+ justifyContent: 'flex-start',
+ //variant: 'subtle',
+ fontSize: 10,
+ borderColor: highlightColor,
+ borderWidth: 1,
+ borderRadius: 'md',
+ color: highlightColor,
+ bg: '',
+ height: 4,
+ mb: 2,
+ //paddingLeft: 4,
+ //fontWeight: 'bold',
}}
hideToggleButton
itemRenderer={(selected) => selected.label}
diff --git a/components/Tweaks/VisualsPanel.tsx b/components/Tweaks/VisualsPanel.tsx
index d3c8415..23ba41f 100644
--- a/components/Tweaks/VisualsPanel.tsx
+++ b/components/Tweaks/VisualsPanel.tsx
@@ -108,6 +108,3 @@ export const VisualsPanel = (props: VisualsPanelProps) => {
</VStack>
)
}
-function clickCallback(color: string): void {
- throw new Error('Function not implemented.')
-}
diff --git a/components/config.ts b/components/config.ts
index 60e68f3..a5d859e 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -65,12 +65,14 @@ export const initialVisuals = {
labelLength: 40,
labelWordWrap: 25,
labelLineSpace: 1,
+ labelDynamicDegree: 8,
+ labelDynamicStrength: 0.5,
highlight: true,
- highlightNodeSize: 1.2,
- highlightLinkSize: 2,
+ highlightNodeSize: 1.1,
+ highlightLinkSize: 1,
highlightFade: 0.8,
highlightAnim: true,
- animationSpeed: 420,
+ animationSpeed: 360,
algorithmOptions: options,
algorithmName: 'SinusoidalOut',
linkColorScheme: 'gray.500',
@@ -105,7 +107,7 @@ export const initialVisuals = {
refLinkHighlightColor: '',
refNodeColor: 'black',
nodeSizeLinks: 0.5,
- nodeZoomSize: 1.3,
+ nodeZoomSize: 1.2,
}
export interface TagColors {
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 08:39:06 +0000