temp

Author: davidlowryduda

lmfdb/static/graphs/graph.js

@@ -82,8 +82,6 @@ Graph = class {
       node.label = value[0];
       node.ccsize = value[3];
       node.level = order_lookup.get(value[4]); // a pair
-      node.image = new Image();
-      node.image.src = value[5];
       node.key = key;
 
       node.posn = posnx;
@@ -239,26 +237,37 @@ class Renderer {
   }
 
   draw() {
-    this.ctx.clearRect(0,0, this.element.width, this.element.height);
-    for (var i = 0; i < this.graph.nodes.length; i++) {
-      this.drawNode(this.graph.nodes[i]);
-    }
+    this.clear();
     for (var i = 0; i < this.graph.edges.length; i++) {
       this.drawEdge(this.graph.edges[i]);
     }
+    for (var i = 0; i < this.graph.nodes.length; i++) {
+      this.drawNode(this.graph.nodes[i]);
+    }
   }
 
   drawNode(node) {
     var point = this.translate([node.layoutPosX, node.layoutPosY]);
 
-    node.style.position = 'absolute';
-    node.style.top      = point[1] + 'px';
-    node.style.left     = point[0] + 'px';
-
-    this.ctx.moveTo(0,0);
-    this.ctx.strokeStyle = 'black';
-    this.ctx.fillStyle = 'black';
-    this.ctx.font = "10px Arial";
+    // Use KaTeX to render the label to an SVG
+    var katex_div = document.createElement('div');
+    try {
+        katex.render(node.label, katex_div, {
+	    throwOnError: false,
+	    output: "svg"
+	});
+    } catch (e) {
+        console.error(e);
+        katex_div.textContent = node.label;
+    }
+    var svg = katex_div.querySelector('svg');
+    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    var svg_source = svg.outerHTML;
+
+    // Create a data URL from the SVG
+    node.image = new Image();
+    node.image.src = 'data:image/svg+xml;base64,' + window.btoa(svg_source);
+    
     var ctxt = this.ctx;
     var img = node.image;
 
@@ -657,7 +666,7 @@ class EventHandler {
       renderer.element.dispatchEvent(mouseEvent);
     };
     var handlertouchend = function(event) {
-      var touch = event.touches[0];
+      var touch = event.changedTouches[0];
       var mouseEvent = new MouseEvent("mouseup", {
         clientX: touch.clientX,
         clientY: touch.clientY

lmfdb/static/groups.js

@@ -110,6 +110,7 @@ function make_sdiagram(canv, ambient, gdatalist, orderdata, num_layers) {
   });
   newheight(renderer, num_layers);
   renderer.setSize();
+  renderer.draw();
   // The renderer is stored in sdiagram by the web page
   return [renderer,glist];
 }