From 7df6fa775eca61dcbe02be5d35f310f77c743d1c Mon Sep 17 00:00:00 2001 From: Javi Domenech Date: Mon, 1 Aug 2022 13:03:57 +0200 Subject: [PATCH] Added color option. New example. --- README.md | 4 + arrow.js | 10 +- examples/basic_example.html | 1 + examples/colorOption.html | 47 +++++++++ examples/colorOption.js | 138 +++++++++++++++++++++++++ examples/followRelationships_True.html | 1 + index.html | 1 + package.json | 2 +- 8 files changed, 199 insertions(+), 5 deletions(-) create mode 100644 examples/colorOption.html create mode 100644 examples/colorOption.js diff --git a/README.md b/README.md index c42b9f6..73269e5 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ Options can be used to customize the arrows. Options are defined as a JSON objec ``` const options = { followRelationships: true, + color: "#039E00" }; const my_Arrow = new Arrow(my_timeline, arrows_array, options); @@ -70,6 +71,9 @@ const my_Arrow = new Arrow(my_timeline, arrows_array, options); **followRelationships** - defaults to false. If true, arrows can point backwards and will follow the relationships set in the data. If false, arrows will only follow the timeline direction (left to right). +**color** - defaults to "#9c0000". +Sets the arrows color. + ## Methods diff --git a/arrow.js b/arrow.js index a0a8181..ac9f4d3 100644 --- a/arrow.js +++ b/arrow.js @@ -4,8 +4,8 @@ * * Class to easily draw lines to connect items in the vis Timeline module. * - * @version 3.1.0 - * @date 2021-04-06 + * @version 4.1.0 + * @date 2022-08-01 * * @copyright (c) Javi Domenech (javdome@gmail.com) * @@ -32,6 +32,8 @@ export default class Arrow { this._followRelationships = options?.followRelationships; + this._arrowsColor = options?.color ? options.color : "#9c0000" + this._arrowHead = document.createElementNS( "http://www.w3.org/2000/svg", "marker" @@ -70,7 +72,7 @@ export default class Arrow { this._arrowHead.setAttribute("orient", "auto-start-reverse"); //Configure the path of the arrowHead (arrowHeadPath) this._arrowHeadPath.setAttribute("d", "M 0 0 L -10 -5 L -7.5 0 L -10 5 z"); - this._arrowHeadPath.style.fill = "#9c0000"; + this._arrowHeadPath.style.fill = this._arrowsColor; this._arrowHead.appendChild(this._arrowHeadPath); this._svg.appendChild(this._arrowHead); //Create paths for the started dependency array @@ -92,7 +94,7 @@ export default class Arrow { "path" ); somePath.setAttribute("d", "M 0 0"); - somePath.style.stroke = "#9c0000"; + somePath.style.stroke = this._arrowsColor; somePath.style.strokeWidth = "3px"; somePath.style.fill = "none"; somePath.style.pointerEvents = "auto"; diff --git a/examples/basic_example.html b/examples/basic_example.html index dca3709..f2953b8 100644 --- a/examples/basic_example.html +++ b/examples/basic_example.html @@ -29,6 +29,7 @@ /> +

Basic example

diff --git a/examples/colorOption.html b/examples/colorOption.html new file mode 100644 index 0000000..c587f53 --- /dev/null +++ b/examples/colorOption.html @@ -0,0 +1,47 @@ + + + + Timeline | With colorOption set to "#039E00" + + + + + + + + + + + + +

With color option

+ + + +
+

visible items:

+

+
+
+ + + + + + + diff --git a/examples/colorOption.js b/examples/colorOption.js new file mode 100644 index 0000000..a9def02 --- /dev/null +++ b/examples/colorOption.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 an arrows option Color + const arrowsOptions = { + color: "#039E00" + }; + + + // 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/examples/followRelationships_True.html b/examples/followRelationships_True.html index 67fc079..9bb39ff 100644 --- a/examples/followRelationships_True.html +++ b/examples/followRelationships_True.html @@ -29,6 +29,7 @@ /> +

With followRelationships True

diff --git a/index.html b/index.html index 9cb938c..babafa9 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@

Timeline-arrows Examples

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