Browse Source

Fixes in selection, deletion, and creation of items with Groups

css_transitions
jos 10 years ago
parent
commit
4643a7cc58
5 changed files with 114 additions and 6 deletions
  1. +1
    -1
      src/timeline/Timeline.js
  2. +47
    -3
      src/timeline/component/GroupSet.js
  3. +10
    -2
      src/timeline/component/ItemSet.js
  4. +23
    -0
      test/timeline.html
  5. +33
    -0
      test/timeline_groups.html

+ 1
- 1
src/timeline/Timeline.js View File

@ -407,7 +407,7 @@ Timeline.prototype.setGroups = function(groupSet) {
// create new GroupSet when needed // create new GroupSet when needed
if (!this.groupSet) { if (!this.groupSet) {
this.groupSet = new GroupSet(this.contentPanel, this.sideContentPanel, options); this.groupSet = new GroupSet(this.contentPanel, this.sideContentPanel, options);
this.groupSet.on('change', this.rootPanel.repaint.bind(this.rootPanel, 'changes'));
this.groupSet.on('change', this.rootPanel.repaint.bind(this.rootPanel));
this.groupSet.setRange(this.range); this.groupSet.setRange(this.range);
this.groupSet.setItems(this.itemsData); this.groupSet.setItems(this.itemsData);
this.groupSet.setGroups(this.groupsData); this.groupSet.setGroups(this.groupsData);

+ 47
- 3
src/timeline/component/GroupSet.js View File

@ -446,16 +446,59 @@ GroupSet.prototype._toQueue = function _toQueue(ids, action) {
}; };
/** /**
* Find the Group from an event target:
* Find the GroupSet from an event target:
* searches for the attribute 'timeline-groupset' in the event target's element * searches for the attribute 'timeline-groupset' in the event target's element
* tree, then finds the right group in this groupset * tree, then finds the right group in this groupset
* @param {Event} event * @param {Event} event
* @return {Group | null} group * @return {Group | null} group
*/ */
GroupSet.groupSetFromTarget = function groupSetFromTarget (event) {
var target = event.target;
while (target) {
if (target.hasOwnProperty('timeline-groupset')) {
return target['timeline-groupset'];
}
target = target.parentNode;
}
return null;
};
/**
* Find the Group from an event target:
* searches for the two elements having attributes 'timeline-groupset' and
* 'timeline-itemset' in the event target's element, then finds the right group.
* @param {Event} event
* @return {Group | null} group
*/
GroupSet.groupFromTarget = function groupFromTarget (event) { GroupSet.groupFromTarget = function groupFromTarget (event) {
var groupset,
target = event.target;
// find the groupSet
var groupSet = null;
var target = event.target;
while (target && !groupSet) {
if (target.hasOwnProperty('timeline-groupset')) {
groupSet = target['timeline-groupset'];
}
target = target.parentNode;
}
// find the itemset
var itemSet = ItemSet.itemSetFromTarget(event);
// find the right group
if (groupSet && itemSet) {
for (var groupId in groupSet.groups) {
if (groupSet.groups.hasOwnProperty(groupId)) {
var group = groupSet.groups[groupId];
if (group.itemSet == itemSet) {
return group;
}
}
}
}
/* TODO: cleanup
while (target) { while (target) {
if (target.hasOwnProperty('timeline-groupset')) { if (target.hasOwnProperty('timeline-groupset')) {
groupset = target['timeline-groupset']; groupset = target['timeline-groupset'];
@ -474,6 +517,7 @@ GroupSet.groupFromTarget = function groupFromTarget (event) {
} }
} }
} }
*/
return null; return null;
}; };

+ 10
- 2
src/timeline/component/ItemSet.js View File

@ -436,7 +436,9 @@ ItemSet.prototype.removeItem = function removeItem (id) {
// confirm deletion // confirm deletion
this.options.onRemove(item, function (item) { this.options.onRemove(item, function (item) {
if (item) { if (item) {
dataset.remove(item);
// remove by id here, it is possible that an item has no id defined
// itself, so better not delete by the item itself
dataset.remove(id);
} }
}); });
} }
@ -514,13 +516,18 @@ ItemSet.prototype._onRemove = function _onRemove(ids) {
var item = me.items[id]; var item = me.items[id];
if (item) { if (item) {
count++; count++;
item.hide(); // TODO: only hide when displayed
item.hide();
delete me.items[id]; delete me.items[id];
delete me.visibleItems[id]; delete me.visibleItems[id];
// remove from selection
var index = me.selection.indexOf(id);
if (index != -1) me.selection.splice(index, 1);
} }
}); });
if (count) { if (count) {
// update order
this._order(); this._order();
this.stackDirty = true; // force re-stacking of all items next repaint this.stackDirty = true; // force re-stacking of all items next repaint
this.emit('change'); this.emit('change');
@ -662,6 +669,7 @@ ItemSet.prototype._onDragEnd = function (event) {
me.options.onMove(item, function (item) { me.options.onMove(item, function (item) {
if (item) { if (item) {
// apply changes // apply changes
item[dataset.fieldId] = id; // ensure the item contains its id (can be undefined)
changes.push(item); changes.push(item);
} }
else { else {

+ 23
- 0
test/timeline.html View File

@ -87,6 +87,29 @@
var timeline = new vis.Timeline(container, items, options); var timeline = new vis.Timeline(container, items, options);
console.timeEnd('create timeline'); console.timeEnd('create timeline');
timeline.on('select', function (selection) {
console.log('select', selection);
});
/*
timeline.on('rangechange', function (range) {
console.log('rangechange', range);
});
timeline.on('rangechanged', function (range) {
console.log('rangechanged', range);
});
*/
items.on('add', function (nodes) {
console.log('add', nodes);
});
items.on('update', function (nodes) {
console.log('update', nodes);
});
items.on('remove', function (nodes) {
console.log('remove', nodes);
});
</script> </script>
</body> </body>
</html> </html>

+ 33
- 0
test/timeline_groups.html View File

@ -94,6 +94,39 @@
timeline.setItems(items); timeline.setItems(items);
console.timeEnd('set items'); console.timeEnd('set items');
timeline.on('select', function (selection) {
console.log('select', selection);
});
/*
timeline.on('rangechange', function (range) {
console.log('rangechange', range);
});
timeline.on('rangechanged', function (range) {
console.log('rangechanged', range);
});
*/
items.on('add', function (nodes) {
console.log('items add', nodes);
});
items.on('update', function (nodes) {
console.log('items update', nodes);
});
items.on('remove', function (nodes) {
console.log('items remove', nodes);
});
groups.on('add', function (nodes) {
console.log('groups add', nodes);
});
groups.on('update', function (nodes) {
console.log('groups update', nodes);
});
groups.on('remove', function (nodes) {
console.log('groups remove', nodes);
});
</script> </script>
</body> </body>
</html> </html>

Loading…
Cancel
Save