Scene Management

2 min read

PinePaper’s Scene Manager enables multi-scene presentations and transitions.

Scene Concept

A Scene contains:

  • Interactive items (ItemRegistry)
  • Relations between items (RelationRegistry)
  • Decorative background (DecorativeRegistry)
  • Background configuration

Creating Scenes

// Create empty scene
const sceneId = app.sceneManager.createScene('intro');

// Save current state as scene
app.sceneManager.saveCurrentAsScene('main-content');

Loading Scenes

app.sceneManager.loadScene('intro');

Listing Scenes

const scenes = app.sceneManager.listScenes();
// ['intro', 'main-content', 'outro']

Deleting Scenes

app.sceneManager.deleteScene('old-scene');

Scene Transitions

Define Transitions

// Time-based transition
app.sceneManager.defineTransition('intro', 'main', {
  condition: 'after',
  value: 3000,  // 3 seconds
  animation: 'fade'
});

// Event-based transition
app.sceneManager.defineTransition('main', 'outro', {
  condition: 'on',
  event: 'click',
  target: 'nextButton'
});

Chain Scenes

app.sceneManager.chain(['intro', 'main', 'outro'], {
  loop: false,
  autoPlay: true
});

Export/Import

// Export scene
const sceneData = app.sceneManager.exportScene('intro');
const json = JSON.stringify(sceneData);

// Import scene
app.sceneManager.importScene(JSON.parse(json));

Scene Structure

{
  id: 'scene_intro',
  name: 'Introduction',
  items: ['item_1', 'item_2'],
  relations: [
    { from: 'item_1', to: 'item_2', type: 'orbits', params: {...} }
  ],
  decorative: [
    { type: 'generator', name: 'drawSunburst', params: {...} }
  ],
  background: { color: '#1e293b' }
}

Current Scene

// Get current scene ID
const current = app.sceneManager.currentSceneId;

// Check if scene is modified
const dirty = app.sceneManager.isDirty;