edges included in graph bounding box calculation

skanaar · Jul 8, 2020 · bb38fc0 · bb38fc0
1 parent 67dfbe2
commit bb38fc0
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 6 deletions.
diff --git a/dist/nomnoml.js b/dist/nomnoml.js
@@ -89,15 +89,21 @@ var nomnoml;
                 nodes[name].x = node.x;
                 nodes[name].y = node.y;
             });
+            var edgeWidth = 0;
+            var edgeHeight = 0;
             g.edges().forEach(function (edgeObj) {
                 var edge = g.edge(edgeObj);
                 var start = nodes[edgeObj.v];
                 var end = nodes[edgeObj.w];
                 rels[edge.id].path = nomnoml.skanaar.flatten([[start], edge.points, [end]]).map(toPoint);
+                edgeWidth = nomnoml.skanaar.max(edge.points.map(function (e) { return e.x; }));
+                edgeHeight = nomnoml.skanaar.max(edge.points.map(function (e) { return e.y; }));
             });
             var graph = g.graph();
-            var graphHeight = graph.height ? graph.height + 2 * config.gutter : 0;
-            var graphWidth = graph.width ? graph.width + 2 * config.gutter : 0;
+            var width = Math.max(graph.width, edgeWidth);
+            var height = Math.max(graph.height, edgeHeight);
+            var graphHeight = height ? height + 2 * config.gutter : 0;
+            var graphWidth = width ? width + 2 * config.gutter : 0;
             c.width = Math.max(textSize.width, graphWidth) + 2 * config.padding;
             c.height = textSize.height + graphHeight + config.padding;
         }

diff --git a/src/layouter.ts b/src/layouter.ts
@@ -50,15 +50,21 @@ namespace nomnoml {
 				nodes[name].x = node.x
 				nodes[name].y = node.y
 			})
+			var edgeWidth = 0;
+			var edgeHeight = 0;
 			g.edges().forEach(function(edgeObj) {
 				var edge = g.edge(edgeObj)
 				var start = nodes[edgeObj.v]
 				var end = nodes[edgeObj.w]
 				rels[edge.id].path = skanaar.flatten([[start], edge.points, [end]]).map(toPoint)
+				edgeWidth = skanaar.max(edge.points.map(e => e.x))
+				edgeHeight = skanaar.max(edge.points.map(e => e.y))
 			})
 			var graph = g.graph()
-			var graphHeight = graph.height ? graph.height + 2*config.gutter : 0
-			var graphWidth = graph.width ? graph.width + 2*config.gutter : 0
+			var width = Math.max(graph.width, edgeWidth)
+			var height = Math.max(graph.height, edgeHeight)
+			var graphHeight = height ? height + 2*config.gutter : 0
+			var graphWidth = width ? width + 2*config.gutter : 0
 
 			c.width = Math.max(textSize.width, graphWidth) + 2*config.padding
 			c.height = textSize.height + graphHeight + config.padding

diff --git a/src/nomnoml.ts b/src/nomnoml.ts
@@ -3,7 +3,7 @@ interface Nomnoml {
   draw(canvas: HTMLCanvasElement, code: string, scale: number): { config: Config }
   render(graphics: Graphics, config: Config, compartment: nomnoml.Compartment, setFont: nomnoml.SetFont): void
   renderSvg(code: string, docCanvas?: HTMLCanvasElement): string
-  parse(source: string): any
+  parse(source: string):  { root: nomnoml.Compartment; config: Config }
   intermediateParse(source: string): nomnoml.AstRoot
   transformParseIntoSyntaxTree(entity: nomnoml.AstRoot): nomnoml.Compartment
   layout(measurer: Measurer, config: Config, ast: nomnoml.Compartment): nomnoml.Compartment

diff --git a/test/index.html b/test/index.html
@@ -201,6 +201,19 @@ <h1>Label placement</h1>
     </div>
   </div>
 
+  <div class=testcase>
+    <h1>Graph size</h1>
+    <div nomnoml=canvas>
+      <script type="text/vnd.nomnoml">
+[a] - [foo]
+[foo] - [b]
+[a] - [bar]
+[bar] - [b]
+[a] - [b]
+      </script>
+    </div>
+  </div>
+
   <div class=testcase>
     <h1>CLI output</h1>
     <img src="output.node-test.svg">

diff --git a/test/nomnoml.spec.js b/test/nomnoml.spec.js
@@ -284,8 +284,18 @@ suite.test('layouter should handle [apa|[flea]->[dandruff]] relation placement',
 
 suite.test('gracefully handle equivalent relations', function(){
     var parsedGraph = nomnoml.parse('[a]-[b]\n[a]-[b]')
-
     assertEqual(parsedGraph.root.relations.length, 1)
 })
 
+suite.test('include edges in canvas size calculation', function(){
+    var { root, config } = nomnoml.parse(`
+    [a] - [foo]
+    [foo] - [b]
+    [a] - [bar]
+    [bar] - [b]
+    [a] - [b]`)
+    var compartment = nomnoml.layout(measurer, config, root)
+    assertEqual(compartment.width > 300, true)
+})
+
 suite.report()