figureone 0.15.10 → 1.0.0

package/types/js/figure/FigurePrimitives/FigureElementPrimitiveGesture.d.ts

@@ -0,0 +1,536 @@
+import type { OBJ_FigureForElement } from '../Figure';
+import { FigureElementPrimitive } from '../Element';
+import { Point } from '../../tools/g2';
+import type { FigureElement } from '../Element';
+import type { TypeParsablePoint, Transform } from '../../tools/g2';
+import Scene from '../../tools/geometry/scene';
+import type { OBJ_Scene } from '../../tools/geometry/scene';
+import type { OBJ_Generic } from './FigurePrimitiveTypes2D';
+import type TimeKeeper from '../TimeKeeper';
+import type DrawingObject from '../DrawingObjects/DrawingObject';
+import type { TypeColor } from '../../tools/types';
+/**
+ * Zoom options.
+ *
+ * @property {null | number} [max] maximum zoom if value defined, no
+ * maximum if `null` (`null`)
+ * @property {null | number} [min] minimum zoom if value defined, no
+ * minimum if `null` (`null`)
+ * @property {number} [pinchSensitivity] pinch zoom sensitivity where values
+ * greater than 1 are more sensitive resulting in faster zoom changes (`1`)
+ * @property {number} [wheelSensitivity] mouse wheel zoom sensitivity where
+ * values greater than 1 are more sensitive resulting in faster zoom changes
+ * (`1`)
+ * @property {null | TypeParsablePoint} [position] zoom around a fixed point (instead of the
+ * mouse of pinch location) - leave undefined or use `null` to instead zoom
+ * around mouse or pinch location (`null`)
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_ZoomOptions = {
+    min?: null | number;
+    max?: null | number;
+    wheelSensitivity?: number;
+    pinchSensitivity?: number;
+    position?: null | TypeParsablePoint;
+};
+/**
+ * Manual zoom setting.
+ *
+ * @property {number} mag zoom magnification (`last zoom`)
+ * @property {TypeParsablePoint} position zoom around this position (`[0, 0]`)
+ * @property {TypeParsablePoint} offset use this pan offset
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_ManualZoom = {
+    mag?: number;
+    position?: TypeParsablePoint;
+    offset?: TypeParsablePoint;
+};
+/**
+ * Zoom values
+ *
+ * @property {number} mag zoom magnification
+ * @property {Point} position zoom position
+ * @property {number} distance distance between pinch touches (in pixels)
+ * @property {number} angle delta angle from original pinch angle
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_ZoomValues = {
+    mag: number;
+    position: Point;
+    distance: number;
+    angle: number;
+};
+/**
+ * Current zoom values
+ *
+ * @property {number} mag zoom magnification
+ * @property {Point} offset pan offset
+ * @property {OBJ_ZoomValues} last last zoom values
+ * @property {OBJ_ZoomValues} current current zoom values
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_CurrentZoom = {
+    delta: number;
+    mag: number;
+    offset: Point;
+    last: OBJ_ZoomValues;
+    current: OBJ_ZoomValues;
+};
+export type OBJ_CurrentPan = {
+    offset: number;
+    delta: number;
+};
+/**
+ * Pan options.
+ *
+ * @property {null | number} [left] maximum left pan allowed, or `null` for no
+ * limit (`null`)
+ * @property {null | number} [right] maximum right pan allowed, or `null` for no
+ * limit (`null`)
+ * @property {null | number} [bottom] maximum bottom pan allowed, or `null` for
+ * no limit (`null`)
+ * @property {null | number} [top] maximum top pan allowed, or `null` for no
+ * limit (`null`)
+ * @property {number} [wheelSensitivity] mouse wheel pan sensitivity for mouse
+ * wheel panning where values greater than 1 are more sensitive resulting in
+ * faster panning (`1`)
+ * @property {boolean} [wheel] enable mouse wheel panning - only possible if
+ * zoom gesture is disabled.
+ * @property {boolean} [momentum] enable pan momentum for drag panning. NB,
+ * mouse wheel panning mamemntum cannot be controlled and will be browser
+ * dependent. (`true`)
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_PanOptions = {
+    left?: null | number;
+    right?: null | number;
+    bottom?: null | number;
+    top?: null | number;
+    wheelSensitivity?: number;
+    wheel?: boolean;
+    momentum?: boolean;
+    maxVelocity?: number;
+};
+/**
+ * Instantaneous zoom metrics.
+ * @property {number} [mag] zoom magnification
+ * @property {Point} [position] position around which zoom is happening
+ * @property {Point} [normPosition] position around which zoom is happening
+ * normalized to the gesture rectangle where (0, 0) is the bottom left corner
+ * and (1, 1) is the top right corner
+ * @property {number} [angle] (pinch zoom only) pinch angle delta to start of
+ * pinch
+ * @property {number} [distance] (pinch zoom only) distance between pinch points
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_ZoomInstant = {
+    mag: number;
+    position: Point;
+    normPosition: Point;
+    angle: number;
+    distance: number;
+};
+/**
+ * Current zoom.
+ *
+ @property {OBJ_ZoomInstant} last last zoom metrics
+ @property {OBJ_ZoomInstant} current current zoom metrics
+ @property {number} mag current zoom magnification
+ @property {number} offset pan offset needed to keep the zoom position at a
+ * fixed location
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_Zoom = {
+    last: OBJ_ZoomInstant;
+    current: OBJ_ZoomInstant;
+    mag: number;
+    offset: Point;
+};
+/**
+ * @property {OBJ_ZoomOptions | boolean} [zoom] zoom options - if not `false`
+ * then zoom will be enabled (`false`)
+ * @property {OBJ_PanOptions | boolean} [pan] pan options - if not `false` then
+ * pan will be enabled (`false`)
+ * @property {boolean} [onlyWhenTouched] (mouse wheel zoom/pan and pinch zoom)
+ * only notify when element gesture rectangle is being touched (`true`)
+ * @property {boolean} [back] if `true` 3D shape interactivity will be
+ * prioritized (`true`)
+ * @property {number} [width] width of rectangle - defaults to full scene width
+ * @property {number} [height] height of rectangle - defaults to full scene
+ * height
+ * @property {OBJ_Scene | Scene} [scene] define if gesture should be an
+ * independeant scene (like if the gestures are being used to change the
+ * default figure scene) - defaults to Figure scene
+ * @property {OBJ_Scene} [changeScene] if defined, this scene will be
+ * automatically updated with any pan and zoom events
+ * @property {'left' | 'center' | 'right' | number} [xAlign] x alignment of
+ * rectangle (`'center'`)
+ * @property {'bottom' | 'middle' | 'top' | number} [yAlign] y alignment of
+ * rectangle (`'middle'`)
+ *
+ * @extends OBJ_Generic
+ * @interface
+ * @group Interactivity
+ */
+export type OBJ_Gesture = {
+    zoom?: OBJ_ZoomOptions | boolean;
+    pan?: OBJ_PanOptions | boolean;
+    onlyWhenTouched?: boolean;
+    back?: boolean;
+    width?: number;
+    height?: number;
+    scene?: OBJ_Scene | Scene;
+    changeScene?: Scene;
+    xAlign?: 'left' | 'center' | 'right' | number;
+    yAlign?: 'bottom' | 'middle' | 'top' | number;
+} & OBJ_Generic;
+/**
+ * Gesture rectangle.
+ *
+ * ![](./apiassets/gesture1.gif)
+ *
+ * ![](./apiassets/gesture2.gif)
+ *
+ * This primitive creates a rectangle within which pan and zoom gestures can be
+ * captured (from mouse and touch events) and transformed into pan and zoom
+ * values. The pan and zoom values can be used to change {@link Scene} objects
+ * directly, or used for some custom purpose.
+ *
+ * The pan and zoom values are relative to the gesture rectangle and the
+ * {@link Scene} it is drawn with.
+ *
+ * Performing a drag gesture over half the width of the rectangle, will create
+ * a pan value that is half the width of the rectangle.
+ *
+ * Performing a 2x zoom gesture at a point within the rectangle will create a
+ * pan value that is the delta between the original rectangle center and the
+ * center of the new zoomed rectangle, and a magnification value of 2.
+ *
+ * Any combination of zoom and pan can be expressed as a pan value, that offsets
+ * the original rectangle such that when it is then zoomed, the zoom position
+ * will be at the same relative position of the original and zoomed rectangle.
+ *
+ * Whenever a gesture changes the pan or zoom, then `'pan'` or `'zoom'`
+ * notifications will be published by the primitive's {@link NotificationManger}
+ * (`element.notifications`).
+ *
+ * The handled gestures are:
+ * - Mouse wheel change (often used for zooming and panning with a mouse)
+ * - Drag (often used for panning with touch devices or a mouse)
+ * - Pinching (often used for zooming and panning on touch devices)
+ *
+ * ### Pan
+ *
+ * A pan is an offset in xy.
+ *
+ * The gestures that can generate pan events are:
+ * - Mouse click then drag
+ * - Finger touch then drag (touch devices)
+ * - Mouse wheel change
+ *
+ * For the mouse click and drag, and finger touch and drag gestures, the pan
+ * value tracks the change in position of the mouse/finger in the gesture
+ * primitive rectangle. For example, if the rectangle has a width of 2, and the
+ * mouse or touch moves across half the width of the rectangle, then the pan
+ * offset will be 1.
+ *
+ * For the mouse wheel change, a `wheelSensitivity` value is used to speed up or
+ * slow down the pan.
+ *
+ * When a pan event happens, a `'pan'` notification is published. The parameter
+ * passed to any subscribers is the pan offset value, but if more information
+ * is needed (like the pan delta from the last pan) then `getPan()` can be
+ * called.
+ *
+ * ### Zoom
+ *
+ * A zoom is a magnification at a point in the rectangle. The zoom point will
+ * stay stationary, while the other points around it spread out (when zooming
+ * in) or compress in (when zooming out). The zoom event thus includes a pan
+ * offset to ensure the zoom point stays stationary, as well as a magnification
+ * value.
+ *
+ * The gestures that can generate zoom events are:
+ * - Mouse wheel vertical change
+ * - Finger touch pinch
+ *
+ * A `wheelSensitivity` or `pinchSenstivity` value is used to speed up or slow down zooming.
+ *
+ * When a zoom event happens, a `'zoom'` notification is published. The
+ * parameters passed to any subscribers are the zoom magnification value and
+ * pan offset, but if more information is needed (like the zoom position)
+ * then `getZoom()` can be called.
+ *
+ * Zoom and pan events can be used in many ways. One of the most common ways
+ * will be to change a {@link Scene} that contains one or more
+ * {@link FigureElement}s allowing a user to pan or zoom through the scene.
+ *
+ * In such cases, the `zoomScene()` and `panScene()` methods can be used to do
+ * this directly.
+ *
+ * Alternately, a `changeScene` can be defined which will be automatically
+ * panned and zoomed by this primitive.
+ *
+ * In general the scene that is being used to draw the gesture primitive should
+ * not be panned or zoomed by the gesture primitive, as this will produce
+ * unexpected results (especially when panning). If the gesture primitive is
+ * setup to change the same scene as it uses itself, then it will assign itself
+ * a duplicate scene.
+ *
+ * @example
+ * // Gesture primitive pans and zooms a figure scene
+ * const figure = new Fig.Figure({ color: [1, 0, 0, 1] });
+ *
+ * // Elements within the figure to zoom and pan
+ * figure.add([
+ *   { make: 'rectangle', width: 0.2, height: 0.2, position: [-0.3, 0] },
+ *   { make: 'triangle', width: 0.2, height: 0.2, position: [0.02, -0.025] },
+ *   { make: 'ellipse', width: 0.2, height: 0.2, position: [0.3, 0] },
+ * ])
+ *
+ * // Gesture Primitive
+ * figure.add({
+ *   make: 'gesture',
+ *   changeScene: figure.scene,
+ *   pan: true,
+ *   zoom: true,
+ * });
+ *
+ * @example
+ * // Using zoom and pan notifications when the gestures are confied
+ * // to a green rectangle
+ * const figure = new Fig.Figure({ color: [1, 0, 0, 1] });
+ *
+ * const gesture = figure.add({
+ *   make: 'gesture',
+ *   color: [0, 1, 0, 0.3],
+ *   width: 0.5,
+ *   height: 1,
+ *   pan: true,
+ *   zoom: true,
+ * });
+ *
+ * gesture.notifications.add(
+ *   'pan', offset => console.log('Pan: ', offset.x, offset.y),
+ * );
+ * gesture.notifications.add(
+ *   'zoom', (mag, offset) => console.log('Zoom: ', mag, offset.x, offset.y),
+ * );
+ * @group Interactivity
+ */
+export default class FigureElementPrimitiveGesture extends FigureElementPrimitive {
+    zoom: {
+        last: {
+            mag: number;
+            normPosition: Point;
+            position: Point;
+            angle: number;
+            distance: number;
+        };
+        current: {
+            position: Point;
+            normPosition: Point;
+            angle: number;
+            distance: number;
+        };
+        min: null | number;
+        max: null | number;
+        wheelSensitivity: number;
+        pinchSensitivity: number;
+        mag: number;
+        cumAngle: number;
+        pinching: boolean;
+        enabled: boolean;
+        position: Point | null;
+    };
+    pan: {
+        enabled: boolean;
+        offset: Point;
+        left: null | number;
+        right: null | number;
+        bottom: null | number;
+        top: null | number;
+        delta: Point;
+        wheelSensitivity: number;
+        wheel: boolean;
+        momentum: boolean;
+        maxVelocity: number;
+    };
+    justMoved: boolean;
+    originalPosition: Point;
+    mousePixelPosition: Point;
+    onlyWhenTouched: boolean;
+    relativeScene: null | Scene;
+    notificationIDs: Array<number>;
+    changeScene: Scene;
+    constructor(drawingObject: DrawingObject, transform: Transform, color: TypeColor, parent: FigureElement | null, name: string, timeKeeper: TimeKeeper);
+    _getStateProperties(options: {
+        ignoreShown?: boolean;
+    }): string[];
+    setup(options: OBJ_Gesture): void;
+    /**
+     * Reset zoom and pan.
+     */
+    reset(exceptDistance?: boolean): void;
+    /**
+     * Associate this gesture rectangle with a new scene. Zoom and pan will be
+     * reset.
+     */
+    setScene(scene: Scene | OBJ_Scene): void;
+    /**
+     * Set a scene to automatically zoom and pan.
+     */
+    setChangeScene(scene: Scene): void;
+    setupMove(): void;
+    dragPan(): void;
+    mousePosition(pixelPoint: Point): void;
+    pixelToZoomedScene(pixelPoint: Point): Point;
+    glToZoomedScene(glPoint: Point): Point;
+    zoomedSceneToNorm(p: Point): Point;
+    wheelHandler(delta: Point): void;
+    /**
+     * Change the position and scale of an element to simulate it zooming.
+     *
+     * Note, the element will stay in the same space it was previously, and
+     * therefore moving it will be moving it in the same space.
+     *
+     * Often a better way to zoom an element (especially if more than one and
+     * interactivity is being used) is to zoom the scene the element(s) belong
+     * to.
+     *
+     * @param {FigureElement} element element to zoom
+     */
+    zoomElement(element: FigureElement, originalPosition: TypeParsablePoint, scale?: boolean): void;
+    /**
+     * Changes a 2D scene to simulate zooming in and out
+     */
+    zoomScene(scene: Scene): void;
+    panTransform(scene: Scene): Point;
+    /**
+     * Pan a scene with the current pan.
+     * @param {Scene} scene
+     */
+    panScene(scene: Scene): void;
+    updateZoom(mag: number, zoomPosition: Point, distance?: number, angle?: number): void;
+    startPinchZoom(touch1PixelPos: Point, touch2PixelPos: Point, beingTouchedElement: null | FigureElement): void;
+    pinchZoom(touch1PixelPos: Point, touch2PixelPos: Point, beingTouchedElement: null | FigureElement): void;
+    endPinchZoom(): void;
+    enableZoom(): void;
+    disableZoom(): void;
+    /**
+     * Set zoom gesture options.
+     *
+     * @param {OBJ_ZoomOptions} options
+     */
+    setZoomOptions(options: OBJ_ZoomOptions): void;
+    /**
+     * Set pan gesture options.
+     *
+     * @param {OBJ_ZoomOptions} options
+     */
+    setPanOptions(options: OBJ_PanOptions): void;
+    /**
+     * Set zoom manually.
+     *
+     * Zoom magnitude can be set with zoom position or pan offset. Either a
+     * position or pan should be used (not both).
+     *
+     * NB: if manually creating positions or offsets, the position (p) to offset
+     * (o) for some zoom (z) conversion is:
+     *
+     *      o = -(p / z - p)
+     *
+     *      p = -o / (1/z - 1)
+     *
+     * @param {OBJ_ManualZoom} zoom
+     * @param {boolean} notify `true` to send `'zoom'` notification after set
+     * (`true`)
+     */
+    setZoom(zoom: {
+        mag: number;
+        position?: TypeParsablePoint;
+        offset?: TypeParsablePoint;
+    }, notify?: boolean): void;
+    zoomChanged(notify?: boolean): void;
+    panChanged(notify?: boolean): void;
+    _setZoomPan(mag: number, offset: Point, position?: Point, angle?: number, distance?: number, pinching?: boolean): void;
+    /**
+     * Set pan offset manually.
+     * @param {TypeParsablePoint} offset
+     * @param {boolean} notify `true` to send `'zoom'` notification after set (`true`)
+     */
+    setPan(offset: TypeParsablePoint, notify?: boolean): void;
+    /**
+     * @return {OBJ_CurrentZoom}
+     */
+    getZoom(): {
+        mag: number;
+        offset: Point;
+        last: {
+            mag: number;
+            normPosition: Point;
+            position: Point;
+            angle: number;
+            distance: number;
+        };
+        current: {
+            position: Point;
+            normPosition: Point;
+            angle: number;
+            distance: number;
+        };
+    };
+    /**
+     * @return {OBJ_CurrentPan}
+     */
+    getPan(): {
+        offset: Point;
+        delta: Point;
+    };
+    setZoomMag(mag: number): void;
+    setPanOffset(offset: Point): void;
+    setFigure(figure: OBJ_FigureForElement): void;
+    cleanupIDs(): void;
+}
+/**
+  A zoom pan can be defined as:
+   1) what coordinate is in the middle of the screen (C)
+   2) what the zoom factor is
+
+  A pan zoom in a scene then:
+    - Pans camera so C is in middle of screen
+    - Zooms
+
+  If a point is zoomed on, then it stays in its relative position in the zoomed
+  scene space, meaning C keeps changing.
+
+  Therefore to find C:
+  - Find relative position of point in scene
+  - using the zoom factor find the center point in the zoomed scene
+*/
+/**
+A gesture primitive is a rectangle within an associated scene.
+
+The rectangle has a center point.
+
+To define a zoomed area of the rectangle, two points are needed:
+- point of the rectangle that will be the new center point of the screen
+- zoom magnification
+
+
+A gesture primitive has an associated scene.
+
+The gesture rectangle covers a portion of space within the scene
+Any zoom and pan combination in a scene can be represented by:
+* center position
+* zoom magnification
+
+*/

package/types/js/figure/FigurePrimitives/FigureElementPrimitiveMorph.d.ts

@@ -0,0 +1,175 @@
+import { FigureElementPrimitive } from '../Element';
+import { CustomAnimationStep } from '../Animation/AnimationStep/CustomStep';
+import AnimationManager from '../Animation/AnimationManager';
+import type { OBJ_AnimationStep } from '../Animation/AnimationStep';
+/**
+   * {@link FigureElementPrimitive} that can efficiently translate large numbers
+   * of points.
+   *
+   * ![](./apiassets/morph.gif)
+   *
+   * ![](./apiassets/morph2.gif)
+   *
+   * The morph primitive is optimized to animate hundreds of thousands of
+   * points with minimal performance impact.
+   *
+   * Multiple arrays of points can be defined, and the translation of
+   * corresponding points in two arrays can be animated.
+   *
+   * Being able to accomodate so many points means this primitive can be used to
+   * efficiently morph shapes.
+   *
+   * All points in all point arrays can be assigned an individual color if
+   * desired. Use `color: TypeColor` to assign all points in all arrays the same
+   * color, `color: Array<TypeColor>` to assign all points in each array a
+   * specific color, `color: Array<Array<TypeColor>>` to assign each point in
+   * each array a specific color, and
+   * `color: Array<TypeColor | Array<TypeColor>` to assign some point arrays
+   * with one color, and others with a specific color per point.
+   *
+   * A point array is an array of numbers representing consecutive x, y points.
+   * For example, [x1, y1, x2, y2, ...].
+   *
+   * A color array is an array of numbers representing the color of each points.
+   * For example, [r1, g1, b1, a1, r2, g2, b2, a2, ...].
+   *
+   * If `color` is an array of colors and/or color arrays, then the its length
+   * must be equal to the number of point Arrays. The colors in the array will
+   * be matched up with the corresponding point arrays in `points`.
+   *
+   * This element's specialty is creating a visual effect, and so does not
+   * automatically calculate touch borders, and doesn't allow for color changes
+   * (with the `setColor`, `dim`, and `undim` methods). If touch borders are
+   * desired then either setup touch borders manually, or use a different
+   * element as a touch pad.
+   *
+   * This element comes with two specialized methods and an animation step:
+   *  - `setPoints` - sets points to a specific point array
+   *  - `setPointsBetween` - sets points to a position between two point arrays
+   *  - `animations.morph` - morph between `start` and `target`
+   *
+   * Note, while animation is efficient, loading or generating hundreds of
+   * thousands of points when first instantiated can be slow on lower
+   * end systems, and may need to be accounted for (like letting the user know
+   * that loading is ongoing).
+   *
+   * @example
+   * const { polylineToShapes, getPolygonCorners } = Fig.morph;
+   * const { range } = Fig;
+   *
+   * // Number of shapes that make up the lines
+   * const n = 300;
+   *
+   * // Generate a line of points along a sinc function
+   * const sinc = (xIn, a, b) => {
+   *   const x = xIn === 0 ? 0.00001 : xIn;
+   *   return a * Math.sin(b * x) / (b * x);
+   * };
+   *
+   * // Generate line of shapes along a sinc function
+   * const xValues = range(-0.8, 0.8, 0.01);
+   * const [sincPoints] = polylineToShapes({
+   *   points: xValues.map(x => [x, sinc(x, 0.6, 20)]),
+   *   num: n,
+   *   size: 0.04,
+   *   shape: 15,
+   * });
+   *
+   * // Generate a line of shapes along a square
+   * const [squarePoints] = polylineToShapes({
+   *   points: [[0.5, 0.5], [-0.5, 0.5], [-0.5, -0.5], [0.5, -0.5]],
+   *   num: n,
+   *   size: 0.04,
+   *   close: true,
+   *   shape: 15,
+   * });
+   *
+   * // Generate a line of shapes along a circle
+   * const [circlePoints] = polylineToShapes({
+   *   points: getPolygonCorners({ radius: 0.5, sides: 50, rotation: Math.PI / 4 }),
+   *   num: n,
+   *   size: 0.04,
+   *   close: true,
+   *   shape: 15,
+   * });
+   *
+   * const morpher = figure.add({
+   *   make: 'morph',
+   *   names: ['sinc', 'square', 'circle'],
+   *   points: [sincPoints, squarePoints, circlePoints],
+   *   color: [1, 0, 0, 1],
+   * });
+   *
+   * // Animate morph
+   * morpher.animations.new()
+   *   .delay(1)
+   *   .morph({ start: 'sinc', target: 'square', duration: 2 })
+   *   .morph({ start: 'square', target: 'circle', duration: 2 })
+   *   .morph({ start: 'circle', target: 'sinc', duration: 2 })
+   *   .start();
+   *
+   * @example
+   * const { imageToShapes, circleCloudShapes, polylineToShapes } = Fig.morph;
+   * const { range } = Fig;
+   *
+   * const image = new Image();
+   * image.src = './logocolored.png';
+   * image.onload = () => {
+   *   const [logo, logoColors] = imageToShapes({
+   *     image,
+   *     width: 2,
+   *     height: 2,
+   *     dither: 0.003,
+   *   });
+   *
+   *   const n = logo.length / 2 / 6;
+   *   const cloud = circleCloudShapes({
+   *     radius: 3,
+   *     num: n,
+   *     size: 0.005,
+   *   });
+   *
+   *   const xValues = range(-0.8, 0.8, 0.001);
+   *   const [sine] = polylineToShapes({
+   *     points: xValues.map(x => [x, 0.3 * Math.sin(x * 2 * Math.PI / 0.4)]),
+   *     num: n,
+   *     size: 0.01,
+   *   });
+   *
+   *   const m = figure.add({
+   *     make: 'morph',
+   *     points: [cloud, logo, sine],
+   *     names: ['cloud', 'logo', 'sine'],
+   *     color: [logoColors, logoColors, [0, 0, 1, 1]],
+   *   });
+   *
+   *   m.setPoints('sine');
+   *   m.animations.new()
+   *     .delay(1)
+   *     .morph({ start: 'sine', target: 'cloud', duration: 2 })
+   *     .morph({ start: 'cloud', target: 'logo', duration: 2 })
+   *     .start();
+   * };
+   * @group Morphing
+   */
+export default class FigureElementPrimitiveMorph extends FigureElementPrimitive {
+    shapeNameMap: {
+        [name: string]: number;
+    };
+    animations: {
+        morph: (options: OBJ_AnimationStep) => CustomAnimationStep;
+    } & AnimationManager;
+    /**
+     * Set points position to be between two points arrays
+     * @param {string | number} from name or index of point array to morph from
+     * @param {string | number} to name or index of point array to morph to
+     * @param {number} percent percent of morph between from and to
+     */
+    setPointsBetween(from: string | number, to: string | number, percent: number): void;
+    /**
+     * Set points to equal a point array
+     * @param {string | number} points point array name or index to set
+     */
+    setPoints(points: string | number): void;
+    getIndex: (shapeNameOrIndex: string | number) => number;
+}