需要顯示“單擊”事件才能像EditNode Popup一樣，沒有保存和取消按鈕。 僅顯示Nodepopup / edgepopup

Question

我有一個來自以下示例的工作代碼。

http://visjs.org/examples/network/other/manipulationEditEdgeNoDrag.html

但是我想添加一個“單擊”事件以顯示節點屬性（NodePopUp）和邊緣屬性。

因此，當我單擊一個節點時，NodePopUp應該顯示出來，而沒有保存和取消按鈕。 同樣適用於EdgePopup。

左圖-單擊了節點0。但是我應該單擊編輯->編輯節點->然后顯示節點屬性的彈出窗口。

我想跳過這些步驟，當我單擊一個節點/邊緣時，需要顯示相應的節點/邊緣彈出窗口，而沒有保存和取消按鈕。

有人可以給我一個建議來實現這一目標嗎？

Answer 1

基本上，您需要處理click 事件 （ network.on("click", ...) ）並打開彈出窗口（如果選擇引用示例的代碼，則可以看到它是通過editNode幫助器完成的，也可以通過分配document.getElementById('node-operation').innerHTML = "Add Node";我不得不承認，那里的代碼不是很可重用，您可能想看看我的圖形編輯器實現 ，請參見config.macros.graph.createEditPopup幫助器，對於此類事情更可重用）。 所以會有類似

network.on("click", function(clickProperties)
{
    var popup = document.querySelector('.my_popup'); // adjust selector to the class/id you use

    if(clickProperties.nodes.length == 1) // you want this for just one node clicked, right?
    {
        var id = clickProperties.nodes[0];

        popup.style.display = 'block';
        popup.textContent = 'one node selected: '+id; // fill popup input fields etc
    }
    else if(clickProperties.nodes.length == 0)
    {
        popup.style.display = 'none';
    }
})

（請參見僅使用div而不是彈出窗口的方法 ）。您還需要通過添加/刪除display: none;來處理隱藏和顯示保存/取消按鈕display: none; CSS元素 或者更好的是，您可以每次都重新創建彈出窗口，以免將其弄亂。 您還必須決定如何關閉彈出窗口（您可以跳過隱藏“取消”的操作，也可以將其替換為十字形按鈕，或者在按esc或單擊其他位置時關閉...）