diff --git a/arrow.js b/arrow.js index e33d937..a0a8181 100644 --- 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 new file mode 100644 index 0000000..67fc079 --- /dev/null +++ b/examples/followRelationships_True.html @@ -0,0 +1,46 @@ + + + + Timeline | With followRelationships: true + + + + + + + + + + + + + + + +
+

visible items:

+

+
+
+ + + + + + + diff --git a/examples/followRelationships_True.js b/examples/followRelationships_True.js new file mode 100644 index 0000000..dac73f7 --- /dev/null +++ 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 + + ' (' + + names[group] + + ")", + 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 index e74c195..9cb938c 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,11 @@ Timeline-arrows -

Timeline-arrows

+

Timeline-arrows Examples

diff --git a/package.json b/package.json index 036593a..5d08c14 100644 --- 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": {