Improved hiding non visible items in Timeline

11 years ago · b542d43d12
--- a/examples/timeline/05_groups.html
+++ b/examples/timeline/05_groups.html
@ -19,6 +19,11 @@
    <script src="../../vis.js"></script>
 </head>
 <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>

 <script>
@ -26,7 +31,7 @@
    var groupCount = 3;
    var itemCount = 20;

    // create a dataset with groups
    // create a data set with groups
    var names = ['John', 'Alston', 'Lee', 'Grant'];
    var groups = new vis.DataSet();
    for (var g = 0; g < groupCount; g++) {
@ -41,8 +46,7 @@
        items.add({
            id: i,
            group: group,
            content: 'item ' + i +
                    ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
            content: 'item ' + i + ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
            start: start,
            type: 'box'
        });
--- a/src/timeline/component/item/ItemBox.js
+++ b/src/timeline/component/item/ItemBox.js
@ -189,8 +189,9 @@ ItemBox.prototype.reflow = function reflow() {
    data = this.data;
    range = this.parent && this.parent.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 {
        this.visible = false;
--- a/src/timeline/component/item/ItemPoint.js
+++ b/src/timeline/component/item/ItemPoint.js
@ -159,8 +159,9 @@ ItemPoint.prototype.reflow = function reflow() {
    data = this.data;
    range = this.parent && this.parent.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 {
        this.visible = false;
--- a/vis.js
+++ b/vis.js
@ -5,7 +5,7 @@
 * A dynamic, browser-based visualization library.
 *
 * @version 0.1.0-SNAPSHOT
 * @date    2013-06-17
 * @date    2013-06-18
 *
 * @license
 * Copyright (C) 2011-2013 Almende B.V, http://almende.com
@ -5427,8 +5427,9 @@ ItemBox.prototype.reflow = function reflow() {
    data = this.data;
    range = this.parent && this.parent.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 {
        this.visible = false;
@ -5712,8 +5713,9 @@ ItemPoint.prototype.reflow = function reflow() {
    data = this.data;
    range = this.parent && this.parent.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 {
        this.visible = false;
--- a/vis.min.js
+++ b/vis.min.js