# `Hakushi.Canvas`
[🔗](https://github.com/hattoriai/hakushi/blob/v0.1.0/lib/hakushi/canvas.ex#L1)

The LiveComponent behind `Hakushi.Components.canvas/1`.

Render the canvas with `canvas/1`, not with this module: it is public
for its events, which the browser sends and `Hakushi.Test` sends in
tests.

The component keeps the canvas's graph (`Hakushi.Graph`), and sends the
browser its nodes and edges as streams: a change sends the nodes and
edges it touches, and no others, so a canvas of thousands of nodes
sends a moved node, not the canvas.

The browser sends:

  * `"hakushi:change"`, a change of a person: a move, a resize, an edge,
    a delete, an edge's label (see `Hakushi.Change`). The reply is
    `%{"ok" => true}`, or `%{"error" => reason}` for a change the server
    refused, which the browser takes back.
  * `"hakushi:copy"` with `nodes`: the nodes to paste later, and the
    edges between them, kept on the server.
  * `"hakushi:paste"` with `x` and `y` (or none): a copy of them, at
    that place of the canvas (or next to the nodes).
  * `"hakushi:duplicate"` with `nodes`: a copy of the nodes, next to
    them.
  * `"hakushi:drop"` with `item`, `x` and `y`: a new node, made by the
    canvas's `new_node` function.
  * `"hakushi:undo"` and `"hakushi:redo"`: the person's own changes,
    undone and done again as new changes, which the server checks again.
  * `"hakushi:peer"`, on a shared canvas: the person's cursor, the nodes
    they selected and the nodes they drag, for the others.

On a shared canvas (`live`), the component is a session of an Issho
room (`Hakushi.Issho`): its changes go to the room's document, and the
room's events come back to it through `update/2`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*