jsTree通过父节点关闭所有子节点

时间:2018-07-20 03:17:51

标签: javascript jstree

我目前正在尝试自定义potree中使用的jsTree插件以在线显示我的LiDAR数据。

我想做的是,当未选中扫描位置锚点节点时,关闭扫描位置组中所有项目的可见性。到目前为止,我可以分别关闭每个节点的可见性,但是当我尝试取消选中对象并在查看器中隐藏对象时,只会取消选中复选框。

是否有一种方法可以使for循环遍历扫描位置组,识别未选中的节点并将可见性设置为off?

这是我的potree javascript文件中的代码部分:

let tree = $(`<div id="jstree_scene"></div>`);
    elObjects.append(tree);

    tree.jstree({
        'plugins': ["checkbox", "state","massload","changed","search","wholerow"],
        'core': {
            "dblclick_toggle": false,
            "state": {
                "checked" : true
            },
            'check_callback': true,
            "expand_selected_onload": false
        },
        "checkbox" : {
            "keep_selected_style": true,
            "three_state": true,
            "whole_node": false,
            "tie_selection": false,
        },
    });

    let createNode = (parent, text, icon, object) => {
        let nodeID = tree.jstree('create_node', parent, { 
                "text": text, 
                "icon": icon,
                "data": object
            }, 
            "last", false, false);

        if(object.visible){
            tree.jstree('check_node', nodeID);
        }else{
            tree.jstree('uncheck_node', nodeID);
        }

        return nodeID;
    }

    let pcID = tree.jstree('create_node', "#", { "text": "<b>Point Clouds</b>", "id": "pointclouds"}, "last", false, false);
    let measurementID = tree.jstree('create_node', "#", { "text": "<b>Measurements</b>", "id": "measurements" }, "last", false, false);
    let annotationsID = tree.jstree('create_node', "#", { "text": "<b>Scan Locations</b>", "id": "annotations" }, "last", false, false);
    let otherID = tree.jstree('create_node', "#", { "text": "<b>Model</b>", "id": "other" }, "last", false, false);

    tree.jstree("check_node", pcID);
    tree.jstree("check_node", measurementID);
    tree.jstree("check_node", annotationsID);
    tree.jstree("check_node", otherID);



    tree.on("select_node.jstree", function(e, data){
        let object = data.node.data;
        propertiesPanel.set(object);

        viewer.inputHandler.deselectAll();

        if(object instanceof Potree.Volume){
            viewer.inputHandler.toggleSelection(object);
        }

        $(viewer.renderer.domElement).focus();
    });

    tree.on("deselect_node.jstree", function(e, data){
        propertiesPanel.set(null);
    });

    tree.on("delete_node.jstree", function(e, data){
        propertiesPanel.set(null);
    });

    tree.on('dblclick','.jstree-anchor', function (e) {
        let instance = $.jstree.reference(this);
        let node = instance.get_node(this);
        let object = node.data;

        // ignore double click on checkbox
        if(e.target.classList.contains("jstree-checkbox")){
            return;
        }
    $('#jstree_demo_div').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });
                if(object instanceof Potree.PointCloudTree){
            let box = viewer.getBoundingBox([object]);
            let node = new THREE.Object3D();
            node.boundingBox = box;
            viewer.zoomTo(node, 1, 500);
        }else if(object instanceof Potree.Measure){
            let points = object.points.map(p => p.position);
            let box = new THREE.Box3().setFromPoints(points);
            if(box.getSize().length() > 0){
                let node = new THREE.Object3D();
                node.boundingBox = box;
                viewer.zoomTo(node, 2, 500);
            }
        }else if(object instanceof Potree.Profile){
            let points = object.points;
            let box = new THREE.Box3().setFromPoints(points);
            if(box.getSize().length() > 0){
                let node = new THREE.Object3D();
                node.boundingBox = box;
                viewer.zoomTo(node, 1, 500);
            }
        }else if(object instanceof Potree.Volume){

            let box = object.boundingBox.clone().applyMatrix4(object.matrixWorld);

            if(box.getSize().length() > 0){
                let node = new THREE.Object3D();
                node.boundingBox = box;
                viewer.zoomTo(node, 1, 500);
            }
        }else if(object instanceof Potree.Annotation){
            object.moveHere(viewer.scene.getActiveCamera());
        }else if(object instanceof Potree.PolygonClipVolume){
            let dir = object.camera.getWorldDirection();
            let target;

            if(object.camera instanceof THREE.OrthographicCamera){
                dir.multiplyScalar(object.camera.right)
                target = new THREE.Vector3().addVectors(object.camera.position, dir);
                viewer.setCameraMode(Potree.CameraMode.ORTHOGRAPHIC);
            }else if(object.camera instanceof THREE.PerspectiveCamera){
                dir.multiplyScalar(viewer.scene.view.radius);
                target = new THREE.Vector3().addVectors(object.camera.position, dir);
                viewer.setCameraMode(Potree.CameraMode.PERSPECTIVE);
            }

            viewer.scene.view.position.copy(object.camera.position);
            viewer.scene.view.lookAt(target);
        }else if(object instanceof THREE.SpotLight){
            let distance = (object.distance > 0) ? object.distance / 4 : 5 * 1000;
            let position = object.position;
            let target = new THREE.Vector3().addVectors(
                position, 
                object.getWorldDirection().multiplyScalar(distance));

            viewer.scene.view.position.copy(object.position);
            viewer.scene.view.lookAt(target);
        }else if(object instanceof THREE.Object3D){
            let box = new THREE.Box3().setFromObject(object);

            if(box.getSize().length() > 0){
                let node = new THREE.Object3D();
                node.boundingBox = box;
                viewer.zoomTo(node, 1, 500);
            }
        }
    });


    tree.on("uncheck_node.jstree", function(e){
        let object = data.node.data;

        if(object){
            object.visible = false;
        }
    });


    tree.on("check_node.jstree", function(e, data){
        let object = data.node.data;

        if(object){
            object.visible = true;
        }
    });

Potree Viewer

0 个答案:

没有答案