summaryrefslogtreecommitdiff
path: root/components/PhysicsPanel.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/PhysicsPanel.tsx
parent075d3831ffae63f128bcaabf9fc5e70ade41ad33 (diff)
chore: move tweaks to separate subfolder
Diffstat (limited to 'components/PhysicsPanel.tsx')
-rw-r--r--components/PhysicsPanel.tsx143
1 files changed, 0 insertions, 143 deletions
diff --git a/components/PhysicsPanel.tsx b/components/PhysicsPanel.tsx
deleted file mode 100644
index 1bdfaa0..0000000
--- a/components/PhysicsPanel.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import {
- Text,
- Accordion,
- AccordionButton,
- AccordionIcon,
- AccordionItem,
- AccordionPanel,
- Box,
- Flex,
- StackDivider,
- Switch,
- VStack,
-} from '@chakra-ui/react'
-import React, { useCallback } from 'react'
-import { initialPhysics } from './config'
-import { EnableSection } from './EnableSection'
-import { SliderWithInfo } from './SliderWithInfo'
-
-export interface PhysicsPanelProps {
- physics: typeof initialPhysics
- setPhysics: any
-}
-
-export const PhysicsPanel = (props: PhysicsPanelProps) => {
- const { physics, setPhysics } = props
- const setPhysicsCallback = useCallback((val: number, phys: string, scale: number) => {
- setPhysics((curr: typeof initialPhysics) => {
- return { ...curr, [phys]: val / scale }
- })
- }, [])
- return (
- <Box>
- <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>
- </Box>
- )
-}