AlloyUI Diagram Builder Только для чтения

Question

Я использую построитель диаграмм сплава для создания и отображения сетевой топологии. Я хотел бы удалить события по умолчанию и перетаскивания по умолчанию, привязанные к каждому узлу, поэтому зрители не будут иметь возможности «строить» диаграммы, а только просматривать диаграммы, которые я создал.

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

Просто случайно я нашел взломанный, который может сработать для этого. Я добавлял всплывающие подсказки на мою страницу, на которой у меня был построитель диаграмм, и, видимо, всплывающие подсказки накладывают на div над страницей и просто устанавливают прозрачность на ней, чтобы быть ясными, и объект все еще находится. После того, как всплыла подсказка, я не смог взаимодействовать с куском построителя диаграмм, всплыла всплывающая подсказка.

Основываясь на этом понятии, почему бы не попробовать наложить div на весь холст диаграммы и дать ему высокий индекс z, чтобы он находился сверху. Это должно эффективно не допускать взаимодействия с холстом.

Да, это куд, но это может сработать.

Answer 2

Я считаю, что событие присоединен к контейнеру .aui-diagram-builder-drop-container через delegate() и событие будет mousedown.

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