From 236b5214b188f7731bb7168572eb8cbf8244a233 Mon Sep 17 00:00:00 2001 From: Kirill Rogovoy Date: Sun, 25 Jul 2021 14:05:06 +0300 Subject: Separate out Tweaks and config-related things --- components/config.ts | 65 +++++++ components/tweaks.tsx | 471 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 536 insertions(+) create mode 100644 components/config.ts create mode 100644 components/tweaks.tsx (limited to 'components') diff --git a/components/config.ts b/components/config.ts new file mode 100644 index 0000000..41d5345 --- /dev/null +++ b/components/config.ts @@ -0,0 +1,65 @@ +import { Easing } from '@tweenjs/tween.js' + +export const initialPhysics = { + enabled: true, + charge: -350, + collision: true, + collisionStrength: 0, + linkStrength: 0.1, + linkIts: 1, + particles: false, + particlesNumber: 0, + particlesWidth: 4, + linkOpacity: 0.4, + linkWidth: 1, + nodeRel: 4, + labels: true, + labelScale: 1.5, + alphaDecay: 0.02, + alphaTarget: 0, + alphaMin: 0, + velocityDecay: 0.25, + gravity: 0.5, + gravityOn: true, + colorful: true, + galaxy: true, + ticks: 1, + hover: 'highlight', + click: 'select', + doubleClick: 'local', + iterations: 0, + highlight: true, + highlightNodeSize: 2, + highlightLinkSize: 2, + highlightAnim: false, + animationSpeed: 250, + algorithms: getAlgos(false), + algorithmOptions: getAlgos(true), + algorithmName: 'CubicOut', + orphans: false, + follow: 'Local', +} + +export const initialFilter = { + orphans: false, + parents: true, + tags: [], + nodes: [], + links: [], + date: [], +} + +function getAlgos(option?: boolean) { + const options: string[] = [] + const algorithms: { [name: string]: (percent: number) => number } = {} + for (let type in Easing) { + for (let mode in (Easing as any)[type]) { + let name = type + mode + if (name === 'LinearNone') { + name = 'Linear' + } + option ? options.push(name) : (algorithms[name] = (Easing as any)[type][mode]) + } + } + return option ? options : algorithms +} diff --git a/components/tweaks.tsx b/components/tweaks.tsx new file mode 100644 index 0000000..a082306 --- /dev/null +++ b/components/tweaks.tsx @@ -0,0 +1,471 @@ +import { RepeatClockIcon, ChevronDownIcon, SettingsIcon, InfoOutlineIcon } from '@chakra-ui/icons' +import { + Accordion, + AccordionButton, + AccordionIcon, + AccordionItem, + AccordionPanel, + Box, + Button, + CloseButton, + Flex, + IconButton, + Menu, + MenuButton, + MenuItem, + MenuList, + Select, + Slider, + SliderFilledTrack, + SliderThumb, + SliderTrack, + StackDivider, + Switch, + Text, + Tooltip, + VStack, +} from '@chakra-ui/react' +import Scrollbars from 'react-custom-scrollbars-2' +import { initialPhysics, initialFilter } from './config' + +export interface TweakProps { + physics: typeof initialPhysics + setPhysics: any + threeDim: boolean + setThreeDim: (newValue: boolean) => void + filter: typeof initialFilter + setFilter: any + onClose: () => void +} + +export const Tweaks = (props: TweakProps) => { + const { physics, setPhysics, threeDim, filter, setFilter, onClose } = props + return ( + + + + } + onClick={() => setPhysics(initialPhysics)} + colorScheme="purple" + /> + + + + ( + + )} + > + + + + + Filter + + + + Kill orphans + { + setFilter({ ...filter, orphans: !filter.orphans }) + }} + isChecked={filter.orphans} + > + + + Link nodes with parent file + { + setFilter({ ...filter, parents: !filter.parents }) + }} + isChecked={filter.parents} + > + + + + + + + + Physics + + setPhysics({ ...physics, enabled: !physics.enabled })} + isChecked={physics.enabled} + colorScheme="purple" + /> + + + } + align="stretch" + > + setPhysics({ ...physics, gravityOn: !physics.gravityOn })} + > + setPhysics({ ...physics, gravity: v / 10 })} + /> + + setPhysics({ ...physics, charge: -100 * value })} + label="Repulsive Force" + /> + setPhysics({ ...physics, collision: !physics.collision })} + > + setPhysics({ ...physics, collisionStrength: value / 10 })} + label="Strength" + /> + + setPhysics({ ...physics, linkStrength: value / 5 })} + label="Link Force" + /> + setPhysics({ ...physics, linkIts: value })} + min={0} + max={6} + step={1} + infoText="How many links down the line the physics of a single node affects (Slow)" + /> + setPhysics({ ...physics, velocityDecay: value / 10 })} + /> + + + + + + Advanced + + + + } + align="stretch" + > + setPhysics({ ...physics, iterations: v })} + infoText="Number of times the physics simulation iterates per simulation step" + /> + setPhysics({ ...physics, alphaDecay: value / 50 })} + /> + + + + + + {/* */} + + + + + + Visual + + + } + align="stretch" + > + setPhysics({ ...physics, colorful: !physics.colorful })} + value={physics.colorful} + > + Child + + setPhysics({ ...physics, nodeRel: value })} + /> + setPhysics({ ...physics, linkWidth: value })} + /> + setPhysics({ ...physics, labels: !physics.labels })} + > + setPhysics({ ...physics, labelScale: value / 5 })} + /> + + setPhysics({ ...physics, particles: !physics.particles })} + > + setPhysics({ ...physics, particlesNumber: value })} + /> + setPhysics({ ...physics, particlesWidth: value })} + /> + + { + setPhysics({ ...physics, highlightAnim: !physics.highlightAnim }) + }} + value={physics.highlightAnim} + > + setPhysics({ ...physics, animationSpeed: v })} + value={physics.animationSpeed} + infoText="Slower speed has a chance of being buggy" + min={50} + max={1000} + step={10} + /> + + {/* + setPhysics({ ...physics, algorithmName: { option } }), + )} + /> */} + + setPhysics({ ...physics, highlight: !physics.highlight })} + value={physics.highlight} + > + setPhysics({ ...physics, highlightLinkSize: value })} + /> + setPhysics({ ...physics, highlightNodeSize: value })} + /> + + Highlight node color + + + Highlight link color + + + + + + + + + Behavior + + + } + align="stretch" + > + + Hover Higlight + + }> + {physics.hover} + + + Off + On + + + + + Click + + + Double-click + + + + + + + + ) +} +export interface InfoTooltipProps { + infoText?: string | boolean +} +export const InfoTooltip = (props: InfoTooltipProps) => { + const { infoText } = props + return ( + + + + + + ) +} +export interface SliderWithInfoProps { + min?: number + max?: number + step?: number + value: number + onChange: (arg0: number) => void + label: string + infoText?: string +} +export const SliderWithInfo = ({ + min = 0, + max = 10, + step = 0.1, + value = 1, + ...rest +}: SliderWithInfoProps) => { + const { onChange, label, infoText } = rest + return ( + + + {label} + {infoText && } + + + + + + + + + + + ) +} + +export interface EnableSectionProps { + label: string + value: boolean | number + onChange: () => void + infoText?: string + children: React.ReactNode +} + +export const EnableSection = (props: EnableSectionProps) => { + const { value, onChange, label, infoText, children } = props + return ( + + + + {label} + {infoText && } + + + + {value && children} + + ) +} + +export interface DropDownMenuProps { + textArray: string[] + onClickArray: any + displayValue: string +} + +export const DropDownMenu = (props: DropDownMenuProps) => { + const { textArray, onClickArray, displayValue } = props + return ( + + }> + {displayValue} + + + {textArray.map((option, i) => { + ; {option} + })} + + + ) +} -- cgit v1.2.3