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.
Requires the decoder of Visualize.Hooks.CanvasBinary.js_decoder/0 in the same module;
Visualize.Hooks.js_code/0 includes both.