Ограничить область падения с Cytoscape - PullRequest
Новая
       7

Ограничить область падения с Cytoscape

1 голос
/ 18 февраля 2020

Я пытаюсь сделать веб-дизайнер с Cytoscape , и я хотел бы установить ограниченную область, в которой пользователь может удалить узел. По сути: пользователь может удалить узел из «холста» (просто прямоугольник в CSS), и он теряется. Как показано на рисунке ниже:

Current view

Как вы можете видеть, мой узел имеет форму прямоугольника, который можно выпасть из зоны, которую я пытаюсь ограничить. Что мне делать? Спасибо!

1 Ответ

1 голос
/ 20 февраля 2020

В следующем фрагменте кода используется как встроенная функция 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/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>
...