From 34bffd1bb0dc119dc7214a990772210b2da12bbc Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Fri, 30 Jul 2021 22:01:17 +0200 Subject: lots of label customization + fixes --- components/config.ts | 24 +- components/tweaks.tsx | 732 ++++++++++++++++++++++++++++++++++---------------- 2 files changed, 519 insertions(+), 237 deletions(-) (limited to 'components') diff --git a/components/config.ts b/components/config.ts index d538941..5c0a922 100644 --- a/components/config.ts +++ b/components/config.ts @@ -84,15 +84,33 @@ export const initialVisuals = { algorithms: algorithms, algorithmOptions: options, algorithmName: 'CubicOut', - linkColorScheme: '500', - nodeColorScheme: ['gray', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'pink', 'purple'], + linkColorScheme: 'gray.500', + nodeColorScheme: [ + 'red.500', + 'orange.500', + 'yellow.500', + 'green.500', + 'cyan.500', + 'blue.500', + 'pink.500', + 'purple.500', + ], nodeHighlight: '', - linkHighlight: '', + linkHighlight: 'purple.500', backgroundColor: 'white', emacsNodeColor: '', + labelTextColor: 'black', + labelBackgroundColor: 'white', + labelBackgroundOpacity: 0.7, } export const initialBehavior = { follow: 'Zoom', followLocalOrZoom: true, } + +export const initialMouse = { + highlight: 'hover', + local: 'click', + follow: 'double', +} diff --git a/components/tweaks.tsx b/components/tweaks.tsx index e9ab582..fb20cb3 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -36,10 +36,11 @@ import { Heading, Collapse, Grid, + Portal, } 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, initialMouse } from './config' import { ThemeContext } from '../pages/themecontext' @@ -52,15 +53,53 @@ export interface TweakProps { setFilter: any visuals: typeof initialVisuals setVisuals: any + mouse: typeof initialMouse + setMouse: any } export const Tweaks = (props: TweakProps) => { - const { physics, setPhysics, threeDim, setThreeDim, filter, setFilter, visuals, setVisuals } = - props + const { + physics, + setPhysics, + threeDim, + setThreeDim, + filter, + setFilter, + visuals, + setVisuals, + mouse, + setMouse, + } = props const [showTweaks, setShowTweaks] = useState(true) const { highlightColor, setHighlightColor } = useContext(ThemeContext) - const colorList = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'pink', 'purple', 'gray'] - const grays = ['100', '200', '300', '400', '500', '600', '700', '800', '900'] + const colorList = [ + 'red.500', + 'orange.500', + 'yellow.500', + 'green.500', + 'cyan.500', + 'blue.500', + 'pink.500', + 'purple.500', + 'gray.400', + 'gray.500', + 'gray.600', + 'white', + 'black', + ] + const grays = [ + 'black', + 'gray.100', + 'gray.200', + 'gray.300', + 'gray.400', + 'gray.500', + 'gray.600', + 'gray.700', + 'gray.800', + 'gray.900', + 'white', + ] return ( <> { {visuals.nodeColorScheme.map((color) => ( ))} - - { - if (!colors.length) { - return - } - setVisuals({ ...visuals, nodeColorScheme: colors }) - console.log(visuals.nodeColorScheme) - }} - > - {colorList.map((color) => ( - c === color, - )} - value={color} - isDisabled={ - visuals.nodeColorScheme.length === 1 && - visuals.nodeColorScheme[0] === color + + {' '} + + { + if (!colors.length) { + return } - > - + {colorList.map((color) => ( + c === color, + )} + value={color} + isDisabled={ + visuals.nodeColorScheme.length === 1 && + visuals.nodeColorScheme[0] === color + } > - {color[0]!.toUpperCase() + color!.slice(1)} - - - ))} - - + justifyContent="space-between" + alignItems="center" + display="flex" + > + + {color[0]!.toUpperCase() + color!.slice(1)} + + + + + ))} + + + Links - + { {visuals.nodeColorScheme.map((color) => ( @@ -448,60 +491,61 @@ export const Tweaks = (props: TweakProps) => { )} - - - setVisuals({ ...visuals, linkColorScheme: '' }) - } - justifyContent="space-between" - alignItems="center" - display="flex" - > - Match nodes - - {visuals.nodeColorScheme.map((color) => ( - - ))} - - - {grays.map((color) => ( + + {' '} + - setVisuals({ - ...visuals, - linkColorScheme: color, - }) + setVisuals({ ...visuals, linkColorScheme: '' }) } justifyContent="space-between" alignItems="center" display="flex" > - {color[0]!.toUpperCase() + color!.slice(1)} - + flexDirection="column" + flexWrap="wrap" + > + {visuals.nodeColorScheme.map((color) => ( + + ))} + - ))} - + {grays.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" - > - {color[0]!.toUpperCase() + color!.slice(1)} - - - ))} - + + {' '} + + {colorList.map((color) => ( + setHighlightColor(color)} + justifyContent="space-between" + alignItems="center" + display="flex" + > + {color[0]!.toUpperCase() + color!.slice(1)} + + + ))} + + Link Highlight - + { > } - - setVisuals({ ...visuals, linkHighlight: '' })} - justifyContent="space-between" - alignItems="center" - display="flex" - > - Match current color - - {colorList.map((color) => ( + + {' '} + - setVisuals({ ...visuals, linkHighlight: color }) + setVisuals({ ...visuals, linkHighlight: '' }) } justifyContent="space-between" alignItems="center" display="flex" > - {color[0]!.toUpperCase() + color!.slice(1)} - + 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 }) + setVisuals({ ...visuals, nodeHighlight: '' }) } justifyContent="space-between" alignItems="center" display="flex" > - {color[0]!.toUpperCase() + color!.slice(1)} - + Match current color - ))} - + {colorList.map((color) => ( + + setVisuals({ ...visuals, nodeHighlight: color }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + {color[0]!.toUpperCase() + color!.slice(1)} + + + ))} + + Background - + { > } - - {grays.map((color) => ( - - setVisuals({ ...visuals, backgroundColor: color }) - } - justifyContent="space-between" - alignItems="center" - display="flex" - > - {color[0]!.toUpperCase() + color!.slice(1)} - - - ))} - + + {' '} + + {grays.map((color) => ( + + setVisuals({ ...visuals, backgroundColor: color }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + {color[0]!.toUpperCase() + color!.slice(1)} + + + ))} + + Emacs Node - + { > } - - setVisuals({ ...visuals, emacsNodeColor: '' })} - justifyContent="space-between" - alignItems="center" - display="flex" - > - No change - - - {colorList.map((color) => ( + + {' '} + - setVisuals({ ...visuals, emacsNodeColor: color }) + setVisuals({ ...visuals, emacsNodeColor: '' }) } justifyContent="space-between" alignItems="center" display="flex" > - {color[0]!.toUpperCase() + color!.slice(1)} - + No change + - ))} - + {colorList.map((color) => ( + + setVisuals({ ...visuals, emacsNodeColor: color }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + {color[0]!.toUpperCase() + color!.slice(1)} + + + ))} + + @@ -781,23 +846,24 @@ export const Tweaks = (props: TweakProps) => { onChange={(value) => setPhysics({ ...physics, linkOpacity: value })} /> )} - - - Labels - - } - > - {!physics.labels - ? 'Never' - : physics.labels < 2 - ? 'On Highlight' - : 'Always'} - - + + Labels + + } + > + {!physics.labels + ? 'Never' + : physics.labels < 2 + ? 'On Highlight' + : 'Always'} + + + {' '} + setPhysics({ ...physics, labels: 0 })}> Never @@ -807,21 +873,152 @@ export const Tweaks = (props: TweakProps) => { setPhysics({ ...physics, labels: 2 })}> Always + setPhysics({ ...physics, labels: 3 })}> + Always (even in 3D) + - - - 1} animateOpacity> - - - setPhysics({ ...physics, labelScale: value / 5 }) - } - /> - - - + + + + 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) => ( + + 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> + + + setPhysics({ ...physics, labelScale: value / 5 }) + } + /> + + + + { align="stretch" paddingLeft={7} color="gray.800" - > + > + + + Expand Node + + + + } + colorScheme="" + color="black" + > + {mouse.local[0]!.toUpperCase() + mouse.local!.slice(1)} + + + {' '} + + setMouse({ ...mouse, local: '' })}> + Never + + setMouse({ ...mouse, local: 'click' })}> + Click + + setMouse({ ...mouse, local: 'double' })}> + Double Click + + setMouse({ ...mouse, local: 'right' })}> + Right Click + + + + + + + Open in Emacs + + } + colorScheme="" + color="black" + > + {mouse.follow[0]!.toUpperCase() + mouse.follow!.slice(1)} + + + {' '} + + setMouse({ ...mouse, follow: '' })}> + Never + + setMouse({ ...mouse, follow: 'click' })}> + Click + + setMouse({ ...mouse, follow: 'double' })}> + Double Click + + setMouse({ ...mouse, follow: 'right' })}> + Right Click + + + + + + @@ -1028,11 +1289,14 @@ export const DropDownMenu = (props: DropDownMenuProps) => { }> {displayValue} - - {textArray.map((option, i) => { - ; {option} - })} - + + {' '} + + {textArray.map((option, i) => { + ; {option} + })} + + ) } -- cgit v1.2.3