The browser editor stage — a Phoenix.LiveComponent that renders a scene
as a server-authoritative SVG preview and lets the user select, drag,
resize, reorder, and delete elements on a Fresco-style artboard.
Design (matches the plan's D3): there is one layout engine — the server.
The component renders the scene via OpenFresco.render_svg/3 (measurement
on) and the JS hook (priv/static/open_fresco.js) reports pointer gestures
back as canvas-space deltas; the server applies them through
OpenFresco.Editor.Ops and re-renders. So "what you edit is what renders"
holds by construction — the editor and the PNG share the generator.
Embedding
<.live_component
module={OpenFresco.Editor} id="og-editor"
scene={@scene} values={@values} />The host owns the properties panel. On every edit the component sends
{:open_fresco_editor, id, {:scene_changed, scene}} to the parent (persist
it); on selection it sends {:open_fresco_editor, id, {:selected, elem_id}}.
Status: the mutation/hit-test core (
OpenFresco.Editor.Ops) is unit tested; the interactive LiveComponent + JS hook are not yet browser-verified. Wire it into a host and exercise it before relying on it in production.
Requires the optional :phoenix_live_view dependency.