Aside from using the DOM with DOM-diffing (which should include SVG support), Component should handle components which update a canvas.
Example usage would be something like:
// define a new component
const Foo = new Component({ x: 200, y: 100 });
// define a "view", that draws to the components canvas
Foo.view = (props, ctx) => {
ctx.moveTo(0, 0);
ctx.lineTo(props.x, props.y);
ctx.stroke();
};
// render to a canvas, and attach its context (`ctx`) to our component
Foo.render('.some-canvas', '2d');
// update the canvas
Foo.setState({ x: 201, y: 101 });
// or update the canvas repeatedly, using a fixed-time loop (requires the `onTick` add-on, or similar)
Foo.onTick(props => {
Foo.setState({ x: props.x + 1, y: props.y + 1 });
});
The logic here is simply this:
if render() received a <canvas> element, and either 2d or 3d as a second param, then attach the given canvas context to the given component as Foo.ctx, and pass it into the view function.
just like when the view is a regular DOM element, the render method will be called on any setState, debounced to 60fps - this will re-run the view, and redraw the canvas.
if the component is using a canvas, don't run domDiff, just run the view function
Aside from using the DOM with DOM-diffing (which should include SVG support), Component should handle components which update a canvas.
Example usage would be something like:
The logic here is simply this:
render()
received a<canvas>
element, and either2d
or3d
as a second param, then attach the given canvas context to the given component asFoo.ctx
, and pass it into the view function.render
method will be called on anysetState
, debounced to 60fps - this will re-run the view, and redraw the canvas.domDiff
, just run the view function