带有Cytoscape的限制放置区域

Question

我正在尝试使Web设计器使用Cytoscape，我想设置一个限制区域，用户可以在其中放置节点。本质上：用户可以将节点从“画布”中放下（在CSS中只是一个矩形），它们会迷路。如下图所示：

如您所见，我的节点的形状为矩形，可以将其拖放到我尝试限制的区域之外。我该怎么办？谢谢！

Answer 1

以下代码片段同时使用了内置的cy.fit()函数和cy.fit()扩展名。

cytoscape-autopan-on-drag

cytoscape-autopan-on-drag

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),

    style: [{
        selector: "node",
        style: {
          content: "data(id)"
        }
      },

      {
        selector: "edge",
        style: {
          "target-arrow-shape": "triangle"
        }
      },

      {
        selector: ":selected",
        style: {}
      }
    ],

    elements: {
      nodes: [{
          data: {
            id: "n0"
          }
        },
        {
          data: {
            id: "n1"
          }
        },
        {
          data: {
            id: "n2"
          }
        },
        {
          data: {
            id: "n3"
          }
        },
        {
          data: {
            id: "n4"
          }
        },
        {
          data: {
            id: "n5"
          }
        },
        {
          data: {
            id: "n6"
          }
        },
        {
          data: {
            id: "n7"
          }
        },
        {
          data: {
            id: "n8"
          }
        },
        {
          data: {
            id: "n9"
          }
        },
        {
          data: {
            id: "n10"
          }
        },
        {
          data: {
            id: "n11"
          }
        },
        {
          data: {
            id: "n12"
          }
        },
        {
          data: {
            id: "n13"
          }
        },
        {
          data: {
            id: "n14"
          }
        },
        {
          data: {
            id: "n15"
          }
        },
        {
          data: {
            id: "n16"
          }
        }
      ],
      edges: [{
          data: {
            source: "n0",
            target: "n1"
          }
        },
        {
          data: {
            source: "n1",
            target: "n2"
          }
        },
        {
          data: {
            source: "n1",
            target: "n3"
          }
        },
        {
          data: {
            source: "n4",
            target: "n5"
          }
        },
        {
          data: {
            source: "n4",
            target: "n6"
          }
        },
        {
          data: {
            source: "n6",
            target: "n7"
          }
        },
        {
          data: {
            source: "n6",
            target: "n8"
          }
        },
        {
          data: {
            source: "n8",
            target: "n9"
          }
        },
        {
          data: {
            source: "n8",
            target: "n10"
          }
        },
        {
          data: {
            source: "n11",
            target: "n12"
          }
        },
        {
          data: {
            source: "n12",
            target: "n13"
          }
        },
        {
          data: {
            source: "n13",
            target: "n14"
          }
        },
        {
          data: {
            source: "n13",
            target: "n15"
          }
        }
      ]
    },

    layout: {
      name: "dagre",
      padding: 50
    }
  }));

  // demo your core ext
  cy.autopanOnDrag({
    /* Options here */
  });

  cy.on('tapdrag', 'node', function() {
    cy.fit(cy.elements(), 50);
    cy.center();
  })
});