From 29fbfba2db6fdca308a9f88c3e757b2a36367955 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Thu, 29 Jul 2021 00:13:10 +0200 Subject: added color selectors --- components/config.ts | 32 ++++++- components/tweaks.tsx | 242 ++++++++++++++++++++++++++++++++++++++++++-------- pages/index.tsx | 1 - 3 files changed, 233 insertions(+), 42 deletions(-) diff --git a/components/config.ts b/components/config.ts index 753f2db..c6f581d 100644 --- a/components/config.ts +++ b/components/config.ts @@ -84,7 +84,33 @@ export const initialVisuals = { algorithms: algorithms, algorithmOptions: options, algorithmName: 'CubicOut', - linkColorScheme: 'plain', - nodeColorScheme: 'colorful', - highlightColor: 'purple', + linkColorScheme: 'grey', + nodeColorScheme: ['gray', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'pink', 'purple'], + nodeHighlight: '', + linkHighlight: '', +} + +export type Visuals = { + particles: boolean + particlesNumber: number + particlesWidth: number + linkOpacity: number + linkWidth: number + nodeRel: number + nodeOpacity: number + nodeResolution: number + labels: number + labelScale: number + highlight: boolean + highlightNodeSize: number + highlightLinkSize: number + highlightAnim: boolean + animationSpeed: number + algorithms: typeof algorithms + algorithmOptions: typeof options + algorithmName: string + linkColorScheme: string + nodeColorScheme: string[] + nodeHighlight: string + linkHighlight: string } diff --git a/components/tweaks.tsx b/components/tweaks.tsx index 15fadcf..9da387b 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -19,6 +19,8 @@ import { MenuButton, MenuItem, MenuList, + MenuOptionGroup, + MenuItemOption, Select, Slider, SliderFilledTrack, @@ -31,10 +33,11 @@ import { VStack, Heading, Collapse, + Grid, } from '@chakra-ui/react' import React, { useState, useContext } from 'react' import Scrollbars from 'react-custom-scrollbars-2' -import { initialPhysics, initialFilter, initialVisuals } from './config' +import { initialPhysics, initialFilter, initialVisuals, Visuals } from './config' import { ThemeContext } from '../pages/themecontext' @@ -45,7 +48,7 @@ export interface TweakProps { setThreeDim: (newValue: boolean) => void filter: typeof initialFilter setFilter: any - visuals: typeof initialVisuals + visuals: Visuals setVisuals: any } @@ -54,7 +57,7 @@ export const Tweaks = (props: TweakProps) => { props const [showTweaks, setShowTweaks] = useState(true) const { highlightColor, setHighlightColor } = useContext(ThemeContext) - + const colorList = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'pink', 'purple', 'gray'] return ( <> { paddingLeft={7} color="gray.800" > - + - - Visual + + Colors + + { justifyContent="flex-start" divider={} align="stretch" - paddingLeft={7} color="gray.800" > - Node Color Scheme - - }> - {visuals.nodeColorScheme === 'colorful' ? 'Colorful' : 'Plain'} + Nodes + + } + > + + {visuals.nodeColorScheme.map((color) => ( + + ))} + - - setPhysics({ ...physics, labels: 1 })}> - Colorful - - setPhysics({ ...physics, labels: 2 })}> - Plain - + + { + setVisuals({ ...visuals, nodeColorScheme: colors }) + console.log(visuals.nodeColorScheme) + }} + > + {colorList.map((color) => ( + c === color, + )} + value={color} + > + + {color[0]!.toUpperCase() + color!.slice(1)} + + + + ))} + - Link Color Scheme + Links - }> - {visuals.linkColorScheme === 'colorful' ? 'Colorful' : 'Plain'} + } + > + + {visuals.linkColorScheme[0]!.toUpperCase() + + visuals.linkColorScheme!.slice(1)} + setPhysics({ ...physics, labels: 1 })}> - Colorful + Match Nodes setPhysics({ ...physics, labels: 2 })}> - Plain + Gray - Highlight color - - }> - {highlightColor[0]!.toUpperCase() + highlightColor!.slice(1)} + Accent + + } + > + { + + } - {[ - 'red', - 'orange', - 'yellow', - 'green', - 'cyan', - 'blue', - 'pink', - 'purple', - ].map((color) => ( + {colorList.map((color) => ( setHighlightColor(color)} @@ -376,6 +437,106 @@ export const Tweaks = (props: TweakProps) => { + + Link Highlight + + } + > + { + + } + + + setVisuals({ ...visuals, linkHighlight: '' })} + justifyContent="space-between" + alignItems="center" + display="flex" + > + Match current color + + {colorList.map((color) => ( + + setVisuals({ ...visuals, linkHighlight: color }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + {color[0]!.toUpperCase() + color!.slice(1)} + + + ))} + + + + + Node Highlight + + } + > + { + + } + + + setVisuals({ ...visuals, nodeHighlight: '' })} + justifyContent="space-between" + alignItems="center" + display="flex" + > + Match current color + + {colorList.map((color) => ( + + setVisuals({ ...visuals, nodeHighlight: color }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + {color[0]!.toUpperCase() + color!.slice(1)} + + + ))} + + + @@ -423,7 +584,12 @@ export const Tweaks = (props: TweakProps) => { Labels - }> + } + > {!physics.labels ? 'Never' : physics.labels < 2 diff --git a/pages/index.tsx b/pages/index.tsx index 6add88e..caf216c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -53,7 +53,6 @@ export default function Home() { if (!showPage) { return null } - return } -- cgit v1.2.3