blob: 357eb54f7e95bc874d57adc1c88356df0163b614 [file] [log] [blame]
<!DOCTYPE html>
<title>CanvasKit Viewer (Skia via Web Assembly)</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
<canvas id=viewer_canvas></canvas>
<script type="text/javascript" src="/node_modules/canvaskit/bin/canvaskit.js"></script>
<script type="text/javascript" charset="utf-8">
const flags = {};
for (const pair of location.hash.substring(1).split(',')) {
// Parse "values" as an array in case the value has a colon (e.g., "slide:http://...").
const [key, ...values] = pair.split(':');
flags[key] = values.join(':');
}
window.onhashchange = function() {
location.reload();
};
CanvasKitInit({
locateFile: (file) => '/node_modules/canvaskit/bin/'+file,
}).then((CK) => {
if (!CK) {
throw 'CanvasKit not available.';
}
LoadSlide(CK);
});
function LoadSlide(CanvasKit) {
if (!CanvasKit.MakeSlide || !CanvasKit.MakeSkpSlide || !CanvasKit.MakeSvgSlide) {
throw 'Not compiled with Viewer.';
}
const slideName = flags.slide || 'PathText';
if (slideName.endsWith('.skp') || slideName.endsWith('.svg')) {
fetch(slideName).then(function(response) {
if (response.status != 200) {
throw 'Error fetching ' + slideName;
}
if (slideName.endsWith('.skp')) {
response.arrayBuffer().then((data) => ViewerMain(
CanvasKit, CanvasKit.MakeSkpSlide(slideName, data)));
} else {
response.text().then((text) => ViewerMain(
CanvasKit, CanvasKit.MakeSvgSlide(slideName, text)));
}
});
} else {
ViewerMain(CanvasKit, CanvasKit.MakeSlide(slideName));
}
}
function ViewerMain(CanvasKit, slide) {
if (!slide) {
throw 'Failed to parse slide.'
}
const width = window.innerWidth;
const height = window.innerHeight;
const htmlCanvas = document.getElementById('viewer_canvas');
htmlCanvas.width = width;
htmlCanvas.height = height;
slide.load(width, height);
// For the msaa flag, only check if the key exists in flags. That way we don't need to assign it
// a value in the location hash. i.e.,: http://.../viewer.html#msaa
const doMSAA = ('msaa' in flags);
// Create the WebGL context with our desired attribs before calling MakeWebGLCanvasSurface.
CanvasKit.GetWebGLContext(htmlCanvas, {antialias: doMSAA});
const surface = CanvasKit.MakeWebGLCanvasSurface(htmlCanvas, null);
if (!surface) {
throw 'Could not make canvas surface';
}
if (doMSAA && surface.sampleCnt() <= 1) {
// We requested antialias on the canvas but did not get MSAA. Since we don't know what type of
// AA is in use right now (if any), this surface is unusable.
throw 'MSAA rendering to the on-screen canvas is not supported. ' +
'Please try again without MSAA.';
}
window.onmousedown = (event) => (event.button === 0) && Mouse(CanvasKit.InputState.Down, event);
window.onmouseup = (event) => (event.button === 0) && Mouse(CanvasKit.InputState.Up, event);
window.onmousemove = (event) => Mouse(CanvasKit.InputState.Move, event);
window.onkeypress = function(event) {
if (slide.onChar(event.keyCode)) {
ScheduleDraw();
return false;
} else {
switch (event.keyCode) {
case 's'.charCodeAt(0):
// 's' is the magic key in the native viewer app that turns on FPS monitoring. Toggle
// forced animation when it is pressed in order to get fps logs.
// HINT: Launch chrome with --disable-frame-rate-limit and --disable-gpu-vsync in order
// to measure frame rates above 60.
ScheduleDraw.forceAnimation = !ScheduleDraw.forceAnimation;
ScheduleDraw();
break;
}
}
return true;
}
window.onkeydown = function(event) {
const upArrowCode = 38;
if (event.keyCode === upArrowCode) {
ScaleCanvas((event.shiftKey) ? Infinity : 1.1);
return false;
}
const downArrowCode = 40;
if (event.keyCode === downArrowCode) {
ScaleCanvas((event.shiftKey) ? 0 : 1/1.1);
return false;
}
return true;
}
let [canvasScale, canvasTranslateX, canvasTranslateY] = [1, 0, 0];
function ScaleCanvas(factor) {
factor = Math.min(Math.max(1/(5*canvasScale), factor), 5/canvasScale);
canvasTranslateX *= factor;
canvasTranslateY *= factor;
canvasScale *= factor;
ScheduleDraw();
}
function TranslateCanvas(dx, dy) {
canvasTranslateX += dx;
canvasTranslateY += dy;
ScheduleDraw();
}
function Mouse(state, event) {
let modifierKeys = CanvasKit.ModifierKey.None;
if (event.shiftKey) {
modifierKeys |= CanvasKit.ModifierKey.Shift;
}
if (event.altKey) {
modifierKeys |= CanvasKit.ModifierKey.Option;
}
if (event.ctrlKey) {
modifierKeys |= CanvasKit.ModifierKey.Ctrl;
}
if (event.metaKey) {
modifierKeys |= CanvasKit.ModifierKey.Command;
}
let [dx, dy] = [event.pageX - this.lastX, event.pageY - this.lastY];
this.lastX = event.pageX;
this.lastY = event.pageY;
if (slide.onMouse(event.pageX, event.pageY, state, modifierKeys)) {
ScheduleDraw();
return false;
} else if (event.buttons & 1) { // Left-button pressed.
TranslateCanvas(dx, dy);
return false;
}
return true;
}
function ScheduleDraw() {
if (ScheduleDraw.hasPendingAnimationRequest) {
// It's possible for this ScheduleDraw() method to be called multiple times before an
// animation callback actually gets invoked. Make sure we only ever have one single
// requestAnimationFrame scheduled at a time, because otherwise we can get stuck in a
// position where multiple callbacks are coming in on a single compositing frame, and then
// rescheduling multiple more for the next frame.
return;
}
ScheduleDraw.hasPendingAnimationRequest = true;
surface.requestAnimationFrame((canvas) => {
ScheduleDraw.hasPendingAnimationRequest = false;
canvas.save();
canvas.translate(canvasTranslateX, canvasTranslateY);
canvas.scale(canvasScale, canvasScale);
canvas.clear(CanvasKit.WHITE);
slide.draw(canvas);
canvas.restore();
// HINT: Launch chrome with --disable-frame-rate-limit and --disable-gpu-vsync in order to
// allow this to go faster than 60fps.
const ms = (ScheduleDraw.fps && ScheduleDraw.fps.markFrameComplete()) ||
window.performance.now();
if (slide.animate(ms * 1e6) || ScheduleDraw.forceAnimation) {
ScheduleDraw.fps = ScheduleDraw.fps || new FPSMeter(ms);
ScheduleDraw();
} else {
delete ScheduleDraw.fps;
}
});
}
ScheduleDraw();
}
function FPSMeter(startMs) {
this.frames = 0;
this.startMs = startMs;
this.markFrameComplete = () => {
++this.frames;
const ms = window.performance.now();
const sec = (ms - this.startMs) / 1000;
if (sec > 2) {
console.log(Math.round(this.frames / sec) + ' fps');
this.frames = 0;
this.startMs = ms;
}
return ms;
};
}
</script>