diff --git a/dist/vis.js b/dist/vis.js index bf0ff595..2ca566e8 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -5104,7 +5104,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; @@ -5224,6 +5224,8 @@ ItemSet.prototype.setItems = function setItems(items) { ids, oldItemsData = this.itemsData; + console.log('setItems', items) + // replace the dataset if (!items) { this.itemsData = null; @@ -5253,6 +5255,8 @@ ItemSet.prototype.setItems = function setItems(items) { me.itemsData.on(event, callback, id); }); + console.log('subscribe to dataset', me.itemsData) + // draw all new items ids = this.itemsData.getIds(); this._onAdd(ids); @@ -5293,6 +5297,8 @@ ItemSet.prototype.removeItem = function removeItem (id) { * @private */ ItemSet.prototype._onUpdate = function _onUpdate(ids) { + console.log('_onUpdate', ids); + var me = this, items = this.items, itemOptions = this.itemOptions; @@ -5310,12 +5316,13 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) { if (item) { // update item if (!constructor || !(item instanceof constructor)) { - // item type has changed, hide and delete the item - item.hide(); + // item type has changed, delete the item and recreate it + me._deleteItem(item); item = null; } else { item.data = itemData; // TODO: create a method item.setData ? + item.repaint(); } } @@ -5332,12 +5339,11 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) { me.items[id] = item; if (type == 'range') { - me._checkIfVisible(item,this.visibleItems); + me._checkIfVisible(item, me.visibleItems); } }); this._order(); -// this.systemLoaded = false; this.stackDirty = true; // force re-stacking of all items next repaint this.emit('change'); }; @@ -5361,15 +5367,7 @@ ItemSet.prototype._onRemove = function _onRemove(ids) { var item = me.items[id]; if (item) { count++; - item.hide(); - delete me.items[id]; - // remove from visible items - var index = me.visibleItems.indexOf(me.item); - me.visibleItems.splice(index,1); - - // remove from selection - index = me.selection.indexOf(id); - if (index != -1) me.selection.splice(index, 1); + me._deleteItem(item); } }); @@ -5381,6 +5379,28 @@ ItemSet.prototype._onRemove = function _onRemove(ids) { } }; +/** + * Delete an item from the ItemSet: remove it from the DOM, from the map + * with items, and from the map with visible items, and from the selection + * @param {Item} item + * @private + */ +ItemSet.prototype._deleteItem = function _deleteItem(item) { + // remove from DOM + item.hide(); + + // remove from items + delete this.items[item.id]; + + // remove from visible items + var index = this.visibleItems.indexOf(item); + if (index != -1) this.visibleItems.splice(index, 1); + + // remove from selection + index = this.selection.indexOf(item.id); + if (index != -1) this.selection.splice(index, 1); +}; + /** * Order the items * @private diff --git a/src/timeline/component/ItemSet.js b/src/timeline/component/ItemSet.js index f6bce132..5f77fcdc 100644 --- a/src/timeline/component/ItemSet.js +++ b/src/timeline/component/ItemSet.js @@ -19,11 +19,6 @@ 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; @@ -51,6 +46,7 @@ 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 @@ -332,11 +328,10 @@ 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 {Item} item + * @param {itemRange | itemPoint | itemBox} item * @param {array} visibleItems * @private */ @@ -500,6 +495,8 @@ ItemSet.prototype.setItems = function setItems(items) { ids, oldItemsData = this.itemsData; + console.log('setItems', items) + // replace the dataset if (!items) { this.itemsData = null; @@ -529,6 +526,8 @@ ItemSet.prototype.setItems = function setItems(items) { me.itemsData.on(event, callback, id); }); + console.log('subscribe to dataset', me.itemsData) + // draw all new items ids = this.itemsData.getIds(); this._onAdd(ids); @@ -569,10 +568,12 @@ ItemSet.prototype.removeItem = function removeItem (id) { * @private */ ItemSet.prototype._onUpdate = function _onUpdate(ids) { + console.log('_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], @@ -586,12 +587,13 @@ console.log('onUpdate', ids) if (item) { // update item if (!constructor || !(item instanceof constructor)) { - // item type has changed, hide and delete the item - item.hide(); + // item type has changed, delete the item and recreate it + me._deleteItem(item); item = null; } else { item.data = itemData; // TODO: create a method item.setData ? + item.repaint(); } } @@ -613,7 +615,6 @@ console.log('onUpdate', ids) }); this._order(); -// this.systemLoaded = false; this.stackDirty = true; // force re-stacking of all items next repaint this.emit('change'); }; @@ -637,16 +638,7 @@ ItemSet.prototype._onRemove = function _onRemove(ids) { var item = me.items[id]; if (item) { count++; - item.hide(); - delete me.items[id]; - - // remove from visible items - var index = me.visibleItems.indexOf(me.item); - me.visibleItems.splice(index,1); - - // remove from selection - index = me.selection.indexOf(id); - if (index != -1) me.selection.splice(index, 1); + me._deleteItem(item); } }); @@ -658,6 +650,28 @@ ItemSet.prototype._onRemove = function _onRemove(ids) { } }; +/** + * Delete an item from the ItemSet: remove it from the DOM, from the map + * with items, and from the map with visible items, and from the selection + * @param {Item} item + * @private + */ +ItemSet.prototype._deleteItem = function _deleteItem(item) { + // remove from DOM + item.hide(); + + // remove from items + delete this.items[item.id]; + + // remove from visible items + var index = this.visibleItems.indexOf(item); + if (index != -1) this.visibleItems.splice(index, 1); + + // remove from selection + index = this.selection.indexOf(item.id); + if (index != -1) this.selection.splice(index, 1); +}; + /** * Order the items * @private @@ -826,14 +840,6 @@ 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