Всплывающее контекстное меню с включенным наведением в средстве просмотра

Question

Вопрос: Как мне изменить приведенный ниже код так, чтобы (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);
....

Answer 1

Извините за эту проблему, мы расследуем это. Наш код отслеживания LMV-3740