add inherit coord option in container; bunch of docs fixes

css/docs.css

@@ -22,6 +22,8 @@ body {
 
 #list {
     width: 10%;
+    overflow-y: scroll;
+    scrollbar-width: none;
     border-right: 1px solid #CCC;
 }
 
@@ -111,15 +113,6 @@ body {
     border-bottom: 1px dashed #BBB;
 }
 
-#list .item:first-child {
-}
-
-#list #logo {
-    position: absolute;
-    left: 8px;
-    bottom: 5px;
-}
-
 /* document viewer */
 
 #left {

docs.html

@@ -18,11 +18,7 @@
 
 <div id="main">
 
-<div id="list">
-<div id="logo">
-<a href="index.html" target="_blank"><img src="favicon.svg" height="30px"></a>
-</div>
-</div>
+<div id="list"></div>
 
 <div id="left"></div>
 

docs/code/edge.js

@@ -2,7 +2,7 @@
 let node1 = Node('hello', [0.2, 0.3]);
 let node2 = Node('world', [0.8, 0.7]);
 let edge = Edge(node1, node2, {
-  arrow_beg: true, arrow_end: true, arrow_base: true,
-  arrow_beg_fill: '#ff0d57', arrow_end_fill: '#1e88e5',
+    arrow: true, arrow_base: true,
+    arrow_beg_fill: red, arrow_end_fill: blue,
 });
 return Group([node1, node2, edge]);

docs/code/tex.js → docs/code/latex.js

@@ -1,6 +1,6 @@
 // There are two latex equations framed by rounded borders arranged vertically. The top one shows a Gaussian integral and the bottom one shows a trigonometric identity. They are framed by a square with the title "Facts".
-let tex1 = Tex('\\int_0^{\\infty} \\exp(-x^2) dx = \\sqrt{\\pi}');
-let tex2 = Tex('\\sin^2(\\theta) + \\cos^2(\\theta) = 1');
+let tex1 = Latex('\\int_0^{\\infty} \\exp(-x^2) dx = \\sqrt{\\pi}');
+let tex2 = Latex('\\sin^2(\\theta) + \\cos^2(\\theta) = 1');
 let node1 = TextFrame(tex1, {border_radius: 0.05});
 let node2 = TextFrame(tex2, {border_radius: 0.05});
 let group = Points([[node1, [0.5, 0.3]], [node2, [0.5, 0.7]]], {size: 0.35});

docs/code/networks.js

@@ -0,0 +1,9 @@
+// A network with a node on the left saying "hello world" and two nodes on the right saying "hello" and "world". There are arrows going from the left node to each of the right nodes. The nodes have gray backgrounds and rounded corners.
+let node_args = {fill: '#eee', border_radius: 0.05};
+let node1 = Node(['hello', 'world'], [0.25, 0.5], {size: 0.15, ...node_args});
+let node2 = Node('hello', [0.7, 0.25], node_args);
+let node3 = Node('world', [0.8, 0.75], node_args);
+let edge1 = Edge([node1, 'n'], node2);
+let edge2 = Edge([node1, 's'], node3);
+let group = Group([node1, node2, node3, edge1, edge2], {aspect: phi});
+return Frame(group, {padding: 0.05, border: 1, margin: 0.1});

docs/examples/axis_diagram.js

@@ -2,8 +2,8 @@
 
 // ticks (top and bottom)
 let ticks = [
-  [0.1, Tex('q/\\gamma')], [0.3, Tex('B q/\\gamma')], [0.5, Tex('q')],
-  [0.7, Tex('B q')], [0.9, Tex('\\gamma^{\\prime} q')]
+  [0.1, Latex('q/\\gamma')], [0.3, Latex('B q/\\gamma')], [0.5, Latex('q')],
+  [0.7, Latex('B q')], [0.9, Latex('\\gamma^{\\prime} q')]
 ];
 let main = HAxis(ticks, {tick_pos: 'both', label_pos: 'top', tick_size: 0.07});
 let tops = [[0.1, 'Prev'], [0.3, ''], [0.5, 'Current'], [0.7, ''], [0.9, 'Next']];

docs/examples/axis_ticks.js

@@ -1,6 +1,6 @@
 // A horizontal axis with 4 ticks. On the top side, the ticks are labeled "0", "i", "j", and "1". On the bottom side, the middle two ticks are labeled in Latex with "q\_{i,1}" and "q\_{i,2}".
-let ticks1 = zip([0, 0.35, 0.7, 1], [Tex('0'), Tex('i'), Tex('j'), Tex('1')]);
-let ticks2 = zip([0.35, 0.7], [Tex('q_{i,1}'), Tex('q_{j,2}')]);
+let ticks1 = zip([0, 0.35, 0.7, 1], [Latex('0'), Latex('i'), Latex('j'), Latex('1')]);
+let ticks2 = zip([0.35, 0.7], [Latex('q_{i,1}'), Latex('q_{j,2}')]);
 let axis1 = HAxis(ticks1, {tick_size: 0.5, tick_pos: 'both'});
 let axis2 = HAxis(ticks2, {tick_size: 0.5, label_pos: 'out', label_offset: 0});
 return Frame(Group([axis1, axis2]), {aspect: 6, margin: [0.05, 2]});

docs/examples/equil_plot.js

@@ -6,11 +6,11 @@ let path1 = SymPath({fy: kzero1, xlim: klim});
 let path2 = SymPath({fx: kzero2, ylim: klim});
 let note1 = Note('\\dot{k}_1=0', {pos: [1.62, 1.24], rad: 0.09, latex: true});
 let note2 = Note('\\dot{k}_2=0', {pos: [1.21, 1.6], rad: 0.09, latex: true});
-let xlabel = HStack([Text('Capital Stock 1 '), Tex('(k_1)')]);
-let ylabel = HStack([Text('Capital Stock 2 '), Tex('(k_2)')]);
+let xlabel = HStack([Text('Capital Stock 1 '), Latex('(k_1)')]);
+let ylabel = HStack([Text('Capital Stock 2 '), Latex('(k_2)')]);
 let plot = Plot([path1, path2, note1, note2], {
   aspect: phi, xlim: klim, ylim: klim, xaxis_pos: 0, xaxis_tick_pos: 'both',
-  xticks: [[kstar, Tex('k_1^{\\ast}')]], yticks: [[kstar, Tex('k_2^{\\ast}')]],
+  xticks: [[kstar, Latex('k_1^{\\ast}')]], yticks: [[kstar, Latex('k_2^{\\ast}')]],
   xlabel, ylabel, grid: true, label_offset: 0.12
 });
 return Frame(plot, {margin: 0.25});

docs/examples/exponential_plot.js

@@ -11,8 +11,8 @@ let steady2 = HLine(yss1, {lim: [0, 1], stroke_dasharray: [4, 4]});
 let plot = Plot([path0, path1, start, steady1, steady2], {
     xlim: [0, 1], ylim: [0, ymax], aspect: phi,
     xlabel: 'Time (t)', ylabel: 'Output (y)',
-    xticks: [[t0, Tex('t_0')]], label_offset: 0.1,
-    yticks: [[yss1, Tex('y^{\\ast}_1')], [1, Tex('y^{\\ast}_0')]]
+    xticks: [[t0, Latex('t_0')]], label_offset: 0.1,
+    yticks: [[yss1, Latex('y^{\\ast}_1')], [1, Latex('y^{\\ast}_0')]]
 });
 let frame = Frame(plot, {padding: 0.2});
 return frame;

docs/examples/malthus.js

@@ -9,8 +9,8 @@ let zero2 = VLine(ybar, {lim: ylim, opacity: 0.2});
 let line1 = HLine(gza, {lim: xlim, stroke_dasharray: 3});
 let line2 = VLine(ystar, {lim: ylim, stroke_dasharray: 3});
 let dot = Points([[ystar, gza]], {size: 0.04});
-let xticks = [[1, Tex('\\bar{y}')], [ystar, Tex('y^{\\ast}')], [xhi, '']];
-let yticks = [[0, '0'], [gz/alpha, Tex('\\frac{g_z}{\\alpha}')], [nbar, Tex('\\bar{n}')], [yhi, '']];
+let xticks = [[1, Latex('\\bar{y}')], [ystar, Latex('y^{\\ast}')], [xhi, '']];
+let yticks = [[0, '0'], [gz/alpha, Latex('\\frac{g_z}{\\alpha}')], [nbar, Latex('\\bar{n}')], [yhi, '']];
 let plot = Plot([path, zero1, zero2, line1, line2, dot], {
   aspect: phi, xlim, ylim, xticks, yticks, xlabel: 'Standard of living (y)',
   ylabel: 'Population growth (gL)', title: 'Modified Demographic Function'

docs/extras/smoothstep.js

@@ -1,6 +1,6 @@
 // define the generalized smoothstep function and plot it for k = 1, 2, 3, 4, 5
-let eqn1 = Tex('\\ell_k(x) = x^k / \\left[{x^k+(1-x)^k}\\right]');
-let eqn2 = Tex('s_k(x) = 3 \\ell_k(x)^2 - 2 \\ell_k(x)^3');
+let eqn1 = Latex('\\ell_k(x) = x^k / \\left[{x^k+(1-x)^k}\\right]');
+let eqn2 = Latex('s_k(x) = 3 \\ell_k(x)^2 - 2 \\ell_k(x)^3');
 let eqn = VStack([eqn1, eqn2], {expand: false, spacing: 0.2});
 
 let xlim = [0, 1]; let ylim = [0, 1]; let n = 5;
@@ -17,7 +17,7 @@ let vline = VLine(1, {lim: ylim});
 
 let badger = c => HLine(0.5, {stroke: c, stroke_width: 2, aspect: 1})
 let legend = Legend(range(1, n+1).map(
-    i => [badger(pall(i-1)), Tex(`k = ${i}`)]),
+    i => [badger(pall(i-1)), Latex(`k = ${i}`)]),
     {pos: [0.87, 0.33], rad: 0.09, hspacing: 0.1, vspacing: 0.15});
 
 let plot = Plot([...paths, legend, hline, vline], {

docs/gen/teaching.md

@@ -228,7 +228,7 @@ let xlim = [-3, 3]; let ylim = [0, 1.5];
 let func = x => exp(-x*x);
 let line = SymPath({fy: func, xlim, fill: '#eee'});
 let plot = Plot(line, {aspect: phi, xlim, ylim, yticks: 4, grid: true});
-let tex = Tex('f(x) = \\exp(-x^2)');
+let tex = Latex('f(x) = \\exp(-x^2)');
 let frame = TitleFrame(plot, tex, {margin: 0.15, title_size: 0.08, adjust: false});
 return frame;
 ```

docs/meta.json

@@ -36,12 +36,14 @@
     "networks": [
         "Node",
         "Edge",
-        "Network"
+        "Networks"
     ],
     "display": [
         "Text",
-        "Tex",
+        "Emoji",
+        "Latex",
         "Note",
+        "TextFrame",
         "TitleFrame"
     ],
     "functions": [

docs/text/arrays.md

@@ -5,6 +5,8 @@ There are a number of functions designed to make working with arrays easier. The
 ## Functions
 
 - `zip(...arrs)` — combine arrays `arrs` element-wise
+- `min(...arrs)` — the minimum of arrays `arrs`
+- `max(...arrs)` — the maximum of arrays `arrs`
 - `reshape(arr, shape)` — reshape array `arr` to given dimensions `shape`
 - `split(arr, len)` — split array `arr` into subarrays of length `len`
 - `sum(arr)` — sum the elements of array `arr`

docs/text/edge.md

@@ -1,17 +1,16 @@
 # Edge
 
-<span class="inherit">[Container](#Container) > [Element](#Element)</span>
+<span class="inherit">[ArrowPath](#ArrowPath) > [Container](#Container) > [Element](#Element)</span>
 
-This creates a Bézier-style path from one point to another with optional arrowheads at either or both ends. It is named `Edge` because of its usage in [Network](#Network) but can be used independently. The emenation directions are automatically inferred from the relative point positions but can be overriden as well.
+This creates a cubic spline path from one point to another with optional arrowheads at either or both ends. It is named `Edge` because of its usage in network diagrams. The emenation directions are automatically inferred from the relative point positions but can be overriden as well.
 
 Positional arguments:
 - `beg`/`end` — the beginning and ending points for the path and where the optional arrowheads are placed, or a `[point, direc]` pair where `direc` specifies the emanation direction
 
 Keyword arguments:
 - `arrow`/`arrow_beg`/`arrow_end` = `false` — toggles whether the respective arrowheads are included
-- `arrow_size` = `[0.02, 0.015]` — the arrowhead size to use for both arrows (can be individually specified at the subunit level)
-- `curve` = `0.03` — the amount of curvature to use in the connecting line, with zero denoting a straight line and `0.5` denoting a line that achieves perpendicularity
+- `arrow_size` = `0.03` — the arrowhead size to use for both arrows
 
 Subunit names:
 - `arrow`/`arrow_beg`/`arrow_end` — the respective arrowheads, with `arrow` being applied to both
-- `line` — the connecting line element
+- `path` — the connecting line element

docs/text/latex.md

@@ -0,0 +1,14 @@
+# Math
+
+<span class="inherit">[Element](#Element)</span>
+
+Creates a new `Math` math element from LaTeX source. Uses `MathJax` when available to render in SVG and calculate aspect ratio. This is also implicitly accessible through `TextFrame` and `Note` elements when passing `latex: true`.
+
+Positional arguments:
+
+- `tex`: a string to be used as the content
+
+Keyword arguments:
+
+- `offset` = `[0, 0]`: the position of the center of the element
+- `scale` = `1`: the proportional size of the element

docs/text/math.md

@@ -24,7 +24,5 @@ Here we collect a variety of global mathematical functions and constants. You ca
 - `floor(x)` — the floor function
 - `ceil(x)` — the ceiling function
 - `round(x)` — the rounding function
-- `min(...vals)` — the minimum of `vals`
-- `max(...vals)` — the maximum of `vals`
 - `clamp(x, lim)` — clamp `x` to the range `lim`
 - `rescale(x, lim)` — linearly rescale `x` to the range `lim`

docs/text/node.md

@@ -1,17 +1,19 @@
 # Node
 
-<span class="inherit">[Frame](#Frame) > [Container](#Container) > [Element](#Element)</span>
+<span class="inherit">[Place](#Place) > [Container](#Container) > [Element](#Element)</span>
 
-This is a simple container class descending from [Frame](#Frame) that is designed to enclose text in a border. It is called `Node` as it performs that function in the [Network](#Network) class, but can also be used independently. The standard usage is to pass a string that will automatically be converted into a `Text` object. One can also pass a list of strings, which will be used to create a `VStack` of `Text` objects. Finally, one can simply pass a generic `Element`.
+This is a container class that encloses text in a `Frame` at a particular position. Passing a string or list of strings to `text` will automatically create a `MultiText` node. One can also simply pass a generic `Element`. The primary usage of this is in the creation of networks in conjunction with `Edge` objects. Additional keyword arguments are passed to the `Frame` constructor.
 
 Positional arguments:
 - `text` — a string, a list of strings, or an `Element` to be used as the content
+- `pos` — the position to place the node
 
 Keyword arguments:
-- `padding` = `0.1` — the padding to be added (inside border)
-- `border` = `1` — the border width to use
-- `spacing` = `0.02` — the space to add between lines in multiline mode
-- `align` = `center` — the alignment to use in mutliline mode
+- `size` — the size of the node box
 
 Subunit names:
 - `text` — keywords to pass to an auto-generated `Text` object or objects
+
+Functions:
+- `get_center` — returns the center of the node
+- `get_anchor(direc)` — returns the anchor point of the node in the specified direction (`n`, `s`, `e`, `w`)

docs/text/note.md

@@ -9,4 +9,4 @@ Positional arguments:
 
 Keyword arguments (plus any [Place](#Place) arguments):
 - `pos`/`rad` = `[0.5, 0.5]` — a position and radius specifying rectangle placement
-- `latex` — whether to run through LaTeX renderer
+- `latex` = `false` — whether to interpret the text as LaTeX

docs/text/text.md

@@ -4,6 +4,12 @@
 
 Creates a new `Text` element. Uses built-in browser facilities when available to calculate font size and aspect ratio. Note that you will typically not set the size of the text here, as this will fill the entire `Element` with the provided text. If you wish to place and size the text, wrap this in a container such as `Place` as seen in the example.
 
+There are a number of related elements that can handle different types of text:
+- `MultiText` can handle multiple lines of text that are passed in as an array
+- `TextFrame` can handle text with a border and background a la `Frame`
+- `Emoji` is specialized for the display of emoji characters
+- `Math` is specialized for the display of LaTeX expressions
+
 Positional arguments:
 
 - `text`: a string to be used as the content

js/editor.js

@@ -147,7 +147,7 @@ class GumEditor {
     setDisplay(svg) {
         this.disp.classList.remove('error');
         this.disp.innerHTML = svg;
-        // this.addSvgBorder();
+        this.addSvgBorder();
     }
 
     addSvgBorder() {