diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/index.tsx | 87 |
2 files changed, 63 insertions, 25 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index b6abb5a..adb653b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -59,6 +59,7 @@ function MyApp({ Component, pageProps }: AppProps) { 700: emacsTheme.base6, 800: emacsTheme.base7, 900: emacsTheme.base8, + inter: d3int.interpolate(emacsTheme.base4, emacsTheme.base3), }, blue: { 500: emacsTheme.blue, diff --git a/pages/index.tsx b/pages/index.tsx index f1f9349..a59bd81 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -69,18 +69,20 @@ export type Scope = { nodeIds: string[] } -const options: string[] = [] -const algorithms: { [name: string]: (percent: number) => number } = {} - -for (let type in Easing) { - for (let mode in (Easing as any)[type]) { - let name = type + mode - if (name === 'LinearNone') { - name = 'Linear' +const getAlgos = (option?: boolean) => { + const options: string[] = [] + const algorithms: { [name: string]: (percent: number) => number } = {} + for (let type in Easing) { + for (let mode in (Easing as any)[type]) { + let name = type + mode + if (name === 'LinearNone') { + name = 'Linear' + } + option ? options.push(name) : (algorithms[name] = (Easing as any)[type][mode]) } - options.push(name) - algorithms[name] = (Easing as any)[type][mode] + console.log(algorithms) } + return option ? options : algorithms } const initialPhysics = { enabled: true, @@ -115,8 +117,8 @@ const initialPhysics = { highlightLinkSize: 2, highlightAnim: false, animationSpeed: 250, - algorithms: algorithms, - algorithmOptions: options, + algorithms: getAlgos(false), + algorithmOptions: getAlgos(true), algorithmName: 'CubicOut', orphans: false, follow: 'Local', @@ -175,6 +177,12 @@ export function GraphPage() { const orgRoamGraphDataClone = JSON.parse(JSON.stringify(orgRoamGraphData)) setGraphData(orgRoamGraphDataClone) }) + .catch((error) => { + console.log( + 'Oopsie whoopsie! We made a fucky wucky! Are you suwu owg-woam-uwui is wunning?', + error, + ) + }) } useEffect(() => { @@ -535,6 +543,13 @@ export const Tweaks = (props: TweakProps) => { divider={<StackDivider borderColor="gray.200" />} align="stretch" > + <EnableSection + label="Colors" + onChange={() => setPhysics({ ...physics, colorful: !physics.colorful })} + value={physics.colorful} + > + <Text>Child</Text> + </EnableSection> <SliderWithInfo label="Node size" value={physics.nodeRel} @@ -592,11 +607,13 @@ export const Tweaks = (props: TweakProps) => { /> <Select placeholder={physics.algorithmName} - onChange={(v) => setPhysics({ ...physics, algorithmName: v.target.value })} + onChange={(v) => { + setPhysics({ ...physics, algorithmName: v.target.value }) + console.log(v.target.value) + }} > {physics.algorithmOptions.map((opt, i) => ( <option key={i} value={physics.algorithmOptions[i]}> - {' '} {physics.algorithmOptions[i]} </option> ))} @@ -838,6 +855,10 @@ export const Graph = function (props: GraphProps) { // This forces the graph to make a small update when you do useEffect(() => { graph2dRef.current?.d3ReheatSimulation() + console.log(fadeIn) + console.log(physics.algorithms[physics.algorithmName]) + console.log(physics.algorithms) + console.log(physics.algorithmName) }, [physics]) //shitty handler to check for doubleClicks @@ -863,13 +884,13 @@ export const Graph = function (props: GraphProps) { const [opacity, setOpacity] = useState<number>(1) const [fadeIn, cancel] = useAnimation((x) => setOpacity(x), { duration: physics.animationSpeed, - algorithm: physics.algorithms[physics.algorithmName] ?? Easing.Cubic.InOut, + algorithm: physics.algorithms[physics.algorithmName], }) const [fadeOut, fadeOutCancel] = useAnimation( (x) => setOpacity(Math.min(opacity, -1 * (x - 1))), { duration: physics.animationSpeed, - algorithm: physics.algorithms[physics.algorithmName] ?? Easing.Cubic.InOut, + algorithm: physics.algorithms[physics.algorithmName], }, ) @@ -895,10 +916,20 @@ export const Graph = function (props: GraphProps) { nodeLabel: (node) => (node as OrgRoamNode).title, nodeColor: (node) => { if (!physics.colorful) { - if (Object.keys(highlightedNodes).length === 0) { - return 'rgb(100, 100, 100)' + if (!physics.highlightAnim) { + return Object.keys(highlightedNodes).length === 0 + ? highlightedNodes[node.id!] + ? theme.colors.purple[500] + : theme.colors.gray[400] + : theme.colors.gray[500] } - return highlightedNodes[node.id!] ? theme.blue['500'] : 'rgb(50, 50, 50)' + return Object.keys(highlightedNodes).length === 0 + ? lastHoverNode.current?.id! === node.id! + ? theme.colors.purple['inter'](opacity) + : theme.colors.gray['inter'](opacity) + : highlightedNodes[node.id!] + ? theme.colors.purple['inter'](opacity) + : theme.colors.gray['inter'](opacity) } const palette = ['pink', 'purple', 'blue', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red'] @@ -932,15 +963,18 @@ export const Graph = function (props: GraphProps) { if (!physics.labels) { return } - if (globalScale <= physics.labelScale && !highlightedNodes[node.id!]) { + const links = linksByNodeId[node.id!] ?? [] + const wasHighlightedNode = + physics.highlightAnim && + links.some( + (link) => + link.source === lastHoverNode.current?.id! || + link.target === lastHoverNode.current?.id!, + ) + if (globalScale <= physics.labelScale && !highlightedNodes[node.id!] && !wasHighlightedNode) { return } - const links = linksByNodeId[node.id!] ?? [] - const wasHighlightedNode = links.some( - (link) => - link.source === lastHoverNode.current?.id! || link.target === lastHoverNode.current?.id!, - ) const nodeTitle = (node as OrgRoamNode).title! const label = nodeTitle.substring(0, Math.min(nodeTitle.length, 30)) // const label = 'label' @@ -956,6 +990,9 @@ export const Graph = function (props: GraphProps) { // draw label background const getLabelOpacity = () => { if (physics.highlightAnim) { + if (globalScale <= physics.labelScale) { + return opacity + } return Object.keys(highlightedNodes).length === 0 ? lastHoverNode.current?.id! === node.id ? 1 |