AlloyUI Diagram Builder Read-only

Question

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

Answer 1

Merely by accident I found a hack that might work for this. I was adding tooltips to my page on which I had a diagram builder, well apparently the tooltips layer a div over the page and simply set the opacity on it to be clear and the object still resides. After a tooltip had come up i was unable to interact with the piece of the diagram builder the tooltip had popped up over.

So based of this concept, why not try overlaying a div over the entire canvas of the diagram and give it a high z-index so that it sits on top. It should effectively not allow interaction with the canvas.

Yes it's a kludge but it just may work.

Answer 2

I believe the event is attached to the container .aui-diagram-builder-drop-container via delegate() and the event would be mousedown.

Answer 3

To make a DiagramBuilder read-only, you can detach() events from all of its children recursively:

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

Now, you must be post diagramBuilder object to ReadonlyDiagram function like below codes:

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