Browse Source

Created a Group holding ungrouped items, for timelines not using groups

css_transitions
jos 10 years ago
parent
commit
58e81f3f70
5 changed files with 68 additions and 26 deletions
  1. +2
    -3
      src/timeline/Stack.js
  2. +1
    -1
      src/timeline/component/Component.js
  3. +62
    -19
      src/timeline/component/ItemSet.js
  4. +1
    -1
      src/timeline/component/item/Item.js
  5. +2
    -2
      src/timeline/component/item/ItemRange.js

+ 2
- 3
src/timeline/Stack.js View File

@ -92,7 +92,6 @@ Stack.prototype.orderByEnd = function orderByEnd(items) {
* @param {boolean} [force=false] If true, all items will be re-stacked. * @param {boolean} [force=false] If true, all items will be re-stacked.
* If false (default), only items having a * If false (default), only items having a
* top===null will be re-stacked * top===null will be re-stacked
* @private
*/ */
Stack.prototype.stack = function stack (items, force) { Stack.prototype.stack = function stack (items, force) {
var i, var i,
@ -152,8 +151,8 @@ Stack.prototype.stack = function stack (items, force) {
/** /**
* Test if the two provided items collide * Test if the two provided items collide
* The items must have parameters left, width, top, and height. * The items must have parameters left, width, top, and height.
* @param {Component} a The first item
* @param {Component} b The second item
* @param {Item} a The first item
* @param {Item} b The second item
* @param {Number} margin A minimum required margin. * @param {Number} margin A minimum required margin.
* If margin is provided, the two items will be * If margin is provided, the two items will be
* marked colliding when they overlap or * marked colliding when they overlap or

+ 1
- 1
src/timeline/component/Component.js View File

@ -74,7 +74,7 @@ Component.prototype.repaint = function repaint() {
* Test whether the component is resized since the last time _isResized() was * Test whether the component is resized since the last time _isResized() was
* called. * called.
* @return {Boolean} Returns true if the component is resized * @return {Boolean} Returns true if the component is resized
* @private
* @protected
*/ */
Component.prototype._isResized = function _isResized() { Component.prototype._isResized = function _isResized() {
var resized = (this._previousWidth !== this.width || this._previousHeight !== this.height); var resized = (this._previousWidth !== this.width || this._previousHeight !== this.height);

+ 62
- 19
src/timeline/component/ItemSet.js View File

@ -67,6 +67,7 @@ function ItemSet(backgroundPanel, axisPanel, labelPanel, options) {
this.groups = {}; // Group object for every group this.groups = {}; // Group object for every group
this.groupIds = []; this.groupIds = [];
this.ungrouped = null; // Group holding all ungrouped items (yeah, funny right?), used when there are no groups
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
@ -383,7 +384,6 @@ ItemSet.prototype.repaint = function repaint() {
options = this.options, options = this.options,
orientation = this.getOption('orientation'), orientation = this.getOption('orientation'),
frame = this.frame, frame = this.frame,
initialPosByStart,
i, ii; i, ii;
// update className // update className
@ -507,6 +507,36 @@ ItemSet.prototype._updateVisibleItems = function _updateVisibleItems(orderedItem
return newVisibleItems; return newVisibleItems;
}; };
/**
* Create or delete the group holding all ungrouped items. This group is used when
* there are no groups specified.
* @protected
*/
ItemSet.prototype._updateUngrouped = function _updateUngrouped() {
if (this.groupsData) {
// remove the group holding all (unfiltered) items
if (this.ungrouped) {
this.ungrouped.hide();
this.ungrouped = null;
}
}
else {
// create a group holding all (unfiltered) items
if (!this.ungrouped) {
var id = null;
this.ungrouped = new Group(id, this, this.dom.background, this.dom.axis, this.labelPanel.frame);
for (var itemId in this.items) {
if (this.items.hasOwnProperty(itemId)) {
this.ungrouped.add(this.items[itemId]);
}
}
this.ungrouped.show();
}
}
};
/** /**
* Get the foreground container element * Get the foreground container element
* @return {HTMLElement} foreground * @return {HTMLElement} foreground
@ -577,9 +607,12 @@ ItemSet.prototype.setItems = function setItems(items) {
me.itemsData.on(event, callback, id); me.itemsData.on(event, callback, id);
}); });
// draw all new items
// add all new items
ids = this.itemsData.getIds(); ids = this.itemsData.getIds();
this._onAdd(ids); this._onAdd(ids);
// update the group holding all ungrouped items
this._updateUngrouped();
} }
}; };
@ -633,6 +666,9 @@ ItemSet.prototype.setGroups = function setGroups(groups) {
this._onAddGroups(ids); this._onAddGroups(ids);
} }
// update the group holding all ungrouped items
this._updateUngrouped();
this.emit('change'); this.emit('change');
}; };
@ -667,7 +703,7 @@ ItemSet.prototype.removeItem = function removeItem (id) {
/** /**
* Handle updated items * Handle updated items
* @param {Number[]} ids * @param {Number[]} ids
* @private
* @protected
*/ */
ItemSet.prototype._onUpdate = function _onUpdate(ids) { ItemSet.prototype._onUpdate = function _onUpdate(ids) {
var me = this, var me = this,
@ -721,14 +757,14 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
/** /**
* Handle added items * Handle added items
* @param {Number[]} ids * @param {Number[]} ids
* @private
* @protected
*/ */
ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate; ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
/** /**
* Handle removed items * Handle removed items
* @param {Number[]} ids * @param {Number[]} ids
* @private
* @protected
*/ */
ItemSet.prototype._onRemove = function _onRemove(ids) { ItemSet.prototype._onRemove = function _onRemove(ids) {
var count = 0; var count = 0;
@ -822,15 +858,6 @@ ItemSet.prototype._updateGroupIds = function () {
this.groupIds = this.groupsData.getIds({ this.groupIds = this.groupsData.getIds({
order: this.options.groupOrder order: this.options.groupOrder
}); });
/* TODO
// 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();
});
*/
}; };
/** /**
@ -841,8 +868,11 @@ ItemSet.prototype._updateGroupIds = function () {
ItemSet.prototype._addItem = function _addItem(item) { ItemSet.prototype._addItem = function _addItem(item) {
this.items[item.id] = item; this.items[item.id] = item;
// add to group (if any)
if ('group' in item.data) {
// add to group
if (this.ungrouped) {
this.ungrouped.add(item);
}
else {
var group = this.groups[item.data.group]; var group = this.groups[item.data.group];
if (group) group.add(item); if (group) group.add(item);
} }
@ -868,7 +898,10 @@ ItemSet.prototype._updateItem = function _updateItem(item, itemData) {
if (group) group.remove(item); if (group) group.remove(item);
} }
if ('group' in item.data) {
if (this.ungrouped) {
this.ungrouped.add(item);
}
else {
group = this.groups[item.data.group]; group = this.groups[item.data.group];
if (group) group.add(item); if (group) group.add(item);
} }
@ -896,8 +929,11 @@ ItemSet.prototype._removeItem = function _removeItem(item) {
index = this.selection.indexOf(item.id); index = this.selection.indexOf(item.id);
if (index != -1) this.selection.splice(index, 1); if (index != -1) this.selection.splice(index, 1);
// remove from group (if any)
if ('group' in item.data) {
// remove from group
if (this.ungrouped) {
this.ungrouped.remove(item);
}
else {
var group = this.groups[item.data.group]; var group = this.groups[item.data.group];
if (group) group.remove(item); if (group) group.remove(item);
} }
@ -919,8 +955,15 @@ ItemSet.prototype._order = function _order() {
this.stack.orderByEnd(this.orderedItems.byEnd); this.stack.orderByEnd(this.orderedItems.byEnd);
}; };
/**
* Create an array containing all items being a range (having an end date)
* @param array
* @returns {Array}
* @private
*/
ItemSet.prototype._constructByEndArray = function _constructByEndArray(array) { ItemSet.prototype._constructByEndArray = function _constructByEndArray(array) {
var endArray = []; var endArray = [];
for (var i = 0; i < array.length; i++) { for (var i = 0; i < array.length; i++) {
if (array[i] instanceof ItemRange) { if (array[i] instanceof ItemRange) {
endArray.push(array[i]); endArray.push(array[i]);

+ 1
- 1
src/timeline/component/item/Item.js View File

@ -108,7 +108,7 @@ Item.prototype.repositionY = function repositionY() {
/** /**
* Repaint a delete button on the top right of the item when the item is selected * Repaint a delete button on the top right of the item when the item is selected
* @param {HTMLElement} anchor * @param {HTMLElement} anchor
* @private
* @protected
*/ */
Item.prototype._repaintDeleteButton = function (anchor) { Item.prototype._repaintDeleteButton = function (anchor) {
if (this.selected && this.options.editable && !this.dom.deleteButton) { if (this.selected && this.options.editable && !this.dom.deleteButton) {

+ 2
- 2
src/timeline/component/item/ItemRange.js View File

@ -205,7 +205,7 @@ ItemRange.prototype.repositionY = function repositionY() {
/** /**
* Repaint a drag area on the left side of the range when the range is selected * Repaint a drag area on the left side of the range when the range is selected
* @private
* @protected
*/ */
ItemRange.prototype._repaintDragLeft = function () { ItemRange.prototype._repaintDragLeft = function () {
if (this.selected && this.options.editable && !this.dom.dragLeft) { if (this.selected && this.options.editable && !this.dom.dragLeft) {
@ -235,7 +235,7 @@ ItemRange.prototype._repaintDragLeft = function () {
/** /**
* Repaint a drag area on the right side of the range when the range is selected * Repaint a drag area on the right side of the range when the range is selected
* @private
* @protected
*/ */
ItemRange.prototype._repaintDragRight = function () { ItemRange.prototype._repaintDragRight = function () {
if (this.selected && this.options.editable && !this.dom.dragRight) { if (this.selected && this.options.editable && !this.dom.dragRight) {

Loading…
Cancel
Save