使用 Cytoscape 限制放置区域

Question

我正在尝试使用 Cytoscape 制作网页设计器，我想设置一个用户可以放置节点的限制区域。本质上：用户可以从 "canvas" 中删除一个节点（只是 CSS 中的一个矩形），然后他们就会迷路。如下图所示：

如您所见，我的节点形状为矩形，可以从我试图限制的区域中删除。我应该怎么办？谢谢！

Answer 1

以下代码片段同时使用了内置的 cy.fit() function as well as the 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/jquery@3.4.1/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.1.0/cytoscape-dagre.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-autopan-on-drag@2.2.0/cytoscape-autopan-on-drag.min.js"></script>
</head>

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

</html>

使用 Cytoscape 限制放置区域

Limit drop area with Cytoscape

javascript

cytoscape.js