From 075d3831ffae63f128bcaabf9fc5e70ade41ad33 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomas@thomass-air.kpn>
Date: Tue, 21 Sep 2021 21:00:21 +0200
Subject: chore: separated out all tweak panels

---
 components/tweaks.tsx | 212 +++-----------------------------------------------
 1 file changed, 9 insertions(+), 203 deletions(-)

(limited to 'components/tweaks.tsx')

diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index 1a7e72c..a78c7f4 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -1,11 +1,4 @@
-import {
-  CloseIcon,
-  RepeatClockIcon,
-  ChevronDownIcon,
-  SettingsIcon,
-  RepeatIcon,
-  ArrowRightIcon,
-} from '@chakra-ui/icons'
+import { CloseIcon, RepeatClockIcon, SettingsIcon } from '@chakra-ui/icons'
 import {
   Accordion,
   AccordionButton,
@@ -14,26 +7,12 @@ import {
   AccordionPanel,
   Box,
   Button,
-  Flex,
   IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  MenuOptionGroup,
-  MenuItemOption,
-  Select,
-  StackDivider,
-  Switch,
-  Text,
   Tooltip,
-  VStack,
   Heading,
-  Collapse,
-  Portal,
 } from '@chakra-ui/react'
 
-import React, { useContext, useCallback } from 'react'
+import React, { useContext } from 'react'
 import Scrollbars from 'react-custom-scrollbars-2'
 import {
   initialPhysics,
@@ -46,15 +25,12 @@ import {
 } from './config'
 
 import FilterPanel from './FilterPanel'
-import { ColorMenu } from './ColorMenu'
 
 import { ThemeContext } from '../util/themecontext'
 import { usePersistantState } from '../util/persistant-state'
-import { SliderWithInfo } from './SliderWithInfo'
-import { EnableSection } from './EnableSection'
-import { InfoTooltip } from './InfoTooltip'
 import { PhysicsPanel } from './PhysicsPanel'
 import { VisualsPanel } from './VisualsPanel'
+import { BehaviorPanel } from './BehaviorPanel'
 
 export interface TweakProps {
   physics: typeof initialPhysics
@@ -226,157 +202,12 @@ export const Tweaks = (props: TweakProps) => {
               <Heading size="sm">Behavior</Heading>
             </AccordionButton>
             <AccordionPanel>
-              <VStack
-                spacing={2}
-                justifyContent="flex-start"
-                divider={<StackDivider borderColor="gray.500" />}
-                align="stretch"
-                paddingLeft={7}
-                color="gray.800"
-              >
-                <Flex alignItems="center" justifyContent="space-between">
-                  <Flex>
-                    <Text>Expand Node</Text>
-                    <InfoTooltip infoText="View only the node and its direct neighbors" />
-                  </Flex>
-                  <Menu isLazy placement="right">
-                    <MenuButton
-                      as={Button}
-                      rightIcon={<ChevronDownIcon />}
-                      colorScheme=""
-                      color="black"
-                    >
-                      <Text>
-                        {mouse.local
-                          ? mouse.local[0]!.toUpperCase() + mouse.local!.slice(1)
-                          : 'Never'}
-                      </Text>
-                    </MenuButton>
-                    <Portal>
-                      {' '}
-                      <MenuList zIndex="popover" bgColor="gray.200">
-                        <MenuItem onClick={() => setMouse({ ...mouse, local: '' })}>Never</MenuItem>
-                        <MenuItem onClick={() => setMouse({ ...mouse, local: 'click' })}>
-                          Click
-                        </MenuItem>
-                        <MenuItem onClick={() => setMouse({ ...mouse, local: 'double' })}>
-                          Double Click
-                        </MenuItem>
-                        <MenuItem onClick={() => setMouse({ ...mouse, local: 'right' })}>
-                          Right Click
-                        </MenuItem>
-                      </MenuList>
-                    </Portal>
-                  </Menu>
-                </Flex>
-                <Flex alignItems="center" justifyContent="space-between">
-                  <Text>Open in Emacs</Text>
-                  <Menu isLazy placement="right">
-                    <MenuButton
-                      as={Button}
-                      rightIcon={<ChevronDownIcon />}
-                      colorScheme=""
-                      color="black"
-                    >
-                      <Text>
-                        {mouse.follow
-                          ? mouse.follow[0]!.toUpperCase() + mouse.follow!.slice(1)
-                          : 'Never'}
-                      </Text>
-                    </MenuButton>
-                    <Portal>
-                      {' '}
-                      <MenuList bgColor="gray.200" zIndex="popover">
-                        <MenuItem onClick={() => setMouse({ ...mouse, follow: '' })}>
-                          Never
-                        </MenuItem>
-                        <MenuItem onClick={() => setMouse({ ...mouse, follow: 'click' })}>
-                          Click
-                        </MenuItem>
-                        <MenuItem onClick={() => setMouse({ ...mouse, follow: 'double' })}>
-                          Double Click
-                        </MenuItem>
-                        <MenuItem onClick={() => setMouse({ ...mouse, follow: 'right' })}>
-                          Right Click
-                        </MenuItem>
-                      </MenuList>
-                    </Portal>
-                  </Menu>
-                </Flex>
-                <Flex alignItems="center" justifyContent="space-between">
-                  <Text>Follow Emacs by...</Text>
-                  <Menu isLazy placement="right">
-                    <MenuButton
-                      as={Button}
-                      rightIcon={<ChevronDownIcon />}
-                      colorScheme=""
-                      color="black"
-                    >
-                      <Text>{behavior.follow[0].toUpperCase() + behavior.follow.slice(1)}</Text>
-                    </MenuButton>
-                    <Portal>
-                      {' '}
-                      <MenuList bgColor="gray.200" zIndex="popover">
-                        <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'color' })}>
-                          Just coloring the currently opened node
-                        </MenuItem>
-                        <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'local' })}>
-                          Opening the local graph
-                        </MenuItem>
-                        <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'zoom' })}>
-                          Zooming to the current node
-                        </MenuItem>
-                      </MenuList>
-                    </Portal>
-                  </Menu>
-                </Flex>
-                <Flex alignItems="center" justifyContent="space-between">
-                  <Flex>
-                    <Text>Local graph</Text>
-                    <InfoTooltip infoText="When in local mode and clicking a new node, should I add that node's local graph or open the new one?" />
-                  </Flex>
-                  <Menu isLazy placement="right">
-                    <MenuButton
-                      as={Button}
-                      rightIcon={<ChevronDownIcon />}
-                      colorScheme=""
-                      color="black"
-                    >
-                      <Text>{behavior.localSame === 'add' ? 'Add' : 'Replace'}</Text>
-                    </MenuButton>
-                    <Portal>
-                      {' '}
-                      <MenuList bgColor="gray.200" zIndex="popover">
-                        <MenuItem
-                          onClick={() => setBehavior({ ...behavior, localSame: 'replace' })}
-                        >
-                          Open that nodes graph
-                        </MenuItem>
-                        <MenuItem onClick={() => setBehavior({ ...behavior, localSame: 'add' })}>
-                          Add node to local graph
-                        </MenuItem>
-                      </MenuList>
-                    </Portal>
-                  </Menu>
-                </Flex>
-                <SliderWithInfo
-                  label="Zoom speed"
-                  value={behavior.zoomSpeed}
-                  min={0}
-                  max={4000}
-                  step={100}
-                  onChange={(value) => setBehavior({ ...behavior, zoomSpeed: value })}
-                />
-                <SliderWithInfo
-                  label="Zoom padding"
-                  value={behavior.zoomPadding}
-                  min={0}
-                  max={400}
-                  step={1}
-                  onChange={(value) => setBehavior({ ...behavior, zoomPadding: value })}
-                  infoText="How much to zoom out to accomodate all nodes when changing the view."
-                />
-              </VStack>
+              <BehaviorPanel
+                behavior={behavior}
+                setBehavior={setBehavior}
+                mouse={mouse}
+                setMouse={setMouse}
+              />
             </AccordionPanel>
           </AccordionItem>
         </Accordion>
@@ -384,28 +215,3 @@ export const Tweaks = (props: TweakProps) => {
     </Box>
   )
 }
-
-export interface DropDownMenuProps {
-  textArray: string[]
-  onClickArray: (() => void)[]
-  displayValue: string
-}
-
-export const DropDownMenu = (props: DropDownMenuProps) => {
-  const { textArray, onClickArray, displayValue } = props
-  return (
-    <Menu isLazy placement="right">
-      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
-        {displayValue}
-      </MenuButton>
-      <Portal>
-        {' '}
-        <MenuList zIndex="popover">
-          {textArray.map((option, i) => {
-            ;<MenuItem onClick={onClickArray[i]}> {option} </MenuItem>
-          })}
-        </MenuList>
-      </Portal>
-    </Menu>
-  )
-}
-- 
cgit v1.2.3