From d55fb71c7f5ac2467d8c57bd6973eb180f7b5be9 Mon Sep 17 00:00:00 2001 From: josdejong Date: Wed, 24 Apr 2013 21:15:17 +0200 Subject: [PATCH] Changed the dom of the itemset, added an axis element --- README.md | 2 +- src/component/css/item.css | 6 +++ src/component/item/itembox.js | 2 +- src/component/itemset.js | 51 ++++++++++++++++------ src/util.js | 18 ++++++++ src/visualization/timeline.js | 4 +- test/timeline.html | 15 +------ vis.js | 79 +++++++++++++++++++++++++++-------- vis.min.js | 8 ++-- 9 files changed, 135 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 95296e82..5c7e64d6 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ of the project. {id: 6, content: 'item 6', start: '2013-04-27'} ]; var options = {}; - var timeline = new Timeline(container, data, options); + var timeline = new vis.Timeline(container, data, options); diff --git a/src/component/css/item.css b/src/component/css/item.css index 5bf6f12a..7d16561b 100644 --- a/src/component/css/item.css +++ b/src/component/css/item.css @@ -1,6 +1,9 @@ .graph .itemset { position: absolute; + padding: 0; + margin: 0; + overflow: hidden; } .graph .background { @@ -9,6 +12,9 @@ .graph .foreground { } +.graph .itemset-axis { + position: absolute; +} .graph .item { position: absolute; diff --git a/src/component/item/itembox.js b/src/component/item/itembox.js index 9c1591ce..bc864cf7 100644 --- a/src/component/item/itembox.js +++ b/src/component/item/itembox.js @@ -86,7 +86,7 @@ ItemBox.prototype.repaint = function () { changed = true; } if (!dom.dot.parentNode) { - foreground.appendChild(dom.dot); + this.parent.dom.axis.appendChild(dom.dot); changed = true; } diff --git a/src/component/itemset.js b/src/component/itemset.js index f775b227..0af784b0 100644 --- a/src/component/itemset.js +++ b/src/component/itemset.js @@ -130,26 +130,41 @@ ItemSet.prototype.repaint = function () { frame.appendChild(foreground); this.dom.foreground = foreground; + // create axis panel + var axis = document.createElement('div'); + axis.className = 'itemset-axis'; + //frame.appendChild(axis); + this.dom.axis = axis; + this.frame = frame; changed += 1; } + + if (!this.parent) { + throw new Error('Cannot repaint itemset: no parent attached'); + } + var parentContainer = this.parent.getContainer(); + if (!parentContainer) { + throw new Error('Cannot repaint itemset: parent has no container element'); + } if (!frame.parentNode) { - if (!this.parent) { - throw new Error('Cannot repaint itemset: no parent attached'); - } - var parentContainer = this.parent.getContainer(); - if (!parentContainer) { - throw new Error('Cannot repaint itemset: parent has no container element'); - } parentContainer.appendChild(frame); changed += 1; } + if (!this.dom.axis.parentNode) { + parentContainer.appendChild(this.dom.axis); + changed += 1; + } + // reposition frame changed += update(frame.style, 'height', asSize(options.height, this.height + 'px')); changed += update(frame.style, 'top', asSize(options.top, '0px')); changed += update(frame.style, 'left', asSize(options.left, '0px')); changed += update(frame.style, 'width', asSize(options.width, '100%')); + // reposition axis + changed += update(this.dom.axis.style, 'top', asSize(options.top, '0px')); + this._updateConversion(); var me = this, @@ -256,6 +271,7 @@ ItemSet.prototype.reflow = function () { var changed = 0, options = this.options, update = util.updateProperty, + asNumber = util.option.asNumber, frame = this.frame; if (frame) { @@ -269,26 +285,37 @@ ItemSet.prototype.reflow = function () { // TODO: only update the stack when there are changed items this.stack.update(); + var maxHeight = asNumber(options.maxHeight); + var height; if (options.height != null) { - changed += update(this, 'height', frame.offsetHeight); + height = frame.offsetHeight; + if (maxHeight != null) { + height = Math.min(height, maxHeight); + } + changed += update(this, 'height', height); } else { // height is not specified, determine the height from the height and positioned items var frameHeight = this.height; - var maxHeight = 0; + height = 0; if (options.orientation == 'top') { util.forEach(this.items, function (item) { - maxHeight = Math.max(maxHeight, item.top + item.height); + height = Math.max(height, item.top + item.height); }); } else { // orientation == 'bottom' util.forEach(this.items, function (item) { - maxHeight = Math.max(maxHeight, frameHeight - item.top); + height = Math.max(height, frameHeight - item.top); }); } + height += options.margin.axis; + + if (maxHeight != null) { + height = Math.min(height, maxHeight); + } - changed += update(this, 'height', maxHeight + options.margin.axis); + changed += update(this, 'height', height); } // calculate height from items diff --git a/src/util.js b/src/util.js index 367ef447..fe0d7809 100644 --- a/src/util.js +++ b/src/util.js @@ -519,6 +519,24 @@ util.option.asBoolean = function (value, defaultValue) { return defaultValue || null; }; +/** + * Cast a value as number + * @param {Boolean | function | undefined} value + * @param {Number} [defaultValue] + * @returns {Number} number + */ +util.option.asNumber = function (value, defaultValue) { + if (typeof value == 'function') { + value = value(); + } + + if (value != null) { + return Number(value); + } + + return defaultValue || null; +}; + /** * Cast a value as string * @param {String | function | undefined} value diff --git a/src/visualization/timeline.js b/src/visualization/timeline.js index 4f725669..3ba18ade 100644 --- a/src/visualization/timeline.js +++ b/src/visualization/timeline.js @@ -50,7 +50,7 @@ function Timeline (container, data, options) { // TODO: put the listeners in setOptions, be able to dynamically change with options moveable and zoomable // time axis - this.timeaxis = new TimeAxis(this.main, null, { + this.timeaxis = new TimeAxis(this.main, [], { orientation: this.options.orientation, range: this.range }); @@ -62,12 +62,12 @@ function Timeline (container, data, options) { orientation: this.options.orientation }); this.itemset.setRange(this.range); + this.controller.add(this.itemset); // set data if (data) { this.setData(data); } - this.controller.add(this.itemset); this.setOptions(options); } diff --git a/test/timeline.html b/test/timeline.html index 256e0ca7..f0b5a552 100644 --- a/test/timeline.html +++ b/test/timeline.html @@ -28,21 +28,10 @@