Figure Elements API Reference

Contents

• FigureElement
• FigureElementPrimitive
• FigureElementCollection

---

FigureElement

Figure Element base class

The set of properties and methods shared by all figure elements

A figure element has several color related properties. Color is defined as an RGBA array with values between 0 and 1. The alpha channel defines the transparency or opacity of the color where 1 is fully opaque and 0 is fully transparent.

The color property stores the element's current color, while the defaultColor property stores the element's color when not dimmed or dissolving. Color should only be set using the setColor method.

An element can be "dimmed" or "undimmed". For instance, a red element might turn grey when dimmed. The property dimColor stores the desired color to dim to and should be set with setDimColor()

An element can be dissolved in or out with animation. Dissolving an element out transitions its opacity from its current value to 0. The opacity property is used when dissolving. The opacity is multiplied by the alpha channel of color to net a final opacity. Opacity should not be set directly as it will be overwritten by dissolve animations.

Notifications - The notification manager property notifications will publish the following events:

• beforeSetTransform: published just before the transform property is changed
• setTransform: published whenever the transform property is changed
• startBeingMoved: published when the element starts being moved by touch
• stopBeingMoved: published when the element stops being moved by touch
• startMovingFreely
• stopMovingFreely
• show: published when element is shown
• hide: published when element is hidden
• visibility: published when element element is shown or hidden
• onClick: published when element is clicked on
• color: published whenever color is set
• beforeDraw
• afterDraw
• setState: state of element has been set

@class

Properties

• name: string

  reference name of element

• isShown: boolean

  if false then element will not be processed on next draw

• transform: Transform

  transform to apply element

• lastDrawTransform: Transform

  transform last used for drawing - includes cascade or all parent transforms

• parent: FigureElement | null

  parent figure element - null if at top level of figure

• isTouchable: boolean

  must be true to move or execute onClick

• isMovable: boolean

  must be true to move

• onClick: string | () => void

  callback if touched or clicked

• color: [number, number, number, number]

  element's current color defined as red, green, blue, alpha with range 0 to 1

• dimColor: [number, number, number, number]

  color to use when dimming element

• defaultColor: [number, number, number, number]

  color to go to when undimming element

• opacity: number

  number between 0 and 1 that is multiplied with color alpha channel to get final opacity

• move: OBJ_ElementMove

  movement parameters

• scenarios: OBJ_Scenarios

  scenario presets

• state: ElementState

  current state of element

• animations: AnimationManager

  element animation manager

• notifications: NotificationManager

  notification manager for element

• fnMap: FunctionMap

  function map for use with Recorder

• customState: Object

  put any custom state information that needs to be captured with recorder here - only stringify-able values can go in this object like strings, numbers, booleans and nested arrays or objects containing these. Functions should not be put in here - use string identifiers to fnMap if functions are needed.

---

FigureElementPrimitive

Extends FigureElement

Primitive figure element

A primitive figure element is one that handles an object (drawingObject) that draws to the screen. This object may be a GLObject, a TextObject or a HTMLObject.

@class

---

FigureElementCollection

Extends FigureElement

Collection figure element

A collection manages a number of children FigureElements, be they primitives or collections.

A collection's transform will be passed onto all the children elements.

@class

---