Options
All
  • Public
  • Public/Protected
  • All
Menu

@0b5vr/automaton-with-gui

Index

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Object literals

Type aliases

Action

Action: About.Action | Automaton.Action | ContextMenu.Action | CurveEditor.Action | FxSpawner.Action | Header.Action | History.Action | Settings.Action | TextPrompt.Action | Timeline.Action | Toasty.Action | Workspace.Action | { type: "Reset" }

EventListener

EventListener<T>: (event: T) => void

Type parameters

  • T

Type declaration

    • (event: T): void
    • Parameters

      • event: T

      Returns void

HistoryCommand

HistoryCommand: { channel: string; data?: SerializedChannel; index?: undefined | number; type: "automaton/createChannel" } | { channel: string; data: SerializedChannel; index: number; type: "automaton/removeChannel" } | { data: SerializedChannel; index: number; name: string; newName: string; type: "automaton/renameChannel" } | { data: SerializedCurve & WithID; type: "automaton/createCurve" } | { data: SerializedCurve & WithID; type: "automaton/removeCurve" } | { deltaIndex: number; name: string; type: "automaton/reorderChannels" } | { name: string; time: number; type: "automaton/createLabel" } | { name: string; time: number; timePrev: number; type: "automaton/moveLabel" } | { name: string; timePrev: number; type: "automaton/deleteLabel" } | { channel: string; data: StateChannelItem; type: "channel/createItemFromData" } | { channel: string; data: StateChannelItem; type: "channel/removeItem" } | { channel: string; item: string; time: number; timePrev: number; type: "channel/moveItem" } | { channel: string; item: string; type: "channel/changeItemValue"; value: number; valuePrev: number } | { channel: string; item: string; reset: boolean; resetPrev: boolean; type: "channel/changeItemReset" } | { channel: string; item: string; length: number; lengthPrev: number; stretch: boolean; type: "channel/resizeItem" } | { channel: string; item: string; length: number; lengthPrev: number; stretch: boolean; type: "channel/resizeItemByLeft" } | { channel: string; item: string; offset: number; offsetPrev: number; speed: number; speedPrev: number; type: "channel/changeCurveSpeedAndOffset" } | { amp: number; ampPrev: number; channel: string; item: string; type: "channel/changeCurveAmp" } | { curveId: string; data: BezierNode & WithID; type: "curve/createNodeFromData" } | { curveId: string; data: BezierNode & WithID; type: "curve/removeNode" } | { curveId: string; node: string; time: number; timePrev: number; type: "curve/moveNodeTime" } | { curveId: string; node: string; type: "curve/moveNodeValue"; value: number; valuePrev: number } | { curveId: string; dir: "in" | "out"; node: string; time: number; timePrev: number; type: "curve/moveHandleTime" } | { curveId: string; dir: "in" | "out"; node: string; type: "curve/moveHandleValue"; value: number; valuePrev: number } | { curveId: string; data: FxSection & WithBypass & WithID; type: "curve/createFxFromData" } | { curveId: string; data: FxSection & WithBypass & WithID; type: "curve/removeFx" } | { curveId: string; fx: string; time: number; timePrev: number; type: "curve/moveFx" } | { curveId: string; fx: string; row: number; rowPrev: number; type: "curve/changeFxRow" } | { curveId: string; fx: string; row: number; rowPrev: number; time: number; timePrev: number; type: "curve/forceMoveFx" } | { curveId: string; fx: string; length: number; lengthPrev: number; type: "curve/resizeFx" } | { curveId: string; fx: string; length: number; lengthPrev: number; type: "curve/resizeFxByLeft" } | { bypass: boolean; curveId: string; fx: string; type: "curve/bypassFx" } | { curveId: string; fx: string; key: string; type: "curve/changeFxParam"; value: any; valuePrev: any }

Keyable

Keyable: number | string | symbol

SettingsMode

SettingsMode: "none" | "snapping" | "beat" | "general" | "stats"

ValueType

ValueType: "int" | "float"

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

Handles of a new node will be created in this length.

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

ChannelListAndDopeSheetScrollable: 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

FxList: 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

StyledAbout: StyledComponent<About, any, {}, never> = styled( About )`position: absolute;width: 100%;height: 100%;`

Const StyledBar

StyledBar: StyledComponent<Bar, any, {}, never> = styled( Bar )`position: absolute;width: 0.25rem;background: ${ Colors.accent };border-radius: 0.125rem;`

Const StyledBarFG

StyledBarFG: 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

StyledChannelEditor: 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

StyledChannelList: StyledComponent<ChannelList, any, {}, never> = styled( ChannelList )`width: ${ Metrics.channelListWidth - 4 }px;margin: 0 2px;`

Const StyledChannelListAndDopeSheet

StyledChannelListAndDopeSheet: 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

StyledChannelListEntry: StyledComponent<ChannelListEntry, any, {}, never> = styled( ChannelListEntry )`width: 100%;margin: 2px 0;cursor: pointer;`

Const StyledCurrentTime

StyledCurrentTime: StyledComponent<CurrentTime, any, {}, never> = styled( CurrentTime )`font-size: 0.8rem;pointer-events: none;`

Const StyledCurveEditor

StyledCurveEditor: 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

StyledCurveList: 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

StyledCurveListEntry: StyledComponent<CurveListEntry, any, {}, never> = styled( CurveListEntry )`width: calc( 100% - 4px );height: ${ Metrics.curveListEntryHeight }px;margin: 2px;cursor: pointer;`

Const StyledDopeSheet

StyledDopeSheet: StyledComponent<DopeSheet, any, {}, never> = styled( DopeSheet )`width: calc( 100% - ${ Metrics.channelListWidth }px );flex-grow: 1;`

Const StyledDopeSheetEntry

StyledDopeSheetEntry: StyledComponent<DopeSheetEntry, any, {}, never> = styled( DopeSheetEntry )`margin: 2px 0;`

Const StyledDopeSheetOverlay

StyledDopeSheetOverlay: 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

StyledDopeSheetUnderlay: StyledComponent<DopeSheetUnderlay, any, {}, never> = styled( DopeSheetUnderlay )`position: absolute;width: calc( 100% - ${ Metrics.channelListWidth }px );height: 100%;left: ${ Metrics.channelListWidth }px;top: 0;`

Const StyledFxSpawner

StyledFxSpawner: StyledComponent<FxSpawner, any, {}, never> = styled( FxSpawner )`position: absolute;width: 100%;height: 100%;`

Const StyledHeader

StyledHeader: StyledComponent<Header, any, {}, never> = styled( Header )`position: absolute;top: 0;width: 100%;height: ${ Metrics.headerHeight }px;`

Const StyledHeaderSeekbar

StyledHeaderSeekbar: StyledComponent<HeaderSeekbar, any, {}, never> = styled( HeaderSeekbar )`width: 124px;height: ${ Metrics.headerHeight - 4 }px;margin: 2px;`

Const StyledInspector

StyledInspector: StyledComponent<Inspector, any, {}, never> = styled( Inspector )`position: absolute;right: 0;bottom: 0;width: ${ Metrics.inspectorWidth }px;height: calc( 100% - ${ Metrics.headerHeight }px );`

Const StyledLargeA

StyledLargeA: StyledComponent<AboutLargeA, any, {}, never> = styled( AboutLargeA )`position: absolute;right: -0.5rem;bottom: -0.5rem;width: 11rem;height: 11rem;`

Const StyledLines

StyledLines: StyledComponent<Lines, any, {}, never> = styled( Lines )`position: absolute;`

Const StyledModeSelector

StyledModeSelector: 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

StyledRangeBar: StyledComponent<RangeBar, any, {}, never> = styled( RangeBar )`position: absolute;left: 0;bottom: 0;height: 4px;`

Const StyledScrollable

StyledScrollable: StyledComponent<Scrollable, any, {}, never> = styled( Scrollable )`width: 100%;height: 100%;`

Const StyledShouldSaveIndicator

StyledShouldSaveIndicator: StyledComponent<ShouldSaveIndicator, any, {}, never> = styled( ShouldSaveIndicator )`width: 6px;height: 6px;border-radius: 3px;margin: auto 0 auto 4px;background: ${ Colors.accent };`

Const StyledValue

StyledValue: 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

v2DefaultData: V2SerializedData = Object.freeze( {v: process.env.VERSION!,length: 1.0,resolution: 1000.0,params: {},guiSettings: {snapActive: false,snapTime: 0.1,snapValue: 0.1}} )

Functions

Const About

  • About(__namedParameters: { className: undefined | string }): Element

Const AboutLargeA

  • AboutLargeA(__namedParameters: { className: undefined | string }): Element

Const Anchor

  • Anchor(__namedParameters: { children: ReactNode; className: undefined | string; href: string }): Element

Const App

Const AutomatonStateListener

Const Bar

  • Bar(__namedParameters: { className: undefined | string; style: undefined | CSSProperties; top: number }): Element

Const BarFG

  • BarFG(__namedParameters: { className: undefined | string }): Element

Const Beat

  • Beat(props: { isAbsolute?: undefined | false | true; time: number }): Element | null

Const BoolParam

Const ChannelEditor

  • ChannelEditor(__namedParameters: { className: undefined | string }): Element

Const ChannelList

  • ChannelList(__namedParameters: { className: undefined | string; refScrollTop: RefObject<number> }): Element

Const ChannelListAndDopeSheet

  • ChannelListAndDopeSheet(props: { className?: undefined | string }): Element

Const ChannelListEntry

Const Content

Const ContextMenu

  • ContextMenu(__namedParameters: { className: undefined | string }): Element

Const ContextMenuEntry

Const CurrentTime

  • CurrentTime(__namedParameters: { className: undefined | string }): Element

Const CurveEditor

  • CurveEditor(__namedParameters: { className: undefined | string }): Element

Const CurveEditorFx

Const CurveEditorFxBg

Const CurveEditorGraph

Const CurveEditorNode

Const CurveList

  • CurveList(__namedParameters: { className: undefined | string }): Element

Const CurveListEntry

Const DopeSheet

  • DopeSheet(__namedParameters: { className: undefined | string; intersectionRoot: null | HTMLElement; refScrollTop: RefObject<number> }): Element
  • Parameters

    • __namedParameters: { className: undefined | string; intersectionRoot: null | HTMLElement; refScrollTop: RefObject<number> }
      • className: undefined | string
      • intersectionRoot: null | HTMLElement
      • refScrollTop: RefObject<number>

    Returns Element

Const DopeSheetEntry

  • DopeSheetEntry(props: { channel: string; className?: undefined | string; intersectionRoot: HTMLElement | null; range: TimeRange; rectSelectState: DopeSheetRectSelectState }): Element

Const DopeSheetOverlay

Const DopeSheetUnderlay

Const ErrorBoundary

  • ErrorBoundary(__namedParameters: { children: ReactNode }): Element

Const ErrorBoundaryFallback

  • ErrorBoundaryFallback(__namedParameters: { error: Error; resetErrorBoundary: () => void }): Element

Const Fuck

Const FxSpawner

  • FxSpawner(__namedParameters: { className: undefined | string }): Element | null

Const FxSpawnerEntry

Const Fxs

Const GUIRemoconListener

  • GUIRemoconListener(__namedParameters: { guiRemocon: GUIRemocon }): Element

Const Header

  • Header(__namedParameters: { className: undefined | string }): Element

Const HeaderSeekbar

  • HeaderSeekbar(__namedParameters: { className: undefined | string }): Element

Const Inspector

  • Inspector(__namedParameters: { className: undefined | string }): Element

Const InspectorBeat

  • InspectorBeat(): Element | null

Const InspectorChannelItem

  • InspectorChannelItem(props: Props): Element | null

Const InspectorChannelItemCurveParams

  • InspectorChannelItemCurveParams(props: { channel: ChannelWithGUI; channelName: string; itemId: string; stateItem: StateChannelItem }): Element | null

Const InspectorCurveFx

Const InspectorCurveNode

  • InspectorCurveNode(props: Props): Element | null

Const InspectorGeneral

  • InspectorGeneral(): Element | null

Const InspectorHeader

  • InspectorHeader(__namedParameters: { className: undefined | string; text: string }): Element

Const InspectorItem

  • InspectorItem(__namedParameters: { children: ReactNode; className: undefined | string; description: undefined | string; name: undefined | string }): Element
  • Parameters

    • __namedParameters: { children: ReactNode; className: undefined | string; description: undefined | string; name: undefined | string }
      • children: ReactNode
      • className: undefined | string
      • description: undefined | string
      • name: undefined | string

    Returns Element

Const InspectorLabel

  • InspectorLabel(__namedParameters: { name: string }): Element | null

Const InspectorSnapping

  • InspectorSnapping(): Element | null

Const InspectorStats

  • InspectorStats(): Element | null

Const Items

  • Items(__namedParameters: { channel: string; range: TimeValueRange; rectSelect: { isSelecting: boolean; t0: number; t1: number; v0: number; v1: number }; size: Resolution }): Element

Const Label

  • Label(__namedParameters: { name: string; range: TimeRange; size: Resolution; time: number }): Element

Const Labels

Const Line

Const Lines

Const ModeSelector

  • ModeSelector(props: { className?: undefined | string }): Element

Const Nodes

Const NumberParam

Const RangeBar

  • RangeBar(props: Props): Element

Const RectSelectView

  • RectSelectView(__namedParameters: { className: undefined | string; x0: number; x1: number; y0: number; y1: number }): Element

Const Scrollable

Const ShouldSaveIndicator

  • ShouldSaveIndicator(__namedParameters: { className: undefined | string }): Element

Const Stalker

  • Stalker(__namedParameters: { className: undefined | string }): Element | null

Const StatusIcon

  • StatusIcon(__namedParameters: { className: undefined | string; status: null | Status<any> }): Element | null

Const TextPrompt

  • TextPrompt(__namedParameters: { className: undefined | string }): Element

Const TimeLoopRegion

Const TimeValueGrid

Const TimeValueLines

Const TimelineItem

Const TimelineItemConstant

Const TimelineItemCurve

Const Toasty

  • Toasty(__namedParameters: { className: undefined | string }): Element | null

Const ToastyEntry

  • ToastyEntry(__namedParameters: { closing: boolean; id: string; kind: "error" | "warning" | "info"; message: string }): Element | null

Const Value

  • Value(__namedParameters: { className: undefined | string; name: string }): Element

applyMixins

  • applyMixins(derivedCtor: any, baseCtors: any[]): void

arraySetAdd

  • arraySetAdd<T>(array: Array<T>, value: T): boolean

arraySetDelete

  • arraySetDelete<T>(array: Array<T>, value: T): boolean

arraySetDiff

  • arraySetDiff<T>(from: Array<T>, diff: Array<T>): Array<T>

arraySetHas

  • arraySetHas<T>(array: Array<T>, value: T): boolean

arraySetUnion

  • arraySetUnion<T>(a: Array<T>, b: Array<T>): Array<T>

binarySearch

  • binarySearch<T>(array: ArrayLike<T>, element: T): number
  • binarySearch<T>(array: ArrayLike<T>, compare: (element: T) => boolean): number

calcExpDiff

  • calcExpDiff(dy: number, currentValue: number, minDiff: number, fine: boolean): number

calcPoints

clamp

  • clamp(t: number, min: number, max: number): number

closeTo

  • closeTo(a: number, b: number): boolean

closeToZero

  • closeToZero(a: number): boolean

closeToasty

  • closeToasty(__namedParameters: { dispatch: Dispatch<Action>; id: string }): void

combineArraysUnique

  • combineArraysUnique<T>(...arrays: Array<Array<T>>): Array<T>

compat

createStore

  • createStore(): Store<State, Action>

dt2dx

  • dt2dx(t: number, range: TimeRange, width: number): number

duplicateName

  • duplicateName(name: string, existingSet: Set<string>): string

dv2dy

  • dv2dy(v: number, range: ValueRange, height: number): number

dx2dt

  • dx2dt(x: number, range: TimeRange, width: number): number

dy2dv

  • dy2dv(y: number, range: ValueRange, height: number): number

genCurvePath

genGrid

  • genGrid(t0: number, t1: number, options?: { base?: undefined | number; details?: undefined | number }): GridEntry[]

genID

  • genID(): string

getRect

hasOverwrap

  • hasOverwrap(t1: number, l1: number, t2: number, l2: number): boolean

inputToValue

  • inputToValue(value: string): boolean | null

intOrEmpty

  • intOrEmpty(value: number): string

jsonCopy

  • jsonCopy<T>(fuck: T): T

lofi

  • lofi(t: number, d: number): number

minimizeChannel

  • minimizeChannel(data: SerializedChannel, options: MinimizeOptions): SerializedChannel

minimizeChannelItem

  • minimizeChannelItem(data: SerializedChannelItem, options: MinimizeOptions): SerializedChannelItem

minimizeCurve

  • minimizeCurve(data: SerializedCurve, options: MinimizeOptions): SerializedCurve

minimizeData

minimizeFx

  • minimizeFx(data: SerializedFxSection, options: MinimizeOptions): SerializedFxSection | null

minimizeNode

  • minimizeNode(data: SerializedBezierNode, options: MinimizeOptions): SerializedBezierNode

mod

  • mod(x: number, d: number): number

mouseCombo

  • mouseCombo<T>(event: MouseEvent, callbacks: {}): T | false | null
  • Do a job based on mouse button + key combination. It will event.preventDefault + event.stopPropagation automatically.

    Type parameters

    • T

    Parameters

    • event: MouseEvent

      The mouse event

    • callbacks: {}

      A map of mouse button + key combination bits vs. callbacks. set or return false to bypass

      • [combo: number]: ((event: MouseEvent) => T | false) | false

    Returns T | false | null

    The return value of the callback it executed. If it couldn't execute any callbacks, returns null instead.

objectMapHas

  • objectMapHas<K, T>(object: Record<K, T>, key: K): boolean

objectMapSize

  • objectMapSize<K, T>(object: Record<K, T>): number

objectMapValues

  • objectMapValues<K, T>(object: Record<K, T>): T[]

parseHistoryCommand

performRedo

performUndo

prec

  • prec(value: number, precision: number): number

precOrUndefined

  • precOrUndefined(value: number | undefined, precision: number): number | undefined

Const reducer

  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State
  • reducer(state?: undefined | State, action: Action): State

registerMouseEvent

  • registerMouseEvent(move: (event: MouseEvent, movementSum: { x: number; y: number }) => void, up?: undefined | ((event: MouseEvent) => void)): void
  • Parameters

    • move: (event: MouseEvent, movementSum: { x: number; y: number }) => void
        • (event: MouseEvent, movementSum: { x: number; y: number }): void
        • Parameters

          • event: MouseEvent
          • movementSum: { x: number; y: number }
            • x: number
            • y: number

          Returns void

    • Optional up: undefined | ((event: MouseEvent) => void)

    Returns void

registerMouseNoDragEvent

  • registerMouseNoDragEvent(handler: (event: MouseEvent) => void): void

reorderArray

  • reorderArray<T>(array: T, index: number, length?: number, hook?: undefined | ((event: { index: number; length: number; newIndex: number }) => number)): (index: number) => T
  • Type parameters

    • T: Array<any>

    Parameters

    • array: T
    • index: number
    • Default value length: number = 1
    • Optional hook: undefined | ((event: { index: number; length: number; newIndex: number }) => number)

    Returns (index: number) => T

      • (index: number): T
      • Parameters

        • index: number

        Returns T

showToasty

  • showToasty(__namedParameters: { dispatch: Dispatch<Action>; kind: "error" | "warning" | "info"; message: string; timeout: undefined | number }): void

snapTime

snapValue

t2x

  • t2x(t: number, range: TimeRange, width: number): number

testRectIntersection

  • testRectIntersection(ax0: number, ay0: number, ax1: number, ay1: number, bx0: number, by0: number, bx1: number, by1: number): boolean

useAnimationFrame

  • useAnimationFrame(callback: (delta: number) => void, deps: DependencyList): void

useDispatch

  • useDispatch(): Dispatch<Action>

useDoubleClick

  • useDoubleClick(interval?: number): () => boolean

useElement

  • useElement<T>(ref: RefObject<T>): T | null

useID

  • useID(deps?: DependencyList): number

useIntersection

  • useIntersection<T>(ref: RefObject<T>, options?: IntersectionObserverInit): boolean

useMoveEntites

useRect

useSave

  • useSave(): (options?: Options) => void

useSelectAllEntities

  • useSelectAllEntities(): (options: Options) => void

useSelectAllItemsInChannel

  • useSelectAllItemsInChannel(): (channelName: string) => void

useSelector

  • useSelector<T>(selector: (state: State) => T): T

useStore

  • useStore(): Store<State, Action>

useTimeUnit

  • useTimeUnit(): { beatToTime: (beat: number, isAbsolute?: undefined | false | true) => number; displayToTime: (value: number, isAbsolute?: undefined | false | true) => number; timeToBeat: (time: number, isAbsolute?: undefined | false | true) => number; timeToDisplay: (time: number, isAbsolute?: undefined | false | true) => number }
  • Returns { beatToTime: (beat: number, isAbsolute?: undefined | false | true) => number; displayToTime: (value: number, isAbsolute?: undefined | false | true) => number; timeToBeat: (time: number, isAbsolute?: undefined | false | true) => number; timeToDisplay: (time: number, isAbsolute?: undefined | false | true) => number }

    • beatToTime: (beat: number, isAbsolute?: undefined | false | true) => number
        • (beat: number, isAbsolute?: undefined | false | true): number
        • Parameters

          • beat: number
          • Optional isAbsolute: undefined | false | true

          Returns number

    • displayToTime: (value: number, isAbsolute?: undefined | false | true) => number
        • (value: number, isAbsolute?: undefined | false | true): number
        • Parameters

          • value: number
          • Optional isAbsolute: undefined | false | true

          Returns number

    • timeToBeat: (time: number, isAbsolute?: undefined | false | true) => number
        • (time: number, isAbsolute?: undefined | false | true): number
        • Parameters

          • time: number
          • Optional isAbsolute: undefined | false | true

          Returns number

    • timeToDisplay: (time: number, isAbsolute?: undefined | false | true) => number
        • (time: number, isAbsolute?: undefined | false | true): number
        • Parameters

          • time: number
          • Optional isAbsolute: undefined | false | true

          Returns number

useTimeValueRangeFuncs

  • useTimeValueRangeFuncs(range: TimeValueRange, size: Resolution): { dt2dx: (t: number) => number; dv2dy: (v: number) => number; dx2dt: (x: number) => number; dy2dv: (y: number) => number; snapTime: (t: number) => number; snapValue: (v: number) => number; t2x: (t: number) => number; v2y: (v: number) => number; x2t: (x: number) => number; y2v: (y: number) => number }
  • Parameters

    Returns { dt2dx: (t: number) => number; dv2dy: (v: number) => number; dx2dt: (x: number) => number; dy2dv: (y: number) => number; snapTime: (t: number) => number; snapValue: (v: number) => number; t2x: (t: number) => number; v2y: (v: number) => number; x2t: (x: number) => number; y2v: (y: number) => number }

    • dt2dx: (t: number) => number
        • (t: number): number
        • Parameters

          • t: number

          Returns number

    • dv2dy: (v: number) => number
        • (v: number): number
        • Parameters

          • v: number

          Returns number

    • dx2dt: (x: number) => number
        • (x: number): number
        • Parameters

          • x: number

          Returns number

    • dy2dv: (y: number) => number
        • (y: number): number
        • Parameters

          • y: number

          Returns number

    • snapTime: (t: number) => number
        • (t: number): number
        • Parameters

          • t: number

          Returns number

    • snapValue: (v: number) => number
        • (v: number): number
        • Parameters

          • v: number

          Returns number

    • t2x: (t: number) => number
        • (t: number): number
        • Parameters

          • t: number

          Returns number

    • v2y: (v: number) => number
        • (v: number): number
        • Parameters

          • v: number

          Returns number

    • x2t: (x: number) => number
        • (x: number): number
        • Parameters

          • x: number

          Returns number

    • y2v: (y: number) => number
        • (y: number): number
        • Parameters

          • y: number

          Returns number

useWheelEvent

  • useWheelEvent<T>(ref: RefObject<T>, callback: (event: WheelEvent) => void): void

v1Compat

  • v1Compat(data: any): any

v2Compat

v2y

  • v2y(v: number, range: ValueRange, height: number): number

v3Compat

valueToInput

  • valueToInput(value: number, type: ValueType): string

writeClipboard

  • writeClipboard(text: string): void

x2t

  • x2t(x: number, range: TimeRange, width: number): number

y2v

  • y2v(y: number, range: ValueRange, height: number): number

Object literals

Const Colors

Colors: object

accent

accent: string = "#00aaff"

accentbright

accentbright: string = "#53c5ff"

accentdark

accentdark: string = "#0080c0"

back1

back1: string = "#191a1f"

back2

back2: string = "#24272d"

back3

back3: string = "#30343b"

back4

back4: string = "#3b4249"

back5

back5: string = "#474f57"

black

black: string = "#000000"

error

error: string = "#ff0066"

errorBright

errorBright: string = "#ec5fa3"

errorDark

errorDark: string = "#a30a4a"

fore

fore: string = "#d0edff"

foredark

foredark: string = "#97abb9"

foresub

foresub: string = "#b9d3e3"

fx

fx: string = "#0fd895"

gray

gray: string = "#697681"

info

info: string = "#53c5ff"

warning

warning: string = "#fc9821"

white

white: string = "#ffffff"

Const Icons

Icons: object

Automaton

Automaton: "svg"

AutomatonA

AutomatonA: "svg"

Beat

Beat: "svg"

Channel

Channel: "svg"

Close

Close: "svg"

Cog

Cog: "svg"

Curve

Curve: "svg"

DopeSheet

DopeSheet: "svg"

Error

Error: "svg"

Info

Info: "svg"

Pause

Pause: "svg"

Play

Play: "svg"

Plus

Plus: "svg"

Power

Power: "svg"

Redo

Redo: "svg"

Retry

Retry: "svg"

Save

Save: "svg"

Scale

Scale: "svg"

Snap

Snap: "svg"

Undo

Undo: "svg"

Warning

Warning: "svg"

Const Metrics

Metrics: object

channelListEntyHeight

channelListEntyHeight: number = 20

channelListWidth

channelListWidth: number = 160

curveListEntryHeight

curveListEntryHeight: number = 36

curveListWidth

curveListWidth: number = 160

headerHeight

headerHeight: number = 32

inspectorWidth

inspectorWidth: number = 192

modeSelectorWidth

modeSelectorWidth: number = 36

rootFontSize

rootFontSize: number = 16

toastyWidth

toastyWidth: number = 320

Const defaultDataWithGUI

defaultDataWithGUI: object

channels

channels: never[] = []

curves

curves: never[] = []

resolution

resolution: number = 100

version

version: string = process.env.VERSION!

Const defaultGUISettings

defaultGUISettings: object

beatOffset

beatOffset: number = 0

bpm

bpm: number = 140

minimizedPrecisionTime

minimizedPrecisionTime: number = 3

minimizedPrecisionValue

minimizedPrecisionValue: number = 3

snapBeatActive

snapBeatActive: false = false

snapTimeActive

snapTimeActive: false = false

snapTimeInterval

snapTimeInterval: number = 0.1

snapValueActive

snapValueActive: false = false

snapValueInterval

snapValueInterval: number = 0.1

useBeatInGUI

useBeatInGUI: false = false

Const initialState

initialState: object

callback

callback: null = null

cantUndoThis

cantUndoThis: number = 0

channelNames

channelNames: never[] = []

channels

channels: {}

Type declaration

commands

commands: never[] = []

curves

curves: {}

Type declaration

curvesPreview

curvesPreview: {}

Type declaration

entries

entries: {} = []

Type declaration

fxDefinitions

fxDefinitions: {}

Type declaration

guiSettings

guiSettings: Readonly<GUISettings> = jsonCopy( defaultGUISettings )

index

index: number = 0

isPlaying

isPlaying: false = false

isSeekbarHovered

isSeekbarHovered: false = false

isSeeking

isSeeking: false = false

isVisible

isVisible: false = false

labels

labels: {}

Type declaration

lastSelectedItem

lastSelectedItem: null = null

length

length: number = 1

loopRegion

loopRegion: null = null

mode

mode: "dope" = "dope"

placeholder

placeholder: string = ""

recently

recently: never[] = []

resolution

resolution: number = 10

selectedChannel

selectedChannel: null = null

selectedCurve

selectedCurve: null = null

shouldSave

shouldSave: false = false

text

text: string = ""

time

time: number = 0

position

position: object

x

x: number = 0

y

y: number = 0

range

range: object

t0

t0: number = 0

t1

t1: number = 5

v0

v0: number = -0.2

v1

v1: number = 1.2

selected

selected: object

fxs

fxs: never[] = []

items

items: {}

Type declaration

labels

labels: never[] = []

nodes

nodes: never[] = []

Const nullResult

nullResult: object

bottom

bottom: number = 0

height

height: number = 0

left

left: number = 0

right

right: number = 0

top

top: number = 0

width

width: number = 0

Generated using TypeDoc