Visualize.Hooks.CanvasIncremental (Visualize v0.2.35)

Copy Markdown View Source

Phoenix LiveView hook for scroll-and-copy incremental canvas rendering.

CanvasIncrementalChart handles the canvas_incremental events that Visualize.Incremental builds (spec/09 §7.3): a "full" payload clears the canvas and replays the whole stream; a scroll payload copies the existing pixels shifted by the delta and replays each exposed region of the 0x60 record clipped to its bounds (spec/09 §5.5); a "none" payload is ignored.

The canvas and its offscreen copy buffer follow the element's data-width × data-height at every draw (spec/10 §9.2, #456). A size change clears the canvas, so no scroll payload is drawn after one until a "full" payload has been — the full record a producer sends after a resize (spec/14 §12.5).

Usage

<div id="chart" phx-hook="CanvasIncrementalChart" phx-update="ignore"
     data-width="800" data-height="600">
  <canvas width="800" height="600"></canvas>
</div>

{event, payload, state} = Visualize.Incremental.scroll(state, {dx, dy})
push_event(socket, event, payload)

Decoding is executeVisualizeBinary from Visualize.Hooks.CanvasBinary.js_decoder/0.

When the element carries data-ack="<event>", every payload with a seq is acknowledged: <event> is pushed with %{seq, drawn, at} at most once per data-ack-interval ms (default 100), with a trailing flush (spec/10 §9.2, D-107).

Summary

Functions

Returns the JavaScript code for the CanvasIncrementalChart hook.

Functions

js_hook()

Returns the JavaScript code for the CanvasIncrementalChart hook.

Requires the decoder of Visualize.Hooks.CanvasBinary.js_decoder/0 in the same module; Visualize.Hooks.js_code/0 includes both.