summaryrefslogtreecommitdiff
path: root/components/tweaks.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
committerThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
commitee8539a9351374a719c9026f85d85e7b4ea6e8f5 (patch)
treef9220fd304bd3669523df39ddaa0992919ccc4a6 /components/tweaks.tsx
parent075d3831ffae63f128bcaabf9fc5e70ade41ad33 (diff)
chore: move tweaks to separate subfolder
Diffstat (limited to 'components/tweaks.tsx')
-rw-r--r--components/tweaks.tsx217
1 files changed, 0 insertions, 217 deletions
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
deleted file mode 100644
index a78c7f4..0000000
--- a/components/tweaks.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { CloseIcon, RepeatClockIcon, SettingsIcon } from '@chakra-ui/icons'
-import {
- Accordion,
- AccordionButton,
- AccordionIcon,
- AccordionItem,
- AccordionPanel,
- Box,
- Button,
- IconButton,
- Tooltip,
- Heading,
-} from '@chakra-ui/react'
-
-import React, { useContext } from 'react'
-import Scrollbars from 'react-custom-scrollbars-2'
-import {
- initialPhysics,
- initialFilter,
- initialVisuals,
- initialMouse,
- initialBehavior,
- TagColors,
- colorList,
-} from './config'
-
-import FilterPanel from './FilterPanel'
-
-import { ThemeContext } from '../util/themecontext'
-import { usePersistantState } from '../util/persistant-state'
-import { PhysicsPanel } from './PhysicsPanel'
-import { VisualsPanel } from './VisualsPanel'
-import { BehaviorPanel } from './BehaviorPanel'
-
-export interface TweakProps {
- physics: typeof initialPhysics
- setPhysics: any
- threeDim: boolean
- setThreeDim: (newValue: boolean) => void
- filter: typeof initialFilter
- setFilter: any
- visuals: typeof initialVisuals
- setVisuals: any
- mouse: typeof initialMouse
- setMouse: any
- behavior: typeof initialBehavior
- setBehavior: any
- tags: string[]
- tagColors: TagColors
- setTagColors: any
-}
-
-export const Tweaks = (props: TweakProps) => {
- const {
- physics,
- setPhysics,
- threeDim,
- setThreeDim,
- filter,
- setFilter,
- visuals,
- setVisuals,
- mouse,
- setMouse,
- behavior,
- setBehavior,
- tags,
- tagColors,
- setTagColors,
- } = props
- const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false)
- const { highlightColor, setHighlightColor } = useContext(ThemeContext)
-
- return !showTweaks ? (
- <Box
- position="absolute"
- zIndex="overlay"
- marginTop={10}
- marginLeft={10}
- display={showTweaks ? 'none' : 'block'}
- >
- <IconButton
- variant="ghost"
- aria-label="Settings"
- icon={<SettingsIcon />}
- onClick={() => setShowTweaks(true)}
- />
- </Box>
- ) : (
- <Box
- bg="alt.100"
- w="xs"
- marginTop={10}
- marginLeft={10}
- borderRadius="xl"
- paddingBottom={5}
- zIndex={300}
- position="relative"
- boxShadow="xl"
- maxH={0.92 * globalThis.innerHeight}
- marginBottom={10}
- >
- <Box
- display="flex"
- justifyContent="space-between"
- alignItems="center"
- paddingRight={2}
- paddingTop={1}
- >
- <Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}>
- <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay">
- {threeDim ? '3D' : '2D'}
- </Button>
- </Tooltip>
- <Box display="flex" alignItems="center">
- <Tooltip label="Reset settings to defaults">
- <IconButton
- aria-label="Reset Defaults"
- icon={<RepeatClockIcon />}
- onClick={() => {
- setVisuals(initialVisuals)
- setFilter(initialFilter)
- setMouse(initialMouse)
- setPhysics(initialPhysics)
- setBehavior(initialBehavior)
- }}
- variant="none"
- size="sm"
- />
- </Tooltip>
- <IconButton
- size="sm"
- icon={<CloseIcon />}
- aria-label="Close Tweak Panel"
- variant="ghost"
- onClick={() => setShowTweaks(false)}
- />
- </Box>
- </Box>
- <Scrollbars
- autoHeight
- autoHeightMax={0.85 * globalThis.innerHeight}
- autoHide
- renderThumbVertical={({ style, ...props }) => (
- <Box
- {...props}
- style={{
- ...style,
- borderRadius: 10,
- }}
- bg={highlightColor}
- />
- )}
- >
- <Accordion allowMultiple allowToggle color="black">
- <AccordionItem>
- <AccordionButton>
- <AccordionIcon marginRight={2} />
- <Heading size="sm">Filter</Heading>
- </AccordionButton>
- <AccordionPanel>
- <FilterPanel
- filter={filter}
- setFilter={setFilter}
- tagColors={tagColors}
- setTagColors={setTagColors}
- highlightColor={highlightColor}
- colorList={colorList}
- tags={tags}
- />
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton display="flex" justifyContent="space-between">
- <Box display="flex">
- <AccordionIcon marginRight={2} />
- <Heading size="sm">Physics</Heading>
- </Box>
- </AccordionButton>
- <AccordionPanel>
- <PhysicsPanel physics={physics} setPhysics={setPhysics} />
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- <AccordionIcon marginRight={2} />
- <Heading size="sm">Visual</Heading>
- </AccordionButton>
- <AccordionPanel>
- <VisualsPanel
- visuals={visuals}
- setVisuals={setVisuals}
- highlightColor={highlightColor}
- setHighlightColor={setHighlightColor}
- threeDim={threeDim}
- />
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- <AccordionIcon marginRight={2} />
- <Heading size="sm">Behavior</Heading>
- </AccordionButton>
- <AccordionPanel>
- <BehaviorPanel
- behavior={behavior}
- setBehavior={setBehavior}
- mouse={mouse}
- setMouse={setMouse}
- />
- </AccordionPanel>
- </AccordionItem>
- </Accordion>
- </Scrollbars>
- </Box>
- )
-}