Browse Source

Fixed #116 and #138: bug when rendering the Timeline inside a hidden container.

css_transitions
jos 10 years ago
parent
commit
84f58cef34
3 changed files with 32 additions and 5 deletions
  1. +3
    -2
      HISTORY.md
  2. +22
    -1
      src/timeline/component/Group.js
  3. +7
    -2
      src/timeline/component/TimeAxis.js

+ 3
- 2
HISTORY.md View File

@ -11,11 +11,12 @@ http://visjs.org
- Some tweaks in snapping dragged items to nice dates. - Some tweaks in snapping dragged items to nice dates.
- Made the instance of moment.js packaged with vis.js accessibly via `vis.moment`. - Made the instance of moment.js packaged with vis.js accessibly via `vis.moment`.
- Fixed a bug in replacing the DataSet of groups via `Timeline.setGroups(groups)`. - Fixed a bug in replacing the DataSet of groups via `Timeline.setGroups(groups)`.
- Fixed a bug when rendering the Timeline inside a hidden container.
### Graph ### Graph
- added zoomable and moveable options.
- changes setOptions to avoid resetting view.
- Added zoomable and moveable options.
- Changes setOptions to avoid resetting view.
## 2014-05-09, version 1.0.1 ## 2014-05-09, version 1.0.1

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

@ -51,6 +51,14 @@ Group.prototype._create = function() {
this.dom.background = document.createElement('div'); this.dom.background = document.createElement('div');
this.dom.axis = document.createElement('div'); this.dom.axis = document.createElement('div');
// create a hidden marker to detect when the Timelines container is attached
// to the DOM, or the style of a parent of the Timeline is changed from
// display:none is changed to visible.
this.dom.marker = document.createElement('div');
this.dom.marker.style.visibility = 'hidden';
this.dom.marker.innerHTML = '?';
this.dom.background.appendChild(this.dom.marker);
}; };
/** /**
@ -122,6 +130,20 @@ Group.prototype.repaint = function repaint(range, margin, restack) {
this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range); this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
// force recalculation of the height of the items when the marker height changed
// (due to the Timeline being attached to the DOM or changed from display:none to visible)
var markerHeight = this.dom.marker.clientHeight;
if (markerHeight != this.lastMarkerHeight) {
this.lastMarkerHeight = markerHeight;
util.forEach(this.items, function (item) {
item.dirty = true;
if (item.displayed) item.repaint();
});
restack = true;
}
// reposition visible items vertically // reposition visible items vertically
if (this.itemSet.options.stack) { // TODO: ugly way to access options... if (this.itemSet.options.stack) { // TODO: ugly way to access options...
stack.stack(this.visibleItems, margin, restack); stack.stack(this.visibleItems, margin, restack);
@ -129,7 +151,6 @@ Group.prototype.repaint = function repaint(range, margin, restack) {
else { // no stacking else { // no stacking
stack.nostack(this.visibleItems, margin); stack.nostack(this.visibleItems, margin);
} }
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++) {
var item = this.visibleItems[i]; var item = this.visibleItems[i];
item.repositionY(); item.repositionY();

+ 7
- 2
src/timeline/component/TimeAxis.js View File

@ -407,8 +407,12 @@ TimeAxis.prototype._repaintLine = function() {
* @private * @private
*/ */
TimeAxis.prototype._calculateCharSize = function () { TimeAxis.prototype._calculateCharSize = function () {
// Note: We only calculate char size once, but in case it is calculated as zero,
// we will recalculate. This is the case if any of the timelines parents
// has display:none for example.
// determine the char width and height on the minor axis // determine the char width and height on the minor axis
if (!('minorCharHeight' in this.props)) {
if (!('minorCharHeight' in this.props) || this.props.minorCharHeight == 0) {
var textMinor = document.createTextNode('0'); var textMinor = document.createTextNode('0');
var measureCharMinor = document.createElement('DIV'); var measureCharMinor = document.createElement('DIV');
measureCharMinor.className = 'text minor measure'; measureCharMinor.className = 'text minor measure';
@ -421,7 +425,8 @@ TimeAxis.prototype._calculateCharSize = function () {
this.frame.removeChild(measureCharMinor); this.frame.removeChild(measureCharMinor);
} }
if (!('majorCharHeight' in this.props)) {
// determine the char width and height on the major axis
if (!('majorCharHeight' in this.props) || this.props.majorCharHeight == 0) {
var textMajor = document.createTextNode('0'); var textMajor = document.createTextNode('0');
var measureCharMajor = document.createElement('DIV'); var measureCharMajor = document.createElement('DIV');
measureCharMajor.className = 'text major measure'; measureCharMajor.className = 'text major measure';

Loading…
Cancel
Save