Browse Source

Improved hiding non visible items in Timeline

css_transitions
josdejong 11 years ago
parent
commit
b542d43d12
5 changed files with 23 additions and 15 deletions
  1. +7
    -3
      examples/timeline/05_groups.html
  2. +3
    -2
      src/timeline/component/item/ItemBox.js
  3. +3
    -2
      src/timeline/component/item/ItemPoint.js
  4. +7
    -5
      vis.js
  5. +3
    -3
      vis.min.js

+ 7
- 3
examples/timeline/05_groups.html View File

@ -19,6 +19,11 @@
<script src="../../vis.js"></script> <script src="../../vis.js"></script>
</head> </head>
<body> <body>
<p>
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items
and groups via the DataSet.
</p>
<div id="visualization"></div> <div id="visualization"></div>
<script> <script>
@ -26,7 +31,7 @@
var groupCount = 3; var groupCount = 3;
var itemCount = 20; var itemCount = 20;
// create a dataset with groups
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant']; var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet(); var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) { for (var g = 0; g < groupCount; g++) {
@ -41,8 +46,7 @@
items.add({ items.add({
id: i, id: i,
group: group, group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
content: 'item ' + i + ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start, start: start,
type: 'box' type: 'box'
}); });

+ 3
- 2
src/timeline/component/item/ItemBox.js View File

@ -189,8 +189,9 @@ ItemBox.prototype.reflow = function reflow() {
data = this.data; data = this.data;
range = this.parent && this.parent.range; range = this.parent && this.parent.range;
if (data && range) { if (data && range) {
// TODO: account for the width of the item. Take some margin
this.visible = (data.start > range.start) && (data.start < range.end);
// TODO: account for the width of the item
var interval = (range.end - range.start);
this.visible = (data.start > range.start - interval) && (data.start < range.end + interval);
} }
else { else {
this.visible = false; this.visible = false;

+ 3
- 2
src/timeline/component/item/ItemPoint.js View File

@ -159,8 +159,9 @@ ItemPoint.prototype.reflow = function reflow() {
data = this.data; data = this.data;
range = this.parent && this.parent.range; range = this.parent && this.parent.range;
if (data && range) { if (data && range) {
// TODO: account for the width of the item. Take some margin
this.visible = (data.start > range.start) && (data.start < range.end);
// TODO: account for the width of the item
var interval = (range.end - range.start);
this.visible = (data.start > range.start - interval) && (data.start < range.end);
} }
else { else {
this.visible = false; this.visible = false;

+ 7
- 5
vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version 0.1.0-SNAPSHOT * @version 0.1.0-SNAPSHOT
* @date 2013-06-17
* @date 2013-06-18
* *
* @license * @license
* Copyright (C) 2011-2013 Almende B.V, http://almende.com * Copyright (C) 2011-2013 Almende B.V, http://almende.com
@ -5427,8 +5427,9 @@ ItemBox.prototype.reflow = function reflow() {
data = this.data; data = this.data;
range = this.parent && this.parent.range; range = this.parent && this.parent.range;
if (data && range) { if (data && range) {
// TODO: account for the width of the item. Take some margin
this.visible = (data.start > range.start) && (data.start < range.end);
// TODO: account for the width of the item
var interval = (range.end - range.start);
this.visible = (data.start > range.start - interval) && (data.start < range.end + interval);
} }
else { else {
this.visible = false; this.visible = false;
@ -5712,8 +5713,9 @@ ItemPoint.prototype.reflow = function reflow() {
data = this.data; data = this.data;
range = this.parent && this.parent.range; range = this.parent && this.parent.range;
if (data && range) { if (data && range) {
// TODO: account for the width of the item. Take some margin
this.visible = (data.start > range.start) && (data.start < range.end);
// TODO: account for the width of the item
var interval = (range.end - range.start);
this.visible = (data.start > range.start - interval) && (data.start < range.end);
} }
else { else {
this.visible = false; this.visible = false;

+ 3
- 3
vis.min.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save