Edge arrows above custom node labels #1037

Activity

1. Thomaash commented on Sep 10, 2020

   

   Thomaash

   on Sep 10, 2020

   Member

   More actions

   Hi @LeoShivas,

   isn't this implemented already? The ctxRenderer looks like:

   function ctxRenderer({ ctx, id, x, y, state: { selected, hover }, style, label }) {
     // do some math here
     return {
       // bellow arrows
       // primarily meant for nodes and the labels inside of their boundaries
       drawNode() {
         ctx.drawSomeNode();
       },
       // above arrows
       // primarily meant for labels outside of the node
       drawExternalLabel() {
         ctx.drawSomeTextOutsideOfTheNode();
       },
       // node dimensions defined by node drawing
       nodeDimensions: { width, height },
     };
   }
2. LeoShivas commented on Sep 16, 2020

   

   LeoShivas

   on Sep 16, 2020

   Author

   More actions

   Sorry, I don't understand how to use this function in my code.

   Here is my code (very simplified and anonymized) :

   const nodeFilterSelector = document.getElementById("nodeFilterSelect");
   const edgeFilters = document.getElementsByName("edgesFilter");
   
   const nodes = new vis.DataSet([{
           id: "http://mygreatApp37/",
           cid: 37,
           label: "http://mygreatApp37/",
           phase: "Production",
           image: "https://mygretadomain/mysoft/" + "img/location.png",
           shape: "image",
           url: "/mysoft/location/42"
       },
       {
           id: "37_server06",
           cid: 37,
           label: "server06",
           phase: "Production",
           image: "https://mygretadomain/mysoft/" + "img/server.png",
           shape: "image",
           url: "/mysoft/server/7"
       },
       {
           id: "BDD_APP37",
           cid: 37,
           label: "BDD_APP37",
           phase: "Production",
           image: "https://mygretadomain/mysoft/" + "img/database.png",
           shape: "image",
           url: "/mysoft/bdd/100"
       },
   ]);
   
   const edges = new vis.DataSet([{
           from: "http://mygreatApp37/",
           to: "37_server06"
       },
       {
           from: "37_server06",
           to: "BDD_APP37"
       },
   ]);
   
   let nodeFilterValue = "";
   
   const nodesFilter = (node) => {
       if (nodeFilterValue === "") {
           return true;
       }
       switch (nodeFilterValue) {
           case "Production":
               return node.phase === "Production";
           case "Préproduction":
               return node.phase === "Préproduction";
           case "Recette":
               return node.phase === "Recette";
           case "Développement":
               return node.phase === "Développement";
           case "Intégration":
               return node.phase === "Intégration";
           default:
               return true;
       }
   };
   
   const nodesView = new vis.DataView(nodes, {
       filter: nodesFilter
   });
   
   nodeFilterSelector.addEventListener("change", (e) => {
       nodeFilterValue = e.target.value;
       nodesView.refresh();
       draw();
   });
   
   let container = document.getElementById("mynetwork");
   let data = {
       nodes: nodesView,
       edges: edges,
   };
   let options = {
       nodes: {
           borderWidth: 2
       },
       interaction: {
           hover: true
       },
       layout: {
           improvedLayout: false
       },
   };
   let network = new vis.Network(container, data, options);
   
   network.on("click", function(params) {
       if (params.nodes.length === 1) {
           if (network.isCluster(params.nodes[0]) === true) {
               draw();
               network.openCluster(params.nodes[0]);
           }
       }
   });
   
   function cluster(cluster_id, cluster_label) {
       let clusterOptions = {
           joinCondition: function(nodeOptions) {
               return nodeOptions.cid === cluster_id;
           },
           clusterNodeProperties: {
               label: cluster_label,
               font: {
                   strokeWidth: 2,
               },
               shape: "image",
               image: "https://mygretadomain/mysoft/" + "img/application.png",
               allowSingleNodeCluster: true,
           },
       };
       network.cluster(clusterOptions);
   }
   
   function draw() {
       cluster(37, "App37");
   }
   
   network.on("doubleClick", function(params) {
       if (params.nodes.length === 1) {
           let node = nodes.get(params.nodes[0]);
           if (node.url != null) {
               window.open(node.url, '_self');
           }
       }
   });
   
   window.addEventListener("load", () => {
       draw();
   });
   

   What is the trick you suggest ?
3. Thomaash commented on Sep 20, 2020

   

   Thomaash

   on Sep 20, 2020

   Member

   More actions

   Hi @LeoShivas,

   I have no idea what relation the code has to this issue, it doesn't use custom nodes at all. It doesn't even work: It loads data from nonexistent domains, relies on DOM that you didn't provide etc.
4. Thomaash

   added

   bugSomething isn't workingSomething isn't working

   can't reproduceSomething has been reported but seems to work fineSomething has been reported but seems to work fine

   on Sep 20, 2020