From 15fdbd4e9e36c858709651e035fe1339dba3a1e9 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Sat, 16 Oct 2021 22:21:24 +0200 Subject: feat(labels): better ui for labels --- components/Graph/drawLabels.ts | 21 ++-- components/Tweaks/LabelsPanel.tsx | 217 +++++++++++++++++++---------------- components/Tweaks/SliderWithInfo.tsx | 2 +- components/Tweaks/TagColorPanel.tsx | 8 +- components/Tweaks/TagPanel.tsx | 22 +++- components/Tweaks/VisualsPanel.tsx | 3 - components/config.ts | 10 +- 7 files changed, 161 insertions(+), 122 deletions(-) (limited to 'components') 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) => { } + divider={} align="stretch" color="gray.800" > - - - Show labels - - }> - {!visuals.labels ? 'Never' : visuals.labels < 2 ? 'On Highlight' : 'Always'} - - - {' '} - - setVisuals({ ...visuals, labels: 0 })}>Never - setVisuals({ ...visuals, labels: 1 })}> - On Highlight - - setVisuals({ ...visuals, labels: 2 })}>Always - setVisuals({ ...visuals, labels: 3 })}> - Always (even in 3D) - - - - - - } - align="stretch" - paddingLeft={2} - color="gray.800" - > - setVisuals({ ...visuals, labelFontSize: value })} - /> - setVisuals({ ...visuals, labelLength: value })} - /> + + Show labels + + }> + {!visuals.labels ? 'Never' : visuals.labels < 2 ? 'On Highlight' : 'Always'} + + + {' '} + + setVisuals({ ...visuals, labels: 0 })}>Never + setVisuals({ ...visuals, labels: 1 })}> + On Highlight + + setVisuals({ ...visuals, labels: 2 })}>Always + setVisuals({ ...visuals, labels: 3 })}> + Always (even in 3D) + + + + + + 1} animateOpacity> + setVisuals({ ...visuals, labelWordWrap: value })} + label="Label Appearance Scale" + value={visuals.labelScale * 2} + onChange={(value) => setVisuals({ ...visuals, labelScale: value / 2 })} /> + + 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, + })) + } /> - - - - - { - console.log(visuals.labelBackgroundOpacity) - setVisuals({ ...visuals, labelBackgroundOpacity: value }) - }} - min={0} - max={1} - step={0.01} - /> - + 0}> + + setVisuals((curr: typeof initialVisuals) => ({ + ...curr, + labelDynamicDegree: value, + })) + } + /> - 1} animateOpacity> - - setVisuals({ ...visuals, labelScale: value / 5 })} - /> - - - + + + + + + + + { + console.log(visuals.labelBackgroundOpacity) + setVisuals({ ...visuals, labelBackgroundOpacity: value }) + }} + min={0} + max={1} + step={0.01} + /> + + + setVisuals({ ...visuals, labelFontSize: value })} + /> + setVisuals({ ...visuals, labelLength: value })} + /> + setVisuals({ ...visuals, labelWordWrap: value })} + /> + setVisuals({ ...visuals, labelLineSpace: value })} + /> ) } 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 ( - + {label} {infoText && } 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) => { { 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 ( - {tag} + {tag} 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 ( { 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) => { ) } -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 { -- cgit v1.2.3