Browse Source

Implemented ordering for groups

css_transitions
josdejong 11 years ago
parent
commit
457fb98367
4 changed files with 92 additions and 76 deletions
  1. +13
    -7
      examples/timeline/05_groups.html
  2. +37
    -32
      src/component/groupset.js
  3. +38
    -33
      vis.js
  4. +4
    -4
      vis.min.js

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

@ -26,6 +26,13 @@
var groupCount = 3; var groupCount = 3;
var itemCount = 20; var itemCount = 20;
// create a dataset with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a dataset with items // create a dataset with items
var items = new vis.DataSet(); var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) { for (var i = 0; i < itemCount; i++) {
@ -34,19 +41,18 @@
items.add({ items.add({
id: i, id: i,
group: group, group: group,
content: 'item ' + i,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start, start: start,
type: 'box' type: 'box'
}); });
} }
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: 'Group ' + g});
}
// create visualization
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var options = {};
var options = {
groupsOrder: 'content'
};
var timeline = new vis.Timeline(container); var timeline = new vis.Timeline(container);
timeline.setOptions(options); timeline.setOptions(options);

+ 37
- 32
src/component/groupset.js View File

@ -19,7 +19,7 @@ function GroupSet(parent, depends, options) {
this.itemsData = null; // DataSet with items this.itemsData = null; // DataSet with items
this.groupsData = null; // DataSet with groups this.groupsData = null; // DataSet with groups
this.groups = []; // array with groups
this.groups = {}; // map with groups
// changes in groups are queued key/value map containing id/action // changes in groups are queued key/value map containing id/action
this.queue = {}; this.queue = {};
@ -43,6 +43,7 @@ GroupSet.prototype = new Panel();
/** /**
* Set options for the GroupSet. Existing options will be extended/overwritten. * Set options for the GroupSet. Existing options will be extended/overwritten.
* @param {Object} [options] The following options are available: * @param {Object} [options] The following options are available:
* {String | function} groupsOrder
* TODO: describe options * TODO: describe options
*/ */
GroupSet.prototype.setOptions = Component.prototype.setOptions; GroupSet.prototype.setOptions = Component.prototype.setOptions;
@ -58,9 +59,12 @@ GroupSet.prototype.setRange = function (range) {
GroupSet.prototype.setItems = function setItems(items) { GroupSet.prototype.setItems = function setItems(items) {
this.itemsData = items; this.itemsData = items;
this.groups.forEach(function (group) {
group.setItems(items);
});
for (var id in this.groups) {
if (this.groups.hasOwnProperty(id)) {
var group = this.groups[id];
group.setItems(items);
}
}
}; };
/** /**
@ -188,17 +192,7 @@ GroupSet.prototype.repaint = function repaint() {
if (ids.length) { if (ids.length) {
ids.forEach(function (id) { ids.forEach(function (id) {
var action = queue[id]; var action = queue[id];
// find group
var group = null;
var groupIndex = -1;
for (var i = 0; i < groups.length; i++) {
if (groups[i].groupId == id) {
group = groups[i];
groupIndex = i;
break;
}
}
var group = groups[id];
//noinspection FallthroughInSwitchStatementJS //noinspection FallthroughInSwitchStatementJS
switch (action) { switch (action) {
@ -208,12 +202,13 @@ GroupSet.prototype.repaint = function repaint() {
var groupOptions = Object.create(me.options); var groupOptions = Object.create(me.options);
group = new Group(me, id, groupOptions); group = new Group(me, id, groupOptions);
group.setItems(me.itemsData); // attach items data group.setItems(me.itemsData); // attach items data
groups.push(group);
groups[id] = group;
me.controller.add(group); me.controller.add(group);
} }
// TODO: update group data // TODO: update group data
group.data = groupsData.get(id);
delete queue[id]; delete queue[id];
break; break;
@ -221,7 +216,7 @@ GroupSet.prototype.repaint = function repaint() {
case 'remove': case 'remove':
if (group) { if (group) {
group.setItems(); // detach items data group.setItems(); // detach items data
groups.splice(groupIndex, 1);
delete groups[id];
me.controller.remove(group); me.controller.remove(group);
} }
@ -239,19 +234,25 @@ GroupSet.prototype.repaint = function repaint() {
//this.depends = this.groups; // TODO: gives a circular reference through the parent //this.depends = this.groups; // TODO: gives a circular reference through the parent
// TODO: apply dependencies of the groupset // TODO: apply dependencies of the groupset
this.groups.forEach(function (group, index) {
var prevGroup = me.groups[index - 1],
top = 0;
if (prevGroup) {
top = function () {
// TODO: top must reckon with options.maxHeight
return prevGroup.top + prevGroup.height;
}
}
group.setOptions({
top: top
});
// update the top positions of the groups in the correct order
var orderedGroups = this.groupsData.getIds({
order: this.options.groupsOrder
}); });
for (var i = 0; i < orderedGroups.length; i++) {
(function (group, prevGroup) {
var top = 0;
if (prevGroup) {
top = function () {
// TODO: top must reckon with options.maxHeight
return prevGroup.top + prevGroup.height;
}
}
group.setOptions({
top: top
});
})(groups[orderedGroups[i]], groups[orderedGroups[i - 1]]);
}
changed++; changed++;
} }
@ -290,9 +291,13 @@ GroupSet.prototype.reflow = function reflow() {
else { else {
// height is not specified, calculate the sum of the height of all groups // height is not specified, calculate the sum of the height of all groups
height = 0; height = 0;
this.groups.forEach(function (group) {
height += group.height;
});
for (var id in this.groups) {
if (this.groups.hasOwnProperty(id)) {
var group = this.groups[id];
height += group.height;
}
}
} }
if (maxHeight != null) { if (maxHeight != null) {
height = Math.min(height, maxHeight); height = Math.min(height, maxHeight);

+ 38
- 33
vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version 0.0.8 * @version 0.0.8
* @date 2013-05-24
* @date 2013-05-28
* *
* @license * @license
* Copyright (C) 2011-2013 Almende B.V, http://almende.com * Copyright (C) 2011-2013 Almende B.V, http://almende.com
@ -6181,7 +6181,7 @@ function GroupSet(parent, depends, options) {
this.itemsData = null; // DataSet with items this.itemsData = null; // DataSet with items
this.groupsData = null; // DataSet with groups this.groupsData = null; // DataSet with groups
this.groups = []; // array with groups
this.groups = {}; // map with groups
// changes in groups are queued key/value map containing id/action // changes in groups are queued key/value map containing id/action
this.queue = {}; this.queue = {};
@ -6205,6 +6205,7 @@ GroupSet.prototype = new Panel();
/** /**
* Set options for the GroupSet. Existing options will be extended/overwritten. * Set options for the GroupSet. Existing options will be extended/overwritten.
* @param {Object} [options] The following options are available: * @param {Object} [options] The following options are available:
* {String | function} groupsOrder
* TODO: describe options * TODO: describe options
*/ */
GroupSet.prototype.setOptions = Component.prototype.setOptions; GroupSet.prototype.setOptions = Component.prototype.setOptions;
@ -6220,9 +6221,12 @@ GroupSet.prototype.setRange = function (range) {
GroupSet.prototype.setItems = function setItems(items) { GroupSet.prototype.setItems = function setItems(items) {
this.itemsData = items; this.itemsData = items;
this.groups.forEach(function (group) {
group.setItems(items);
});
for (var id in this.groups) {
if (this.groups.hasOwnProperty(id)) {
var group = this.groups[id];
group.setItems(items);
}
}
}; };
/** /**
@ -6350,17 +6354,7 @@ GroupSet.prototype.repaint = function repaint() {
if (ids.length) { if (ids.length) {
ids.forEach(function (id) { ids.forEach(function (id) {
var action = queue[id]; var action = queue[id];
// find group
var group = null;
var groupIndex = -1;
for (var i = 0; i < groups.length; i++) {
if (groups[i].groupId == id) {
group = groups[i];
groupIndex = i;
break;
}
}
var group = groups[id];
//noinspection FallthroughInSwitchStatementJS //noinspection FallthroughInSwitchStatementJS
switch (action) { switch (action) {
@ -6370,12 +6364,13 @@ GroupSet.prototype.repaint = function repaint() {
var groupOptions = Object.create(me.options); var groupOptions = Object.create(me.options);
group = new Group(me, id, groupOptions); group = new Group(me, id, groupOptions);
group.setItems(me.itemsData); // attach items data group.setItems(me.itemsData); // attach items data
groups.push(group);
groups[id] = group;
me.controller.add(group); me.controller.add(group);
} }
// TODO: update group data // TODO: update group data
group.data = groupsData.get(id);
delete queue[id]; delete queue[id];
break; break;
@ -6383,7 +6378,7 @@ GroupSet.prototype.repaint = function repaint() {
case 'remove': case 'remove':
if (group) { if (group) {
group.setItems(); // detach items data group.setItems(); // detach items data
groups.splice(groupIndex, 1);
delete groups[id];
me.controller.remove(group); me.controller.remove(group);
} }
@ -6401,19 +6396,25 @@ GroupSet.prototype.repaint = function repaint() {
//this.depends = this.groups; // TODO: gives a circular reference through the parent //this.depends = this.groups; // TODO: gives a circular reference through the parent
// TODO: apply dependencies of the groupset // TODO: apply dependencies of the groupset
this.groups.forEach(function (group, index) {
var prevGroup = me.groups[index - 1],
top = 0;
if (prevGroup) {
top = function () {
// TODO: top must reckon with options.maxHeight
return prevGroup.top + prevGroup.height;
}
}
group.setOptions({
top: top
});
// update the top positions of the groups in the correct order
var orderedGroups = this.groupsData.getIds({
order: this.options.groupsOrder
}); });
for (var i = 0; i < orderedGroups.length; i++) {
(function (group, prevGroup) {
var top = 0;
if (prevGroup) {
top = function () {
// TODO: top must reckon with options.maxHeight
return prevGroup.top + prevGroup.height;
}
}
group.setOptions({
top: top
});
})(groups[orderedGroups[i]], groups[orderedGroups[i - 1]]);
}
changed++; changed++;
} }
@ -6452,9 +6453,13 @@ GroupSet.prototype.reflow = function reflow() {
else { else {
// height is not specified, calculate the sum of the height of all groups // height is not specified, calculate the sum of the height of all groups
height = 0; height = 0;
this.groups.forEach(function (group) {
height += group.height;
});
for (var id in this.groups) {
if (this.groups.hasOwnProperty(id)) {
var group = this.groups[id];
height += group.height;
}
}
} }
if (maxHeight != null) { if (maxHeight != null) {
height = Math.min(height, maxHeight); height = Math.min(height, maxHeight);

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


Loading…
Cancel
Save