figureone
    Preparing search index...

    Class Equation

    An Equation is a collection of elements that can be arranged into different forms.

    Equation should be instantiated from an object definition, or from the figure.collections.equation method.

    Equation includes two additional animation steps in Equation.animations:

    • GoToFormAnimationStep
    • NextFormAnimationStep

    In addition to the notifications published by FigureElement, an Equation publishes a formChanged notification whenever the displayed form may have changed. The payload is an object { phase, form, fromForm?, progress? } where phase is one of:

    • 'showForm': a form was set via showForm. Callers can suppress this event by passing notify: false to showForm; internal showForm calls made by goToForm do this so the goToForm* event stream is not interleaved with stray showForm events.
    • 'goToFormStart': a goToForm call has just begun
    • 'goToFormStep': published on every animation frame during a goToForm animation; progress is the percentage (0-1) through the animation. A final goToFormStep with progress: 1 is always published immediately before goToFormEnd
    • 'goToFormEnd': a goToForm call has finished
    • fromForm is only included on the goToForm* phases (it carries the fromWhere option from goToForm); it is absent on showForm. progress is only included on goToFormStep. The event order for a goToForm call is always: goToFormStart → zero-or-more goToFormStep → goToFormStep with progress: 1 → goToFormEnd.

    A user-initiated showForm made while a goToForm animation is running will publish its showForm event interleaved with the ongoing goToFormStep stream — listeners that drive UI from "the current transition" should account for this. Pass notify: false to suppress.

    To test examples, append them to the boilerplate

    // Create with options definition
    figure.add({
      name: 'eqn',
      make: 'equation',
      elements: {
        a: 'a',
        b: { color: [0, 0, 1, 1] },
        c: 'c',
        equals: ' = ',
        plus: ' + ',
      },
      forms: {
        1: ['a', 'equals', 'b', 'plus', 'c'],
      },
    });

    // Create with methods
    const eqn = figure.collections.equation();
    eqn.addElements({
      a: 'a',
      b: { color: [0, 0, 1, 1] },
      c: 'c',
      equals: ' = ',
      plus: ' + ',
    });
    eqn.addForms({
      1: ['a', 'equals', 'b', 'plus', 'c'],
    });
    figure.add('eqn', eqn);
    eqn.showForm('1');

    Hierarchy (View Summary)

    Index

    Methods

    setScene setRotation setScale setTransform isSetColorIgnored setScenario saveScenario getPath transformPoint spaceTransformMatrix getScale getRotation getPosition setFigurePosition setPositionToElement setTouchable setMove setMovable toggleShow getTransform isMoving toFront toBack add pulse getElement getElements get show hide getBorder setColor setDimColor undim dim getAllPrimitives getAllElements recreateAtlases getChildren isAnimating setFormSeries getFormSeries layoutForms updateElementText addElements setPosition addForms getFormElements getFunctionElements getPhraseElements getCurrentForm setCurrentForm showForm getForm goToForm prevForm nextForm replayCurrentForm

    Properties

    eqn animations

    Methods

    • Conveniently set the first scale of the element's transform.

      Parameters

      • scaleOrX: number | TypeParsablePoint

        horizontal scale - either define as full x-y point, or as a number. If scaleOrX is a number and y is null, then both x and y will be equally scaled

      • y: number | null = null

        y coordinate if scaleOrX is a number (null)

      • z: number = 1

      Returns void

    • Returns true if a setColor command tagged with source from should be ignored by this element (per ignoreSetColor). Untagged commands (from == null) are never ignored.

      Parameters

      • from: string | null = null

      Returns boolean

    • Transform a point between 'draw', 'local', 'figure', 'gl' and 'pixel' spaces.

      plane is only needed when converting from pixel space (a 2D space) to 'figure', 'local' or 'draw' spaces (a 3D space). A ray from the pixel is drawn into the screen and the intersection with the defined plane is returned.

      'pixel' to 'gl' is also a 2D to 3D transformation, but in this case the XY plane at z = 0 is used in gl space.

      Parameters

      • point: TypeParsablePoint
      • fromSpace: "figure" | "pixel" | "gl" | "local" | "draw"

        space to convert point from

      • toSpace: "figure" | "pixel" | "gl" | "local" | "draw"

        space to convert point to

      • toSpacePlane: TypeParsablePlane = ...

      Returns Point

    • Return the first rotation in the element's transform.

      Parameters

      • normalize: "" | "0to360" | "-180to180" = ''

        how to normalize the returned angle where '' returns the raw angle

      Returns number

      scale

    • Get position of element

      By default the first translation of the element's transform is returned. This is effectively the element's location in 'local' coordinates.

      The position of the element relative to its horizontal and vertical bounds can also be returned. Use xAlign to find the x coordinate of the left, center, right or percentage width from left of the element. Use yAlign to find the bottom, middle, top or percentage height from bottom of the element.

      Parameters

      • space: TypeCoordinateSpace = 'local'

        the space to return the position in

      • xAlign: number | "left" | "right" | "center" | "location" = 'location'

        horizontal alignment of position. Use a number to define the horizontal position in percentage width from the left.

      • yAlign: number | "top" | "bottom" | "middle" | "location" = 'location'

        vertical alignment of position. Use a number to define the vertical position in percentage height from the bottom.

      Returns Point

    • Add a figure element to this collection.

      If adding an array of elements, then the added elements will be returned in an array (even if only one element is added). If not adding an array, then that single element will be returned.

      Parameters

      Returns any

      added element, or array of added elements

      // Add name and element
      const collection = figure.add({ make: 'collection' });
      const element = figure.primitives.polygon({ radius: 1 });
      collection.add('name', element);

      // Element only (name will be autogenerated)
      const collection = figure.add({ make: 'collection' });
      const element = figure.primitives.polygon({ radius: 1 });
      collection.add(element);

      // Element definition (if no name is provided, then name will
      // be auto generated)
      const collection = figure.add({ make: 'collection' });
      collection.add({
        make: 'polygon',
        radius: 1,
      });

      // Array of elements
      const collection = figure.add({ make: 'collection' });
      const polygon1 = figure.primitives.polygon({ radius: 1 });
      collection.add([
        polygon1,
        {
          make: 'polygon',
          radius: 0.2,
          color: [0, 0, 1, 1],
        },
      ]);

    • Pulse element.

      An element can be pulsed in scale, a rotation or a translation.

      The scale pulse can either be a single pulse, or a number of copies with a range of scales - which has the effect of making regular polygons thick.

      Either pass in a callback, or an options object defining the pulse and callback.

      Parameters

      • optionsOrElementsOrDone:
            | (string | FigureElement)[]
            | OBJ_Pulse & { elements?: (string | FigureElement)[] }
            | ((arg: any) => void)
            | null
            | undefined = null
      • done: ((arg: any) => void) | null | undefined = null

      Returns void

    • Get element from an element path with '.' separators.

      For instance, if a collection has a child collection 'a', which has a child primitive 'b', then the path would be: 'a.b'.

      Parameters

      Returns any

      element at path. If elementPath is null, then this element is returned. If elementPath is invalid then null is returned.

      element.getElement

      // Get all the elements from a figure
      figure.add(
        {
          name: 'c',
          make: 'collection',
          elements: [
            {
              name: 'tri',
              make: 'triangle',
              height: 0.4,
              width: 0.4,
            },
            {
              name: 'text',
              make: 'text',
              text: 'triangle',
              position: [0, -0.4],
              xAlign: 'center',
            },
          ],
        },
      );

      const c = figure.getElement('c');
      // Elements within collections can be found with dot notation
      const tri = figure.getElement('c.tri');
      // Or the collection can be queried directly
      const text = c.getElement('text');

    • Get the border or touchBorder of a FigureElementCollection in a defined coordinate space.

      Parameters

      • space: Type3DMatrix | TypeCoordinateSpace = 'local'

        ('local)

      • border: "border" | "touchBorder" = 'border'

        ('border')

      • children: (string | FigureElement)[] | null | undefined = null

        choose specific children only - use null for all children (null)

      • shownOnly: boolean = true

        if true then only children that are shown will be used (true)

      Returns any[]

    • Set element color.

      Parameters

      • color: TypeColor = ...

        RGBA color from 0 to 1

      • setDefault: boolean = true

        also set the default color to this color

      • from: string | null = null

        source label of this color command; if it matches ignoreSetColor the command is ignored

      Returns void

    • For equation layout. If an equation layout happens before a desired font is fully loaded, then use this method to re-layout the equation when the font is available.

      Either the current form only, all forms already laid out (set), or all forms of the equation can be re-laid-out.

      Parameters

      • forms: "none" | "all" | "reset" | "current" | "set" = 'all'
      • show: boolean = true

        true will re-show current form

      Returns void

    • Return all the elements inside the named equation function within a form.

      Any equation function (container, fraction, matrix, etc.) can be tagged with a name property in its options — this has no layout effect, but makes the function's sub-tree addressable here.

      With mode: 'all' (default), walks the entire tree, collects every matching function (including those nested inside other matches), and returns the de-duplicated union of their elements. With mode: 'first', returns only the elements inside the first matching function found by a depth-first traversal.

      If formName is null (default), the current form is used.

      Returns an empty array if the form does not exist, or no matching function is found.

      Parameters

      • name: string
      • OptionalformName: string | null = null

        (null — uses current form)

      • Optionalmode: "all" | "first" = 'all'

        ('all')

      • OptionalincludeHidden: boolean = false

        (false)

      Returns any[]

    • Return all the elements that are used in an equation phrase.

      Parameters

      • phrase: string | string[]

      Returns any[]

    • Set current equation form - Note, this does not show the form.

      Parameters

      • formOrName: string | EquationForm

      Returns void

    • Show equation form.

      Parameters

      • formOrName: string | EquationForm = ...

        the form, or its name, to show

      • animationStop: boolean = true

        if true, stops any in-progress element animations before rendering the form (default true)

      • notify: boolean = true

        if true, publish a formChanged notification with phase: 'showForm' (default true). Pass false to suppress the event — useful for bulk updates or when this showForm is part of a larger transition the caller is broadcasting separately. The internal showForm calls made by goToForm use false so the goToForm* event stream is not interleaved with stray showForm events.

      Returns void

    • Get an equation form object from a form name

      Parameters

      • formOrName: string | EquationForm

      Returns EquationForm | null

    • Start an animation to an equation form

      Parameters

      • optionsIn: EQN_EquationGoToForm = {}

      Returns void

    • Animate to previous form in the current form series

      Parameters

      • durationOrOptions: number | EQN_EquationGoToForm | null = null
      • delay: number = 0

      Returns void

    • Animate to next form in the current form series

      Parameters

      • durationOrOptions: number | EQN_EquationGoToForm | null = null
      • delay: number = 0

      Returns void

    Properties

    eqn: {
        forms: { [formName: string]: EquationForm };
        functions: EquationFunctions;
        symbols: EquationSymbols;
        currentForm: string;
        font: FigureFont;
        textFont: FigureFont;
        scale: number;
        formSeries: { [key: string]: string[] };
        currentFormSeries: string[];
        currentFormSeriesName: string;
        formDefaults: {
            alignment: {
                fixTo: Point | FigureElementCollection | FigureElementPrimitive;
                xAlign: TypeHAlign;
                yAlign: TypeVAlign;
            };
            elementMods: OBJ_ElementMods;
            duration?: number;
            translation?: EQN_TranslationStyle;
            onShow?: string
            | (() => void)
            | null;
            onTransition?: string | (() => void) | null;
            layout?: "init" | "lazy" | "always";
            ignoreColor?: boolean;
            ignoreOpacity?: boolean;
        };
        isAnimating: boolean;
        descriptionElement: FigureElementPrimitive
        | null;
        descriptionPosition: Point;
        formRestart:
            | {
                moveFrom?: Point
                | FigureElementCollection;
                pulse?: { duration: number; scale: number; element: FigureElement };
            }
            | null
            | undefined;
    }

    Equation parameters and functions

    animations: {
        nextForm: (...opt: any[]) => TriggerAnimationStep;
        goToForm: (...opt: any[]) => TriggerAnimationStep;
    } & default

    AnimationManager extended to include additional animation steps specific to equations

    Settings

    Member Visibility

    On This Page

    Methods
    Properties