diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js
index abb44b69..28fb9005 100644
--- a/src/timeline/Timeline.js
+++ b/src/timeline/Timeline.js
@@ -86,15 +86,7 @@ function Timeline (container, items, options) {
if (!container) throw new Error('No container provided');
container.appendChild(this.dom.root);
- // TODO: remove temporary contents
- //this.dom.background.innerHTML = 'background';
- this.dom.center.innerHTML = 'center';
- this.dom.center.innerHTML = 'center
center
center
center
center
center
center
center
center
center
center
center
center
center
center';
- this.dom.left.innerHTML = 'left';
- this.dom.right.innerHTML = 'right';
- //this.dom.top.innerHTML = 'top';
- //this.dom.bottom.innerHTML = 'bottom';
-
+ // all components listed here will be repainted automatically
this.components = [];
// range
@@ -117,6 +109,11 @@ function Timeline (container, items, options) {
this.customTime = new CustomTime(this, this.options);
this.components.push(this.customTime);
+ // item set
+ this.itemSet = new ItemSet(this, this.options);
+ this.components.push(this.itemSet);
+ this.emitter.on('change', this.repaint.bind(this));
+
/* TODO
// root panel
var rootOptions = util.extend(Object.create(this.options), {
@@ -375,8 +372,6 @@ Timeline.prototype._create = function () {
this.dom.leftContainer.appendChild(this.dom.left);
this.dom.rightContainer.appendChild(this.dom.right);
- // TODO: move watch from RootPanel to here
-
// create a central event bus
this.emitter = this;
@@ -437,11 +432,11 @@ Timeline.prototype.setOptions = function (options) {
remove: isBoolean ? options.editable : (options.editable.remove || false)
};
}
-/* TODO
+
// force update of range (apply new min/max etc.)
// both start and end are optional
this.range.setRange(options.start, options.end);
- */
+
if ('editable' in options || 'selectable' in options) {
if (this.options.selectable) {
// force update of selection
@@ -452,10 +447,10 @@ Timeline.prototype.setOptions = function (options) {
this.setSelection([]);
}
}
-/* TODO
+
// force the itemSet to refresh: options like orientation and margins may be changed
this.itemSet.markDirty();
-*/
+
// validate the callback functions
var validateCallback = (function (fn) {
if (!(this.options[fn] instanceof Function) || this.options[fn].length != 2) {
@@ -491,6 +486,10 @@ Timeline.prototype.setOptions = function (options) {
}
}
*/
+
+ // enable/disable autoResize
+ this._initAutoResize();
+
// TODO: remove deprecation error one day (deprecated since version 0.8.0)
if (options && options.order) {
throw new Error('Option order is deprecated. There is no replacement for this feature.');
@@ -567,7 +566,7 @@ Timeline.prototype.setItems = function(items) {
* Set groups
* @param {vis.DataSet | Array | google.visualization.DataTable} groups
*/
-Timeline.prototype.setGroups = function setGroups(groups) {
+Timeline.prototype.setGroups = function(groups) {
// convert to type DataSet when needed
var newDataSet;
if (!groups) {
@@ -595,7 +594,7 @@ Timeline.prototype.setGroups = function setGroups(groups) {
* @param {Object} [what] Optionally specify what to clear. By default:
* {items: true, groups: true, options: true}
*/
-Timeline.prototype.clear = function clear(what) {
+Timeline.prototype.clear = function(what) {
// clear items
if (!what || what.items) {
this.setItems(null);
@@ -615,7 +614,7 @@ Timeline.prototype.clear = function clear(what) {
/**
* Set Timeline window such that it fits all items
*/
-Timeline.prototype.fit = function fit() {
+Timeline.prototype.fit = function() {
// apply the data range as range
var dataRange = this.getItemRange();
@@ -646,7 +645,7 @@ Timeline.prototype.fit = function fit() {
* When no minimum is found, min==null
* When no maximum is found, max==null
*/
-Timeline.prototype.getItemRange = function getItemRange() {
+Timeline.prototype.getItemRange = function() {
// calculate min from start filed
var itemsData = this.itemsData,
min = null,
@@ -686,7 +685,7 @@ Timeline.prototype.getItemRange = function getItemRange() {
* selected. If ids is an empty array, all items will be
* unselected.
*/
-Timeline.prototype.setSelection = function setSelection (ids) {
+Timeline.prototype.setSelection = function(ids) {
this.itemSet && this.itemSet.setSelection(ids);
};
@@ -694,7 +693,7 @@ Timeline.prototype.setSelection = function setSelection (ids) {
* Get the selected items by their id
* @return {Array} ids The ids of the selected items
*/
-Timeline.prototype.getSelection = function getSelection() {
+Timeline.prototype.getSelection = function() {
return this.itemSet && this.itemSet.getSelection() || [];
};
@@ -711,7 +710,7 @@ Timeline.prototype.getSelection = function getSelection() {
* @param {Date | Number | String | Object} [start] Start date of visible window
* @param {Date | Number | String} [end] End date of visible window
*/
-Timeline.prototype.setWindow = function setWindow(start, end) {
+Timeline.prototype.setWindow = function(start, end) {
if (arguments.length == 1) {
var range = arguments[0];
this.range.setRange(range.start, range.end);
@@ -725,7 +724,7 @@ Timeline.prototype.setWindow = function setWindow(start, end) {
* Get the visible window
* @return {{start: Date, end: Date}} Visible range
*/
-Timeline.prototype.getWindow = function setWindow() {
+Timeline.prototype.getWindow = function() {
var range = this.range.getRange();
return {
start: new Date(range.start),
@@ -737,7 +736,7 @@ Timeline.prototype.getWindow = function setWindow() {
* Force a repaint of the Timeline. Can be useful to manually repaint when
* option autoResize=false
*/
-Timeline.prototype.repaint = function repaint() {
+Timeline.prototype.repaint = function() {
var resized = false,
options = this.options,
props = this.props,
@@ -880,6 +879,7 @@ Timeline.prototype._onSelectItem = function (event) {
* @param event
* @private
*/
+// TODO: move this function to ItemSet
Timeline.prototype._onAddItem = function (event) {
if (!this.options.selectable) return;
if (!this.options.editable.add) return;
@@ -970,7 +970,8 @@ Timeline.prototype._onMultiSelectItem = function (event) {
* @return {Date} time The datetime the corresponds with given position x
* @private
*/
-Timeline.prototype._toTime = function _toTime(x) {
+// TODO: move this function to Range
+Timeline.prototype._toTime = function(x) {
var conversion = this.range.conversion(this.props.center.width);
return new Date(x / conversion.scale + conversion.offset);
};
@@ -982,7 +983,69 @@ Timeline.prototype._toTime = function _toTime(x) {
* with the given date.
* @private
*/
-Timeline.prototype._toScreen = function _toScreen(time) {
+// TODO: move this function to Range
+Timeline.prototype._toScreen = function(time) {
var conversion = this.range.conversion(this.props.center.width);
return (time.valueOf() - conversion.offset) * conversion.scale;
};
+
+/**
+ * Initialize watching when option autoResize is true
+ * @private
+ */
+Timeline.prototype._initAutoResize = function () {
+ if (this.options.autoResize == true) {
+ this._startAutoResize();
+ }
+ else {
+ this._stopAutoResize();
+ }
+};
+
+/**
+ * Watch for changes in the size of the container. On resize, the Panel will
+ * automatically redraw itself.
+ * @private
+ */
+Timeline.prototype._startAutoResize = function () {
+ var me = this;
+
+ this._stopAutoResize();
+
+ function checkSize() {
+ if (me.options.autoResize != true) {
+ // stop watching when the option autoResize is changed to false
+ me._stopAutoResize();
+ return;
+ }
+
+ if (me.dom.root) {
+ // check whether the frame is resized
+ if ((me.dom.root.clientWidth != me.props.lastWidth) ||
+ (me.dom.root.clientHeight != me.props.lastHeight)) {
+ me.props.lastWidth = me.dom.root.clientWidth;
+ me.props.lastHeight = me.dom.root.clientHeight;
+
+ me.emitter.emit('change');
+ }
+ }
+ }
+
+ // TODO: automatically cleanup the event listener when the frame is deleted
+ util.addEventListener(window, 'resize', checkSize);
+
+ this.watchTimer = setInterval(checkSize, 1000);
+};
+
+/**
+ * Stop watching for a resize of the frame.
+ * @private
+ */
+Timeline.prototype._stopAutoResize = function () {
+ if (this.watchTimer) {
+ clearInterval(this.watchTimer);
+ this.watchTimer = undefined;
+ }
+
+ // TODO: remove event listener on window.resize
+};
diff --git a/src/timeline/component/CustomTime.js b/src/timeline/component/CustomTime.js
index 59536219..fdd81d1b 100644
--- a/src/timeline/component/CustomTime.js
+++ b/src/timeline/component/CustomTime.js
@@ -54,6 +54,8 @@ CustomTime.prototype._create = function _create () {
* @return {boolean} Returns true if the component is resized
*/
CustomTime.prototype.repaint = function () {
+ // FIXME: CustomTime should be on the foreground
+
if (this.options.showCustomTime) {
if (this.bar.parentNode != this.timeline.dom.backgroundVertical) {
// attach to the dom
diff --git a/src/timeline/component/Group.js b/src/timeline/component/Group.js
index 2144fbb8..928d1b69 100644
--- a/src/timeline/component/Group.js
+++ b/src/timeline/component/Group.js
@@ -78,6 +78,13 @@ Group.prototype.setData = function setData(data) {
this.dom.inner.innerHTML = this.groupId;
}
+ if (!this.dom.inner.firstChild) {
+ util.addClassName(this.dom.inner, 'hidden');
+ }
+ else {
+ util.removeClassName(this.dom.inner, 'hidden');
+ }
+
// update className
var className = data && data.className;
if (className) {
@@ -85,30 +92,6 @@ Group.prototype.setData = function setData(data) {
}
};
-/**
- * Get the foreground container element
- * @return {HTMLElement} foreground
- */
-Group.prototype.getForeground = function getForeground() {
- return this.dom.foreground;
-};
-
-/**
- * Get the background container element
- * @return {HTMLElement} background
- */
-Group.prototype.getBackground = function getBackground() {
- return this.dom.background;
-};
-
-/**
- * Get the axis container element
- * @return {HTMLElement} axis
- */
-Group.prototype.getAxis = function getAxis() {
- return this.dom.axis;
-};
-
/**
* Get the width of the group label
* @return {number} width
@@ -196,19 +179,19 @@ Group.prototype.repaint = function repaint(range, margin, restack) {
*/
Group.prototype.show = function show() {
if (!this.dom.label.parentNode) {
- this.itemSet.getLabelSet().appendChild(this.dom.label);
+ this.itemSet.dom.labelSet.appendChild(this.dom.label);
}
if (!this.dom.foreground.parentNode) {
- this.itemSet.getForeground().appendChild(this.dom.foreground);
+ this.itemSet.dom.foreground.appendChild(this.dom.foreground);
}
if (!this.dom.background.parentNode) {
- this.itemSet.getBackground().appendChild(this.dom.background);
+ this.itemSet.dom.background.appendChild(this.dom.background);
}
if (!this.dom.axis.parentNode) {
- this.itemSet.getAxis().appendChild(this.dom.axis);
+ this.itemSet.dom.axis.appendChild(this.dom.axis);
}
};
@@ -246,7 +229,7 @@ Group.prototype.add = function add(item) {
item.setParent(this);
if (item instanceof ItemRange && this.visibleItems.indexOf(item) == -1) {
- var range = this.itemSet.range; // TODO: not nice accessing the range like this
+ var range = this.itemSet.timeline.range; // TODO: not nice accessing the range like this
this._checkIfVisible(item, this.visibleItems, range);
}
};
diff --git a/src/timeline/component/ItemSet.js b/src/timeline/component/ItemSet.js
index 4a36f1cf..e7b5e36d 100644
--- a/src/timeline/component/ItemSet.js
+++ b/src/timeline/component/ItemSet.js
@@ -4,31 +4,24 @@ var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
* An ItemSet holds a set of items and ranges which can be displayed in a
* range. The width is determined by the parent of the ItemSet, and the height
* is determined by the size of the items.
- * @param {Panel} backgroundPanel Panel which can be used to display the
- * vertical lines of box items.
- * @param {Panel} axisPanel Panel on the axis where the dots of box-items
- * can be displayed.
- * @param {Panel} sidePanel Left side panel holding labels
+ * @param {{dom: Object}} timeline
* @param {Object} [options] See ItemSet.setOptions for the available options.
* @constructor ItemSet
* @extends Panel
*/
-function ItemSet(backgroundPanel, axisPanel, sidePanel, options) {
- this.id = util.randomUUID();
+function ItemSet(timeline, options) {
+ this.timeline = timeline;
// one options object is shared by this itemset and all its items
this.options = options || {};
- this.backgroundPanel = backgroundPanel;
- this.axisPanel = axisPanel;
- this.sidePanel = sidePanel;
this.itemOptions = Object.create(this.options);
this.dom = {};
+ this.props = {};
this.hammer = null;
var me = this;
this.itemsData = null; // DataSet
this.groupsData = null; // DataSet
- this.range = null; // Range or Object {start: number, end: number}
// listeners for the DataSet of the items
this.itemListeners = {
@@ -69,7 +62,7 @@ function ItemSet(backgroundPanel, axisPanel, sidePanel, options) {
this._create();
}
-ItemSet.prototype = new Panel();
+ItemSet.prototype = new Component();
// available item types will be registered here
ItemSet.types = {
@@ -84,13 +77,14 @@ ItemSet.types = {
*/
ItemSet.prototype._create = function _create(){
var frame = document.createElement('div');
+ frame.className = 'itemset';
frame['timeline-itemset'] = this;
- this.frame = frame;
+ this.dom.frame = frame;
// create background panel
var background = document.createElement('div');
background.className = 'background';
- this.backgroundPanel.frame.appendChild(background);
+ frame.appendChild(background);
this.dom.background = background;
// create foreground panel
@@ -103,13 +97,11 @@ ItemSet.prototype._create = function _create(){
var axis = document.createElement('div');
axis.className = 'axis';
this.dom.axis = axis;
- this.axisPanel.frame.appendChild(axis);
// create labelset
var labelSet = document.createElement('div');
labelSet.className = 'labelset';
this.dom.labelSet = labelSet;
- this.sidePanel.frame.appendChild(labelSet);
// create ungrouped Group
this._updateUngrouped();
@@ -122,13 +114,14 @@ ItemSet.prototype._create = function _create(){
this.hammer.on('dragstart', this._onDragStart.bind(this));
this.hammer.on('drag', this._onDrag.bind(this));
this.hammer.on('dragend', this._onDragEnd.bind(this));
+
+ // attach to the DOM
+ this.show();
};
/**
* Set options for the ItemSet. Existing options will be extended/overwritten.
* @param {Object} [options] The following options are available:
- * {String | function} [className]
- * class name for the itemset
* {String} [type]
* Default type for the items. Choose from 'box'
* (default), 'point', or 'range'. The default
@@ -152,9 +145,7 @@ ItemSet.prototype._create = function _create(){
* Function to let items snap to nice dates when
* dragging items.
*/
-ItemSet.prototype.setOptions = function setOptions(options) {
- Component.prototype.setOptions.call(this, options);
-};
+ItemSet.prototype.setOptions = Component.prototype.setOptions;
/**
* Mark the ItemSet dirty so it will refresh everything with next repaint
@@ -168,16 +159,16 @@ ItemSet.prototype.markDirty = function markDirty() {
* Hide the component from the DOM
*/
ItemSet.prototype.hide = function hide() {
+ // remove the frame containing the items
+ if (this.dom.frame.parentNode) {
+ this.dom.frame.parentNode.removeChild(this.dom.frame);
+ }
+
// remove the axis with dots
if (this.dom.axis.parentNode) {
this.dom.axis.parentNode.removeChild(this.dom.axis);
}
- // remove the background with vertical lines
- if (this.dom.background.parentNode) {
- this.dom.background.parentNode.removeChild(this.dom.background);
- }
-
// remove the labelset containing all group labels
if (this.dom.labelSet.parentNode) {
this.dom.labelSet.parentNode.removeChild(this.dom.labelSet);
@@ -189,34 +180,22 @@ ItemSet.prototype.hide = function hide() {
* @return {Boolean} changed
*/
ItemSet.prototype.show = function show() {
- // show axis with dots
- if (!this.dom.axis.parentNode) {
- this.axisPanel.frame.appendChild(this.dom.axis);
+ // show frame containing the items
+ if (!this.dom.frame.parentNode) {
+ this.timeline.dom.center.appendChild(this.dom.frame);
}
- // show background with vertical lines
- if (!this.dom.background.parentNode) {
- this.backgroundPanel.frame.appendChild(this.dom.background);
+ // show axis with dots
+ if (!this.dom.axis.parentNode) {
+ this.timeline.dom.bottom.appendChild(this.dom.axis);
}
// show labelset containing labels
if (!this.dom.labelSet.parentNode) {
- this.sidePanel.frame.appendChild(this.dom.labelSet);
+ this.timeline.dom.left.appendChild(this.dom.labelSet);
}
};
-/**
- * Set range (start and end).
- * @param {Range | Object} range A Range or an object containing start and end.
- */
-ItemSet.prototype.setRange = function setRange(range) {
- if (!(range instanceof Range) && (!range || !range.start || !range.end)) {
- throw new TypeError('Range must be an instance of Range, ' +
- 'or an object containing start and end.');
- }
- this.range = range;
-};
-
/**
* Set selected items by their id. Replaces the current selection
* Unknown id's are silently ignored.
@@ -275,27 +254,18 @@ ItemSet.prototype._deselect = function _deselect(id) {
}
};
-/**
- * Return the item sets frame
- * @returns {HTMLElement} frame
- */
-ItemSet.prototype.getFrame = function getFrame() {
- return this.frame;
-};
-
/**
* Repaint the component
* @return {boolean} Returns true if the component is resized
*/
ItemSet.prototype.repaint = function repaint() {
var margin = this.options.margin,
- range = this.range,
+ range = this.timeline.range,
asSize = util.option.asSize,
- asString = util.option.asString,
options = this.options,
orientation = this.getOption('orientation'),
resized = false,
- frame = this.frame;
+ frame = this.dom.frame;
// TODO: document this feature to specify one margin for both item and axis distance
if (typeof margin === 'number') {
@@ -305,19 +275,16 @@ ItemSet.prototype.repaint = function repaint() {
};
}
- // update 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)
// TODO: would be nicer to get this as a trigger from Range
- var visibleInterval = this.range.end - this.range.start;
- var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth);
+ var visibleInterval = range.end - range.start;
+ var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.props.width != this.props.lastWidth);
if (zoomed) this.stackDirty = true;
this.lastVisibleInterval = visibleInterval;
- this.lastWidth = this.width;
+ this.props.lastWidth = this.props.width;
// repaint all groups
var restack = this.stackDirty,
@@ -350,10 +317,10 @@ ItemSet.prototype.repaint = function repaint() {
//frame.style.height = asSize('height' in options ? options.height : height); // TODO: reckon with height
// calculate actual size and position
- this.top = frame.offsetTop;
- this.left = frame.offsetLeft;
- this.width = frame.offsetWidth;
- this.height = height;
+ this.props.top = frame.offsetTop;
+ this.props.left = frame.offsetLeft;
+ this.props.width = frame.offsetWidth;
+ this.props.height = height;
// reposition axis
this.dom.axis.style.left = asSize(options.left, '0');
@@ -416,30 +383,6 @@ ItemSet.prototype._updateUngrouped = function _updateUngrouped() {
}
};
-/**
- * Get the foreground container element
- * @return {HTMLElement} foreground
- */
-ItemSet.prototype.getForeground = function getForeground() {
- return this.dom.foreground;
-};
-
-/**
- * Get the background container element
- * @return {HTMLElement} background
- */
-ItemSet.prototype.getBackground = function getBackground() {
- return this.dom.background;
-};
-
-/**
- * Get the axis container element
- * @return {HTMLElement} axis
- */
-ItemSet.prototype.getAxis = function getAxis() {
- return this.dom.axis;
-};
-
/**
* Get the element for the labelset
* @return {HTMLElement} labelSet
@@ -471,7 +414,7 @@ ItemSet.prototype.setItems = function setItems(items) {
if (oldItemsData) {
// unsubscribe from old dataset
util.forEach(this.itemListeners, function (callback, event) {
- oldItemsData.unsubscribe(event, callback);
+ oldItemsData.off(event, callback);
});
// remove all drawn items
@@ -552,7 +495,7 @@ ItemSet.prototype.setGroups = function setGroups(groups) {
// update the order of all items in each group
this._order();
- this.emit('change');
+ this.timeline.emitter.emit('change');
};
/**
@@ -630,7 +573,7 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
this._order();
this.stackDirty = true; // force re-stacking of all items next repaint
- this.emit('change');
+ this.timeline.emitter.emit('change');
};
/**
@@ -660,7 +603,7 @@ ItemSet.prototype._onRemove = function _onRemove(ids) {
// update order
this._order();
this.stackDirty = true; // force re-stacking of all items next repaint
- this.emit('change');
+ this.timeline.emitter.emit('change');
}
};
@@ -730,7 +673,7 @@ ItemSet.prototype._onAddGroups = function _onAddGroups(ids) {
}
});
- this.emit('change');
+ this.timeline.emitter.emit('change');
};
/**
@@ -751,7 +694,7 @@ ItemSet.prototype._onRemoveGroups = function _onRemoveGroups(ids) {
this.markDirty();
- this.emit('change');
+ this.timeline.emitter.emit('change');
};
/**
@@ -872,6 +815,7 @@ ItemSet.prototype._constructByEndArray = function _constructByEndArray(array) {
* Get the width of the group labels
* @return {Number} width
*/
+// TODO: is this function getLabelsWidth redundant?
ItemSet.prototype.getLabelsWidth = function getLabelsWidth() {
var width = 0;
@@ -882,14 +826,6 @@ ItemSet.prototype.getLabelsWidth = function getLabelsWidth() {
return width;
};
-/**
- * Get the height of the itemsets background
- * @return {Number} height
- */
-ItemSet.prototype.getBackgroundHeight = function getBackgroundHeight() {
- return this.height;
-};
-
/**
* Start dragging the selected events
* @param {Event} event
@@ -966,9 +902,10 @@ ItemSet.prototype._onDragStart = function (event) {
*/
ItemSet.prototype._onDrag = function (event) {
if (this.touchParams.itemProps) {
- var snap = this.options.snap || null,
+ var range = this.timeline.range,
+ snap = this.options.snap || null,
deltaX = event.gesture.deltaX,
- scale = (this.width / (this.range.end - this.range.start)),
+ scale = (this.props.width / (range.end - range.start)),
offset = deltaX / scale;
// move
@@ -1001,7 +938,7 @@ ItemSet.prototype._onDrag = function (event) {
// TODO: implement onMoving handler
this.stackDirty = true; // force re-stacking of all items next repaint
- this.emit('change');
+ this.timeline.emitter.emit('change');
event.stopPropagation();
}
@@ -1051,7 +988,7 @@ ItemSet.prototype._onDragEnd = function (event) {
if ('end' in props) props.item.data.end = props.end;
me.stackDirty = true; // force re-stacking of all items next repaint
- me.emit('change');
+ me.timeline.emitter.emit('change');
}
});
}
diff --git a/src/timeline/component/css/itemset.css b/src/timeline/component/css/itemset.css
index f4045a02..49c9b168 100644
--- a/src/timeline/component/css/itemset.css
+++ b/src/timeline/component/css/itemset.css
@@ -12,21 +12,31 @@
/**/
}
-.vis.timeline .background {
+.vis.timeline .background,
+.vis.timeline .foreground {
+ position: absolute;
+ width: 100%;
+ height: 100%;
}
.vis.timeline .foreground {
+ overflow: hidden;
}
.vis.timeline .axis {
- overflow: visible;
}
.vis.timeline .group {
position: relative;
box-sizing: border-box;
+ border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline .group:last-child {
+ border-bottom: none;
}
+/*
.vis.timeline.top .group {
border-top: 1px solid #bfbfbf;
border-bottom: none;
@@ -36,3 +46,4 @@
border-top: none;
border-bottom: 1px solid #bfbfbf;
}
+*/
\ No newline at end of file
diff --git a/src/timeline/component/css/labelset.css b/src/timeline/component/css/labelset.css
index e316ad84..4c0f30e8 100644
--- a/src/timeline/component/css/labelset.css
+++ b/src/timeline/component/css/labelset.css
@@ -18,17 +18,19 @@
box-sizing: border-box;
}
-.vis.timeline.top .labelset .vlabel {
- border-top: 1px solid #bfbfbf;
- border-bottom: none;
+.vis.timeline .labelset .vlabel {
+ border-bottom: 1px solid #bfbfbf;
}
-.vis.timeline.bottom .labelset .vlabel {
- border-top: none;
- border-bottom: 1px solid #bfbfbf;
+.vis.timeline .labelset .vlabel:last-child {
+ border-bottom: none;
}
.vis.timeline .labelset .vlabel .inner {
display: inline-block;
padding: 5px;
}
+
+.vis.timeline .labelset .vlabel .inner.hidden {
+ padding: 0;
+}
diff --git a/src/timeline/component/css/panel.css b/src/timeline/component/css/panel.css
index 902dd34b..a1064938 100644
--- a/src/timeline/component/css/panel.css
+++ b/src/timeline/component/css/panel.css
@@ -32,6 +32,7 @@
.vis.timeline .vispanel.right {
border-top-style: solid;
border-bottom-style: solid;
+ overflow: hidden;
}
.vis.timeline .vispanel.center,
diff --git a/src/timeline/component/item/ItemBox.js b/src/timeline/component/item/ItemBox.js
index 463814ff..1e7ecb75 100644
--- a/src/timeline/component/item/ItemBox.js
+++ b/src/timeline/component/item/ItemBox.js
@@ -78,17 +78,17 @@ ItemBox.prototype.repaint = function repaint() {
throw new Error('Cannot repaint item: no parent attached');
}
if (!dom.box.parentNode) {
- var foreground = this.parent.getForeground();
+ var foreground = this.parent.dom.foreground;
if (!foreground) throw new Error('Cannot repaint time axis: parent has no foreground container element');
foreground.appendChild(dom.box);
}
if (!dom.line.parentNode) {
- var background = this.parent.getBackground();
+ var background = this.parent.dom.background;
if (!background) throw new Error('Cannot repaint time axis: parent has no background container element');
background.appendChild(dom.line);
}
if (!dom.dot.parentNode) {
- var axis = this.parent.getAxis();
+ var axis = this.parent.dom.axis;
if (!background) throw new Error('Cannot repaint time axis: parent has no axis container element');
axis.appendChild(dom.dot);
}
diff --git a/src/timeline/component/item/ItemPoint.js b/src/timeline/component/item/ItemPoint.js
index 43651b1c..ba7d1a5b 100644
--- a/src/timeline/component/item/ItemPoint.js
+++ b/src/timeline/component/item/ItemPoint.js
@@ -76,7 +76,7 @@ ItemPoint.prototype.repaint = function repaint() {
throw new Error('Cannot repaint item: no parent attached');
}
if (!dom.point.parentNode) {
- var foreground = this.parent.getForeground();
+ var foreground = this.parent.dom.foreground;
if (!foreground) {
throw new Error('Cannot repaint time axis: parent has no foreground container element');
}
diff --git a/src/timeline/component/item/ItemRange.js b/src/timeline/component/item/ItemRange.js
index 6adb6acf..3ef554bd 100644
--- a/src/timeline/component/item/ItemRange.js
+++ b/src/timeline/component/item/ItemRange.js
@@ -69,7 +69,7 @@ ItemRange.prototype.repaint = function repaint() {
throw new Error('Cannot repaint item: no parent attached');
}
if (!dom.box.parentNode) {
- var foreground = this.parent.getForeground();
+ var foreground = this.parent.dom.foreground;
if (!foreground) {
throw new Error('Cannot repaint time axis: parent has no foreground container element');
}