diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.tsx | 55 | ||||
| -rw-r--r-- | pages/index.tsx | 46 |
2 files changed, 63 insertions, 38 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index f8ff942..5b96bd0 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -37,7 +37,7 @@ function MyApp({ Component, pageProps }: AppProps) { const [isInitialized, setIsInitialized] = useState(false) const [emacsTheme, setEmacsTheme] = useState(initialTheme) - const [highlightColor, setHighlightColor] = useState('purple') + const [highlightColor, setHighlightColor] = useState('purple.500') useEffect(() => { if (isInitialized) { @@ -82,28 +82,28 @@ function SubApp(props: any) { const { highlightColor, emacsTheme } = useContext(ThemeContext) // yeah it's annoying, should put this someplace more sensible const getBorderColor = () => { - if (highlightColor === 'purple') { + if (highlightColor === 'purple.500') { return emacsTheme.violet + 'aa' } - if (highlightColor === 'pink') { + if (highlightColor === 'pink.500') { return emacsTheme.magenta + 'aa' } - if (highlightColor === 'blue') { + if (highlightColor === 'blue.500') { return emacsTheme.blue + 'aa' } - if (highlightColor === 'cyan') { + if (highlightColor === 'cyan.500') { return emacsTheme.cyan + 'aa' } - if (highlightColor === 'green') { + if (highlightColor === 'green.500') { return emacsTheme.green + 'aa' } - if (highlightColor === 'yellow') { + if (highlightColor === 'yellow.500') { return emacsTheme.yellow + 'aa' } - if (highlightColor === 'orange') { + if (highlightColor === 'orange.500') { return emacsTheme.orange + 'aa' } - if (highlightColor === 'red') { + if (highlightColor === 'red.500') { return emacsTheme.red + 'aa' } } @@ -165,21 +165,46 @@ function SubApp(props: any) { variants: { outline: { border: '2px solid', - borderColor: highlightColor + '.500', - color: highlightColor + '.500', + borderColor: highlightColor, + color: highlightColor, }, ghost: { - color: highlightColor + '.500', - _hover: { bg: `inherit`, border: '1px solid', borderColor: highlightColor + '.500' }, - _active: { color: `inherit`, bg: highlightColor + '.500' }, + color: highlightColor, + _hover: { bg: `inherit`, border: '1px solid', borderColor: highlightColor }, + _active: { color: `inherit`, bg: highlightColor }, }, }, }, + Accordion: { + baseStyle: { + container: { + marginTop: '10px', + borderWidth: '0px', + paddingRight: '10px', + _last: { + borderWidth: '0px', + }, + }, + }, + }, + Slider: { + baseStyle: (props: any) => ({ + thumb: { + backgroundColor: highlightColor, + }, + filledTrack: { + backgroundColor: 'gray.200', + }, + }), + }, }, } }, [highlightColor, JSON.stringify(emacsTheme)]) - const extendedTheme = extendTheme(theme, withDefaultColorScheme({ colorScheme: highlightColor })) + const extendedTheme = extendTheme( + theme, + withDefaultColorScheme({ colorScheme: highlightColor.split('.')[0] }), + ) return <ChakraProvider theme={extendedTheme}>{children}</ChakraProvider> } export default MyApp diff --git a/pages/index.tsx b/pages/index.tsx index 3ecda92..4ff3aee 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -395,12 +395,12 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const [opacity, setOpacity] = useState<number>(1) const [fadeIn, cancel] = useAnimation((x) => setOpacity(x), { - duration: physics.animationSpeed, - algorithm: physics.algorithms[physics.algorithmName], + duration: visuals.animationSpeed, + algorithm: visuals.algorithms[visuals.algorithmName], }) const [fadeOut] = useAnimation((x) => setOpacity(Math.min(opacity, -1 * (x - 1))), { - duration: physics.animationSpeed, - algorithm: physics.algorithms[physics.algorithmName], + duration: visuals.animationSpeed, + algorithm: visuals.algorithms[visuals.algorithmName], }) const lastHoverNode = useRef<OrgRoamNode | null>(null) @@ -408,7 +408,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { if (hoverNode) { lastHoverNode.current = hoverNode as OrgRoamNode } - if (!physics.highlightAnim) { + if (!visuals.highlightAnim) { return hoverNode ? setOpacity(1) : setOpacity(0) } if (hoverNode) { @@ -557,7 +557,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { nodeColor: (node) => { return getNodeColor(node as OrgRoamNode) }, - nodeRelSize: physics.nodeRel, + nodeRelSize: visuals.nodeRel, nodeVal: (node) => { const links = linksByNodeId[node.id!] ?? [] const parentNeighbors = links.length @@ -566,7 +566,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const basicSize = 3 + links.length - (!filter.parents ? parentNeighbors : 0) const highlightSize = highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!] - ? 1 + opacity * (physics.highlightNodeSize - 1) + ? 1 + opacity * (visuals.highlightNodeSize - 1) : 1 return basicSize * highlightSize }, @@ -575,13 +575,13 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { return } - if (!physics.labels) { + if (!visuals.labels) { return } const wasHighlightedNode = previouslyHighlightedNodes[node.id!] if ( - (globalScale <= physics.labelScale || physics.labels === 1) && + (globalScale <= visuals.labelScale || visuals.labels === 1) && !highlightedNodes[node.id!] && !wasHighlightedNode ) { @@ -598,14 +598,14 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { number, ] // some padding - const fadeFactor = Math.min((3 * (globalScale - physics.labelScale)) / physics.labelScale, 1) + const fadeFactor = Math.min((3 * (globalScale - visuals.labelScale)) / visuals.labelScale, 1) // draw label background const getLabelOpacity = () => { - if (physics.labels === 1) { + if (visuals.labels === 1) { return opacity } - if (globalScale <= physics.labelScale) { + if (globalScale <= visuals.labelScale) { return opacity } return highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!] @@ -635,7 +635,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { }, nodeCanvasObjectMode: () => 'after', - linkDirectionalParticles: physics.particles ? physics.particlesNumber : undefined, + linkDirectionalParticles: visuals.particles ? visuals.particlesNumber : undefined, linkColor: (link) => { const sourceId = typeof link.source === 'object' ? link.source.id! : (link.source as string) const targetId = typeof link.target === 'object' ? link.target.id! : (link.target as string) @@ -649,10 +649,10 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const linkWasHighlighted = isLinkRelatedToNode(link, lastHoverNode.current) return linkIsHighlighted || linkWasHighlighted - ? physics.linkWidth * (1 + opacity * (physics.highlightLinkSize - 1)) - : physics.linkWidth + ? visuals.linkWidth * (1 + opacity * (visuals.highlightLinkSize - 1)) + : visuals.linkWidth }, - linkDirectionalParticleWidth: physics.particlesWidth, + linkDirectionalParticleWidth: visuals.particlesWidth, d3AlphaDecay: physics.alphaDecay, d3AlphaMin: physics.alphaMin, @@ -686,7 +686,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { })) }, onNodeHover: (node) => { - if (!physics.highlight) { + if (!visuals.highlight) { return } setHoverNode(node) @@ -701,17 +701,17 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { {...graphCommonProps} nodeThreeObjectExtend={true} backgroundColor={theme.colors.white} - nodeOpacity={physics.nodeOpacity} - nodeResolution={physics.nodeResolution} - linkOpacity={physics.linkOpacity} + nodeOpacity={visuals.nodeOpacity} + nodeResolution={visuals.nodeResolution} + linkOpacity={visuals.linkOpacity} nodeThreeObject={(node: OrgRoamNode) => { - if (!physics.labels) { + if (!visuals.labels) { return } - if (physics.labels === 2) { + if (visuals.labels === 2) { return } - if (physics.labels === 1 && !highlightedNodes[node.id!]) { + if (visuals.labels === 1 && !highlightedNodes[node.id!]) { return } const sprite = new SpriteText(node.title.substring(0, 30)) |