slideshow.io/static/js/viewer.js

$(function() { sio = (function() {

    var sio = {};

    var canvasPdf = $('#canvas-pdf').get(0);
    var contextPdf = canvasPdf.getContext('2d');

    var canvasPaint = $('#canvas-paint').get(0);
    var contextPaint = canvasPaint.getContext('2d');

    var pdf;
    var pageNumber = 1;

    var pointer = false;
    var canvasPdfBounding;

    var drawAudienceLaser = false;
    var lasers = {};


    PDFJS.getDocument('/static/uploaded/' + filename + '.pdf').then(function getPdfHelloWorld(_pdf) {

        pdf = _pdf;
        update();

    });

    var socket = io();

    socket.on('welcome', function() {
        socket.emit('viewer', filename);
    });

    socket.on('update', function(newPageNumber) {
        pageNumber = newPageNumber;
        update();
    });

    socket.on('viewer-laser', function(enabled) {
        drawAudienceLaser = enabled;
    });

    socket.on('pointer', canvasPointer);

    function update() {

        pdf.getPage(pageNumber).then(function(page) {

            var scale;

            // width / height
            var ratio = page.pageInfo.view[2] / page.pageInfo.view[3];

            if (window.innerWidth < window.innerHeight) {

                canvasPdf.width = window.innerWidth;
                canvasPdf.height = canvasPdf.width / ratio;
                scale = canvasPdf.width / page.getViewport(1.0).width;

            } else {

                canvasPdf.height = window.innerHeight;
                canvasPdf.width = ratio * canvasPdf.height;
                scale = canvasPdf.width / page.getViewport(1.0).width;
            }

            canvasPaint.width = canvasPdf.width;
            canvasPaint.height = canvasPdf.height;

            $('#canvases').width(canvasPdf.width + 'px');
            $('#canvases').height(canvasPdf.height + 'px');

            canvasPdfBounding = canvasPdf.getBoundingClientRect();

            var viewport = page.getViewport(scale);

            var renderContext = {
                canvasContext: contextPdf,
                viewport: viewport
            };

            page.render(renderContext);

        });

    }

    function canvasPointer(id,x,y) {

        // Clear canvas
        canvasPaint.width = canvasPaint.width;

        if (id != undefined) {
            if ( x != undefined && y != undefined) {
                lasers[id] = {x:x, y:y};
            } else {
                delete lasers[id];
            }
        }

        for (var laserIndex in lasers) {

            var laser = lasers[laserIndex];

            if (drawAudienceLaser === true || laserIndex === 'speaker') {

                contextPaint.fillStyle = laserIndex === 'speaker' ? 'red' : 'green';
                contextPaint.beginPath();
                contextPaint.arc(laser.x * canvasPdf.width, laser.y * canvasPdf.height, 10, 0, Math.PI*2, true);
                contextPaint.closePath();
                contextPaint.fill();

            }

        }

    }

    $(window).resize(update);

    sio.onMouseDown = function() {

        var x = event.offsetX / canvasPdf.width;
        var y = event.offsetY / canvasPdf.height;

        socket.emit('pointer', filename, socket.id, x, y);

        pointer = true;
        shouldUpdatePointer = true;

        canvasPointer(socket.id, x, y);

    };

    sio.onMouseMove = function(event) {

        if (pointer) {

            var x = event.offsetX / canvasPdf.width;
            var y = event.offsetY / canvasPdf.height;

            if (shouldUpdatePointer) {
                // Update
                socket.emit('pointer', filename, socket.id, x, y);

                shouldUpdatePointer = false;

                setTimeout(function() {

                    shouldUpdatePointer = true;

                }, 20);

            }

            canvasPointer(socket.id, x, y);

        }

    };

    sio.onMouseUp = function(event) {

        socket.emit('pointer', filename, socket.id);

        pointer = false;
        shouldUpdatePointer = false;

        canvasPointer(socket.id);

    };

    return sio;

})(); });