View and Data API Tips: Hide elements in viewer completely

By Daniel Du

With View and Data API, you can hide some elements in viewer by calling “viewer.hide(dbIds)”, when the elements are hided, it actually make it transparent with a shallow mark to it, or make it ghosted. It is a nice feature as user probably need to know the existence of these elements even they are hided.  But you may want to hide elements completely instead of ghosting some times. Here are a code snippet you can use if you want to hide some elements totally.

    Autodesk.Viewing.Viewer3D.prototype.turnOff = function(dbIds){

        var node ;

        if (Array.isArray(dbIds)) {
            for (var i = 0; i < dbIds.length; i++) {
                var id = dbIds[i];

                node = viewer.model.getData(). instanceTree.dbIdToNode[id];
                //hide the node completedly
                viewer.impl.visibilityManager.setNodeOff(node, true);

            }

        }
        else
        {
            node = viewer.model.getData(). instanceTree.dbIdToNode[dbIds];
            //hide the node completedly
            viewer.impl.visibilityManager.setNodeOff(node, true);

        }

    };

    Autodesk.Viewing.Viewer3D.prototype.turnOn = function(dbIds) {

        var node ;

       if (Array.isArray(dbIds)) {
            for (var i = 0; i < dbIds.length; i++) {
                var id = dbIds[i];

                node = viewer.model.getData(). instanceTree.dbIdToNode[id];
                //show the node
                viewer.impl.visibilityManager.setNodeOff(node, false);
            }

        }
        else
        {
            node = viewer.model.getData(). instanceTree.dbIdToNode[dbIds];
            //show the node
            viewer.impl.visibilityManager.setNodeOff(node, false);

        }

    };

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

The usage is very simple, just call “viewer.turnOff(arrayOfDbIds)” or “viewer.turnOf(arrayOfDbIds)”. Hope it helps.