Browse Source

Removing GroupSet references from Timeline

css_transitions
jos 10 years ago
parent
commit
7470c2522f
2 changed files with 42 additions and 75 deletions
  1. +21
    -68
      src/timeline/Timeline.js
  2. +21
    -7
      src/timeline/component/ItemSet.js

+ 21
- 68
src/timeline/Timeline.js View File

@ -93,8 +93,8 @@ function Timeline (container, items, options) {
right: null, right: null,
height: '100%', height: '100%',
width: function () { width: function () {
if (me.groupSet) {
return me.groupSet.getLabelsWidth();
if (me.itemSet) {
return me.itemSet.getLabelsWidth();
} }
else { else {
return 0; return 0;
@ -236,11 +236,19 @@ function Timeline (container, items, options) {
me.emit('timechanged', time); me.emit('timechanged', time);
}); });
this.itemSet = null;
this.groupSet = null;
// create groupset
this.setGroups(null);
// itemset containing items and groups
var itemOptions = util.extend(Object.create(this.options), {
left: null,
right: null,
top: null,
bottom: null,
width: null,
height: null
});
this.itemSet = new ItemSet(this.backgroundPanel, this.axisPanel, itemOptions);
this.itemSet.setRange(this.range);
this.itemSet.on('change', me.rootPanel.repaint.bind(me.rootPanel));
this.contentPanel.appendChild(this.itemSet);
this.itemsData = null; // DataSet this.itemsData = null; // DataSet
this.groupsData = null; // DataSet this.groupsData = null; // DataSet
@ -250,7 +258,7 @@ function Timeline (container, items, options) {
this.setOptions(options); this.setOptions(options);
} }
// create itemset and groupset
// create itemset
if (items) { if (items) {
this.setItems(items); this.setItems(items);
} }
@ -375,7 +383,7 @@ Timeline.prototype.setItems = function(items) {
// set items // set items
this.itemsData = newDataSet; this.itemsData = newDataSet;
(this.itemSet || this.groupSet).setItems(newDataSet);
this.itemSet.setItems(newDataSet);
if (initialLoad && (this.options.start == undefined || this.options.end == undefined)) { if (initialLoad && (this.options.start == undefined || this.options.end == undefined)) {
// apply the data range as range // apply the data range as range
@ -427,60 +435,9 @@ Timeline.prototype.setItems = function(items) {
* @param {vis.DataSet | Array | google.visualization.DataTable} groupSet * @param {vis.DataSet | Array | google.visualization.DataTable} groupSet
*/ */
Timeline.prototype.setGroups = function(groupSet) { Timeline.prototype.setGroups = function(groupSet) {
var me = this;
this.groupsData = groupSet; this.groupsData = groupSet;
// create options for the itemset or groupset
var options = util.extend(Object.create(this.options), {
top: null,
bottom: null,
right: null,
left: null,
width: null,
height: null
});
if (this.groupsData) {
// Create a GroupSet
// remove itemset if existing
if (this.itemSet) {
this.itemSet.hide(); // TODO: not so nice having to hide here
this.contentPanel.removeChild(this.itemSet);
this.itemSet.setItems(); // disconnect from itemset
this.itemSet = null;
}
// create new GroupSet when needed
if (!this.groupSet) {
this.groupSet = new GroupSet(this.contentPanel, this.sideContentPanel, this.backgroundPanel, this.axisPanel, options);
this.groupSet.on('change', this.rootPanel.repaint.bind(this.rootPanel));
this.groupSet.setRange(this.range);
this.groupSet.setItems(this.itemsData);
this.groupSet.setGroups(this.groupsData);
this.contentPanel.appendChild(this.groupSet);
}
else {
this.groupSet.setGroups(this.groupsData);
}
}
else {
// ItemSet
if (this.groupSet) {
this.groupSet.hide(); // TODO: not so nice having to hide here
//this.groupSet.setGroups(); // disconnect from groupset
this.groupSet.setItems(); // disconnect from itemset
this.contentPanel.removeChild(this.groupSet);
this.groupSet = null;
}
// create new items
this.itemSet = new ItemSet(this.backgroundPanel, this.axisPanel, options);
this.itemSet.setRange(this.range);
this.itemSet.setItems(this.itemsData);
this.itemSet.on('change', me.rootPanel.repaint.bind(me.rootPanel));
this.contentPanel.appendChild(this.itemSet);
}
this.itemSet.setGroups(groupSet);
}; };
/** /**
@ -530,9 +487,7 @@ Timeline.prototype.getItemRange = function getItemRange() {
* unselected. * unselected.
*/ */
Timeline.prototype.setSelection = function setSelection (ids) { Timeline.prototype.setSelection = function setSelection (ids) {
var itemOrGroupSet = (this.itemSet || this.groupSet);
if (itemOrGroupSet) itemOrGroupSet.setSelection(ids);
this.itemSet.setSelection(ids);
}; };
/** /**
@ -540,9 +495,7 @@ Timeline.prototype.setSelection = function setSelection (ids) {
* @return {Array} ids The ids of the selected items * @return {Array} ids The ids of the selected items
*/ */
Timeline.prototype.getSelection = function getSelection() { Timeline.prototype.getSelection = function getSelection() {
var itemOrGroupSet = (this.itemSet || this.groupSet);
return itemOrGroupSet ? itemOrGroupSet.getSelection() : [];
return this.itemSet.getSelection();
}; };
/** /**
@ -649,7 +602,7 @@ Timeline.prototype._onAddItem = function (event) {
var id = util.randomUUID(); var id = util.randomUUID();
newItem[this.itemsData.fieldId] = id; newItem[this.itemsData.fieldId] = id;
var group = GroupSet.groupFromTarget(event);
var group = ItemSet.groupFromTarget(event);
if (group) { if (group) {
newItem.group = group.groupId; newItem.group = group.groupId;
} }

+ 21
- 7
src/timeline/component/ItemSet.js View File

@ -19,6 +19,11 @@ function ItemSet(backgroundPanel, axisPanel, options) {
this.axisPanel = axisPanel; this.axisPanel = axisPanel;
this.itemOptions = Object.create(this.options); this.itemOptions = Object.create(this.options);
this.dom = {}; this.dom = {};
this.props = {
labels: {
width: 0
}
};
this.hammer = null; this.hammer = null;
var me = this; var me = this;
@ -46,7 +51,6 @@ function ItemSet(backgroundPanel, axisPanel, options) {
// 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.stack = new Stack(Object.create(this.options)); this.stack = new Stack(Object.create(this.options));
this.stackDirty = true; // if true, all items will be restacked on next repaint this.stackDirty = true; // if true, all items will be restacked on next repaint
@ -328,10 +332,11 @@ ItemSet.prototype._checkIfInvisible = function _checkIfInvisible(item) {
/** /**
* this function is very similar to the _checkIfInvisible() but it does not return booleans, hides the item if it should not be seen and always adds to the visibleItems.
* this one is for brute forcing and hiding.
* this function is very similar to the _checkIfInvisible() but it does not
* return booleans, hides the item if it should not be seen and always adds to
* the visibleItems. this one is for brute forcing and hiding.
* *
* @param {itemRange | itemPoint | itemBox} item
* @param {Item} item
* @param {array} visibleItems * @param {array} visibleItems
* @private * @private
*/ */
@ -375,7 +380,7 @@ ItemSet.prototype.repaint = function repaint() {
// 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++) {
this._checkIfVisible(this.visibleItems[i],newVisibleItems);
this._checkIfVisible(this.visibleItems[i], newVisibleItems);
} }
} }
this.visibleItems = newVisibleItems; this.visibleItems = newVisibleItems;
@ -567,7 +572,7 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
var me = this, var me = this,
items = this.items, items = this.items,
itemOptions = this.itemOptions; itemOptions = this.itemOptions;
console.log('onUpdate', ids)
ids.forEach(function (id) { ids.forEach(function (id) {
var itemData = me.itemsData.get(id), var itemData = me.itemsData.get(id),
item = items[id], item = items[id],
@ -603,7 +608,7 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
me.items[id] = item; me.items[id] = item;
if (type == 'range') { if (type == 'range') {
me._checkIfVisible(item,this.visibleItems);
me._checkIfVisible(item, me.visibleItems);
} }
}); });
@ -634,6 +639,7 @@ ItemSet.prototype._onRemove = function _onRemove(ids) {
count++; count++;
item.hide(); item.hide();
delete me.items[id]; delete me.items[id];
// remove from visible items // remove from visible items
var index = me.visibleItems.indexOf(me.item); var index = me.visibleItems.indexOf(me.item);
me.visibleItems.splice(index,1); me.visibleItems.splice(index,1);
@ -820,6 +826,14 @@ ItemSet.prototype._onDragEnd = function (event) {
} }
}; };
/**
* Get the width of the group labels
* @return {Number} width
*/
ItemSet.prototype.getLabelsWidth = function getLabelsWidth() {
return this.props.labels.width;
};
/** /**
* Find an item from an event target: * Find an item from an event target:
* searches for the attribute 'timeline-item' in the event target's element tree * searches for the attribute 'timeline-item' in the event target's element tree

Loading…
Cancel
Save