jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

moved brute force calc in update. restored examples

css_transitions
Alex de Mulder 10 years ago
parent
e1719d9996
commit
33353d30e2
5 changed files with 101 additions and 222 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +45
    -98
      dist/vis.js
  2. +10
    -10
      dist/vis.min.js
  3. +3
    -18
      examples/timeline/01_basic.html
  4. +1
    -1
      examples/timeline/03_much_data.html
  5. +42
    -95
      src/timeline/component/ItemSet.js

+ 45
- 98
dist/vis.js View File

@ -4,8 +4,8 @@
* *
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version @@version
* @date @@date
* @version 0.7.5-SNAPSHOT
* @date 2014-04-29
* *
* @license * @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -4772,7 +4772,7 @@ function ItemSet(backgroundPanel, axisPanel, options) {
byStart: [], byStart: [],
byEnd: [] byEnd: []
}; };
this.systemLoaded = false;
// this.systemLoaded = false;
this.visibleItems = []; // visible, ordered items this.visibleItems = []; // visible, ordered items
this.selection = []; // list with the ids of all selected nodes this.selection = []; // list with the ids of all selected nodes
this.queue = {}; // queue with id/actions: 'add', 'update', 'delete' this.queue = {}; // queue with id/actions: 'add', 'update', 'delete'
@ -4999,7 +4999,7 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
if (high == 0) {guess = -1;} if (high == 0) {guess = -1;}
else if (high == 1) { else if (high == 1) {
if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end + interval)) {
if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end)) {
guess = 0; guess = 0;
} }
else { else {
@ -5009,7 +5009,7 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
else { else {
high -= 1; high -= 1;
while (found == false) { while (found == false) {
if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end + interval)) {
if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end)) {
found = true; found = true;
} }
else { else {
@ -5034,6 +5034,33 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
return guess; return guess;
} }
ItemSet.prototype._checkIfInvisible = function _checkIfInvisible(item) {
if (item.isVisible(this.range)) {
if (!item.displayed) item.show();
item.repositionX();
if (this.visibleItems.indexOf(item) == -1) {
this.visibleItems.push(item);
}
return false;
}
else {
return true;
}
};
ItemSet.prototype._checkIfVisible = function _checkIfVisible(item, visibleItems) {
if (item.isVisible(this.range)) {
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
visibleItems.push(item);
}
else {
if (item.displayed) item.hide();
}
};
/** /**
* Repaint the component * Repaint the component
* @return {boolean} Returns true if the component is resized * @return {boolean} Returns true if the component is resized
@ -5056,30 +5083,20 @@ ItemSet.prototype.repaint = function repaint() {
var newVisibleItems = []; var newVisibleItems = [];
var item; var item;
var range = this.range;
var orderedItems = this.orderedItems; var orderedItems = this.orderedItems;
// first check if the items that were in view previously are still in view. // first check if the items that were in view previously are still in view.
// this handles the case for the ItemRange that is both before and after the current one. // this handles the case for the ItemRange that is both before and after the current one.
if (this.visibleItems.length > 0) { if (this.visibleItems.length > 0) {
for (var i = 0; i < this.visibleItems.length; i++) { for (var i = 0; i < this.visibleItems.length; i++) {
item = this.visibleItems[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
newVisibleItems.push(item);
}
else {
if (item.displayed) item.hide();
}
this._checkIfVisible(this.visibleItems[i],newVisibleItems);
} }
} }
this.visibleItems = newVisibleItems;
// If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime) // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
if (newVisibleItems.length == 0) {var initialPosByStart = this._binarySearch(false);}
else {var initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);}
if (this.visibleItems.length == 0) {var initialPosByStart = this._binarySearch(false);}
else {var initialPosByStart = orderedItems.byStart.indexOf(this.visibleItems[0]);}
// use visible search to find a visible ItemRange (only based on endTime) // use visible search to find a visible ItemRange (only based on endTime)
var initialPosByEnd = this._binarySearch(true); var initialPosByEnd = this._binarySearch(true);
@ -5087,96 +5104,23 @@ ItemSet.prototype.repaint = function repaint() {
// if we found a initial ID to use, trace it up and down until we meet an invisible item. // if we found a initial ID to use, trace it up and down until we meet an invisible item.
if (initialPosByStart != -1) { if (initialPosByStart != -1) {
for (var i = initialPosByStart; i >= 0; i--) { for (var i = initialPosByStart; i >= 0; i--) {
item = orderedItems.byStart[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
item.repositionX();
if (newVisibleItems.indexOf(item) == -1) {
newVisibleItems.push(item);
}
}
else {
break;
}
if (this._checkIfInvisible(orderedItems.byStart[i])) {break;}
} }
// and up
for (var i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) { for (var i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
item = orderedItems.byStart[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
item.repositionX();
if (newVisibleItems.indexOf(item) == -1) {
newVisibleItems.push(item);
}
}
else {
break;
}
if (this._checkIfInvisible(orderedItems.byStart[i])) {break;}
} }
} }
// if we found a initial ID to use, trace it up and down until we meet an invisible item. // if we found a initial ID to use, trace it up and down until we meet an invisible item.
if (initialPosByEnd != -1) { if (initialPosByEnd != -1) {
for (var i = initialPosByEnd; i >= 0; i--) { for (var i = initialPosByEnd; i >= 0; i--) {
item = orderedItems.byEnd[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
if (newVisibleItems.indexOf(item) == -1) {
newVisibleItems.push(item);
}
}
else {
break;
}
if (this._checkIfInvisible(orderedItems.byEnd[i])) {break;}
} }
// and up
for (var i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) { for (var i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
item = orderedItems.byEnd[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
if (newVisibleItems.indexOf(item) == -1) {
newVisibleItems.push(item);
}
}
else {
break;
}
}
}
if (!this.systemLoaded) {
// initial setup is brute force all the ranged items;
// TODO: implement this in the onUpdate function to only load the new items.
for (var i = 0; i < orderedItems.byEnd.length; i++) {
item = orderedItems.byEnd[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
newVisibleItems.push(item);
}
else {
if (item.displayed) item.hide();
}
if (this._checkIfInvisible(orderedItems.byEnd[i])) {break;}
} }
this.systemLoaded = true;
} }
this.visibleItems = newVisibleItems;
// reposition visible items vertically // reposition visible items vertically
//this.stack.order(this.visibleItems); // TODO: improve ordering //this.stack.order(this.visibleItems); // TODO: improve ordering
var force = this.stackDirty || zoomed; // force re-stacking of all items if true var force = this.stackDirty || zoomed; // force re-stacking of all items if true
@ -5372,10 +5316,13 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
} }
me.items[id] = item; me.items[id] = item;
if (type == 'range') {
me._checkIfVisible(item,this.visibleItems);
}
}); });
this._order(); this._order();
this.systemLoaded = false;
// this.systemLoaded = false;
this.stackDirty = true; // force re-stacking of all items next repaint this.stackDirty = true; // force re-stacking of all items next repaint
this.emit('change'); this.emit('change');
}; };
@ -7816,7 +7763,7 @@ Timeline.prototype._onAddItem = function (event) {
} }
else { else {
// add item // add item
var xAbs = vis.util.getAbsoluteLeft(this.rootPanel.frame);
var xAbs = vis.util.getAbsoluteLeft(this.contentPanel.frame);
var x = event.gesture.center.pageX - xAbs; var x = event.gesture.center.pageX - xAbs;
var newItem = { var newItem = {
start: this.timeAxis.snap(this._toTime(x)), start: this.timeAxis.snap(this._toTime(x)),

+ 10
- 10
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 3
- 18
examples/timeline/01_basic.html View File

@ -21,26 +21,11 @@
{id: 1, content: 'item 1', start: '2014-04-20'}, {id: 1, content: 'item 1', start: '2014-04-20'},
{id: 2, content: 'item 2', start: '2014-04-14'}, {id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'}, {id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'}, {id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27'},
{id: 7, content: 'item 3', start: '2014-06-18'},
{id: 8, content: 'item 5', start: '2014-06-25'},
{id: 9, content: 'item 6', start: '2014-06-27'},
{id: 10, content: 'item 3', start: '2014-06-18'},
{id: 11, content: 'item 5', start: '2014-06-25'},
{id: 12, content: 'item 6', start: '2014-01-27'},
{id: 13, content: 'item 3', start: '2014-01-18'},
{id: 14, content: 'item 5', start: '2014-01-25'},
{id: 15, content: 'item 6', start: '2014-02-27'},
{id: 16, content: 'item 3', start: '2014-02-18'},
{id: 17, content: 'item 5', start: '2014-02-25'},
{id: 18, content: 'item 6', start: '2014-09-27'},
{id: 24, content: 'item 4', start: '2014-05-16', end: '2015-06-19'}
{id: 6, content: 'item 6', start: '2014-04-27'}
]; ];
var options = {
start: '2014-02-10',
end: '2014-05-10'
};
var options = {};
var timeline = new vis.Timeline(container, items, options); var timeline = new vis.Timeline(container, items, options);
</script> </script>
</body> </body>

+ 1
- 1
examples/timeline/03_much_data.html View File

@ -22,7 +22,7 @@
</h1> </h1>
<p> <p>
<label for="count">Number of items</label> <label for="count">Number of items</label>
<input id="count" value="100">
<input id="count" value="10000">
<input id="draw" type="button" value="draw"> <input id="draw" type="button" value="draw">
</p> </p>
<div id="visualization"></div> <div id="visualization"></div>

+ 42
- 95
src/timeline/component/ItemSet.js View File

@ -43,7 +43,7 @@ function ItemSet(backgroundPanel, axisPanel, options) {
byStart: [], byStart: [],
byEnd: [] byEnd: []
}; };
this.systemLoaded = false;
// this.systemLoaded = false;
this.visibleItems = []; // visible, ordered items this.visibleItems = []; // visible, ordered items
this.selection = []; // list with the ids of all selected nodes this.selection = []; // list with the ids of all selected nodes
this.queue = {}; // queue with id/actions: 'add', 'update', 'delete' this.queue = {}; // queue with id/actions: 'add', 'update', 'delete'
@ -270,7 +270,7 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
if (high == 0) {guess = -1;} if (high == 0) {guess = -1;}
else if (high == 1) { else if (high == 1) {
if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end + interval)) {
if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end)) {
guess = 0; guess = 0;
} }
else { else {
@ -280,7 +280,7 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
else { else {
high -= 1; high -= 1;
while (found == false) { while (found == false) {
if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end + interval)) {
if ((array[guess].data[byTime] > this.range.start - interval) && (array[guess].data[byTime] < this.range.end)) {
found = true; found = true;
} }
else { else {
@ -305,6 +305,33 @@ ItemSet.prototype._binarySearch = function _binarySearch(byEnd) {
return guess; return guess;
} }
ItemSet.prototype._checkIfInvisible = function _checkIfInvisible(item) {
if (item.isVisible(this.range)) {
if (!item.displayed) item.show();
item.repositionX();
if (this.visibleItems.indexOf(item) == -1) {
this.visibleItems.push(item);
}
return false;
}
else {
return true;
}
};
ItemSet.prototype._checkIfVisible = function _checkIfVisible(item, visibleItems) {
if (item.isVisible(this.range)) {
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
visibleItems.push(item);
}
else {
if (item.displayed) item.hide();
}
};
/** /**
* Repaint the component * Repaint the component
* @return {boolean} Returns true if the component is resized * @return {boolean} Returns true if the component is resized
@ -327,30 +354,20 @@ ItemSet.prototype.repaint = function repaint() {
var newVisibleItems = []; var newVisibleItems = [];
var item; var item;
var range = this.range;
var orderedItems = this.orderedItems; var orderedItems = this.orderedItems;
// first check if the items that were in view previously are still in view. // first check if the items that were in view previously are still in view.
// this handles the case for the ItemRange that is both before and after the current one. // this handles the case for the ItemRange that is both before and after the current one.
if (this.visibleItems.length > 0) { if (this.visibleItems.length > 0) {
for (var i = 0; i < this.visibleItems.length; i++) { for (var i = 0; i < this.visibleItems.length; i++) {
item = this.visibleItems[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
newVisibleItems.push(item);
}
else {
if (item.displayed) item.hide();
}
this._checkIfVisible(this.visibleItems[i],newVisibleItems);
} }
} }
this.visibleItems = newVisibleItems;
// If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime) // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
if (newVisibleItems.length == 0) {var initialPosByStart = this._binarySearch(false);}
else {var initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);}
if (this.visibleItems.length == 0) {var initialPosByStart = this._binarySearch(false);}
else {var initialPosByStart = orderedItems.byStart.indexOf(this.visibleItems[0]);}
// use visible search to find a visible ItemRange (only based on endTime) // use visible search to find a visible ItemRange (only based on endTime)
var initialPosByEnd = this._binarySearch(true); var initialPosByEnd = this._binarySearch(true);
@ -358,96 +375,23 @@ ItemSet.prototype.repaint = function repaint() {
// if we found a initial ID to use, trace it up and down until we meet an invisible item. // if we found a initial ID to use, trace it up and down until we meet an invisible item.
if (initialPosByStart != -1) { if (initialPosByStart != -1) {
for (var i = initialPosByStart; i >= 0; i--) { for (var i = initialPosByStart; i >= 0; i--) {
item = orderedItems.byStart[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
item.repositionX();
if (newVisibleItems.indexOf(item) == -1) {
newVisibleItems.push(item);
}
}
else {
break;
}
if (this._checkIfInvisible(orderedItems.byStart[i])) {break;}
} }
// and up
for (var i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) { for (var i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
item = orderedItems.byStart[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
item.repositionX();
if (newVisibleItems.indexOf(item) == -1) {
newVisibleItems.push(item);
}
}
else {
break;
}
if (this._checkIfInvisible(orderedItems.byStart[i])) {break;}
} }
} }
// if we found a initial ID to use, trace it up and down until we meet an invisible item. // if we found a initial ID to use, trace it up and down until we meet an invisible item.
if (initialPosByEnd != -1) { if (initialPosByEnd != -1) {
for (var i = initialPosByEnd; i >= 0; i--) { for (var i = initialPosByEnd; i >= 0; i--) {
item = orderedItems.byEnd[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
if (newVisibleItems.indexOf(item) == -1) {
newVisibleItems.push(item);
}
}
else {
break;
}
if (this._checkIfInvisible(orderedItems.byEnd[i])) {break;}
} }
// and up
for (var i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) { for (var i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
item = orderedItems.byEnd[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
if (newVisibleItems.indexOf(item) == -1) {
newVisibleItems.push(item);
}
}
else {
break;
}
}
}
if (!this.systemLoaded) {
// initial setup is brute force all the ranged items;
// TODO: implement this in the onUpdate function to only load the new items.
for (var i = 0; i < orderedItems.byEnd.length; i++) {
item = orderedItems.byEnd[i];
if (item.isVisible(range)) {
if (!item.displayed) item.show();
// reposition item horizontally
item.repositionX();
newVisibleItems.push(item);
}
else {
if (item.displayed) item.hide();
}
if (this._checkIfInvisible(orderedItems.byEnd[i])) {break;}
} }
this.systemLoaded = true;
} }
this.visibleItems = newVisibleItems;
// reposition visible items vertically // reposition visible items vertically
//this.stack.order(this.visibleItems); // TODO: improve ordering //this.stack.order(this.visibleItems); // TODO: improve ordering
var force = this.stackDirty || zoomed; // force re-stacking of all items if true var force = this.stackDirty || zoomed; // force re-stacking of all items if true
@ -643,10 +587,13 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
} }
me.items[id] = item; me.items[id] = item;
if (type == 'range') {
me._checkIfVisible(item,this.visibleItems);
}
}); });
this._order(); this._order();
this.systemLoaded = false;
// this.systemLoaded = false;
this.stackDirty = true; // force re-stacking of all items next repaint this.stackDirty = true; // force re-stacking of all items next repaint
this.emit('change'); this.emit('change');
}; };

Write Preview
Loading…
Cancel
Save