OpenLIME

Class: Viewer

Viewer

Central class of the OpenLIME framework. Creates and manages the main viewer interface, coordinates components, and handles rendering pipeline.

Core Responsibilities:

  • Canvas management
  • Layer coordination
  • Camera control
  • Event handling
  • Rendering pipeline
  • Resource management

Component Relationships:

Viewer
├── Canvas
│   └── Layers
├── Camera
├── PointerManager
└── Controllers

Rendering Pipeline:

  1. Camera computes current transform
  2. Canvas prepares render state
  3. Layers render in order
  4. Post-processing applied
  5. Frame timing recorded

Event System:

  • draw: Emitted after each frame render
  • resize: Emitted when viewport changes

Performance Considerations:

  • Uses requestAnimationFrame
  • Tracks frame timing
  • Handles device pixel ratio
  • Optimizes redraw requests

Resource Management:

  • Automatic canvas cleanup
  • Proper event listener removal
  • ResizeObserver handling

new Viewer(div [, options])

Creates a new Viewer instance

Parameters:
Name Type Argument Description
div HTMLElement | string

Container element or selector
options ViewerOptions <optional>

Configuration options

Properties
Name Type Argument Default Description
idleTime number <optional>
 60

Seconds of inactivity before idle event
Source:
Fires:
Throws:

If container element not found

Component Setup:

  1. Creates/configures canvas element
  2. Sets up overlay system
  3. Initializes camera
  4. Creates pointer manager
  5. Sets up resize observer
Type
Error
Example
```javascript
// Basic viewer setup
const viewer = new OpenLIME.Viewer('#container');

// Add image layer
const layer = new OpenLIME.Layer({
    layout: 'image',
    type: 'image',
    url: 'image.jpg'
});
viewer.addLayer('main', layer);

// Access components
const camera = viewer.camera;
const canvas = viewer.canvas;
```

Methods

addController(controller)

Adds a device event controller to the viewer.

Parameters:
Name Type Description
controller Controller

An OpenLIME controller.
Source:

addLayer(id, layer)

Adds layer to viewer

Parameters:
Name Type Description
id string

Unique layer identifier
layer Layer

Layer instance
Source:
Fires:
Example
```javascript
const layer = new OpenLIME.Layer({
    type: 'image',
    url: 'image.jpg'
});
viewer.addLayer('background', layer);
```

redraw()

Schedules next frame for rendering Uses requestAnimationFrame for optimal performance

Source:

removeLayer(layer)

Removes layer from viewer

Parameters:
Name Type Description
layer Layer | string

Layer instance or ID
Source:
Fires:

Events

draw

Fired when frame is drawn

Source:

resize

Fired when viewer is resized

Properties:
Name Type Description
viewport Viewport

New viewport configuration
Source: