We scribble a line on a canvas from a Stream of Points.
//frame.wiki.dbbs.co/assets/pages/snippet-template/esm.html LINEUP point
We need something that knows how to convert a sequence of points into graphics instructions.
async function drawLine(path, line) { for await (let {x, y} of line) { // knows iterators console.log('draw', {x,y}) let d = path.getAttribute('d') path.setAttribute('d', `${d} L${x},${y}`) } }
We need a canvas on which to draw.
export async function emit(el) { el.innerHTML = ` <svg viewBox="-190 -150 380 300"> <path d="M0,0" stroke="purple" fill="none"/> </svg> <style>svg {border: 1px solid black;}</style>` } export async function bind(el) { const path = el.querySelector("path") resize() drawLine(path, line()) }
We import the Generators library.
import {Library} from "https://cdn.jsdelivr.net/npm/@observablehq/stdlib@3.24.0/+esm" const {Generators} = new Library()
We create a few helper functions.
function resize() { window.parent.postMessage({ action: "resize", height: document.body.offsetHeight }, "*") }
We use Generators.observe to create something to convert a stream of point events into a sequence of points.
function line() {return Generators.observe(change => { window.addEventListener("message", listen) function listen({data}) { if (data.action == "pointStream") { const {point} = data console.log('hear', point) change(point) } } return () => window .removeEventListener("message", listen) })}