From 7d3afa0e74d2125dcfa70671a5b4b13b4ce970b9 Mon Sep 17 00:00:00 2001
From: Patrick Walton <pcwalton@mimiga.net>
Date: Mon, 11 Sep 2017 17:56:37 -0700
Subject: [PATCH] Initially zoom the SVG to fit

---
 demo/client/src/camera.ts   |  2 +-
 demo/client/src/svg-demo.ts | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/demo/client/src/camera.ts b/demo/client/src/camera.ts
index fa67e05e..fbf0bb81 100644
--- a/demo/client/src/camera.ts
+++ b/demo/client/src/camera.ts
@@ -110,7 +110,7 @@ export class OrthographicCamera extends Camera {
         const upperLeft = glmatrix.vec2.fromValues(this._bounds[0], this._bounds[1]);
         const lowerRight = glmatrix.vec2.fromValues(this._bounds[2], this._bounds[3]);
         const width = this._bounds[2] - this._bounds[0];
-        const height = this._bounds[1] - this._bounds[3];
+        const height = Math.abs(this._bounds[1] - this._bounds[3]);
 
         // Scale appropriately.
         this.scale = Math.min(this.canvas.width / width, this.canvas.height / height);
diff --git a/demo/client/src/svg-demo.ts b/demo/client/src/svg-demo.ts
index 7a5c2b8b..099850a2 100644
--- a/demo/client/src/svg-demo.ts
+++ b/demo/client/src/svg-demo.ts
@@ -124,8 +124,10 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
             }
         }
 
-        // Extract, normalize, and transform the path data.
         const request: any = { paths: [] };
+        let minX = 0, minY = 0, maxX = 0, maxY = 0;
+
+        // Extract, normalize, and transform the path data.
         for (const instance of this.pathInstances) {
             const element = instance.element;
             const svgCTM = element.getCTM();
@@ -138,6 +140,12 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
                 const newValues = _.flatMap(_.chunk(segment.values, 2), coords => {
                     const point = glmatrix.vec2.create();
                     glmatrix.vec2.transformMat2d(point, coords, ctm);
+
+                    minX = Math.min(point[0], minX);
+                    minY = Math.min(point[1], minY);
+                    maxX = Math.max(point[0], maxX);
+                    maxY = Math.max(point[1], maxY);
+
                     return [point[0], point[1]];
                 });
                 return {
@@ -155,6 +163,8 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
             request.paths.push({ segments: segments, kind: kind });
         }
 
+        const bounds = glmatrix.vec4.clone([minX, minY, maxX, maxY]);
+
         // Make the request.
         window.fetch(PARTITION_SVG_PATHS_ENDPOINT_URL, {
             method: 'POST',
@@ -166,7 +176,7 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
                 panic("Failed to partition the font!");
             const meshes = response.Ok.pathData;
             this.meshes = new PathfinderMeshData(meshes);
-            this.meshesReceived();
+            this.meshesReceived(bounds);
         });
     }
 
@@ -178,10 +188,13 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
         return DEFAULT_FILE;
     }
 
-    private meshesReceived() {
+    private meshesReceived(bounds: glmatrix.vec4): void {
         this.view.then(view => {
             view.uploadPathMetadata(this.pathInstances);
             view.attachMeshes([this.meshes]);
+
+            view.camera.bounds = bounds;
+            view.camera.zoomToFit();
         })
     }