Yet another Merry X'mas - fix misfiring selection and model browser overflow for your Viewer

Christmas is a time full of joy, love and peace - no one certainly should be worrying about issues like selection misfiring when Viewer is rendered partially off viewport or node names going over the model browser's panel box. But if you happen to be haplessly scratching your head for these issues let's get them right now so we can have the peace of mind to let the holiday season begin!

Misfiring Selection

As of Viewer v7.9, scrolling the canvas partially outside of the viewport would cause mouse selection and rollover to behave incorrectly, making it difficult to click-select or highlight on the intended model node/element:

Apparently this is happening because Viewer is working with incorrect canvas boundary values - Viewer needs to establish the correct boundary rectangular to accurately perform hit tests to trigger selection. But when scrolling takes place on the container Viewer does not capture the scroll event originating externally from its container (it only subscribes to that of Window) and in turn re-calculate the boundary. As such we need to explicitly notify Viewer with the correct offsets by passing the scroll event data in with below:

containerElement.addEventListener('scroll',event={
     NOP_VIEWER.onScrollCallback(event)  //propagate the scroll event to Viewer
})

And don't forge to un-stick the toolbar so it follows the canvas to its proper position in the document flow:

.adsk-viewing-viewer {position:static;!important}
.adsk-viewing-viewer #guiviewer3d-toolbar{position:static;!important}

And see selection gets fired as it should - see live demo here: https://jsbin.com/suqopin/edit?html,css,js

Model Browser Overflow

As of now there's another defect with the Viewer's overflow styling pushing labels with long text in "model browser" (and potentially the "property panel" as well) to stick out of the docker panel ...

To work around this we can apply the following style to bring the Viewer's original overflow style settings back to work so the overflowing text would be truncated and followed by ellipsis instead of going over the panel boundaries:

#ViewerModelStructurePanel-scroll-container .model-div lmvheader label{
    width: calc(100% - 50px);
    display: inline-block;
}

You can then drag the resizer icon on the right bottom corner to enlarge the panel to see more/full text: