figureone 0.15.10 → 1.0.0

package/types/js/figure/Equation/EquationFunctions.d.ts

@@ -0,0 +1,3367 @@
+import { Point } from '../../tools/g2';
+import type { TypeParsablePoint } from '../../tools/g2';
+import { FigureElementPrimitive, FigureElementCollection } from '../Element';
+import { Element, Elements } from './Elements/Element';
+import Fraction from './Elements/Fraction';
+import EquationForm from './EquationForm';
+import Matrix from './Elements/Matrix';
+import Lines from './Elements/Lines';
+import Scale from './Elements/Scale';
+import Container from './Elements/Container';
+import BaseAnnotationFunction from './Elements/BaseAnnotationFunction';
+import Offset from './Elements/Offset';
+import Color from './Elements/Color';
+import type { TypeColor } from '../../tools/types';
+export declare function getFigureElement(elementsObject: {
+    [key: string]: FigureElementPrimitive | FigureElementCollection;
+} | FigureElementCollection, name: string | FigureElementPrimitive | FigureElementCollection): FigureElementPrimitive | FigureElementCollection | null;
+/**
+ * An equation phrase is used to define an equation form and can be any of the
+ * below:
+ *
+ *  - `string` (which represents the unique identifier of an equation element)
+ *  - `{ frac: `{@link EQN_Fraction} `}`
+ *  - `{ strike: `{@link EQN_Strike} `}`
+ *  - `{ box: `{@link EQN_Box} `}`
+ *  - `{ tBox: `{@link EQN_TouchBox} `}`
+ *  - `{ root: `{@link EQN_Root} `}`
+ *  - `{ brac: `{@link EQN_Bracket} `}`
+ *  - `{ sub: `{@link EQN_Subscript} `}`
+ *  - `{ sup: `{@link EQN_Superscript} `}`
+ *  - `{ supSub: `{@link EQN_SuperscriptSubscript} `}`
+ *  - `{ topBar: `{@link EQN_Bar} `}`
+ *  - `{ bottomBar: `{@link EQN_Bar} `}`
+ *  - `{ annotate: `{@link EQN_Annotate} `}`
+ *  - `{ topComment: `{@link EQN_Comment} `}`
+ *  - `{ bottomComment: `{@link EQN_Comment} `}`
+ *  - `{ pad: `{@link EQN_Pad} `}`
+ *  - `{ bar: `{@link EQN_Bar} `}`
+ *  - `{ scale: `{@link EQN_Scale} `}`
+ *  - `{ container: `{@link EQN_Container} `}`
+ *  - `{ offset: `{@link EQN_Offset} `}`
+ *  - `{ matrix: `{@link EQN_Matrix} `}
+ *  - `{ lines: `{@link EQN_Lines} `}`
+ *  - `{ int: `{@link EQN_Integral} `}`
+ *  - `{ sumOf: `{@link EQN_SumOf} `}`
+ *  - `{ prodOf: `{@link EQN_ProdOf} `}`
+ *  - `{ topStrike: `{@link EQN_StrikeComment} `}`
+ *  - `{ bottomStrike: `{@link EQN_StrikeComment} `}`
+ *  - `Array<TypeEquationPhrase>`
+ *
+ *
+ * @example
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: { equals: ' = ' },
+ *   forms: {
+ *     form1: 'a',
+ *     form2: ['a', 'equals', 'b'],
+ *     form3: [{
+ *       frac: {
+ *         numerator: 'a',
+ *         symbol: 'vinculum',
+ *         denominator: 'c',
+ *       },
+ *     }, 'equals', 'b'],
+ *     form4: { frac: ['a', 'vinculum', 'c'] },
+ *   },
+ * });
+ *
+ * figure.getElement('eqn').animations.new()
+ *   .goToForm({ target: 'form2', animate: 'move', delay: 1 })
+ *   .goToForm({ target: 'form3', animate: 'move', delay: 1 })
+ *   .goToForm({ target: 'form4', animate: 'move', delay: 1 })
+ *   .start();
+ * @group Equations
+ */
+export type TypeEquationPhrase = string | number | {
+    frac: EQN_Fraction;
+} | {
+    strike: EQN_Strike;
+} | {
+    box: EQN_Box;
+} | {
+    tBox: EQN_TouchBox;
+} | {
+    root: EQN_Root;
+} | {
+    brac: EQN_Bracket;
+} | {
+    sub: EQN_Subscript;
+} | {
+    sup: EQN_Superscript;
+} | {
+    supSub: EQN_SuperscriptSubscript;
+} | {
+    topBar: EQN_Bar;
+} | {
+    bottomBar: EQN_Bar;
+} | {
+    annotate: EQN_Annotate;
+} | {
+    topComment: EQN_Comment;
+} | {
+    bottomComment: EQN_Comment;
+} | {
+    pad: EQN_Pad;
+} | {
+    bar: EQN_Bar;
+} | {
+    scale: EQN_Scale;
+} | {
+    container: EQN_Container;
+} | {
+    offset: EQN_Offset;
+} | {
+    matrix: EQN_Matrix;
+} | {
+    matrix: EQN_Lines;
+} | {
+    int: EQN_Integral;
+} | {
+    sumOf: EQN_SumOf;
+} | {
+    prodOf: EQN_ProdOf;
+} | {
+    topStrike: EQN_StrikeComment;
+} | {
+    bottomStrike: EQN_StrikeComment;
+} | Array<TypeEquationPhrase> | FigureElementPrimitive | FigureElementCollection | Elements | Element | BaseAnnotationFunction;
+/**
+ * Equation container options
+ *
+ * ![](./apiassets/eqn_container.gif)
+ *
+ * A container is useful to fix spacing around content as it changes between
+ * equation forms.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {number} [width] (`null`)
+ * @property {boolean} [inSize] (`true)
+ * @property {number} [descent] (`null`)
+ * @property {number} [ascent] (`null`)
+ * @property {'left' | 'center' | 'right' | number} [xAlign] (`'center'`)
+ * @property {'bottom' | 'middle' | 'top' | 'baseline' | number} [yAlign]  (`'baseline'`)
+ * @property {'width' | 'height' | 'contain'} [fit] - fit width,
+ * ascent and descent to either match width, height or fully contain the content (`null`)
+ * @property {number} [scale] - (`1`)
+ * @property {boolean} [fullContentBounds] - (`false`)
+ * @property {boolean} [showContent] - if `false`, a container will be created
+ * around the content, but the content will not be shown (`true`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Example showing the difference between with and without container
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     // Container object definition
+ *     1: [
+ *       'length',
+ *       {
+ *         container: {
+ *           content: 'width',
+ *           width: 0.5,
+ *         },
+ *       },
+ *       'height',
+ *     ],
+ *     // Container array definition
+ *     2: ['length', { container: ['w', 0.5] }, 'height'],
+ *     // No container
+ *     3: ['length', ' ', 'w', ' ', 'height']
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ *
+ * @example
+ * // Create equation object then add to figure
+ * const eqn = figure.collections.equation({
+ *   forms: {
+ *     1: [
+ *       'length',
+ *       { container: { content: 'width', width: 0.5 } },
+ *       'height',
+ *     ],
+ *     2: ['length', { container: ['w', 0.5] }, 'height'],
+ *     3: ['length', ' ', 'w', ' ', 'height']
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * figure.add('eqn', eqn);
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Container = {
+    content: TypeEquationPhrase;
+    width?: number;
+    inSize?: boolean;
+    descent?: number;
+    ascent?: number;
+    xAlign?: 'left' | 'center' | 'right' | number;
+    yAlign?: 'bottom' | 'middle' | 'top' | 'baseline' | number;
+    fit?: 'width' | 'height' | 'contain';
+    scale?: number;
+    fullContentBounds?: boolean;
+    showContent?: boolean;
+} | [
+    TypeEquationPhrase,
+    (number | null | undefined),
+    (boolean | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    ('left' | 'center' | 'right' | number | null | undefined),
+    ('bottom' | 'middle' | 'top' | 'baseline' | number | null | undefined),
+    ('width' | 'height' | 'contain' | null | undefined),
+    (number | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation offset options
+ *
+ * ![](./apiassets/eqn_offset_ex1.png)
+ *
+ * Offset a phrase from the position it would normally be.
+ * An offest phrase will not contribute to layout of subsequent equation
+ * elements and phrases.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {TypeParsablePoint} [offset] (`[0, 0]`)
+ * @property {boolean} [fullContentBounds] - (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * figure.add([
+ *   {
+ *     name: 'rect1',
+ *     make: 'equation',
+ *     forms: {
+ *       0: [
+ *         'a', '_ = ', 'n',
+ *         { offset: ['for a > 0', [0.3, 0]] },
+ *       ],
+ *     },
+ *   },
+ * ]);
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Offset = {
+    content: TypeEquationPhrase;
+    offset?: TypeParsablePoint;
+    inSize?: boolean;
+    fullContentBounds?: boolean;
+} | [
+    TypeEquationPhrase,
+    (TypeParsablePoint | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation fraction options
+ *
+ * ![](./apiassets/eqn_fraction.gif)
+ *
+ * A fraction has a numerator and denominator separated by a vinculum
+ * symbol {@link EQN_VinculumSymbol}.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} numerator
+ * @property {string} symbol - Vinculum symbol
+ * @property {TypeEquationPhrase} denominator
+ * @property {number} [scale] (`1`)
+ * @property {number} [numeratorSpace] (`0.05`)
+ * @property {number} [denominatorSpace] (`0.05`)
+ * @property {number} [overhang] Vinculum extends beyond the content
+ * horizontally by the this amount (`0.05`)
+ * @property {number} [offsetY] Offset fraction in y (`0.07`)
+ * @property {boolean} [fullContentBounds] Use full bounds with content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     1: { frac: ['a', 'vinculum', 'b'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Example showing object and array fraction definitions, and nesting
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     v1: { symbol: 'vinculum' },
+ *     v2: { symbol: 'vinculum' },
+ *     plus: '  +  ',
+ *   },
+ *   forms: {
+ *     // Fraction object form
+ *     1: {
+ *       frac: {
+ *         numerator: 'a',
+ *         denominator: 'b',
+ *         symbol: 'v1',
+ *       },
+ *     },
+ *     // Fraction array form
+ *     2: { frac: ['a', 'v1', 'd'] },
+ *     // Nested
+ *     3: {
+ *       frac: {
+ *         numerator: [{ frac: ['a', 'v1', 'd', 0.7] }, 'plus', '_1'],
+ *         symbol: 'v2',
+ *         denominator: 'b',
+ *       }
+ *     },
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ *
+ * @example
+ * // Create equation object then add to figure
+ * const eqn = figure.collections.equation({
+ *   elements: {
+ *       v1: { symbol: 'vinculum' },
+ *       v2: { symbol: 'vinculum' },
+ *       plus: '  +  ',
+ *     },
+ *     forms: {
+ *       1: {
+ *         frac: {
+ *           numerator: 'a',
+ *           denominator: 'b',
+ *           symbol: 'v1',
+ *         },
+ *       },
+ *       2: { frac: ['a', 'v1', 'd'] },
+ *       3: {
+ *         frac: {
+ *           numerator: [{ frac: ['a', 'v1', 'd', 0.7] }, 'plus', '_1'],
+ *           symbol: 'v2',
+ *           denominator: 'b',
+ *         }
+ *       },
+ *     },
+ *     formSeries: ['1', '2', '3'],
+ * });
+ * figure.add('eqn', eqn);
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Fraction = {
+    numerator: TypeEquationPhrase;
+    symbol: string;
+    denominator: TypeEquationPhrase;
+    scale?: number;
+    numeratorSpace?: number;
+    denominatorSpace?: number;
+    overhang?: number;
+    offsetY?: number;
+    baseline?: 'numerator' | 'denominator' | 'vinculum';
+    fullContentBounds?: boolean;
+} | [
+    TypeEquationPhrase,
+    string,
+    TypeEquationPhrase,
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (('numerator' | 'denominator' | 'vinculum') | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation scale
+ *
+ * ![](./apiassets/eqn_scale.gif)
+ *
+ * Scale an equation phrase
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {number} [scale] - (`1`)
+ * @property {boolean} [fullContentBounds] Use full bounds with content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     2: ['a', { scale: ['b', 2] }, 'c'],
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * // Some different bracket examples
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     // Default
+ *     1: ['a', 'b', 'c'],
+ *     // Array definition magnify
+ *     2: ['a', { scale: ['b', 2] }, 'c'],
+ *     // Object definition shrink
+ *     3: [
+ *       'a',
+ *       {
+ *         scale: {
+ *           content: ['b', 1],
+ *           scale: 0.5,
+ *         },
+ *       },
+ *       'c',
+ *     ],
+ *     // Back to start
+ *     4: ['a', { scale: ['b', 1] }, 'c'],
+ *   },
+ *   formSeries: ['1', '2', '3']
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Scale = {
+    content: TypeEquationPhrase;
+    scale?: number;
+    fullContentBounds?: boolean;
+} | [
+    TypeEquationPhrase,
+    (number | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation color
+ *
+ * ![](./apiassets/eqn_color.gif)
+ *
+ * Color an equation phrase.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {TypeColor} color
+ * @property {boolean} [fullContentBounds] Use full bounds with content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple Array Definition
+ * figure.add({
+ *   make: 'equation',
+ *   forms: {
+ *     0: ['a', { color: ['b', [0, 0, 1, 1]] }, 'c'],
+ *   },
+ * });
+ *
+ * @example
+ * // Simple Object Definition
+ * figure.add({
+ *   make: 'equation',
+ *   forms: {
+ *     0: [
+ *       'a',
+ *       {
+ *         color: {
+ *           content: 'b',
+ *           color: [0, 0, 1, 1],
+ *         },
+ *       },
+ *       'c',
+ *     ],
+ *   },
+ * });
+ *
+ * @example
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     equals: ' = ',
+ *     plus: ' + ',
+ *     brace: { symbol: 'brace', side: 'top' },
+ *   },
+ *   forms: {
+ *     0: ['2', 'plus', '3', 'equals', 'x'],
+ *     1: [
+ *       {
+ *         color: {
+ *           content: { topComment: [['2', 'plus', '3'], '5', 'brace'] },
+ *           color: [0, 0, 1, 1],
+ *         },
+ *       },
+ *       'equals', 'x',
+ *     ],
+ *     2: ['5', 'equals', 'x'],
+ *   },
+ *   touch: { onClick: e => e.nextForm() },
+ * });
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Color = {
+    content: TypeEquationPhrase;
+    color: TypeColor;
+    fullContentBounds?: boolean;
+} | [
+    TypeEquationPhrase,
+    TypeColor,
+    (boolean | null | undefined)
+];
+/**
+ * Equation bracket
+ *
+ * ![](./apiassets/eqn_bracket.gif)
+ *
+ * Surround an equation phrase with brackets.
+ *
+ * Symbols that can be used with bracket are:
+ * - {@link EQN_BarSymbol}
+ * - {@link EQN_ArrowSymbol}
+ * - {@link EQN_BraceSymbol}
+ * - {@link EQN_BracketSymbol}
+ * - {@link EQN_SquareBracketSymbol}
+ * - {@link EQN_AngleBracketSymbol}
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {string} [left] left bracket symbol
+ * @property {TypeEquationPhrase} [content]
+ * @property {string} [right] right bracket symbol
+ * @property {boolean} [inSize] `false` excludes bracket symbols from
+ * size of resulting phrase (`true`)
+ * @property {number} [insideSpace] space between brackets and content (`0.03`)
+ * @property {number} [outsideSpace] space between brackets and neighboring
+ * phrases(`0.03`)
+ * @property {number} [topSpace] how far the brackets extend above the content
+ * (`0.05`)
+ * @property {number} [bottomSpace] how far the brackets extend below the
+ * content (`0.05`)
+ * @property {number} [minContentHeight] if content height is less than this,
+ * then this number will be used when sizing the brackets (unless it is `null`)
+ * (`null`)
+ * @property {number} [minContentDescent] if content descent is less than this,
+ * then this number will be used when sizing the brackets (unless it is `null`)
+ * (`null`)
+ * @property {number} [height] force height of brackets (`null`)
+ * @property {number} [descent] force descent of brackets (`null`)
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ * @property {boolean} [useFullBounds] make the bounds of this phrase equal to
+ * the full bounds of the content even if `fullContentBounds=false` and the
+ * brackets only surround a portion of the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     lb: { symbol: 'bracket', side: 'left' },
+ *     rb: { symbol: 'bracket', side: 'right' },
+ *   },
+ *   forms: {
+ *     1: ['a', { brac: ['lb', ['b', '_ + ', 'c'], 'rb'] }],
+ *   },
+ * });
+ *
+ * @example
+ * // Some different bracket examples
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     lb: { symbol: 'bracket', side: 'left' },
+ *     rb: { symbol: 'bracket', side: 'right' },
+ *     lsb: { symbol: 'squareBracket', side: 'left' },
+ *     rsb: { symbol: 'squareBracket', side: 'right' },
+ *     leftBrace: { }
+ *   },
+ *   forms: {
+ *     // Array definition
+ *     1: ['a', { brac: ['lb', ['b', '_ + ', 'c'], 'rb'] }],
+ *     // Object definition
+ *     2: ['a', {
+ *       brac: {
+ *         left: 'lb',
+ *         content: { frac: ['b', 'vinculum', 'c'] },
+ *         right: 'rb',
+ *       },
+ *     }],
+ *     // Square brackets
+ *     3: ['a', { brac: ['lsb', ['b', '_ + ', 'c'], 'rsb'] }],
+ *   },
+ *   formSeries: ['1', '2', '3']
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Bracket = {
+    left?: string;
+    content: TypeEquationPhrase;
+    right?: string;
+    inSize?: boolean;
+    insideSpace?: number;
+    outsideSpace?: number;
+    topSpace?: number;
+    bottomSpace?: number;
+    minContentHeight?: number;
+    minContentDescent?: number;
+    height?: number;
+    descent?: number;
+    fullContentBounds?: boolean;
+    useFullBounds?: boolean;
+} | [
+    string,
+    TypeEquationPhrase,
+    (string | null | undefined),
+    (boolean | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation root
+ *
+ * ![](./apiassets/eqn_root.gif)
+ *
+ * Surround an equation phrase with a radical symbol {@link EQN_RadicalSymbol}
+ * and add a custom root if needed
+ *
+ * Options can be an object, or an array in the property order below.
+ *
+ * @property {string} symbol radical symbol
+ * @property {TypeEquationPhrase} content
+ * @property {boolean} [inSize] `false` excludes radical symbol and root (if
+ * defined) from size of resulting phrase (`true`)
+ * @property {number} [space] (`0.02`) default space between content and
+ * radical symbol in left, right, top and bottom directions.
+ * @property {number} [topSpace] space between content top and radical symbol
+ * horiztonal line (`space`)
+ * @property {number} [rightSpace] radical symbol overhang of content on right
+ * (`space`)
+ * @property {number} [bottomSpace] radical symbol descent below content
+ * (`space`)
+ * @property {number} [leftSpace] space between radical symbol up stroke and
+ * content (`space`)
+ * @property {TypeEquationPhrase} [root] custom root
+ * @property {number} [rootOffset] custom root offset (`[0, 0.06]`)
+ * @property {number} [rootScale] custom root scale (`0.6`)
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ * @property {boolean} [useFullBounds] make the bounds of this phrase equal to
+ * the full bounds of the content even if `fullContentBounds=false` and the
+ * brackets only surround a portion of the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     1: { root: ['radical', 'a'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Example showing object and array root definitions, and custom roots
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     r: { symbol: 'radical' },
+ *     plus: '  +  ',
+ *   },
+ *   formDefaults: { alignment: { fixTo: 'd' } },
+ *   forms: {
+ *     // Root object form
+ *     1: {
+ *       root: {
+ *         symbol: 'r',
+ *         content: ['a', 'plus', 'd'],
+ *       },
+ *     },
+ *     // Root array form
+ *     2: { root: ['r', 'd'] },
+ *     // Cube root
+ *     3: { root: { content: 'd', symbol: 'r', root: '_3' } },
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ *
+ * @example
+ * // Create equation object then add to figure
+ * const eqn = figure.collections.equation({
+ *   elements: {
+ *     r: { symbol: 'radical' },
+ *     plus: '  +  ',
+ *   },
+ *   formDefaults: {
+ *     alignment: { fixTo: 'd' },
+ *   },
+ *   forms: {
+ *     1: {
+ *       root: {
+ *         symbol: 'r',
+ *         content: ['a', 'plus', 'd'],
+ *       },
+ *     },
+ *     2: { root: ['r', 'd'] },
+ *     3: { root: { content: 'd', symbol: 'r', root: '_3' } },
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * figure.add('eqn', eqn);
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Root = {
+    symbol: string;
+    content: TypeEquationPhrase;
+    inSize?: boolean;
+    space?: number;
+    topSpace?: number;
+    rightSpace?: number;
+    bottomSpace?: number;
+    leftSpace?: number;
+    root: TypeEquationPhrase;
+    rootOffset?: number;
+    rootScale?: number;
+    fullContentBounds?: boolean;
+    useFullBounds?: boolean;
+} | [
+    string,
+    TypeEquationPhrase,
+    (boolean | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (TypeEquationPhrase | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation strike-through
+ *
+ * ![](./apiassets/eqn_strike.gif)
+ *
+ * Overlay a strike symbol on an equation phrase.
+ *
+ * Use with {@link EQN_Strike} symbol.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {string} symbol
+ * @property {boolean} [inSize] `false` excludes strike symbol from size of
+ * resulting phrase (`false`)
+ * @property {number} [space] amount the strike symbol overhangs the content on
+ * the left, right, bottom and top sides (`0.02`)
+ * @property {number} [topSpace] use when top overhang between content and
+ *  strike should be different thant `space` property (`space`)
+ * @property {number} [rightSpace] use when right overhang between content and
+ *  strike should be different thant `space` property (`space`)
+ * @property {number} [bottomSpace] use when bottom overhang between content and
+ *  strike should be different thant `space` property (`space`)
+ * @property {number} [leftSpace] use when left overhang between content and
+ *  strike should be different thant `space` property (`space`)
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ * @property {boolean} [useFullBounds] make the bounds of this phrase equal to
+ * the full bounds of the content even if `fullContentBounds=false` and the
+ * brackets only surround a portion of the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     x: { symbol: 'strike', color: [0.6, 0.6, 0.6, 1] },
+ *   },
+ *   forms: {
+ *     1: [{ strike: ['a', 'x']}, ' ', 'b'],
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Some different strike examples
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     s1: { symbol: 'strike', color: [0.6, 0.6, 0.6, 1] },
+ *     s2: { symbol: 'strike', style: 'forward', color: [0.6, 0.6, 0.6, 1] },
+ *   },
+ *   forms: {
+ *     // Array definition
+ *     1: [{ strike: ['a', 's1']}, ' ', 'b'],
+ *     // Object definition
+ *     2: {
+ *       strike: {
+ *         content: ['a', '_ + ', 'b'],
+ *         symbol: 's1',
+ *       },
+ *     },
+ *     // Additional options to make strike overhang more
+ *     3: {
+ *       strike: {
+ *         content: ['a', 'b'],
+ *         symbol: 's1',
+ *         topSpace: 0.2,
+ *         rightSpace: 0.2,
+ *         leftSpace: 0.2,
+ *         bottomSpace: 0.2,
+ *       },
+ *     },
+ *     // Forward strike
+ *     4: { strike: [['a', '_ +', 'b'], 's2'] },
+ *   },
+ *   formSeries: ['1', '2', '3', '4']
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Strike = {
+    content: TypeEquationPhrase;
+    symbol: string;
+    inSize?: boolean;
+    space?: number;
+    topSpace?: number;
+    rightSpace?: number;
+    bottomSpace?: number;
+    leftSpace?: number;
+    fullContentBounds?: boolean;
+    useFullBounds?: boolean;
+} | [
+    TypeEquationPhrase,
+    string,
+    (boolean | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation box
+ *
+ * ![](./apiassets/eqn_box.gif)
+ *
+ * Place a {@link EQN_BoxSymbol} around an equation phrase
+ *
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {string} symbol
+ * @property {boolean} [inSize] `false` excludes box symbol from size of
+ * resulting phrase (`false`)
+ * @property {number} [space] space between box symbol and content on
+ * the left, right, bottom and top sides (`0`)
+ * @property {number} [topSpace] use when top space between content and
+ *  box should be different thant `space` property (`space`)
+ * @property {number} [rightSpace] use when right space between content and
+ *  box should be different thant `space` property (`space`)
+ * @property {number} [bottomSpace] use when bottom space between content and
+ *  box should be different thant `space` property (`space`)
+ * @property {number} [leftSpace] use when left space between content and
+ *  box should be different thant `space` property (`space`)
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ * @property {boolean} [useFullBounds] make the bounds of this phrase equal to
+ * the full bounds of the content even if `fullContentBounds=false` and the
+ * brackets only surround a portion of the content (`false`)
+ *
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     1: { box: ['a', 'box', true, 0.1] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Some different box examples
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     box: { symbol: 'box' },
+ *   },
+ *   forms: {
+ *     // Array equation
+ *     1: ['a', { box: ['b', 'box'] }, 'c'],
+ *     // Object definition
+ *     2: {
+ *       box: {
+ *         content: ['a', 'b', 'c'],
+ *         symbol: 'box',
+ *       },
+ *     },
+ *     // Additional options for layout
+ *     3: {
+ *       box: {
+ *         content: ['a', 'b', 'c'],
+ *         symbol: 'box',
+ *         space: 0.2,
+ *       },
+ *     },
+ *     // Box is included in the layout spacing
+ *     4: [
+ *       'a',
+ *       {
+ *         box: {
+ *           content: 'b',
+ *           symbol: 'box',
+ *           space: 0.2,
+ *           inSize: true,
+ *         },
+ *       },
+ *       'c'
+ *     ],
+ *   },
+ *   formSeries: ['1', '2', '3', '4']
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Box = {
+    content: TypeEquationPhrase;
+    symbol: string;
+    inSize?: boolean;
+    space?: number;
+    topSpace?: number;
+    rightSpace?: number;
+    bottomSpace?: number;
+    leftSpace?: number;
+    fullContentBounds?: boolean;
+    useFullBounds?: boolean;
+} | [
+    TypeEquationPhrase,
+    string,
+    (boolean | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation touch box
+ *
+ * Place a box symbol around an equation phrase
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {string} symbol
+ * @property {number} [space] space between box symbol and content on
+ * the left, right, bottom and top sides (`0`)
+ * @property {number} [topSpace] use when top space between content and
+ *  box should be different thant `space` property (`space`)
+ * @property {number} [rightSpace] use when right space between content and
+ *  box should be different thant `space` property (`space`)
+ * @property {number} [bottomSpace] use when bottom space between content and
+ *  box should be different thant `space` property (`space`)
+ * @property {number} [leftSpace] use when left space between content and
+ *  box should be different thant `space` property (`space`)
+ *
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_TouchBox = {
+    content: TypeEquationPhrase;
+    symbol: string;
+    space?: number;
+    topSpace?: number;
+    rightSpace?: number;
+    bottomSpace?: number;
+    leftSpace?: number;
+} | [
+    TypeEquationPhrase,
+    string,
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined)
+];
+/**
+ * Equation bar
+ *
+ * ![](./apiassets/eqn_bar.gif)
+ *
+ * Place a bar (or bracket) symbol to the side of an equation phrase.
+ *
+ * Symbols that can be used with bar are:
+ * - {@link EQN_BarSymbol}
+ * - {@link EQN_ArrowSymbol}
+ * - {@link EQN_BraceSymbol}
+ * - {@link EQN_BracketSymbol}
+ * - {@link EQN_SquareBracketSymbol}
+ * - {@link EQN_AngleBracketSymbol}
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {string} symbol
+ * @property {boolean} [inSize] `false` excludes box symbol from size of
+ * resulting phrase (`true`)
+ * @property {number} [space] space between content and the symbol (`0.03`)
+ * @property {number} [overhang] amount symbol extends beyond content (`0`)
+ * @property {number} [length] total length of symbol (overrides `overhang`)
+ * @property {number} [left] amount symbol extends beyond content to the left
+ * (overrides `overhang` and `length`, and only for side `'top'` or `'bottom'`)
+ * @property {number} [right] amount symbol extends beyond content to the right
+ * (overrides `overhang` and `length`, and only for side `'top'` or `'bottom'`)
+ * @property {number} [top] amount symbol extends beyond content to the top
+ * (overrides `overhang` and `length`, and only for side `'left'` or `'right'`)
+ * @property {number} [bottom] amount symbol extends beyond content to the
+ * bottom (overrides `overhang` and `length`, and only for side `'left'` or
+ * `'right'`)
+ * @property {'left' | 'right' | 'top' | 'bottom'} [side] (`top`)
+ * @property {number} [minContentHeight] custom min content height for auto
+ * symbol sizing when side is `'top'` or `'bottom'`
+ * @property {number} [minContentDescent] custom min content descent for auto
+ * symbol sizing when side is `'top'` or `'bottom'`
+ * @property {number} [minContentAscent] custom min content ascent for auto
+ * symbol sizing when side is `'top'` or `'bottom'`
+ * @property {number} [descent] force descent of symbol when side is `'top'` or
+ * `'bottom'` - height is forced with `length` property
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ * @property {boolean} [useFullBounds] make the bounds of this phrase equal to
+ * the full bounds of the content even if `fullContentBounds=false` and the
+ * brackets only surround a portion of the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     bar: { symbol: 'bar', side: 'top' },
+ *   },
+ *   forms: {
+ *     1: { bar: ['a', 'bar', 'top'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Some different bar examples
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     hBar: { symbol: 'bar', side: 'top' },
+ *     vBar: { symbol: 'bar', side: 'right' },
+ *     hArrow: { symbol: 'arrow', direction: 'right' },
+ *   },
+ *   forms: {
+ *     // Array equation
+ *     1: { bar: [['a', 'b'], 'hBar', 'top'] },
+ *     // Object definition
+ *     2: {
+ *       bar: {
+ *         content: ['a', 'b'],
+ *         symbol: 'hBar',
+ *         side: 'bottom',
+ *       },
+ *     },
+ *     // Additional options for layout
+ *     3: {
+ *       bar: {
+ *         content: ['a', 'b'],
+ *         symbol: 'vBar',
+ *         side: 'right',
+ *         overhang: 0.1,
+ *       },
+ *     },
+ *     // Vector arrow
+ *     4: {
+ *       bar: {
+ *         content: ['a', 'b'],
+ *         symbol: 'hArrow',
+ *         side: 'top',
+ *       },
+ *     },
+ *   },
+ *   formSeries: ['1', '2', '3', '4']
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Bar = {
+    content: TypeEquationPhrase;
+    symbol?: string;
+    inSize?: boolean;
+    space?: number;
+    overhang?: number;
+    length?: number;
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    minContentHeight?: number;
+    minContentDescent?: number;
+    minContentAscent?: number;
+    descent?: number;
+    fullContentBounds?: boolean;
+    useFullBounds?: boolean;
+} | [
+    TypeEquationPhrase,
+    (string | null | undefined),
+    (boolean | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    ('left' | 'right' | 'top' | 'bottom' | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation integral
+ *
+ * ![](./apiassets/eqn_integral.gif)
+ *
+ * Place an integral (with optional limits) before an equation phrase
+ *
+ * Use with a {@link EQN_IntegralSymbol} symbol.
+ *
+ * Options can be an object, or an array in the property order below.
+ *
+ * @property {string} symbol
+ * @property {TypeEquationPhrase} content
+ * @property {TypeEquationPhrase} [from] bottom limit
+ * @property {TypeEquationPhrase} [to] top limit
+ * @property {boolean} [inSize] `false` excludes box symbol from size of
+ * resulting phrase (`true`)
+ * @property {number} [space] horizontal space between symbol and content (`0.05`)
+ * @property {number} [topSpace] space between content top and symbol top (`0.1`)
+ * @property {number} [bottomSpace] space between content bottom and symbol bottom (`0.1`)
+ * @property {number} [height] force height of symbol
+ * @property {number} [yOffset] y offset of symbol (`0`)
+ * @property {number} [scale] content scale (`1`)
+ * @property {number} [fromScale] scale of *from* (bottom) limit (`0.5`)
+ * @property {number} [toScale] scale of *to* (top) limit (`0.5`)
+ * @property {TypeParsablePoint} [fromOffset] from limit offest ( `side`:
+ * `[0, 0]`, `topBottom`: `[0, -0.04]`, `topBottomCenter`: `[0, -0.04]`)
+ * @property {TypeParsablePoint} [toOffset] to limit offest (`side`: `[0, 0]`
+ * `topBottom`: `[0, 0.04]`, `topBottomCenter`: `[0, 0.04]`)
+ * @property {'side' | 'topBottom' | 'topBottomCenter'} [limitsPosition] limits
+ * relative to symbol. `side` is to the right of the symbol ends, `topBottom`
+ * is above and below the symbol ends and `topBottomCenter` is above and below
+ * the integral mid point (`'side'`)
+ * @property {boolean} [limitsAroundContent] `false` means content left is
+ * aligned with furthest right of limits
+ * @property {'left' | 'center' | 'right' | number} [fromXPosition] x position
+ * of limit relative to the symbol (`side`: `0.5`, `topBottom`: `0.1`,
+ * `topBottomCenter`: `'center'`)
+ * @property {'bottom' | 'top' | 'middle' | 'baseline' | number} [fromYPositio]
+ * y position of the limit relavite to the symbol (`'bottom'`)
+ * @property {'left' | 'center' | 'right' | number} [fromXAlign] limit x
+ * alignment (`side`: `'left'`, `topBottom`: `center`,
+ * `topBottomCenter`: `'center'`)
+ * @property {'bottom' | 'top' | 'middle' | 'baseline' | number} [fromYAlign]
+ * limit y alignment (`side`: `'middle'`, `topBottom`: `'top'`,
+ * `topBottomCenter`: `'top'`)
+ * @property {'left' | 'center' | 'right' | number} [toXPosition] x position
+ * of limit relative to the symbol (`side`: `'right'`, `topBottom`: `0.9`,
+ * `topBottomCenter`: `'center'`)
+ * @property {'bottom' | 'top' | 'middle' | 'baseline' | number} [toYPosition]
+ * y position of the limit relavite to the symbol (`side`: `'top'`,
+ * `topBottom`: `top`, `topBottomCenter`: `'top'`)
+ * @property {'left' | 'center' | 'right' | number} [toXAlign] limit x
+ * alignment (`side`: `'left'`, `topBottom`: `center`,
+ * `topBottomCenter`: `'center'`)
+ * @property {'bottom' | 'top' | 'middle' | 'baseline' | number} [toYAlign]
+ * limit y alignment (`side`: `'middle'`, `topBottom`: `bottom`,
+ * `topBottomCenter`: `'bottom'`)
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ * @property {boolean} [useFullBounds] make the bounds of this phrase equal to
+ * the full bounds of the content even if `fullContentBounds=false` and the
+ * brackets only surround a portion of the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     1: { int: ['int', 'x dx', 'a', 'b'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Example showing different integral options
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     i: { symbol: 'int' },
+ *     // ic: { symbol: 'int', num: 1, type: 'line' },
+ *   },
+ *   formDefaults: { alignment: { fixTo: 'x' } },
+ *   forms: {
+ *     // Root object form
+ *     1: {
+ *       int: {
+ *         symbol: 'i',
+ *         content: ['x', ' ', 'dx'],
+ *         from: 'a',
+ *         to: 'b',
+ *       },
+ *     },
+ *     // Root array form
+ *     2: { int: ['i', ['x', '  ', '+', ' ', '_1', ' ', 'dx'], 'a', 'b'] },
+ *     // Indefinite tripple integral
+ *     3: { int: ['i', ['x', '  ', '+', ' ', '_1', ' ', 'dx']] },
+ *     // Custom spacing
+ *     4: {
+ *       int: {
+ *         symbol: 'i',
+ *         content: ['x', '  ', '+', ' ', '_1', ' ', 'dx'],
+ *         to: 'b',
+ *         from: { frac: ['a', 'vinculum', 'd + 2'] },
+ *         topSpace: 0.2,
+ *         bottomSpace: 0.2,
+ *         limitsAroundContent: false,
+ *       },
+ *     },
+ *   },
+ *   formSeries: ['1', '2', '3', '4'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Integral = {
+    symbol?: string;
+    content?: TypeEquationPhrase;
+    from?: TypeEquationPhrase;
+    to?: TypeEquationPhrase;
+    inSize?: boolean;
+    space?: number;
+    topSpace?: number;
+    bottomSpace?: number;
+    height?: number;
+    yOffset?: number;
+    scale?: number;
+    fromScale?: number;
+    toScale?: number;
+    fromOffset?: TypeParsablePoint;
+    toOffset?: TypeParsablePoint;
+    limitsPosition?: 'side' | 'topBottom' | 'topBottomCenter';
+    limitsAroundContent?: boolean;
+    fromXPosition?: 'left' | 'center' | 'right' | number;
+    fromYPosition?: 'bottom' | 'top' | 'middle' | 'baseline' | number;
+    fromXAlign?: 'left' | 'center' | 'right' | number;
+    fromYAlign?: 'bottom' | 'top' | 'middle' | 'baseline' | number;
+    toXPosition?: 'left' | 'center' | 'right' | number;
+    toYPosition?: 'bottom' | 'top' | 'middle' | 'baseline' | number;
+    toXAlign?: 'left' | 'center' | 'right' | number;
+    toYAlign?: 'bottom' | 'top' | 'middle' | 'baseline' | number;
+    fullBoundsContent?: boolean;
+    useFullBounds?: boolean;
+} | [
+    (string | null | undefined),
+    (TypeEquationPhrase | null | undefined),
+    (TypeEquationPhrase | null | undefined),
+    (TypeEquationPhrase | null | undefined),
+    (boolean | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    ('side' | 'topBottom' | 'topBottomCenter' | null | undefined),
+    (boolean | null | undefined),
+    ('left' | 'center' | 'right' | number | null | undefined),
+    ('bottom' | 'top' | 'middle' | 'baseline' | number | null | undefined),
+    ('left' | 'center' | 'right' | number | null | undefined),
+    ('bottom' | 'top' | 'middle' | 'baseline' | number | null | undefined),
+    ('left' | 'center' | 'right' | number | null | undefined),
+    ('bottom' | 'top' | 'middle' | 'baseline' | number | null | undefined),
+    ('left' | 'center' | 'right' | number | null | undefined),
+    ('bottom' | 'top' | 'middle' | 'baseline' | number | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation sum of
+ *
+ * ![](./apiassets/eqn_sumof.gif)
+ *
+ * Place an equation phrase in a sum of operation with the symbol
+ * {@link EQN_SumSymbol}.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {string} symbol
+ * @property {TypeEquationPhrase} content
+ * @property {TypeEquationPhrase} [from]
+ * @property {TypeEquationPhrase} [to]
+ * @property {boolean} [inSize] `false` excludes sum of operator from size of
+ * resulting phrase (`true`)
+ * @property {number} [space] horiztonaly space between symbol and content (`0.1`)
+ * @property {number} [topSpace] space symbol extends above content top (`0.07`)
+ * @property {number} [bottomSpace] space symbol extends below content bottom (`0.07`)
+ * @property {number} [height] force height of symbol overwriting `topSpace`
+ * @property {number} [yOffset] offset of symbol in y (`0`)
+ * @property {number} [scale] content scale (`1`)
+ * @property {number} [fromScale] scale of *from* phrase (`0.5`)
+ * @property {number} [toScale] scale of *to* phrase (`0.5`)
+ * @property {number} [fromSpace] space between symbol and `from` phrase
+ * (`0.04`)
+ * @property {number} [toSpace] space between symbol and `to` phrase (`0.04`)
+ * @property {TypeParsablePoint} [fromOffset] offset of `from` phrase (`[0, 0]`)
+ * @property {TypeParsablePoint} [toOffset] offset of `to` phrase (`[0, 0]`)
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ * @property {boolean} [useFullBounds] make the bounds of this phrase equal to
+ * the full bounds of the content even if `fullContentBounds=false` and the
+ * brackets only surround a portion of the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     1: { sumOf: ['sum', 'x', 'b', 'a'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Example showing different options
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     s: { symbol: 'sum', draw: 'dynamic' },
+ *     inf: '\u221e',
+ *   },
+ *   forms: {
+ *     // Object form
+ *     1: {
+ *       sumOf: {
+ *         symbol: 's',
+ *         content: [{ sup: ['x', 'n'] }],
+ *         from: ['n_1', ' ', '=', ' ', '_0'],
+ *         to: '_10',
+ *       },
+ *     },
+ *     // Array form
+ *     2: { sumOf: ['s', [{ sup: ['x', 'm'] }], 'm_1', null]},
+ *     // Styling with options
+ *     3: {
+ *       sumOf: {
+ *         symbol: 's',
+ *         content: { frac: [['x', ' ', '+', ' ', 'm'], 'vinculum', 'a'] },
+ *         from: ['m_1', ' ', '=', ' ', '_0'],
+ *         to: 'inf',
+ *         fromScale: 0.8,
+ *         toScale: 0.8,
+ *       },
+ *     },
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_SumOf = {
+    symbol?: string;
+    content: TypeEquationPhrase;
+    from?: TypeEquationPhrase;
+    to?: TypeEquationPhrase;
+    inSize?: boolean;
+    space?: number;
+    topSpace?: number;
+    bottomSpace?: number;
+    height?: number;
+    yOffset?: number;
+    scale?: number;
+    fromScale?: number;
+    toScale?: number;
+    fromSpace?: number;
+    toSpace?: number;
+    fromOffset?: TypeParsablePoint;
+    toOffset?: TypeParsablePoint;
+    fullBoundsContent?: boolean;
+    useFullBounds?: boolean;
+} | [
+    (string | null | undefined),
+    TypeEquationPhrase,
+    (TypeEquationPhrase | null | undefined),
+    (TypeEquationPhrase | null | undefined),
+    (boolean | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Place an equation phrase in a product of operation with the symbol
+ * {@link EQN_ProdSymbol}.
+ *
+ * ![](./apiassets/eqn_prodof.gif)
+ *
+ * Place an equation phrase in a product of operation
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {string} symbol
+ * @property {TypeEquationPhrase} content
+ * @property {TypeEquationPhrase} [from]
+ * @property {TypeEquationPhrase} [to]
+ * @property {boolean} [inSize] `false` excludes product of operator from size of
+ * resulting phrase (`true`)
+ * @property {number} [space] horiztonaly space between symbol and content (`0.1`)
+ * @property {number} [topSpace] space symbol extends above content top (`0.07`)
+ * @property {number} [bottomSpace] space symbol extends below content bottom (`0.07`)
+ * @property {number} [height] force height of symbol overwriting `topSpace`
+ * @property {number} [yOffset] offset of symbol in y (`0`)
+ * @property {number} [scale] content scale (`1`)
+ * @property {number} [fromScale] scale of *from* phrase (`0.5`)
+ * @property {number} [toScale] scale of *to* phrase (`0.5`)
+ * @property {number} [fromSpace] space between symbol and `from` phrase
+ * (`0.04`)
+ * @property {number} [toSpace] space between symbol and `to` phrase (`0.04`)
+ * @property {TypeParsablePoint} [fromOffset] offset of `from` phrase (`[0, 0]`)
+ * @property {TypeParsablePoint} [toOffset] offset of `to` phrase (`[0, 0]`)
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ * @property {boolean} [useFullBounds] make the bounds of this phrase equal to
+ * the full bounds of the content even if `fullContentBounds=false` and the
+ * brackets only surround a portion of the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     1: { prodOf: ['prod', 'x', 'b', 'a'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Example showing different options
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     p: { symbol: 'prod', draw: 'dynamic' },
+ *     inf: '\u221e',
+ *   },
+ *   forms: {
+ *     // Object form
+ *     1: {
+ *       prodOf: {
+ *         symbol: 'p',
+ *         content: [{ sup: ['x', 'n'] }],
+ *         from: ['n_1', ' ', '=', ' ', '_0'],
+ *         to: '_10',
+ *       },
+ *     },
+ *     // Array form
+ *     2: { prodOf: ['p', [{ sup: ['x', 'm'] }], 'm_1', null]},
+ *     // Styling with options
+ *     3: {
+ *       prodOf: {
+ *         symbol: 'p',
+ *         content: { frac: [['x', ' ', '+', ' ', 'm'], 'vinculum', 'a'] },
+ *         from: ['m_1', ' ', '=', ' ', '_0'],
+ *         to: 'inf',
+ *         fromScale: 0.8,
+ *         toScale: 0.8,
+ *       },
+ *     },
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_ProdOf = {
+    symbol?: string;
+    content: TypeEquationPhrase;
+    from?: TypeEquationPhrase;
+    to?: TypeEquationPhrase;
+    inSize?: boolean;
+    space?: number;
+    topSpace?: number;
+    bottomSpace?: number;
+    height?: number;
+    yOffset?: number;
+    scale?: number;
+    fromScale?: number;
+    toScale?: number;
+    fromSpace?: number;
+    toSpace?: number;
+    fromOffset?: TypeParsablePoint;
+    toOffset?: TypeParsablePoint;
+    fullBoundsContent?: boolean;
+    useFullBounds?: boolean;
+} | [
+    (string | null | undefined),
+    TypeEquationPhrase,
+    (TypeEquationPhrase | null | undefined),
+    (TypeEquationPhrase | null | undefined),
+    (boolean | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation subscript
+ *
+ * ![](./apiassets/eqn_subscript.gif)
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {TypeEquationPhrase} subscript
+ * @property {number} [scale] scale of subscript (`0.5`)
+ * @property {TypeParsablePoint} [offset] offset of subscript (`[0, 0]`)
+ * @property {boolean} [inSize] `true` excludes subscript from size of
+ * resulting phrase (`true`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * //Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     1: { sub: ['x', '_2'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Example showing different subscript options
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     // Object form
+ *     1: {
+ *       sub: {
+ *         content: 'x',
+ *         subscript: 'b',
+ *       },
+ *     },
+ *     // Array form
+ *     2: [{ sub: ['x', 'b'] }, ' ', { sub: ['y', 'd'] }],
+ *     3: { sub: ['x', ['b', '  ', '+', '  ', 'd']] },
+ *     // Subscript offset to adjust layout to keep animation smooth
+ *     4: {
+ *       sub: {
+ *         content: 'x',
+ *         subscript: { frac: [['b', '  ', '+', '  ', 'd'], 'vinculum', '_2'] },
+ *         offset: [-0.025, -0.02],
+ *       },
+ *     },
+ *   },
+ *   formSeries: ['1', '2', '3', '4'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Subscript = {
+    content: TypeEquationPhrase;
+    subscript: TypeEquationPhrase;
+    scale?: number;
+    offset?: TypeParsablePoint;
+    inSize: boolean;
+} | [
+    TypeEquationPhrase,
+    TypeEquationPhrase,
+    (number | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation superscript
+ *
+ * ![](./apiassets/eqn_superscript.gif)
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {TypeEquationPhrase} superscript
+ * @property {number} [scale] scale of superscript (`0.5`)
+ * @property {TypeParsablePoint} [offset] offset of superscript (`[0, 0]`)
+ * @property {boolean} [inSize] `true` excludes superscript from size of
+ * resulting phrase (`true`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     1: { sup: ['e', 'x'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Examples of superscript animations
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     // Object form
+ *     1: {
+ *       sup: {
+ *         content: 'e',
+ *         superscript: 'x',
+ *       },
+ *     },
+ *     // Array form
+ *     2: [{ sup: ['e', 'x'] }, '  ', { sup: ['e_1', 'y'] }],
+ *     3: { sup: ['e', ['x', '  ', '+', '  ', 'y']] },
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Superscript = {
+    content: TypeEquationPhrase;
+    superscript: TypeEquationPhrase;
+    scale?: number;
+    offset?: TypeParsablePoint;
+    inSize: boolean;
+} | [
+    TypeEquationPhrase,
+    TypeEquationPhrase,
+    (number | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation superscript and subscript
+ *
+ * ![](./apiassets/eqn_supsub.gif)
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {TypeEquationPhrase} superscript
+ * @property {TypeEquationPhrase} subscript
+ * @property {number} [scale] scale of superscript (`0.5`)
+ * @property {TypeParsablePoint} [superscriptOffset] offset of superscript (`[0, 0]`)
+ * @property {TypeParsablePoint} [subscriptOffset] offset of subscript (`[0, 0]`)
+ * @property {boolean} [inSize] `true` excludes superscript from size of
+ * resulting phrase (`true`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   make: 'equation',
+ *   forms: {
+ *     1: { supSub: ['x', 'b', 'a'] },
+ *   },
+ * });
+ *
+ * @example
+ * // Example showing different super-sub script options
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     // Object form
+ *     1: {
+ *       supSub: {
+ *         content: 'x',
+ *         superscript: 'b',
+ *         subscript: 'a',
+ *       },
+ *     },
+ *     // Array form
+ *     2: [{ supSub: ['x', 'b', 'a'] }, '  ', { supSub: ['x_1', 'c', 'a_1'] }],
+ *     3: { supSub: ['x', ['b', '  ', '+', '  ', 'c'], 'a'] },
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_SuperscriptSubscript = {
+    content: TypeEquationPhrase;
+    subscript: TypeEquationPhrase;
+    superscript: TypeEquationPhrase;
+    scale?: number;
+    superscriptOffset?: TypeParsablePoint;
+    subscriptOffset?: TypeParsablePoint;
+    inSize?: boolean;
+} | [
+    TypeEquationPhrase,
+    TypeEquationPhrase,
+    TypeEquationPhrase,
+    (number | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation comment options used with `topComment` and `bottomComment`
+ * functions.
+ *
+ * ![](./apiassets/eqn_comment.gif)
+ *
+ * A symbol between the content and comment is optional.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {TypeEquationPhrase} comment
+ * @property {string} [symbol] optional symbol between content and comment
+ * @property {number} [contentSpace] space from content to symbol (`0.03`)
+ * @property {number} [commentSpace] space from symbol to comment (`0.03`)
+ * @property {number} [contentLineSpace] space between a line symbol and
+ * content (`0.03`)
+ * @property {number} [commentLineSpace] space between a line symbol and
+ * comment (`0.03`)
+ * @property {number} [scale] comment scale (`0.6`)
+ * @property {boolean} [inSize] `false` excludes the symbol and comment from
+ * thre resulting size of the equation phrase (`true`)
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ * @property {boolean} [useFullBounds] make the bounds of this phrase equal to
+ * the full bounds of the content even if `fullContentBounds=false` and the
+ * brackets only surround a portion of the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     1: { topComment: ['radius', 'r = 1'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Some different comment examples
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     bBkt: { symbol: 'bracket', side: 'bottom' },
+ *     tBrc: { symbol: 'brace', side: 'top' },
+ *     bSqr: { symbol: 'squareBracket', side: 'bottom' },
+ *   },
+ *   forms: {
+ *     // Array equation
+ *     1: { topComment: ['a \u00d7 b \u00d7 c', 'b = 1, c = 1', 'tBrc'] },
+ *     // Object definition
+ *     2: {
+ *       bottomComment: {
+ *         content: 'a \u00d7 b \u00d7 c',
+ *         symbol: 'bBkt',
+ *         comment: 'b = 1, c = 1',
+ *       },
+ *     },
+ *     // Additional options for layout
+ *     3: {
+ *       bottomComment: {
+ *         content: 'a \u00d7 b \u00d7 c',
+ *         symbol: 'bSqr',
+ *         comment: 'b = 1, c = 1',
+ *         contentSpace: 0.1,
+ *         commentSpace: 0.1,
+ *         scale: 0.7,
+ *       },
+ *     },
+ *     // Just comment
+ *     4: {
+ *       bottomComment: {
+ *         content: 'a \u00d7 b \u00d7 c',
+ *         comment: 'for a > 3',
+ *       },
+ *     },
+ *   },
+ *   formSeries: ['1', '2', '3', '4']
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Comment = {
+    content: TypeEquationPhrase;
+    comment: TypeEquationPhrase;
+    symbol?: string;
+    contentSpace?: number;
+    commentSpace?: number;
+    contentLineSpace?: number;
+    commentLineSpace?: number;
+    scale?: number;
+    inSize?: boolean;
+    fullContentBounds?: boolean;
+    useFullBounds?: boolean;
+} | [
+    TypeEquationPhrase,
+    TypeEquationPhrase,
+    string,
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Equation strike with comment options used with `topStrike` and `bottomStrike`
+ * functions.
+ *
+ * ![](./apiassets/eqn_strikecomment.gif)
+ *
+ * Use with {@link EQN_Strike} symbol.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {string} symbol strike symbol
+ * @property {TypeEquationPhrase} comment
+ * @property {boolean} [inSize] `false` excludes the symbol and comment from
+ * thre resulting size of the equation phrase (`true`)
+ * @property {number} [space] top, right, bottom and left extension of symbol
+ * beyond content (`0.03`)
+ * @property {number} [scale] comment scale (`0.6`)
+ * @property {number} [commentSpace] space from symbol to comment (`0.03`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     x: { symbol: 'strike', color: [0.6, 0.6, 0.6, 1] },
+ *   },
+ *   forms: {
+ *     1: { topStrike: ['radius', 'x', 'radius = 1'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Some different strike examples
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     s1: { symbol: 'strike', style: 'forward', color: [0.6, 0.6, 0.6, 1] },
+ *   },
+ *   forms: {
+ *     // Array equation
+ *     1: { topStrike: ['radius', 's1', 'radius = 1'] },
+ *     // Object definition
+ *     2: {
+ *       bottomStrike: {
+ *         content: 'radius',
+ *         symbol: 's1',
+ *         comment: 'radius = 1',
+ *       },
+ *     },
+ *     // Additional options for layout
+ *     3: {
+ *       bottomStrike: {
+ *         content: 'radius',
+ *         comment: 'radius = 1',
+ *         symbol: 's1',
+ *         scale: 0.8,
+ *         space: 0.1,
+ *         commentSpace: 0.01,
+ *       },
+ *     },
+ *   },
+ *   formSeries: ['1', '2', '3']
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_StrikeComment = {
+    content?: TypeEquationPhrase;
+    symbol?: string;
+    comment?: TypeEquationPhrase;
+    inSize?: boolean;
+    space?: number;
+    scale?: number;
+    commentSpace?: number;
+} | [
+    (TypeEquationPhrase | null | undefined),
+    (string | null | undefined),
+    (TypeEquationPhrase | null | undefined),
+    (boolean | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined)
+];
+/**
+ * Equation padding options.
+ *
+ * ![](./apiassets/eqn_pad.gif)
+ *
+ * Pads the size of the equation phrase with space.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {number} [top] (`0`)
+ * @property {number} [right] (`0`)
+ * @property {number} [bottom] (`0`)
+ * @property {number} [left] (`0`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     1: ['a', { pad: ['b', 0.1, 0.1, 0.1, 0.1] }, 'c'],
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Some different padding examples
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     // No padding
+ *     1: ['a', 'b', 'c'],
+ *     // Array form
+ *     2: ['a', { pad: ['b', 0.1, 0.1, 0.1, 0.1] }, 'c'],
+ *     // Object form
+ *     3: [
+ *       'a',
+ *       {
+ *         pad: {
+ *           content: 'b',
+ *           left: 0.3,
+ *           right: 0.1,
+ *         },
+ *       },
+ *       'c',
+ *     ],
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Pad = {
+    content: TypeEquationPhrase;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+} | [
+    TypeEquationPhrase,
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined),
+    (number | null | undefined)
+];
+/**
+ * Equation matrix
+ *
+ * ![](./apiassets/eqn_matrix.gif)
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {[number, number]} [order] (`[1, length-of-content]`)
+ * @property {string} [left] left bracket symbol
+ * @property {Array<TypeEquationPhrase>} [content] Array of equation phrases
+ * where each element is a matrix element
+ * @property {string} [right] right bracket symbol
+ * @property {number} [scale] scale of matrix elements (`0.7`)
+ * @property {'max' | 'min' | TypeParsablePoint} [fit] cell size -
+ * `min` each cell is a rectangle with width equal to largest width in its
+ * column, and height equal to largest height in its row - `max`
+ * all cells are a square with dimension equal to the largest dimension of the
+ * largest cell - `point` all cells are a rectangle with width as point.x and
+ * height as point.y - note - `max` and `point` only work with
+ * `yAlign`=`'middle'` (`'min'`)
+ * @property {TypeParsablePoint} [space] space between each cell
+ * (`[0.05, 0.05]`)
+ * @property {'baseline' | 'middle'} [yAlign] align cells in a row with the
+ * text baseline, or middle of the cell (`baseline`)
+ * @property {EQN_Bracket} [brac] bracket options not including
+ * the symbols (`{}`)
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     lb: { symbol: 'squareBracket', side: 'left' },
+ *     rb: { symbol: 'squareBracket', side: 'right' },
+ *   },
+ *   forms: {
+ *     1: { matrix: [[2, 2], 'lb', ['a', 'b', 'c', 'd'], 'rb'] },
+ *   },
+ * });
+ * figure.elements._eqn.showForm('1');
+ *
+ * @example
+ * // Some different equation examples
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     lb: { symbol: 'squareBracket', side: 'left' },
+ *     rb: { symbol: 'squareBracket', side: 'right' },
+ *     v: { symbol: 'vinculum' },
+ *   },
+ *   phrases: {
+ *     f: { frac: ['a', 'v', 'b'] },
+ *   },
+ *   forms: {
+ *     // Array equation 2x2 matrix
+ *     1: { matrix: [[2, 2], 'lb', ['a', 'b', 'c', 'd'], 'rb'] },
+ *     // Object definition vector
+ *     2: {
+ *       matrix: {
+ *         content: ['a', 'b', 'c', 'd'],
+ *         left: 'lb',
+ *         right: 'rb',
+ *         order: [1, 4],
+ *       },
+ *     },
+ *     // Additional options for layout
+ *     3: {
+ *       matrix: {
+ *         content: ['f', 'wxyz', 'c', 'd'],
+ *         symbol: 'bSqr',
+ *         left: 'lb',
+ *         right: 'rb',
+ *         order: [2, 2],
+ *       },
+ *     },
+ *     // Fixed size matrix cells
+ *     4: {
+ *       matrix: {
+ *         content: ['f', 'wxyz', 'c', 'd'],
+ *         symbol: 'bSqr',
+ *         left: 'lb',
+ *         right: 'rb',
+ *         order: [2, 2],
+ *         fit: [0.2, 0.2],
+ *         yAlign: 'middle',
+ *       },
+ *     },
+ *   },
+ *   formSeries: ['1', '2', '3', '4']
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Matrix = {
+    order?: [number, number];
+    left?: string;
+    content: TypeEquationPhrase;
+    right?: string;
+    scale?: number;
+    fit?: 'max' | 'min' | TypeParsablePoint;
+    space?: TypeParsablePoint;
+    yAlign?: 'baseline' | 'middle';
+    brac?: EQN_Bracket;
+    fullContentBounds?: boolean;
+} | [
+    ([number, number] | null | undefined),
+    (string | null | undefined),
+    TypeEquationPhrase,
+    (string | null | undefined),
+    (number | null | undefined),
+    ('max' | 'min' | null | undefined),
+    (TypeParsablePoint | null | undefined),
+    ('baseline' | 'middle' | null | undefined),
+    (EQN_Bracket | null | undefined),
+    (boolean | null | undefined)
+];
+/**
+ * Single equation line definition
+ *
+ * Overrides default values of `baselineSpace` and `space` from
+ * {@link EQN_Lines}.
+ *
+ * Use `justify` to define a specific element of the line to align the other
+ * lines with.
+ *
+ * @property {TypeEquationPhrase} content Array of equation
+ * phrases or equation line objects
+ * @property {string} [justify] when {@link EQN_Lines}`.justify` is `'element'`,
+ * use this property to define which element of the line to justify with. If
+ * no element is specified, then left justification will be used.
+ * @property {number} [space] default space between descent of previous line and
+ * ascent of the this line (`0`).
+ * @property {number | null} [baselineSpace] default space between baseline of
+ * previous line and ascent of this line. If not `null` then will override
+ * `space` (`null`).
+ * @property {number} [offset] x Offset of line from justification position
+ * (`0`)
+ *
+ * @see {@link EQN_Lines}
+ *
+ * @interface
+ * @group Misc Equation
+ */
+export type EQN_Line = {
+    content: TypeEquationPhrase;
+    baselineSpace?: null | number;
+    space?: number;
+    justify?: string;
+    offset?: number;
+};
+/**
+ * Equation lines.
+ *
+ * ![](./apiassets/eqn_lines_anim.gif)
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * The equation lines function can split an equation into multiple lines.
+ * This might be because one line is too long, or it might be convenient to
+ * display different forms of the same equation simultaneously on different
+ * lines and then animate between them.
+ *
+ * Lines can be justified to the left, center or right, or lines can be aligned
+ * with a specific element from each line (for instance an equals sign). To
+ * justify to a specific element, use `justify: 'element'` and then define the
+ * element name in the `justify` property of each line.
+ *
+ * Lines can be aligned in y with either the top most part of the top line, the
+ * bottom most part of the bottom line, the middle of the lines or any of the
+ * line's baselines.
+ *
+ * Spacing between lines is defined as either the space between the lowest
+ * point (descent) of one line to the highest point (ascent) of the next,
+ * or as the space between line baselines.
+ * @property {Array<EQN_Line | TypeEquationPhrase>} content Array of equation
+ * phrases or equation line objects
+ * @property {'left' | 'center' | 'right' | 'element'} [justify] how to align
+ * the lines in x. Use 'element' to align the lines with a specific element
+ * from each line (that is defined with the `justify` property in each line)
+ * (`'left'`)
+ * @property {number | null} [baselineSpace] default space between baselines
+ * of lines. If not `null` then will override `space` (`null`).
+ * @property {number} [space] default space between descent of one line and
+ * ascent of the next line (`0`).
+ * @property {'bottom' | 'middle' | 'top' | number} [yAlign] How to align the
+ * lines in y. `number` can be any line index, and it will align the baseline
+ * of that line. So, using `0` will align the first line's baseline. (`0`)
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Two lines, array definition
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   forms: {
+ *     0: {
+ *       lines: [
+ *         [
+ *           ['a', '_ = ', 'b', '_ + _1', 'c', '_ - _1', 'd'],
+ *           ['_ + _2', 'e', '_ - _2', 'f'],
+ *         ],
+ *         'right',
+ *         0.2,
+ *       ],
+ *     },
+ *   },
+ * });
+ *
+ * @example
+ * // Two lines animating to 1
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     equals1: ' = ',
+ *     equals2: ' = ',
+ *   },
+ *   forms: {
+ *     0: {
+ *       lines: {
+ *         content: [
+ *           {
+ *             content: ['a_1', 'equals1', 'b', '_ + ', 'c'],
+ *             justify: 'equals1',
+ *           },
+ *           {
+ *             content: ['d', '_ - ', 'e', 'equals2', 'a_2'],
+ *             justify: 'equals2',
+ *           },
+ *         ],
+ *         space: 0.08,
+ *         justify: 'element',
+ *       },
+ *     },
+ *     1: ['d', '_ - ', 'e', 'equals1', 'b', '_ + ', 'c'],
+ *   },
+ * });
+ *
+ * figure.getElement('eqn').showForm(0);
+ * figure.getElement('eqn').animations.new()
+ *   .goToForm({
+ *     delay: 1, target: '1', duration: 1, animate: 'move',
+ *   })
+ *   .start();
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Lines = {
+    content: Array<TypeEquationPhrase | EQN_Line>;
+    justify?: 'left' | 'right' | 'center' | 'element';
+    baselineSpace?: null | number;
+    space?: number;
+    yAlign?: 'bottom' | 'top' | 'middle' | number;
+    fullContentBounds?: boolean;
+};
+/**
+ * Annotation options object.
+ *
+ * ![](./apiassets/eqn_annotation_1.png)
+ *
+ * ![](./apiassets/eqn_annotation_2.png)
+ *
+ * An annotation's layout is defined by its *position* and *alignement*.
+ * For instance, an annotation at the top right of the content:
+ * <pre>
+ *                  AAAA
+ *                  AAAA
+ *          CCCCCCCC
+ *          CCCCCCCC
+ *          CCCCCCCC
+ *          CCCCCCCC
+ * </pre>
+ * has a *position* relative to the content:
+ * * `xPosition`: `'right'`
+ * * `yPosition`: `'top'`
+ *
+ * and an *alignment* relative to the annotation:
+ * * `xAlign`: `'left'`
+ * * `yAlign`: `'bottom'`
+ *
+ *
+ * In comparison, if `yAlign` were equal to `'top'`, then it would result in:
+ * <pre>
+ *          CCCCCCCCAAAA
+ *          CCCCCCCCAAAA
+ *          CCCCCCCC
+ *          CCCCCCCC
+ * </pre>
+ * @property {TypeEquationPhrase} content
+ * @property {'left' | 'center' | 'right' | number} [xPosition] where number is
+ *  the percentage width of the content (`'center'`)
+ * @property {'bottom' | 'baseline' | 'middle' | 'top' | number} [yPosition]
+ * where number is the percentage height of the content (`'top'`)
+ * @property {'left' | 'center' | 'right' | number} [xAlign] where number is
+ * the percentage width of the annotation (`'center'`)
+ * @property {'bottom' | 'baseline' | 'middle' | 'top' | number} [yAlign] where
+ * number is the percentage width of the annotation (`'bottom'`)
+ * @property {Point} [offset] annotation offset (`[0, 0]`)
+ * @property {number} [scale] annotation scale (`1`)
+ * @property {boolean} [inSize] (`true`)
+ * @property {boolean} [fullContentBounds] (`false`)
+ * @property {string} [reference] calling getBounds on a glyph can return a
+ * suggested position, alignment and offset of an annotation with some name. If
+ * this name is defined here, then `xPosition`, `yPosition`, `xAlign`, `yAlign`
+ * and `offset` will be overwritten with the glyph's suggestion.
+ *
+ * @example
+ * figure.add({
+ *   make: 'equation',
+ *   forms: {
+ *     form1: {
+ *       annotate: {
+ *         content: 'a',
+ *         annotation: {
+ *           content: 'b',
+ *           xPosition: 'left',
+ *           yPosition: 'top',
+ *           xAlign: 'right',
+ *           yAlign: 'bottom',
+ *           scale: 0.5,
+ *         },
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * @example
+ * figure.add({
+ *   make: 'equation',
+ *   forms: {
+ *     form1: {
+ *       annotate: {
+ *         content: 'a',
+ *         annotations: [
+ *           {
+ *             content: 'b',
+ *             xPosition: 'left',
+ *             yPosition: 'bottom',
+ *             xAlign: 'right',
+ *             yAlign: 'top',
+ *             scale: 0.5,
+ *           },
+ *           {
+ *             content: 'c',
+ *             offset: [0, 0.05],
+ *             scale: 0.5,
+ *           },
+ *         ],
+ *       },
+ *     },
+ *   },
+ * });
+ * @interface
+ * @group Misc Equation
+ */
+export type EQN_Annotation = {
+    content: TypeEquationPhrase;
+    xPosition?: 'left' | 'center' | 'right' | number;
+    yPosition?: 'bottom' | 'baseline' | 'middle' | 'top' | number;
+    xAlign?: 'left' | 'center' | 'right' | number;
+    yAlign?: 'bottom' | 'baseline' | 'middle' | 'top' | number;
+    offset?: Point;
+    scale?: number;
+    inSize?: boolean;
+    fullContentBounds?: boolean;
+    reference?: string;
+};
+/**
+ * Encompass glyph options object.
+ *
+ * ![](./apiassets/eqn_encompass_glyph.png)
+ *
+ * A glyph can encompass (surround or overlay) an equation phrase (*content*). The glyph
+ * can also be annotated.
+ * <pre>
+ *
+ *       gggggggggggggg
+ *       gggCCCCCCCCggg
+ *       gggCCCCCCCCggg
+ *       gggCCCCCCCCggg
+ *       gggCCCCCCCCggg
+ *       gggggggggggggg
+ *
+ * </pre>
+ * @property {string} symbol
+ * @property {EQN_Annotation} [annotation] use for one annotation only instead
+ * of property `annotations`
+ * @property {Array<EQN_Annotation>} [annotations] use for one or more
+ * annotations
+ * @property {number} [space] default space the glyph should extend beyond the
+ * top, right, left and bottom sides of the content (`0`)
+ * @property {number} [topSpace] space the glyph extends beyond the content top
+ * @property {number} [rightSpace] space the glyph extends beyond the content
+ * right
+ * @property {number} [bottomSpace] space the glyph extends beyond the content
+ * bottom
+ * @property {number} [leftSpace] space the glyph extends beyond the content
+ * left
+ * @example
+ *  // surrounding content with a box glyph
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     box: { symbol: 'box', lineWidth: 0.005 },
+ *   },
+ *   forms: {
+ *     form1: {
+ *       annotate: {
+ *         content: 'a',
+ *         glyphs: {
+ *           encompass: {
+ *             symbol: 'box',
+ *             space: 0.1, // e.g. only, this will be overwritten by next props
+ *             topSpace: 0.1,
+ *             rightSpace: 0.1,
+ *             bottomSpace: 0.1,
+ *             leftSpace: 0.1,
+ *           },
+ *         },
+ *       },
+ *     },
+ *   },
+ * });
+ * @interface
+ * @group Misc Equation
+ */
+export type EQN_EncompassGlyph = {
+    symbol?: string;
+    annotation?: EQN_Annotation;
+    annotations?: Array<EQN_Annotation>;
+    space: number;
+    topSpace?: number;
+    rightSpace?: number;
+    bottomSpace?: number;
+    leftSpace?: number;
+};
+/**
+ * Left/Right glyph options object.
+ *
+ * ![](./apiassets/eqn_leftrightglyph1.png)
+ *
+ * ![](./apiassets/eqn_leftrightglyph2.png)
+ *
+ * ![](./apiassets/eqn_leftrightglyph3.png)
+ *
+ * A glyph can be to the left or right of an equation phrase (*content*).
+ * The glyph can also be annotated.
+ * <pre>
+ *
+ *       ggg   CCCCCCCC   ggg
+ *       ggg   CCCCCCCC   ggg
+ *       ggg   CCCCCCCC   ggg
+ *       ggg   CCCCCCCC   ggg
+ *
+ * </pre>
+ * @property {string} symbol
+ * @property {EQN_Annotation} [annotation] use for one annotation only instead
+ * of property `annotations`
+ * @property {Array<EQN_Annotation>} [annotations] use for one or more
+ * annotations
+ * @property {number} [space] horizontal space between glyph and content (`0`)
+ * @property {number} [overhang] amount glyph extends above content top and
+ * below content bottom (`0`)
+ * @property {number} [topSpace] amount glyph extends above content top
+ * (overrids `overhang`)
+ * @property {number} [bottomSpace] amount glyph extends below content bottom
+ * (overrids `overhang`)
+ * @property {number} [minContentHeight] force min content height for auto
+ * glyph scaling
+ * @property {number} [minContentDescent] force min content descent for auto
+ * glyph scaling
+ * @property {number} [minContentAscent] force min content ascent for auto
+ * scaling
+ * @property {number} [descent] force descent of glyph
+ * @property {number} [height] force height of glyph (overrides `overhang`,
+ * `topSpace`, `bottomSpace`)
+ * @property {number} [yOffset] offset glyph in y (`0`)
+ * @property {boolean} [annotationsOverContent] `true` means only glyph is
+ * separated from content by `space` and not annotations (false`)
+ *
+ * @example
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     rb: { symbol: 'angleBracket', side: 'right', width: 0.1 },
+ *   },
+ *   forms: {
+ *     form1: {
+ *       annotate: {
+ *         content: 'a',
+ *         glyphs: {
+ *           right: {
+ *             symbol: 'rb',
+ *             space: 0.05,
+ *             overhang: 0.1,
+ *           },
+ *         },
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * @example
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     arrow: { symbol: 'arrow', direction: 'down' },
+ *   },
+ *   forms: {
+ *     form1: {
+ *       annotate: {
+ *         content: 'a',
+ *         glyphs: {
+ *           left: {
+ *             symbol: 'arrow',
+ *             space: 0.05,
+ *             overhang: 0.1,
+ *             annotations: [
+ *               {
+ *                 content: 'b',
+ *                 xPosition: 'center',
+ *                 yPosition: 'top',
+ *                 xAlign: 'center',
+ *                 yAlign: 'bottom',
+ *                 scale: 0.7,
+ *                 offset: [0, 0.05],
+ *               },
+ *               {
+ *                 content: 'n',
+ *                 xPosition: 'center',
+ *                 yPosition: 'bottom',
+ *                 xAlign: 'center',
+ *                 yAlign: 'top',
+ *                 scale: 0.7,
+ *                 offset: [0, -0.05],
+ *               },
+ *             ],
+ *           },
+ *         },
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * @example
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     brace: { symbol: 'brace', side: 'right', width: 0.05 },
+ *   },
+ *   forms: {
+ *     form1: {
+ *       annotate: {
+ *         content: 'c',
+ *         glyphs: {
+ *           left: {
+ *             symbol: 'brace',
+ *             space: 0.05,
+ *             overhang: 0.2,
+ *             annotations: [
+ *               {
+ *                 content: 'a',
+ *                 xPosition: 'left',
+ *                 yPosition: 'top',
+ *                 xAlign: 'right',
+ *                 yAlign: 'middle',
+ *                 offset: [-0.05, 0],
+ *               },
+ *               {
+ *                 content: 'b',
+ *                 xPosition: 'left',
+ *                 yPosition: 'bottom',
+ *                 xAlign: 'right',
+ *                 yAlign: 'middle',
+ *                 offset: [-0.05, 0],
+ *               },
+ *             ],
+ *           },
+ *         },
+ *       },
+ *     },
+ *   },
+ * });
+ * @interface
+ * @group Misc Equation
+ */
+export type EQN_LeftRightGlyph = {
+    symbol?: string;
+    annotation?: EQN_Annotation;
+    annotations?: Array<EQN_Annotation>;
+    space?: number;
+    overhang?: number;
+    topSpace?: number;
+    bottomSpace?: number;
+    minContentHeight?: number;
+    minContentDescent?: number;
+    minContentAscent?: number;
+    descent?: number;
+    height?: number;
+    yOffset?: number;
+    annotationsOverContent?: boolean;
+};
+/**
+ * Top/Bottom glyph options object.
+ *
+ * ![](./apiassets/eqn_topbottomglyph1.png)
+ *
+ * ![](./apiassets/eqn_topbottomglyph2.png)
+ *
+ * A glyph can be to the top or bottom of an equation phrase (*content*).
+ * The glyph can also be annotated.
+ * <pre>
+ *
+ *          gggggggg
+ *          gggggggg
+ *
+ *          CCCCCCCC
+ *          CCCCCCCC
+ *          CCCCCCCC
+ *          CCCCCCCC
+ *
+ *          gggggggg
+ *          gggggggg
+ *
+ * </pre>
+ * @property {string} symbol
+ * @property {EQN_Annotation} [annotation] use for one annotation only instead
+ * of property `annotations`
+ * @property {Array<EQN_Annotation>} [annotations] use for one or more
+ * annotations
+ * @property {number} [space] vertical space between glyph and content (`0`)
+ * @property {number} [overhang] amount glyph extends above content top and
+ * below content bottom (`0`)
+ * @property {number} [width] force width of glyph
+ * @property {number} [leftSpace] amount glyph extends beyond content left
+ * @property {number} [rightSpace] amount glyph extends beyond content right
+ * @property {number} [xOffset] offset glyph in x (`0`)
+ * @property {boolean} [annotationsOverContent] `true` means only glyph is
+ * separated from content by `space` and not annotations (false`)
+ * @example
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     rarrow: { symbol: 'arrow', direction: 'right' },
+ *     larrow: { symbol: 'arrow', direction: 'left' },
+ *   },
+ *   forms: {
+ *     form1: {
+ *       annotate: {
+ *         content: 'a',
+ *         glyphs: {
+ *           top: {
+ *             symbol: 'rarrow',
+ *             space: 0.05,
+ *             overhang: 0.1,
+ *           },
+ *           bottom: {
+ *             symbol: 'larrow',
+ *             space: 0.05,
+ *             overhang: 0.02,
+ *           },
+ *         },
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * @example
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     brace: { symbol: 'brace', side: 'top' },
+ *   },
+ *   forms: {
+ *     form1: {
+ *       annotate: {
+ *         content: ['2_1', 'x_1'],
+ *         glyphs: {
+ *           bottom: {
+ *             symbol: 'brace',
+ *             space: 0.05,
+ *             overhang: 0.2,
+ *             annotations: [
+ *               {
+ *                 content: '2_2',
+ *                 xPosition: 'left',
+ *                 yPosition: 'bottom',
+ *                 xAlign: 'center',
+ *                 yAlign: 'baseline',
+ *                 offset: [0, -0.2],
+ *               },
+ *               {
+ *                 content: 'x_2',
+ *                 xPosition: 'right',
+ *                 yPosition: 'bottom',
+ *                 xAlign: 'center',
+ *                 yAlign: 'baseline',
+ *                 offset: [0, -0.2],
+ *               },
+ *             ],
+ *           },
+ *         },
+ *       },
+ *     },
+ *   },
+ * });
+ * @interface
+ * @group Misc Equation
+ */
+export type EQN_TopBottomGlyph = {
+    symbol?: string;
+    annotation?: EQN_Annotation;
+    annotations?: Array<EQN_Annotation>;
+    space?: number;
+    overhang?: number;
+    width?: number;
+    leftSpace?: number;
+    rightSpace?: number;
+    xOffset?: number;
+    annotationsOverContent?: boolean;
+};
+/**
+ * Options object that aligns a line glyph with either the content or
+ * annotation.
+ *
+ * @property {'left' | 'center' | 'right' | number | string} [xAlign]
+ * @property {'bottom' | 'baseline' | 'middle' | 'top' | number | string,} [yAlign]
+ * @property {0} [space]
+ * @interface
+ * @group Misc Equation
+ */
+export type EQN_LineGlyphAlign = {
+    xAlign?: 'left' | 'center' | 'right' | number | string;
+    yAlign?: 'bottom' | 'baseline' | 'middle' | 'top' | number | string;
+    space?: 0;
+};
+/**
+ * A glyph can be a line {@link EQN_LineSymbol} between some content and an
+ * annotation.
+ *
+ * ![](./apiassets/eqn_lineglyph.png)
+ *
+ * <pre>
+ *
+ *                         aaaaa
+ *                         aaaaa
+ *                       g
+ *                     g
+ *                   g
+ *          CCCCCCCCC
+ *          CCCCCCCCC
+ *          CCCCCCCCC
+ *          CCCCCCCCC
+ *
+ * </pre>
+ * @property {string} symbol
+ * @property {EQN_LineGlyphAlign} [content] alignment and spacing to content
+ * @property {EQN_LineGlyphAlign} [annotation] alignment and spacing to annotation
+ * @property {number} [annotationIndex] annotation index to draw line to
+ *
+ * @example
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     l: {
+ *       symbol: 'line',
+ *       width: 0.005,
+ *       dash: [0.005, 0.005],
+ *       arrow: { start: 'barb' },
+ *     },
+ *   },
+ *   forms: {
+ *     0: {
+ *       annotate: {
+ *         content: 'abc',
+ *         annotation: {
+ *           content: 'def',
+ *           xPosition: 'right',
+ *           yPosition: 'top',
+ *           xAlign: 'left',
+ *           yAlign: 'bottom',
+ *           scale: 0.6,
+ *           offset: [0.2, 0.2],
+ *         },
+ *         glyphs: {
+ *           line: {
+ *             annotationIndex: 0,
+ *             symbol: 'l',
+ *             content: {
+ *               xAlign: 'right',
+ *               yAlign: 'top',
+ *               space: 0.02,
+ *             },
+ *             annotation: {
+ *               xAlign: 'left',
+ *               yAlign: 'bottom',
+ *               space: 0.02,
+ *             },
+ *           },
+ *         },
+ *       },
+ *     },
+ *   },
+ * });
+ * @interface
+ * @group Misc Equation
+ */
+export type EQN_LineGlyph = {
+    symbol: string;
+    content?: EQN_LineGlyphAlign;
+    annotation?: EQN_LineGlyphAlign;
+    annotationIndex?: number;
+};
+/**
+ * Object defining all the glyphs annotating some content.
+ *
+ * Multiple glyphs are ok, but only one per position.
+ *
+ * @property {EQN_EncompassGlyph} [encompass]
+ * @property {EQN_TopBottomGlyph} [top]
+ * @property {EQN_LeftRightGlyph} [right]
+ * @property {EQN_TopBottomGlyph} [bottom]
+ * @property {EQN_LeftRightGlyph} [left]
+ * @property {EQN_LineGlyph} [line]
+ * @interface
+ * @group Misc Equation
+ */
+export type EQN_Glyphs = {
+    left?: EQN_LeftRightGlyph;
+    right?: EQN_LeftRightGlyph;
+    top?: EQN_TopBottomGlyph;
+    bottom?: EQN_TopBottomGlyph;
+    encompass?: EQN_EncompassGlyph;
+    line?: EQN_LineGlyph;
+};
+/**
+ * Equation annotation
+ *
+ * ![](./apiassets/eqn_annotate.gif)
+ *
+ * An annotation is an equation phrase ('annotation') which is laid out relative
+ * to another equation phrase ('content'). For example:
+ * <pre>
+ *                  AAAA
+ *                  AAAA
+ *          CCCCCCCC
+ *          CCCCCCCC
+ *          CCCCCCCC
+ *          CCCCCCCC
+ * </pre>
+ *
+ * The options for defining how to annotate one equation phrase with another is
+ * {@link EQN_Annotation}
+ *
+ * Content can also be annotated with a glyph (that itself may also be
+ * annotated). The glyph can either encompass the content, or can be to the
+ * top, bottom, left or right of the content
+ *
+ * <pre>
+ *                         Top Glyph
+ *                  GGGGGGGGGGGGGGGGGGGGGGG
+ *                  GGGGGGGGGGGGGGGGGGGGGGG     Encompassing Glyph
+ *                                            /
+ *                                          /
+ *        GGG       GGGGGGGGGGGGGGGGGGGGGGG        GGG
+ *        GGG       GGG                 GGG        GGG
+ *        GGG       GGG     CCCCCCC     GGG        GGG
+ * Left   GGG       GGG     CCCCCCC     GGG        GGG   Right
+ * Glyph  GGG       GGG     CCCCCCC     GGG        GGG   Glyph
+ *        GGG       GGG                 GGG        GGG
+ *        GGG       GGGGGGGGGGGGGGGGGGGGGGG        GGG
+ *
+ *
+ *                  GGGGGGGGGGGGGGGGGGGGGGG
+ *                  GGGGGGGGGGGGGGGGGGGGGGG
+ *                       Bottom Glyph
+ * </pre>
+ *
+ * This function is used internally by almost all equation functions
+ * (except for fraction) for their layout. As such, it is very generic and
+ * powerful. It should also almost never neeed to be used as most layouts
+ * can be achieved with a different functions that will have more succinct
+ * code that is more readable.
+ *
+ * This is provided so all layout corner cases not covered by the functions
+ * above are possible - including with custom glyphs.
+ *
+ * Options can *only* be an object.
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {EQN_Annotation} [annotation] use for just one annotation
+ * @property {Array<EQN_Annotation>} [annotations] use for multiple annotations
+ * @property {boolean} [inSize] `true` means resulting size includes
+ * annotations (`true`)
+ * @property {number} [space] extend resulting equation phrase size by space on
+ * top, right, bottom and left sides (`0`)
+ * @property {number} [topSpace] extend resulting equation phrase size by space
+ * on top
+ * @property {number} [bottomSpace] extend resulting equation phrase size by
+ * space on bottom
+ * @property {number} [leftSpace] extend resulting equation phrase size by space
+ * on left
+ * @property {number} [rightSpace] extend resulting equation phrase size by
+ * space on right
+ * @property {number} [contentScale] scale content (`1`)
+ * @property {EQN_Glyphs} [glyphs] glyphs to annotate content with
+ * @property {boolean} [fullContentBounds] use full bounds of content,
+ * overriding any `inSize=false` properties in the content (`false`)
+ * @property {boolean} [useFullBounds] make the bounds of this phrase equal to
+ * the full bounds of the content even if `fullContentBounds=false` and the
+ * brackets only surround a portion of the content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Some different annotation examples
+ * figure.add({
+ *   name: 'eqn',
+ *   make: 'equation',
+ *   elements: {
+ *     bar: { symbol: 'bar', side: 'right' },
+ *   },
+ *   forms: {
+ *     // Single annotation
+ *     1: {
+ *       annotate: {
+ *         content: 'a',
+ *         annotation: {
+ *           content: 'bbb',
+ *           yPosition: 'top',
+ *           yAlign: 'bottom',
+ *           xPosition: 'left',
+ *           xAlign: 'right',
+ *           scale: 0.5,
+ *         },
+ *       },
+ *     },
+ *     // Multiple annotations
+ *     2: {
+ *       annotate: {
+ *         content: 'a',
+ *         annotations: [
+ *           {
+ *             content: 'bbb',
+ *             yPosition: 'top',
+ *             yAlign: 'bottom',
+ *             xPosition: 'left',
+ *             xAlign: 'right',
+ *             scale: 0.5,
+ *           },
+ *           {
+ *             content: 'ccc',
+ *             xPosition: 'right',
+ *             yPosition: 'middle',
+ *             xAlign: 'left',
+ *             yAlign: 'middle',
+ *             scale: 0.5,
+ *             offset: [0.05, 0],
+ *           },
+ *         ],
+ *       },
+ *     },
+ *     // With glyph
+ *     3: {
+ *       annotate: {
+ *         content: 'a',
+ *         glyphs: {
+ *           left:{
+ *             symbol: 'bar',
+ *             overhang: 0.1,
+ *             annotation: {
+ *               content: 'bbb',
+ *               xPosition: 'right',
+ *               yPosition: 'bottom',
+ *               xAlign: 'left',
+ *               yAlign: 'middle',
+ *               scale: 0.5,
+ *             },
+ *           },
+ *         },
+ *       },
+ *     },
+ *   },
+ *   formSeries: ['1', '2', '3'],
+ * });
+ * const eqn = figure.elements._eqn;
+ * eqn.onClick = () => eqn.nextForm();
+ * eqn.setTouchable();
+ * eqn.showForm('1');
+ * @interface
+ * @group Equation Layout
+ */
+export type EQN_Annotate = {
+    content: TypeEquationPhrase;
+    annotation?: EQN_Annotation;
+    annotations?: Array<EQN_Annotation>;
+    fullContentBounds?: boolean;
+    useFullBounds?: boolean;
+    glyphs?: EQN_Glyphs;
+    inSize?: boolean;
+    space?: number;
+    topSpace?: number;
+    bottomSpace?: number;
+    leftSpace?: number;
+    rightSpace?: number;
+    contentScale?: number;
+};
+/**
+ * Equation Functions.
+ *
+ * Contains methods for all equation functions.
+ * @group Misc Equation
+ */
+export declare class EquationFunctions {
+    elements: {
+        [name: string]: FigureElementCollection | FigureElementPrimitive;
+    };
+    shapes: Record<string, any>;
+    phrases: {
+        [phraseName: string]: TypeEquationPhrase;
+    };
+    phraseElements: {
+        [phraseName: string]: Array<FigureElementPrimitive>;
+    };
+    fullLineHeight: EquationForm | null;
+    addElementFromKey: (key: string, params: Record<string, any>) => FigureElementPrimitive | null | undefined;
+    getExistingOrAddSymbol: (keyOrObj: string | Record<string, any>) => FigureElementPrimitive | null | undefined;
+    /**
+     * @hideconstructor
+     */
+    constructor(elements: {
+        [name: string]: FigureElementCollection | FigureElementPrimitive;
+    }, addElementFromKey: (key: string) => FigureElementPrimitive | null | undefined, getExistingOrAddSymbol: (keyOrObj: string | Record<string, any>) => FigureElementPrimitive | null | undefined);
+    stringToElement(content: string): any;
+    parseContent(content: TypeEquationPhrase | null | undefined): any;
+    contentToElement(content: TypeEquationPhrase | Elements | FigureElementPrimitive | FigureElementCollection): Elements;
+    eqnMethod(name: string, params: any): BaseAnnotationFunction | Fraction | Matrix | Lines | Scale | Container | Offset | Color | null;
+    /**
+     * Equation container function
+     * @see {@link EQN_Container} for description and examples
+     */
+    container(options: EQN_Container): Container;
+    /**
+     * Equation container function
+     * @see {@link EQN_Offset} for description and examples
+     */
+    offset(options: EQN_Offset): Offset;
+    /**
+     * Equation bracket function
+     * @see {@link EQN_Bracket} for description and examples
+     */
+    brac(options: EQN_Bracket): BaseAnnotationFunction;
+    /**
+     * Equation bar function
+     * @see {@link EQN_Bar} for description and examples
+     */
+    bar(options: EQN_Bar, forceOptions?: Record<string, any>): BaseAnnotationFunction;
+    /**
+     * Equation annotate function
+     * @see {@link EQN_Annotate} for description and examples
+     */
+    annotate(options: EQN_Annotate): BaseAnnotationFunction;
+    /**
+     * Equation annotate function
+     * @see {@link EQN_Scale} for description and examples
+     */
+    scale(options: EQN_Scale): Scale;
+    /**
+     * Equation color function
+     * @see {@link EQN_Color} for description and examples
+     */
+    color(options: EQN_Color): Color;
+    /**
+     * Equation fraction function
+     * @see {@link EQN_Fraction} for description and examples
+     */
+    frac(options: EQN_Fraction): Fraction;
+    root(optionsOrArray: EQN_Root): BaseAnnotationFunction;
+    /**
+     * Equation super-sub script function
+     * @see {@link EQN_SuperscriptSubscript} for description and examples
+     */
+    supSub(options: EQN_SuperscriptSubscript): BaseAnnotationFunction;
+    /**
+     * Equation superscript function
+     * @see {@link EQN_Superscript} for description and examples
+     */
+    sup(options: EQN_Superscript): BaseAnnotationFunction;
+    /**
+     * Equation subscript function
+     * @see {@link EQN_Subscript} for description and examples
+     */
+    sub(options: EQN_Subscript): BaseAnnotationFunction;
+    /**
+     * Equation touch box function
+     * @see {@link EQN_TouchBox} for description and examples
+     */
+    touchBox(options: EQN_TouchBox): BaseAnnotationFunction;
+    /**
+     * Equation box function
+     * @see {@link EQN_Box} for description and examples
+     */
+    box(options: EQN_Box): BaseAnnotationFunction;
+    /**
+     * Equation pad function
+     * @see {@link EQN_Pad} for description and examples
+     */
+    pad(options: EQN_Pad): BaseAnnotationFunction;
+    /**
+     * Equation top bar function
+     * @see {@link EQN_Bar} for description and examples
+     */
+    topBar(options: EQN_Bar): BaseAnnotationFunction;
+    /**
+     * Equation bottom bar function
+     * @see {@link EQN_Bar} for description and examples
+     */
+    bottomBar(options: EQN_Bar): BaseAnnotationFunction;
+    /**
+     * Equation matrix function
+     * @see {@link EQN_Matrix} for description and examples
+     */
+    matrix(options: EQN_Matrix): BaseAnnotationFunction | Matrix;
+    /**
+     * Equation matrix function
+     * @see {@link EQN_Matrix} for description and examples
+     */
+    lines(options: EQN_Lines): Lines;
+    /**
+     * Equation integral function
+     * @see {@link EQN_Integral} for description and examples
+     */
+    int(options: EQN_Integral): BaseAnnotationFunction;
+    /**
+     * Equation sum of function
+     * @see {@link EQN_SumOf} for description and examples
+     */
+    sumOf(options: EQN_SumOf): BaseAnnotationFunction;
+    /**
+     * Equation product of function
+     * @see {@link EQN_ProdOf} for description and examples
+     */
+    prodOf(options: EQN_ProdOf): BaseAnnotationFunction;
+    sumProd(optionsOrArray: EQN_SumOf | EQN_ProdOf): BaseAnnotationFunction;
+    processComment(optionsOrArray: EQN_Comment): any[];
+    /**
+     * Equation top comment of function
+     * @param {EQN_Comment} options
+     * @see {@link EQN_Comment} for description and examples
+     */
+    topComment(...args: any[]): BaseAnnotationFunction;
+    /**
+     * Equation bottom comment of function
+     * @param {EQN_Comment} options
+     * @see {@link EQN_Comment} for description and examples
+     */
+    bottomComment(...args: any[]): BaseAnnotationFunction;
+    /**
+     * Equation strike of function
+     * @see {@link EQN_Strike} for description and examples
+     */
+    strike(options: EQN_Strike): BaseAnnotationFunction;
+    processStrike(optionsOrContent: EQN_StrikeComment): any[];
+    /**
+     * Equation top strike of function
+     * @param {EQN_Strike} options
+     * @see {@link EQN_Strike} for description and examples
+     */
+    topStrike(...args: any[]): BaseAnnotationFunction;
+    /**
+     * Equation bottom strike of function
+     * @param {EQN_Strike} options
+     * @see {@link EQN_Strike} for description and examples
+     */
+    bottomStrike(...args: any[]): BaseAnnotationFunction;
+}