Initially zoom the text to fit in the text demo

This commit is contained in:
Patrick Walton 2017-09-11 16:57:53 -07:00
parent 3dd1d73f81
commit 94c5ea181f
3 changed files with 19 additions and 10 deletions

View File

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

View File

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

View File

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