Class: Timeline

view/Timeline.Timeline(container, presentation, selection, controller)

Timeline pane of the presentation editor.

The Timeline view shows a table where columns represent frames and rows represent layers. The user can choose to manipulate only a subset of the layers of the document. The other layers are grouped into a "Default" row.

The Timeline view allows the user to:

  • choose editable layers from the document
  • show/hide layers
  • create/delete/reorder frames
  • add/remove layers and frames to/from the selection

Constructor

new Timeline(container, presentation, selection, controller)

Initialize a new timeline view.

Parameters:
Name Type Description
container HTMLElement

The HTML element that will contain this preview area.
presentation module:model/Presentation.Presentation

The current Sozi presentation.
selection module:model/Selection.Selection

The object that manages the frame and layer selection.
controller module:Controller.Controller

The controller that manages the current editor.
Source:
To Do:
  • Add documentation

Extends

Members

container :HTMLElement

The HTML element that will contain this preview area.

Type:
  • HTMLElement
Overrides:
Source:

controller :module:Controller.Controller

The controller that manages the current editor.

Type:
Overrides:
Source:

presentation :module:model/Presentation.Presentation

The current Sozi presentation.

Type:
Source:

selection :module:model/Selection.Selection

The object that manages the frame and layer selection.

Type:
Source:

state :object

Form field values that need to be set after rendering.

Type:
  • object
Overrides:
Source:

Methods

render() → {VNode}

Render this view as a virtual DOM tree.

Overrides:
Source:
Returns:
  • A virtual DOM tree for this view.
Type
VNode

repaint()

Repaint this view.

This will render the current view using the result of render.

Overrides:
Source:
Listens to Events:

toggleLayerVisibility(layerIndex, evt)

Toggle the visibility of a layer in the preview area.

Parameters:
Name Type Description
layerIndex number

The index of the layer to change.
evt MouseEvent

The DOM event that triggered this action.
Source:
See:
Listens to Events:
  • event:click

updateFrameSelection(frameIndex, evt)

Update the list of selected frames.

This method is called when the user clicks a frame heading in the timeline.

Parameters:
Name Type Description
frameIndex number

The index of the frame to add or remove.
evt MouseEvent

The DOM event that triggered this action.
Source:
See:
Listens to Events:
  • event:click

updateLayerAndFrameSelection(layerIndex, frameIndex, evt)

Update the list of selected frames and layers.

This method is called when the user clicks a cell inside the timeline table.

Parameters:
Name Type Description
layerIndex number

The index of the layer to add or remove.
frameIndex number

The index of the frame to add or remove.
evt MouseEvent

The DOM event that triggered this action.
Source:
See:
Listens to Events:
  • event:click

updateLayerSelection(layerIndex, evt)

Update the list of selected layers.

This method is called when the user clicks a layer heading in the timeline.

Parameters:
Name Type Description
layerIndex number

The index of the layer to add or remove.
evt MouseEvent

The DOM event that triggered this action.
Source:
See:
Listens to Events:
  • event:click