Browse Source

Fixed adjusting for changed margins on the fly, fixed reckoning with height of group label for group height

css_transitions
jos 10 years ago
parent
commit
a544505148
4 changed files with 51 additions and 9 deletions
  1. +2
    -1
      HISTORY.md
  2. +3
    -0
      src/timeline/Timeline.js
  3. +3
    -1
      src/timeline/component/Group.js
  4. +43
    -7
      src/timeline/component/ItemSet.js

+ 2
- 1
HISTORY.md View File

@ -15,8 +15,9 @@ http://visjs.org
- Fixed `select` event fired repeatedly when clicking an empty place on the - Fixed `select` event fired repeatedly when clicking an empty place on the
Timeline, deselecting selected items). Timeline, deselecting selected items).
- Fixed initial visible window in case items exceed `zoomMax`. Thanks @Remper. - Fixed initial visible window in case items exceed `zoomMax`. Thanks @Remper.
- Option `order` is now deprecated. This was needed for performance improvements.
- Fixed an offset in newly created items when using groups. - Fixed an offset in newly created items when using groups.
- Fixed height of a group not reckoning with the height of the group label.
- Option `order` is now deprecated. This was needed for performance improvements.
- More examples added. - More examples added.
- Minor bug fixes. - Minor bug fixes.

+ 3
- 0
src/timeline/Timeline.js View File

@ -289,6 +289,9 @@ Timeline.prototype.setOptions = function (options) {
} }
} }
// force the itemSet to refresh: options like orientation and margins may be changed
this.itemSet.markDirty();
// validate the callback functions // validate the callback functions
var validateCallback = (function (fn) { var validateCallback = (function (fn) {
if (!(this.options[fn] instanceof Function) || this.options[fn].length != 2) { if (!(this.options[fn] instanceof Function) || this.options[fn].length != 2) {

+ 3
- 1
src/timeline/component/Group.js View File

@ -126,7 +126,8 @@ Group.prototype.repaint = function repaint(range, margin, restack) {
stack.stack(this.visibleItems, margin, restack); stack.stack(this.visibleItems, margin, restack);
this.stackDirty = false; this.stackDirty = false;
for (var i = 0, ii = this.visibleItems.length; i < ii; i++) { for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
this.visibleItems[i].repositionY();
var item = this.visibleItems[i];
item.repositionY();
} }
// recalculate the height of the group // recalculate the height of the group
@ -144,6 +145,7 @@ Group.prototype.repaint = function repaint(range, margin, restack) {
else { else {
height = margin.axis + margin.item; height = margin.axis + margin.item;
} }
height = Math.max(height, this.props.label.height);
// calculate actual size and position // calculate actual size and position
var foreground = this.dom.foreground; var foreground = this.dom.foreground;

+ 43
- 7
src/timeline/component/ItemSet.js View File

@ -152,7 +152,17 @@ ItemSet.prototype._create = function _create(){
* Function to let items snap to nice dates when * Function to let items snap to nice dates when
* dragging items. * dragging items.
*/ */
ItemSet.prototype.setOptions = Component.prototype.setOptions;
ItemSet.prototype.setOptions = function setOptions(options) {
Component.prototype.setOptions.call(this, options);
};
/**
* Mark the ItemSet dirty so it will refresh everything with next repaint
*/
ItemSet.prototype.markDirty = function markDirty() {
this.groupIds = [];
this.stackDirty = true;
};
/** /**
* Hide the component from the DOM * Hide the component from the DOM
@ -298,26 +308,38 @@ ItemSet.prototype.repaint = function repaint() {
// update className // update className
frame.className = 'itemset' + (options.className ? (' ' + asString(options.className)) : ''); frame.className = 'itemset' + (options.className ? (' ' + asString(options.className)) : '');
// reorder the groups (if needed)
resized = this._orderGroups() || resized;
// check whether zoomed (in that case we need to re-stack everything) // check whether zoomed (in that case we need to re-stack everything)
// TODO: would be nicer to get this as a trigger from Range
var visibleInterval = this.range.end - this.range.start; var visibleInterval = this.range.end - this.range.start;
var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth); var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth);
if (zoomed) this.stackDirty = true;
this.lastVisibleInterval = visibleInterval; this.lastVisibleInterval = visibleInterval;
this.lastWidth = this.width; this.lastWidth = this.width;
// repaint all groups // repaint all groups
var restack = zoomed || this.stackDirty,
var restack = this.stackDirty,
firstGroup = this._firstGroup(),
firstMargin = {
item: margin.item,
axis: margin.axis
},
nonFirstMargin = {
item: margin.item,
axis: margin.item / 2
},
height = 0, height = 0,
minHeight = margin.axis + margin.item; minHeight = margin.axis + margin.item;
util.forEach(this.groups, function (group) { util.forEach(this.groups, function (group) {
resized = group.repaint(range, margin, restack) || resized;
var groupMargin = (group == firstGroup) ? firstMargin : nonFirstMargin;
resized = group.repaint(range, groupMargin, restack) || resized;
height += group.height; height += group.height;
}); });
height = Math.max(height, minHeight); height = Math.max(height, minHeight);
this.stackDirty = false; this.stackDirty = false;
// reorder the groups (if needed)
resized = this._orderGroups() || resized;
// reposition frame // reposition frame
frame.style.left = asSize(options.left, ''); frame.style.left = asSize(options.left, '');
frame.style.right = asSize(options.right, ''); frame.style.right = asSize(options.right, '');
@ -347,6 +369,19 @@ ItemSet.prototype.repaint = function repaint() {
return resized; return resized;
}; };
/**
* Get the first group, aligned with the axis
* @return {Group | null} firstGroup
* @private
*/
ItemSet.prototype._firstGroup = function _firstGroup() {
var firstGroupIndex = (this.options.orientation == 'top') ? 0 : (this.groupIds.length - 1);
var firstGroupId = this.groupIds[firstGroupIndex];
var firstGroup = this.groups[firstGroupId] || this.groups[UNGROUPED];
return firstGroup || null;
};
/** /**
* Create or delete the group holding all ungrouped items. This group is used when * Create or delete the group holding all ungrouped items. This group is used when
* there are no groups specified. * there are no groups specified.
@ -733,7 +768,8 @@ ItemSet.prototype._orderGroups = function () {
// hide all groups, removes them from the DOM // hide all groups, removes them from the DOM
var groups = this.groups; var groups = this.groups;
groupIds.forEach(function (groupId) { groupIds.forEach(function (groupId) {
groups[groupId].hide();
var group = groups[groupId];
group.hide();
}); });
// show the groups again, attach them to the DOM in correct order // show the groups again, attach them to the DOM in correct order

Loading…
Cancel
Save