figureone 0.15.10 → 1.0.0

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

@@ -0,0 +1,606 @@
+import { NotificationManager } from '../tools/tools';
+import { FigureElementCollection } from './Element';
+import type { FigureElement, TypeElementPath } from './Element';
+import type { OBJ_Collection } from './FigurePrimitives/FigurePrimitiveTypes';
+import type { OBJ_TextModifiersDefinition } from './FigurePrimitives/FigurePrimitiveTypes2D';
+import type Figure from './Figure';
+import { Equation } from './Equation/Equation';
+import type AnimationStep from './Animation/AnimationStep';
+import type CollectionsText from './FigureCollections/Text';
+import type { OBJ_FormattedText } from './FigureCollections/Text';
+/**
+ * Last slide shown
+ *
+ * `'next'` | `'prev'` | number
+ * @group Slide Navigator
+ */
+export type TypeSlideFrom = 'next' | 'prev' | number;
+/**
+ * `(currentIndex: number, nextIndex: number) => void`
+ *
+ * When using {@link Recorder}, a string from a {@link FunctionMap} can be
+ * used, as long as the function the string maps to allows for the same
+ * parameters as above.
+ * @group Slide Navigator
+ */
+export type TypeSlideLeaveStateCallback = string | ((currentIndex: number, nextIndex: number) => void);
+/**
+ * `(currentIndex: number, from: `{@link TypeSlideFrom}`) => void`
+ *
+ * When using {@link Recorder}, a string from a {@link FunctionMap} can be
+ * used, as long as the function the string maps to allows for the same
+ * parameters as above.
+ * @group Slide Navigator
+ */
+export type TypeSlideStateCallback = string | ((from: TypeSlideFrom, index: number) => void);
+/**
+ * Callback definition for slide transition.
+ *
+ * `(done: () => void, currentIndex: number, from: `{@link TypeSlideFrom}`) => void`
+ *
+ * When using {@link Recorder}, a string from a {@link FunctionMap} can be
+ * used, as long as the function the string maps to allows for the same
+ * parameters as above.
+ *
+ * Important note: the `done` parameter MUST be called at the end of the
+ * transition to allow the slide to progress to steady state.
+ * @group Slide Navigator
+ */
+export type TypeSlideTransitionCallback = string | ((done: () => void, index: number, from: TypeSlideFrom) => void);
+/**
+ * An animation definition object defines an animation in a json like
+ * object.
+ *
+ * One key of the object defines the animation to use, while the remaining
+ * keys are the properties of the animation.
+ *
+ * The value of the key (with the exception of the `delay` key) that defines
+ * the animation is a {@link TypeElementPath} defining which elements to apply
+ * the animation to. When using `delay`, the value will be a number in seconds.
+ *
+ * The remaining keys in the object then come from the definition objects of
+ * the associated animation.
+ *
+ * The possible key names that define animations are:
+ *
+ * - `delay`: delay where value is `number` in seconds
+ * - `in`: dissolve in with {@link OBJ_ElementAnimationStep} options where
+ *   duration is dissolve in time
+ * - `out`: dissolve out with {@link OBJ_ElementAnimationStep} options where
+ *   duration is dissolve out time
+ * - `rotation`: {@link OBJ_RotationAnimationStep}
+ * - `position`: {@link OBJ_PositionAnimationStep}
+ * - `scale`: {@link OBJ_ScaleAnimationStep}
+ * - `scenario`: {@link OBJ_ScenarioAnimationStep}
+ * - `scenarios`: {@link OBJ_ScenariosAnimationStep}
+ * - `pulseWidth`: {@link OBJ_PulseWidthAnimationStep}
+ * - `length`: {@link OBJ_LengthAnimationStep}
+ * - `pulseAngle`: {@link OBJ_PulseAngleAnimationStep}
+ * - `pulse`: {@link OBJ_PulseAnimationStep}
+ * - `dim`: dim animation step with {@link OBJ_ElementAnimationStep} options
+ *   where
+ *   duration is dim duration
+ * - `undim`: dim animation step with {@link OBJ_ElementAnimationStep} options
+ *   where duration is undim duration
+ * - `trigger`: {@link OBJ_TriggerAnimationStep}
+ * - `goToForm`: {@link OBJ_TriggerAnimationStep}
+ *
+ *
+ * Several animation steps will automatically set their final targets just
+ * before `steadyStateCommon` is set. This means, if the slide is navigated to
+ * from a slide that doesn't trigger the transition, then these targets will
+ * still be set. In many cases, this reduces doubling up desired steady state
+ * targets when defining a slide. However, if the target should not be
+ * automatically set, then use `final: false` in the animation steps's options
+ * to disable this behavor. The animations that automatically set targets are:
+ *
+ * - `in`
+ * - `out`
+ * - `scenario`
+ * - `dim`
+ * - `undim`
+ * - `rotation`
+ * - `position`
+ * - `scale`
+ *
+ *
+ * If a transition definition contains `in` or `out` animation steps, then
+ * before the transition starts, the elements that will dissolve in are
+ * automatically hidden, and the elements that will dissolve out are
+ * automatically shown. If this behavior is not wanted, then for `out` steps
+ * use `show: false` in the animation step definition, and for `in` steps use
+ * `show: true`.
+ *
+ * @interface
+ * @group Misc SlideNavigator
+ */
+export type OBJ_AnimationDefinition = Record<string, any>;
+/**
+ * Transition Definition
+ *
+ * {@link TypeSlideTransitionCallback} | {@link OBJ_AnimationDefinition} | Array<{@link OBJ_AnimationDefinition} | Array<{@link OBJ_AnimationDefinition}>>
+ *
+ * For complete control in creating a transition animation, and/or setting
+ * necessary transition state within an application, use a function definition
+ * {@link TypeSlideTransitionCallback}.
+ *
+ * Many transitions will be simple animations, dissolving in elements,
+ * dissolving out elements, or animating between positions. For these, a short
+ * hand way of defining animations can be used.
+ *
+ * {@link OBJ_AnimationDefinition} is a json like object that defines the
+ * animation. When used in an array, multiple animations will be executed in
+ * series.
+ *
+ * If an array of {@link OBJ_AnimationDefinition} objects has an element that
+ * itself is an array of {@link OBJ_AnimationDefinition} objects, then the
+ * the animations within the nested array will be executed in parallel.
+ *
+ * <p class="inline_gif"><img src="./apiassets/slidetransition.gif" class="inline_gif_image"></p>
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Figure has two rectangles and a slide navigator. Slides will dissolve in,
+ * // dissolve out, move and rotate rectangles
+ * const [rect1, rect2] = figure.add([
+ *   {
+ *     name: 'rect1',
+ *     make: 'primitives.rectangle',
+ *     width: 0.4,
+ *     height: 0.4,
+ *     position: [-0.5, 0.5],
+ *   },
+ *   {
+ *     name: 'rect2',
+ *     make: 'primitives.rectangle',
+ *     width: 0.4,
+ *     height: 0.4,
+ *     position: [0.5, 0.5],
+ *   },
+ *   {
+ *     name: 'nav',
+ *     make: 'collections.slideNavigator',
+ *   },
+ * ]);
+ *
+ * const setPositionAndRotation = (r1Pos, r1Rot, r2Pos, r2Rot) => {
+ *   rect1.setPosition(r1Pos);
+ *   rect1.setRotation(r1Rot);
+ *   rect2.setPosition(r2Pos);
+ *   rect2.setRotation(r2Rot);
+ * };
+ *
+ * // Add slides to the navigator
+ * figure.getElement('nav').loadSlides([
+ *   // Slide 1
+ *   {
+ *     showCommon: 'rect1',
+ *     enterStateCommon: () => setPositionAndRotation([-0.5, 0.5], 0, [0.5, 0.5], 0),
+ *   },
+ *
+ *   // Slide 2
+ *   {
+ *     transition: (done) => {
+ *       rect2.animations.new()
+ *         .dissolveIn({ duration: 1 })
+ *         .whenFinished(done)  // Make sure to process done when finished
+ *         .start();
+ *     },
+ *     // When using a transition function, any changes during the transition
+ *     // need to be explicitly set at steady state
+ *     steadyState: () => {
+ *       rect2.show();
+ *     },
+ *   },
+ *
+ *   // Slide 3
+ *   // When using animation objects, the targets of animations will be
+ *   // automatically set at steady state, so user does not need to set them
+ *   {
+ *     showCommon: ['rect1', 'rect2'],
+ *     transition: { position: 'rect2', target: [0.3, 0.5], duration: 1 },
+ *   },
+ *
+ *   // Slide 4
+ *   // Use an array of animation object definitions to create a sequence of steps
+ *   {
+ *     enterState: () => setPositionAndRotation([-0.5, 0.5], 0, [0.3, 0.5], 0),
+ *     transition: [
+ *       { position: 'rect1', target: [-0.3, 0.5], duration: 1 },
+ *       { rotation: 'rect1', target: Math.PI / 4, duration: 1 },
+ *       { rotation: 'rect2', target: Math.PI / 4, duration: 1 },
+ *     ],
+ *   },
+ *
+ *   // Slide 5
+ *   // Use an array within an array to create parallel steps
+ *   {
+ *     enterState: () => setPositionAndRotation([-0.3, 0.5], Math.PI / 4, [0.3, 0.5], Math.PI / 4),
+ *     transition: [
+ *       [
+ *         { rotation: 'rect1', target: 0, duration: 1 },
+ *         { rotation: 'rect2', target: 0, duration: 1 },
+ *       ],
+ *       [
+ *         { position: 'rect1', target: [-0.5, 0.5], duration: 1 },
+ *         { position: 'rect2', target: [0.5, 0.5], duration: 1 },
+ *       ],
+ *       { out: ['rect1', 'rect2'] },
+ *     ],
+ *   },
+ * ]);
+ * @group Slide Navigator
+ */
+export type TypeTransitionDefinition = TypeSlideTransitionCallback | OBJ_AnimationDefinition | Array<OBJ_AnimationDefinition | Array<OBJ_AnimationDefinition>>;
+/**
+ * Recorder time format.
+ *
+ * `number | string`
+ *
+ * Use `number` for number of seconds, or use string with format 'm:s.s' (for
+ * example, '1:23.5' would define 1 minute, 23.5 seconds)
+ * @group Interactive Video
+ */
+export type TypeRecorderTime = string | number;
+/**
+ *
+ *
+ * Slide definition options object.
+ *
+ * This object defines the state the figure should be set to when this slide
+ * is navigated to.
+ *
+ * A slide definition has several callback properties that can be used to set
+ * figure state including:
+ *  - enterState: set an initial state
+ *  - transition: define an animation for when moving to this slide
+ *  - steadyState: set steady state, then wait for next navigation event
+ *  - leaveState: set leave state when moving to another another slide
+ *
+ * It is good practice to try and make each slide's state independant of other
+ * slides. If a square is shown on slides 4 and 5, then it should be explicitly
+ * shown on both slides. If it is only shown on slide 4, then it will be fine
+ * when the user navigates from slide 4 to 5, but will not be shown if the user
+ * is navigating from slide 6 to 5. Allowing users to go to specific slides out
+ * of order makes slide dependencies even more difficult.
+ *
+ * Therefore, the enter, steady and leave states above should be used to fully
+ * define the figure's state on each slide.
+ *
+ * However, while this approach will yield a good user experience, developing
+ * many slides, complex figures or numerous equation forms can make slide
+ * definition verbose. Even though each slide is different, many slides may
+ * share largely the same state, all of which needs to be explicitly defined
+ * for each slide.
+ *
+ * The SlideNavigator tries to manage this by providing the fundamental state
+ * callbacks above, as well as properties that can be defined once, and shared
+ * between slides. Slides with shared, or common properties make copies of all
+ * the properties so each slide is independant, but require the developer to
+ * define them just once. If a slide doesn't define a common property, then it
+ * will use the definition in the last slide that defined it.
+ *
+ * For example, the `enterStateCommon` property is a common property. If it is
+ * defined in slides 4 and 7, then slides 0-3 will not have the property, slides
+ * 4-6 will use the slide 4 definition, and slides 7 and after will all use
+ * slide 7's definition.
+ *
+ * Common state properties include:
+ * - enterStateCommon
+ * - steadyStateCommon
+ * - leaveStateCommon
+ *
+ * The reason some states have both a common and slide specific property
+ * (such as steadyState and steadyStateCommon) is so the common property can
+ * be best leveraged. If all properties were common, then they would need to be
+ * redefined every time a small change was made. Having both common and slide
+ * specific properties allows a balance of defining some state for a group of
+ * slides once, while allowing specific changes to that state where needed.
+ *
+ * In addition to the above state properties, there are a number of short-cut
+ * properties, that make it easy to set state for common figure elements. When
+ * a SlideNavigator is instantiated, a text figure element, a figure collection
+ * and one or more equation elements can be associated with it.
+ *
+ * The `text`, `modifier` and `modifierCommon` properties can be used to set
+ * the text of the text figure element associated with the SlideNavigator.
+ * `text` and `modifierCommon` are common properties.
+ *
+ * The `form` property is also common and can be used to automatically set the
+ * form of the associated equation elements. A SlideNavigator can be associated
+ * with one or more equations. The `form` property defines the form each of the
+ * equations should be set to on this slide. If there is just one equation, then
+ * the form property can be a string that is the form name. For two or more
+ * equations, the form property should be an array of strings where each element
+ * is the form name for the corresponding equation. The order of equations
+ * passed into the SlideNavigator, needs to be the same as the order of strings
+ * in the `form` array. To hide an equation, use a `null` instead of a string.
+ * If the `form` property has less forms than equations, then all remaining
+ * equations will be hidden.
+ *
+ * The `form` property is a short cut with several consequences:
+ * - All equations with `null` forms will be hidden prior to `enterState`.
+ * - If the slide doesn't have a `transition` defined, and if an equation form
+ *   is changed, then a transition will be added that animates the equation form
+ *   change. If `transition` is defined, and equation animation is required,
+ *   then it needs to be defined in the `transition` property explicity.
+ * - Each equation with a defined form will have `showForm` called on that form
+ *   prior to `steadyState`.
+ *
+ * The life cycle of a slide change is:
+ * - `leaveStateCommon` (for current slide)
+ * - `leaveState` (for current slide)
+ * - stop all animations
+ * - Update associated text element with `text` property
+ * - Hide all figure elements in associated collection
+ * - `showCommon`
+ * - `show`
+ * - show navigator buttons and navigator text element
+ * - `hideCommon`
+ * - `hide`
+ * - show `fromForm`
+ * - show all elements that dissolveIn or dissolveOut in an auto transition
+ * - `scenarioCommon`
+ * - `scenario`
+ * - `enterStateCommon` (for new slide)
+ * - `enterState`
+ * - `addReference`
+ * - show all elements that dissolveOut and hide all elements that dissolveIn
+ *   in an auto transition
+ * - publish `beforeTransition` notification
+ * - transition
+ * - show `form`
+ * - set targets from auto transition
+ * - `steadyStateCommon`
+ * - `steadyState`
+ * - update slide navigator buttons
+ * - publish `steady` notification
+ *
+ * @property {OBJ_TextLines} [text] common property - With `modifiersCommon` and
+ * `modifiers` define the text for the text element associated with the
+ * SlideNavigator
+ * @property {OBJ_TextModifiersDefinition} [modifiersCommon] common property
+ * @property {OBJ_TextModifiersDefinition} [modifiers] common property - will
+ * overwrite any keys from `modifiersCommon` with the same name
+ * @property {TypeElementPath} [showCommon] common property
+ * @property {TypeElementPath} [show]
+ * @property {TypeElementPath} [hideCommon] common property
+ * @property {TypeElementPath} [hide]
+ * @property {TypeSlideStateCallback} [enterStateCommon] common property
+ * @property {TypeSlideStateCallback} [enterState]
+ * @property {TypeTransitionDefinition} [transition] transititions are
+ * only called when moving between adjacent slides in the forward direction.
+ * Progressing backwards, or skipping around with `goToSlide` will not call
+ * `transition`. A transition is a callback where animations can be defined. A
+ * `done` function is passed to the callback and must be called at the end of
+ * the animation to allow slide steadyStates to be set.
+ * @property {TypeSlideStateCallback} [steadyStateCommon] common property
+ * @property {TypeSlideStateCallback} [steadyState]
+ * @property {TypeSlideLeaveStateCallback} [leaveStateCommon] common property
+ * @property {TypeSlideLeaveStateCallback} [leaveState]
+ * @property {string | Array<string | null> | null | Object} [form] common property
+ * @property {string | Array<string | null> | null | Object} [fromForm]
+ * @property {string | Array<string>} [scenarioCommon] common property
+ * @property {string | Array<string>} [scenario]
+ * @property {'move' | 'dissolve' | 'moveFrom' | 'pulse' |
+ *  'dissolveInThenMove'} [animate] override default animation option for
+ * automatic form animation using the 'form' property
+ * @property {boolean} [clear] `true` does not use any prior common properties (`false`)
+ * @property {TypeRecorderTime} [time] recorder only - absolute time to
+ * transition to slide.
+ * @property {number} [delta] recorder only - time delta in seconds from last
+ * slide transition to transition to this slide
+ * @property {Array<[TypeRecorderTime, string]> | [TypeRecorderTime, string]} [exec]
+ * recorder only - times to execute functions.
+ * @property {Array<[number | string, string]> | [number | string, string]} [execDelta]
+ * recorder only - time deltas to execute functions from the slide transition
+ * start.
+ * @property {boolean} addReference recorder only `true` will add a new
+ * reference state based on the current state
+ * @interface
+ * @group Slide Navigator
+ */
+export type OBJ_SlideNavigatorSlide = {
+    text?: OBJ_FormattedText;
+    modifiersCommon?: OBJ_TextModifiersDefinition;
+    modifiers?: OBJ_TextModifiersDefinition;
+    showCommon?: TypeElementPath;
+    show?: TypeElementPath;
+    hideCommon?: TypeElementPath;
+    hide?: TypeElementPath;
+    enterStateCommon?: TypeSlideStateCallback;
+    enterState?: TypeSlideStateCallback;
+    transition?: TypeTransitionDefinition;
+    steadyStateCommon?: TypeSlideStateCallback;
+    steadyState?: TypeSlideStateCallback;
+    leaveStateCommon?: TypeSlideLeaveStateCallback;
+    leaveState?: TypeSlideLeaveStateCallback;
+    fromForm?: string | Array<string | null> | null;
+    form?: string | Array<string | null> | null;
+    scenarioCommon?: string | Array<string>;
+    scenario?: string | Array<string>;
+    clear?: boolean;
+    time?: TypeRecorderTime;
+    delta?: number;
+    exec?: Array<[TypeRecorderTime, string]> | [TypeRecorderTime, string];
+    execDelta?: Array<[number, string]> | [number, string];
+    addReference?: boolean;
+};
+/**
+ * Default equation animation properties.
+ * @interface
+ * @group Slide Navigator
+ */
+export type OBJ_EquationDefaults = {
+    duration?: number;
+    animate?: "move" | "dissolve" | "moveFrom" | "pulse" | "dissolveInThenMove";
+};
+/**
+ * SlideNavigator options object
+ *
+ * The options here associate a number of {@link FigureElement}s with the
+ * {@link SlideNavigator}, which will be ustilized by the slide definitions in
+ * {@link OBJ_SlideNavigatorSlide}.
+ *
+ * The `collection` property associates a {@link FigureElementCollection}. If a
+ * {@link Figure} is passed in, then the root level collection will be
+ * used. All animations in slide `transitions` should be attached to
+ * this collection or its children as this is the collection that will be
+ * stopped when skipping slides. All string definitions of other elements
+ * will be relative to this collection, and therefore must be children of
+ * this collection. A collection must be passed in.
+ *
+ * `prevButton` and `nextButton` are buttons that can be used to progress
+ * backwards and forwards through the slides. The SlideNavigator will
+ * disable `prevButton` on the first slide and update `nextButton` label
+ * (if it exists) with `'restart'` when at the last slide.
+ *
+ * `text` is a {@link OBJ_TextLines} figure element that will be updated
+ * with the `text` property in {@link OBJ_SlideNavigatorSlide}
+ *
+ * `equation` is one or more {@link Equation} elements to associate with the
+ * SlideNavigator. Each associated equation will be operated on by the `form`
+ * property in {@link OBJ_SlideNavigatorSlide}. Use `OBJ_EquationDefaults` to
+ * set default equation animation properties when `form` creates slide
+ * transitions.
+ *
+ * @property {Figure | FigureElementCollection} collection
+ * @property {Array<OBJ_SlideNavigatorSlide>} [slides]
+ * @property {null | FigureElement | string} [prevButton]
+ * @property {null | FigureElement | string} [nextButton]
+ * @property {null | string | FigureElementCollection} [text]
+ * @property {Equation | string | Array<string | Equation>} [equation]
+ * @property {OBJ_EquationDefaults} [equationDefaults]
+ * @interface
+ * @group Slide Navigator
+ */
+export type OBJ_SlideNavigator = {
+    collection: Figure | FigureElementCollection;
+    slides?: Array<OBJ_SlideNavigatorSlide>;
+    prevButton?: FigureElement | null | undefined | string;
+    nextButton?: FigureElement | null | undefined | string;
+    text?: string | FigureElementCollection;
+    equation?: Equation | string | Array<string | Equation>;
+    equationDefaults?: OBJ_EquationDefaults;
+} & OBJ_Collection;
+/**
+ * Slide Navigator
+ *
+ * It is sometimes useful to break down a visualization into easier to consume
+ * parts.
+ *
+ * For example, a complex figure or concept can be made easier if built up
+ * from a simple begining. Each step along the way might change the elements
+ * within the figure, or the form of an equation, and be accompanied by a
+ * corresponding description giving context, reasoning or next steps.
+ *
+ * An analogy to this is a story or presentation, where each step along the way
+ * is a presentation slide.
+ *
+ * This class is a simple slide navigator, providing a convenient way to define
+ * slides and step through them.
+ *
+ * {@link CollectionsSlideNavigator} creates the navigation buttons, and
+ * `textElement` automatically, and will usually be more convenient than
+ * manually creating them (unless custom buttons are needed).
+ *
+ * Notifications - The notification manager property `notifications` will
+ * publish the following events:
+ * - `goToSlide`: published when slide changes - will pass slide index to
+ * subscriber
+ * - `steady`: steady state reached (slide transition complete)
+ *
+ * @property {NotificationManager} notifications notification manager for
+ * element
+ * @property {number} currentSlideIndex index of slide current shown
+ * @property {boolean} inTransition `true` if slide current transitioning
+ *
+ * @see {@link CollectionsSlideNavigator} for examples.
+ * @group Slide Navigator
+ */
+export default class SlideNavigator {
+    currentSlideIndex: number;
+    slides: Array<OBJ_SlideNavigatorSlide>;
+    prevButton: FigureElement | null | undefined;
+    nextButton: FigureElement | null | undefined;
+    textElement: CollectionsText | null | undefined;
+    inTransition: boolean;
+    equationsOrder: Array<FigureElement>;
+    equations: {
+        [key: string]: FigureElement;
+    };
+    collection: FigureElementCollection;
+    notifications: NotificationManager;
+    from: 'prev' | 'next' | number;
+    slideTransitionDoneName: string;
+    doneCount: number;
+    equationDefaults: {
+        duration: number;
+        animate: "move" | "dissolve" | "moveFrom" | "pulse" | "dissolveInThenMove";
+    };
+    disableButtonOpacity: number;
+    fromAutoSlide: boolean;
+    /**
+     * @param {OBJ_SlideNavigator | null} options use `null` to load options later
+     * with the `load` method. Options should only be loaded when an instantiated
+     * {@link FigureElementCollection} is available for the `collections`
+     * property.
+     */
+    constructor(options?: OBJ_SlideNavigator | null);
+    /**
+     * Load options after object instantiation. Usefull for if the
+     * `collection`, `prevButton`, `nextButton`, `equation` and/or `text` figure
+     * elements are not available at instantiation.
+     *
+     * @param {OBJ_SlideNavigator} options
+     */
+    load(options: OBJ_SlideNavigator): void;
+    syncDone: () => void;
+    convertTime(timeIn: string | number): number;
+    loadRecorder(): void;
+    /**
+     * Load slides into navigator
+     */
+    loadSlides(slides: Array<OBJ_SlideNavigatorSlide>): void;
+    setEquations(equationsIn: Array<string | Equation>): void;
+    getProperty(property: string, indexIn: number, defaultValue?: any): any;
+    getText(index: number): any;
+    getForm(index: number): any;
+    getFormGeneric(formType: 'form' | 'fromForm', index: number): any;
+    getFromForm(index: number): any;
+    showForms(formsToShow: Record<string, any>): void;
+    setSteadyState(from: 'next' | 'prev' | number): void;
+    transitionDone(cancelled?: boolean, force?: 'freeze' | 'complete' | null): void;
+    setFinalFromAutoTransition(stepsIn: Array<OBJ_AnimationDefinition | Array<OBJ_AnimationDefinition>>): void;
+    processAutoTransitionAnim(step: Record<string, any>, key: string, animName: string | undefined, animSteps: Array<AnimationStep>, defaultOptions?: Record<string, any>): void;
+    processAutoTransitionSet(step: Record<string, any>, key: string, setName: string, setKey?: string): void;
+    showAutoTransitionDissolve(index: number, showAll?: boolean): void;
+    autoTransition(stepsIn: Array<Array<Record<string, any>>> | Array<Record<string, any>>): void;
+    transition(from: 'next' | 'prev' | number): any;
+    setText(index: number): void;
+    showElements(index: number): void;
+    hideElements(index: number): void;
+    /**
+     * @param {number} index slide index to go to
+     * @param {'next' | 'prev' | number} from this should generally not be used
+     * and will be set automatically
+     */
+    goToSlide(slideIndex: number, from?: 'next' | 'prev' | number | null): void;
+    /**
+     * Progress to next slide.
+     *
+     * @param {boolean} ignoreTransition when `false`, if the slide is still in
+     * a transition when nextSlide is called, then the transition will skip
+     * through to the end, without moving to the next slide - effectively skipping
+     * through to the steady state of the current slide. If `true`, then the
+     * transition will instantly complete, setState and leaveStates called and the
+     * next slide will be progressed to.
+     */
+    nextSlide(ignoreTransition?: boolean): void;
+    /**
+     * Progress to the previous slide.
+     */
+    prevSlide(): void;
+}