# Screen

#####

declaration
Screen

This module contains the common methods of all drawing modules.

    var Screen = (function () {
    function Screen(id, options) {
        if (typeof options === "undefined") { options = {}; }
        var _this = this;
        this.type = 'screen';
        var that = this, defaults = {
            height: 500,
            width: 500,
            contextMenu: {
                screenshot: true,
                fullscreen: true,
                grid: true
            },
            figcaption: ''
        }, opts = MathLib.extendObject(defaults, options), container = document.getElementById(id), innerHTMLContextMenu = '', uuid = +Date.now(), fullscreenchange, innerHTML;

        container.innerHTML = template(opts);
        container.classList.add('MathLib_container');

        this.height = opts.height;
        this.width = opts.width;
        this.options = opts;
        this.container = container;
        this.figure = container.getElementsByClassName('MathLib_figure')[0];
        this.wrapper = container.getElementsByClassName('MathLib_wrapper')[0];
        this.contextMenu = container.getElementsByClassName('MathLib_mainmenu')[0];
        this.contextMenuOverlay = container.getElementsByClassName('MathLib_contextMenuOverlay')[0];
        this.innerHTMLContextMenu = innerHTMLContextMenu;

        if (options.contextMenu) {
            this.wrapper.oncontextmenu = function (evt) {
                return _this.oncontextmenu(evt);
            };

            if (opts.contextMenu.screenshot && !('opera' in window)) {
                this.contextMenu.getElementsByClassName('MathLib_screenshot')[0].onclick = function () {
                    var dataURI, a = document.createElement('a');

                    if (that.options.renderer === 'Canvas' && that.type === 'screen2D') {
                        var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d');

                        canvas.height = that.height;
                        canvas.width = that.width;

                        ctx.drawImage(that.layer.back.element, 0, 0);
                        ctx.drawImage(that.layer.grid.element, 0, 0);
                        ctx.drawImage(that.layer.axes.element, 0, 0);
                        ctx.drawImage(that.layer.main.element, 0, 0);

                        dataURI = canvas.toDataURL('image/png');
                        if ('download' in a) {
                            a.href = dataURI;
                            a.download = 'plot.png';
                            a.click();
                        } else {
                            window.location.href = dataURI.replace('image/png', 'image/octet-stream');
                        }
                    }

                    if (that.options.renderer === 'WebGL' && that.type === 'screen3D') {
                        dataURI = that.element.toDataURL('image/png');
                        if ('download' in a) {
                            a.href = dataURI;
                            a.download = 'plot.png';
                            a.click();
                        } else {
                            window.location.href = dataURI.replace('image/png', 'image/octet-stream');
                        }
                    } else if (that.options.renderer === 'SVG') {
                        dataURI = 'data:image/svg+xml,' + that.element.parentElement.innerHTML;

                        if ('download' in a) {
                            a.href = dataURI;
                            a.download = 'plot.svg';
                            a.click();
                        } else {
                            window.location.href = dataURI.replace('image/svg+xml', 'image/octet-stream');
                        }
                    }
                };
            }

            if (opts.contextMenu.fullscreen && 'requestFullScreen' in document.body) {
                this.contextMenu.getElementsByClassName('MathLib_fullscreen')[0].onclick = function () {
                    if (document.fullscreenElement) {
                        document.exitFullScreen();
                    } else {
                        that.container.requestFullScreen();
                    }
                };
            }

            if (opts.contextMenu.grid) {
                this.contextMenu.getElementsByClassName('MathLib_grid_type')[0].onchange = function () {
                    that.options.grid.type = 'cartesian';
                    that.draw();
                };
                this.contextMenu.getElementsByClassName('MathLib_grid_type')[1].onchange = function () {
                    that.options.grid.type = 'polar';
                    that.draw();
                };
                this.contextMenu.getElementsByClassName('MathLib_grid_type')[2].onchange = function () {
                    that.options.grid.type = false;
                    that.draw();
                };
            }
        }

        fullscreenchange = function () {
            if (document.fullscreenElement) {
                that.origWidth = that.width;
                that.origHeight = that.height;
                that.resize(window.outerWidth, window.outerHeight);
            } else {
                that.resize(that.origWidth, that.origHeight);
                delete that.origWidth;
                delete that.origHeight;
            }
        };

        if ('onfullscreenchange' in this.container) {
            this.container.addEventListener('fullscreenchange', fullscreenchange);
        } else if ('onmozfullscreenchange' in this.container) {
            this.container.addEventListener('mozfullscreenchange', fullscreenchange);
        } else if ('onwebkitfullscreenchange' in this.container) {
            this.container.addEventListener('webkitfullscreenchange', fullscreenchange);
        }
    }

# oncontextmenu

#####

method
Screen.prototype.oncontextmenu()

Option name | Type | Description
--- | --- | ---
evt | event | The event object

Handles the contextmenu event

    Screen.prototype.oncontextmenu = function (evt) {
        var listener, _this = this, menu = this.contextMenu, overlay = this.contextMenuOverlay;

        if (evt.preventDefault) {
            evt.preventDefault();
        }
        evt.returnValue = false;

        menu.style.setProperty('top', (evt.clientY - 20) + 'px');
        menu.style.setProperty('left', evt.clientX + 'px');
        overlay.style.setProperty('display', 'block');

        listener = function () {
            overlay.style.setProperty('display', 'none');

            Array.prototype.forEach.call(_this.contextMenu.getElementsByClassName('MathLib_temporaryMenuItem'), function (x) {
                _this.contextMenu.removeChild(x);
            });

            overlay.removeEventListener('click', listener);
        };

        overlay.addEventListener('click', listener);
    };
    return Screen;
        })();
        MathLib.Screen = Screen;
    })(MathLib || (MathLib = {}));