Selected elements in Forge Viewer are incorrectly displayed in 2D views on mobile/tablet - autodesk-forge

Found some strange behavior when selecting elements in 2d views/sheets on iPad/iPhone.
Selected elements are not shown / only partly shown
Selected elements are incorrectly shown (wrong position)
Selecting elements leads to different element being selected. (When selecting a e.g a Wall, a completely different Wall is highlighted - could also be due to 2.)
Example 1:
In both images, the same element(slab) is selected, on iPad (top), a completely different area is marked in the viewer. On PC (bottom), the correct Element is highlighted in the viewer. (images here are blurred due to client's copyright). DbId is the same!
Example 2:
Here, another element is selected on iPad(top) and PC(bottom) in a different model. The top image shows the ipad screen after selecting the element. As a result, the element is highlighted in the list on the right side. However, the element is not highlighted in the viewer. On PC(bottom), everything works as expected and the element is highlighted.
In both examples, model and view as well as dbId of selection in the viewer are the same, respectively.
Problem occurred on Safari and Chrome, on iPad(iOS 12 and iPadOS 13) and iPhone(iOS 13).
Forge Viewer Events triggered because of selecting elements are the same on iPad and PC.
When simulating iPad on PC with Chrome (+touch events), the problem does NOT exist.
Both examples are Revit Models, with multiple 3d and 2d views published.
Anyone else has this problem as well?
Any idea how to fix this? Or is this a viewer bug?
Thanks for helping out :)

Related

Can't make elements visible in Autodesk viewer when isolating fittings elements

[enter image description here](https://i.stack.imgur.com/I5Fye.png)
When we open a 3D view and proceed to isolate some elements that are attached from each other (for example and assembly), the viewer proceeds to make a zoom extent and isolate the parts. As you can see in the clips attached, the fitting elements disappear from the viewer.
We are using the latest version (7.82) of autodesk viewer and we have found out that in previous versions (7.80) the fittings are showing properly.
We noticed that is working properly in previous versions and maybe, this is an issue corresponding to the latest version updates

Autodesk Viewer UI Code Location and Edit Suggestions Needed

I need some help tweaking the Autodesk Viewer UI. I am working on the files as provided by a localised version output from http://extract.autodesk.io/.
I have not done any custom editing. I need help locating the relevant code and suggestions for the changes in the following areas:
The Model Browser docking panel. This opens by default with the first group in the tree Expanded (see picture). I want this first element and all other elements to open by default as Collapsed, so just the parent names are shown.
Staying in Model Browser. The Scroll Bars, (seen when model elements names are listed beyond the Model Browser window size) display correctly in the Opera and Chrome browsers,
however, they display unstyled as wide windows style scroll bars in the Firefox browser. What is needed for Firefox to display scrollbars as intended?
What code might override camera zoom property AFTER correctly loading default zoom value ?
The viewer version from http://extract.autodesk.io/ imports the scene camera properties for the start view ok, but overrides the Zoom property with another value shortly after intial page load.
1.I want this first element and all other elements to open by default as Collapsed, so just the parent names are shown.
Unfortunately far as I know there's no straightforward, native config option in Viewer to achieve this. However you can:
Hook an one-off click listener onto Model Browser button to programmatically fire a click on the corresponding notes you'd like to collapse, or directly add ‘.collapsed’ class to them. You can get a hold of the nodes either by their lmv-nodeid or their label text:
<div lmv-nodeid="9" class="collapsed group visible">
<lmvheader style="padding-left: 13px;">
<div class="visibility"></div>
<label>Switch:1</label>
</lmvheader>
</div>
Extend and build your own browser using the instanceTree and Autodesk.Viewing.UI.DockingPanel, see an example here
2.What is needed for Firefox to display scrollbars as intended?
Here is a great answer to your question. But looks like the status quo is still far from perfect, with no definite hack discovered so far. So again for a thorough solution you'd need to create your own styling (can do so with the help of something like) and apply them to .docking-panel and append .model-structure-panel or any other panels you'd like to narrow the scope to.
3.What code might override camera zoom property AFTER correctly loading default zoom value ?
This should be the code you are after.
You can manipulate camera with viewer.autocam.goToView( newView ), and see below for a sample view config:
const newView = {
position: newPosition,
up: currentView.up,
center: newCenter,
pivot: newPivotPoint,
fov: currentView.fov,
worldUp: currentView.worldUp,
isOrtho: (currentView.isOrtho === false)
}

Forge Viewer show UI while adding Markups

I'm working with the MarkupsCore extension and want to keep my added UI open inside the viewer while adding or working with Markups.
From what I can tell once I call enterEditMode the UI won't return until I hide all of my Markups. The buttons I have added don't seem to change state and their still marked as visible when I'm debugging, yet they don't show.
I tried setVisibility on the objects but the method returns false because it evaluates the buttons as not hidden.
Is there something I'm missing?
If I'm understanding your question right, that's expected as you cannot move/rotate/zoom the model when editing the Markups, mainly because these are SVG shapes on top of the view. Ideally you should also keep the Viewer state to restore when viewing the markups later.

Internet Explorer 11 - Difficulties in Selecting Text

I'm running my .NET application in Internet Explorer(Version 11) in compatibility mode. I'm using grid views to display content on my ASPX page. When I open the page and tried to select some cell or row from grid views, it is not selecting properly.
It is so difficult or impossible to select exactly the text you wanted to copy into an e-mail or a document. When you dragged the mouse to select text, you often selected adjacent paragraphs or columns also, even though you didn't want them.
Working fine with Earlier edition(IE 10) and Firefox and Chrome. I have to fix/find out why It is not working in IE 11.
Please let me know how to fix this one.
I think this is a "feature" in IE11 and there's no way to fix it in the code. IE11 text selection seems to struggle once it hits any HTML structures (spans, divs).
There is a work around for users but it's a bit painful. Press F7 to turn on caret mode, then you can select one item (double click) and then, holding down the shift key, use the cursor keys to highlight a selection.
If you have a lot of users, it would be better to implement an "Export to Excel" or "Copy to Clipboard" function than rely on text selections to get to the data.
IE also allows for entire field selection using CTRL+Click (Left Mouse Click).
Edge, nor Chrome allows for this superior selection technique.

How is the "travel mode" menu in Google Maps implemented?

I see this type of menu all over the Internet as a way to filter out data:
Does it have a specific name? I'm particularly interested in seeing how the pushed in effect is achieved. I've gone through the Chrome developer tools but viewing the CSS applied Chrome only returns a few classes and not the id of the element.
The menu type does not have a specific name as far as I know (although for all effects and purposes it is a set of radio buttons).
The pushed in effect is caused by an inset shadow and darker background color.
Here is a JSFiddle.
That menu is from Google maps.
It is what I might call an "icon" menu.
Buttons are not pushed in.
Instead, the images are swapped in and out depending on what is chosen.
Javascript is used to change the images and the content below the images.
Use Chrome and go to Google Maps. Type in an address and then click Get Directions. Once the buttons appear, right click on one of the button and choose Inspect element. That will show you the code that Googe is using.
The pushed effect is simply an image applied to the element when it's clicked
They're usually done with sprites
Here are some sprites from google
When the image is hovered/clicked a different spot on the image is used as the background for that element.