Question

我必须使用dagre布局提供复制/粘贴功能。这个想法是用户复制一个节点，并且无论他们决定将其“粘贴”到哪里，都将在此处创建复制节点的层次结构。这意味着必须移动所有节点。我首先想到也许我可以再次调用布局，但这不能“适应”它们。

我仍在学习cytoscape.js，因此，如果这是一个简单的问题，请原谅。

Answer 1

这将很难实现，所以请听我说：

第一步：

Cytoscape的扩展名为context-menus（demo）
另一个扩展名叫clipboard（demo）
让自己熟悉这两个

第二步：

使用这两个扩展名和一个dagre图创建您的图
复制这些节点时，使复制功能的行为如下：
- 将节点的边缘添加到正确的层次结构中
在节点上单击鼠标右键时，将插入项添加到层次结构中，该功能会将复制的节点添加到图中

代码示例：

var options1 = {
    // List of initial menu items
    menuItems: [
      {
          id: 'addToHierarchy',
          content: 'Add to hierarchy',
          tooltipText: 'Add nodes to hierarchy here',
          selector: 'node',
          onClickFunction: function () {
              // your handlerFunction
          },
          disabled: false
      }
    ]
};
var instance = cy.contextMenus( options1 );

var options2 = {
    clipboardSize: 0,
    // The following 4 options allow the user to provide custom behavior to
    // the extension. They can be used to maintain consistency of some data
    // when elements are duplicated.
    // These 4 options are set to null by default. The function prototypes
    // are provided below for explanation purpose only.

    // Function executed on the collection of elements being copied, before
    // they are serialized in the clipboard
    beforeCopy: function(eles) {},
    // Function executed on the clipboard just after the elements are copied.
    // clipboard is of the form: {nodes: json, edges: json}
    afterCopy: function(clipboard) {},
    // Function executed on the clipboard right before elements are pasted,
    // when they are still in the clipboard.
    beforePaste: function(clipboard) {},
    // Function executed on the collection of pasted elements, after they
    // are pasted.
    afterPaste: function(eles) {}
};

var clipboard = cy.clipboard(options2);

Cytoscape.js移动节点以允许粘贴节点

1 个答案: