Overleaf/services/web/public/js/libs/pdfListView/PdfListView.js

(function (name, context, definition) {
  if (typeof module != 'undefined' && module.exports) module.exports = definition()
  else if (typeof define == 'function' && define.amd) define(definition)
  else context[name] = definition()
})('PDFListView', this, function (name, context) {

//#expand __BUNDLE__

function Logger() {
    this.logLevel = Logger.INFO;
    var self = this;
    if (typeof(console) == "object" && typeof(console.log) == "function") {
        this.debug = function() {
            if (self.logLevel <= Logger.DEBUG) {
                console.log.apply(console, arguments);
            }
        };
        this.info = function() {
            if (self.logLevel <= Logger.INFO) {
                console.log.apply(console, arguments);
            }
        };
        this.error = function() {
            if (self.logLevel <= Logger.ERROR) {
                console.log.apply(console, arguments);
            }
        };
    } else {
        this.debug = this.info = this.error = function nop() {};
    }
}

Logger.DEBUG = 0;
Logger.INFO  = 1;
Logger.ERROR = 2;

var logger = new Logger();

function _flat(arr) {
    var res = arr.reduce(function(a, b) {
        return a.concat(b);
    });
    return res;
}

function failDumper(err) {
    logger.error(err);
}

if (typeof(PDFJS) === "undefined") {
    logger.error("PDF.js is not yet loaded.");
}

// -----------------------------------------------------------------------------

/**
 * Wrapper around the raw PDF.JS document.
 */
function Document(url, password, onProgress) {
    this.pdfDocument = null;
    this.pages = null;

    var parameters = {password: password};
    if (typeof url === 'string') { // URL
      parameters.url = url;
    } else if (url && 'byteLength' in url) { // ArrayBuffer
      parameters.data = url;
    }

    this.initialized = new PDFJS.LegacyPromise();
    PDFJS.getDocument(parameters, null, null, onProgress).then(this.loadPages.bind(this), failDumper);
}

Document.prototype.loadPages = function(pdfDocument) {
    this.pdfDocument = pdfDocument;
    var pagesCount = this.pagesCount = pdfDocument.numPages;

    var pagePromises = [];
    for (var i = 1; i <= pagesCount; i++) {
        pagePromises.push(pdfDocument.getPage(i));
    }

    this.pageRefMap = pageRefMap = {};
    var pagesPromise = Promise.all(pagePromises);
    var doc = this
    pagesPromise.then(function(promisedPages) {
        doc.pages = promisedPages.map(function(pdfPage, i) {
            var pageRef = pdfPage.ref
            pageRefMap[pageRef.num + ' ' + pageRef.gen] = i;
            return new Page(pdfPage);
        });
    });

    var destinationsPromise = pdfDocument.getDestinations();
    destinationsPromise.then(function(destinations) {
        doc.destinations = destinations;
    });

    Promise.all([pagesPromise, destinationsPromise]).then(function() {
        doc.initialized.resolve();
    }, failDumper);
};

/**
 * Handles the rendering. Multiple ListViews can be bound to a RenderController.
 * In that case, the RenderController figures out what's page has the highest
 * priority to render
 */
function RenderController() {
    this.listViews = [];
    this.renderList = [];
}

RenderController.prototype = {
    addListView: function(listView) {
        // TODO: assert listView not already in list of this.listView
        this.listViews.push(listView);
    },

    updateRenderList: function() {
        this.renderList = _flat(this.listViews.map(function(listView) {
            return listView.getPagesToRender();
        }));

        // TODO: Some "highest-priority" sorting algorithm on the renderList.

        this.doRender();
    },

    pageToRender: function() {
        if (this.renderList.length === 0) return null;

        return this.renderList[0];
    },

    doRender: function() {
        var pageToRender = this.pageToRender();

        if (!pageToRender) return;

        pageToRender.render(this);
    },

    finishedRendering: function(pageView) {
        var idx = this.renderList.indexOf(pageView);

        // If the finished pageView is in the list of pages to render,
        // then remove it from the list and render start rendering the
        // next page.
        if (idx !== -1) {
            this.renderList.splice(idx, 1);
            this.doRender();
        }
    },

    onResize: function() {
        var renderAgain = false
        this.listViews.map(function(listView) {
            if (listView.calculateScale()) {
                listView.layout();
                renderAgain = true;
            }
        });
        if (renderAgain) {
            this.updateRenderList();
        }
    }
};

var LAYOUT_SINGLE = 'layout_single';
var SCALE_MODE_AUTO = 'scale_mode_auto';
var SCALE_MODE_VALUE = 'scale_mode_value';
var SCALE_MODE_FIT_WIDTH = 'scale_mode_fit_width';
var SCALE_MODE_FIT_HEIGHT = 'scale_mode_fit_height';

/**
 * Main view that holds the single pageContainer/pageViews of the pdfDoc.
 */
function ListView(dom, options) {
    this.dom = dom;
    this.options = options;

    this.pageLayout = LAYOUT_SINGLE;
    this.scaleMode = SCALE_MODE_VALUE;
    this.scale = 1.0;

    this.pageWidthOffset = 0;
    this.pageHeightOffset = 0;

    this.pageViews = [];
    this.containerViews = [];
}

ListView.prototype = {
    setDocument: function(pdfDoc) {
        this.clearPages();

        this.pdfDoc = pdfDoc;

        this.assignPagesToContainer();
        this.layout();
    },

    clearPages: function() {
        var self = this;
        this.containerViews.map(function(container) {
            self.dom.removeChild(container.dom);
        });
        this.pageViews = [];
        this.containerViews = [];
    },

    assignPagesToContainer: function() {
        // TODO: Handle multiple layout types here. For now, assume to have one page
        // per pageContainer.
        this.pdfDoc.pages.map(function(page) {
            var pageView = new PageView(page, this);

            // TODO: Switch over to a proper event handler
            var that = this;
            var index = that.pageViews.length;
            pageView.ondblclick = function(e) {
                e.page = index;
                if (that.ondblclick) {
                    that.ondblclick.call(that, e);
                }
            }
            this.pageViews.push(pageView);

            var container = new PageContainerView(this);
            container.setPageView(pageView, 0);
            this.containerViews.push(container);

            this.dom.appendChild(container.dom);
        }, this);
    },

    layout: function() {
        this.savePdfPosition();
        this.containerViews.forEach(function(containerView) {
            containerView.layout();
        });
        this.restorePdfPosition();
    },

    getScale: function() {
        return this.scale;
    },

    getScaleMode: function() {
        return this.scaleMode;
    },

    setScaleMode: function(scaleMode, scale) {
        this.scaleMode = scaleMode;
        if (scaleMode == SCALE_MODE_VALUE) {
            this.scale = scale;
        }
        this.calculateScale();
        this.layout();
    },

    setScale: function(scale) {
        this.setScaleMode(SCALE_MODE_VALUE, scale);
    },

    setToAutoScale: function() {
        this.setScaleMode(SCALE_MODE_AUTO);
    },

    setToFitWidth: function() {
        this.setScaleMode(SCALE_MODE_FIT_WIDTH);
    },

    setToFitHeight: function() {
        this.setScaleMode(SCALE_MODE_FIT_HEIGHT);
    },

    // Calculates the new scale. Returns `true` if the scale changed.
    calculateScale: function() {
        var newScale = this.scale;
        var oldScale = newScale;
        var scaleMode = this.scaleMode;
        if (scaleMode === SCALE_MODE_FIT_WIDTH || scaleMode === SCALE_MODE_AUTO) {
            var clientWidth = this.dom.clientWidth;
            if (clientWidth == 0) {
                logger.debug("LIST VIEW NOT VISIBLE")
                return false;
            }
            var maxNormalWidth = 0;
            this.containerViews.forEach(function(containerView) {
                maxNormalWidth = Math.max(maxNormalWidth, containerView.normalWidth);
            });
            var scale = (clientWidth - this.pageWidthOffset)/maxNormalWidth;
            if (scaleMode === SCALE_MODE_AUTO) {
                scale = Math.min(1.0, scale);
            }
            newScale = scale;
        } else if (scaleMode === SCALE_MODE_FIT_HEIGHT) {
            var clientHeight = this.dom.clientHeight;
            if (clientHeight == 0) {
                logger.debug("LIST VIEW NOT VISIBLE")
                return false;
            }
            var maxNormalHeight = 0;
            this.containerViews.forEach(function(containerView) {
                maxNormalHeight = Math.max(maxNormalHeight, containerView.normalHeight);
            });
            newScale = (clientHeight - this.pageHeightOffset)/maxNormalHeight;
        }
        this.scale = newScale;
        return newScale !== oldScale;
    },

    getPagesToRender: function() {
        // Cache these results to avoid dom access.
        this.scrollTop = this.dom.scrollTop;
        this.scrollBottom = this.scrollTop + this.dom.clientHeight;

        // TODO: For now, this only returns the visible pages and not
        // +1/-1 one to render in advance.
        return this.pageViews.filter(function(pageView) {
            var isVisible = pageView.isVisible();

            if (isVisible && !pageView.isRendered) {
                return true;
            }
        });
    },

    navigateTo: function(destRef) {
        var destination = this.pdfDoc.destinations[destRef]
        if (typeof destination !== "object") {
            return;
        }
        logger.debug("NAVIGATING TO", destination);

        var pageRef = destination[0];
        var pageNumber = this.pdfDoc.pageRefMap[pageRef.num + ' ' + pageRef.gen];
        if (typeof pageNumber !== "number") {
            return;
        }
        logger.debug("PAGE NUMBER", pageNumber);

        var pageView = this.pageViews[pageNumber];

        var destinationType = destination[1].name;
        switch(destinationType) {
            case "XYZ":
                var x = destination[2];
                var y = destination[3];
                break;
            default:
                // TODO
                return;
        }
        var position = pageView.getPdfPositionInViewer(x,y);
        this.dom.scrollTop = position.top;
        this.dom.scrollLeft = position.left;
    },

    savePdfPosition: function() {
        this.pdfPosition = this.getPdfPosition();
        logger.debug("SAVED PDF POSITION", this.pdfPosition);
    },

    restorePdfPosition: function() {
        logger.debug("RESTORING PDF POSITION", this.pdfPosition);
        this.setPdfPosition(this.pdfPosition);
    },

    getPdfPosition: function() {
        var pdfPosition = null;
        for (var i = 0; i < this.pageViews.length; i++) {
            var pageView = this.pageViews[i];
            var pdfOffset = pageView.getUppermostVisiblePdfOffset();
            if (pdfOffset !== null) {
                pdfPosition = {
                    page: i,
                    offset: {
                        top: pdfOffset,
                        left: 0 // TODO
                    }
                }
                break;
            }
        }
        return pdfPosition;
    },

    setPdfPosition: function(pdfPosition) {
        if (typeof pdfPosition !== "undefined" && pdfPosition != null) {
            var offset = pdfPosition.offset;
            var page_index = pdfPosition.page;
            var pageView = this.pageViews[page_index];
            var position = pageView.getPdfPositionInViewer(offset.left, offset.top);
            this.dom.scrollTop = position.top;
        }
    }
};

/*
 * A PageContainerView holds multiple PageViews. E.g. in a two-page layout,
 * every pageContainerView holds two PageViews and is responsible to layout
 * them.
 */
function PageContainerView(listView) {
    this.listView = listView;

    var dom = this.dom = document.createElement('div');
    dom.className = 'plv-page-container page-container';
    this.pages = [];
}

PageContainerView.prototype = {
    setPageView: function(pageView, idx) {
        // TODO: handle case if there is already a page here
        this.pages[idx] = pageView;

        // TODO: handle page idx properly
        this.dom.appendChild(pageView.dom);
    },

    removePageView: function(idx) {
        // TODO: check if idx is set on page[]
        this.dom.removeChild(this.pages[idx].dom);
    },

    layout: function() {
        var scale = this.listView.scale;

        var normalWidth = 0;
        var normalHeight = 0;

        this.pages.forEach(function(pageView) {
            pageView.layout();
            normalWidth += pageView.normalWidth;
            normalHeight = Math.max(pageView.normalHeight, normalHeight);
        });

        this.normalWidth = normalWidth;
        this.normalHeight = normalHeight;

        this.dom.style.width = (normalWidth * scale) + 'px';
        this.dom.style.height = (normalHeight * scale) + 'px';
    }
};

var RenderingStates = {
  INITIAL: 0,
  RUNNING: 1,
  PAUSED: 2,
  FINISHED: 3
};

var idCounter = 0;


/**
 * The view for a single page.
 */
function PageView(page, listView) {
    this.page = page;
    this.listView = listView;
    this.id = idCounter++;
    this.number = this.page.number;

    this.rotation = 0;

    this.isRendered = false;
    this.renderState = RenderingStates.INITIAL;

    var dom = this.dom = document.createElement('div');
    dom.className = "plv-page-view page-view";
    var that = this;
    dom.ondblclick = function(e) {
        var layerX = e.layerX;
        var layerY = e.layerY;
        var element = e.target;
        while (element.offsetParent && element.offsetParent !== dom) {
            layerX = layerX + element.offsetLeft;
            layerY = layerY + element.offsetTop;
            element = element.offsetParent;
        }

        var pdfPoint = that.viewport.convertToPdfPoint(layerX, layerY);
        var event = {
            x: pdfPoint[0],
            y: that.normalHeight - pdfPoint[1]
        };

        if (that.ondblclick) {
            that.ondblclick.call(that.listView, event)
        }
    }
    this.createNewCanvas();
}

PageView.prototype = {
    layout: function() {
        var scale = this.listView.scale;

        var viewport = this.viewport =
            this.page.pdfPage.getViewport(scale, this.rotation);

        this.normalWidth = viewport.width / scale;
        this.normalHeight = viewport.height / scale;

        // Only change the width/height property of the canvas if it really
        // changed. Every assignment to the width/height property clears the
        // content of the canvas.

        var outputScale = this.getOutputScale();

        var scaledWidth = (Math.floor(viewport.width) * outputScale.sx) | 0;
        var scaledHeight = (Math.floor(viewport.height) * outputScale.sy) | 0;

        var newWidth = Math.floor(viewport.width);
        var newHeight = Math.floor(viewport.height);

        if (this.canvas.width !== newWidth) {
            this.canvas.width = scaledWidth;
            this.canvas.style.width = newWidth + 'px';
            this.resetRenderState();
        }
        if (this.canvas.height !== newHeight) {
            this.canvas.height = scaledHeight;
            this.canvas.style.height = newHeight + 'px';
            this.resetRenderState();
        }
        
        if(outputScale.scaled){
            var ctx = this.getCanvasContext()
            ctx.scale(outputScale.sx, outputScale.sy)
        }

        this.width = viewport.width;
        this.height = viewport.height;
    },

    isVisible: function() {
        var listView = this.listView;
        var dom = this.dom;
        var offsetTop = dom.offsetTop;
        var offsetBottom = offsetTop + this.height;

        return offsetBottom >= listView.scrollTop &&
                offsetTop <= listView.scrollBottom;
    },

    resetRenderState: function() {
        this.renderState = RenderingStates.INITIAL;
        this.isRendered = false;
        if (this.textLayerDiv) {
            this.dom.removeChild(this.textLayerDiv);
            delete this.textLayerDiv;
        }
        if (this.annotationsLayerDiv) {
            this.dom.removeChild(this.annotationsLayerDiv);
            delete this.annotationsLayerDiv;
        }
    },

    render: function(renderController) {
        return this.page.render(this, renderController);
    },

    getCanvasContext: function() {
        return this.canvas.getContext('2d');
    },

    /**
     * Returns scale factor for the canvas. It makes sense for the HiDPI displays.
     * @return {Object} The object with horizontal (sx) and vertical (sy)
                        scales. The scaled property is set to false if scaling is
                        not required, true otherwise.
     */

    getOutputScale: function(){
        var ctx = this.getCanvasContext()
        var devicePixelRatio = window.devicePixelRatio || 1;
        var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
                              ctx.mozBackingStorePixelRatio ||
                              ctx.msBackingStorePixelRatio ||
                              ctx.oBackingStorePixelRatio ||
                              ctx.backingStorePixelRatio || 1;
        var pixelRatio = devicePixelRatio / backingStoreRatio;
        return {
            sx: pixelRatio,
            sy: pixelRatio,
            scaled: pixelRatio != 1
        };
    },

    createNewCanvas: function() {
        if (this.canvas) {
            this.dom.removeChild(this.canvas);
        }
        var canvas = this.canvas = document.createElement('canvas');
        this.dom.appendChild(canvas);
        this.layout();
    },

    pdfPositionToPixels: function(x, y) {
        return this.viewport.convertToViewportPoint(x, y);
    },

    getCanvasPositionInViewer: function() {
        return {
            left: this.canvas.offsetLeft + this.dom.offsetLeft,
            top: this.canvas.offsetTop + this.dom.offsetTop
        }
    },

    getPdfPositionInViewer: function(x, y) {
        pageOffset = this.pdfPositionToPixels(x, y);
        canvasOffset = this.getCanvasPositionInViewer();
        return {
            left: canvasOffset.left + pageOffset[0],
            top: canvasOffset.top + pageOffset[1]
        }
    },

    getUppermostVisibleCanvasOffset: function() {
        var pagePosition = this.getCanvasPositionInViewer();
        var pageHeight = this.canvas.height;
        var viewportTop = this.listView.dom.scrollTop;
        var viewportHeight = this.listView.dom.clientHeight;
        // Check if the top of the page is showing, i.e:
        // _______________
        // |             |
        // |   ........  |
        // |   .      .  |
        // ----.------.---
        //     .      .
        //     ........
        var topVisible = (pagePosition.top > viewportTop && pagePosition.top < viewportTop + viewportHeight);
        // Check if at least some of the page is showing, i.e:
        //     ........                 ........
        // ____.______.___           ---.------.---
        // |   .      .  |     or    |  .      .  |
        // |   .      .  |           |  .      .  |
        // |   ........  |           |  .      .  |
        // ---------------           ---.------.---
        //                              ........
        var someContentVisible = (pagePosition.top < viewportTop && pagePosition.top + pageHeight > viewportTop);
        if (topVisible) {
            return 0;
        } else if (someContentVisible) {
            return viewportTop - pagePosition.top;
        } else {
            return null;
        }
    },

    getUppermostVisiblePdfOffset: function() {
        var canvasOffset = this.getUppermostVisibleCanvasOffset();
        if (canvasOffset === null) {
            return null;
        }
        var pdfOffset = this.viewport.convertToPdfPoint(0, canvasOffset);
        return pdfOffset[1];
    }
};

/**
 * An abstraction around the raw page object of PDF.JS, that also handles the
 * rendering logic of (maybe multiple) pageView(s) that are based on this page.
 */
function Page(pdfPage, number) {
    this.number = number;
    this.pdfPage = pdfPage;

    this.renderContextList = {};
}

Page.prototype = {
    render: function(pageView, renderController) {
        var renderContext;

        // FEATURE: If the page was rendered already once, then use the old
        // version as a placeholder until the new version is rendered at the
        // expected quality.

        // FEATURE: If the page can be rendered at low quality (thumbnail) and
        // there is already a higher resolution rendering, then use this one
        // instead of rerendering from scratch again.

        // PageView is not layouted.
        if (!pageView.viewport) return;

        // Nothing todo.
        if (pageView.isRendered) return;

        // Not most important page to render ATM.
        if (renderController.pageToRender() !== pageView) return;

        var self = this;
        var viewport;
        if (renderContext = this.renderContextList[pageView.id]) {
            viewport = renderContext.viewport;

            // TODO: handle rotation
            if (viewport.height !== pageView.viewport.height ||
                viewport.height !== pageView.viewport.height)
            {
                // The viewport changed -> need to rerender.
                renderContext.abandon = true;
                delete self.renderContextList[pageView.id];
                pageView.createNewCanvas();
                self.render(pageView, renderController);
            } else if (renderContext.state === RenderingStates.PAUSED) {
                // There is already a not finished renderState ->
                logger.debug('RESUME', pageView.id);
                renderContext.resume();
            }
        }

        if (!renderContext) {
            viewport = pageView.viewport;
            // No rendering data yet -> create a new renderContext and start
            // the rendering process.

            var textLayer;
            var textLayerBuilder = pageView.listView.options.textLayerBuilder;
            if (textLayerBuilder) {
                var textLayerDiv = pageView.textLayerDiv = document.createElement("div");
                textLayerDiv.className = 'plv-text-layer text-layer';
                pageView.dom.appendChild(textLayerDiv);
                textLayer = new textLayerBuilder(textLayerDiv);
                this.pdfPage.getTextContent().then(
                  function(textContent) {
                    textLayer.setTextContent(textContent);
                  }
                );
            }

            var annotationsLayerBuilder = pageView.listView.options.annotationsLayerBuilder;
            if (annotationsLayerBuilder) {
                var annotationsLayerDiv = pageView.annotationsLayerDiv = document.createElement("div");
                annotationsLayerDiv.className = 'plv-annotations-layer annotations-layer';
                pageView.dom.appendChild(annotationsLayerDiv);
                var annotationsLayer = new annotationsLayerBuilder(pageView, annotationsLayerDiv);
                this.pdfPage.getAnnotations().then(
                    function(annotations) {
                        annotationsLayer.setAnnotations(annotations)
                    }
                );
            }

            renderContext = {
              canvasContext: pageView.getCanvasContext(),
              viewport: viewport,
              textLayer: textLayer,
              continueCallback: function pdfViewContinueCallback(cont) {
                if (renderContext.abandon) {
                  logger.debug("ABANDON", pageView.id);
                  return;
                }

                if (renderController.pageToRender() !== pageView) {
                  logger.debug('PAUSE', pageView.id);
                  renderContext.state = RenderingStates.PAUSED;
                  renderContext.resume = function resumeCallback() {
                    renderContext.state = RenderingStates.RUNNING;
                    cont();
                  };
                  return;
                }
                logger.debug('CONT', pageView.id);
                cont();
              }
            };
            this.renderContextList[pageView.id] = renderContext;

            logger.debug("BEGIN", pageView.id);
            renderContext.renderPromise = this.pdfPage.render(renderContext).promise;
            renderContext.renderPromise.then(
              function pdfPageRenderCallback() {
                logger.debug('DONE', pageView.id);
                pageView.isRendered = true;
                renderController.finishedRendering(pageView);
              },
              failDumper
            );
        }

        return renderContext.renderPromise;
    }
};

function PDFListView(mainDiv, options) {
    if (typeof(options) != "object") {
        options = {};
    }
    if (typeof(options.logLevel) != "number") {
        options.logLevel = Logger.INFO;
    }
    logger.logLevel = options.logLevel;

    var self = this;

    this.listView = new ListView(mainDiv, options);
    this.listView.ondblclick = function(e) {
        if (options.ondblclick) {
            options.ondblclick.call(self, e);
        }
    }

    this.renderController = new RenderController();
    this.renderController.addListView(this.listView);
    this.renderController.updateRenderList();


    mainDiv.addEventListener('scroll', function() {
        // This will update the list AND start rendering if needed.
        self.renderController.updateRenderList();
    });

    window.addEventListener('resize', function() {
        // Check if the scale changed due to the resizing.
        if (self.listView.calculateScale()) {
            // Update the layout and start rendering. Changing the layout
            // of the PageView makes it rendering stop.
            self.listView.layout();
            self.renderController.updateRenderList();
        }
    });
}

PDFListView.prototype = {
    loadPdf: function(url, onProgress) {
        this.doc = new Document(url, null, onProgress);
        var self = this;
        var promise = this.doc.initialized;
        promise.then(function() {
            logger.debug('LOADED');
            self.listView.setDocument(self.doc);
            self.renderController.updateRenderList();
        }, failDumper);
        return promise;
    },

    getScale: function() {
        return this.listView.getScale();
    },

    getScaleMode: function() {
        return this.listView.getScaleMode()
    },

    setScaleMode: function(scaleMode, scale) {
        this.listView.setScaleMode(scaleMode, scale);
        this.renderController.updateRenderList();
    },

    setScale: function(scale) {
        this.listView.setScale(scale);
        this.renderController.updateRenderList();
    },

    setToAutoScale: function() {
        this.listView.setToAutoScale();
        this.renderController.updateRenderList();
    },

    setToFitWidth: function() {
        this.listView.setToFitWidth();
        this.renderController.updateRenderList();
    },

    setToFitHeight: function() {
        this.listView.setToFitHeight();
        this.renderController.updateRenderList();
    },

    onResize: function() {
        this.renderController.onResize();
    },

    getPdfPosition: function() {
        return this.listView.getPdfPosition();
    },

    setPdfPosition: function(pdfPosition) {
        this.listView.setPdfPosition(pdfPosition)
    }
};
PDFListView.Logger = Logger;

return PDFListView;

});