summaryrefslogtreecommitdiff
path: root/components/tweaks.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/tweaks.tsx')
-rw-r--r--components/tweaks.tsx134
1 files changed, 3 insertions, 131 deletions
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index b19ff75..d6f5ba1 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -3,12 +3,8 @@ import {
RepeatClockIcon,
ChevronDownIcon,
SettingsIcon,
- InfoOutlineIcon,
RepeatIcon,
ArrowRightIcon,
- AddIcon,
- DeleteIcon,
- CheckCircleIcon,
} from '@chakra-ui/icons'
import {
Accordion,
@@ -27,10 +23,6 @@ import {
MenuOptionGroup,
MenuItemOption,
Select,
- Slider,
- SliderFilledTrack,
- SliderThumb,
- SliderTrack,
StackDivider,
Switch,
Text,
@@ -38,14 +30,10 @@ import {
VStack,
Heading,
Collapse,
- Grid,
Portal,
- SlideFade,
- Input,
} from '@chakra-ui/react'
-import { CUIAutoComplete } from 'chakra-ui-autocomplete'
-import React, { useState, useContext, useEffect, useCallback } from 'react'
+import React, { useContext, useCallback } from 'react'
import Scrollbars from 'react-custom-scrollbars-2'
import {
initialPhysics,
@@ -65,6 +53,7 @@ import { usePersistantState } from '../util/persistant-state'
import { SliderWithInfo } from './SliderWithInfo'
import { EnableSection } from './EnableSection'
import { InfoTooltip } from './InfoTooltip'
+import { PhysicsPanel } from './PhysicsPanel'
export interface TweakProps {
physics: typeof initialPhysics
@@ -106,11 +95,6 @@ export const Tweaks = (props: TweakProps) => {
const { highlightColor, setHighlightColor } = useContext(ThemeContext)
const setVisualsCallback = useCallback((val) => setVisuals(val), [])
- const setPhysicsCallback = useCallback((val: number, phys: string, scale: number) => {
- setPhysics((curr: typeof initialPhysics) => {
- return { ...curr, [phys]: val / scale }
- })
- }, [])
return !showTweaks ? (
<Box
@@ -217,121 +201,9 @@ export const Tweaks = (props: TweakProps) => {
<AccordionIcon marginRight={2} />
<Heading size="sm">Physics</Heading>
</Box>
- {/* <Switch
- id="physicsOn"
- onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })}
- isChecked={physics.enabled}
- /> */}
</AccordionButton>
<AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- paddingLeft={7}
- color="gray.800"
- >
- <EnableSection
- label="Gravity"
- value={physics.gravityOn}
- onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })}
- >
- <Flex justifyContent="space-between">
- <Text>Also in local</Text>
- <Switch
- onChange={() => {
- setPhysics((curr: typeof initialPhysics) => {
- return { ...curr, gravityLocal: !curr.gravityLocal }
- })
- }}
- isChecked={physics.gravityLocal}
- ></Switch>
- </Flex>
- <SliderWithInfo
- label="Strength"
- value={physics.gravity * 10}
- onChange={(v: number) => setPhysicsCallback(v, 'gravity', 10)}
- />
- </EnableSection>
- <SliderWithInfo
- value={-physics.charge / 100}
- onChange={(v) => setPhysicsCallback(v, 'charge', -1 / 100)}
- label="Repulsive Force"
- />
- <EnableSection
- label="Collision"
- infoText="Perfomance sap, disable if slow"
- value={physics.collision}
- onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
- >
- <SliderWithInfo
- value={physics.collisionStrength / 5}
- onChange={(v) => setPhysicsCallback(v, 'collisionStrength', 1 / 5)}
- label="Collision Radius"
- infoText="Easy with this one, high values can lead to a real jiggly mess"
- />
- </EnableSection>
- <SliderWithInfo
- value={physics.linkStrength * 5}
- onChange={(v) => setPhysicsCallback(v, 'linkStrength', 5)}
- label="Link Force"
- />
- <SliderWithInfo
- label="Link Iterations"
- value={physics.linkIts}
- onChange={(v) => setPhysicsCallback(v, 'linkIts', 1)}
- min={0}
- max={6}
- step={1}
- infoText="How many links down the line the physics of a single node affects (Slow)"
- />
- <SliderWithInfo
- label="Viscosity"
- value={physics.velocityDecay * 10}
- onChange={(v) => setPhysicsCallback(v, 'velocityDecay', 10)}
- />
- </VStack>
- <Box>
- <Accordion paddingLeft={3} allowToggle>
- <AccordionItem>
- <AccordionButton>
- <Text>Advanced</Text>
- <AccordionIcon marginRight={2} />
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- paddingLeft={3}
- color="gray.800"
- >
- <SliderWithInfo
- label="Stabilization rate"
- value={physics.alphaDecay * 50}
- onChange={(v) => setPhysicsCallback(v, 'alphaDecay', 50)}
- />
- <EnableSection
- label="Center nodes"
- value={physics.centering}
- onChange={() => setPhysics({ ...physics, centering: !physics.centering })}
- infoText="Keeps the nodes in the center of the viewport. If disabled you can drag the nodes anywhere you want."
- >
- <SliderWithInfo
- label="Centering Strength"
- value={physics.centeringStrength}
- max={2}
- step={0.01}
- onChange={(v) => setPhysicsCallback(v, 'centeringStrength', 1)}
- />
- </EnableSection>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- </Accordion>
- </Box>
+ <PhysicsPanel physics={physics} setPhysics={setPhysics} />
</AccordionPanel>
</AccordionItem>
<AccordionItem>