figureone 0.15.10 → 1.0.0

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

@@ -0,0 +1,711 @@
+import WebGLInstance from './webgl/webgl';
+import { Point, Transform } from '../tools/g2';
+import Scene from '../tools/geometry/scene';
+import type { OBJ_Scene } from '../tools/geometry/scene';
+import type { TypeParsableRect, TypeParsablePoint } from '../tools/g2';
+import type { Type3DMatrix } from '../tools/m3';
+import { FunctionMap } from '../tools/FunctionMap';
+import { NotificationManager } from '../tools/tools';
+import { FigureElementCollection, FigureElement } from './Element';
+import type { OBJ_AddElement, TypeElementPath } from './Element';
+import TimeKeeper from './TimeKeeper';
+import { Recorder } from './Recorder/Recorder';
+import Gesture from './Gesture';
+import type { TypeParsablePlane } from '../tools/geometry/Plane';
+import DrawContext2D from './DrawContext2D';
+import FigurePrimitives from './FigurePrimitives/FigurePrimitives';
+import type { OBJ_Polyline } from './FigurePrimitives/FigurePrimitiveTypes2D';
+import FigureCollections from './FigureCollections/FigureCollections';
+import AnimationManager from './Animation/AnimationManager';
+import type { OBJ_ScenarioVelocity } from './Animation/AnimationStep/ElementAnimationStep/ScenarioAnimationStep';
+import type { TypeColor, OBJ_Font } from '../tools/types';
+import type { COL_SlideNavigator } from './FigureCollections/SlideNavigator';
+import type FigureElementPrimitiveGesture from './FigurePrimitives/FigureElementPrimitiveGesture';
+import FontManager from './FontManager';
+import type { OBJ_FormattedText } from './FigureCollections/Text';
+/**
+ * Space Transforms
+ *
+ * @property {Transform} glToFigure
+ * @property {Transform} figureToGL
+ * @property {Transform} pixelToFigure
+ * @property {Transform} figureToPixel
+ * @property {Transform} pixelToGL
+ * @property {Transform} glToPixel
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_SpaceTransforms = {
+    glToFigure: Transform;
+    figureToGL: Transform;
+    pixelToFigure: Transform;
+    figureToPixel: Transform;
+    pixelToGL: Transform;
+    glToPixel: Transform;
+    glToPixelMatrix: Type3DMatrix;
+    figureToGLMatrix: Type3DMatrix;
+    figureToPixelMatrix: Type3DMatrix;
+};
+export type OBJ_FigureLimits = {
+    x: {
+        min: number;
+        max: number;
+    };
+    y: {
+        min: number;
+        max: number;
+    };
+    z: {
+        min: number;
+        max: number;
+    };
+};
+export type OBJ_FigureForElement = {
+    animateNextFrame: (draw?: boolean | null, fromWhere?: string | null) => void;
+    animationFinished: () => void;
+    recorder: Recorder;
+    timeKeeper: TimeKeeper;
+    notifications: NotificationManager;
+    pixelToGL: (p: Point) => Point;
+    preventDefault: () => void;
+};
+/**
+  * Figure options object
+  * @property {string} [htmlId] HTML `div` tag `id` to tie figure to (`"figureOneContainer"`)
+  * @property {OBJ_Scene | TypeParsableRect} [scene] define 2D or 3D scene. 3D
+  * can be orthographic or perspective projection, and include camera position
+  * and lighting definition. A 2D scene can be defined using `left`, `right`,
+  * `bottom` and `top`, or the short hand rectangle definition.
+  * @property {TypeColor} [color] default shape color (`[0, 0, 0, 1]`)
+  * @property {OBJ_Font} [font] default shape font (`{ family: 'Helvetica,
+  * size: 0.2, style: 'normal', weight: 'normal' }`)
+  * @property {number} [lineWidth] default shape line width
+  * @property {number} [length] default shape primary dimension
+  * @property {TypeColor} [backgroundColor] background color for the figure.
+  * Use [r, g, b, 1] for opaque and [0, 0, 0, 0] for transparent.
+ * @interface
+ * @group Figure
+ */
+export type OBJ_Figure = {
+    htmlId?: string;
+    scene?: OBJ_Scene | TypeParsableRect;
+    color?: TypeColor;
+    font?: OBJ_Font;
+    lineWidth?: number;
+    length?: number;
+    backgroundColor?: number;
+};
+/**
+ * Primary Figure class.
+ *
+ * A figure will attach a WebGL canvas and 2D canvas
+ * to the html `div` element with id `"figureOneContainer"`.
+ *
+ * The figure creates and manages all drawing elements, renders the drawing
+ * elements on a browser's animation frames and listens for guestures from the
+ * user.
+ *
+ * The figure also has a recorder, allowing it to record and playback states,
+ * and gestures.
+ *
+ * To attach to a different `div`, use the `htmlId` property in the class
+ * constructor.
+ *
+ * If a figure is paused, then all drawing element animations will
+ * also be paused.
+ *
+ * `Figure` has a number of convenience methods for creating drawing elements
+ * and useful transforms for converting between the different spaces (e.g.
+ * pixel, GL, figure).
+ *
+ * Notifications - The notification manager property `notifications` will
+ * publish the following events:
+ * - `beforeDraw`: published before a frame is drawn
+ * - `afterDraw`: published after a frame is drawn
+ * - `resize`: published after a resize event, but before frame drawing
+ *
+ * @class
+ * @param {OBJ_Figure} options
+ * @property {FigurePrimitives} primitives create figure primitives such
+ * as shapes, lines and grids
+ * @property {FigureCollections} collections create figure collections such
+ * as advanced lines, shapes, equations and plots
+ * @property {NotificationManager} notifications notification manager for
+ * element
+ * @property {FontManager} fonts watches and reports on font availability
+ *
+ * @example
+ * // Simple html and javascript example to create a figure, and add a
+ * // hexagon.
+ * //
+ * // For additional examples, see https://github.com/airladon/FigureOne
+ * //
+ * // Two files `index.html` and `index.js` in the same directory
+ *
+ * // index.html
+ * <!doctype html>
+ * <html>
+ * <body>
+ *     <div id="figureOneContainer" style="width: 800px; height: 800px; background-color: white;">
+ *     </div>
+ *     <script type="text/javascript" src='https://cdn.jsdelivr.net/npm figureone@0.15.10/figureone.min.js'></script>
+ *     <script type="text/javascript" src='./index.js'></script>
+ * </body>
+ * </html>
+ *
+ * // index.js
+ * const figure = new Fig.Figure({ scene: [-1, -1, 1, 1 ]});
+ * figure.add(
+ *   {
+ *     name: 'p',
+ *     make: 'polygon',
+ *     radius: 0.5,
+ *     sides: 6,
+ *   },
+ * );
+ *
+ * @example
+ * // Alternately, an element can be added programatically
+ * // index.js
+ * const figure = new Fig.Figure({ scene: [-1, -1, 1, 1 ]});
+ * const hex = figure.shapes.polygon({
+ *   radius: 0.5,
+ *   sides: 6,
+ * });
+ * figure.add('hexagon', hex);
+ * @group Figure
+ */
+declare class Figure {
+    htmlId: string;
+    canvasLow: HTMLCanvasElement;
+    canvasOffscreen: HTMLCanvasElement;
+    textCanvasLow: HTMLCanvasElement;
+    textCanvasOffscreen: HTMLCanvasElement;
+    container: HTMLElement;
+    draw2DLow: DrawContext2D;
+    draw2DOffscreen: DrawContext2D;
+    htmlCanvas: HTMLElement;
+    webglLow: WebGLInstance;
+    webglOffscreen: WebGLInstance;
+    gestureCanvas: HTMLElement;
+    elements: FigureElementCollection;
+    timeKeeper: TimeKeeper;
+    recorder: Recorder;
+    gesture: Gesture;
+    beingMovedElement: null | FigureElement;
+    beingTouchedElement: null | FigureElement | FigureElementPrimitiveGesture;
+    previousCursorPoint: Point;
+    originalScalePoint: Point | null;
+    stateTime: DOMHighResTimeStamp;
+    shapes: FigurePrimitives;
+    shapesLow: any;
+    primitives: FigurePrimitives;
+    collections: FigureCollections;
+    collectionsLow: FigureCollections;
+    backgroundColor: Array<number>;
+    fontScale: number;
+    lastDrawTime: number;
+    drawQueued: boolean;
+    waitForFrames: number;
+    scrolled: boolean;
+    scrollingFast: boolean;
+    scrollTimeoutId: any;
+    drawTimeoutId: any;
+    oldScroll: number;
+    fromWhere: string;
+    oldWidth: number;
+    drawAnimationFrames: number;
+    defaultColor: Array<number>;
+    defaultDimColor: Array<number>;
+    defaultFont: OBJ_Font;
+    defaultLineWidth: number;
+    defaultLength: number;
+    animationFinishedCallback: string | (() => void) | null | undefined;
+    gesturePreventDefault: 'prevent' | 'allow' | 'ifTouched';
+    isTouchDevice: boolean;
+    fnMap: FunctionMap;
+    moveBuffer: Array<[Point, Point]>;
+    isPaused: boolean;
+    pauseTime: number;
+    cursorShown: boolean;
+    cursorElementName: string;
+    slideNavigatorElementName: string;
+    isTouchDown: boolean;
+    setStateCallback: string | (() => void) | null | undefined;
+    notifications: NotificationManager;
+    mockPreviousTouchPoint: Point;
+    shortcuts: Record<string, any>;
+    nextDrawTimer: number | null;
+    nextDrawTimerStart: number;
+    nextDrawTimerDuration: number;
+    focused: boolean;
+    frameRate: {
+        information: null | Array<string | OBJ_FormattedText>;
+        history: Array<Array<number>>;
+        num: number;
+    };
+    pixelSpace: {
+        x: {
+            min: number;
+            span: number;
+        };
+        y: {
+            min: number;
+            span: number;
+        };
+    };
+    defaultPrevented: boolean;
+    mousePixelPosition: null | Point;
+    lostContextMessage: HTMLElement;
+    scene: Scene;
+    fonts: FontManager;
+    animations: AnimationManager;
+    state: {
+        pause: 'paused' | 'preparingToPause' | 'preparingToUnpause' | 'unpaused';
+        preparingToStop: boolean;
+        preparingToSetState: boolean;
+    };
+    ext: any;
+    constructor(options?: OBJ_Figure);
+    fontsLoaded(): void;
+    /**
+     * Add a {@link CollectionsSlideNavigator} that controls the root collection of this figure.
+     *
+     * @return {CollectionsSlideNavigator}
+     */
+    addSlideNavigator(options: COL_SlideNavigator): any;
+    /**
+     * Get the {@link CollectionsSlideNavigator} for the figure (will only return
+     * if the navigator was added with `figure.addSlideNavigator`).
+     *
+     * @return {CollectionsSlideNavigator}
+     */
+    getSlideNavigator(): any;
+    /**
+     * Add cursor for recording interactive videos. Cursor will be hidden when
+     * first added.
+     * @return {FigureElement} cursor element
+     */
+    addCursor(options: Record<string, any>): any;
+    /**
+     * Get cursor element.
+     @return {FigureElement} cursor element
+     */
+    getCursor(): any;
+    bindRecorder(): void;
+    setDefaultLineWidth(userInputLineWidth: number | null): void;
+    setDefaultLength(userInputLength: number | null): void;
+    scrollEvent(): void;
+    enableScrolling(): void;
+    disableScrolling(): void;
+    init(webgl: WebGLInstance): void;
+    getState(options: {
+        precision?: number;
+        ignoreShown?: boolean;
+        min?: boolean;
+    }): Record<string, any>;
+    setState(stateIn: Record<string, any>, optionsIn?: {
+        how: 'animate' | 'dissolve' | 'instant';
+        duration?: number | {
+            dissovlveOut?: number | null | undefined;
+            dissovlveIn?: number | null | undefined;
+            delay?: number | null | undefined;
+        };
+        velocity?: OBJ_ScenarioVelocity;
+        maxDuration?: number;
+        zeroDurationThreshold?: boolean;
+        allDurationsSame?: boolean;
+    } | 'dissolve' | 'animate' | 'instant'): void;
+    animateToState(state: Record<string, any>, optionsIn: Record<string, any> | undefined, done: string | (() => void) | null | undefined, startTime?: number | 'now' | 'prevFrame' | 'nextFrame' | null | undefined): void;
+    dissolveToState(optionsIn: {
+        state: Record<string, any>;
+        dissolveOutDuration: number;
+        dissolveInDuration: number;
+        delay: number;
+        done: string | (() => void) | null | undefined;
+        startTime: number | 'now' | 'prev' | 'next' | null | undefined;
+    }): void;
+    dissolveInToState(optionsIn: {
+        state: Record<string, any>;
+        duration: number;
+        done: string | (() => void) | null | undefined;
+        startTime: number | 'now' | 'prev' | 'next' | null | undefined;
+    }): void;
+    /**
+     * Add a figure element to the root collection of the figure.
+     *
+     * If adding an array of elements, then the added elements will be returned
+     * in an array (even if only one element is added). If not adding an array,
+     * then that single element will be returned.
+     *
+     * @param {string | FigureElement | OBJ_AddElement | Array<FigureElement | OBJ_AddElement>} nameOrElementOrElementDefinition
+      reference name of element
+     * @param {FigureElement} elementToAdd element to add
+     *
+     * @return {Array<FigureElement> | FigureElement} added element, or array of
+     * added elements
+     *
+     * @example
+     * // Add name and element
+     * const element = figure.primitives.polygon({ radius: 1 });
+     * figure.add('name', element);
+     *
+     * @example
+     * // Element only (name will be autogenerated)
+     * const element = figure.primitives.polygon({ radius: 1 });
+     * figure.add(element);
+     *
+     * @example
+     * // Element definition (if no name is provided, then name will
+     * // be auto generated)
+     * figure.add({
+     *   make: 'polygon',
+     *   radius: 1,
+     * });
+     *
+     * @example
+     * // Array of elements
+     * const element = figure.primitives.polygon({ radius: 1 });
+     * figure.add([
+     *   element,
+     *   {
+     *     make: 'polygon',
+     *     radius: 0.2,
+     *     color: [0, 0, 1, 1],
+     *   },
+     * ]);
+     */
+    add(nameOrElementOrElementDefinition: string | FigureElement | OBJ_AddElement | Array<FigureElement | OBJ_AddElement>, elementToAdd?: FigureElement | null | undefined): any;
+    /**
+     * Get element from an element path with '.' separators.
+     *
+     * For instance, if a collection has a child collection 'a', which
+     * has a child primitive 'b', then the path would be: 'a.b'.
+     *
+     * @see <a href="#figureelementcollectiongetelement">element.getElement</a>
+     *
+     * @param {null | string} elementPath
+     * @return {FigureElement | null } element at path. If `elementPath`
+     * is `null`, then the figure's base collection is returned. If `elementPath`
+     * is invalid then `null` is returned.
+     *
+     * @example
+     * // Get all the elements from a figure
+     * figure.add(
+     *   {
+     *     name: 'c',
+     *     make: 'collection',
+     *     elements: [
+     *       {
+     *         name: 'tri',
+     *         make: 'triangle',
+     *         height: 0.4,
+     *         width: 0.4,
+     *       },
+     *       {
+     *         name: 'text',
+     *         make: 'text',
+     *         text: 'triangle',
+     *         position: [0, -0.4],
+     *         xAlign: 'center',
+     *       },
+     *     ],
+     *   },
+     * );
+     *
+     * const c = figure.getElement('c');
+     * // Elements within collections can be found with dot notation
+     * const tri = figure.getElement('c.tri');
+     * // Or the collection can be queried directly
+     * const text = c.getElement('text');
+     */
+    getElement(elementName: string): any;
+    /**
+     * Returns an array of result from
+     * [getElement](#figureelementcollectiongetelement) calls on an
+     * array of paths.
+     *
+     * @param {TypeElementPath} children
+     * @return {Array<FigureElement>} Array of
+     * [getElement](#figureelementcollectiongetelement) results
+     */
+    getElements(children: TypeElementPath): FigureElement[];
+    /**
+     * Returns an array of result from
+     * [getElement](#figureelementcollectiongetelement) calls on an
+     * array of paths. Same as `getElements` but more succinct
+     *
+     * @param {TypeElementPath} children
+     * @return {Array<FigureElement>} Array of
+     * [getElement](#figureelementcollectiongetelement) results
+     */
+    get(children: TypeElementPath): any;
+    getShapes(): FigurePrimitives;
+    getObjects(): FigureCollections;
+    sizeHtmlText(): void;
+    loseContext(): void;
+    contextLost(event: WebGLContextEvent): void;
+    contextRestored(): void;
+    restoreContext(): void;
+    destroy(): void;
+    /**
+     * Recreate all automatically generated atlases.
+     *
+     * This would be typically used after loading custom fonts.
+     */
+    recreateAtlases(): void;
+    recreateAtlas(atlasID: string): void;
+    getAtlases(): {
+        [atlasId: string]: import("./webgl/Atlas").default;
+    };
+    /**
+     * Return matrix that can convert between 'pixel', 'figure' and 'gl' spaces.
+     *
+     * These matrices would be generally used to transform points between spaces.
+     * `transformPoint` can be used to do this for individual points, but if
+     * converting many points, then generating the transform matrix once and
+     * applying it to each point can be more efficient.
+     *
+     * Depending on the type of figure scene, not all space combinations are
+     * possible.
+     *
+     * For 2D scenes, all combinations are possible.
+     *
+     * For 3D scenes:
+     * - 'pixel' to 'gl' will transform a point in pixel space to a point on the
+     *    XY plane at Z = 0 in GL space.
+     * - 'pixel' to 'figure' is not valid. Use `transformPoint` instead where a
+     *   plane can be defined to intersect with.
+     * - Conversions between 'gl' and 'figure' are only valid for 'orthographic'
+     *   projections. For perspective projections, the transform matrix is not
+     *   general and depends coordinates of the point to be transformed. Use
+     *   `transformPoint` for each point to be transformed.
+     */
+    spaceTransformMatrix(from: 'figure' | 'gl' | 'pixel', to: 'figure' | 'gl' | 'pixel'): Type3DMatrix;
+    /**
+     * Transform a point between 'figure', 'gl' and 'pixel' spaces.
+     *
+     * `plane` is only needed when converting from pixel space (a 2D space) to
+     * 'figure' space or 'gl' space (a 3D space). A ray from the pixel is drawn
+     * into the screen and the intersection with the defined `plane` is returned.
+     *
+     * @param {TypeParsablePoint} point
+     * @param {'figure' | 'gl' | 'pixel'} fromSpace space to convert point from
+     * @param {'figure' | 'gl' | 'pixel'} toSpace space to convert point to
+     * @param {TypeParsablePlane} plane figure space intersection plane for
+     * 'pixel' to 'figure' conversion (default: xy plane at z = 0)
+     */
+    transformPoint(point: TypeParsablePoint, fromSpace: 'figure' | 'gl' | 'pixel', toSpace: 'figure' | 'gl' | 'pixel', plane?: TypeParsablePlane): Point;
+    initialize(): void;
+    initElements(): void;
+    setElements(collection: FigureElementCollection): void;
+    /**
+     * Get remaining animation durations of running animations
+     */
+    getRemainingAnimationTime(nowIn?: number): number | null;
+    setAnimationFinishedCallback(callback: string | (() => void) | null | undefined): void;
+    animationFinished(): void;
+    setFirstTransform(): void;
+    renderAllElementsToTiedCanvases(force?: boolean): void;
+    renderElementToTiedCanvas(elementName: string): void;
+    renderToCanvas(htmlCanvasElementOrId?: string): void;
+    unrenderAll(): void;
+    resize(skipHTMLTie?: boolean): void;
+    getPixelSpace(): void;
+    pixelToGL(pixelPoint: Point): Point;
+    updateHTMLElementTie(): void;
+    /**
+     * Show specific elements within the figure
+     */
+    show(toShow?: TypeElementPath): void;
+    /**
+     * Hide specific elements within the figure
+     */
+    hide(toShow?: TypeElementPath): void;
+    /**
+     * Show specific elements within a figure, while hiding all others
+     */
+    showOnly(toShow?: TypeElementPath): void;
+    /**
+     * Set scenarios of all elements with scenarioName defined
+     */
+    setScenarios(scenarioName: string, onlyIfVisible?: boolean): void;
+    toggleCursor(): void;
+    showCursor(show: 'up' | 'down' | 'hide', position?: Point | null | undefined): void;
+    isCursorShown(): any;
+    mousePosition(pixelPoint: Point): void;
+    preventDefault(): void;
+    wheelHandler(deltaX: number, deltaY: number, deltaMode: 0x00 | 0x01 | 0x02): boolean;
+    startPinchZoom(touch1ClientPos: Point, touch2ClientPos: Point): void;
+    pinchZoom(touch1ClientPos: Point, touch2ClientPos: Point): void;
+    endPinchZoom(): void;
+    touchDownHandlerClient(clientPoint: Point, eventFromPlayback?: boolean): boolean;
+    touchDownHandler(glPoint: Point, eventFromPlayback?: boolean, autoEvent?: boolean): boolean;
+    selectElement(element: string | FigureElement, glPoint: Point, autoEvent?: boolean): void;
+    flushMoveBuffer(): void;
+    touchUpHandler(autoEvent?: boolean, fromGesture?: boolean): void;
+    setCursor(p: Point, animateNextFrame?: boolean): void;
+    setCursorGLPoint(p: Point, animateNextFrame?: boolean): void;
+    touchFreeHandler(clientPoint: Point): void;
+    rotateElement(element: FigureElement, previousGLPoint: Point, currentGLPoint: Point): void;
+    translateElement(element: FigureElement, previousGLPoint: Point, currentGLPoint: Point): void;
+    scaleElement(element: FigureElement, previousGLPoint: Point, currentGLPoint: Point, type?: 'x' | 'y' | 'z' | ''): void;
+    touchMoveHandlerClient(previousClientPoint: Point, currentClientPoint: Point): boolean;
+    touchMoveHandler(previousGLPoint: Point, currentGLPoint: Point, fromAutoEvent?: boolean): boolean;
+    /**
+     * Stop all animations, movement and pulses in figure.
+     */
+    stop(how?: 'freeze' | 'cancel' | 'complete' | 'animateToComplete' | 'dissolveToComplete'): void;
+    getScene(): Scene;
+    setupAnimations(): void;
+    createFigureElements(): void;
+    setElementsToCollection(collection: FigureElementCollection): void;
+    clearContext(canvasIndex?: number): void;
+    setupForSelectionDraw(canvasIndex?: number): void;
+    getSelectionFromPixel(xPixel: number, yPixel: number, debug?: boolean): FigureElement | null;
+    /**
+     * Debug - 3D Shapes
+     *
+     * Show touchable 3D shapes in figure. This will only last for one animation
+     * frame, so it will not work if an animation is ongoing.
+     *
+     * Note, the shown borders will be for the instant this method is called
+     * only. If animation is ongoing, the shown borders will not move with the
+     * animation. To update the borders, call this method again.
+     */
+    showTouchable(): void;
+    /**
+     * Debug - 2D Shapes
+     *
+     * Show the touchBorders of selected elements in the figure or all
+     * elements in the figure.
+     *
+     * Note, the shown borders will be for the instant this method is called
+     * only. If animation is ongoing, the shown borders will not move with the
+     * animation. To update the borders, call this method again.
+     *
+     * @param {TypeElementPath | null | 'touchable'} element use `null` for all
+     * elements, `touchable` for all touchable elements or define specific
+     * elements to show (`'touchable'`)
+     * @param {Array<TypeColor>} colors array of colors to cycle through for each
+     * shape ([blue, cyan, purple, green, red, yellow, black])
+     */
+    showTouchBorders(element?: TypeElementPath | null | 'touchable', colors?: Array<TypeColor>): void;
+    /**
+     * Debug - 2D Shapes
+     *
+     * Show the borders or touchBorders of selected elements in the figure or all
+     * elements in the figure.
+     *
+     * @param {'border' | 'touchBorder'} border (`'border'`)
+     * @param {TypeElementPath | null | 'touchable'} element use `null` for all
+     * elements, `touchable` for all touchable elements or define specific
+     * elements to show (`null`)
+     * @param {Array<TypeColor>} colors array of colors to cycle through for each
+     * shape ([blue, cyan, purple, green, red, yellow, black])
+     */
+    showBorders(border?: 'border' | 'touchBorder', element?: TypeElementPath | null | 'touchable', colors?: Array<TypeColor>): void;
+    getSelectionFromDraw(glPoint: Point): FigureElement | null;
+    drawNow(time?: number): void;
+    pause(): void;
+    unpause(): void;
+    touchDown(figurePosition: TypeParsablePoint, eventFromPlayback?: boolean, autoEvent?: boolean): void;
+    touchUp(autoEvent?: boolean): void;
+    touchMove(figurePosition: TypeParsablePoint, autoEvent?: boolean): void;
+    clearDrawTimeout(): void;
+    draw(nowIn: number, canvasIndex?: number): void;
+    centerDrawingLens(fromTimeOut?: boolean): void;
+    setDrawTimeout(timerDurationIn?: number): void;
+    focusLost(): void;
+    focusGained(): void;
+    setupDraw(time?: number): void;
+    /**
+     * Force figure to draw on next available animation frame.
+     */
+    animateNextFrame(draw?: boolean, fromWhere?: string): void;
+    /**
+     * Check if any element in the figure is animating.
+     * @return {boolean}
+     */
+    isAnimating(): boolean;
+    clientToPixel(clientLocation: Point): Point;
+    clientsToPixel(clientLocations: Array<Point>): Array<Point>;
+    pixelToClient(pixelLocation: Point): Point;
+    debugShowTouchBorders(elements: TypeElementPath, lineOptions?: OBJ_Polyline, startIndex?: number): void;
+    /**
+     * Sets manual frames.
+     *
+     * Normally, when a browser is ready to refresh the screen it will call
+     * FigureOne to do a draw. The time between frames is not fixed and depends on
+     * a number of factors. This is the most performant way to handle drawing.
+     *
+     * However, when debugging it can be useful to manually trigger a draw frame
+     * with a defined delta time from the last frame.
+     *
+     * This method turns on manual frames. Use `frame` to trigger a draw.
+     */
+    setManualFrames(): void;
+    /**
+     * End manual frames. Reverts drawing to when browser reqeusts it.
+     */
+    endManualFrames(): void;
+    /**
+     * Manually trigger a draw frame with a specified time step (in seconds) from
+     * the last draw frame. Can only be used when `setManualFrames()` has been
+     * called.
+     *
+     * @param {number} timeStep in seconds
+     */
+    frame(timeStep: number): void;
+    /**
+     * Add a frame rate annotation to the figure.
+     *
+     * Each time the browser requests FigureOne to paint the screen, FigureOne
+     * performs two main tasks:
+     * - setup the figure for a draw (setupDraw) - all visible figure elements
+     *   are iterated through and if they are animating or moving then their next
+     *   animation or movement frame is calculated
+     * - draw the figure elements (draw)
+     *
+     * Frame rate is determined by FigureOne's total frame processing time
+     * (setupDraw time + draw time), and how frequently a browser requests
+     * FigureOne to draw a frame.
+     *
+     * The frame rate will not be faster than the browser wants, but it can be
+     * slower if the total frame processing time is too long.
+     *
+     * The frame rate and time durations are reported as both an average, and
+     * worst case (max). The averaging is done over `numFrames` number of frames.
+     *
+     * The screen output is then:
+     * - Ave: F fsp, T ms (S, D)
+     * - Max: F fsp, T ms (S, D)
+     *
+     * Where:
+     * - F: Frames per second
+     * - T: Total frame processing time
+     * - S: setupDraw processing time
+     * - D: draw processing time
+     *
+     * Note: FigureOne only requests animation frame notifications from the
+     * browser when an element is animating or moving. If everything is still,
+     * then the frame rate will be 0.
+     */
+    addFrameRate(numFrames?: number, options?: OBJ_FormattedText): any;
+    addZoomPanControl(options: {
+        zoom?: {
+            min?: number | null;
+            max?: number | null;
+            sensitivity?: number;
+        };
+        pan?: {
+            bounds?: {
+                left?: number | null;
+                bottom?: number | null;
+                right?: number | null;
+                top?: number | null;
+            };
+        };
+    }): void;
+}
+export default Figure;