使用Cytoscape限制掉落区域

debugcn 发表于 Dev

姆德兹

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

目前来看

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

斯蒂芬·T

以下代码段同时使用了内置cy.fit()函数和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();
  })
});

body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px;
}

#cy {
  position: absolute;
  width: 60%;
  height: 60%;
  border: 1px solid gray;
}

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/dagre.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-dagre.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-autopan-on-drag.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。