Question

我正在使用Alloy Diagram Builder来创建和显示网络拓扑。我想删除附加到每个节点的默认点击和拖动事件，因此观众不具备“构建”图表的能力，而只能查看我生成的图表。

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

我尝试了这些，但它不起作用。

// 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();
});

Answer 1

我认为该事件已通过.aui-diagram-builder-drop-container附加到容器delegate()，事件将为mousedown。

Answer 2

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

因此，基于这个概念，为什么不尝试在图的整个画布上覆盖div并给它一个高z-index以使其位于顶部。它应该有效地不允许与画布交互。

是的，它是一种kludge，但它可能会起作用。

Answer 3

要使DiagramBuilder只读，您可以递归地从其所有子项中分离（）事件：

/*
 * 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);
        });
    });

Reference

AlloyUI Diagram Builder只读

3 个答案: