Browse Source

Implemented option `stack` to enable/disable stacking of items.

css_transitions
jos 10 years ago
parent
commit
284013c3e3
7 changed files with 63 additions and 8 deletions
  1. +1
    -0
      HISTORY.md
  2. +28
    -4
      dist/vis.js
  3. +7
    -0
      docs/timeline.html
  4. +1
    -0
      src/timeline/Timeline.js
  5. +6
    -1
      src/timeline/component/Group.js
  6. +19
    -3
      src/timeline/stack.js
  7. +1
    -0
      test/timeline_groups.html

+ 1
- 0
HISTORY.md View File

@ -10,6 +10,7 @@ http://visjs.org
- Great performance improvements. - Great performance improvements.
- Improved layout of box-items inside groups. - Improved layout of box-items inside groups.
- Items can now be dragged from one group to another. - Items can now be dragged from one group to another.
- Implemented option `stack` to enable/disable stacking of items.
- Option `editable` can now be used to enable/disable individual manipulation - Option `editable` can now be used to enable/disable individual manipulation
actions (`add`, `updateTime`, `updateGroup`, `remove`). actions (`add`, `updateTime`, `updateGroup`, `remove`).
- Function `setWindow` now accepts an object with properties `start` and `end`. - Function `setWindow` now accepts an object with properties `start` and `end`.

+ 28
- 4
dist/vis.js View File

@ -2488,14 +2488,14 @@ stack.orderByEnd = function orderByEnd(items) {
}; };
/** /**
* Adjust vertical positions of the events such that they don't overlap each
* Adjust vertical positions of the items such that they don't overlap each
* other. * other.
* @param {Item[]} items * @param {Item[]} items
* All visible items * All visible items
* @param {{item: number, axis: number}} margin * @param {{item: number, axis: number}} margin
* Margins between items and between items and the axis. * Margins between items and between items and the axis.
* @param {boolean} [force=false] * @param {boolean} [force=false]
* If true, all items will be re-stacked. If false (default), only
* If true, all items will be repositioned. If false (default), only
* items having a top===null will be re-stacked * items having a top===null will be re-stacked
*/ */
stack.stack = function _stack (items, margin, force) { stack.stack = function _stack (items, margin, force) {
@ -2528,7 +2528,7 @@ stack.stack = function _stack (items, margin, force) {
} }
if (collidingItem != null) { if (collidingItem != null) {
// There is a collision. Reposition the event above the colliding element
// There is a collision. Reposition the items above the colliding element
item.top = collidingItem.top + collidingItem.height + margin.item; item.top = collidingItem.top + collidingItem.height + margin.item;
} }
} while (collidingItem); } while (collidingItem);
@ -2536,6 +2536,22 @@ stack.stack = function _stack (items, margin, force) {
} }
}; };
/**
* Adjust vertical positions of the items without stacking them
* @param {Item[]} items
* All visible items
* @param {{item: number, axis: number}} margin
* Margins between items and between items and the axis.
*/
stack.nostack = function nostack (items, margin) {
var i, iMax;
// reset top position of all items
for (i = 0, iMax = items.length; i < iMax; i++) {
items[i].top = margin.axis;
}
};
/** /**
* Test if the two provided items collide * Test if the two provided items collide
* The items must have parameters left, width, top, and height. * The items must have parameters left, width, top, and height.
@ -5405,6 +5421,8 @@ ItemSet.prototype._onRemoveGroups = function _onRemoveGroups(ids) {
} }
}); });
this.markDirty();
this.emit('change'); this.emit('change');
}; };
@ -6795,7 +6813,12 @@ 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);
// reposition visible items vertically // reposition visible items vertically
stack.stack(this.visibleItems, margin, restack);
if (this.itemSet.options.stack) { // TODO: ugly way to access options...
stack.stack(this.visibleItems, margin, restack);
}
else { // no stacking
stack.nostack(this.visibleItems, margin);
}
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++) {
var item = this.visibleItems[i]; var item = this.visibleItems[i];
@ -7135,6 +7158,7 @@ function Timeline (container, items, options) {
orientation: 'bottom', orientation: 'bottom',
direction: 'horizontal', // 'horizontal' or 'vertical' direction: 'horizontal', // 'horizontal' or 'vertical'
autoResize: true, autoResize: true,
stacking: true,
editable: { editable: {
updateTime: false, updateTime: false,

+ 7
- 0
docs/timeline.html View File

@ -564,6 +564,13 @@ var options = {
visible.</td> visible.</td>
</tr> </tr>
<tr>
<td>stack</td>
<td>Boolean</td>
<td>true</td>
<td>If true (default), items will be stacked on top of each other such that they are not overlapping.</td>
</tr>
<tr> <tr>
<td>start</td> <td>start</td>
<td>Date | Number | String</td> <td>Date | Number | String</td>

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

@ -15,6 +15,7 @@ function Timeline (container, items, options) {
orientation: 'bottom', orientation: 'bottom',
direction: 'horizontal', // 'horizontal' or 'vertical' direction: 'horizontal', // 'horizontal' or 'vertical'
autoResize: true, autoResize: true,
stacking: true,
editable: { editable: {
updateTime: false, updateTime: false,

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

@ -123,7 +123,12 @@ 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);
// reposition visible items vertically // reposition visible items vertically
stack.stack(this.visibleItems, margin, restack);
if (this.itemSet.options.stack) { // TODO: ugly way to access options...
stack.stack(this.visibleItems, margin, restack);
}
else { // no stacking
stack.nostack(this.visibleItems, margin);
}
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++) {
var item = this.visibleItems[i]; var item = this.visibleItems[i];

+ 19
- 3
src/timeline/stack.js View File

@ -28,14 +28,14 @@ stack.orderByEnd = function orderByEnd(items) {
}; };
/** /**
* Adjust vertical positions of the events such that they don't overlap each
* Adjust vertical positions of the items such that they don't overlap each
* other. * other.
* @param {Item[]} items * @param {Item[]} items
* All visible items * All visible items
* @param {{item: number, axis: number}} margin * @param {{item: number, axis: number}} margin
* Margins between items and between items and the axis. * Margins between items and between items and the axis.
* @param {boolean} [force=false] * @param {boolean} [force=false]
* If true, all items will be re-stacked. If false (default), only
* If true, all items will be repositioned. If false (default), only
* items having a top===null will be re-stacked * items having a top===null will be re-stacked
*/ */
stack.stack = function _stack (items, margin, force) { stack.stack = function _stack (items, margin, force) {
@ -68,7 +68,7 @@ stack.stack = function _stack (items, margin, force) {
} }
if (collidingItem != null) { if (collidingItem != null) {
// There is a collision. Reposition the event above the colliding element
// There is a collision. Reposition the items above the colliding element
item.top = collidingItem.top + collidingItem.height + margin.item; item.top = collidingItem.top + collidingItem.height + margin.item;
} }
} while (collidingItem); } while (collidingItem);
@ -76,6 +76,22 @@ stack.stack = function _stack (items, margin, force) {
} }
}; };
/**
* Adjust vertical positions of the items without stacking them
* @param {Item[]} items
* All visible items
* @param {{item: number, axis: number}} margin
* Margins between items and between items and the axis.
*/
stack.nostack = function nostack (items, margin) {
var i, iMax;
// reset top position of all items
for (i = 0, iMax = items.length; i < iMax; i++) {
items[i].top = margin.axis;
}
};
/** /**
* Test if the two provided items collide * Test if the two provided items collide
* The items must have parameters left, width, top, and height. * The items must have parameters left, width, top, and height.

+ 1
- 0
test/timeline_groups.html View File

@ -78,6 +78,7 @@
updateTime: true, updateTime: true,
updateGroup: true updateGroup: true
}, },
stack: false,
//height: 200, //height: 200,
groupOrder: 'content' groupOrder: 'content'
}; };

Loading…
Cancel
Save