Scene Management

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' }
}

Scene State

getSceneState()

Get the full scene state including canvas size, items, background, and arrows.

Returns: object

const state = app.getSceneState();
// {
//   canvasSize: { width: 800, height: 600 },
//   items: [...],
//   background: { color: '#1e293b', generator: null },
//   arrows: [...],
//   relations: [...]
// }

loadScene(templateData)

Load template data into the current scene, replacing all existing content.

Parameters:

• templateData (object): Template data object (from exportTemplate() or template files)

// Load from exported template
const template = JSON.parse(savedTemplateJson);
app.loadScene(template);

Current Scene

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

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