figureone 0.15.10 → 1.0.0

package/types/js/figure/FigurePrimitives/FigurePrimitives.d.ts

@@ -0,0 +1,173 @@
+import { Point } from '../../tools/g2';
+import type { TypeParsablePoint } from '../../tools/g2';
+import { FigureElementPrimitive } from '../Element';
+import WebGLInstance from '../webgl/webgl';
+import DrawContext2D from '../DrawContext2D';
+import FigureElementPrimitiveMorph from './FigureElementPrimitiveMorph';
+import FigureElementPrimitiveGLText from './FigureElementPrimitiveGLText';
+import type { TypeColor, OBJ_Font } from '../../tools/types';
+import type TimeKeeper from '../TimeKeeper';
+import type { Recorder } from '../Recorder/Recorder';
+import Scene from '../../tools/geometry/scene';
+import FigureElementPrimitiveGesture from './FigureElementPrimitiveGesture';
+import type { OBJ_Gesture } from './FigureElementPrimitiveGesture';
+import type { OBJ_LineStyleSimple, OBJ_GenericGL, OBJ_Morph, OBJ_Text } from './FigurePrimitiveTypes';
+import type { OBJ_Generic, OBJ_Polyline, OBJ_Polygon, OBJ_Polygon_Defined, OBJ_Star, OBJ_Rectangle, OBJ_Ellipse, OBJ_Arc, OBJ_Triangle, OBJ_Line, OBJ_Grid, OBJ_Arrow } from './FigurePrimitiveTypes2D';
+import type { OBJ_Generic3, OBJ_Sphere, OBJ_Cube, OBJ_Cylinder, OBJ_Cone, OBJ_Revolve, OBJ_Surface, OBJ_Line3, OBJ_CameraControl, OBJ_Prism } from './FigurePrimitiveTypes3D';
+type OBJ_PolyLineTris = OBJ_LineStyleSimple & {
+    drawBorderBuffer: number | Array<Array<Point>>;
+};
+/**
+ * Built in figure primitives.
+ *
+ * Including simple shapes, grid and text.
+ * @group Misc Figure Element
+ */
+export default class FigurePrimitives {
+    webgl: Array<WebGLInstance>;
+    draw2D: Array<DrawContext2D>;
+    htmlCanvas: HTMLElement;
+    animateNextFrame: Function;
+    draw2DFigures: Record<string, any>;
+    defaultColor: Array<number>;
+    defaultDimColor: Array<number>;
+    defaultFont: OBJ_Font;
+    defaultLineWidth: number;
+    defaultLength: number;
+    timeKeeper: TimeKeeper;
+    recorder: Recorder;
+    scene: Scene;
+    equationScale: number;
+    /**
+      * @hideconstructor
+      */
+    constructor(webgl: Array<WebGLInstance> | WebGLInstance, draw2D: Array<DrawContext2D> | DrawContext2D, htmlCanvas: HTMLElement, scene: Scene, animateNextFrame: Function, defaultColor: Array<number>, defaultDimColor: Array<number>, defaultFont: OBJ_Font, defaultLineWidth: number, defaultLength: number, timeKeeper: TimeKeeper, recorder: Recorder, equationScale: number);
+    /**
+     * {@link FigureElementPrimitive} that draws a generic shape.
+     * @see {@link OBJ_Generic} for options and examples.
+     */
+    gl(...optionsIn: Array<OBJ_GenericGL>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws a generic shape.
+     * @see {@link OBJ_Generic} for options and examples.
+     */
+    generic3(...optionsIn: Array<OBJ_Generic3>): any;
+    generic3DBase(defaultOptions: Record<string, any>, optionsIn: Record<string, any>, getPointsFn: (o: Record<string, any>) => ([Array<Point>, Array<Point>] | [Array<Point>])): any;
+    sphere(...optionsIn: Array<OBJ_Sphere>): any;
+    cube(...optionsIn: Array<OBJ_Cube>): any;
+    prism(...optionsIn: Array<OBJ_Prism>): any;
+    cylinder(...optionsIn: Array<OBJ_Cylinder>): any;
+    cone(...optionsIn: Array<OBJ_Cone>): any;
+    line3(...optionsIn: Array<OBJ_Line3>): any;
+    revolve(...optionsIn: Array<OBJ_Revolve>): any;
+    surface(...optionsIn: Array<OBJ_Surface>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws a generic shape.
+     * @see {@link FigureElementPrimitiveMorph} and {@link OBJ_Morph} for
+     * examples and options.
+     */
+    morph(...optionsIn: Array<OBJ_Morph>): FigureElementPrimitiveMorph;
+    /**
+     * {@link FigureElementPrimitive} that draws a generic shape.
+     * @see {@link OBJ_Generic} for options and examples.
+     */
+    generic(...optionsIn: Array<OBJ_Generic>): any;
+    getPolylineTris(optionsIn: OBJ_PolyLineTris): any[];
+    /**
+     * {@link FigureElementPrimitive} that draws a polyline.
+     * @see {@link OBJ_Polyline} for options and examples.
+     */
+    polyline(...optionsIn: Array<OBJ_Polyline>): any;
+    getPolygonBorder(optionsIn: OBJ_Polygon_Defined): (string | Point[] | Point[][] | OBJ_Polygon_Defined)[];
+    genericBase(name: string, defaultOptions: Record<string, any>, optionsIn: Record<string, any>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws a regular polygon.
+     * @see {@link OBJ_Polygon} for options and examples.
+     */
+    polygon(...options: Array<OBJ_Polygon>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws a star.
+     * @see {@link OBJ_Star} for options and examples.
+     */
+    star(...options: Array<OBJ_Star>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws a rectangle.
+     * @see {@link OBJ_Rectangle} for options and examples.
+     */
+    rectangle(...options: Array<OBJ_Rectangle>): any;
+    text(...options: Array<OBJ_Text>): FigureElementPrimitive | FigureElementPrimitiveGLText;
+    glText(...options: Array<OBJ_Text>): FigureElementPrimitiveGLText;
+    elementSetup(element: FigureElementPrimitive, options: Record<string, any>): FigureElementPrimitive;
+    text2d(...options: Array<OBJ_Text>): FigureElementPrimitive;
+    gesture(...options: Array<OBJ_Gesture>): FigureElementPrimitiveGesture;
+    /**
+     * {@link FigureElementPrimitive} that can control camera position.
+     * @see {@link OBJ_CameraControl} for options and examples.
+     */
+    cameraControl(...options: Array<OBJ_CameraControl>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws an ellipse.
+     * @see {@link OBJ_Ellipse} for options and examples.
+     */
+    ellipse(...options: Array<OBJ_Ellipse>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws an ellipse.
+     * @see {@link OBJ_Arc} for options and examples.
+     */
+    arc(...options: Array<OBJ_Arc>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws a triangle.
+     * @see {@link OBJ_Triangle} for options and examples.
+     */
+    triangle(...options: Array<OBJ_Triangle>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws a line.
+     * @see {@link OBJ_Arrow} for options and examples.
+     */
+    arrow(...options: Array<OBJ_Arrow>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws a grid.
+     * @see {@link OBJ_Grid} for options and examples.
+     */
+    grid(...optionsIn: Array<OBJ_Grid>): any;
+    /**
+     * {@link FigureElementPrimitive} that draws a line.
+     * @see {@link OBJ_Line} for options and examples.
+     */
+    line(...options: Array<OBJ_Line>): any;
+    textGL(options: Record<string, any>): FigureElementPrimitive;
+    parseTextOptions(...optionsIn: Record<string, any>[]): any;
+    html(optionsIn: {
+        element: HTMLElement;
+        classes?: string;
+        position?: TypeParsablePoint;
+        xAlign?: 'left' | 'right' | 'center';
+        yAlign?: 'top' | 'bottom' | 'middle';
+        wrap?: boolean;
+        id?: string;
+    }): FigureElementPrimitive;
+    htmlElement(elementToAdd: HTMLElement | Array<HTMLElement>, id?: string, classes?: string, location?: Point, yAlign?: 'top' | 'bottom' | 'middle', xAlign?: 'left' | 'right' | 'center'): FigureElementPrimitive;
+    htmlImage(...optionsIn: Array<{
+        id?: string;
+        classes?: string;
+        position?: Point;
+        yAlign?: 'top' | 'bottom' | 'middle';
+        xAlign?: 'left' | 'right' | 'center';
+        src?: string;
+        color?: TypeColor;
+        pulse?: number;
+    }>): FigureElementPrimitive;
+    htmlText(...optionsIn: Array<{
+        textInput?: string;
+        id?: string;
+        classes?: string;
+        position?: Point;
+        yAlign?: 'top' | 'bottom' | 'middle';
+        xAlign?: 'left' | 'right' | 'center';
+        modifiers: Record<string, any>;
+        color?: TypeColor;
+        pulse?: number;
+    }>): FigureElementPrimitive;
+}
+export type TypeFigurePrimitives = FigurePrimitives;
+export {};

package/types/js/figure/FigurePrimitives/Generic.d.ts

@@ -0,0 +1,5 @@
+import { FigureElementPrimitive } from '../Element';
+import { Point, Transform, Rect } from '../../tools/g2';
+import WebGLInstance from '../webgl/webgl';
+import type { TypeColor } from '../../tools/types';
+export default function Generic(webgl: WebGLInstance, color: TypeColor, transformOrLocation: Transform | Point, textureLocation?: string, textureVertexSpace?: Rect, textureCoords?: Rect, textureRepeat?: boolean, onLoad?: (() => void) | null, name?: string): FigureElementPrimitive;

package/types/js/figure/FigurePrimitives/Text.d.ts

@@ -0,0 +1,17 @@
+import { FigureElementPrimitive } from '../Element';
+import { Point, Transform } from '../../tools/g2';
+import WebGLInstance from '../webgl/webgl';
+type TypeTextInputOptions = {
+    text: string | null | undefined;
+    size: number | null | undefined;
+    family: string | null | undefined;
+    weight: number | null | undefined;
+    style: 'normal' | 'italic' | null | undefined;
+    xAlign: 'left' | 'center' | 'right' | null | undefined;
+    yAlign: 'top' | 'bottom' | 'middle' | 'baseline' | null | undefined;
+    color: Array<number> | null | undefined;
+    transform: Transform | null | undefined;
+    position: Point | null | undefined;
+};
+declare function Text(webgl: WebGLInstance, optionsIn: TypeTextInputOptions): FigureElementPrimitive;
+export default Text;

package/types/js/figure/FontManager.d.ts

@@ -0,0 +1,113 @@
+import { NotificationManager } from '../tools/tools';
+import { FunctionMap } from '../tools/FunctionMap';
+import { FigureFont } from './DrawingObjects/TextObject/TextObject';
+import { OBJ_Font, TypeFontWeight } from '../tools/types';
+import { FigureElement } from './Element';
+export type OBJ_LoadFontOptions = {
+    maxCount?: number;
+    timeout?: number;
+    callback?: string | (() => void);
+};
+/**
+ * Font manager can be used to query if fonts are available, and watch to see
+ * when they load or time out.
+ *
+ * Notifications - The notification manager property `notifications` will
+ * publish the following events:
+ * - `fontsLoaded`: published when all fonts have been loaded or timed out
+ * - `fontLoaded`: published after each font is loaded
+ * - `fontUnavailable`: published when loading a font has timed out
+ * @group Text
+ */
+export default class FontManager {
+    fonts: Record<string, any>;
+    container: HTMLSpanElement;
+    static instance: FontManager;
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    loaded: number;
+    loading: number;
+    fnMap: FunctionMap;
+    timedOut: number;
+    notifications: NotificationManager;
+    checkTimer: ReturnType<typeof setTimeout> | null;
+    startTime: number;
+    timeout: number;
+    animateNextFrameCallbacks: Array<() => void>;
+    constructor(fnMap?: FunctionMap, notifications?: NotificationManager);
+    addAnimateFrameCallback(animateNextFrame: () => void): void;
+    animateNextFrame(): void;
+    measureTextID(fontID: string, backupFont?: string): number;
+    measureText(family: string, weight: string, style: string, glyphs: string): number;
+    showDebugAtlas(fontID: string, fontFamily: string, fontSizePX?: number): void;
+    measure(fontID: string, backupName: string, backupFamily: string): void;
+    /**
+     * Returns `true` if font is available.
+     * @param {OBJ_Font} fontDefinition
+     * @return {boolean} `true` if available
+     */
+    isAvailable(fontDefinition: OBJ_Font): boolean;
+    /**
+     * Check if a font's weights are all available.
+     *
+     * The weights must all belong to the same font family and style. The glyphs
+     * defined in `fontDefinition` will be used to check the weights.
+     *
+     * This method compares the width of the glyphs for all given weights. If all
+     * widths are different, then this method returns `true`.
+     *
+     * This means only weights that should exist should be input. For example
+     * if a font only supports 'normal' and 'bold', but weights 'lighter' and
+     * 'bold' are input, then this will return true as 'lighter' will likely
+     * fallback to 'normal'.
+     * @param {OBJ_Font} fontDefinition
+     * @param {Array<TypeFontWeight>} weights
+     */
+    areWeightsAvailable(fontDefinition: OBJ_Font, weights: Array<TypeFontWeight>): boolean;
+    /**
+     * Return arrays of weights that produce the same output.
+     */
+    getWeights(fontDefinition: OBJ_Font): string[][];
+    isMinNumWeights(fontID: string, num: number): boolean;
+    /**
+     * Return arrays of styles that produce the same output.
+     *
+     * This will usually return [['normal'], ['italic', 'oblique']] meaning that
+     * italic and oblique styles are the same, but different to normal. Even if
+     * only the normal font is available, often the browser will auto italicize
+     * the normal font to get an italic font.
+     *
+     * In contrast, this will show [['normal', 'italic', 'oblique']] (meaning all
+     * three are the same) if only the italic version of a font is available.
+     * This is because the browser simply uses the italic version as the normal
+     * version if it is requested.
+     */
+    getStyles(fontDefinition: OBJ_Font): string[][];
+    areStylesAvailable(fontDefinition: OBJ_Font, styles: Array<string>): boolean;
+    isAvailableID(fontID: string): boolean;
+    /**
+     * Watch for when a font becomes available, or a timeout is reached.
+     *
+     * Either a font definition, a {@link FigureFont} object or a
+     * {@link FigureElement} can be used to define which font(s) to watch.
+     *
+     * When a {@link FigureElement} is used, then all the unique fonts associated
+     * with that element will be watched, and any callback defined will be
+     * executed when each font is loaded or times out.
+     *
+     * If `weights` is specified, then the font will not be considered loaded
+     * until `weights` number of different weights are available.
+     *
+     * @param {OBJ_Font | FigureFont | FigureElement} fontOrElement
+     * @param {OBJ_LoadFontOptions | (() => void) | string} optionsOrCallback
+     * options or callback function to be used when font is loaded or times out.
+     */
+    watch(fontOrElement: OBJ_Font | FigureFont | FigureElement, optionsOrCallback: OBJ_LoadFontOptions | (() => void) | string): any[];
+    execCallbacks(fontID: string, available: boolean): void;
+    timeoutFonts(): void;
+    timedCheck(): void;
+    isLoadingFinished(): boolean;
+    fontLoaded(fontID: string): void;
+    fontTimedOut(fontID: string): void;
+    _isFontAvailable(fontID: string): boolean;
+}

package/types/js/figure/Gesture.d.ts

@@ -0,0 +1,39 @@
+import { Point } from '../tools/g2';
+import type Figure from './Figure';
+declare class Gesture {
+    previousPoint: Point;
+    figure: Figure;
+    mouseDown: boolean;
+    enable: boolean;
+    start: (p: Point) => boolean;
+    end: (a: boolean, b: boolean) => void;
+    move: (prev: Point, curr: Point) => boolean;
+    free: (p: Point) => void;
+    toggleCursor: () => void;
+    wheel: (deltaX: number, deltaY: number, deltaMode: 0x00 | 0x01 | 0x02) => any;
+    binds: {
+        mouseDownHandler: (e: MouseEvent) => void;
+        mouseUpHandler: (e: MouseEvent) => void;
+        mouseMoveHandler: (e: MouseEvent) => void;
+        touchStartHandler: (e: TouchEvent) => void;
+        touchEndHandler: (e: TouchEvent) => void;
+        touchMoveHandler: (e: TouchEvent) => void;
+        wheelHandler: (e: WheelEvent) => void;
+    };
+    constructor(figure: Figure);
+    addEvent(event: string, method: any, flag: boolean): void;
+    addWindowEvent(event: string, method: any, flag: boolean): void;
+    removeEvent(event: string, method: any, flag: boolean): void;
+    startHandler(point: Point): boolean;
+    endHandler(): void;
+    moveHandler(event: MouseEvent | TouchEvent, point: Point): void;
+    wheelHandler(event: WheelEvent): void;
+    touchStartHandler(event: TouchEvent): void;
+    mouseDownHandler(event: MouseEvent): void;
+    touchMoveHandler(event: TouchEvent): void;
+    mouseMoveHandler(event: MouseEvent): void;
+    mouseUpHandler(): void;
+    touchEndHandler(event: TouchEvent): void;
+    destroy(): void;
+}
+export default Gesture;

package/types/js/figure/Recorder/Recorder.d.ts

@@ -0,0 +1,291 @@
+import { Point } from '../../tools/g2';
+import { ObjectTracker, download, NotificationManager } from '../../tools/tools';
+import TimeKeeper from '../TimeKeeper';
+import type Figure from '../Figure';
+import type { OBJ_ScenarioVelocity } from '../Animation/AnimationStep/ElementAnimationStep/ScenarioAnimationStep';
+type TypeStateDiff = [number, string, Record<string, any>, number];
+type TypeEventPayload = number | string | Record<string, any>;
+type TypeEvent = [
+    number,
+    Array<TypeEventPayload>,
+    number
+];
+type TypeEvents = Array<TypeEvent>;
+type TypeStateDiffs = Array<TypeStateDiff>;
+export type TypePauseSettings = 'freeze' | 'cancel' | 'complete' | 'animateToComplete' | 'dissolveToComplete';
+export type TypePlaySettings = {
+    how: 'dissolve' | 'animate' | 'instant';
+    duration?: number | {
+        dissovlveOut?: number;
+        dissovlveIn?: number;
+        delay?: number;
+    };
+    velocity?: OBJ_ScenarioVelocity;
+    maxDuration?: number;
+    zeroDurationThreshold?: boolean;
+    allDurationsSame?: boolean;
+} | 'dissolve' | 'animate' | 'instant';
+declare function getIndexOfEarliestTime(recordedData: TypeEvents | TypeStateDiffs, index: number): number;
+declare function getIndexOfLatestTime(recordedData: TypeEvents | TypeStateDiffs, index: number): number;
+declare function getNextIndexForTime(recordedData: TypeEvents | TypeStateDiffs, time: number, startSearch?: number, endSearch?: number, earliestTime?: boolean): number;
+declare function getPrevIndexForTime(recordedData: TypeEvents | TypeStateDiffs, time: number, startSearch?: number, endSearch?: number, earliestTime?: boolean): number;
+/**
+ * The Recorder class provides functionality to record and playback video like
+ * experiences. It can:
+ *
+ * - record and playback events, such as function calls, mouse movements, mouse
+ *   clicks and slide navigation - these can either be recorded by a user, or
+ *   programmed for specific times
+ * - overlay an audio track on playback
+ * - record entire figure state at regular intervals (like 1 second) as seek
+ *   frames for the video
+ * - allow a user to pause video at any time and interact with the figure in its
+ *   current state - on resuming playback, the figure will revert to its paused
+ *   state
+ *
+ * For performance during recording, a separate javascript worker is used to
+ * parallelize state encoding. Therefore, in addition to the FigureOne library,
+ * a FigureOne worker file will need to be loaded. See the tutorials for
+ * examples on how this is done.
+ *
+ * For tutorials and examples of how to use Recorder, see
+ *
+ * - <a href="https://github.com/airladon/FigureOne/docs/tutorials/Tutorial%2015%20-%20-Recorder%20Introduction/index.html">Tutorial 15 - Recorder Introduction</a>
+ * - [Tutorial 16 - Recording Manual Events](https://github.com/airladon/FigureOne/docs/tutorials/Tutorial%2016%20-%20-Recording%20Manual%20Events/index.html)
+ * - [Tutorial 17 - Recording Slides](https://github.com/airladon/FigureOne/docs/tutorials/Tutorial%2017%20-%20-Recording%20Slides/index.html)
+ * - [Tutorial 18 - Recording Planned Events](https://github.com/airladon/FigureOne/docs/tutorials/Tutorial%2018%20-%20-Recording%20Planned%20Events/index.html)
+ * - [Trig 1 - Trig Functions](https://github.com/airladon/FigureOne/docs/examples/Trig%201%20-%20Trig%20Functions/index.html)
+ * - [Trig 2 - Names](https://github.com/airladon/FigureOne/docs/examples/Trig%202%20-%20Names/index.html)
+ * - [Trig 3 - Relationships](https://github.com/airladon/FigureOne/docs/examples/Trig%203%20-%20Relationships/index.html)
+ *
+ * Notifications - The notification manager property `notifications` will
+ * publish the following events:
+ * - `timeUpdate`: updated at period defined in property `timeUpdates`
+ * - `durationUpdated`: updated whenever audio or video are loaded, or when
+ *    recording goes beyond the current duration
+ * - `audioLoaded`
+ * - `videoLoaded`
+ * - `recordingStarted`
+ * - `recordingStopped`
+ * - `preparingToPlay`
+ * - `playbackStarted`
+ * - `preparingToPause`
+ * - `playbackStopped`
+ * - `seek`
+ * - `recordingStatesComplete` - recording completed and recorded states ready
+ *
+ * @class
+ *
+ * @property {'recording' | 'playing' | 'idle' | 'preparingToPlay' | 'preparingToPause'} state
+ * @property {boolean} isAudioPlaying
+ * @property {number} duration in seconds
+ * @property {number} stateTimeStep in seconds - change this to change the
+ * duration between recorded seek frames
+ * @property {number} timeUpdates in seconds - how often to publish the
+ * 'timeUpdate' notification
+ * @property {NotificationManager} notifications - use to subscribe to
+ * notifications
+ * @group Interactive Video
+ */
+declare class Recorder {
+    states: ObjectTracker;
+    events: {
+        [eventName: string]: {
+            setOnSeek: boolean;
+            playbackAction: (...args: any[]) => void;
+            list: TypeEvents;
+        };
+    };
+    statesCache: ObjectTracker;
+    eventsCache: {
+        [eventName: string]: {
+            list: TypeEvents;
+        };
+    };
+    notifications: NotificationManager;
+    eventsToPlay: Array<string>;
+    state: 'recording' | 'playing' | 'idle' | 'preparingToPlay' | 'preparingToPause';
+    isAudioPlaying: boolean;
+    videoToNowDelta: number;
+    currentTime: number;
+    duration: number;
+    precision: number;
+    stateIndex: number;
+    eventIndex: {
+        [eventName: string]: number;
+    };
+    recordingStates: boolean;
+    pauseState: Record<string, any> | null;
+    startRecordingTime: number;
+    queueSeekId: null | number;
+    queueSeekTime: number;
+    stateTimeStep: number;
+    figure: Figure;
+    timeoutID: number | null;
+    timeUpdatesTimeoutID: number | null;
+    lastRecordTime: number | null;
+    lastRecordTimeCount: number;
+    audio: HTMLAudioElement | null;
+    reference: string;
+    referenceIndex: number;
+    lastSeekTime: number | null;
+    timeUpdates: number;
+    settings: {
+        pause: 'freeze' | 'cancel' | 'complete' | 'animateToComplete' | 'dissolveToComplete';
+        play: TypePlaySettings;
+    };
+    worker: any;
+    timeKeeper: TimeKeeper;
+    audioStartedCallback: (() => void) | null;
+    constructor(timeKeeper: TimeKeeper);
+    initialize(): void;
+    timeStamp(): number;
+    now(): number;
+    /**
+     * Current time in seconds
+     * @return {number} seconds
+     */
+    getCurrentTime(): number;
+    getDeltaTime(delta?: number): number;
+    setCurrentTime(time: number): void;
+    setVideoToNowDeltaTime(videoSeekTime?: number): void;
+    calcDuration(cache?: boolean): number;
+    reset(): void;
+    loadAudioTrack(audio: HTMLAudioElement): void;
+    loadEvents(encodedEventsList: Record<string, any> | Array<TypeEvents>, isMinified?: boolean): void;
+    loadStates(statesIn: Record<string, any>, isMinified?: boolean, isObjectForm?: boolean): void;
+    loadSavedData(combined: Record<string, any>): void;
+    encodeEvents(minifyEvents?: boolean): any;
+    decodeEvents(lists: Record<string, any>, isMinified?: boolean): any;
+    encodeStates(minifyStates?: boolean, asObject?: boolean, precision?: number | null): any;
+    decodeStates(statesIn: Record<string, any>, isMinified?: boolean, asObject?: boolean): ObjectTracker;
+    clearListOrDiffs(listOrDiffs: TypeEvents | TypeStateDiffs, startTime: number, stopTime: number): any[];
+    clear(startTime: number, stopTime: number): void;
+    /**
+     * Start Recording
+     * @param {number} fromTime when to start recording from in seconds (0)
+     * @param {Array<string>} whilePlaying events to play while recording ([])
+     * @param {boolean} includeStates record states as well as events (`true`)
+     */
+    startRecording(fromTime?: number, whilePlaying?: Array<string>, includeStates?: boolean): void;
+    /**
+     * Initiate states recording to generate seek frames. Any existing states
+     * will be removed before starting, so the initial state at time 0 must be in
+     * place (usually this means only start states recording when the figure is
+     * first created and not after any changes to the initial state have been
+     * made)
+     *
+     * @param {number} frameTime time between draw frames in seconds. It can be
+     * sometimes be useful to have draw frames happen more frequently than the
+     * seek frames [0.1s]
+     */
+    startStatesRecording(frameTime?: number): void;
+    autoFrame(frameTime?: number): void;
+    startWorker(): void;
+    parseMessage(event: MessageEvent): void;
+    addCurrentStateAsReference(): void;
+    getCacheStartTime(): number | null;
+    getCacheEndTime(): number;
+    getMergedCacheArray(eventListOrStatesDiff: TypeEvents | TypeStateDiffs, cacheArray: TypeEvents | TypeStateDiffs): any[];
+    mergeEventsCache(): void;
+    mergeStatesCache(): void;
+    stopTimeouts(): void;
+    /**
+     * Stop Recording
+     */
+    stopRecording(): void;
+    /**
+     * Cancel the states recording.
+     *
+     * Use this only for cancelling recording as states recording will be
+     * automatically stopped if the event and audio duration has been reached.
+     */
+    stopStatesRecording(): void;
+    addEventType(eventName: string, playbackAction: (payload: any) => void, setOnSeek?: boolean): void;
+    recordState(state: Record<string, any>, time?: number): void;
+    recordCurrentState(time?: number): void;
+    recordCurrentStateAsReference(refName: string, basedOn?: string): void;
+    recordEvent(eventName: string, payload: Array<string | number | Record<string, any>>, time?: number): void;
+    queueRecordState(time?: number): void;
+    /**
+     * Save events and states to video-track json file
+     */
+    save(): void;
+    show(): void;
+    /**
+     * Code generator that takes mouse events, and generates code to load them
+     * as auto mouse events
+     * @param {string} figureName name of figure used in code ('figure')
+     * @param {number} precision precision to save cursor positions to (2)
+     */
+    genAutoMouseEvents(figureName?: string, precision?: number, encodeMove?: boolean): string;
+    showEvent(eventName: string, precision?: number, space?: number): string;
+    encodeCursorEvent(eventName: string, timePrecision?: number, valuePrecision?: number, minTimeStep?: number): string;
+    decodeCursorEvent(eventName: string, eventData: Array<number>, timePrecision?: number, valuePrecision?: number): any[];
+    decodeEvent(eventName: string, eventData: Array<number>): any[];
+    loadEventData(eventName: string, data: any, decode?: 'cursor' | 'moved' | boolean, timePrecision?: number, valuePrecision?: number): void;
+    seekToPercent(percentTime: number): void;
+    convertTime(timeIn: string | number): number;
+    queueSeek(timeIn: number): void;
+    /**
+     * Seek to time
+     * @param {number} timeIn in seconds
+     */
+    seek(timeIn: number): void;
+    setToTime(timeIn: number, force?: boolean): void;
+    setCursor(time: number): void;
+    getCursorState(atTime: number): {
+        show: boolean;
+        up: boolean;
+        position: Point;
+    } | null;
+    getEvents(eventsIn?: Array<string> | null): Array<string>;
+    /**
+     * Start Playback
+     *
+     * @param {number} fromTimeIn ib seconds (current time)
+     * @param {boolean} allowPauseResume `true` to allow resuming from pause if a
+     * pause state exists
+     * @param {Array<string>} events list of events to play (all events)
+     */
+    startPlayback(fromTimeIn?: number, allowPauseResume?: boolean, events?: Array<string> | null): void;
+    /**
+     * Toggle playback (if not recording)
+     */
+    togglePlayback(): void;
+    getPlaySettings(): Record<string, any>;
+    /**
+     * Resume playback if paused.
+     */
+    resumePlayback(): void;
+    audioStarted(): void;
+    audioEnded(): void;
+    startAudioPlayback(fromTime: number, callback?: (() => void) | null): boolean;
+    startTimeUpdates(): void;
+    startEventsPlayback(fromTime: number): void;
+    getNextEvent(): string;
+    playbackEvent(eventName: string): void;
+    areEventsPlaying(): boolean;
+    finishPlaying(): boolean;
+    stop(): void;
+    /**
+     * Pause playback
+     * @param {'freeze' | 'cancel' | 'complete' | 'animateToComplete' | 'dissolveToComplete'} how
+     * how any animations currently playing should be stopped
+     */
+    pausePlayback(how?: 'freeze' | 'cancel' | 'complete' | 'animateToComplete' | 'dissolveToComplete'): void;
+    setEvent(eventName: string, index: number): void;
+    /**
+     * Fetch and load a video track.
+     *
+     * When loading is finished, the notification 'videoLoaded' will be published
+     *
+     * @param {string} path path to load video track from
+     * @param {function(): void} callback function to execute when loaded
+     */
+    loadVideoTrack(path: string, callback?: () => void): void;
+    setState(index: number): void;
+    getState(index: number): any;
+    getStateForTime(timeIn: number): any;
+}
+export { Recorder, getIndexOfEarliestTime, download, getIndexOfLatestTime, getNextIndexForTime, getPrevIndexForTime, };

package/types/js/figure/Recorder/parseState.d.ts

@@ -0,0 +1,3 @@
+import type Figure from '../Figure';
+declare function parseState(state: any, figure: Figure): any;
+export default parseState;

package/types/js/figure/Recorder/recorder.worker.d.ts

@@ -0,0 +1 @@
+export {};

package/types/js/figure/Recorder/state.d.ts

@@ -0,0 +1,7 @@
+declare function getState(obj: Record<string, any>, stateProperties: Array<string>, optionsIn: {
+    precision?: number;
+    ignoreShown?: boolean;
+    min?: boolean;
+}): Record<string, any>;
+declare function setState(obj: Record<string, any>, stateIn: Record<string, any>): void;
+export { setState, getState };