enkimute / ganja.js

:triangular_ruler: Javascript Geometric Algebra Generator for Javascript, c++, c#, rust, python. (with operator overloading and algebraic literals) -
MIT License
1.52k stars 108 forks source link

Reactive notebook Button/Input #135

Open kungfooman opened 2 years ago

kungfooman commented 2 years ago

I enjoy the new notebook feature and I would like to introduce an addition:

// make it a notebook
notebook()

var i = 100;
var j = 200;
var k = 300;
var str = 'hai';

// use markdown with latex (escape backslashes!!)
md(`# Welcome !\nNotebooks with $\\LaTeX$`)

md(() => `$i = ${i}$`);
md(() => `$j = ${j}$`);
md(() => `$k = ${k}$`);
md(() => `$str = ${str}$`);

var button_i = Button("i++", () => i++);
var button_j = Button("j++", () => j++);
var button_k = Button("k++", () => k++);

var input = Input(str, newValue => str = newValue);

// Interleave with ganja.js graphs.
Algebra(2,0,1,()=>this.graph([1e1,1e2]));

This could makes it feel more like Ganja examples and it looks like this:

reactiveNotebook

Feedback very welcome, a demo (with more code, because PR is not merged): https://enkimute.github.io/ganja.js/examples/coffeeshop.html#IOmRNwGSa