FixBug of Double arrow when followRelationships is set to true. New E…

…xamples.
javdome · Aug 1, 2022 · 7d6f5d2 · 7d6f5d2
1 parent 5f164ff
commit 7d6f5d2
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 3 deletions.
diff --git a/arrow.js b/arrow.js
@@ -163,6 +163,7 @@ export default class Arrow {
             if (this._followRelationships && item_2.mid_x < item_1.mid_x) {
                 item_2.right += 10; // Space for the arrowhead.
                 this._dependencyPath[index].setAttribute("marker-start", "url(#arrowhead0)");
+                this._dependencyPath[index].setAttribute("marker-end", "");
                 this._dependencyPath[index].setAttribute(
                     "d",
                     "M " +
@@ -185,6 +186,7 @@ export default class Arrow {
             } else {
                 item_2.left -= 10; // Space for the arrowhead.
                 this._dependencyPath[index].setAttribute("marker-end", "url(#arrowhead0)");
+                this._dependencyPath[index].setAttribute("marker-start", "");
                 this._dependencyPath[index].setAttribute(
                     "d",
                     "M " +

diff --git a/examples/followRelationships_True.html b/examples/followRelationships_True.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Timeline | With followRelationships: true</title>
+    <!-- Fuentes de iconos -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />
+    <style>
+      body,
+      html {
+        font-family: arial, sans-serif;
+        font-size: 11pt;
+      }
+      #visualization {
+        box-sizing: border-box;
+        width: 100%;
+        height: 300px;
+      }
+    </style>
+
+
+    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+
+
+    <script src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
+    <link
+      href="https://unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+  <body>
+    <button onclick="Window.showVisibleItems()">Show current visible items</button>
+    <button onclick="Window.showGroups()">Show groups</button>
+    <button onclick="Window.remove()">Delete arrow between 3 and 8</button>
+    <div>
+      <h2>visible items:</h2>
+      <h3 id="visibleItemsContainer"></h3>
+    </div>
+    <div id="visualization"></div>
+
+
+    <!-- <script src="../arrow.js"></script> -->
+    <script type="module" src="./followRelationships_True.js"></script>
+
+  </body>
+</html>
diff --git a/examples/followRelationships_True.js b/examples/followRelationships_True.js
@@ -0,0 +1,138 @@
+      /**
+      *CREATING THE TIMELINE 
+      */
+      import Arrow from '../arrow.js';
+
+      const options = {
+        groupOrder: "content", // groupOrder can be a property name or a sorting function
+        selectable: true,
+        editable: true,
+        groupTemplate: function(group) { //function to hide groups
+          var container = document.createElement('div');
+          var label = document.createElement('span');
+          label.innerHTML = group.content + ' ';
+          container.insertAdjacentElement('afterBegin',label);
+
+          var hide = document.createElement('span');
+          hide.setAttribute("class", "oi oi-eye");
+          hide.addEventListener('click',function(){
+            groups.update({id: group.id, visible: false});
+          });
+          container.insertAdjacentElement('beforeEnd',hide);     
+          return container;
+        }
+      };
+
+      // Generate some
+      var now = vis.moment()
+        .minutes(0)
+        .seconds(0)
+        .milliseconds(0);
+      var names = ["John", "Alston", "Lee", "Grant"];
+      var itemCount = 20;
+      // create a data set with groups
+      var groups = new vis.DataSet();
+      for (var g = 0; g < names.length; g++) {
+        groups.add({ id: g, content: names[g] });
+      }
+      // create a dataset with items
+      var items = new vis.DataSet();
+      for (var i = 0; i < itemCount; i++) {
+        var start = now.clone().add(Math.random() * 200, "hours");
+        var end = start + 100000000;
+        var group = Math.floor(Math.random() * names.length);
+        items.add({
+          id: i,
+          group: group,
+          content:
+            "item " +
+            i +
+            ' <span style="color:#97B0F8;">(' +
+            names[group] +
+            ")</span>",
+          start: start,
+          end: end,
+          //type: "box"
+        });
+      }
+      // Create visualization.
+      const container = document.getElementById("visualization");
+      const timelinevis = new vis.Timeline(container, items, groups, options);
+
+
+
+
+
+
+      /**
+      *CREATING THE ARROWS 
+      */    
+      var dependency = [
+        {
+          id: 2,
+          id_item_1: 1,
+          id_item_2: 2,
+          title: 'Hello'   
+        },
+        {
+          id: 5,
+          id_item_1: 3,
+          id_item_2: 5 
+        },
+        {
+          id: 7,
+          id_item_1: 6,
+          id_item_2: 7,
+          title: 'Hola'   
+        },
+        {
+          id: 10,
+          id_item_1: 3,
+          id_item_2: 8
+        }
+      ];
+
+
+      // Adding arrows option followRelationships set to true
+      const arrowsOptions = {
+        followRelationships: true,
+      };
+
+
+      // Create instance of Arrow for a timeline objetc and its denpedencies
+      const myArrow = new Arrow(timelinevis, dependency, arrowsOptions);
+
+
+
+      //Example of adding a new arrow (between items 15 and 16)
+      myArrow.addArrow(
+        {
+          id: 13,
+          id_item_1: 15,
+          id_item_2: 16,
+          title: 'I have been added'   
+        }
+      );
+
+
+
+
+      /*ANOTHER FUNCTIONS (NO IMPORTANT)*/
+      const showVisibleItems = function () {
+        var a = timelinevis.getVisibleItems();
+        document.getElementById("visibleItemsContainer").innerHTML = ""
+        document.getElementById("visibleItemsContainer").innerHTML += a;
+      };
+      Window.showVisibleItems = showVisibleItems;
+
+      const showGroups = function (){
+        groups.forEach(function(group){
+          groups.update({id: group.id, visible: true});
+        })
+      };
+      Window.showGroups = showGroups;
+
+      const remove = function () {
+        myArrow.removeArrow(10);
+      }
+      Window.remove = remove;
diff --git a/index.html b/index.html
@@ -4,10 +4,11 @@
     <title>Timeline-arrows</title>
   </head>
   <body>
-    <h1>Timeline-arrows</h1>
+    <h1>Timeline-arrows Examples</h1>
     <ul>
       <li><a href="./examples/basic_example.html">Basic example</a></li>
-      <li><a href="./examples/2timelines.html">With 2 timelines</a></li>
+      <li><a href="./examples/followRelationships_True.html">With followRelationships True</a></li>
+      <!-- <li><a href="./examples/2timelines.html">With 2 timelines</a></li> -->
     </ul>
 
   </body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "timeline-arrows",
-  "version": "3.1.0",
+  "version": "4.0.1",
   "description": "Package to easily draw lines to connect items in the vis Timeline module.",
   "main": "arrow.js",
   "scripts": {