Variables
Const Background
Background: StyledComponent<"div", any, {}, never> = styled.div`position: absolute;width: 100%;height: 100%;background: ${ Colors.accent };opacity: 0.2;`
Const BarBG
BarBG: StyledComponent<"div", any, {}, never> = styled.div`position: absolute;bottom: 0.25rem;height: 0.125rem;width: 100%;background: ${ Colors.back1 };pointer-events: none;`
Const BiggerOne
BiggerOne: StyledComponent<"div", any, {}, never> = styled.div``
Const Body
Body: StyledComponent<"div", any, {}, never> = styled.div`position: absolute;left: 0;top: 0;width: 100%;height: calc( 100% - 4px );background: ${ Colors.back1 };pointer-events: auto;`
Const Box
Box: StyledComponent<"div", any, {}, never> = styled.div`display: inline-block;width: 1rem;height: 1rem;background: ${ Colors.back3 };cursor: pointer;pointer-events: auto;&:active {opacity: 0.5;}`
Const Button
Button: StyledComponent<"img", any, { active?: undefined | false | true }, never> = styled.img<{ active?: boolean }>`width: calc( ${ Metrics.modeSelectorWidth }px );height: calc( ${ Metrics.modeSelectorWidth }px );padding: 6px;margin: 2px 0;fill: ${ ( { active } ) => active ? Colors.accent : Colors.fore };cursor: pointer;&:hover {fill: ${ ( { active } ) => active ? Colors.accentdark : Colors.foredark };}`
Const Buttons
Buttons: StyledComponent<"div", any, {}, never> = styled.div`position: absolute;right: 0;top: 0;display: flex;`
Const CURVE_DEFAULT_HANDLE_LENGTH
CURVE_DEFAULT_HANDLE_LENGTH: 0.1 = 0.1
Const CURVE_FX_ROW_MAX
CURVE_FX_ROW_MAX: 5 = 5
Const CURVE_RESO
CURVE_RESO: 240 = 240
Const CalculateButton
CalculateButton: StyledComponent<"div", any, {}, never> = styled.div`margin: 4px auto 0;font-size: 0.8rem;line-height: 1.2rem;width: 128px;text-align: center;background: ${ Colors.back3 };cursor: pointer;&:hover {background: ${ Colors.back4 };}&:active {background: ${ Colors.back1 };}`
Const ChannelListAndDopeSheetContainer
ChannelListAndDopeSheetContainer: StyledComponent<"div", any, {}, never> = styled.div`display: flex;padding-bottom: 4px;`
Const ChannelListAndDopeSheetScrollable
Channel
ListAndDopeSheetScrollable: StyledComponent<Scrollable, any, {}, never> = styled( Scrollable )`position: absolute;left: 0;top: 0;width: 100%;height: 100%;`
Const Check
Check: StyledComponent<"div", any, {}, never> = styled.div`width: 0.5rem;height: 0.5rem;margin: 0.25rem;background: ${ Colors.fore };`
Const Circle
Circle: StyledComponent<"circle", any, {}, never> = styled.circle`fill: ${ Colors.accent };pointer-events: none;`
Const Close
Close: StyledComponent<"svg", any, {}, never> = styled( Icons.Close )`position: absolute;right: 0.4rem;top: 0.4rem;width: 0.8rem;fill: ${ Colors.fore };cursor: pointer;&:hover {opacity: 0.7;}`
Const ConfirmButton
ConfirmButton: StyledComponent<"div", any, {}, never> = styled.div`margin: 4px auto 0;font-size: 0.8rem;line-height: 1.2rem;width: 4rem;text-align: center;background: ${ Colors.back3 };cursor: pointer;&:hover {background: ${ Colors.back4 };}&:active {background: ${ Colors.back1 };}`
Const Container
Container: StyledComponent<"div", any, {}, never> = styled.div`padding: 0.5rem 1rem;`
Const ContextMenuHr
ContextMenuHr: StyledComponent<"div", any, {}, never> = styled.div`margin: 0.25rem 0;height: 0.125rem;width: 100%;background: ${ Colors.back3 };`
Const CurvePath
CurvePath: StyledComponent<"polyline", any, {}, never> = styled.polyline`fill: none;stroke: ${ Colors.fore };stroke-width: 2px;stroke-linecap: round;stroke-linejoin: round;overflow: hidden;`
Const Description
Description: StyledComponent<"div", any, {}, never> = styled.div`margin-bottom: 0.5rem;`
Const EPSILON
EPSILON: 0.0001 = 0.0001
Const FX_HEIGHT
FX_HEIGHT: 16 = 16
Const FallbackRoot
FallbackRoot: StyledComponent<"div", any, {}, never> = styled.div`position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: ${ Colors.back1 };background-color: ${ Colors.back1 };background-size: 40px 40px;background-image: repeating-linear-gradient(45deg,${ Colors.error }44 0,${ Colors.error }44 25%,${ Colors.error }88 0,${ Colors.error }88 50%);animation: ${ keyframe } 1s linear infinite;`
Const Fill
Fill: StyledComponent<"rect", any, {}, never> = styled.rect`fill: ${ Colors.fx };opacity: 0.1;`
Const FxBody
FxBody: StyledComponent<"rect", any, { isBypassed: boolean | undefined; isMissing: boolean | undefined; isSelected: boolean }, never> = styled.rect<{ isSelected: boolean; isBypassed: boolean | undefined; isMissing: boolean | undefined }>`fill: ${ ( { isSelected, isBypassed, isMissing } ) => (isSelected? isMissing? Colors.error: isBypassed? Colors.gray: Colors.fx: Colors.back1) };stroke: ${ ( { isBypassed, isMissing } ) => (isMissing? Colors.error: isBypassed? Colors.gray: Colors.fx) };stroke-width: 0.125rem;cursor: pointer;pointer-events: auto;rx: 0.25rem;ry: 0.25rem;`
Const FxList
Fx
List: StyledComponent<Scrollable, any, {}, never> = styled( Scrollable )`height: 10rem;`
Const FxSide
FxSide: StyledComponent<"rect", any, {}, never> = styled.rect`fill: rgba( 0, 0, 0, 0 );stroke: rgba( 0, 0, 0, 0 );stroke-width: 0.125rem;cursor: ew-resize;pointer-events: auto;rx: 0.25rem;ry: 0.25rem;`
Const FxText
FxText: StyledComponent<"text", any, { isBypassed: boolean | undefined; isMissing: boolean | undefined; isSelected: boolean }, never> = styled.text<{ isSelected: boolean; isBypassed: boolean | undefined; isMissing: boolean | undefined }>`fill: ${ ( { isSelected, isBypassed, isMissing } ) => (isSelected ?Colors.back1: isMissing? Colors.error: isBypassed? Colors.gray: Colors.fx) };font-size: 0.7rem;`
Const GraphLine
GraphLine: StyledComponent<"polyline", any, {}, never> = styled.polyline`fill: none;stroke: ${ Colors.fore };stroke-width: 0.125rem;stroke-linecap: round;stroke-linejoin: round;`
Const GraphLineWithoutFxs
GraphLineWithoutFxs: StyledComponent<"polyline", any, {}, never> = styled.polyline`fill: none;stroke: ${ Colors.fore };opacity: 0.5;stroke-width: 0.5px;stroke-linecap: round;stroke-linejoin: round;`
Const GridLine
GridLine: StyledComponent<"line", any, {}, never> = styled.line`stroke: ${ Colors.fore };stroke-width: 0.0625rem;pointer-events: none;`
Const GridText
GridText: StyledComponent<"text", any, {}, never> = styled.text`fill: ${ Colors.fore };font-size: 0.6rem;pointer-events: none;`
Const HEIGHT
HEIGHT: 12 = 12
Const HandleCircle
HandleCircle: StyledComponent<"circle", any, {}, never> = styled.circle`fill: ${ Colors.accent };cursor: pointer;pointer-events: auto;`
Const HandleLine
HandleLine: StyledComponent<"line", any, {}, never> = styled.line`stroke: ${ Colors.accent };stroke-width: 0.0625rem;`
Const Hr
Hr: StyledComponent<"div", any, {}, never> = styled.div`margin-bottom: 0.5rem;height: 0.0625rem;background: ${ Colors.fore };`
Const Icon
Icon: StyledComponent<"img", any, {}, never> = styled.img`width: 24px;height: 24px;flex-shrink: 0;margin-right: 8px;`
Const Id
Id: StyledComponent<"div", any, {}, never> = styled.div`padding: 0.2rem 0.2rem;font-size: 0.6rem;line-height: 1em;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: ${ Colors.gray };`
Const Input
Input: StyledComponent<"input", any, { isValid: boolean }, never> = styled.input< { isValid: boolean } >`display: block;position: absolute;overflow: hidden;padding: 4px;border-radius: 4px;background: ${ ( { isValid } ) => ( isValid ? Colors.foresub : Colors.errorBright ) };color: ${ Colors.back1 };width: 240px;filter: drop-shadow( 0 0 2px ${ Colors.black } );font-size: 0.8rem;font-family: 'Roboto', sans-serif;line-height: 1em;border: none;`
Const InspectorHr
InspectorHr: StyledComponent<"div", any, {}, never> = styled.div`margin: 0.25rem 0;height: 0.125rem;width: 100%;background: ${ Colors.back3 };`
Const LargeA
LargeA: StyledComponent<"svg", any, {}, never> = styled( Icons.AutomatonA )`position: absolute;left: 0;top: 0;width: 100%;fill: ${ Colors.black };opacity: 0.02;mix-blend-mode: darken;`
Const Logo
Logo: StyledComponent<"img", any, {}, never> = styled.img`position: absolute;fill: ${ Colors.black };left: ${ 0.15 * Metrics.inspectorWidth }px;top: calc( 50% - ${ 0.35 * Metrics.inspectorWidth }px );width: calc( ${ 0.7 * Metrics.inspectorWidth }px );opacity: 0.2;`
Const LogoAndVersion
LogoAndVersion: StyledComponent<"div", any, {}, never> = styled.div`margin-bottom: 0.2rem;`
Const Name
Name: StyledComponent<"div", any, {}, never> = styled.div`padding: 0.1rem 0.2rem;font-size: 0.8rem;line-height: 1em;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: ${ Colors.fore };`
Const NameBig
NameBig: StyledComponent<"span", any, {}, never> = styled.span`font-size: 14px;`
Const NameSmall
NameSmall: StyledComponent<"span", any, {}, never> = styled.span`font-size: 9px;`
Const NewChannelButton
NewChannelButton: StyledComponent<"div", any, {}, never> = styled.div`display: flex;justify-content: center;align-items: center;width: 100%;height: 18px;margin: 2px 0;cursor: pointer;background: ${ Colors.back3 };&:active {background: ${ Colors.back4 };}`
Const NewChannelIcon
NewChannelIcon: StyledComponent<"img", any, {}, never> = styled.img`fill: ${ Colors.gray };height: 16px;`
Const NewCurveButton
NewCurveButton: StyledComponent<"div", any, {}, never> = styled.div`display: flex;justify-content: center;align-items: center;width: calc( 100% - 4px );height: ${ Metrics.curveListEntryHeight }px;margin: 2px;cursor: pointer;background: ${ Colors.back3 };&:active {background: ${ Colors.back4 };}`
Const NewCurveIcon
NewCurveIcon: StyledComponent<"img", any, {}, never> = styled.img`fill: ${ Colors.gray };height: 16px;`
Const NodeBody
NodeBody: StyledComponent<"circle", any, { isSelected: boolean }, never> = styled.circle<{ isSelected: boolean }>`fill: ${ ( { isSelected } ) => ( isSelected ? Colors.accent : Colors.back1 ) };stroke: ${ Colors.accent };stroke-width: 0.125rem;cursor: pointer;pointer-events: auto;`
Const OverlayBG
OverlayBG: StyledComponent<"div", any, {}, never> = styled.div`position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba( 0, 0, 0, 0 );`
Const PlayPause
PlayPause: StyledComponent<"img", any, {}, never> = styled.img`width: ${ Metrics.headerHeight + 4 }px;height: ${ Metrics.headerHeight }px;padding: 2px 4px;fill: ${ Colors.fore };cursor: pointer;&:hover {fill: ${ Colors.foredark };}`
Const Proximity
Proximity: StyledComponent<"div", any, {}, never> = styled.div`position: absolute;left: 0;top: -100px;width: 100%;height: calc( 100% + 200px );pointer-events: none;`
Const Rect
Rect: StyledComponent<"rect", any, { selected: boolean }, never> = styled.rect< { selected: boolean } >`fill: ${ ( { selected } ) => selected ? Colors.accent : Colors.foresub };pointer-events: auto;cursor: pointer;`
Const Region
Region: StyledComponent<"rect", any, {}, never> = styled.rect`fill: ${ Colors.accent };opacity: 0.1;pointer-events: none;`
Const ResetIcon
ResetIcon: StyledComponent<"svg", any, {}, never> = styled( Icons.Power )`position: absolute;fill: ${ Colors.foresub };`
Const Root
Root: StyledComponent<"div", any, {}, never> = styled.div`* {box-sizing: border-box;}margin: 0;padding: 0;width: 100%;height: 100%;position: absolute;font-family: 'Roboto', sans-serif;font-weight: 300;font-size: ${ Metrics.rootFontSize }px;background: ${ Colors.back2 };color: ${ Colors.fore };user-select: none;`
Const SVGRoot
SVGRoot: StyledComponent<"svg", any, {}, never> = styled.svg`width: 100%;height: 100%;`
Const Section
Section: StyledComponent<"div", any, {}, never> = styled.div`display: flex;`
Const Side
Side: StyledComponent<"rect", any, {}, never> = styled.rect`opacity: 0.0;cursor: ew-resize;pointer-events: auto;`
Const SmallerOne
SmallerOne: StyledComponent<"div", any, {}, never> = styled.div`font-size: 10px;`
Const Stroke
Stroke: StyledComponent<"rect", any, {}, never> = styled.rect`fill: none;stroke: ${ Colors.accent };stroke-width: 2px;rx: 4px;ry: 4px;`
Const StyledAbout
Styled
About: StyledComponent<About, any, {}, never> = styled( About )`position: absolute;width: 100%;height: 100%;`
Const StyledBar
Styled
Bar: StyledComponent<Bar, any, {}, never> = styled( Bar )`position: absolute;width: 0.25rem;background: ${ Colors.accent };border-radius: 0.125rem;`
Const StyledBarFG
Styled
BarFG: StyledComponent<BarFG, any, { isHovering: boolean; isSeeking: boolean }, never> = styled( BarFG )<{ isSeeking: boolean; isHovering: boolean }>`position: absolute;bottom: 0.25rem;height: 0.125rem;background: ${ ( { isSeeking, isHovering } ) => (isSeeking ? Colors.accentdark : isHovering ? Colors.accent : Colors.fore) };pointer-events: none;`
Const StyledChannelEditor
Styled
ChannelEditor: StyledComponent<ChannelEditor, any, {}, never> = styled( ChannelEditor )`position: absolute;left: ${ Metrics.modeSelectorWidth + Metrics.channelListWidth }px;top: ${ Metrics.headerHeight }px;width: calc( 100% - ${ Metrics.modeSelectorWidth + Metrics.channelListWidth + Metrics.inspectorWidth }px );height: calc( 100% - ${ Metrics.headerHeight }px );`
Const StyledChannelList
Styled
ChannelList: StyledComponent<ChannelList, any, {}, never> = styled( ChannelList )`width: ${ Metrics.channelListWidth - 4 }px;margin: 0 2px;`
Const StyledChannelListAndDopeSheet
Styled
ChannelListAndDopeSheet: StyledComponent<ChannelListAndDopeSheet, any, {}, never> = styled( ChannelListAndDopeSheet )`position: absolute;left: ${ Metrics.modeSelectorWidth }px;top: ${ Metrics.headerHeight }px;width: calc( 100% - ${ Metrics.modeSelectorWidth + Metrics.inspectorWidth }px );height: calc( 100% - ${ Metrics.headerHeight }px );`
Const StyledChannelListEntry
Styled
ChannelListEntry: StyledComponent<ChannelListEntry, any, {}, never> = styled( ChannelListEntry )`width: 100%;margin: 2px 0;cursor: pointer;`
Const StyledCurrentTime
Styled
CurrentTime: StyledComponent<CurrentTime, any, {}, never> = styled( CurrentTime )`font-size: 0.8rem;pointer-events: none;`
Const StyledCurveEditor
Styled
CurveEditor: StyledComponent<CurveEditor, any, {}, never> = styled( CurveEditor )`position: absolute;left: ${ Metrics.modeSelectorWidth + Metrics.curveListWidth }px;bottom: 0;width: calc( 100% - ${ Metrics.modeSelectorWidth + Metrics.curveListWidth + Metrics.inspectorWidth }px );height: calc( 100% - ${ Metrics.headerHeight }px );`
Const StyledCurveList
Styled
CurveList: StyledComponent<CurveList, any, {}, never> = styled( CurveList )`position: absolute;left: ${ Metrics.modeSelectorWidth }px;bottom: 0;width: ${ Metrics.curveListWidth }px;height: calc( 100% - ${ Metrics.headerHeight }px );`
Const StyledCurveListEntry
Styled
CurveListEntry: StyledComponent<CurveListEntry, any, {}, never> = styled( CurveListEntry )`width: calc( 100% - 4px );height: ${ Metrics.curveListEntryHeight }px;margin: 2px;cursor: pointer;`
Const StyledDopeSheet
Styled
DopeSheet: StyledComponent<DopeSheet, any, {}, never> = styled( DopeSheet )`width: calc( 100% - ${ Metrics.channelListWidth }px );flex-grow: 1;`
Const StyledDopeSheetEntry
Styled
DopeSheetEntry: StyledComponent<DopeSheetEntry, any, {}, never> = styled( DopeSheetEntry )`margin: 2px 0;`
Const StyledDopeSheetOverlay
Styled
DopeSheetOverlay: StyledComponent<DopeSheetOverlay, any, {}, never> = styled( DopeSheetOverlay )`position: absolute;width: calc( 100% - ${ Metrics.channelListWidth }px );height: 100%;left: ${ Metrics.channelListWidth }px;top: 0;pointer-events: none;`
Const StyledDopeSheetUnderlay
Styled
DopeSheetUnderlay: StyledComponent<DopeSheetUnderlay, any, {}, never> = styled( DopeSheetUnderlay )`position: absolute;width: calc( 100% - ${ Metrics.channelListWidth }px );height: 100%;left: ${ Metrics.channelListWidth }px;top: 0;`
Const StyledFxSpawner
Styled
FxSpawner: StyledComponent<FxSpawner, any, {}, never> = styled( FxSpawner )`position: absolute;width: 100%;height: 100%;`
Const StyledHeader
Styled
Header: StyledComponent<Header, any, {}, never> = styled( Header )`position: absolute;top: 0;width: 100%;height: ${ Metrics.headerHeight }px;`
Const StyledHeaderSeekbar
Styled
HeaderSeekbar: StyledComponent<HeaderSeekbar, any, {}, never> = styled( HeaderSeekbar )`width: 124px;height: ${ Metrics.headerHeight - 4 }px;margin: 2px;`
Const StyledInspector
Styled
Inspector: StyledComponent<Inspector, any, {}, never> = styled( Inspector )`position: absolute;right: 0;bottom: 0;width: ${ Metrics.inspectorWidth }px;height: calc( 100% - ${ Metrics.headerHeight }px );`
Const StyledLargeA
Styled
LargeA: StyledComponent<AboutLargeA, any, {}, never> = styled( AboutLargeA )`position: absolute;right: -0.5rem;bottom: -0.5rem;width: 11rem;height: 11rem;`
Const StyledLines
Styled
Lines: StyledComponent<Lines, any, {}, never> = styled( Lines )`position: absolute;`
Const StyledModeSelector
Styled
ModeSelector: StyledComponent<ModeSelector, any, {}, never> = styled( ModeSelector )`position: absolute;left: 0;top: ${ Metrics.headerHeight }px;width: ${ Metrics.modeSelectorWidth }px;height: calc( 100% - ${ Metrics.headerHeight }px );`
Const StyledRangeBar
Styled
RangeBar: StyledComponent<RangeBar, any, {}, never> = styled( RangeBar )`position: absolute;left: 0;bottom: 0;height: 4px;`
Const StyledScrollable
Styled
Scrollable: StyledComponent<Scrollable, any, {}, never> = styled( Scrollable )`width: 100%;height: 100%;`
Const StyledShouldSaveIndicator
Styled
ShouldSaveIndicator: StyledComponent<ShouldSaveIndicator, any, {}, never> = styled( ShouldSaveIndicator )`width: 6px;height: 6px;border-radius: 3px;margin: auto 0 auto 4px;background: ${ Colors.accent };`
Const StyledValue
Styled
Value: StyledComponent<Value, any, {}, never> = styled( Value )`position: absolute;right: 2px;bottom: 2px;font-size: 9px;line-height: 1.0;opacity: 0.7;`
Const SubRoot
SubRoot: StyledComponent<"div", any, {}, never> = styled.div`position: relative;width: calc( 100% - 2rem );padding: 0.75rem 1rem;a {color: ${ Colors.accent };text-decoration: none;&:hover {color: ${ Colors.accentdark };}}`
Const SvgRoot
SvgRoot: StyledComponent<"svg", any, {}, never> = styled.svg`position: absolute;left: 0;top: 0;`
Const Text
Text: StyledComponent<"text", any, {}, never> = styled.text`fill: ${ Colors.fore };font-weight: 400;font-size: ${ 0.8 * HEIGHT }px;`
Const TotalTime
TotalTime: StyledComponent<"span", any, {}, never> = styled.span`font-size: 0.6rem;pointer-events: none;`
Const Underlay
Underlay: StyledComponent<"div", any, {}, never> = styled.div`position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.08;`
Const Version
Version: StyledComponent<"span", any, {}, never> = styled.span`margin-left: 0.75rem;`
Const VerticalSide
VerticalSide: StyledComponent<"rect", any, {}, never> = styled.rect`opacity: 0.0;cursor: ns-resize;pointer-events: auto;`
Const closingKeyframes
closingKeyframes: Keyframes = keyframes`0% {}100% {opacity: 0.0;transform: scale( 0.9 );}`
Const funnyTexts
funnyTexts: string[] = ['oh no','ded','why','I\'m so sorry tbh','Said you should save frequently','Software development is hard','Did you know this? This fancy error screen is the part I have to pay an extreme care to prevent the entire GUI from crashing',]
Let globalId
globalId: number = 0
Const keyframe
keyframe: Keyframes = keyframes`0% {background-position: 0 0;}100% {background-position: 0 40px;}`
Const openingKeyframes
openingKeyframes: Keyframes = keyframes`0% {opacity: 0.0;transform: scale( 0.9 );}100% {}`
Const v2DefaultData
v2
DefaultData: V2SerializedData = Object.freeze( {v: process.env.VERSION!,length: 1.0,resolution: 1000.0,params: {},guiSettings: {snapActive: false,snapTime: 0.1,snapValue: 0.1}} )
Handles of a new node will be created in this length.