From cffebb920e7b29985fa90979dbdb56f795980f41 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Tue, 21 Sep 2021 20:38:12 +0200 Subject: chore: separated out visuals panel and some subpanels --- components/tweaks.tsx | 768 +------------------------------------------------- 1 file changed, 8 insertions(+), 760 deletions(-) (limited to 'components') diff --git a/components/tweaks.tsx b/components/tweaks.tsx index d6f5ba1..1a7e72c 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -54,6 +54,7 @@ import { SliderWithInfo } from './SliderWithInfo' import { EnableSection } from './EnableSection' import { InfoTooltip } from './InfoTooltip' import { PhysicsPanel } from './PhysicsPanel' +import { VisualsPanel } from './VisualsPanel' export interface TweakProps { physics: typeof initialPhysics @@ -94,8 +95,6 @@ export const Tweaks = (props: TweakProps) => { const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false) const { highlightColor, setHighlightColor } = useContext(ThemeContext) - const setVisualsCallback = useCallback((val) => setVisuals(val), []) - return !showTweaks ? ( { Visual - - - - - - Colors - - - - - } - align="stretch" - color="gray.800" - > - - - Nodes - - } - variant="ghost" - onClick={() => { - const arr = visuals.nodeColorScheme ?? [] - setVisuals({ - ...visuals, - //shuffle that guy - //definitely thought of this myself - nodeColorScheme: arr - .map((x: any) => [Math.random(), x]) - .sort(([a], [b]) => a - b) - .map(([_, x]) => x), - }) - }} - /> - - - } - size="sm" - variant="ghost" - onClick={() => { - const arr = visuals.nodeColorScheme ?? [] - setVisuals({ - ...visuals, - nodeColorScheme: [...arr.slice(1, arr.length), arr[0]], - }) - }} - /> - - - } - > - - {visuals.nodeColorScheme.map((color) => ( - - ))} - - - - {' '} - - { - if (!colors.length) { - return - } - setVisuals({ ...visuals, nodeColorScheme: colors }) - }} - > - {colorList.map((color) => ( - c === color)} - value={color} - isDisabled={ - visuals.nodeColorScheme.length === 1 && - visuals.nodeColorScheme[0] === color - } - > - - - - - ))} - - - - - - - Links - - } - > - - {visuals.linkColorScheme ? ( - - ) : ( - - {visuals.nodeColorScheme.map((color) => ( - - ))} - - )} - - - - {' '} - - setVisuals({ ...visuals, linkColorScheme: '' })} - justifyContent="space-between" - alignItems="center" - display="flex" - > - - {visuals.nodeColorScheme.map((color) => ( - - ))} - - - {colorList.map((color) => ( - - setVisuals({ - ...visuals, - linkColorScheme: color, - }) - } - justifyContent="space-between" - alignItems="center" - display="flex" - > - - - ))} - - - - - - Accent - - } - > - { - - } - - - {' '} - - {colorList.map((color) => ( - setHighlightColor(color)} - justifyContent="space-between" - alignItems="center" - display="flex" - > - - - ))} - - - - - - - - - - - - - - - - Nodes & Links - - - - - } - align="stretch" - color="gray.800" - > - - setVisuals({ ...visuals, nodeRel: value })} - /> - setVisuals({ ...visuals, nodeSizeLinks: value })} - /> - - setVisuals((prev: typeof initialVisuals) => ({ - ...prev, - nodeZoomSize: value, - })) - } - /> - {threeDim && ( - <> - setVisuals({ ...visuals, nodeOpacity: value })} - /> - - setVisuals({ ...visuals, nodeResolution: value }) - } - /> - - )} - setVisuals({ ...visuals, linkWidth: value })} - /> - {threeDim && ( - setVisuals({ ...visuals, linkOpacity: value })} - /> - )} - setVisuals({ ...visuals, arrows: !visuals.arrows })} - > - - setVisuals({ ...visuals, arrowsLength: 10 * value }) - } - /> - setVisuals({ ...visuals, arrowsPos: value })} - /> - - - - setVisuals({ ...visuals, particles: !visuals.particles }) - } - > - - setVisuals({ ...visuals, particlesNumber: value }) - } - /> - - setVisuals({ ...visuals, particlesWidth: value }) - } - /> - - - - - - {/* } - align="stretch" - paddingLeft={7} - color="gray.800" - > */} - - - - Labels - - - - - } - 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 })} - /> - setVisuals({ ...visuals, labelWordWrap: value })} - /> - - setVisuals({ ...visuals, labelLineSpace: value }) - } - /> - - - - - { - console.log(visuals.labelBackgroundOpacity) - setVisuals({ ...visuals, labelBackgroundOpacity: value }) - }} - min={0} - max={1} - step={0.01} - /> - - - 1} animateOpacity> - - - setVisuals({ ...visuals, labelScale: value / 5 }) - } - /> - - - - - - - - - - - Highlighting - - - - - } - align="stretch" - color="gray.800" - > - - - setVisuals({ ...visuals, highlight: !visuals.highlight }) - } - value={visuals.highlight} - > - } - align="stretch" - paddingLeft={0} - > - - setVisuals({ ...visuals, highlightLinkSize: value }) - } - /> - - setVisuals({ ...visuals, highlightNodeSize: value }) - } - /> - - setVisuals({ ...visuals, highlightFade: value }) - } - /> - {/* - Highlight node color - - - Highlight link color - */} - { - setVisuals({ ...visuals, highlightAnim: !visuals.highlightAnim }) - }} - value={visuals.highlightAnim} - > - setVisuals({ ...visuals, animationSpeed: v })} - value={visuals.animationSpeed} - infoText="Slower speed has a chance of being buggy" - min={50} - max={1000} - step={10} - /> - - - - - - - - - - - - Citations - - - - - } - align="stretch" - color="gray.800" - > - - - setVisuals({ ...visuals, citeDashes: !visuals.citeDashes }) - } - > - - setVisuals({ ...visuals, citeDashLength: value * 10 }) - } - /> - - setVisuals({ ...visuals, citeGapLength: value * 5 }) - } - /> - - - - - - setVisuals({ ...visuals, refDashes: !visuals.refDashes }) - } - > - - setVisuals({ ...visuals, refDashLength: value * 10 }) - } - /> - - setVisuals({ ...visuals, refGapLength: value * 5 }) - } - /> - - - - - - - - - - + -- cgit v1.2.3