From f7bddb074213eca7c1042318ae02493c618b7e6c Mon Sep 17 00:00:00 2001 From: josdejong Date: Fri, 4 Apr 2014 10:35:42 +0200 Subject: [PATCH] Fixed initial stacking of items in groups --- src/timeline/component/Group.js | 3 +- src/timeline/component/ItemSet.js | 57 +------------------ src/timeline/component/item/ItemBox.js | 4 +- src/timeline/component/item/ItemPoint.js | 2 +- src/timeline/component/item/ItemRange.js | 4 +- .../component/item/ItemRangeOverflow.js | 4 +- test/timeline.html | 6 ++ 7 files changed, 17 insertions(+), 63 deletions(-) diff --git a/src/timeline/component/Group.js b/src/timeline/component/Group.js index 78a3d2ec..2a8084da 100644 --- a/src/timeline/component/Group.js +++ b/src/timeline/component/Group.js @@ -64,9 +64,10 @@ Group.prototype.setItems = function setItems(items) { var itemSetOptions = Object.create(this.options); this.itemSet = new ItemSet(itemSetOptions); this.itemSet.on('change', this.emit.bind(this, 'change')); // propagate change event - if (this.range) this.itemSet.setRange(this.range); this.contentPanel.appendChild(this.itemSet); + if (this.range) this.itemSet.setRange(this.range); + this.view = new DataView(items, { filter: function (item) { return item.group == groupId; diff --git a/src/timeline/component/ItemSet.js b/src/timeline/component/ItemSet.js index 74881565..7be528c1 100644 --- a/src/timeline/component/ItemSet.js +++ b/src/timeline/component/ItemSet.js @@ -46,7 +46,6 @@ function ItemSet(options) { this.queue = {}; // queue with id/actions: 'add', 'update', 'delete' this.stack = new Stack(Object.create(this.options)); this.stackDirty = true; // if true, all items will be restacked on next repaint - this.conversion = null; this.touchParams = {}; // stores properties while dragging @@ -174,8 +173,6 @@ ItemSet.prototype.repaint = function repaint() { orientation = this.getOption('orientation'), frame = this.frame; - this._updateConversion(); - if (!frame) { frame = document.createElement('div'); frame['timeline-itemset'] = this; @@ -477,11 +474,6 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) { // update item if (!constructor || !(item instanceof constructor)) { // item type has changed, hide and delete the item - if (!('hide' in item)) { - console.log('item has no hide?!', item, Object.keys(items)) - console.trace() - } - item.hide(); item = null; } @@ -560,52 +552,6 @@ ItemSet.prototype._order = function _order() { //console.log('byEnd', this.orderedItems.byEnd.map(function (item) {return item.id})) }; -/** - * Calculate the scale and offset to convert a position on screen to the - * corresponding date and vice versa. - * After the method _updateConversion is executed once, the methods toTime - * and toScreen can be used. - * @private - */ -ItemSet.prototype._updateConversion = function _updateConversion() { - var range = this.range; - if (!range) { - throw new Error('No range configured'); - } - - if (range.conversion) { - this.conversion = range.conversion(this.width); - } - else { - this.conversion = Range.conversion(range.start, range.end, this.width); - } -}; - -/** - * Convert a position on screen (pixels) to a datetime - * Before this method can be used, the method _updateConversion must be - * executed once. - * @param {int} x Position on the screen in pixels - * @return {Date} time The datetime the corresponds with given position x - */ -ItemSet.prototype.toTime = function toTime(x) { - var conversion = this.conversion; - return new Date(x / conversion.scale + conversion.offset); -}; - -/** - * Convert a datetime (Date object) into a position on the screen - * Before this method can be used, the method _updateConversion must be - * executed once. - * @param {Date} time A date - * @return {int} x The position on the screen in pixels which corresponds - * with the given date. - */ -ItemSet.prototype.toScreen = function toScreen(time) { - var conversion = this.conversion; - return (time.valueOf() - conversion.offset) * conversion.scale; -}; - /** * Start dragging the selected events * @param {Event} event @@ -666,7 +612,8 @@ ItemSet.prototype._onDrag = function (event) { if (this.touchParams.itemProps) { var snap = this.options.snap || null, deltaX = event.gesture.deltaX, - offset = deltaX / this.conversion.scale; + scale = (this.width / (this.range.end - this.range.start)), + offset = deltaX / scale; // move this.touchParams.itemProps.forEach(function (props) { diff --git a/src/timeline/component/item/ItemBox.js b/src/timeline/component/item/ItemBox.js index bd58d7c1..ff87f7e9 100644 --- a/src/timeline/component/item/ItemBox.js +++ b/src/timeline/component/item/ItemBox.js @@ -172,7 +172,7 @@ ItemBox.prototype.hide = function hide() { * @Override */ ItemBox.prototype.repositionX = function repositionX() { - var start = this.parent.toScreen(this.data.start), + var start = this.defaultOptions.toScreen(this.data.start), align = this.options.align || this.defaultOptions.align, left, box = this.dom.box, @@ -229,4 +229,4 @@ ItemBox.prototype.repositionY = function repositionY () { } dot.style.top = (-this.props.dot.height / 2) + 'px'; -} +}; diff --git a/src/timeline/component/item/ItemPoint.js b/src/timeline/component/item/ItemPoint.js index 742c1a91..3fe16be1 100644 --- a/src/timeline/component/item/ItemPoint.js +++ b/src/timeline/component/item/ItemPoint.js @@ -163,7 +163,7 @@ ItemPoint.prototype.hide = function hide() { * @Override */ ItemPoint.prototype.repositionX = function repositionX() { - var start = this.parent.toScreen(this.data.start); + var start = this.defaultOptions.toScreen(this.data.start); this.left = start - this.props.dot.width / 2; diff --git a/src/timeline/component/item/ItemRange.js b/src/timeline/component/item/ItemRange.js index 184c5902..122e1304 100644 --- a/src/timeline/component/item/ItemRange.js +++ b/src/timeline/component/item/ItemRange.js @@ -154,8 +154,8 @@ ItemRange.prototype.hide = function hide() { ItemRange.prototype.repositionX = function repositionX() { var props = this.props, parentWidth = this.parent.width, - start = this.parent.toScreen(this.data.start), - end = this.parent.toScreen(this.data.end), + start = this.defaultOptions.toScreen(this.data.start), + end = this.defaultOptions.toScreen(this.data.end), padding = 'padding' in this.options ? this.options.padding : this.defaultOptions.padding, contentLeft; diff --git a/src/timeline/component/item/ItemRangeOverflow.js b/src/timeline/component/item/ItemRangeOverflow.js index 64e54f26..a94c7cab 100644 --- a/src/timeline/component/item/ItemRangeOverflow.js +++ b/src/timeline/component/item/ItemRangeOverflow.js @@ -29,8 +29,8 @@ ItemRangeOverflow.prototype.baseClassName = 'item rangeoverflow'; */ ItemRangeOverflow.prototype.repositionX = function repositionX() { var parentWidth = this.parent.width, - start = this.parent.toScreen(this.data.start), - end = this.parent.toScreen(this.data.end), + start = this.defaultOptions.toScreen(this.data.start), + end = this.defaultOptions.toScreen(this.data.end), padding = 'padding' in this.options ? this.options.padding : this.defaultOptions.padding, contentLeft; diff --git a/test/timeline.html b/test/timeline.html index c6b405df..a52af1c8 100644 --- a/test/timeline.html +++ b/test/timeline.html @@ -40,6 +40,8 @@