figureone 0.15.10 → 1.0.1

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

@@ -0,0 +1,137 @@
+import type { TypeParsablePoint } from '../../../../tools/g2';
+import type { OBJ_ElementAnimationStep } from '../ElementAnimationStep';
+import ElementAnimationStep from '../ElementAnimationStep';
+import type { TypeWhen } from '../../../TimeKeeper';
+import type { FigureElement } from '../../../Element';
+/**
+ * {@link PulseAnimationStep} options object
+ *
+ * @extends OBJ_ElementAnimationStep
+ * @property {number} [frequency] pulse frequency in Hz - a frequency of zero
+ * will set the frequency so just one cycle will be performed in the duration
+ * (`0`)
+ * @property {number} [scale] maximum scale value to pulse to (`1.5`)
+ * @property {number} [rotation] maximum rotation value to pulse to
+ * @property {number} [translation] maximum translation displacment value to
+ * pulse to (`1.5`)
+ * @property {number} [angle] translation angle (`0`)
+ * @property {number} [min] minimum value to pulse to
+ * @property {null | FigureElement | TypeParsablePoint} [centerOn] center
+ * of scale or rotation pulse. By default, the element calling the pulse
+ * will be the default `centerOn`.
+ * @property {'left' | 'center' | 'right' | 'location' | number} [xAlign]
+ * if `centerOn` is a {@link FigureElement} then this property can be used to
+ * horizontally align the pulse center with the element. `'location'` is the
+ * (0, 0) draw space coordinate of the element. `number` defines the percent
+ * width from the left of the element (`'center'`)
+ * @property {'bottom' | 'middle' | 'top' | 'location' | number} [yAlign]
+ * if `centerOn` is a {@link FigureElement} then this property can be used to
+ * vertically align the pulse center with the element. `'location'` is the
+ * (0, 0) draw space coordinate of the element. `number` defines the percent
+ * width from the left of the element (`'center'`)
+ * @property {'figure' | 'gl' | 'local' | 'draw' | 'pixel'} [space]
+ * if `centerOn` is a point, use this to define the space the point is in
+ * (`'figure'`)
+ * @property {number} [num] the number of draw copies of the pulse to make (`1`)
+ * @property {null | string | function(): void} [done] callback when pulse is
+ * finished. If `string` then the element's {@link FunctionMap} `fnMap` will be
+ * used (`null`)
+ * @property {TypeWhen} [when] when to start the pulse (`'syncNow'`)
+ *
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_PulseAnimationStep = {
+    stopAfterDuration?: boolean | null | undefined;
+    frequency?: number;
+    scale?: number;
+    rotation?: number;
+    translation?: number;
+    angle?: number;
+    min?: number;
+    centerOn?: null | FigureElement | TypeParsablePoint;
+    xAlign?: 'left' | 'center' | 'right' | 'origin' | number;
+    yAlign?: 'bottom' | 'middle' | 'top' | 'origin' | number;
+    space?: 'figure' | 'gl' | 'local' | 'draw';
+    done?: ((arg: any) => void) | null | undefined;
+    num?: number;
+    when?: TypeWhen;
+} & OBJ_ElementAnimationStep;
+/**
+ * Pulse animation step
+ *
+ * ![](./apiassets/pulse_animation.gif)
+ *
+ * The pulse animation step animates a pulse.
+ *
+ * The options are the same as those in the * <a href="#figureelementpulse">pulse</a> method.
+ *
+ * @extends ElementAnimationStep
+ * @param {OBJ_PulseAnimationStep} options
+ *
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Scale pulse, rotation pulse and translation pulse
+ * p.animations.new()
+ *   .pulse({
+ *     scale: 1.5,
+ *     duration: 1,
+ *   })
+ *   .pulse({
+ *     duration: 1,
+ *     rotation: 0.15,
+ *     frequency: 4,
+ *   })
+ *   .pulse({
+ *     duration: 1,
+ *     translation: 0.02,
+ *     min: -0.02,
+ *     frequency: 4,
+ *   })
+ *   .start();
+ *
+ * @example
+ * // Different ways to create a stand-alone step
+ * const step1 = p.animations.pulse({
+ *   scale: 1.5,
+ *   duration: 1,
+ * });
+ * const step2 = new Fig.Animation.PulseAnimationStep({
+ *   element: p,
+ *   rotation: 0.15,
+ *   frequency: 4,
+ * });
+ * p.animations.new()
+ *   .then(step1)
+ *   .then(step2)
+ *   .start();
+ * @group Animation
+ */
+export default class PulseAnimationStep extends ElementAnimationStep {
+    pulse: {
+        frequency: number;
+        scale: number;
+        rotation?: number;
+        translation?: number;
+        angle: number;
+        min: number;
+        centerOn: null | FigureElement | TypeParsablePoint;
+        xAlign: 'left' | 'center' | 'right' | 'origin' | number;
+        yAlign: 'bottom' | 'middle' | 'top' | 'origin' | number;
+        space: 'figure' | 'gl' | 'local' | 'draw';
+        done: ((arg: any) => void) | null | undefined;
+        num: number;
+        when: TypeWhen;
+        stopAfterDuration: boolean;
+    };
+    toStart: boolean;
+    constructor(...optionsIn: Array<OBJ_PulseAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    setFrame(): void;
+    setToEnd(): void;
+    _dup(): PulseAnimationStep;
+}

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

@@ -0,0 +1,52 @@
+import { Transform } from '../../../../tools/g2';
+import type { TypeParsablePoint, TypeParsableTransform } from '../../../../tools/g2';
+import type { OBJ_ElementAnimationStep } from '../ElementAnimationStep';
+import ElementAnimationStep from '../ElementAnimationStep';
+import type { AnimationStartTime } from '../../AnimationManager';
+import type { OBJ_TranslationPath } from '../../../../tools/geometry/Path';
+export type OBJ_PulseTransformAnimationStep = {
+    start?: Array<Transform>;
+    target?: Array<Transform>;
+    path?: OBJ_TranslationPath;
+    rotDirection: 0 | 1 | -1 | 2;
+    clipRotationTo: '0to360' | '-180to180' | null;
+    velocity?: Transform | number | {
+        position?: TypeParsablePoint | number;
+        translation?: TypeParsablePoint | number;
+        rotation?: number;
+        scale?: TypeParsablePoint | number;
+        transform?: TypeParsableTransform;
+    } | null;
+    maxDuration?: number;
+    zeroDurationThreshold?: number;
+} & OBJ_ElementAnimationStep;
+export default class PulseTransformAnimationStep extends ElementAnimationStep {
+    transform: {
+        start: Array<Transform>;
+        delta: Array<Transform>;
+        target: Array<Transform>;
+        rotDirection: 0 | 1 | -1 | 2;
+        path: OBJ_TranslationPath;
+        velocity: Transform | number | {
+            position?: TypeParsablePoint | number;
+            translation?: TypeParsablePoint | number;
+            rotation?: number;
+            scale?: TypeParsablePoint | number;
+            transform?: TypeParsableTransform;
+        } | null | undefined;
+        clipRotationTo: '0to360' | '-180to180' | null;
+        maxDuration: number | null | undefined;
+        zeroDurationThreshold: number;
+    };
+    constructor(...optionsIn: Array<OBJ_PulseTransformAnimationStep>);
+    spread(transforms: Array<Transform>, toNum: number): Transform[];
+    setStartAndTarget(): void;
+    calculateStartTargetDelta(): void;
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    getVelocityTransform(): Transform;
+    start(startTime?: AnimationStartTime | null): void;
+    setFrame(deltaTime: number): void;
+    setToEnd(): void;
+    _dup(): PulseTransformAnimationStep;
+}

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

@@ -0,0 +1,119 @@
+import type { OBJ_ElementAnimationStep } from '../ElementAnimationStep';
+import ElementAnimationStep from '../ElementAnimationStep';
+import type { AnimationStartTime } from '../../AnimationManager';
+/**
+ * {@link RotationAnimationStep} step options object.
+ *
+ * The {@link RotationAnimationStep} animates the rotation value of a the first
+ * rotation component in a {@link Transform}.
+ *
+ * To rotate from a `start` rotation to a `target` rotation use the
+ * `start`, `delta` and/or `target` properties.
+ *
+ * If `start` is not defined, the current rotation angle (when the animation
+ * is started) will be used as `start`.
+ *
+ * Either `target` or `delta` (from start) can be used to define the target.
+ *
+ *
+ * The animation can either move to the target with a `duration`, or the
+ * `duration` can be determined by a `velocity`.
+ *
+ * Rotation animation targets can also be created with `velocity`, `start` and
+ * `duration`. In this case, the rotation angles will grow with `velocity`. If
+ * `duration` is null, then rotation duration will continue indefinitely until
+ * the animation is cancelled.
+ *
+ * @extends OBJ_ElementAnimationStep
+ *
+ * @property {number} [start] start rotation - current
+ * rotation used if undefined
+ * @property {number} [target] target rotation
+ * @property {number} [delta] a delta rotation that can be
+ * used to define `target` if `target` is undefined
+ * @property {null | number} [velocity] velocity of
+ * rotation can either define the `duration` of a rotation if `target` or
+ * `delta` is defined, or can define the `target` of a rotation if `duration`
+ * is defined. If `duration` is null, then velocity determines the change in
+ * rotation over time (`null`)
+ * @property {number | null} [maxDuration] maximum duration to clip animation
+ * to where `null` is unlimited (`null`)
+ *
+ * @see {@link RotationAnimationStep} for description and examples
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_RotationAnimationStep = {
+    start?: number;
+    target?: number;
+    delta?: number;
+    velocity?: number | null;
+    maxDuration?: number | null;
+} & OBJ_ElementAnimationStep;
+/**
+ * Rotation animation step
+ *
+ * ![](./apiassets/rotation_animation.gif)
+ *
+ * The rotation animation step animates the first {@link Rotation} transform
+ * in the {@link FigureElement}'s {@link Transform}.
+ *
+ * By default, the rotation will start with the element's current rotation.
+ *
+ * Use either `delta` or `target` to define it's end point
+ *
+ *
+ * @extends ElementAnimationStep
+ * @param {OBJ_RotationAnimationStep} options
+ *
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Using duration
+ * p.animations.new()
+ *   .rotation({ target: Math.PI, duration: 2 })
+ *   .start();
+ *
+ * @example
+ * // Using velocity
+ * p.animations.new()
+ *   .rotation({ target: Math.PI, velocity: Math.PI / 2 })
+ *   .start();
+ *
+ * @example
+ * // Different ways to create a stand-alone step
+ * const step1 = p.animations.rotation({ target: Math.PI, duration: 2 });
+ * const step2 = new Fig.Animation.RotationAnimationStep({
+ *   element: p,
+ *   target: 0,
+ *   duration: 2,
+ * });
+ *
+ * p.animations.new()
+ *   .then(step1)
+ *   .then(step2)
+ *   .start();
+ * @group Animation
+ */
+export default class RotationAnimationStep extends ElementAnimationStep {
+    rotation: {
+        start: number;
+        delta: number;
+        target: number;
+        velocity: number;
+        maxDuration: number | null | undefined;
+        clipTo: '0to360' | '-180to180' | null;
+    };
+    /**
+     * @hideconstructor
+     */
+    constructor(...optionsIn: Array<OBJ_RotationAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    start(startTime?: AnimationStartTime | null): void;
+    setFrame(deltaTime: number): void;
+    setToEnd(): void;
+    _dup(): RotationAnimationStep;
+}

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

@@ -0,0 +1,93 @@
+import { Point } from '../../../../tools/g2';
+import type { OBJ_ElementAnimationStep } from '../ElementAnimationStep';
+import ElementAnimationStep from '../ElementAnimationStep';
+import type { AnimationStartTime } from '../../AnimationManager';
+/**
+ * {@link ScaleAnimationStep} options object
+ *
+ * @extends OBJ_ElementAnimationStep
+ *
+ * @property {TypeParsablePoint | number} [start]
+ * @property {TypeParsablePoint | number} [target]
+ * @property {TypeParsablePoint | number} [delta]
+ * @property {null | TypeParsablePoint | number} [velocity] velocity of scale
+ * overrides `duration` - `null` to use `duration` (`null`)
+ * @property {number | null} [maxDuration] maximum duration to clip animation
+ * to where `null` is unlimited (`null`)
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ScaleAnimationStep = {
+    start?: Point | number;
+    target?: Point | number;
+    delta?: Point | number;
+    velocity?: Point | number;
+    maxDuration?: number | null | undefined;
+} & OBJ_ElementAnimationStep;
+/**
+ * Scale Animation Step
+ *
+ * ![](./apiassets/scale_animation.gif)
+ *
+ * The scale animation step animates the first {@link Scale} transform
+ * in the {@link FigureElement}'s {@link Transform}.
+ *
+ * By default, the scale will start with the element's current scale.
+ *
+ * Use either `delta` or `target` to define it's end point.
+ *
+ * Scale can be defined as either a point or number. If number,
+ * both x and y scale terms will be the same.
+ *
+ * @extends ElementAnimationStep
+ * @param {OBJ_ScaleAnimationStep} options
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Using duration
+ * p.animations.new()
+ *   .scale({ target: 2, duration: 2 })
+ *   .start();
+ *
+ * @example
+ * // Using velocity
+ * p.animations.new()
+ *   .scale({ target: 2, velocity: 0.5 })
+ *   .start();
+ *
+ * @example
+ * // Different ways to create a stand-alone step
+ * const step1 = p.animations.scale({ target: 1.5, duration: 2 });
+ * const step2 = new Fig.Animation.ScaleAnimationStep({
+ *   element: p,
+ *   target: 1,
+ *   duration: 2,
+ * });
+ *
+ * p.animations.new()
+ *   .then(step1)
+ *   .then(step2)
+ *   .start();
+ * @group Animation
+ */
+export default class ScaleAnimationStep extends ElementAnimationStep {
+    scale: {
+        start: Point | null | undefined;
+        delta: Point | null | undefined;
+        target: Point | null | undefined;
+        velocity: Point | null | undefined;
+        maxDuration: number | null | undefined;
+    };
+    /**
+     * @hideconstructor
+     */
+    constructor(...optionsIn: Array<OBJ_ScaleAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    start(startTime?: AnimationStartTime | null): void;
+    setFrame(deltaTime: number): void;
+    setToEnd(): void;
+    _dup(): ScaleAnimationStep;
+}

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

@@ -0,0 +1,204 @@
+import { Transform } from '../../../../tools/g2';
+import type { OBJ_TranslationPath, TypeParsableTransform, TypeParsablePoint } from '../../../../tools/g2';
+import type { OBJ_ElementAnimationStep, AnimationProgression } from '../ElementAnimationStep';
+import { ParallelAnimationStep } from '../ParallelAnimationStep';
+import type { FigureElement, OBJ_Scenario } from '../../../Element';
+import type { AnimationStartTime } from '../../AnimationManager';
+import type { TypeColor } from '../../../../tools/types';
+/**
+ * Transform, color and visbility scenario definition
+ *
+ * `translation` will overwirte `position`, and `translation, `position`,
+ * rotation` and `scale` overwrite the first equivalent transforms in
+ * `transform`
+ *
+ * @property {TypeParsablePoint} [position]
+ * @property {TypeParsablePoint} [translation]
+ * @property {TypeParsablePoint | number} [scale]
+ * @property {number} [rotation]
+ * @property {TypeParsableTransform} [transform]
+ * @property {TypeColor} [color]
+ * @property {number} [opacity]
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ScenarioVelocity = {
+    position?: TypeParsablePoint | number;
+    translation?: TypeParsablePoint | number;
+    rotation?: number;
+    scale?: TypeParsablePoint | number;
+    transform?: TypeParsableTransform;
+    color?: number;
+    opacity?: number;
+};
+/**
+ * {@link ScenarioAnimationStep} options object
+ *
+ * @extends OBJ_ElementAnimationStep
+ *
+ * @property {string | OBJ_Scenario} [start]
+ * @property {string | OBJ_Scenario} [target]
+ * @property {null | string | OBJ_ScenarioVelocity} [velocity] velocity
+ * will override duration with a calculated duration based on
+ * the `start`, `target` and `velocity`. If `null` is used
+ * then `duration` will not be overriden. Any scenario velocity elements that
+ * are undefined will default to 1 (`null`)
+ * @property {number | null} [maxDuration] maximum duration to clip animation
+ * to where `null` is unlimited (`null`)
+ * @property {number} [zeroDurationThreshold] value considered 0 to stop
+ * animation - this is useful when numbers get very small and rounding problems
+ * with javascripts floating point implementation arise
+ * @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.
+ * @property {'0to360' | '-180to180' | null} [clipRotationTo]
+ * @property {'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression} [progression]
+ * (`'easeinout'`)
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ScenarioAnimationStep = {
+    start?: string | OBJ_Scenario;
+    target?: string | OBJ_Scenario;
+    velocity?: OBJ_ScenarioVelocity;
+    maxDuration?: number;
+    zeroDurationThreshold?: number;
+    allDurationsSame?: boolean;
+    path?: OBJ_TranslationPath;
+    rotDirection: 0 | 1 | -1 | 2;
+    clipRotationTo: '0to360' | '-180to180' | null;
+    progression: 'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression;
+} & OBJ_ElementAnimationStep;
+/**
+ * {@link ScenarioAnimationStep} options object
+ *
+ * @extends OBJ_ElementAnimationStep
+ *
+ * @property {string} [target]
+ * @property {null | string | OBJ_ScenarioVelocity} [velocity] velocity
+ * will override duration with a calculated duration based on
+ * the `start`, `target` and `velocity`. If `null` is used
+ * then `duration` will not be overriden. Any scenario velocity elements that
+ * are undefined will default to 1 (`null`)
+ * @property {number | null} [maxDuration] maximum duration to clip animation
+ * to where `null` is unlimited (`null`)
+ * @property {number} [zeroDurationThreshold] value considered 0 to stop
+ * animation - this is useful when numbers get very small and rounding problems
+ * with javascripts floating point implementation arise
+ * @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.
+ * @property {'0to360' | '-180to180' | null} [clipRotationTo]
+ * @property {'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression} [progression]
+ * (`'easeinout'`)
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ScenariosAnimationStep = {
+    target?: string;
+    velocity?: OBJ_ScenarioVelocity;
+    maxDuration?: number;
+    zeroDurationThreshold?: number;
+    allDurationsSame?: boolean;
+    path?: OBJ_TranslationPath;
+    rotDirection: 0 | 1 | -1 | 2;
+    clipRotationTo: '0to360' | '-180to180' | null;
+    progression: 'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression;
+} & OBJ_ElementAnimationStep;
+/**
+ * Scenario Animation Step
+ *
+ * ![](./apiassets/scenario_animation.gif)
+ *
+ * A scenario defines an element's transform and color and can be used to make
+ * code more readable and reusable.
+ *
+ * By default, the scenario will start with the element's current transform and
+ * color.
+ *
+ * @extends ElementAnimationStep
+ * @param {OBJ_ScenarioAnimationStep} options
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // NOTE - use these scenario definitions for all examples below
+ * p.scenarios['center'] = { position: [0, 0], scale: [1, 1], color: [1, 0, 0, 1] };
+ * p.scenarios['right'] = { position: [1, 0], scale: [2, 1], color: [0, 0, 1, 1] };
+ * p.scenarios['bottom'] = { position: [0, -0.5], scale: [0.5, 1], color: [0, 0.5, 0, 1] };
+ *
+ * @example
+ * // Using duration
+ * p.animations.new()
+ *   .scenario({ target: 'right', duration: 2 })
+ *   .scenario({ target: 'bottom', duration: 2 })
+ *   .scenario({ target: 'center', duration: 2 })
+ *   .start();
+ *
+ * @example
+ * // Using velocity
+ * p.animations.new()
+ *   .scenario({
+ *     target: 'right',
+ *     velocity: { position: 0.5, scale: 0.2 },
+ *   })
+ *   .scenario({ target: 'bottom', velocity: { position: 0.5 } })
+ *   .scenario({ target: 'center', velocity: { color: 0.2 } })
+ *   .start();
+ *
+ * @example
+ * // Different ways to create a stand-alone step
+ * const step1 = p.animations.scenario({
+ *   target: 'right',
+ *   duration: 2,
+ * });
+ * const step2 = new Fig.Animation.ScenarioAnimationStep({
+ *   element: p,
+ *   target: 'bottom',
+ *   duration: 2,
+ * });
+ *
+ * p.animations.new()
+ *   .then(step1)
+ *   .then(step2)
+ *   .start();
+ * @group Animation
+ */
+export default class ScenarioAnimationStep extends ParallelAnimationStep {
+    element: FigureElement | null | undefined;
+    scenario: {
+        start: (string | OBJ_Scenario) | null | undefined;
+        target: (string | OBJ_Scenario) | null | undefined;
+        rotDirection: 0 | 1 | -1 | 2;
+        path: OBJ_TranslationPath;
+        velocity: OBJ_ScenarioVelocity | null | undefined;
+        maxDuration: number | null | undefined;
+        allDurationsSame: boolean;
+        zeroDurationThreshold: number;
+        clipRotationTo: '0to360' | '-180to180' | null;
+        progression: 'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression;
+    };
+    /**
+     * @hideconstructor
+     */
+    constructor(...optionsIn: Array<OBJ_ScenarioAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    getDuration(start: {
+        transform?: Transform;
+        color?: TypeColor;
+        isShown?: boolean;
+        opacity?: number;
+    }, target: {
+        transform?: Transform;
+        color?: TypeColor;
+        isShown?: boolean;
+    }): number[];
+    start(startTime?: AnimationStartTime): void;
+    _dup(): ScenarioAnimationStep;
+}