SnapFramework.Scene behaviour (SnapFramework v0.2.0-beta.1) View Source

Overview

SnapFramework.Scene aims to make creating Scenic scenes and components easier as well as add more power overall to graph updates and nesting components, and comes with a lot of convenient features. See Scenic.Scene docs for more on scenes.

Creating a scene is pretty straight forward.

defmodule Example.Scene.MyScene do
  use SnapFramework.Scene

  def setup(scene) do
    assign(scene,
      dropdown_opts: [{"Option 1", "Option 1"}, {"Option 2", "Option 2"}, {"Option 3", "Option 3"}],
      dropdown_value: "Option 1"
    )
  end

  def render(assigns) do
    ~G"""
    <%= graph font_size: 20 %>

    <%= primitive Scenic.Primitive.Text,
        "selected value #{@dropdown_value}",
        id: :dropdown_value_text,
        translate: {20, 80}
    %>

    <%= component Scenic.Component.Dropdown, {
            @dropdown_opts,
            @dropdown_value
        },
        id: :dropdown,
        translate: {20, 20}
    %>
    """
  end

  def process_event({:value_changed, :dropdown, value}, _, scene) do
    {:noreply, assign(scene, dropdown_value: value)}
  end
end

Having just the above should be enough to get the scene rendering. Whenever you change one of the variables used in the template SnapFramework will automatically rebuild the graph and push it.

Setup and Mount Callbacks

If you need to do some special setup, like request input, subscribe to a PubSub service, or add some runtime assigns. You can do that in the setup callback. It gives you the scene struct and should return a scene struct.

These callbacks do not trigger redraws.

The setup callback runs before the graph is initialized. So any added or modified assigns will be included in the template. The graph however is not included on the scene yet.

defmodule Example.Scene.MyScene do
  use SnapFramework.Scene

  def setup(scene) do
    assign(scene,
      dropdown_opts: [{"Option 1", "Option 1"}, {"Option 2", "Option 2"}, {"Option 3", "Option 3"}],
      dropdown_value: "Option 1"
    )
  end

  def render(assigns) do
    ~G"""
    <%= graph font_size: 20 %>

    <%= primitive Scenic.Primitive.Text,
        "selected value #{@dropdown_value}",
        id: :dropdown_value_text,
        translate: {20, 80}
    %>

    <%= component Scenic.Component.Input.Dropdown, {
            @dropdown_opts,
            @dropdown_value
        },
        id: :dropdown,
        translate: {20, 20}
    %>
    """
  end

  def process_event({:value_changed, :dropdown, value}, _, scene) do
    {:noreply, assign(scene, dropdown_value: value)}
  end
end

If you need to do something after the graph is initialized, you can use the mounted callback. Like the setup callback it gives you the scene, and should return a scene.

Usually this is for sending events to child components.

defmodule Example.Scene.MyScene do
  use SnapFramework.Scene

  def setup(scene) do
    assign(scene,
      dropdown_opts: [{"Option 1", "Option 1"}, {"Option 2", "Option 2"}, {"Option 3", "Option 3"}],
      dropdown_value: "Option 1"
    )
  end

  def mounted(scene) do
    send_event(scene, :dropdown, :set_value, "Option 2")
  end

  def render(assigns) do
    ~G"""
    <%= graph font_size: 20 %>

    <%= primitive Scenic.Primitive.Text,
        "selected value #{@dropdown_value}",
        id: :dropdown_value_text,
        translate: {20, 80}
    %>

    <%= component Scenic.Component.Input.Dropdown, {
            @dropdown_opts,
            @dropdown_value
        },
        id: :dropdown,
        translate: {20, 20}
    %>
    """
  end

  def process_event({:value_changed, :dropdown, value}, _, scene) do
    {:noreply, assign(scene, dropdown_value: value)}
  end
end

Link to this section Summary

Callbacks

Called after graph is initialized. Usually for sending events to child components.

Called when a scene receives a call message. The returned state is diffed, and effects are run.

Called when a scene receives a cast message. The returned state is diffed, and effects are run.

Called when a scene receives an event message. The returned state is diffed, and effects are run.

Called when a scene receives a fetch message. Use this to return data to the caller. The returned state is diffed, and effects are run.

Called when a scene receives a get message. Use this to return data to the caller. The returned state is diffed, and effects are run.

Called when a scene receives a message. The returned state is diffed, and effects are run.

Called when a scene receives an input messsage. The returned state is diffed, and effects are run.

Called when a scene receives a put message. Use this to update data on your state. The returned state is diffed, and effects are run.

Called when a scene receives an update message. Use this to update data and options on your state. The returned state is diffed, and effects are run.

Called before graph is initialized. This is for setting up assigns used by your graph or subscribing to input or PubSub messages.

Link to this section Callbacks

Specs

mount(Scene.t()) :: Scene.t()

Called after graph is initialized. Usually for sending events to child components.

Link to this callback

process_call(term, from, t)

View Source (optional)

Specs

process_call(term(), GenServer.from(), Scene.t()) ::
  {atom(), term(), Scene.t()} | {atom(), Scene.t()}

Called when a scene receives a call message. The returned state is diffed, and effects are run.

Link to this callback

process_cast(any, t)

View Source (optional)

Specs

process_cast(any(), Scene.t()) :: {atom(), Scene.t()}

Called when a scene receives a cast message. The returned state is diffed, and effects are run.

Link to this callback

process_event(term, pid, t)

View Source (optional)

Specs

process_event(term(), pid(), Scene.t()) ::
  {atom(), Scene.t()}
  | {atom(), Scene.t(), list()}
  | {atom(), term(), Scene.t()}
  | {atom(), term(), Scene.t(), list()}

Called when a scene receives an event message. The returned state is diffed, and effects are run.

Link to this callback

process_fetch(from, t)

View Source (optional)

Specs

process_fetch(GenServer.from(), Scene.t()) :: {atom(), term(), Scene.t()}

Called when a scene receives a fetch message. Use this to return data to the caller. The returned state is diffed, and effects are run.

Link to this callback

process_get(from, t)

View Source (optional)

Specs

process_get(GenServer.from(), Scene.t()) :: {atom(), term(), Scene.t()}

Called when a scene receives a get message. Use this to return data to the caller. The returned state is diffed, and effects are run.

Link to this callback

process_info(any, t)

View Source (optional)

Specs

process_info(any(), Scene.t()) :: {atom(), Scene.t()}

Called when a scene receives a message. The returned state is diffed, and effects are run.

Link to this callback

process_input(term, term, t)

View Source (optional)

Specs

process_input(term(), term(), Scene.t()) :: {atom(), Scene.t()}

Called when a scene receives an input messsage. The returned state is diffed, and effects are run.

Link to this callback

process_put(term, t)

View Source (optional)

Specs

process_put(term(), Scene.t()) :: {atom(), Scene.t()}

Called when a scene receives a put message. Use this to update data on your state. The returned state is diffed, and effects are run.

Link to this callback

process_update(term, t, t)

View Source (optional)

Specs

process_update(term(), List.t(), Scene.t()) :: {atom(), Scene.t()}

Called when a scene receives an update message. Use this to update data and options on your state. The returned state is diffed, and effects are run.

Link to this callback

render(assign)

View Source (optional)

Specs

render(assign :: map()) :: String.t()

Specs

setup(Scene.t()) :: Scene.t()

Called before graph is initialized. This is for setting up assigns used by your graph or subscribing to input or PubSub messages.