Add basic support for panning and zooming in the demo
This commit is contained in:
parent
37c947c751
commit
da6483c3ab
|
@ -25,6 +25,7 @@
|
|||
}
|
||||
#pf-canvas {
|
||||
display: block;
|
||||
touch-action: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
"@types/node": "^8.0.19",
|
||||
"base64-js": "^1.2.1",
|
||||
"bootstrap": "^4.0.0-alpha.6",
|
||||
"gl-matrix": "^2.4.0",
|
||||
"opentype.js": "^0.7.3",
|
||||
"ts-loader": "^2.3.2",
|
||||
"typescript": "^2.4.2",
|
||||
|
|
|
@ -3,11 +3,14 @@
|
|||
// Copyright © 2017 Mozilla Foundation
|
||||
|
||||
const base64js = require('base64-js');
|
||||
const glmatrix = require('gl-matrix');
|
||||
const opentype = require('opentype.js');
|
||||
|
||||
const TEXT: string = "O";
|
||||
const FONT_SIZE: number = 16.0;
|
||||
|
||||
const SCALE_FACTOR: number = 1.0 / 100.0;
|
||||
|
||||
const PARTITION_FONT_ENDPOINT_URL: string = "/partition-font";
|
||||
|
||||
const COMMON_SHADER_URL: string = '/glsl/gles2/common.inc.glsl';
|
||||
|
@ -26,13 +29,6 @@ const B_QUAD_SIZE: number = 4 * 8;
|
|||
const B_QUAD_UPPER_INDICES_OFFSET: number = 0;
|
||||
const B_QUAD_LOWER_INDICES_OFFSET: number = 4 * 4;
|
||||
|
||||
const IDENTITY: Matrix4D = [
|
||||
1.0, 0.0, 0.0, 0.0,
|
||||
0.0, 1.0, 0.0, 0.0,
|
||||
0.0, 0.0, 1.0, 0.0,
|
||||
0.0, 0.0, 0.0, 1.0,
|
||||
];
|
||||
|
||||
const SHADER_URLS: ShaderMap<ShaderProgramURLs> = {
|
||||
blit: {
|
||||
vertex: "/glsl/gles2/blit.vs.glsl",
|
||||
|
@ -73,7 +69,12 @@ interface UnlinkedShaderProgram {
|
|||
fragment: WebGLShader;
|
||||
}
|
||||
|
||||
type Matrix4D = number[];
|
||||
type Matrix4D = Float32Array;
|
||||
|
||||
interface Point2D {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
interface Size2D {
|
||||
width: number;
|
||||
|
@ -466,7 +467,10 @@ class PathfinderView {
|
|||
constructor(canvas: HTMLCanvasElement,
|
||||
commonShaderSource: string,
|
||||
shaderSources: ShaderMap<ShaderProgramSource>) {
|
||||
this.transform = glmatrix.mat4.create();
|
||||
|
||||
this.canvas = canvas;
|
||||
this.canvas.addEventListener('wheel', event => this.onWheel(event), false);
|
||||
|
||||
this.initContext();
|
||||
|
||||
|
@ -587,6 +591,24 @@ class PathfinderView {
|
|||
window.requestAnimationFrame(() => this.redraw());
|
||||
}
|
||||
|
||||
onWheel(event: WheelEvent) {
|
||||
if (event.ctrlKey) {
|
||||
// Zoom event: see https://developer.mozilla.org/en-US/docs/Web/Events/wheel
|
||||
const scaleFactor = 1.0 - event.deltaY * window.devicePixelRatio * SCALE_FACTOR;
|
||||
const scaleFactors = new Float32Array([scaleFactor, scaleFactor, 1.0]);
|
||||
glmatrix.mat4.scale(this.transform, this.transform, scaleFactors);
|
||||
} else {
|
||||
const delta = new Float32Array([
|
||||
-event.deltaX * window.devicePixelRatio,
|
||||
event.deltaY * window.devicePixelRatio,
|
||||
0.0
|
||||
]);
|
||||
glmatrix.mat4.translate(this.transform, this.transform, delta);
|
||||
}
|
||||
|
||||
this.setDirty();
|
||||
}
|
||||
|
||||
resizeToFit() {
|
||||
const width = window.innerWidth;
|
||||
const height = window.scrollY + window.innerHeight -
|
||||
|
@ -628,7 +650,7 @@ class PathfinderView {
|
|||
}
|
||||
|
||||
setTransformUniform(uniforms: UniformMap) {
|
||||
this.gl.uniformMatrix4fv(uniforms.uTransform, false, IDENTITY);
|
||||
this.gl.uniformMatrix4fv(uniforms.uTransform, false, this.transform);
|
||||
}
|
||||
|
||||
setFramebufferSizeUniform(uniforms: UniformMap) {
|
||||
|
@ -715,7 +737,6 @@ class PathfinderView {
|
|||
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.meshes.coverCurveIndices);
|
||||
|
||||
// Draw direct curve parts.
|
||||
this.gl.uniformMatrix4fv(directCurveProgram.uniforms.uTransform, false, IDENTITY);
|
||||
this.setTransformUniform(directCurveProgram.uniforms);
|
||||
this.setFramebufferSizeUniform(directCurveProgram.uniforms);
|
||||
this.pathColorsBufferTexture.bind(this.gl, directCurveProgram.uniforms, 0);
|
||||
|
@ -739,6 +760,9 @@ class PathfinderView {
|
|||
quadPositionsBuffer: WebGLBuffer;
|
||||
quadTexCoordsBuffer: WebGLBuffer;
|
||||
quadElementsBuffer: WebGLBuffer;
|
||||
|
||||
transform: Matrix4D;
|
||||
|
||||
dirty: boolean;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue