Hover-Enabled Sub Context Menu in Viewer - autodesk-forge

Question

Question: How do I modify the below code so that (i) upon hovering over a menu item in the context menu, the correpsonding submenu appears, and (ii) the menu(s) disappear after clicking on a menu item?
Context: Currently, when you press the menu item corresponding with the sub-menu, the original context menu stays fixed (i.e. when clicking on empty space in the viewer, the menu remains and appears fully interactive). When you press on the same menu item for a second time, it opens the sub-menu, but similar to the original menu, this sub-menu also remains fixed when we press one of its menu items.
For reference, I've included some screenshots of the current context menu and sub-menu.
The corresponding code is as follows:
...
function ContextMenu(viewer, options) {
Autodesk.Viewing.Extensions.ViewerObjectContextMenu.call(this, viewer, options);
}
ContextMenu.prototype = Object.create(Autodesk.Viewing.Extensions.ViewerObjectContextMenu.prototype);
ContextMenu.prototype.constructor = ContextMenu;
ContextMenu.prototype.buildMenu = function(event, context) {
if (contextMenuState.disabled) {
return null;
}
// Context is a true false flag used internally by autodesk to determine which type of menu to build.
// If false, it has the side effect of selecting the right-clicked element.
var autodeskMenu = Autodesk.Viewing.Extensions.ViewerObjectContextMenu.prototype.buildMenu.call(this, event, context);
const filterOut = ['Hide Selected', 'Clear Selection', 'Show All Objects'];
const menu = autodeskMenu.filter(m => !filterOut.includes(m.title));
menu.push({
title: "Custom 1",
target: function() {
doSomeCustom1Stuff();
}
});
menu.push({
this.custom2ItemGenerator(<parameter1>, <parameter2>, <parameter3>, <parameter4>);
});
return menu;
};
ContextMenu.prototype.custom2ItemGenerator = function(p1, p2, p3, p4) {
return {
title: "< Custom 2",
target: [
{
title: "Sub-custom 1",
target: function() {
...doSomething1(p1);
}
},
{
title: "Sub-custom 2",
target: function() {
...doSomething2(p2);
}
},
{
title: "Sub-custom 3",
target: function() {
...doSomething3(p3);
}
},
{
title: "Sub-custom 4",
target: function() {
...doSomething4(p4);
}
},
{
title: "Sub-custom 5",
target: function() {
...doSomething5(p5);
}
}
]
}
};
/* Not sure the following to overrides ('hide' and 'addCallbackToMenuItem') are correct, or even necessary.
ContextMenu.prototype.hide = function() {
if (this.open) {
this.menus = [];
this.open = false;
this.container.removeEventListener('touchend', this.OnHide);
this.container.removeEventListener('click', this.OnHide);
this.container.removeEventListener(<Custom Name>, this.OnMove); // same Custom Name as 1st parameter function below -- Autodesk.Viewing.theExtensionManager.registerExtension
this.container.parentNode.removeChild(this.container);
this.container = null;
return true;
}
return false;
};
ContextMenu.prototype.addCallbackToMenuItem = function (menuItem, target) {
var that = this;
if (target.constructor == Array) {
menuItem.addEventListener('click', function (event) {
that.hide();
target();
event.preventDefault();
return false;
}, false);
} else {
menuItem.addEventListener('mouseover', function (event) {
that.hide();
target();
event.preventDefault();
return false;
}, false);
}
};
function ContextMenuLoader(viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
this.load = function() {
viewer.setContextMenu(new ContextMenu(viewer, options));
return true;
};
this.unload = function() {
viewer.setContextMenu(new Autodesk.Viewing.Extensions.ViewerObjectContextMenu(viewer, options));
return true;
};
}
ContextMenuLoader.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
ContextMenuLoader.prototype.constructor = ContextMenuLoader;
Autodesk.Viewing.theExtensionManager.registerExtension(<Custom Name>, ContextMenuLoader);
....

Answer 1

Sorry about this problem, we're investigating this. Our tracking code is LMV-3740