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 {
|
#pf-canvas {
|
||||||
display: block;
|
display: block;
|
||||||
|
touch-action: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
"@types/node": "^8.0.19",
|
"@types/node": "^8.0.19",
|
||||||
"base64-js": "^1.2.1",
|
"base64-js": "^1.2.1",
|
||||||
"bootstrap": "^4.0.0-alpha.6",
|
"bootstrap": "^4.0.0-alpha.6",
|
||||||
|
"gl-matrix": "^2.4.0",
|
||||||
"opentype.js": "^0.7.3",
|
"opentype.js": "^0.7.3",
|
||||||
"ts-loader": "^2.3.2",
|
"ts-loader": "^2.3.2",
|
||||||
"typescript": "^2.4.2",
|
"typescript": "^2.4.2",
|
||||||
|
|
|
@ -3,11 +3,14 @@
|
||||||
// Copyright © 2017 Mozilla Foundation
|
// Copyright © 2017 Mozilla Foundation
|
||||||
|
|
||||||
const base64js = require('base64-js');
|
const base64js = require('base64-js');
|
||||||
|
const glmatrix = require('gl-matrix');
|
||||||
const opentype = require('opentype.js');
|
const opentype = require('opentype.js');
|
||||||
|
|
||||||
const TEXT: string = "O";
|
const TEXT: string = "O";
|
||||||
const FONT_SIZE: number = 16.0;
|
const FONT_SIZE: number = 16.0;
|
||||||
|
|
||||||
|
const SCALE_FACTOR: number = 1.0 / 100.0;
|
||||||
|
|
||||||
const PARTITION_FONT_ENDPOINT_URL: string = "/partition-font";
|
const PARTITION_FONT_ENDPOINT_URL: string = "/partition-font";
|
||||||
|
|
||||||
const COMMON_SHADER_URL: string = '/glsl/gles2/common.inc.glsl';
|
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_UPPER_INDICES_OFFSET: number = 0;
|
||||||
const B_QUAD_LOWER_INDICES_OFFSET: number = 4 * 4;
|
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> = {
|
const SHADER_URLS: ShaderMap<ShaderProgramURLs> = {
|
||||||
blit: {
|
blit: {
|
||||||
vertex: "/glsl/gles2/blit.vs.glsl",
|
vertex: "/glsl/gles2/blit.vs.glsl",
|
||||||
|
@ -73,7 +69,12 @@ interface UnlinkedShaderProgram {
|
||||||
fragment: WebGLShader;
|
fragment: WebGLShader;
|
||||||
}
|
}
|
||||||
|
|
||||||
type Matrix4D = number[];
|
type Matrix4D = Float32Array;
|
||||||
|
|
||||||
|
interface Point2D {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
}
|
||||||
|
|
||||||
interface Size2D {
|
interface Size2D {
|
||||||
width: number;
|
width: number;
|
||||||
|
@ -466,7 +467,10 @@ class PathfinderView {
|
||||||
constructor(canvas: HTMLCanvasElement,
|
constructor(canvas: HTMLCanvasElement,
|
||||||
commonShaderSource: string,
|
commonShaderSource: string,
|
||||||
shaderSources: ShaderMap<ShaderProgramSource>) {
|
shaderSources: ShaderMap<ShaderProgramSource>) {
|
||||||
|
this.transform = glmatrix.mat4.create();
|
||||||
|
|
||||||
this.canvas = canvas;
|
this.canvas = canvas;
|
||||||
|
this.canvas.addEventListener('wheel', event => this.onWheel(event), false);
|
||||||
|
|
||||||
this.initContext();
|
this.initContext();
|
||||||
|
|
||||||
|
@ -587,6 +591,24 @@ class PathfinderView {
|
||||||
window.requestAnimationFrame(() => this.redraw());
|
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() {
|
resizeToFit() {
|
||||||
const width = window.innerWidth;
|
const width = window.innerWidth;
|
||||||
const height = window.scrollY + window.innerHeight -
|
const height = window.scrollY + window.innerHeight -
|
||||||
|
@ -628,7 +650,7 @@ class PathfinderView {
|
||||||
}
|
}
|
||||||
|
|
||||||
setTransformUniform(uniforms: UniformMap) {
|
setTransformUniform(uniforms: UniformMap) {
|
||||||
this.gl.uniformMatrix4fv(uniforms.uTransform, false, IDENTITY);
|
this.gl.uniformMatrix4fv(uniforms.uTransform, false, this.transform);
|
||||||
}
|
}
|
||||||
|
|
||||||
setFramebufferSizeUniform(uniforms: UniformMap) {
|
setFramebufferSizeUniform(uniforms: UniformMap) {
|
||||||
|
@ -715,7 +737,6 @@ class PathfinderView {
|
||||||
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.meshes.coverCurveIndices);
|
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.meshes.coverCurveIndices);
|
||||||
|
|
||||||
// Draw direct curve parts.
|
// Draw direct curve parts.
|
||||||
this.gl.uniformMatrix4fv(directCurveProgram.uniforms.uTransform, false, IDENTITY);
|
|
||||||
this.setTransformUniform(directCurveProgram.uniforms);
|
this.setTransformUniform(directCurveProgram.uniforms);
|
||||||
this.setFramebufferSizeUniform(directCurveProgram.uniforms);
|
this.setFramebufferSizeUniform(directCurveProgram.uniforms);
|
||||||
this.pathColorsBufferTexture.bind(this.gl, directCurveProgram.uniforms, 0);
|
this.pathColorsBufferTexture.bind(this.gl, directCurveProgram.uniforms, 0);
|
||||||
|
@ -739,6 +760,9 @@ class PathfinderView {
|
||||||
quadPositionsBuffer: WebGLBuffer;
|
quadPositionsBuffer: WebGLBuffer;
|
||||||
quadTexCoordsBuffer: WebGLBuffer;
|
quadTexCoordsBuffer: WebGLBuffer;
|
||||||
quadElementsBuffer: WebGLBuffer;
|
quadElementsBuffer: WebGLBuffer;
|
||||||
|
|
||||||
|
transform: Matrix4D;
|
||||||
|
|
||||||
dirty: boolean;
|
dirty: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue