From bc0c4159c835d9c4c61e69def3e75d7c50a0cf4f Mon Sep 17 00:00:00 2001 From: jos Date: Tue, 22 Apr 2014 15:35:29 +0200 Subject: [PATCH] Removed queuing mechanism from GroupSet --- src/timeline/component/GroupSet.js | 151 ++++++++++-------------- src/timeline/component/css/groupset.css | 3 + src/timeline/component/css/item.css | 10 +- 3 files changed, 69 insertions(+), 95 deletions(-) diff --git a/src/timeline/component/GroupSet.js b/src/timeline/component/GroupSet.js index f57a7e23..c3b612a9 100644 --- a/src/timeline/component/GroupSet.js +++ b/src/timeline/component/GroupSet.js @@ -36,9 +36,6 @@ function GroupSet(contentPanel, labelPanel, backgroundPanel, axisPanel, options) // TODO: implement right orientation of the labels (left/right) - // changes in groups are queued key/value map containing id/action - this.queue = {}; - var me = this; this.listeners = { 'add': function (event, params) { @@ -244,83 +241,14 @@ GroupSet.prototype.getSelection = function getSelection() { * @return {boolean} Returns true if the component was resized since previous repaint */ GroupSet.prototype.repaint = function repaint() { - var i, id, group, label, - update = util.updateProperty, + var i, id, group, asSize = util.option.asSize, asString = util.option.asString, options = this.options, orientation = this.getOption('orientation'), frame = this.frame, resized = false, - me = this, - queue = this.queue, - groups = this.groups, - groupsData = this.groupsData; - - this.queue = {}; // clear old queue, we have a copy here - - // show/hide added/changed/removed groups - var ids = Object.keys(queue); - if (ids.length) { - ids.forEach(function (id) { - var action = queue[id]; - var group = groups[id]; - - //noinspection FallthroughInSwitchStatementJS - switch (action) { - case 'add': - case 'update': - if (!group) { - var groupOptions = Object.create(me.options); - util.extend(groupOptions, { - height: null - }); - - // TODO: do not recreate the group with every update - - group = new Group(me, me.labelSet, me.backgroundPanel, me.axisPanel, id, groupOptions); - group.on('change', me.emit.bind(me, 'change')); // propagate change event - group.setRange(me.range); - group.setItems(me.itemsData); // attach items data - groups[id] = group; - group.parent = me; - - // Note: it is important to add the binding after group.setItems - // is executed, because that will start an infinite loop - // as this call will already trigger a repaint - } - - // update group data - group.setData(groupsData.get(id)); - break; - - case 'remove': - if (group) { - group.setItems(); // detach items data - group.hide(); // FIXME: for some reason when doing setItems after hide, setItems again makes the label visible - delete groups[id]; - } - - break; - - default: - console.log('Error: unknown action "' + action + '"'); - } - }); - - // reorder the groups - this.groupIds = this.groupsData.getIds({ - order: this.options.groupOrder - }); - - // hide the groups now, they will be repainted later in this function - // in correct order - this.groupIds.forEach(function (id) { - groups[id].hide(); - }); - - resized = true; - } + groups = this.groups; // repaint all groups in order this.groupIds.forEach(function (id) { @@ -366,6 +294,24 @@ GroupSet.prototype.repaint = function repaint() { return resized; }; +/** + * Update the groupIds. Requires a repaint afterwards + * @private + */ +GroupSet.prototype._updateGroupIds = function () { + // reorder the groups + this.groupIds = this.groupsData.getIds({ + order: this.options.groupOrder + }); + + // hide the groups now, they will be shown again in the next repaint + // in correct order + var groups = this.groups; + this.groupIds.forEach(function (id) { + groups[id].hide(); + }); +}; + /** * Get the width of the group labels * @return {Number} width @@ -413,7 +359,7 @@ GroupSet.prototype.show = function show() { * @private */ GroupSet.prototype._onUpdate = function _onUpdate(ids) { - this._toQueue(ids, 'update'); + this._onAdd(ids); }; /** @@ -422,7 +368,37 @@ GroupSet.prototype._onUpdate = function _onUpdate(ids) { * @private */ GroupSet.prototype._onAdd = function _onAdd(ids) { - this._toQueue(ids, 'add'); + var me = this; + + ids.forEach(function (id) { + var group = me.groups[id]; + if (!group) { + var groupOptions = Object.create(me.options); + util.extend(groupOptions, { + height: null + }); + + // TODO: do not recreate the group with every update + + group = new Group(me, me.labelSet, me.backgroundPanel, me.axisPanel, id, groupOptions); + group.on('change', me.emit.bind(me, 'change')); // propagate change event + group.setRange(me.range); + group.setItems(me.itemsData); // attach items data + me.groups[id] = group; + group.parent = me; + + // Note: it is important to add the binding after group.setItems + // is executed, because that will start an infinite loop + // as this call will already trigger a repaint + } + + // update group data + group.setData(me.groupsData.get(id)); + }); + + this._updateGroupIds(); + + this.emit('change'); }; /** @@ -431,22 +407,19 @@ GroupSet.prototype._onAdd = function _onAdd(ids) { * @private */ GroupSet.prototype._onRemove = function _onRemove(ids) { - this._toQueue(ids, 'remove'); -}; - -/** - * Put groups in the queue to be added/updated/remove - * @param {Number[]} ids - * @param {String} action can be 'add', 'update', 'remove' - */ -GroupSet.prototype._toQueue = function _toQueue(ids, action) { - // TODO: remove this queuing thing, immediately apply changes - - var queue = this.queue; + var groups = this.groups; ids.forEach(function (id) { - queue[id] = action; + var group = groups[id]; + + if (group) { + group.setItems(); // detach items data + group.hide(); // FIXME: for some reason when doing setItems after hide, setItems again makes the label visible + delete groups[id]; + } }); + this._updateGroupIds(); + this.emit('change'); }; diff --git a/src/timeline/component/css/groupset.css b/src/timeline/component/css/groupset.css index f500462e..69fb5a52 100644 --- a/src/timeline/component/css/groupset.css +++ b/src/timeline/component/css/groupset.css @@ -1,3 +1,6 @@ +.vis.timeline .groupset { + position: relative; +} .vis.timeline .labelset { position: relative; diff --git a/src/timeline/component/css/item.css b/src/timeline/component/css/item.css index 68cc6d24..8e2cfbc3 100644 --- a/src/timeline/component/css/item.css +++ b/src/timeline/component/css/item.css @@ -7,10 +7,10 @@ display: inline-block; padding: 5px; - /* TODO: enable animations + /* TODO: enable css transitions -webkit-transition: top .4s ease-in-out, bottom .4s ease-in-out; transition: top .4s ease-in-out, bottom .4s ease-in-out; - */ + /**/ } .vis.timeline .item.selected { @@ -90,12 +90,10 @@ border-left-width: 1px; border-left-style: solid; - /* TODO: enable animations + /* TODO: enable css transitions -webkit-transition: height .4s ease-in-out, top .4s ease-in-out; transition: height .4s ease-in-out, top .4s ease-in-out; - */ - - color: red; + /**/ } .vis.timeline .item .content {