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

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

class ConfigUi{

    clickableItems = {
        "#cfg-increase-size": (event)=>{
            this.editor.data.scale_point_size(1.2);
            this.editor.render();
            this.editor.boxEditorManager.render();
            return false;
        },

        "#cfg-decrease-size": (event)=>{
            this.editor.data.scale_point_size(0.8);
            this.editor.render();
            this.editor.boxEditorManager.render();
            return false;
        },

        "#cfg-increase-brightness": (event)=>{
            this.editor.data.scale_point_brightness(1.2);
            this.editor.render();
            this.editor.boxEditorManager.render();
            return false;
        },

        "#cfg-decrease-brightness": (event)=>{
            this.editor.data.scale_point_brightness(0.8);
            this.editor.render();
            this.editor.boxEditorManager.render();
            return false;
        },

        "#cfg-take-screenshot": (event)=>{
            this.editor.downloadWebglScreenShot();
            return true;
        },

        "#cfg-show-log": (event)=>{
            logger.show();
            return true;
        },
        
        "#cfg-start-calib":(event)=>{
            this.editor.calib.start_calibration();
            return true;
        },

        "#cfg-show-calib":(event)=>{
            this.editor.calib.save_calibration();
            return true;
        },

        // "#cfg-reset-calib":(event)=>{
        //     this.editor.calib.reset_calibration();
        //     return true;
        // }

        "#cfg-crop-scene": (event)=>{
            this.editor.cropScene.show();

            return true;
        },
        
    };

    changeableItems = {
        
        "#cfg-theme-select":(event)=>{
            let theme = event.currentTarget.value;

            //let scheme = document.documentElement.className;

            
            document.documentElement.className = "theme-"+theme;
            
            pointsGlobalConfig.setItem("theme", theme);
            
            this.editor.viewManager.setColorScheme();
            this.editor.render();
            this.editor.boxEditorManager.render();

            return false;
        },

        "#cfg-hide-box-checkbox":(event)=>{
            let checked = event.currentTarget.checked;

            //let scheme = document.documentElement.className;

            if (checked)
                this.editor.data.set_box_opacity(0);
            else
                this.editor.data.set_box_opacity(1);
            
            this.editor.render();
            this.editor.boxEditorManager.render();
            

            return false;
        },


        "#cfg-hide-id-checkbox":(event)=>{
            let checked = event.currentTarget.checked;          
            this.editor.floatLabelManager.show_id(!checked);            
            return false;
        },


        
        "#cfg-hide-category-checkbox":(event)=>{
            let checked = event.currentTarget.checked;
            this.editor.floatLabelManager.show_category(!checked);
            return false;
        },

        "#cfg-hide-circle-ruler-checkbox": (event)=>{
            let checked = event.currentTarget.checked;
            this.editor.showRangeCircle(!checked);
            return false;
        },

        "#cfg-auto-rotate-xy-checkbox": (event)=>{
            let checked = event.currentTarget.checked;
            pointsGlobalConfig.setItem("enableAutoRotateXY", checked);
            return false;
        },

        '#cfg-auto-update-interpolated-boxes-checkbox': (event)=>{
            let checked = event.currentTarget.checked;
            pointsGlobalConfig.setItem("autoUpdateInterpolatedBoxes", checked);
            return false;
        },

        "#cfg-color-points-select": (event)=>{
            let value = event.currentTarget.value;
            pointsGlobalConfig.setItem("color_points", value);

            this.editor.data.worldList.forEach(w=>{
                w.lidar.color_points();                
                w.lidar.update_points_color();
            });
            this.editor.render();
            return false;
        },

        "#cfg-color-object-scheme":(event)=>{
            let value = event.currentTarget.value;
            this.editor.data.set_obj_color_scheme(value);
            this.editor.render();
            this.editor.imageContextManager.render_2d_image();

            this.editor.floatLabelManager.set_color_scheme(value);
            this.editor.render2dLabels(this.editor.data.world);
            this.editor.boxEditorManager.render();

            return false;
        },

        "#cfg-batch-mode-inst-number":(event)=>{
            let batchSize = parseInt(event.currentTarget.value);

            pointsGlobalConfig.setItem("batchModeInstNumber", batchSize);

            this.editor.boxEditorManager.setBatchSize(batchSize);
            return false;
        },

        "#cfg-coordinate-system-select": (event)=>{
            let coord = event.currentTarget.value;
            pointsGlobalConfig.setItem("coordinateSystem", coord);

            this.editor.data.worldList.forEach(w=>{
                w.calcTransformMatrix();
            });
            this.editor.render();
        },

        "#cfg-data-aux-lidar-checkbox": (event)=>{
            let checked = event.currentTarget.checked;

            pointsGlobalConfig.setItem("enableAuxLidar", checked);
            return false;
        },

        "#cfg-data-radar-checkbox": (event)=>{
            let checked = event.currentTarget.checked;

            pointsGlobalConfig.setItem("enableRadar", checked);
            return false;
        },

        "#cfg-data-filter-points-checkbox": (event)=>{
            let checked = event.currentTarget.checked;

            pointsGlobalConfig.setItem("enableFilterPoints", checked);
            return false;
        },

        "#cfg-data-filter-points-z": (event)=>{
            let z = event.currentTarget.value;

            pointsGlobalConfig.setItem("filterPointsZ", z);
            return false;
        },


        "#cfg-data-preload-checkbox": (event)=>{
            let checked = event.currentTarget.checked;
            pointsGlobalConfig.setItem("enablePreload", checked);
            return false;
        }

    };

    ignoreItems = [
        "#cfg-point-size",
        "#cfg-point-brightness",
        "#cfg-theme",
        "#cfg-color-object",
        "#cfg-menu-batch-mode-inst-number",
        "#cfg-hide-box",
        "#cfg-calib-camera-LiDAR",
        "#cfg-experimental",
        "#cfg-data",
    ];

    subMenus = [
        "#cfg-experimental",
        "#cfg-data",
    ];

    constructor(button, wrapper, editor)
    {
        this.button = button;
        this.wrapper = wrapper;
        this.editor = editor;
        this.editorCfg = editor.editorCfg;
        this.dataCfg = editor.data.cfg;
        this.menu = this.wrapper.querySelector("#config-menu");
        
        this.wrapper.onclick = ()=>{
            this.hide();
        }

        this.button.onclick = (event)=>{            
            this.show(event.currentTarget);            
        }

        for (let item in this.clickableItems)
        {
            this.menu.querySelector(item).onclick = (event)=>{
                let ret = this.clickableItems[item](event);
                if (ret)
                {
                    this.hide();
                }

                event.stopPropagation();
            }
        }

        for (let item in this.changeableItems)
        {
            this.menu.querySelector(item).onchange = (event)=>{
                let ret = this.changeableItems[item](event);
                if (ret)
                {
                    this.hide();
                }

                event.stopPropagation();
            }
        }

        this.ignoreItems.forEach(item=>{
            this.menu.querySelector(item).onclick = (event)=>{
                {
                    event.stopPropagation();                    
                }
            }
        });

        this.subMenus.forEach(item=>{
            this.menu.querySelector(item).onmouseenter = function(event){
                if (this.timerId)
                {
                    clearTimeout(this.timerId);
                    this.timerId = null;
                }
                
                event.currentTarget.querySelector(item +"-submenu").style.display="inherit";
            }

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

        this.menu.onclick = (event)=>{
            event.stopPropagation();                    
        };



        // init ui
        this.menu.querySelector("#cfg-theme-select").value = pointsGlobalConfig.theme;
        this.menu.querySelector("#cfg-data-aux-lidar-checkbox").checked = pointsGlobalConfig.enableAuxLidar;
        this.menu.querySelector("#cfg-data-radar-checkbox").checked = pointsGlobalConfig.enableRadar;
        this.menu.querySelector("#cfg-color-points-select").value = pointsGlobalConfig.color_points;
        this.menu.querySelector("#cfg-coordinate-system-select").value = pointsGlobalConfig.coordinateSystem;
        this.menu.querySelector("#cfg-batch-mode-inst-number").value = pointsGlobalConfig.batchModeInstNumber;
        this.menu.querySelector("#cfg-data-filter-points-checkbox").checked = pointsGlobalConfig.enableFilterPoints;
        this.menu.querySelector("#cfg-data-filter-points-z").value = pointsGlobalConfig.filterPointsZ;
        this.menu.querySelector("#cfg-hide-id-checkbox").value = pointsGlobalConfig.hideId;
        this.menu.querySelector("#cfg-hide-category-checkbox").value = pointsGlobalConfig.hideCategory;
        this.menu.querySelector("#cfg-data-preload-checkbox").checked = pointsGlobalConfig.enablePreload;
        this.menu.querySelector("#cfg-auto-rotate-xy-checkbox").checked = pointsGlobalConfig.enableAutoRotateXY;
        this.menu.querySelector("#cfg-auto-update-interpolated-boxes-checkbox").checked = pointsGlobalConfig.autoUpdateInterpolatedBoxes;
    }


    show(target){
        this.wrapper.style.display="inherit";

        this.menu.style.right = "0px";
        this.menu.style.top = target.offsetHeight + "px";

        globalKeyDownManager.register((event)=>false, 'config');
    }

    hide(){
        globalKeyDownManager.deregister('config');
        this.wrapper.style.display="none";
    }

}


export {ConfigUi}