pandemonium_engine/platform/javascript/js/libs/library_pandemonium_display.js

/*************************************************************************/
/*  library_pandemonium_display.js                                             */
/*************************************************************************/
/*                       This file is part of:                           */
/*                           GODOT ENGINE                                */
/*                      https://godotengine.org                          */
/*************************************************************************/
/* Copyright (c) 2007-2022 Juan Linietsky, Ariel Manzur.                 */
/* Copyright (c) 2014-2022 Godot Engine contributors (cf. AUTHORS.md).   */
/*                                                                       */
/* Permission is hereby granted, free of charge, to any person obtaining */
/* a copy of this software and associated documentation files (the       */
/* "Software"), to deal in the Software without restriction, including   */
/* without limitation the rights to use, copy, modify, merge, publish,   */
/* distribute, sublicense, and/or sell copies of the Software, and to    */
/* permit persons to whom the Software is furnished to do so, subject to */
/* the following conditions:                                             */
/*                                                                       */
/* The above copyright notice and this permission notice shall be        */
/* included in all copies or substantial portions of the Software.       */
/*                                                                       */
/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,       */
/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF    */
/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.*/
/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY  */
/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,  */
/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE     */
/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.                */
/*************************************************************************/

const PandemoniumDisplayVK = {

    $PandemoniumDisplayVK__deps: ['$PandemoniumRuntime', '$PandemoniumConfig', '$PandemoniumEventListeners'],
    $PandemoniumDisplayVK__postset: 'PandemoniumOS.atexit(function(resolve, reject) { PandemoniumDisplayVK.clear(); resolve(); });',
    $PandemoniumDisplayVK: {
        textinput: null,
        textarea: null,

        available: function() {
            return PandemoniumConfig.virtual_keyboard && 'ontouchstart' in window;
        },

        init: function(input_cb) {
            function create(what) {
                const elem = document.createElement(what);
                elem.style.display = 'none';
                elem.style.position = 'absolute';
                elem.style.zIndex = '-1';
                elem.style.background = 'transparent';
                elem.style.padding = '0px';
                elem.style.margin = '0px';
                elem.style.overflow = 'hidden';
                elem.style.width = '0px';
                elem.style.height = '0px';
                elem.style.border = '0px';
                elem.style.outline = 'none';
                elem.readonly = true;
                elem.disabled = true;
                PandemoniumEventListeners.add(elem, 'input', function(evt) {
                    const c_str = PandemoniumRuntime.allocString(elem.value);
                    input_cb(c_str, elem.selectionEnd);
                    PandemoniumRuntime.free(c_str);
                }, false);
                PandemoniumEventListeners.add(elem, 'blur', function(evt) {
                    elem.style.display = 'none';
                    elem.readonly = true;
                    elem.disabled = true;
                }, false);
                PandemoniumConfig.canvas.insertAdjacentElement('beforebegin', elem);
                return elem;
            }
            PandemoniumDisplayVK.textinput = create('input');
            PandemoniumDisplayVK.textarea = create('textarea');
            PandemoniumDisplayVK.updateSize();
        },
        show: function(text, type, start, end) {
            if (!PandemoniumDisplayVK.textinput || !PandemoniumDisplayVK.textarea) {
                return;
            }
            if (PandemoniumDisplayVK.textinput.style.display !== '' || PandemoniumDisplayVK.textarea.style.display !== '') {
                PandemoniumDisplayVK.hide();
            }
            PandemoniumDisplayVK.updateSize();
            let elem = GodotDisplayVK.textinput;
            switch (type) {
                case 0: // KEYBOARD_TYPE_DEFAULT
                    elem.type = 'text';
                    elem.inputmode = '';
                    break;
                case 1: // KEYBOARD_TYPE_MULTILINE
                    elem = GodotDisplayVK.textarea;
                    break;
                case 2: // KEYBOARD_TYPE_NUMBER
                    elem.type = 'text';
                    elem.inputmode = 'numeric';
                    break;
                case 3: // KEYBOARD_TYPE_NUMBER_DECIMAL
                    elem.type = 'text';
                    elem.inputmode = 'decimal';
                    break;
                case 4: // KEYBOARD_TYPE_PHONE
                    elem.type = 'tel';
                    elem.inputmode = '';
                    break;
                case 5: // KEYBOARD_TYPE_EMAIL_ADDRESS
                    elem.type = 'email';
                    elem.inputmode = '';
                    break;
                case 6: // KEYBOARD_TYPE_PASSWORD
                    elem.type = 'password';
                    elem.inputmode = '';
                    break;
                case 7: // KEYBOARD_TYPE_URL
                    elem.type = 'url';
                    elem.inputmode = '';
                    break;
                default:
                    elem.type = 'text';
                    elem.inputmode = '';
                    break;
            }
            elem.readonly = false;
            elem.disabled = false;
            elem.value = text;
            elem.style.display = 'block';
            elem.focus();
            elem.setSelectionRange(start, end);
        },
        hide: function() {
            if (!PandemoniumDisplayVK.textinput || !PandemoniumDisplayVK.textarea) {
                return;
            }
            [PandemoniumDisplayVK.textinput, PandemoniumDisplayVK.textarea].forEach(function(elem) {
                elem.blur();
                elem.style.display = 'none';
                elem.value = '';
            });
        },
        updateSize: function() {
            if (!PandemoniumDisplayVK.textinput || !PandemoniumDisplayVK.textarea) {
                return;
            }
            const rect = PandemoniumConfig.canvas.getBoundingClientRect();

            function update(elem) {
                elem.style.left = `${rect.left}px`;
                elem.style.top = `${rect.top}px`;
                elem.style.width = `${rect.width}px`;
                elem.style.height = `${rect.height}px`;
            }
            update(PandemoniumDisplayVK.textinput);
            update(PandemoniumDisplayVK.textarea);
        },
        clear: function() {
            if (PandemoniumDisplayVK.textinput) {
                PandemoniumDisplayVK.textinput.remove();
                PandemoniumDisplayVK.textinput = null;
            }
            if (PandemoniumDisplayVK.textarea) {
                PandemoniumDisplayVK.textarea.remove();
                PandemoniumDisplayVK.textarea = null;
            }
        },
    },
};
mergeInto(LibraryManager.library, PandemoniumDisplayVK);

/*
 * Display server cursor helper.
 * Keeps track of cursor status and custom shapes.
 */
const PandemoniumDisplayCursor = {
    $PandemoniumDisplayCursor__deps: ['$PandemoniumOS', '$PandemoniumConfig'],
    $PandemoniumDisplayCursor__postset: 'PandemoniumOS.atexit(function(resolve, reject) { PandemoniumDisplayCursor.clear(); resolve(); });',
    $PandemoniumDisplayCursor: {
        shape: 'auto',
        visible: true,
        cursors: {},
        set_style: function(style) {
            PandemoniumConfig.canvas.style.cursor = style;
        },
        set_shape: function(shape) {
            PandemoniumDisplayCursor.shape = shape;
            let css = shape;
            if (shape in PandemoniumDisplayCursor.cursors) {
                const c = PandemoniumDisplayCursor.cursors[shape];
                css = `url("${c.url}") ${c.x} ${c.y}, auto`;
            }
            if (PandemoniumDisplayCursor.visible) {
                PandemoniumDisplayCursor.set_style(css);
            }
        },
        clear: function() {
            PandemoniumDisplayCursor.set_style('');
            PandemoniumDisplayCursor.shape = 'auto';
            PandemoniumDisplayCursor.visible = true;
            Object.keys(PandemoniumDisplayCursor.cursors).forEach(function(key) {
                URL.revokeObjectURL(PandemoniumDisplayCursor.cursors[key]);
                delete PandemoniumDisplayCursor.cursors[key];
            });
        },
        lockPointer: function() {
            const canvas = PandemoniumConfig.canvas;
            if (canvas.requestPointerLock) {
                canvas.requestPointerLock();
            }
        },
        releasePointer: function() {
            if (document.exitPointerLock) {
                document.exitPointerLock();
            }
        },
        isPointerLocked: function() {
            return document.pointerLockElement === PandemoniumConfig.canvas;
        },
    },
};
mergeInto(LibraryManager.library, PandemoniumDisplayCursor);

const PandemoniumDisplayScreen = {
    $PandemoniumDisplayScreen__deps: ['$PandemoniumConfig', '$PandemoniumOS', '$GL', 'emscripten_webgl_get_current_context'],
    $PandemoniumDisplayScreen: {
        desired_size: [0, 0],
        hidpi: true,
        getPixelRatio: function() {
            return PandemoniumDisplayScreen.hidpi ? window.devicePixelRatio || 1 : 1;
        },
        isFullscreen: function() {
            const elem = document.fullscreenElement || document.mozFullscreenElement ||
                document.webkitFullscreenElement || document.msFullscreenElement;
            if (elem) {
                return elem === PandemoniumConfig.canvas;
            }
            // But maybe knowing the element is not supported.
            return document.fullscreen || document.mozFullScreen ||
                document.webkitIsFullscreen;
        },
        hasFullscreen: function() {
            return document.fullscreenEnabled || document.mozFullScreenEnabled ||
                document.webkitFullscreenEnabled;
        },
        requestFullscreen: function() {
            if (!PandemoniumDisplayScreen.hasFullscreen()) {
                return 1;
            }
            const canvas = PandemoniumConfig.canvas;
            try {
                const promise = (canvas.requestFullscreen || canvas.msRequestFullscreen ||
                    canvas.mozRequestFullScreen || canvas.mozRequestFullscreen ||
                    canvas.webkitRequestFullscreen
                ).call(canvas);
                // Some browsers (Safari) return undefined.
                // For the standard ones, we need to catch it.
                if (promise) {
                    promise.catch(function() {
                        // nothing to do.
                    });
                }
            } catch (e) {
                return 1;
            }
            return 0;
        },
        exitFullscreen: function() {
            if (!PandemoniumDisplayScreen.isFullscreen()) {
                return 0;
            }
            try {
                const promise = document.exitFullscreen();
                if (promise) {
                    promise.catch(function() {
                        // nothing to do.
                    });
                }
            } catch (e) {
                return 1;
            }
            return 0;
        },
        _updateGL: function() {
            const gl_context_handle = _emscripten_webgl_get_current_context(); // eslint-disable-line no-undef
            const gl = GL.getContext(gl_context_handle);
            if (gl) {
                GL.resizeOffscreenFramebuffer(gl);
            }
        },
        updateSize: function() {
            const isFullscreen = PandemoniumDisplayScreen.isFullscreen();
            const wantsFullWindow = PandemoniumConfig.canvas_resize_policy === 2;
            const noResize = PandemoniumConfig.canvas_resize_policy === 0;
            const wwidth = PandemoniumDisplayScreen.desired_size[0];
            const wheight = PandemoniumDisplayScreen.desired_size[1];
            const canvas = PandemoniumConfig.canvas;
            let width = wwidth;
            let height = wheight;
            if (noResize) {
                // Don't resize canvas, just update GL if needed.
                if (canvas.width !== width || canvas.height !== height) {
                    PandemoniumDisplayScreen.desired_size = [canvas.width, canvas.height];
                    PandemoniumDisplayScreen._updateGL();
                    return 1;
                }
                return 0;
            }
            const scale = PandemoniumDisplayScreen.getPixelRatio();
            if (isFullscreen || wantsFullWindow) {
                // We need to match screen size.
                width = window.innerWidth * scale;
                height = window.innerHeight * scale;
            }
            const csw = `${width / scale}px`;
            const csh = `${height / scale}px`;
            if (canvas.style.width !== csw || canvas.style.height !== csh || canvas.width !== width || canvas.height !== height) {
                // Size doesn't match.
                // Resize canvas, set correct CSS pixel size, update GL.
                canvas.width = width;
                canvas.height = height;
                canvas.style.width = csw;
                canvas.style.height = csh;
                PandemoniumDisplayScreen._updateGL();
                return 1;
            }
            return 0;
        },
    },
};
mergeInto(LibraryManager.library, PandemoniumDisplayScreen);

/**
 * Display server interface.
 *
 * Exposes all the functions needed by DisplayServer implementation.
 */
const PandemoniumDisplay = {
    $PandemoniumDisplay__deps: ['$PandemoniumConfig', '$PandemoniumRuntime', '$PandemoniumDisplayCursor', '$PandemoniumEventListeners', '$PandemoniumDisplayScreen', '$PandemoniumDisplayVK'],
    $PandemoniumDisplay: {
        window_icon: '',
        getDPI: function() {
            // devicePixelRatio is given in dppx
            // https://drafts.csswg.org/css-values/#resolution
            // > due to the 1:96 fixed ratio of CSS *in* to CSS *px*, 1dppx is equivalent to 96dpi.
            const dpi = Math.round(window.devicePixelRatio * 96);
            return dpi >= 96 ? dpi : 96;
        },
    },

    // This is implemented as "glGetBufferSubData" in new emscripten versions.
    // Since we have to support older (pre 2.0.17) emscripten versions, we add this wrapper function instead.
    pandemonium_js_display_glGetBufferSubData__sig: 'viiii',
    pandemonium_js_display_glGetBufferSubData__deps: ['$GL', 'emscripten_webgl_get_current_context'],
    pandemonium_js_display_glGetBufferSubData: function(target, offset, size, data) {
        const gl_context_handle = _emscripten_webgl_get_current_context(); // eslint-disable-line no-undef
        const gl = GL.getContext(gl_context_handle);
        if (gl) {
            gl.GLctx['getBufferSubData'](target, offset, HEAPU8, data, size);
        }
    },

    pandemonium_js_display_is_swap_ok_cancel__sig: 'i',
    pandemonium_js_display_is_swap_ok_cancel: function() {
        const win = (['Windows', 'Win64', 'Win32', 'WinCE']);
        const plat = navigator.platform || '';
        if (win.indexOf(plat) !== -1) {
            return 1;
        }
        return 0;
    },

    pandemonium_js_display_alert__sig: 'vi',
    pandemonium_js_display_alert: function(p_text) {
        window.alert(PandemoniumRuntime.parseString(p_text)); // eslint-disable-line no-alert
    },

    pandemonium_js_display_screen_dpi_get__sig: 'i',
    pandemonium_js_display_screen_dpi_get: function() {
        return PandemoniumDisplay.getDPI();
    },

    pandemonium_js_display_pixel_ratio_get__sig: 'f',
    pandemonium_js_display_pixel_ratio_get: function() {
        return PandemoniumDisplayScreen.getPixelRatio();
    },

    pandemonium_js_display_fullscreen_request__sig: 'i',
    pandemonium_js_display_fullscreen_request: function() {
        return PandemoniumDisplayScreen.requestFullscreen();
    },

    pandemonium_js_display_fullscreen_exit__sig: 'i',
    pandemonium_js_display_fullscreen_exit: function() {
        return PandemoniumDisplayScreen.exitFullscreen();
    },

    pandemonium_js_display_desired_size_set__sig: 'vii',
    pandemonium_js_display_desired_size_set: function(width, height) {
        PandemoniumDisplayScreen.desired_size = [width, height];
        PandemoniumDisplayScreen.updateSize();
    },

    pandemonium_js_display_size_update__sig: 'i',
    pandemonium_js_display_size_update: function() {
        const updated = PandemoniumDisplayScreen.updateSize();
        if (updated) {
            PandemoniumDisplayVK.updateSize();
        }
        return updated;
    },

    pandemonium_js_display_screen_size_get__sig: 'vii',
    pandemonium_js_display_screen_size_get: function(width, height) {
        const scale = PandemoniumDisplayScreen.getPixelRatio();
        PandemoniumRuntime.setHeapValue(width, window.screen.width * scale, 'i32');
        PandemoniumRuntime.setHeapValue(height, window.screen.height * scale, 'i32');
    },

    pandemonium_js_display_window_size_get__sig: 'vii',
    pandemonium_js_display_window_size_get: function(p_width, p_height) {
        PandemoniumRuntime.setHeapValue(p_width, PandemoniumConfig.canvas.width, 'i32');
        PandemoniumRuntime.setHeapValue(p_height, PandemoniumConfig.canvas.height, 'i32');
    },

    pandemonium_js_display_has_webgl__sig: 'ii',
    pandemonium_js_display_has_webgl: function(p_version) {
        if (p_version !== 1 && p_version !== 2) {
            return false;
        }
        try {
            return !!document.createElement('canvas').getContext(p_version === 2 ? 'webgl2' : 'webgl');
        } catch (e) {
            /* Not available */
        }
        return false;
    },

    /*
     * Canvas
     */
    pandemonium_js_display_canvas_focus__sig: 'v',
    pandemonium_js_display_canvas_focus: function() {
        PandemoniumConfig.canvas.focus();
    },

    pandemonium_js_display_canvas_is_focused__sig: 'i',
    pandemonium_js_display_canvas_is_focused: function() {
        return document.activeElement === PandemoniumConfig.canvas;
    },

    /*
     * Touchscreen
     */
    pandemonium_js_display_touchscreen_is_available__sig: 'i',
    pandemonium_js_display_touchscreen_is_available: function() {
        return 'ontouchstart' in window;
    },

    /*
     * Clipboard
     */
    pandemonium_js_display_clipboard_set__sig: 'ii',
    pandemonium_js_display_clipboard_set: function(p_text) {
        const text = PandemoniumRuntime.parseString(p_text);
        if (!navigator.clipboard || !navigator.clipboard.writeText) {
            return 1;
        }
        navigator.clipboard.writeText(text).catch(function(e) {
            // Setting OS clipboard is only possible from an input callback.
            PandemoniumRuntime.error('Setting OS clipboard is only possible from an input callback for the HTML5 plafrom. Exception:', e);
        });
        return 0;
    },

    pandemonium_js_display_clipboard_get__sig: 'ii',
    pandemonium_js_display_clipboard_get: function(callback) {
        const func = PandemoniumRuntime.get_func(callback);
        try {
            navigator.clipboard.readText().then(function(result) {
                const ptr = PandemoniumRuntime.allocString(result);
                func(ptr);
                PandemoniumRuntime.free(ptr);
            }).catch(function(e) {
                // Fail graciously.
            });
        } catch (e) {
            // Fail graciously.
        }
    },

    /*
     * Window
     */
    pandemonium_js_display_window_title_set__sig: 'vi',
    pandemonium_js_display_window_title_set: function(p_data) {
        document.title = PandemoniumRuntime.parseString(p_data);
    },

    pandemonium_js_display_window_icon_set__sig: 'vii',
    pandemonium_js_display_window_icon_set: function(p_ptr, p_len) {
        let link = document.getElementById('-gd-engine-icon');
        if (link === null) {
            link = document.createElement('link');
            link.rel = 'icon';
            link.id = '-gd-engine-icon';
            document.head.appendChild(link);
        }
        const old_icon = PandemoniumDisplay.window_icon;
        const png = new Blob([PandemoniumRuntime.heapSlice(HEAPU8, p_ptr, p_len)], {
            type: 'image/png'
        });
        PandemoniumDisplay.window_icon = URL.createObjectURL(png);
        link.href = PandemoniumDisplay.window_icon;
        if (old_icon) {
            URL.revokeObjectURL(old_icon);
        }
    },

    /*
     * Cursor
     */
    pandemonium_js_display_cursor_set_visible__sig: 'vi',
    pandemonium_js_display_cursor_set_visible: function(p_visible) {
        const visible = p_visible !== 0;
        if (visible === PandemoniumDisplayCursor.visible) {
            return;
        }
        PandemoniumDisplayCursor.visible = visible;
        if (visible) {
            PandemoniumDisplayCursor.set_shape(PandemoniumDisplayCursor.shape);
        } else {
            PandemoniumDisplayCursor.set_style('none');
        }
    },

    pandemonium_js_display_cursor_is_hidden__sig: 'i',
    pandemonium_js_display_cursor_is_hidden: function() {
        return !PandemoniumDisplayCursor.visible;
    },

    pandemonium_js_display_cursor_set_shape__sig: 'vi',
    pandemonium_js_display_cursor_set_shape: function(p_string) {
        PandemoniumDisplayCursor.set_shape(PandemoniumRuntime.parseString(p_string));
    },

    pandemonium_js_display_cursor_set_custom_shape__sig: 'viiiii',
    pandemonium_js_display_cursor_set_custom_shape: function(p_shape, p_ptr, p_len, p_hotspot_x, p_hotspot_y) {
        const shape = PandemoniumRuntime.parseString(p_shape);
        const old_shape = PandemoniumDisplayCursor.cursors[shape];
        if (p_len > 0) {
            const png = new Blob([PandemoniumRuntime.heapSlice(HEAPU8, p_ptr, p_len)], {
                type: 'image/png'
            });
            const url = URL.createObjectURL(png);
            PandemoniumDisplayCursor.cursors[shape] = {
                url: url,
                x: p_hotspot_x,
                y: p_hotspot_y,
            };
        } else {
            delete PandemoniumDisplayCursor.cursors[shape];
        }
        if (shape === PandemoniumDisplayCursor.shape) {
            PandemoniumDisplayCursor.set_shape(PandemoniumDisplayCursor.shape);
        }
        if (old_shape) {
            URL.revokeObjectURL(old_shape.url);
        }
    },

    pandemonium_js_display_cursor_lock_set__sig: 'vi',
    pandemonium_js_display_cursor_lock_set: function(p_lock) {
        if (p_lock) {
            PandemoniumDisplayCursor.lockPointer();
        } else {
            PandemoniumDisplayCursor.releasePointer();
        }
    },

    pandemonium_js_display_cursor_is_locked__sig: 'i',
    pandemonium_js_display_cursor_is_locked: function() {
        return PandemoniumDisplayCursor.isPointerLocked() ? 1 : 0;
    },

    /*
     * Listeners
     */
    pandemonium_js_display_fullscreen_cb__sig: 'vi',
    pandemonium_js_display_fullscreen_cb: function(callback) {
        const canvas = PandemoniumConfig.canvas;
        const func = PandemoniumRuntime.get_func(callback);

        function change_cb(evt) {
            if (evt.target === canvas) {
                func(PandemoniumDisplayScreen.isFullscreen());
            }
        }
        PandemoniumEventListeners.add(document, 'fullscreenchange', change_cb, false);
        PandemoniumEventListeners.add(document, 'mozfullscreenchange', change_cb, false);
        PandemoniumEventListeners.add(document, 'webkitfullscreenchange', change_cb, false);
    },

    pandemonium_js_display_window_blur_cb__sig: 'vi',
    pandemonium_js_display_window_blur_cb: function(callback) {
        const func = PandemoniumRuntime.get_func(callback);
        PandemoniumEventListeners.add(window, 'blur', function() {
            func();
        }, false);
    },

    pandemonium_js_display_notification_cb__sig: 'viiiii',
    pandemonium_js_display_notification_cb: function(callback, p_enter, p_exit, p_in, p_out) {
        const canvas = PandemoniumConfig.canvas;
        const func = PandemoniumRuntime.get_func(callback);
        const notif = [p_enter, p_exit, p_in, p_out];
        ['mouseover', 'mouseleave', 'focus', 'blur'].forEach(function(evt_name, idx) {
            PandemoniumEventListeners.add(canvas, evt_name, function() {
                func(notif[idx]);
            }, true);
        });
    },

    pandemonium_js_display_setup_canvas__sig: 'viiii',
    pandemonium_js_display_setup_canvas: function(p_width, p_height, p_fullscreen, p_hidpi) {
        const canvas = PandemoniumConfig.canvas;
        PandemoniumEventListeners.add(canvas, 'contextmenu', function(ev) {
            ev.preventDefault();
        }, false);
        PandemoniumEventListeners.add(canvas, 'webglcontextlost', function(ev) {
            alert('WebGL context lost, please reload the page'); // eslint-disable-line no-alert
            ev.preventDefault();
        }, false);
        PandemoniumDisplayScreen.hidpi = !!p_hidpi;
        switch (PandemoniumConfig.canvas_resize_policy) {
            case 0: // None
                PandemoniumDisplayScreen.desired_size = [canvas.width, canvas.height];
                break;
            case 1: // Project
                PandemoniumDisplayScreen.desired_size = [p_width, p_height];
                break;
            default: // Full window
                // Ensure we display in the right place, the size will be handled by updateSize
                canvas.style.position = 'absolute';
                canvas.style.top = 0;
                canvas.style.left = 0;
                break;
        }
        PandemoniumDisplayScreen.updateSize();
        if (p_fullscreen) {
            PandemoniumDisplayScreen.requestFullscreen();
        }
    },

    /*
     * Virtual Keyboard
     */
    pandemonium_js_display_vk_show__sig: 'viiii',
    pandemonium_js_display_vk_show: function(p_text, p_type, p_start, p_end) {
        const text = PandemoniumRuntime.parseString(p_text);
        const start = p_start > 0 ? p_start : 0;
        const end = p_end > 0 ? p_end : start;
        PandemoniumDisplayVK.show(text, p_type, start, end);
    },

    pandemonium_js_display_vk_hide__sig: 'v',
    pandemonium_js_display_vk_hide: function() {
        PandemoniumDisplayVK.hide();
    },

    pandemonium_js_display_vk_available__sig: 'i',
    pandemonium_js_display_vk_available: function() {
        return PandemoniumDisplayVK.available();
    },

    pandemonium_js_display_vk_cb__sig: 'vi',
    pandemonium_js_display_vk_cb: function(p_input_cb) {
        const input_cb = PandemoniumRuntime.get_func(p_input_cb);
        if (PandemoniumDisplayVK.available()) {
            PandemoniumDisplayVK.init(input_cb);
        }
    },
};

autoAddDeps(PandemoniumDisplay, '$PandemoniumDisplay');
mergeInto(LibraryManager.library, PandemoniumDisplay);