From 1845a260fb81018294a8673e5af545f30928c40a Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Sat, 31 Jul 2021 00:17:51 +0200 Subject: ui updates --- components/tweaks.tsx | 481 +++++++++++++++++++++++++------------------------- 1 file changed, 237 insertions(+), 244 deletions(-) (limited to 'components/tweaks.tsx') diff --git a/components/tweaks.tsx b/components/tweaks.tsx index 82c89c1..393a0fe 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -118,7 +118,7 @@ export const Tweaks = (props: TweakProps) => { { ...style, borderRadius: 10, }} - bg={highlightColor + '.500'} + bg={highlightColor} /> )} > - + @@ -210,11 +210,11 @@ export const Tweaks = (props: TweakProps) => { Physics - setPhysics({ ...physics, enabled: !physics.enabled })} - isChecked={physics.enabled} - /> + {/* setPhysics({ ...physics, enabled: !physics.enabled })} + isChecked={physics.enabled} + /> */} { /> - + Advanced @@ -320,7 +320,6 @@ export const Tweaks = (props: TweakProps) => { - {/* */} @@ -329,8 +328,8 @@ export const Tweaks = (props: TweakProps) => { Visual - - + + @@ -384,7 +383,7 @@ export const Tweaks = (props: TweakProps) => { }} /> - + { {' '} - + { @@ -438,9 +438,6 @@ export const Tweaks = (props: TweakProps) => { alignItems="center" display="flex" > - - {color[0]!.toUpperCase() + color!.slice(1)} - { Links - + { {visuals.linkColorScheme ? ( { {' '} - + setVisuals({ ...visuals, linkColorScheme: '' }) @@ -511,7 +508,7 @@ export const Tweaks = (props: TweakProps) => { {visuals.nodeColorScheme.map((color) => ( @@ -545,7 +542,7 @@ export const Tweaks = (props: TweakProps) => { Accent - + { > { { {' '} - + {colorList.map((color) => ( { alignItems="center" display="flex" > - {color[0]!.toUpperCase() + color!.slice(1)} { Link Highlight - + { > { { {' '} - + @@ -615,7 +611,7 @@ export const Tweaks = (props: TweakProps) => { alignItems="center" display="flex" > - Match current color + {colorList.map((color) => ( { alignItems="center" display="flex" > - {color[0]!.toUpperCase() + color!.slice(1)} { Node Highlight - + { > { { {' '} - + @@ -670,7 +665,7 @@ export const Tweaks = (props: TweakProps) => { alignItems="center" display="flex" > - Match current color + {colorList.map((color) => ( { alignItems="center" display="flex" > - {color[0]!.toUpperCase() + color!.slice(1)} { Background - + { > { { {' '} - + {grays.map((color) => ( { alignItems="center" display="flex" > - {color[0]!.toUpperCase() + color!.slice(1)} { Emacs Node - + { > { { {' '} - + @@ -769,7 +762,6 @@ export const Tweaks = (props: TweakProps) => { alignItems="center" display="flex" > - No change {colorList.map((color) => ( @@ -782,9 +774,8 @@ export const Tweaks = (props: TweakProps) => { alignItems="center" display="flex" > - {color[0]!.toUpperCase() + color!.slice(1)} { > setPhysics({ ...physics, nodeRel: value })} + value={visuals.nodeRel} + onChange={(value) => setVisuals({ ...visuals, nodeRel: value })} /> {threeDim && ( <> setPhysics({ ...physics, nodeOpacity: value })} + onChange={(value) => setVisuals({ ...visuals, nodeOpacity: value })} /> setPhysics({ ...physics, nodeResolution: value })} + onChange={(value) => setVisuals({ ...visuals, nodeResolution: value })} /> )} setPhysics({ ...physics, linkWidth: value })} + value={visuals.linkWidth} + onChange={(value) => setVisuals({ ...visuals, linkWidth: value })} /> {threeDim && ( setPhysics({ ...physics, linkOpacity: value })} + value={visuals.linkOpacity} + onChange={(value) => setVisuals({ ...visuals, linkOpacity: value })} /> )} - - Labels - - } + + + 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) + + + + + + 0} animateOpacity> + } + align="stretch" + paddingLeft={2} + color="gray.800" > - {!physics.labels - ? 'Never' - : physics.labels < 2 - ? 'On Highlight' - : 'Always'} - - - {' '} - - setPhysics({ ...physics, labels: 0 })}> - Never - - setPhysics({ ...physics, labels: 1 })}> - On Highlight - - setPhysics({ ...physics, labels: 2 })}> - Always - - setPhysics({ ...physics, labels: 3 })}> - Always (even in 3D) - - - - - - 0} animateOpacity> - } - align="stretch" - paddingLeft={2} - color="gray.800" - > - - Text - - } - color="black" - colorScheme="" - > - { - - } - - - {' '} - - {grays.map((color) => ( - - setVisuals({ - ...visuals, - labelTextColor: color, - }) - } - > - - - ))} - - - - - - Background - - } - color="black" - colorScheme="" - > - { - - } - - - {' '} - - - setVisuals({ - ...visuals, - labelBackgroundColor: '', - }) - } - justifyContent="space-between" - alignItems="center" - display="flex" - > - None - - {grays.map((color) => ( + + Text + + } + color="black" + colorScheme="" + > + { + + } + + + {' '} + + {grays.map((color) => ( + + setVisuals({ + ...visuals, + labelTextColor: color, + }) + } + > + + + ))} + + + + + + Background + + } + color="black" + colorScheme="" + > + { + + } + + + {' '} + setVisuals({ ...visuals, - labelBackgroundColor: color, + labelBackgroundColor: '', }) } justifyContent="space-between" alignItems="center" display="flex" > - + None - ))} - - - - - - - { - console.log(visuals.labelBackgroundOpacity) - setVisuals({ ...visuals, labelBackgroundOpacity: value }) - }} - min={0} - max={1} - step={0.01} - /> - - - 1} animateOpacity> - - - setPhysics({ ...physics, labelScale: value / 5 }) - } - /> - - - - + {grays.map((color) => ( + + setVisuals({ + ...visuals, + labelBackgroundColor: color, + }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + + + ))} + + + + + + + { + console.log(visuals.labelBackgroundOpacity) + setVisuals({ ...visuals, labelBackgroundOpacity: value }) + }} + min={0} + max={1} + step={0.01} + /> + + + 1} animateOpacity> + + + setVisuals({ ...visuals, labelScale: value / 5 }) + } + /> + + + + + setPhysics({ ...physics, particles: !physics.particles })} + value={visuals.particles} + onChange={() => setVisuals({ ...visuals, particles: !visuals.particles })} > setPhysics({ ...physics, particlesNumber: value })} + onChange={(value) => setVisuals({ ...visuals, particlesNumber: value })} /> setPhysics({ ...physics, particlesWidth: value })} + value={visuals.particlesWidth} + onChange={(value) => setVisuals({ ...visuals, particlesWidth: value })} /> setPhysics({ ...physics, highlight: !physics.highlight })} - value={physics.highlight} + onChange={() => setVisuals({ ...visuals, highlight: !visuals.highlight })} + value={visuals.highlight} > { > - setPhysics({ ...physics, highlightLinkSize: value }) + setVisuals({ ...visuals, highlightLinkSize: value }) } /> - setPhysics({ ...physics, highlightNodeSize: value }) + setVisuals({ ...visuals, highlightNodeSize: value }) } /> {/* @@ -1072,13 +1065,13 @@ export const Tweaks = (props: TweakProps) => { { - setPhysics({ ...physics, highlightAnim: !physics.highlightAnim }) + setVisuals({ ...visuals, highlightAnim: !visuals.highlightAnim }) }} - value={physics.highlightAnim} + value={visuals.highlightAnim} > setPhysics({ ...physics, animationSpeed: v })} + onChange={(v) => setVisuals({ ...visuals, animationSpeed: v })} value={physics.animationSpeed} infoText="Slower speed has a chance of being buggy" min={50} @@ -1088,7 +1081,7 @@ export const Tweaks = (props: TweakProps) => {