Search code examples
user-interfacediagramalloy-ui

AlloyUI Diagram Builder Read-only


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

Solution

  • 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.