Skip to content

Interactive slides: support Clickable/Draggable/Hoverable objects in Player slidesMode #449

Description

@maloyan

Description

Follow-up to #215 (comment: #215 (comment)). @Wizorx asked:

is there an option to interact with a slide? Like adding a static one, or one with a moving/rotating/draggable/clickable object which can be interacted with?

What already exists:

  • Interaction primitives for a live Scene: makeDraggable, makeClickable, makeHoverable, SelectionManager (src/interaction/)
  • Slides mode in Player (slidesMode, nextSlide({ loop, autoNext })) from Slides behavior #215
  • Static slides are achievable via wait() + nextSlide(); perpetual animation via nextSlide({ loop: true })

The gap — these two systems don't compose:

  1. Player manages its own render loop, which stops entirely while paused on a slide (Player.ts _startLoop, the loop bails when !this._isPlaying). Interaction handlers (e.g. Draggable) mutate mobjects but never call scene.render(), so dragging/clicking on a paused slide produces no visual feedback.
  2. On a looping slide, MasterTimeline.seek() re-applies recorded values every frame, overwriting any user-driven changes to animated properties.
  3. Player never wires up or exposes the interaction classes; there is no documented/tested path to attach them to player.scene, and no example combining slidesMode with Clickable/Draggable.

Use Case

Live presentations where a slide contains an object the audience/presenter can rotate, drag, or click — e.g. a draggable point on a graph that updates a plotted curve while the slide loops.

Proposed Solution

  • Keep rendering (or render on-demand) while paused on a slide so interaction handlers have visual feedback — e.g. interaction classes request a render via the scene, or Player runs a lightweight idle render loop in slidesMode.
  • Let interactive state survive looping slides: either exclude user-modified mobjects from timeline re-application during a loop, or document that interactive mobjects should not be animated within a looping slide.
  • Add a player.interactive opt-in (or just an example + docs) showing makeDraggable/makeClickable attached to player.scene in slidesMode.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions