diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js index eef26894..ebea8ddc 100644 --- a/src/timeline/Timeline.js +++ b/src/timeline/Timeline.js @@ -93,8 +93,8 @@ function Timeline (container, items, options) { right: null, height: '100%', width: function () { - if (me.groupSet) { - return me.groupSet.getLabelsWidth(); + if (me.itemSet) { + return me.itemSet.getLabelsWidth(); } else { return 0; @@ -236,11 +236,19 @@ function Timeline (container, items, options) { 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.groupsData = null; // DataSet @@ -250,7 +258,7 @@ function Timeline (container, items, options) { this.setOptions(options); } - // create itemset and groupset + // create itemset if (items) { this.setItems(items); } @@ -375,7 +383,7 @@ Timeline.prototype.setItems = function(items) { // set items this.itemsData = newDataSet; - (this.itemSet || this.groupSet).setItems(newDataSet); + this.itemSet.setItems(newDataSet); if (initialLoad && (this.options.start == undefined || this.options.end == undefined)) { // apply the data range as range @@ -427,60 +435,9 @@ Timeline.prototype.setItems = function(items) { * @param {vis.DataSet | Array | google.visualization.DataTable} groupSet */ Timeline.prototype.setGroups = function(groupSet) { - var me = this; 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. */ 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 */ 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(); newItem[this.itemsData.fieldId] = id; - var group = GroupSet.groupFromTarget(event); + var group = ItemSet.groupFromTarget(event); if (group) { newItem.group = group.groupId; } diff --git a/src/timeline/component/ItemSet.js b/src/timeline/component/ItemSet.js index db026d1c..f6bce132 100644 --- a/src/timeline/component/ItemSet.js +++ b/src/timeline/component/ItemSet.js @@ -19,6 +19,11 @@ function ItemSet(backgroundPanel, axisPanel, options) { this.axisPanel = axisPanel; this.itemOptions = Object.create(this.options); this.dom = {}; + this.props = { + labels: { + width: 0 + } + }; this.hammer = null; var me = this; @@ -46,7 +51,6 @@ function ItemSet(backgroundPanel, axisPanel, options) { // this.systemLoaded = false; this.visibleItems = []; // visible, ordered items 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.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 * @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. if (this.visibleItems.length > 0) { for (var i = 0; i < this.visibleItems.length; i++) { - this._checkIfVisible(this.visibleItems[i],newVisibleItems); + this._checkIfVisible(this.visibleItems[i], newVisibleItems); } } this.visibleItems = newVisibleItems; @@ -567,7 +572,7 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) { var me = this, items = this.items, itemOptions = this.itemOptions; - +console.log('onUpdate', ids) ids.forEach(function (id) { var itemData = me.itemsData.get(id), item = items[id], @@ -603,7 +608,7 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) { me.items[id] = item; if (type == 'range') { - me._checkIfVisible(item,this.visibleItems); + me._checkIfVisible(item, me.visibleItems); } }); @@ -634,6 +639,7 @@ ItemSet.prototype._onRemove = function _onRemove(ids) { count++; item.hide(); delete me.items[id]; + // remove from visible items var index = me.visibleItems.indexOf(me.item); 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: * searches for the attribute 'timeline-item' in the event target's element tree