Initially zoom the text to fit in the text demo

demo/client/src/camera.ts

@@ -106,9 +106,14 @@ export class OrthographicCamera extends Camera {
             this.onPan();
     }
 
-    private zoomToFit(): void {
+    zoomToFit(): void {
         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];
+
+        // Scale appropriately.
+        this.scale = Math.min(this.canvas.width / width, this.canvas.height / height);
 
         // Center.
         this.translation = glmatrix.vec2.create();
@@ -117,8 +122,8 @@ export class OrthographicCamera extends Camera {
         this.translation[0] += this.canvas.width * 0.5;
         this.translation[1] += this.canvas.height * 0.5;
 
-        // TODO(pcwalton): Scale appropriately.
-
+        if (this.onZoom != null)
+            this.onZoom();
         if (this.onPan != null)
             this.onPan();
     }
@@ -155,7 +160,6 @@ export class OrthographicCamera extends Camera {
 
     set bounds(newBounds: glmatrix.vec4) {
         this._bounds = glmatrix.vec4.clone(newBounds);
-        this.zoomToFit();
     }
 
     onPan: (() => void) | null;

demo/client/src/text-demo.ts

@@ -201,7 +201,7 @@ class TextDemoController extends DemoAppController<TextDemoView> {
     /// The font size in pixels per em.
     set fontSize(newFontSize: number) {
         this._fontSize = newFontSize;
-        this.view.then(view => view.attachText());
+        this.view.then(view => view.relayoutText());
     }
 
     get pixelsPerUnit(): number {
@@ -276,11 +276,12 @@ class TextDemoView extends MonochromePathfinderView {
     }
 
     /// Lays out glyphs on the canvas.
-    private layoutGlyphs() {
+    private layoutText() {
         const layout = this.appController.layout;
         layout.layoutRuns();
 
-        const textBounds = scaleRect(layout.textFrame.bounds, this.appController.pixelsPerUnit);
+        let textBounds = layout.textFrame.bounds;
+        textBounds = scaleRect(textBounds, this.appController.pixelsPerUnit);
         this.camera.bounds = textBounds;
 
         const textGlyphs = layout.glyphStorage.allGlyphs;
@@ -429,8 +430,12 @@ class TextDemoView extends MonochromePathfinderView {
     attachText() {
         if (this.atlasFramebuffer == null)
             this.createAtlasFramebuffer();
-        this.layoutGlyphs();
+        this.relayoutText();
+        this.camera.zoomToFit();
+    }
 
+    relayoutText() {
+        this.layoutText();
         this.rebuildAtlasIfNecessary();
     }
 

demo/client/src/text.ts

@@ -175,8 +175,8 @@ export class TextFrame<Glyph extends PathfinderGlyph> {
         const lowerRight = glmatrix.vec2.clone(_.last(this.runs)!.origin);
 
         const lineHeight = this.font.lineHeight();
-        upperLeft[1] -= lineHeight;
-        lowerRight[1] += lineHeight;
+        upperLeft[1] += lineHeight * 2.0;
+        lowerRight[1] -= lineHeight;
 
         lowerRight[0] = _.defaultTo<number>(_.max(this.runs.map(run => run.measure)), 0.0);