Вопрос : Как изменить приведенный ниже код таким образом, чтобы (i) при наведении курсора на пункт меню в контекстном меню появлялось соответствующее подменю и (ii) меню (я) исчезали после нажав на пункт меню?
Контекст : В настоящее время при нажатии на пункт меню, соответствующий подменю, исходное контекстное меню остается фиксированным (т. Е. При нажатии на пустое место в средстве просмотра меню остается и выглядит полностью интерактивным). ). Когда вы нажимаете один и тот же элемент меню во второй раз, он открывает подменю, но, как и в исходном меню, это подменю также остается фиксированным, когда мы нажимаем один из его пунктов меню.
Для справки, я включил несколько скриншотов текущего контекстного меню и подменю.
Соответствующий код выглядит следующим образом:
...
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);
....