michael/pathfinder
michael
/
pathfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initially zoom the SVG to fit

This commit is contained in:
Patrick Walton 2017-09-11 17:56:37 -07:00
parent 94c5ea181f
commit 7d3afa0e74
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/client/src/camera.ts
View File

@ -110,7 +110,7 @@ export class OrthographicCamera extends Camera {
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 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. // Scale appropriately.
this.scale = Math.min(this.canvas.width / width, this.canvas.height / height); this.scale = Math.min(this.canvas.width / width, this.canvas.height / height);

19
demo/client/src/svg-demo.ts
View File

@ -124,8 +124,10 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
} }
} }
// Extract, normalize, and transform the path data.
const request: any = { paths: [] }; 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) { for (const instance of this.pathInstances) {
const element = instance.element; const element = instance.element;
const svgCTM = element.getCTM(); const svgCTM = element.getCTM();
@ -138,6 +140,12 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
const newValues = _.flatMap(_.chunk(segment.values, 2), coords => { const newValues = _.flatMap(_.chunk(segment.values, 2), coords => {
const point = glmatrix.vec2.create(); const point = glmatrix.vec2.create();
glmatrix.vec2.transformMat2d(point, coords, ctm); 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 [point[0], point[1]];
}); });
return { return {
@ -155,6 +163,8 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
request.paths.push({ segments: segments, kind: kind }); request.paths.push({ segments: segments, kind: kind });
} }
const bounds = glmatrix.vec4.clone([minX, minY, maxX, maxY]);
// Make the request. // Make the request.
window.fetch(PARTITION_SVG_PATHS_ENDPOINT_URL, { window.fetch(PARTITION_SVG_PATHS_ENDPOINT_URL, {
method: 'POST', method: 'POST',
@ -166,7 +176,7 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
panic("Failed to partition the font!"); panic("Failed to partition the font!");
const meshes = response.Ok.pathData; const meshes = response.Ok.pathData;
this.meshes = new PathfinderMeshData(meshes); this.meshes = new PathfinderMeshData(meshes);
this.meshesReceived(); this.meshesReceived(bounds);
}); });
} }
@ -178,10 +188,13 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
return DEFAULT_FILE; return DEFAULT_FILE;
} }
private meshesReceived() { private meshesReceived(bounds: glmatrix.vec4): void {
this.view.then(view => { this.view.then(view => {
view.uploadPathMetadata(this.pathInstances); view.uploadPathMetadata(this.pathInstances);
view.attachMeshes([this.meshes]); view.attachMeshes([this.meshes]);
view.camera.bounds = bounds;
view.camera.zoomToFit();
}) })
} }