Browse Source

Fixed #216: Added options `margin.item.horizontal` and `margin.item.vertical`, which allows to specify different margins horizontally/vertically.

v3_develop
jos 10 years ago
parent
commit
dc214e9181
8 changed files with 13897 additions and 13844 deletions
  1. +3
    -0
      HISTORY.md
  2. +13822
    -13804
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +16
    -16
      dist/vis.min.js
  5. +15
    -1
      docs/timeline.html
  6. +10
    -12
      lib/timeline/Stack.js
  7. +3
    -3
      lib/timeline/component/Group.js
  8. +27
    -7
      lib/timeline/component/ItemSet.js

+ 3
- 0
HISTORY.md View File

@ -6,6 +6,8 @@ http://visjs.org
### Timeline ### Timeline
- Added options `margin.item.horizontal` and `margin.item.vertical`, which
allows to specify different margins horizontally/vertically.
- Removed check for number of arguments in callbacks `onAdd`, `onUpdate`, - Removed check for number of arguments in callbacks `onAdd`, `onUpdate`,
`onRemove`, and `onMove`. `onRemove`, and `onMove`.
- Fixed items in groups sometimes being displayed but not positioned correctly. - Fixed items in groups sometimes being displayed but not positioned correctly.
@ -19,6 +21,7 @@ http://visjs.org
- Option for inherited edge colors from connected nodes. - Option for inherited edge colors from connected nodes.
- Option to disable the drawing of nodes or edges on drag. - Option to disable the drawing of nodes or edges on drag.
## 2014-07-07, version 3.0.0 ## 2014-07-07, version 3.0.0
### Timeline ### Timeline

+ 13822
- 13804
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 16
- 16
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 15
- 1
docs/timeline.html View File

@ -449,7 +449,21 @@ var options = {
<td>margin.item</td> <td>margin.item</td>
<td>Number</td> <td>Number</td>
<td>10</td> <td>10</td>
<td>The minimal margin in pixels between items.</td>
<td>The minimal margin in pixels between items in both horizontal and vertical direction.</td>
</tr>
<tr>
<td>margin.item.horizontal</td>
<td>Number</td>
<td>10</td>
<td>The minimal horizontal margin in pixels between items.</td>
</tr>
<tr>
<td>margin.item.vertical</td>
<td>Number</td>
<td>10</td>
<td>The minimal vertical margin in pixels between items.</td>
</tr> </tr>
<tr> <tr>

+ 10
- 12
lib/timeline/Stack.js View File

@ -30,7 +30,7 @@ exports.orderByEnd = function(items) {
* other. * other.
* @param {Item[]} items * @param {Item[]} items
* All visible items * All visible items
* @param {{item: number, axis: number}} margin
* @param {{item: {horizontal: number, vertical: 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 repositioned. If false (default), only * If true, all items will be repositioned. If false (default), only
@ -67,7 +67,7 @@ exports.stack = function(items, margin, force) {
if (collidingItem != null) { if (collidingItem != null) {
// There is a collision. Reposition the items 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.vertical;
} }
} while (collidingItem); } while (collidingItem);
} }
@ -78,7 +78,7 @@ exports.stack = function(items, margin, force) {
* Adjust vertical positions of the items without stacking them * Adjust vertical positions of the items without stacking them
* @param {Item[]} items * @param {Item[]} items
* All visible items * All visible items
* @param {{item: number, axis: number}} margin
* @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
* Margins between items and between items and the axis. * Margins between items and between items and the axis.
*/ */
exports.nostack = function(items, margin) { exports.nostack = function(items, margin) {
@ -95,16 +95,14 @@ exports.nostack = function(items, margin) {
* The items must have parameters left, width, top, and height. * The items must have parameters left, width, top, and height.
* @param {Item} a The first item * @param {Item} a The first item
* @param {Item} b The second item * @param {Item} b The second item
* @param {Number} margin A minimum required margin.
* If margin is provided, the two items will be
* marked colliding when they overlap or
* when the margin between the two is smaller than
* the requested margin.
* @param {{horizontal: number, vertical: number}} margin
* An object containing a horizontal and vertical
* minimum required margin.
* @return {boolean} true if a and b collide, else false * @return {boolean} true if a and b collide, else false
*/ */
exports.collision = function(a, b, margin) { exports.collision = function(a, b, margin) {
return ((a.left - margin + EPSILON) < (b.left + b.width) &&
(a.left + a.width + margin - EPSILON) > b.left &&
(a.top - margin + EPSILON) < (b.top + b.height) &&
(a.top + a.height + margin - EPSILON) > b.top);
return ((a.left - margin.horizontal + EPSILON) < (b.left + b.width) &&
(a.left + a.width + margin.horizontal - EPSILON) > b.left &&
(a.top - margin.vertical + EPSILON) < (b.top + b.height) &&
(a.top + a.height + margin.vertical - EPSILON) > b.top);
}; };

+ 3
- 3
lib/timeline/component/Group.js View File

@ -123,7 +123,7 @@ Group.prototype.getLabelWidth = function() {
/** /**
* Repaint this group * Repaint this group
* @param {{start: number, end: number}} range * @param {{start: number, end: number}} range
* @param {{item: number, axis: number}} margin
* @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
* @param {boolean} [restack=false] Force restacking of all items * @param {boolean} [restack=false] Force restacking of all items
* @return {boolean} Returns true if the group is resized * @return {boolean} Returns true if the group is resized
*/ */
@ -172,10 +172,10 @@ Group.prototype.redraw = function(range, margin, restack) {
item.top -= offset; item.top -= offset;
}); });
} }
height = max + margin.item / 2;
height = max + margin.item.vertical / 2;
} }
else { else {
height = margin.axis + margin.item;
height = margin.axis + margin.item.vertical;
} }
height = Math.max(height, this.props.label.height); height = Math.max(height, this.props.label.height);

+ 27
- 7
lib/timeline/component/ItemSet.js View File

@ -52,7 +52,10 @@ function ItemSet(body, options) {
}, },
margin: { margin: {
item: 10,
item: {
horizontal: 10,
vertical: 10
},
axis: 20 axis: 20
}, },
padding: 5 padding: 5
@ -211,8 +214,15 @@ ItemSet.prototype._create = function(){
* {Number} margin.axis * {Number} margin.axis
* Margin between the axis and the items in pixels. * Margin between the axis and the items in pixels.
* Default is 20. * Default is 20.
* {Number} margin.item.horizontal
* Horizontal margin between items in pixels.
* Default is 10.
* {Number} margin.item.vertical
* Vertical Margin between items in pixels.
* Default is 10.
* {Number} margin.item * {Number} margin.item
* Margin between items in pixels. Default is 10.
* Margin between items in pixels in both horizontal
* and vertical direction. Default is 10.
* {Number} margin * {Number} margin
* Set margin for both axis and items in pixels. * Set margin for both axis and items in pixels.
* {Number} padding * {Number} padding
@ -254,10 +264,20 @@ ItemSet.prototype.setOptions = function(options) {
if ('margin' in options) { if ('margin' in options) {
if (typeof options.margin === 'number') { if (typeof options.margin === 'number') {
this.options.margin.axis = options.margin; this.options.margin.axis = options.margin;
this.options.margin.item = options.margin;
this.options.margin.item.horizontal = options.margin;
this.options.margin.item.vertical = options.margin;
} }
else if (typeof options.margin === 'object'){
util.selectiveExtend(['axis', 'item'], this.options.margin, options.margin);
else if (typeof options.margin === 'object') {
util.selectiveExtend(['axis'], this.options.margin, options.margin);
if ('item' in options.margin) {
if (typeof options.margin.item === 'number') {
this.options.margin.item.horizontal = options.margin.item;
this.options.margin.item.vertical = options.margin.item;
}
else if (typeof options.margin.item === 'object') {
util.selectiveExtend(['horizontal', 'vertical'], this.options.margin.item, options.margin.item);
}
}
} }
} }
@ -448,10 +468,10 @@ ItemSet.prototype.redraw = function() {
}, },
nonFirstMargin = { nonFirstMargin = {
item: margin.item, item: margin.item,
axis: margin.item / 2
axis: margin.item.vertical / 2
}, },
height = 0, height = 0,
minHeight = margin.axis + margin.item;
minHeight = margin.axis + margin.item.vertical;
util.forEach(this.groups, function (group) { util.forEach(this.groups, function (group) {
var groupMargin = (group == firstGroup) ? firstMargin : nonFirstMargin; var groupMargin = (group == firstGroup) ? firstMargin : nonFirstMargin;
var groupResized = group.redraw(range, groupMargin, restack); var groupResized = group.redraw(range, groupMargin, restack);

Loading…
Cancel
Save