2

I am using the Alloy Diagram Builder to create and display network topology. I would like to remove default click and drag events attached to each nodes, so viewers would not have the ability "build" diagrams but only view diagrams that I have generated.

http://alloyui.com/examples/diagram-builder/real-world/

I have tried these but it does not work.

// detach click event to all nodes with class aui-diagram-node.
Y.all('.aui-diagram-node').detach("click");

// unbind 
 $(".aui-diagram-node").each(function(){
$(this).unbind();
});
4

3 回答 3

2

.aui-diagram-builder-drop-container我相信事件是通过附加到容器delegate()的，事件将是mousedown.

于 2013-09-26T21:52:13.013 回答
1

只是偶然，我发现了一个可能适用于此的黑客。我正在向我的页面添加工具提示，在该页面上我有一个图表构建器，显然工具提示在页面上放置了一个 div，并简单地将其不透明度设置为清晰并且对象仍然存在。在工具提示出现后，我无法与工具提示弹出的图表构建器进行交互。

所以基于这个概念，为什么不尝试在图表的整个画布上覆盖一个 div 并给它一个高 z-index 以便它位于顶部。它实际上应该不允许与画布交互。

是的，这是一个杂物，但它可能会起作用。

于 2013-10-02T19:00:45.867 回答
1

要设为DiagramBuilder只读，您可以递归地从其所有子项中 detach() 事件：

/*
 * Readonly the diagram
 */
function ReadonlyDiagram(diagram) {
    function detachRecursively(node) {
        node.get('children').each(detachRecursively);

        // You may also want to set the cursor to the default since it will 
        // change based on which elements the mouse is over.
        // node.setStyle('cursor', 'auto');

        // You may want to detach specific events such as 'click' or 
        // 'mousedown' if you do not want to disable all events.
        node.detach();
    };

    diagram.on('render', function (event) {
        detachRecursively(diagram.get('boundingBox'));
    });
}

现在，您必须发布 diagramBuilder 对象才能ReadonlyDiagram像以下代码一样运行：

YUI().use('aui-diagram-builder', function (y) {            
            var diagram = new y.DiagramBuilder(
            {
                availableFields: data,
                boundingBox: '#' + containerId,
                fields: nodes,
                srcNode: '#' + builderId
            }).render();    
            diagram.connectAll(connections);

            if (callBackDiagram !== undefined) callBackDiagram(diagram);

            if(isReadonly === true) ReadonlyDiagram(diagram);
        });
    });

参考

于 2017-01-24T11:24:02.393 回答