chore: separated out physics panel as component

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>