(Vis.js Network) Обновите положение всплывающего окна при масштабировании, перетаскивании и перемещении. - PullRequest
Новая
       26

(Vis.js Network) Обновите положение всплывающего окна при масштабировании, перетаскивании и перемещении.

0 голосов
/ 16 октября 2019

С одной стороны, у меня есть функция, позволяющая отображать всплывающее окно в позиции узла, по которому щелкнули: 

network.on("click", function (params) {
        // Sélection du node cliqué
        var nodeId = params.nodes[0];
        if (nodeId) {

            // On récupère le title du node
            var popup = this.body.nodes[nodeId].options.title;

            /* On calcule le milieu du canvas
            var milieuCanvasX = networkCanvas.width / 2 + 50;
            var milieuCanvasY = networkCanvas.height / 2 + 20; */

            // On prend les coordonnées du node
            var { x: nodeX, y: nodeY } = network.canvasToDOM(
                network.getPositions([nodeId])[nodeId]
            );

            // On affiche le contenu du title dans une div de la page auquel on ajoute une icone qui permet de fermer le popup au clic
            document.getElementById('popup').style.transition = "opacity 0.5s linear 0s";
            document.getElementById('popup').style.opacity = 1;
            document.getElementById('popup').innerHTML = popup+"<div class='close'><a href='#' onclick='closePopup()'>X</a></div>";
            // On affiche la div
            // On place la div
            document.getElementById('popup').style.position = "absolute";
            document.getElementById('popup').style.top = nodeY+20 +'px';
            document.getElementById('popup').style.left = nodeX+40 +'px';

        }
    });

С другой стороны, у меня есть функция увеличения масштаба по узлу, по которому щелкнулис помощью метода fit(): 

network.on("click", function(e) {
          // Si on clique ailleurs que sur un node, on recentre sur l'ensemble du network
          if (e.nodes.length !== 1) {
            network.fit({
                animation: {
                duration: 600,
                easingFunction: "easeOutQuint" }
            });
            return;
          }
          var nodeId = e.nodes[0];
          // ZOOM SUR UN NODE
          // On centre la vue sur le node avec une animation
            network.fit({
            nodes: [nodeId],
            animation: {
            duration: 600,
            easingFunction: "easeOutQuint" }
          });
    });

Эти две функции в настоящее время работают, но на самом деле не совместимы, так как всплывающее окно появляется в позиции узла, но затем сеть перемещается, чтобы сосредоточиться на узле, ивсплывающее окно больше не находится в нужном месте.

Мне сказали, что мне нужно обновлять положение всплывающего окна всякий раз, когда холст масштабируется, перетаскивается или перемещается, и для этого я могу сохранить идентификатор узла. и переместите всплывающее окно, используя тот же метод, что и для первоначального позиционирования. Но я не очень хорош в javascript, поэтому я немного растерян, как все это делать ...

Должен ли я использовать такие события, как on.zoom, on.dragging, on.fit (делает этоодин существует?)Как сделать так, чтобы положение узла обновлялось?

...