Addes option hideWhenItemsNotVisible

javdome · Mar 24, 2024 · 72076d9 · 72076d9
1 parent 2726d18
commit 72076d9
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -83,6 +83,9 @@ Sets the arrows width in pixels.
 **tooltipConfig** - if arrows have a `title` property, the default behavior will add a title attribute that shows on hover. However, you might not want to use the title attribute, but instead your own tooltip configuration.
 This method takes two arguments, `el` - the arrow - and `title` - the content of the `title` property set in the arrow data.
 
+**hideWhenItemsNotVisible** - defaults to `true`.
+When you zoom the timeline and both items go out of the screen. You can set if the arrow is still visible. By default, the arrow hides, but you can change it setting this option to `false`.
+
 ## Methods
 
 I have created the following methods:

diff --git a/arrow.js b/arrow.js
@@ -4,8 +4,8 @@
  *
  * Class to easily draw lines to connect items in the vis Timeline module.
  *
- * @version 4.5.0
- * @date    2024-02-3
+ * @version 4.6.0
+ * @date    2024-03-24
  *
  * @copyright (c) Javi Domenech ([email protected]) 
  *
@@ -49,6 +49,7 @@
         This method takes two arguments, `el` - the arrow - and `title` - the content of the `title` property set in the arrow data.
  * @property {string} [color] arrow color
  * @property {number} [strokeWidth] arrow thickness in pixels
+ * @property {boolean} [hideWhenItemsNotVisible] if true, arrows will be hidden when both items is not visible due to timeline zoom.
  */
 
 /** Arrow set for a vis.js Timeline. */
@@ -74,6 +75,9 @@ export default class Arrow {
         /** @private @type {number} arrow thickness in pixels */
         this._arrowsStrokeWidth = options?.strokeWidth ?? 3;
 
+        /** @private @type {boolean} if true, arrows will be hidden when both items is not visible due to timeline zoom  */
+        this._hideWhenItemsNotVisible = options?.hideWhenItemsNotVisible ?? true;
+
         /** @private @type {SVGMarkerElement} */
         this._arrowHead = document.createElementNS(
             "http://www.w3.org/2000/svg",
@@ -166,7 +170,7 @@ export default class Arrow {
     _drawArrows(dep, index) {
         //Checks if both items exist
         //if( (typeof this._timeline.itemsData._data[dep.id_item_1] !== "undefined") && (typeof this._timeline.itemsData._data[dep.id_item_2] !== "undefined") ) {
-        //debugger;
+
         const bothItemsExist = (this._timeline.itemsData.get(dep.id_item_1) !== null) && (this._timeline.itemsData.get(dep.id_item_2) !== null);
 
         //Checks if at least one item is visible in screen
@@ -201,7 +205,7 @@ export default class Arrow {
             }
         }
 
-        if ( (groupOf_1_isVisible && groupOf_2_isVisible) && (oneItemVisible) && (bothItemsExist)) {
+        if ( (groupOf_1_isVisible && groupOf_2_isVisible) && (oneItemVisible || !this._hideWhenItemsNotVisible) && (bothItemsExist)) {
             var item_1 = this._getItemPos(this._timeline.itemSet.items[dep.id_item_1]);
             var item_2 = this._getItemPos(this._timeline.itemSet.items[dep.id_item_2]);
 

diff --git a/examples/hideWhenItemsNotVisible_Option.html b/examples/hideWhenItemsNotVisible_Option.html
@@ -0,0 +1,47 @@
+<!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>
+    <h1>With hideWhenItemsNotVisible False</h1>
+    <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="./hideWhenItemsNotVisible_Option.js"></script>
+
+  </body>
+</html>
diff --git a/examples/hideWhenItemsNotVisible_Option.js b/examples/hideWhenItemsNotVisible_Option.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
+          const container = document.createElement('div');
+          const label = document.createElement('span');
+          label.innerHTML = group.content + ' ';
+          container.insertAdjacentElement('afterBegin',label);
+
+          const 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
+      const now = vis.moment()
+        .minutes(0)
+        .seconds(0)
+        .milliseconds(0);
+      const names = ["John", "Alston", "Lee", "Grant"];
+      const itemCount = 20;
+      // create a data set with groups
+      const groups = new vis.DataSet();
+      for (let g = 0; g < names.length; g++) {
+        groups.add({ id: g, content: names[g] });
+      }
+      // create a dataset with items
+      const items = new vis.DataSet();
+      for (let i = 0; i < itemCount; i++) {
+        const start = now.clone().add(Math.random() * 200, "hours");
+        const end = start + 100000000;
+        const 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 
+      */    
+      const 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 = {
+        hideWhenItemsNotVisible: false,
+      };
+
+
+      // 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 () {
+        const 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
@@ -9,6 +9,7 @@ <h1>Timeline-arrows Examples</h1>
       <li><a href="./examples/basic_example.html">Basic example</a></li>
       <li><a href="./examples/followRelationships_True.html">With followRelationships True</a></li>
       <li><a href="./examples/colorOption.html">With color option</a></li>
+      <li><a href="./examples/hideWhenItemsNotVisible_Option.html">With hideWhenItemsNotVisible option False</a></li>
       <!-- <li><a href="./examples/2timelines.html">With 2 timelines</a></li> -->
     </ul>