diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/tweaks.tsx | 134 |
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> |