figureone 0.15.10 → 1.0.0

package/package.json

@@ -1,8 +1,22 @@
 {
   "name": "figureone",
-  "version": "0.15.10",
+  "version": "1.0.0",
   "description": "Draw, animate and interact with shapes, text, plots and equations in Javascript. Create interactive slide shows, and interactive videos.",
   "main": "index.js",
+  "types": "types/index.d.ts",
+  "unpkg": "figureone.min.js",
+  "jsdelivr": "figureone.min.js",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./index.js"
+    }
+  },
+  "files": [
+    "index.js",
+    "figureone.min.js",
+    "types/"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/airladon/figureone.git"

package/types/index.d.ts

@@ -0,0 +1,132 @@
+import * as g2 from './js/tools/g2';
+import * as math from './js/tools/math';
+import * as m2 from './js/tools/m2';
+import * as m3 from './js/tools/m3';
+import * as morph from './js/tools/morph';
+import Figure from './js/figure/Figure';
+import TimeKeeper from './js/figure/TimeKeeper';
+import { Recorder } from './js/figure/Recorder/Recorder';
+import { FunctionMap, GlobalFunctionMap } from './js/tools/FunctionMap';
+import * as color from './js/tools/color';
+import * as html from './js/tools/htmlGenerator';
+import * as misc from './js/tools/tools';
+import * as css from './js/tools/styleSheets';
+import * as lines from './js/figure/geometries/lines/lines';
+import { FigureElement, FigureElementPrimitive, FigureElementCollection } from './js/figure/Element';
+import Scene from './js/tools/geometry/scene';
+import DrawContext2D from './js/figure/DrawContext2D';
+import WebGLInstance from './js/figure/webgl/webgl';
+import DrawingObject from './js/figure/DrawingObjects/DrawingObject';
+import VertexGeneric from './js/figure/DrawingObjects/VertexObject/VertexGeneric';
+import { FigureFont } from './js/figure/DrawingObjects/TextObject/TextObject';
+import HTMLObject from './js/figure/DrawingObjects/HTMLObject/HTMLObject';
+import HTMLEquation from './js/figure/Equation/HTMLEquation';
+import CollectionsAngle from './js/figure/FigureCollections/Angle';
+import CollectionsLine from './js/figure/FigureCollections/Line';
+import CollectionsPolyline from './js/figure/FigureCollections/PolyLine';
+import EquationLabel from './js/figure/FigureCollections/EquationLabel';
+import { Equation } from './js/figure/Equation/Equation';
+import EquationForm from './js/figure/Equation/EquationForm';
+import SlideNavigator from './js/figure/SlideNavigator';
+import type { TypeRotationDirection, TypeParsablePoint } from './js/tools/g2';
+import type { COL_Line, OBJ_LineLabel, TypeLabelledLine } from './js/figure/FigureCollections/Line';
+import type { TypeLabelLocation, TypeLabelSubLocation, TypeLabelOrientation } from './js/figure/FigureCollections/EquationLabel';
+import type { COL_Angle, TypeAngleLabelOptions, TypeLabelledAngle } from './js/figure/FigureCollections/Angle';
+import type { OBJ_Figure } from './js/figure/Figure';
+import type { COL_Polyline, OBJ_PolylinePad } from './js/figure/FigureCollections/PolyLine';
+import * as anim from './js/figure/Animation/Animation';
+export type { TypeRotationDirection, TypeLabelLocation, TypeLabelSubLocation, TypeLabelOrientation, COL_Line, COL_Angle, OBJ_Figure, OBJ_LineLabel, TypeAngleLabelOptions, COL_Polyline, OBJ_PolylinePad, TypeParsablePoint, TypeLabelledAngle, TypeLabelledLine, };
+/**
+ * FigureOne entry point
+ * @module Fig
+ * @global
+ * @property {class} {@link Figure}      - Figure Class
+ */
+declare const Fig: {
+    tools: {
+        math: typeof math;
+        g2: typeof g2;
+        m3: typeof m3;
+        color: typeof color;
+        css: typeof css;
+        html: typeof html;
+        misc: typeof misc;
+        lines: typeof lines;
+        m2: typeof m2;
+        morph: typeof morph;
+    };
+    Figure: typeof Figure;
+    Recorder: typeof Recorder;
+    FunctionMap: typeof FunctionMap;
+    GlobalFunctionMap: typeof GlobalFunctionMap;
+    SlideNavigator: typeof SlideNavigator;
+    FigureElement: typeof FigureElement;
+    FigureElementCollection: typeof FigureElementCollection;
+    FigureElementPrimitive: typeof FigureElementPrimitive;
+    DrawContext2D: typeof DrawContext2D;
+    WebGLInstance: typeof WebGLInstance;
+    DrawingObject: typeof DrawingObject;
+    VertexGeneric: typeof VertexGeneric;
+    FigureFont: typeof FigureFont;
+    HTMLObject: typeof HTMLObject;
+    CollectionsAngle: typeof CollectionsAngle;
+    CollectionsLine: typeof CollectionsLine;
+    CollectionsPolyline: typeof CollectionsPolyline;
+    EquationLabel: typeof EquationLabel;
+    EquationForm: typeof EquationForm;
+    Equation: typeof Equation;
+    HTMLEquation: typeof HTMLEquation;
+    Animation: typeof anim;
+    Scene: typeof Scene;
+    Point: typeof g2.Point;
+    Plane: typeof g2.Plane;
+    Line: typeof g2.Line;
+    Rect: typeof g2.Rect;
+    Transform: typeof g2.Transform;
+    parsePoint: typeof g2.getPoint;
+    LineBounds: typeof g2.LineBounds;
+    RectBounds: typeof g2.RectBounds;
+    RangeBounds: typeof g2.RangeBounds;
+    minAngleDiff: typeof g2.minAngleDiff;
+    getTriangleCenter: typeof g2.getTriangleCenter;
+    polarToRect: typeof g2.polarToRect;
+    rectToPolar: typeof g2.rectToPolar;
+    threePointAngle: typeof g2.threePointAngle;
+    threePointAngleMin: typeof g2.threePointAngleMin;
+    clipAngle: typeof g2.clipAngle;
+    getPoint: typeof g2.getPoint;
+    getPoints: typeof g2.getPoints;
+    getScale: typeof g2.getScale;
+    getLine: typeof g2.getLine;
+    getRect: typeof g2.getRect;
+    getPlane: typeof g2.getPlane;
+    getTransform: typeof g2.getTransform;
+    surfaceGrid: typeof g2.surfaceGrid;
+    cube: typeof g2.cube;
+    sphere: typeof g2.sphere;
+    polygon: typeof g2.polygon;
+    revolve: typeof g2.revolve;
+    surface: typeof g2.surface;
+    cone: typeof g2.cone;
+    cylinder: typeof g2.cylinder;
+    line3: typeof g2.line3;
+    getMaxTimeFromVelocity: typeof g2.getMaxTimeFromVelocity;
+    toNumbers: typeof g2.toNumbers;
+    pointsToNumbers: typeof g2.pointsToNumbers;
+    joinObjects: typeof misc.joinObjects;
+    m3: typeof m3;
+    morph: typeof morph;
+    misc: typeof misc;
+    round: typeof math.round;
+    roundNum: (value: number, precision?: number) => number;
+    range: typeof math.range;
+    randSign: typeof math.randSign;
+    randBool: typeof math.randBool;
+    randInt: typeof math.randInt;
+    rand: typeof math.rand;
+    randElement: typeof math.randElement;
+    randElements: typeof math.randElements;
+    removeRandElement: typeof math.removeRandElement;
+    TimeKeeper: typeof TimeKeeper;
+};
+export default Fig;

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

@@ -0,0 +1,36 @@
+import type { OBJ_PositionAnimationStep } from './AnimationStep/ElementAnimationStep/PositionAnimationStep';
+import PositionAnimationStep from './AnimationStep/ElementAnimationStep/PositionAnimationStep';
+import type { OBJ_ScenarioAnimationStep, OBJ_ScenariosAnimationStep } from './AnimationStep/ElementAnimationStep/ScenarioAnimationStep';
+import ScenarioAnimationStep from './AnimationStep/ElementAnimationStep/ScenarioAnimationStep';
+import type { OBJ_ColorAnimationStep } from './AnimationStep/ElementAnimationStep/ColorAnimationStep';
+import { ColorAnimationStep, DimAnimationStep, UndimAnimationStep, dim, undim } from './AnimationStep/ElementAnimationStep/ColorAnimationStep';
+import type { OBJ_OpacityAnimationStep } from './AnimationStep/ElementAnimationStep/OpacityAnimationStep';
+import { OpacityAnimationStep, DissolveInAnimationStep, dissolveIn, DissolveOutAnimationStep, dissolveOut } from './AnimationStep/ElementAnimationStep/OpacityAnimationStep';
+import type { OBJ_TransformAnimationStep } from './AnimationStep/ElementAnimationStep/TransformAnimationStep';
+import TransformAnimationStep from './AnimationStep/ElementAnimationStep/TransformAnimationStep';
+import type { OBJ_PulseTransformAnimationStep } from './AnimationStep/ElementAnimationStep/PulseTransformAnimationStep';
+import PulseTransformAnimationStep from './AnimationStep/ElementAnimationStep/PulseTransformAnimationStep';
+import type { OBJ_RotationAnimationStep } from './AnimationStep/ElementAnimationStep/RotationAnimationStep';
+import RotationAnimationStep from './AnimationStep/ElementAnimationStep/RotationAnimationStep';
+import type { OBJ_ScaleAnimationStep } from './AnimationStep/ElementAnimationStep/ScaleAnimationStep';
+import ScaleAnimationStep from './AnimationStep/ElementAnimationStep/ScaleAnimationStep';
+import type { OBJ_PulseAnimationStep } from './AnimationStep/ElementAnimationStep/PulseAnimationStep';
+import PulseAnimationStep from './AnimationStep/ElementAnimationStep/PulseAnimationStep';
+import type { OBJ_TriggerAnimationStep } from './AnimationStep/TriggerStep';
+import { TriggerAnimationStep, trigger } from './AnimationStep/TriggerStep';
+import type { OBJ_CustomAnimationStep } from './AnimationStep/CustomStep';
+import { CustomAnimationStep, custom } from './AnimationStep/CustomStep';
+import type { OBJ_ElementAnimationStep } from './AnimationStep/ElementAnimationStep';
+import type { OBJ_ParallelAnimationStep } from './AnimationStep/ParallelAnimationStep';
+import { ParallelAnimationStep, inParallel } from './AnimationStep/ParallelAnimationStep';
+import type { OBJ_SerialAnimationStep } from './AnimationStep/SerialAnimationStep';
+import { SerialAnimationStep, inSerial } from './AnimationStep/SerialAnimationStep';
+import { DelayAnimationStep, delay } from './AnimationStep/DelayStep';
+import type { OBJ_AnimationStep } from './AnimationStep';
+import AnimationStep from './AnimationStep';
+import type { TypeAnimationManagerInputOptions } from './AnimationManager';
+import AnimationManager from './AnimationManager';
+import type { OBJ_AnimationBuilder } from './AnimationBuilder';
+import AnimationBuilder from './AnimationBuilder';
+export type { OBJ_PositionAnimationStep, OBJ_AnimationBuilder, OBJ_ParallelAnimationStep, OBJ_SerialAnimationStep, OBJ_TransformAnimationStep, OBJ_AnimationStep, OBJ_TriggerAnimationStep, OBJ_ColorAnimationStep, OBJ_CustomAnimationStep, TypeAnimationManagerInputOptions, OBJ_RotationAnimationStep, OBJ_ScaleAnimationStep, OBJ_PulseAnimationStep, OBJ_OpacityAnimationStep, OBJ_ScenarioAnimationStep, OBJ_PulseTransformAnimationStep, OBJ_ElementAnimationStep, OBJ_ScenariosAnimationStep, };
+export { PositionAnimationStep, AnimationBuilder, ParallelAnimationStep, SerialAnimationStep, TransformAnimationStep, AnimationStep, DelayAnimationStep, TriggerAnimationStep, inParallel, inSerial, trigger, delay, ColorAnimationStep, DissolveInAnimationStep, dissolveIn, DissolveOutAnimationStep, dissolveOut, CustomAnimationStep, custom, AnimationManager, RotationAnimationStep, ScaleAnimationStep, PulseAnimationStep, OpacityAnimationStep, DimAnimationStep, dim, UndimAnimationStep, undim, ScenarioAnimationStep, PulseTransformAnimationStep, };

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

@@ -0,0 +1,173 @@
+import { FigureElement } from '../Element';
+import type { OBJ_Scenario } from '../Element';
+import type { OBJ_SerialAnimationStep } from './AnimationStep/SerialAnimationStep';
+import type { OBJ_PositionAnimationStep, OBJ_ParallelAnimationStep, OBJ_AnimationStep, OBJ_TriggerAnimationStep, OBJ_ColorAnimationStep, OBJ_CustomAnimationStep, OBJ_TransformAnimationStep, OBJ_RotationAnimationStep, OBJ_ScaleAnimationStep, OBJ_PulseAnimationStep, OBJ_OpacityAnimationStep, OBJ_PulseTransformAnimationStep, AnimationStep, OBJ_ScenarioAnimationStep, OBJ_ElementAnimationStep, OBJ_ScenariosAnimationStep } from './Animation';
+import type { TypeParsablePoint, TypeParsableTransform } from '../../tools/g2';
+import * as animation from './Animation';
+import type { TypeColor } from '../../tools/types';
+/**
+ * Animation builder options object
+ * @extends OBJ_SerialAnimationStep
+ * @property {FigureElement} [element]
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_AnimationBuilder = {
+    element?: FigureElement;
+    customSteps?: Array<{
+        step: (options: Record<string, any>) => AnimationStep;
+        name: string;
+    }>;
+} & OBJ_SerialAnimationStep;
+/**
+ * Animation Builder
+ *
+ * Convenient way to build animation steps in serial. Each step returns the
+ * same builder object, and so chaining in a fluent like API can be achieved.
+ *
+ * @extends SerialAnimationStep
+ * @see <a href="#animationmanagernew">AnimationManager.new</a>
+ *
+ * @example
+ * p.animations.new()
+ *   .delay(1)
+ *   .position({ target: [1, 0], duration: 2 })
+ *   .delay(1)
+ *   .rotation({ target: Math.PI, duration: 2 })
+ *   .start();
+ * @group Animation
+ */
+export default class AnimationBuilder extends animation.SerialAnimationStep {
+    /**
+     * @hideconstructor
+     */
+    constructor(elementOrOptions?: FigureElement | OBJ_AnimationBuilder, ...options: Array<OBJ_AnimationBuilder>);
+    fnExec(idOrFn: string | Function | null, ...args: any): any;
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    /**
+     * Add a custom animation step that uses this element by default
+     * @param {string | ((number) => void) | OBJ_CustomAnimationStep} callbackOrOptions
+     * @return {AnimationBuilder}
+     */
+    custom(callbackOrOptions: string | ((percent: number) => void) | OBJ_CustomAnimationStep): this;
+    /**
+     * Add a rotation animation step that uses this element by default
+     * @param {OBJ_RotationAnimationStep | number} targetOrOptions
+     * @return {AnimationBuilder}
+     */
+    rotation(targetOrOptions: OBJ_RotationAnimationStep | number, ry?: number | null, rz?: number): this;
+    /**
+     * Add a position animation step that uses this element by default
+     * @param {TypeParsablePoint | OBJ_PositionAnimationStep | number} targetOrOptionsOrX
+     * @param {number} y define if `targetOrOptionsOrX` is x (number)
+     * @return {AnimationBuilder}
+     */
+    position(targetOrOptionsOrX: TypeParsablePoint | OBJ_PositionAnimationStep | number, y?: number, z?: number): this;
+    /**
+     * Add a translation animation step that uses this element by default
+     * @param {TypeParsablePoint | OBJ_PositionAnimationStep | number} targetOrOptionsOrX
+     * @param {number} y define if `targetOrOptionsOrX` is x (number)
+     * @return {AnimationBuilder}
+     */
+    translation(targetOrOptionsOrX: TypeParsablePoint | OBJ_PositionAnimationStep | number, y?: number, z?: number): this;
+    /**
+     * Add a scale animation step that uses this element by default
+     * @param {TypeParsablePoint | OBJ_ScaleAnimationStep | number} targetOrOptionsOrX
+     * when a number is used, it will apply to both x and y if y is null
+     * @param {number | null} y use a number to define the y scale, or use null
+     * to use the `x` value (`null`)
+     * @return {AnimationBuilder}
+     */
+    scale(targetOrOptionsOrX: TypeParsablePoint | OBJ_ScaleAnimationStep | number, y?: null | number, z?: number): this;
+    /**
+     * Add a transform animation step that uses this element by default
+     * @param {OBJ_TransformAnimationStep | TypeParsableTransform} transformOrOptions
+     * @return {AnimationBuilder}
+     */
+    transform(transformOrOptions: OBJ_TransformAnimationStep | TypeParsableTransform): this;
+    pulseTransforms(...options: Array<OBJ_PulseTransformAnimationStep>): this;
+    /**
+     * Add a scenario animation step that uses this element by default
+     * @param {OBJ_ScenarioAnimationStep | OBJ_Scenario | string} scenarioOrOptions
+     * @return {AnimationBuilder}
+     */
+    scenario(scenarioOrOptions: string | OBJ_Scenario | OBJ_ScenarioAnimationStep): this;
+    /**
+     * Add a scenarios animation step that uses this element by default
+     * @param {string | OBJ_ScenariosAnimationStep} scenarioNameOrOptions
+     * @return {AnimationBuilder}
+     */
+    scenarios(scenarioOrOptions: string | OBJ_ScenariosAnimationStep): this;
+    /**
+     * Add a color animation step that uses this element by default
+     * @param {OBJ_ColorAnimationStep | TypeColor} colorOrOptions
+     * @return {AnimationBuilder}
+     */
+    color(colorOrOptions: OBJ_ColorAnimationStep | TypeColor): this;
+    /**
+     * Add an opacity animation step that uses this element by default
+     * @param {OBJ_OpacityAnimationStep | number} opacityOrOptions
+     * @return {AnimationBuilder}
+     */
+    opacity(opacityOrOptions: OBJ_OpacityAnimationStep | number): this;
+    /**
+     * Add an dissolve out animation step that uses this element by default
+     * @param {number | OBJ_ElementAnimationStep} durationOrOptions
+     * @return {AnimationBuilder}
+     */
+    dissolveOut(durationOrOptions?: number | OBJ_ElementAnimationStep): this;
+    /**
+     * Add an dissolve in animation step that uses this element by default
+     * @param {number | OBJ_ElementAnimationStep} durationOrOptions
+     * @return {AnimationBuilder}
+     */
+    dissolveIn(durationOrOptions?: number | OBJ_ElementAnimationStep): this;
+    addStep(animName: string, ...params: Array<any>): this;
+    /**
+     * Add an dim animation step that uses this element by default
+     * @param {OBJ_ElementAnimationStep | number} durationOrOptions
+     * @return {AnimationBuilder}
+     */
+    dim(durationOrOptions?: number | OBJ_ElementAnimationStep): this;
+    /**
+     * Add an undim animation step that uses this element by default
+     * @param {OBJ_ElementAnimationStep | number} durationOrOptions
+     * @return {AnimationBuilder}
+     */
+    undim(durationOrOptions?: number | OBJ_ElementAnimationStep): this;
+    /**
+     * Add a delay animation step
+     * @param {OBJ_AnimationStep | number} delayOrOptions
+     * @return {AnimationBuilder}
+     */
+    delay(delayOrOptions?: number | OBJ_AnimationStep): this;
+    /**
+     * Add a trigger animation step
+     * @param {OBJ_TriggerAnimationStep | function(): void | string} callbackOrOptions
+     * callback can be a function or an id to a function map
+     * @return {AnimationBuilder}
+     */
+    trigger(callbackOrOptions: (() => void) | string | OBJ_TriggerAnimationStep): this;
+    /**
+     * Add a parallel animation step
+     * @param {Array<AnimationStep | null> | OBJ_ParallelAnimationStep} stepsOrOptions
+     * @return {AnimationBuilder}
+     */
+    inParallel(stepsOrOptions?: Array<animation.AnimationStep | null> | OBJ_ParallelAnimationStep, ...options: Array<OBJ_ParallelAnimationStep>): this;
+    /**
+     * Add a serial animation step
+     * @param {Array<AnimationStep | null> | OBJ_SerialAnimationStep} stepsOrOptions
+     * @return {AnimationBuilder}
+     */
+    inSerial(stepsOrOptions?: Array<animation.AnimationStep> | OBJ_SerialAnimationStep, ...options: Array<OBJ_SerialAnimationStep>): this;
+    /**
+     * Add a pulse animation step
+     * @param {OBJ_PulseAnimationStep | number} scaleOrOptions pulse scale
+     * (number) or pulse animation step options
+     * @return {PulseAnimationStep}
+     */
+    pulse(scaleOrOptions: OBJ_PulseAnimationStep | number): this;
+    reset(): void;
+    _dup(): animation.AnimationBuilder;
+}