figureone 0.15.10 → 1.0.1

package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/TransformAnimationStep.d.ts

@@ -0,0 +1,163 @@
+/**
+* Animations are simply interpolating each value within a rotation definition
+ * independently (either between a `start` and `target` or from a `start` with
+ * `velocity`). Therefore, animating any values that belong to vectors
+ * (direction ('dir' or 'rd'), change of basis ('rbasis' or 'rb'), or the axis
+ * of axis/angle) may result in unexpected animations. For example, if animating
+ * a rotation direction from [1, 0, 0] to [-1, 0, 0] it might be expected that
+ * a π radians rotation would occur. Instead, it will look like no rotation
+ * will have started, then a π rotation will happen in a single frame, and then
+ * it will look stationary again. This is because only the x component of the
+ * direction vector will change each animation frame. As a rotation direciton
+ * that is [0.5, 0, 0] is the same as [1, 0, 0], then for half the animation it
+ * will look like nothing is changing. When the x component cross from the 0
+ * point, the element's rotation will instantly flip. Then for the second have
+ * of the rotation as the x component gets more negative it will once again
+ * look stationary.
+ *
+ * If wanting to animate a direction vector, use {@link directionToAxisAngle}
+ * or {@link angleFromVectors} and then use a axis/angle rotation
+ * keeping the axis constant. If wanting to animate a change of basis rotation,
+ * then use a {@link CustomAnimationStep} to manage how to change the basis
+ * vectors over time.
+ */
+import { Transform } from '../../../../tools/g2';
+import type { OBJ_TranslationPath } from '../../../../tools/g2';
+import type { OBJ_ElementAnimationStep } from '../ElementAnimationStep';
+import ElementAnimationStep from '../ElementAnimationStep';
+import type { AnimationStartTime } from '../../AnimationManager';
+/**
+ * {@link TransformAnimationStep} options object
+ *
+ * @extends OBJ_ElementAnimationStep
+ *
+ * @property {TypeParsableTransform} [start]
+ * @property {TypeParsableTransform} [target]
+ * @property {TypeParsableTransform} [delta]
+ * @property {null | TypeParsableTransform} [velocity] velocity of
+ * transform overrides `duration` - `null` to use `duration` (`null`)
+ * @property {OBJ_TranslationPath} [path] translation path style and options
+ * (`{ style: 'linear' }`)
+ * @property {0 | 1 | -1 | 2} [rotDirection] where `0` is quickest direction,
+ * `1` is positive of CCW direction, `-1` is negative of CW direction and `2` is
+ * whichever direction doesn't pass through angle 0 (`0`).
+ * @property {'0to360' | '-180to180' | null} [clipRotationTo]
+ * @property {number | null} [maxDuration] maximum duration to clip animation
+ * to where `null` is unlimited (`null`)
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_TransformAnimationStep = {
+    start?: Transform;
+    target?: Transform;
+    delta?: Transform;
+    path?: OBJ_TranslationPath;
+    rotDirection?: 0 | 1 | -1 | 2;
+    clipRotationTo?: '0to360' | '-180to180' | null;
+    velocity?: Transform | number | null | undefined;
+    maxDuration?: number;
+} & OBJ_ElementAnimationStep;
+/**
+ * Transform Animation Step
+ *
+ * ![](./apiassets/transform_animation.gif)
+ *
+ * By default, the transform will start with the element's current transform.
+ *
+ * A {@link Transform} chains many transform links where each link might be
+ * a {@link Rotation}, {@link Scale} or {@link Translation} transform.
+ *
+ * `start`, `target` and `delta` should have the same order of transform links
+ * as the `element`'s transform.
+ *
+ * The {@link TransformAnimationStep} will animate each of these links with the
+ * same duration. If `velocity` is used to calculate the duration, then the link
+ * with the longest duration will define the duration of the animation.
+ * `velocity` can either be a transform with the same order of transform links
+ * as the `element` or it can be a constant value, which will be applied to
+ * all transform links. `velocity` cannot be 0.
+ *
+ * Use either `delta` or `target` to define it's end point of the animation.
+ *
+ * @extends ElementAnimationStep
+ * @param {OBJ_TransformAnimationStep} options
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Using duration
+ * p.animations.new()
+ *   .transform({
+ *     target: new Fig.Transform().scale(2, 2).rotate(0.5).translate(1, 0),
+ *     duration: 2,
+ *   })
+ *   .start();
+ *
+ * @example
+ * // Using velocity as a transform
+ * p.animations.new()
+ *   .transform({
+ *     target: new Fig.Transform().scale(2, 2).rotate(0.5).translate(1, 0),
+ *     velocity: new Fig.Transform().scale(0.5, 0.5).rotate(0.25).translate(0.5, 0.5),
+ *   })
+ *   .start();
+ *
+ * @example
+ * // Using velocity as a number
+ * p.animations.new()
+ *   .transform({
+ *     target: new Fig.Transform().scale(2, 2).rotate(0.5).translate(1, 0),
+ *     velocity: 0.5,
+ *   })
+ *   .start();
+ *
+ * @example
+ * // Using TypeParsableTransform as transform definition
+ * p.animations.new()
+ *   .transform({
+ *     target: [['s', 1.5, 1.5], ['r', 0.5], ['t', 1, 0]],
+ *     duration: 2,
+ *   })
+ *   .start();
+ *
+ * @example
+ * // Different ways to create a stand-alone step
+ * const step1 = p.animations.transform({
+ *   target: [['s', 1.5, 1.5], ['r', 1], ['t', 1, 0]],
+ *   duration: 2,
+ * });
+ * const step2 = new Fig.Animation.TransformAnimationStep({
+ *   element: p,
+ *   target: [['s', 1, 1], ['r', 0], ['t', 0, 0]],
+ *   duration: 2,
+ * });
+ *
+ * p.animations.new()
+ *   .then(step1)
+ *   .then(step2)
+ *   .start();
+ * @group Animation
+ */
+export default class TransformAnimationStep extends ElementAnimationStep {
+    transform: {
+        start: Transform;
+        delta: Transform;
+        target: Transform;
+        rotDirection: 0 | 1 | -1 | 2;
+        path: OBJ_TranslationPath;
+        velocity: Transform | number | null | undefined;
+        clipRotationTo: '0to360' | '-180to180' | null;
+        maxDuration: number | null | undefined;
+    };
+    /**
+     * @hideconstructor
+     */
+    constructor(...optionsIn: Array<OBJ_TransformAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    start(startTime?: AnimationStartTime | null): void;
+    setFrame(deltaTime: number): void;
+    setToEnd(): void;
+    _dup(): TransformAnimationStep;
+}

package/types/js/figure/Animation/AnimationStep/ElementAnimationStep.d.ts

@@ -0,0 +1,56 @@
+import type { OBJ_AnimationStep } from '../AnimationStep';
+import AnimationStep from '../AnimationStep';
+import type { FigureElement } from '../../Element';
+import type { AnimationStartTime } from '../AnimationManager';
+/**
+ * Animation progression function.
+ *
+ * As the animation time progresses, a percentage of the total animation
+ * duration will be passed to this function.
+ *
+ * This function then calculates and returns the percent progress of the
+ * animation.
+ *
+ * This function can be used to make non-linear progressions of an animation.
+ * For instance, it could be used to create a progression that is slowed
+ * at the start or end of the animation.
+ *
+ * @param {number} percent percentage of duration
+ * @return {number} percent of animation complete
+ * @group Misc Animation
+ */
+export type AnimationProgression = (percent: number) => number;
+/**
+ * {@link ElementAnimationStep} options object
+ *
+ * @extends OBJ_AnimationStep
+ * @property {FigureElement} [element]
+ * @property {'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression} [progression]
+ * how the animation progresses - defaults to `linear` for color, opacity and
+ * custom animations and `easeinout` for others
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ElementAnimationStep = {
+    element?: FigureElement;
+    type?: 'transform' | 'color' | 'custom' | 'position' | 'rotation' | 'scale' | 'opacity';
+    progression?: 'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression;
+} & OBJ_AnimationStep;
+/**
+ * Animation Step tied to an element
+ *
+ * Default values for the animation step will then come from this element.
+ *
+ * @extends AnimationStep
+ * @group Misc Animation
+ */
+export default class ElementAnimationStep extends AnimationStep {
+    type: 'transform' | 'color' | 'custom' | 'position' | 'setPosition' | 'opacity';
+    progression: ((percent: number, invert?: boolean) => number) | string;
+    constructor(optionsIn?: OBJ_ElementAnimationStep);
+    fnExec(idOrFn: string | Function | null, ...args: any): any;
+    _getStateProperties(): string[];
+    getPercentComplete(percentTime: number): any;
+    start(startTime?: AnimationStartTime | null): void;
+    _dup(): ElementAnimationStep;
+}

package/types/js/figure/Animation/AnimationStep/ParallelAnimationStep.d.ts

@@ -0,0 +1,70 @@
+import type { OBJ_AnimationStep } from '../AnimationStep';
+import AnimationStep from '../AnimationStep';
+import type { AnimationStartTime } from '../AnimationManager';
+/**
+ * Parallel animation step options object
+ * @extends OBJ_AnimationStep
+ * @property {Array<AnimationStep>} steps animation steps to perform in parallel
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ParallelAnimationStep = {
+    steps?: Array<AnimationStep>;
+} & OBJ_AnimationStep;
+/**
+ * Execute an array of `{@link AnimationStep}`s in parallel.
+ *
+ * ![](./apiassets/parallel_animation.gif)
+ *
+ * The parallel animation step will not complete till all steps are finished.
+ *
+ * @param {Array<AnimationStep> | OBJ_SerialAnimationStep} steps
+ * animation steps to perform in serial
+ * @extends AnimationStep
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * p.animations.new()
+ *   .inParallel([
+ *     p.animations.position({ target: [1, 0], duration: 2 }),
+ *     p.animations.scale({ target: 2, duration: 2 }),
+ *   ])
+ *   .start();
+ *
+ * @example
+ * // One of the parallel steps is a series of steps
+ * p.animations.new()
+ *   .delay(1)
+ *   .inParallel([
+ *     p.animations.builder()
+ *       .scale({ target: 0.5, duration: 1 })
+ *       .scale({ target: 2, duration: 1 })
+ *       .scale({ target: 1, duration: 2 }),
+ *     p.animations.color({ target: [0, 0, 1, 1], duration: 4 }),
+ *     p.animations.rotation({ target: Math.PI, duration: 4 }),
+ *   ])
+ *   .start();
+ * @group Animation
+ */
+export declare class ParallelAnimationStep extends AnimationStep {
+    steps: Array<AnimationStep>;
+    /**
+     * @hideconstructor
+     */
+    constructor(stepsOrOptionsIn?: Array<AnimationStep | null> | OBJ_ParallelAnimationStep, ...optionsIn: Array<OBJ_ParallelAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    setTimeDelta(delta: number | null | undefined): void;
+    with(step: AnimationStep): this;
+    setTimeSpeed(oldSpeed: number, newSpeed: number, now: number): void;
+    nextFrame(now: number, speed?: number): number | null;
+    finishIfZeroDuration(): void;
+    startWaiting(): void;
+    start(startTime?: AnimationStartTime | null): void;
+    finish(cancelled?: boolean, force?: 'complete' | 'freeze' | null): void;
+    getTotalDuration(): number | null;
+    getRemainingTime(now: number): number | null;
+    _dup(): ParallelAnimationStep;
+}
+export declare function inParallel(stepsOrOptionsIn?: Array<AnimationStep | null> | OBJ_ParallelAnimationStep, ...optionsIn: Array<OBJ_ParallelAnimationStep>): ParallelAnimationStep;

package/types/js/figure/Animation/AnimationStep/SerialAnimationStep.d.ts

@@ -0,0 +1,84 @@
+import type { OBJ_AnimationStep } from '../AnimationStep';
+import AnimationStep from '../AnimationStep';
+import type { AnimationStartTime } from '../AnimationManager';
+/**
+ * Serial animation step options object
+ *
+ * @extends OBJ_AnimationStep
+ * @property {Array<AnimationStep>} [steps] animation steps to execute in series
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_SerialAnimationStep = {
+    steps?: Array<AnimationStep>;
+} & OBJ_AnimationStep;
+/**
+ * Execute an array of {@link AnimationStep}s in series.
+ *
+ * ![](./apiassets/serial_animation.gif)
+ *
+ * Often the {@link AnimationBuilder} class which extends
+ * `SerialAnimationStep` can be used to create serial animations
+ * in a more clean way.
+ *
+ * @param {Array<AnimationStep> | OBJ_SerialAnimationStep} steps
+ * animation steps to perform in serial
+ * @extends AnimationStep
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Using a SerialAnimation step can be cumbersome, but
+ * // can be useful if modularizing animations between files
+ * const Rot = Fig.Animation.RotationAnimationStep;
+ * const Delay = Fig.Animation.DelayAnimationStep;
+ * const Pos = Fig.Animation.PositionAnimationStep;
+ *
+ * const series = new Fig.Animation.SerialAnimationStep([
+ *   new Rot({ element: p, target: Math.PI / 2, duration: 2 }),
+ *   new Delay({ duration: 0.2 }),
+ *   new Rot({ element: p, target: Math.PI, duration: 2 }),
+ *   new Delay({ duration: 0.2 }),
+ *   new Rot({ element: p, target: 0, direction: -1, duration: 1.3, progression: 'easein' }),
+ *   new Pos({ element: p, target: [1, 0], duration: 2, progression: 'easeout' }),
+ * ]);
+ *
+ * p.animations.animations.push(series);
+ * p.animations.start()
+ *
+ * @example
+ * // Same animation but with `AnimationBuilder` (which is an extension of
+ * // `SerialAnimationStep`)
+ * p.animations.new()
+ *   .rotation({ target: Math.PI / 2, duration: 2 })
+ *   .delay(0.2)
+ *   .rotation({ target: Math.PI, duration: 2 })
+ *   .delay(0.2)
+ *   .rotation({ target: 0, duration: 1, direction: -1, progression: 'easein' })
+ *   .position({ target: [1, 0], duration: 2, progression: 'easeout' })
+ *   .start();
+ * @group Animation
+ */
+export declare class SerialAnimationStep extends AnimationStep {
+    steps: Array<AnimationStep>;
+    index: number;
+    /**
+     * @hideconstructor
+     */
+    constructor(stepsOrOptionsIn?: Array<AnimationStep> | OBJ_SerialAnimationStep, ...optionsIn: Array<OBJ_SerialAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    setTimeDelta(delta: number | null | undefined): void;
+    then(step: AnimationStep | null | undefined): this;
+    startWaiting(): void;
+    start(startTime?: AnimationStartTime | null): void;
+    finishIfZeroDuration(startIndex?: number): void;
+    startStep(startTime?: AnimationStartTime | null): void;
+    setTimeSpeed(oldSpeed: number, newSpeed: number, now: number): void;
+    nextFrame(now: number, speed?: number): number | null;
+    finish(cancelled?: boolean, force?: 'complete' | 'freeze' | null): void;
+    getTotalDuration(): number | null;
+    getRemainingTime(now: number): number | null;
+    _dup(): SerialAnimationStep;
+}
+export declare function inSerial(stepsOrOptionsIn?: Array<AnimationStep> | OBJ_SerialAnimationStep, ...optionsIn: Array<OBJ_SerialAnimationStep>): SerialAnimationStep;

package/types/js/figure/Animation/AnimationStep/TriggerStep.d.ts

@@ -0,0 +1,106 @@
+import type { OBJ_AnimationStep } from '../AnimationStep';
+import AnimationStep from '../AnimationStep';
+import type { AnimationStartTime } from '../AnimationManager';
+/**
+ * {@link TriggernAnimationStep} options object
+ *
+ * @extends OBJ_AnimationStep
+ *
+ * @property {string | function(any): number | void} callback if desired, return
+ * a number from `callback` to update the duration of the trigger animation
+ * step. Doing so will make any previous calculations of remaining animation
+ * time incorrect. Make sure to initialize this step with a non-zero duration
+ * for this to work.
+ * @property {any} [payload] payload to pass to callback (`null`)
+ * @property {FigureElement} element {@link FigureElement} to associate with
+ * callback - if the `callback` is a string then this element's
+ * {@link FunctionMap} will be searched for the corresponding function
+ *
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_TriggerAnimationStep = {
+    callback?: Function;
+    payload?: any;
+    setToEnd?: string | Function;
+} & OBJ_AnimationStep;
+/**
+ * Trigger Animation Step
+ *
+ * ![](./apiassets/trigger_animation.gif)
+ *
+ * A trigger step executes a custom function
+ *
+ * A `delay` will delay the triggering of the custom function
+ * while `duration` will pad time at the end of the trigger before
+ * the animation step finishes.
+ *
+ * @extends AnimationStep
+ * @param {OBJ_TriggerAnimationStep | function(): void} options
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple trigger
+ * p.animations.new()
+ *   .position({ target: [1, 0], duration: 2 })
+ *   .trigger(() => { console.log('arrived at (1, 0)') })
+ *   .position({ target: [0, 0], duration: 2 })
+ *   .trigger(() => { console.log('arrived at (0, 0)') })
+ *   .start();
+ *
+ * @example
+ * // Trigger with delay, duration and payload
+ * const printPosition = (pos) => {
+ *   console.log(`arrived at ${pos}`);
+ * };
+ *
+ * p.animations.new()
+ *   .position({ target: [1, 0], duration: 2 })
+ *   .trigger({
+ *     delay: 1,
+ *     callback: printPosition,
+ *     payload: '(1, 0)',
+ *     duration: 1,
+ *   })
+ *   .position({ target: [0, 0], duration: 2 })
+ *   .trigger({ callback: printPosition, payload: '(0, 0)' })
+ *   .start();
+ *
+ * @example
+ * // Different ways to create a stand-alone step
+ * const step1 = p.animations.trigger({
+ *   callback: () => { console.log('arrived at (1, 0)') },
+ * });
+ * const step2 = new Fig.Animation.TriggerAnimationStep({
+ *   callback: () => { console.log('arrived at (0, 0)') },
+ * });
+ *
+ * p.animations.new()
+ *   .position({ target: [1, 0], duration: 2 })
+ *   .then(step1)
+ *   .position({ target: [0, 0], duration: 2 })
+ *   .then(step2)
+ *   .start();
+ * @group Animation
+ */
+export declare class TriggerAnimationStep extends AnimationStep {
+    callback: (string | Function) | null;
+    payload: Record<string, any> | null | undefined;
+    setToEndCallback: (string | Function) | null;
+    customProperties: Record<string, any>;
+    autoDuration: boolean;
+    /**
+     * @hideconstructor
+     */
+    constructor(triggerOrOptionsIn?: Function | OBJ_TriggerAnimationStep, ...optionsIn: Array<OBJ_TriggerAnimationStep>);
+    fnExec(idOrFn: string | Function | null, ...args: any): any;
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    setFrame(): void;
+    start(startTime?: AnimationStartTime | null): void;
+    setToEnd(): void;
+    _dup(): TriggerAnimationStep;
+}
+export declare function trigger(triggerOrOptionsIn?: Function | OBJ_TriggerAnimationStep, ...optionsIn: Array<OBJ_TriggerAnimationStep>): TriggerAnimationStep;

package/types/js/figure/Animation/AnimationStep.d.ts

@@ -0,0 +1,110 @@
+import type { FigureElement } from '../Element';
+import { FunctionMap } from '../../tools/FunctionMap';
+import TimeKeeper from '../TimeKeeper';
+import type { AnimationStartTime } from './AnimationManager';
+/**
+ * Animation Step options object
+ *
+ * @property {number} [duration] in seconds (`0`)
+ * @property {number} [delay] delay before animation starts in seconds (`0`)
+ * @property {string} [name] animation name identifier (a random string)
+ * @property {null | (boolean) => void} [onFinish] called when animation is
+ * finished - a `true` parameter is passed to the callback if the animation was
+ * cancelled
+ * @property {boolean} [removeOnFinish] `true` to remove the animation from the
+ * animation manager when it is finished (`true`)
+ * @property {null | boolean} [completeOnCancel] `true` to skip to end of
+ * animation on cancel (`null`)
+ * @property {number} [precision] precision to do calculations to (`8`)
+ * @property {TimeKeepr} [timeKeeper] animations need to be tied to a time
+ * reference. If this is not supplied, then the default browser time reference
+ * performance.now will be used and methods with {@link TypeWhen} parameters
+ * will allow only `'now'` and `'nextFrame'` and not `'lastFrame'`, `'syncNow'`.
+ * When the animation step is created from an element in a figure (using
+ * `element.animations` or `element.animations.new()`), then the
+ * animation step will automatically inherit the figure's TimeKeeper.
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_AnimationStep = {
+    onFinish?: ((cancelled: boolean) => void) | null;
+    completeOnCancel?: boolean | null;
+    removeOnFinish?: boolean;
+    name?: string;
+    duration?: number;
+    delay?: number;
+    precision?: number;
+    timeKeeper?: TimeKeeper | null;
+};
+/**
+ * Animation step base class. All animation steps extend this class.
+ *
+ * @property {number} duration in seconds
+ * @property {number} startDelay delay before animation starts in seconds
+ * @property {string} name animation name identifier
+ * @property {null | (boolean) => void} [onFinish] called when animation is
+ * finished - a `true` parameter is passed to the callback if the animation was
+ * cancelled
+ * @property {null | boolean} [completeOnCancel] `true` to skip to end of
+ * animation on cancel
+ * @property {boolean} [removeOnFinish] `true` to remove the animation from the
+ * animation manager when it is finished (`true`)
+ * @property {number} [precision] precision to do calculations to (`8`)
+ * @property {'animating' | 'waitingToStart' | 'idle' | 'finished'} state
+ * @group Misc Animation
+ */
+export default class AnimationStep {
+    startTime: number | null | undefined;
+    duration: number;
+    onFinish: (string | ((cancelled: boolean) => void)) | null | undefined;
+    completeOnCancel: boolean | null | undefined;
+    state: 'animating' | 'waitingToStart' | 'idle' | 'finished';
+    startTimeOffset: number;
+    removeOnFinish: boolean;
+    name: string;
+    startDelay: number;
+    beforeFrame: ((percent: number) => void) | null | undefined;
+    afterFrame: ((percent: number) => void) | null | undefined;
+    _stepType: string;
+    fnMap: FunctionMap;
+    precision: number;
+    timeKeeper: TimeKeeper | null;
+    element: FigureElement | null | undefined;
+    constructor(optionsIn?: OBJ_AnimationStep);
+    _fromDef(definition: Record<string, any>, getElement?: ((name: string) => FigureElement) | null): this;
+    fnExec(idOrFn: string | Function | null, ...args: any): any;
+    setTimeDelta(delta: number | null | undefined): void;
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    _state(options: Record<string, any>): {
+        f1Type: string;
+        state: Record<string, any>;
+    };
+    _fromState(state: Record<string, any>, getElement: ((name: string) => FigureElement) | null | undefined, timeKeeper: TimeKeeper): this;
+    setTimeSpeed(oldSpeed: number, newSpeed: number, now: number): void;
+    nextFrame(now: number, speed?: number): number | null;
+    /**
+     * Get remaining duration of the animation.
+     * @param {number} now define this if you want remaining duration from a
+     * custom time
+     */
+    getRemainingTime(now: number): number | null;
+    getTotalDuration(): number | null;
+    setFrame(deltaTime: number): void;
+    startWaiting(): void;
+    /**
+     * Start animation
+     * @param {AnimationStartTime} startTime
+     */
+    start(startTime?: AnimationStartTime | null): void;
+    finishIfZeroDuration(): void;
+    setToEnd(): void;
+    finish(cancelled?: boolean, force?: 'complete' | 'freeze' | null): void;
+    cancelledWithNoComplete(): void;
+    cancel(force?: 'complete' | 'freeze' | null): void;
+    _dup(): AnimationStep;
+    whenFinished(callback: string | ((cancelled: boolean) => void)): this;
+    ifCanceledThenComplete(): this;
+    ifCancelled(then?: 'complete' | 'freeze'): this;
+    ifCanceledThenStop(): this;
+}

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

@@ -0,0 +1,9 @@
+declare class DrawContext2D {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    ratio: number;
+    constructor(canvas: HTMLCanvasElement);
+    resize(): void;
+    _dup(): this;
+}
+export default DrawContext2D;

package/types/js/figure/DrawingObjects/DrawingObject.d.ts

@@ -0,0 +1,45 @@
+import { Point } from '../../tools/g2';
+import type { Type3DMatrix } from '../../tools/m3';
+import type Scene from '../../tools/geometry/scene';
+import type { TypeColor } from '../../tools/types';
+import type { CPY_Step } from '../geometries/copy/copy';
+import type WebGLInstance from '../webgl/webgl';
+/**
+ * Drawing Object
+ *
+ * Manages drawing an element to a WebGL or Context 2D canvas. Can also
+ * be used to manage a HTML element on the screen.
+ *
+ * @property {Array<Array<Point>>} border each array of points defines a
+ * closed boundary or border of the element. An element may have multiple
+ * closed borders. A border defines where a shape can be touched, or how it
+ * bounces of figure boundaries
+ * @see {@link FigureElementPrimitive}
+ * @group Misc Figure Element
+ */
+declare class DrawingObject {
+    location: Point;
+    border: Array<Array<Point>>;
+    textBorder: Array<Array<Point>>;
+    textBorderBuffer: Array<Array<Point>>;
+    type: string;
+    state: 'loading' | 'loaded';
+    constructor();
+    _dup(): this;
+    setText(textOrOptions: string | Record<string, any>, index?: number): void;
+    update(options: Record<string, any>): void;
+    getCanvas(): any;
+    drawWithTransformMatrix(scene: Scene, transformMatrix: Type3DMatrix, color: TypeColor, numPoints: number, targetTexture?: boolean): void;
+    getLocation(transformMatrix?: Type3DMatrix | null): Point;
+    getPointCountForAngle(): number;
+    updateVertices(vertices: Array<number>): void;
+    updateBuffer(name: string, data: Array<number>): void;
+    updateUniform(uniformName: string, value: number | Array<number>): void;
+    getUniform(uniformName: string): void;
+    cleanup(): void;
+    change(drawingPrimitive: any, copy?: Array<CPY_Step>): void;
+    _getStateProperties(): never[];
+    _state(options: Record<string, any>): Record<string, any>;
+    init(webgl: WebGLInstance): void;
+}
+export default DrawingObject;