diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-09-25 16:11:31 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-09-25 16:11:31 +0200 |
commit | ee8539a9351374a719c9026f85d85e7b4ea6e8f5 (patch) | |
tree | f9220fd304bd3669523df39ddaa0992919ccc4a6 /components/PhysicsPanel.tsx | |
parent | 075d3831ffae63f128bcaabf9fc5e70ade41ad33 (diff) |
chore: move tweaks to separate subfolder
Diffstat (limited to 'components/PhysicsPanel.tsx')
-rw-r--r-- | components/PhysicsPanel.tsx | 143 |
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> - ) -} |