massive network overhaul, looking good

docs/code/edge.js

@@ -1,6 +1,8 @@
 // A curved line going from the upper left to the lower right. The left side of the line has a red arrow facing left and the right side has a blue arrow facing right. Both arrows are triangular with black borders.
-let edge = Edge([0.2, 0.3], [0.8, 0.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',
 });
-return edge;
+return Group([node1, node2, edge]);

docs/code/network.js

@@ -1,10 +1,11 @@
 // 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.
 return Network([
-  ['A', ['hello', 'world'], [0.25 , 0.5], 0.15],
+  ['A', ['hello', 'world'], [0.25 , 0.5], [0.15, 0.2]],
   ['B', 'hello', [0.8, 0.25]],
   ['C', 'world', [0.7, 0.75]]
 ], [
-  ['A', 'B'], ['A', 'C']
+  [['A', 'n'], 'B'],
+  [['A', 's'], 'C'],
 ], {
   aspect: phi, directed: true,
   node_fill: '#EEE', node_border_radius: 0.05

docs/code/node.js

@@ -1,7 +1,6 @@
 // Two boxes with text in them that have black borders and gray interiors. The box in the upper left says "hello" and the box in the lower right says "world!".
-let hello = Node('hello', {fill: '#EEE'});
-let world = Node('world!', {fill: '#EEE'});
-let scat = Points([
-  [hello, [0.33, 0.3]], [world, [0.62, 0.7]]
-], {size: [0.25, 0.1]});
-return scat;
+let node_attr = {fill: '#eee', size: [0.25, 0.1]};
+let hello = Node('hello', [0.33, 0.3], node_attr);
+let world = Node('world!', [0.62, 0.7], node_attr);
+let group = Group([hello, world]);
+return group;

docs/code/stack.js

@@ -1,5 +1,5 @@
 // one large donut in a frame stacked on top of two smaller side-by-side framed donuts
-let d = Node('🍩');
+let d = TextFrame('🍩');
 let h = HStack([d, d]);
 let v = VStack([d, h]);
 let f = Frame(v, {margin: 0.1});

docs/code/symfill.js

@@ -1,5 +1,5 @@
 // a decaying sine wave filled in with blue
 let decay = x => exp(-0.1*x) * sin(x);
-let fill = SymFill({fy1: decay, fy2: 0, xlim: [0, 6*pi], fill: blue, N: 250});
+let fill = SymFill({fy1: decay, fy2: 0, xlim: [0, 6*pi], fill: blue, fill_opacity: 0.6, N: 250});
 let graph = Graph(fill, {aspect: phi});
 return Frame(graph, {margin: 0.1});

docs/code/tex.js

@@ -1,7 +1,7 @@
 // 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 node1 = Node(tex1, {border_radius: 0.05});
-let node2 = Node(tex2, {border_radius: 0.05});
+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});
 return TitleFrame(group, 'Facts', {border: 1, margin: 0.1});

docs/code/titleframe.js

@@ -1,6 +1,6 @@
 // Various food emojis are arrnaged in a spaced out grid and framed with the title "Fruits & Veggies". Each emoji is framed by a rounded square with a gray background.
 let emojis = ['🍇', '🥦', '🍔', '🍉', '🍍', '🌽', '🍩', '🥝', '🍟'];
-let nodes = emojis.map(e => Node(e, {border_radius: 0.075, fill: '#e6e6e6'}));
+let nodes = emojis.map(e => TextFrame(e, {border_radius: 0.075, fill: '#e6e6e6'}));
 let grid = Grid(split(nodes, 3), {spacing: 0.05});
 return TitleFrame(grid, 'Fruits & Veggies', {
   margin: 0.1, padding: 0.05, border_radius: 0.02, title_size: 0.065, adjust: true

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() {