Cystoscape выходит за границы холста

Question

Я хочу разместить объекты внутри холста cytoscape, не выходя за пределы максимальной ширины и высоты, но если я перетаскиваю объекты внутри холста, они go за пределами границы холста:

На самом деле я не использую Canvas из HTML5, вместо этого я использую Canvas из Cytoscape. js плагин, так что это усложняет его исправление. Я уже видел документацию cystoscape, чтобы увидеть, есть ли какая-либо опция, чтобы сделать границы фиксированными и сделать содержимое внутри resposive, но ничего не нашел.

Я хотел бы знать, есть ли способ обмануть это.

мой тест кода:

тест коробки cystoscape

``

 $(document).ready(function () {
 // document.addEventListener('DOMContentLoaded', function() {

 $('#cyto').attr("title", "try clicking and dragging around the canvas and nodes");


 tippy('#cyto')

 cy = cytoscape({
     container: document.getElementById('cyto'),


     style: cytoscape.stylesheet()

         // style for the nodes
         .selector('node')
         .css({
             'width': 70,
             'height': 70,
             'content': 'data(id)',
             'text-align': 'center',
             'color': '#506874',
             'background-color': '#20b2aa',
             'font-family': 'Oswald',
             'shape': 'roundrectangle',
             'font-size': 20

         })

         // style for the connecting lines
         .selector('edge')
         .css({
             'width': .9,
             'height': 0.2,
             'curve-style': 'bezier',
             'target-arrow-shape': 'triangle',
             'target-arrow-color': '#F3A712',
             'line-color': '#F3A712',
             // 'line-color': '#C40E0E',

         })
         .selector(':selected')
         .css({
             'background-color': '#428bca',
             'line-color': '#C40E0E',
             'target-arrow-color': '#C40E0E',
             'source-arrow-color': '#C40E0E'
         })
         .selector('.faded')
         .css({
             'opacity': 1,
             'text-opacity': 0
         }),

     elements: [
         {
             group: 'nodes',
             data: {
                 id: 'WORDS'
             }
      }, {
             group: 'nodes',
             data: {
                 id: 'REALITY'
             }
      },
         {
             group: 'nodes',
             data: {
                 id: 'THE WORLD'
             }
      },

         {
             group: 'nodes',
             data: {
                 id: 'PEOPLE'
             }
      },

         {
             group: 'nodes',
             data: {
                 id: 'ME'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge1',
                 source: 'PEOPLE',
                 target: 'WORDS'
             }
      },

         {
             group: 'edges',
             data: {
                 id: 'edge2',
                 source: 'PEOPLE',
                 target: 'REALITY'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge3',
                 source: 'ME',
                 target: 'WORDS'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge4',
                 source: 'WORDS',
                 target: 'THE WORLD'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge',
                 source: 'THE WORLD',
                 target: 'ME'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge6',
                 source: 'PEOPLE',
                 target: 'THE WORLD'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge7',
                 source: 'ME',
                 target: 'THE WORLD'
             }
      },

         {
             group: 'edges',
             data: {
                 id: 'edge9',
                 source: 'WORDS',
                 target: 'REALITY'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge5',
                 source: 'REALITY',
                 target: 'ME'
             }
      }
    ],
 }); // end cytoscape
 }, false);

``

Answer 1

Как и в случае с любым объектом Canvas, вам необходимо «прослушать» событие перетаскивания и выполнить действие в зависимости от позиции.

Код ниже - это pu sh в правильном направлении, я ' m просто показывает положение элемента при его перетаскивании, затем вам нужно установить границы области и предотвратить перемещение элемента наружу

tippy("#cyto");

cy = cytoscape({
  container: document.getElementById("cyto"),

  style: cytoscape
    .stylesheet()
    .selector("node")
    .css({content: "data(id)"}),

  elements: [
    {data: { id: "WORDS" }},
    {data: { id: "REALITY" }}
  ]
});

cy.on('drag', 'node', function (evt) {
  var node = evt.target;
  var point = node.point();
  
  console.log(node.id() + " " + point.x + " " + point.y);
  if (point.y < 10)
    node.style({ 'background-color': 'red' });
  else
    node.style({ 'background-color': 'blue' });
});

.container {
  display: grid;
  border: 2px blue solid;
  height: 160px;
  width: 400px;
}

#cyto {
  grid-row: 2/ span 1;
  grid-column: 1/ span 6;
}

<script src="https://unpkg.com/tippy.js@2.0.8/dist/tippy.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.1/cytoscape.min.js"></script>

<div class="container">
  <div id="cyto">
  </div>
</div>

Вы можете использовать https://github.com/cytoscape/cytoscape.js-automove, но я настоятельно рекомендую вам четко это понять перед началом использования расширений