autodesk-forge - 查看器中启用悬停的子上下文菜单

问题描述

问题：如何修改以下代码，以便 (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);
....

标签： autodesk-forgeautodesk-viewer

autodesk-forge - 查看器中启用悬停的子上下文菜单

问题描述

解决方案

推荐阅读