label-3d-points/public/js/context_menu.js

import { globalKeyDownManager } from "./keydown_manager.js";


class ContextMenu {
    constructor(ui)
    {
            this.wrapperUi = ui;

            this.menus = {
                world: ui.querySelector("#context-menu"),
                object: ui.querySelector("#object-context-menu"),
                boxEditor: ui.querySelector("#box-editor-context-menu"),
                boxEditorManager: ui.querySelector("#box-editor-manager-context-menu"),
                playSubMenu: ui.querySelector("#play-submenu"),
                gotoSubMenu: ui.querySelector("#goto-submenu"),
                fitSubMenu: ui.querySelector("#cm-fit-submenu"),
                //thisSubMenu: ui.querySelector("#cm-this-submenu"),
            };
            
            for (let m in this.menus){
                for (let i = 0; i < this.menus[m].children.length; i++)
                {
                    this.menus[m].children[i].onclick = (event) =>
                    {          
                        //event.preventDefault();
                        event.stopPropagation();

                        let ret = this.handler.handleContextMenuEvent(event);                        
                        if (ret)
                        {                            
                            this.hide();
                        }
                    }                   
                }
            }

            let motherMenu = {
                "#cm-goto": "#goto-submenu",
                "#cm-new": "#new-submenu",
                "#cm-play": "#play-submenu",                
                "#cm-fit": "#cm-fit-submenu",
                //"#cm-this": "#cm-this-submenu",
            };


            for (let item in motherMenu)
            {
                let menu = ui.querySelector(item);
                menu.onclick = (event)=>{
                    return false;
                }

                let self = this;
                menu.onmouseenter = function(event){
                    if (this.timerId)
                    {
                        clearTimeout(this.timerId);
                        this.timerId = null;
                    }

                    let menu = event.currentTarget.querySelector(motherMenu[item]);
                    menu.style.display="inherit";

                    let motherMenuRect = event.currentTarget.getBoundingClientRect();
                    let posX = motherMenuRect.right;
                    let posY = motherMenuRect.bottom;

                    if (self.wrapperUi.clientHeight < posY + menu.clientHeight){
                        menu.style.bottom = "0%";
                        menu.style.top = "";
                    }
                    else{
                        menu.style.top = "0%";
                        menu.style.bottom = "";
                    }
        
        
                    if (self.wrapperUi.clientWidth < posX + menu.clientWidth){
                        menu.style.right = "100%";
                        menu.style.left = "";
                    }
                    else{
                        menu.style.left = "100%";
                        menu.style.right = "";
                    }
                }

                menu.onmouseleave = function(event){
                    let ui = event.currentTarget.querySelector(motherMenu[item]);
                    this.timerId = setTimeout(()=>{
                        ui.style.display="none";
                        this.timerId = null;
                    },
                    200);
                }
            }

            
            this.wrapperUi.onclick = (event)=>{
                this.hide();
                event.preventDefault();
                event.stopPropagation();             
            };
    
            this.wrapperUi.oncontextmenu = (event)=>{
                //event.currentTarget.style.display="none"; 
                event.preventDefault();
                event.stopPropagation();
            };           
    }

    // install dynamic menu, like object new
    installMenu(name, ui, funcHandler)
    {
        this.menus[name] = ui;

        for (let i = 0; i < ui.children.length; i++){
            ui.children[i].onclick = (event) =>
            {   
                //event.preventDefault();
                event.stopPropagation();
                                    
                let ret = funcHandler(event);                        
                if (ret)
                {                            
                    this.hide();
                }
            }               
        }
    }

    hide()
    {
        this.wrapperUi.style.display = "none";
        globalKeyDownManager.deregister('context menu');

    }

    show(name, posX, posY, handler, funcSetPos)
    {
        this.handler = handler;

        //hide all others
        for (let m in this.menus) {
            if (m !== name)
                this.menus[m].style.display = 'none';
        }

        // show
        this.wrapperUi.style.display = "block";

        let menu = this.menus[name]
        menu.style.display = "inherit";

        this.currentMenu = menu;

        if (funcSetPos)
        {
            funcSetPos(menu);
        }
        else{

            if (this.wrapperUi.clientHeight < posY + menu.clientHeight){
                menu.style.top = (this.wrapperUi.clientHeight - menu.clientHeight) + "px";
            }
            else{
                menu.style.top = posY+"px";
            }


            if (this.wrapperUi.clientWidth < posX + menu.clientWidth){
                menu.style.left = (this.wrapperUi.clientWidth - menu.clientWidth) + "px";
            }
            else{
                menu.style.left = posX+"px";
            }
            
        }


        globalKeyDownManager.register((event)=>{

            let menuRect = this.currentMenu.getBoundingClientRect();
            let ret = this.handler.handleContextMenuKeydownEvent(event,
                {x: menuRect.left, y: menuRect.top});
            if (!ret)
            {
                this.hide();
            }

            return false;  // false means don't propogate
        }, 'context menu');
        
    }


};

export {ContextMenu};