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

HISTORY.md

@@ -6,6 +6,8 @@ http://visjs.org
 
 ### 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`, 
   `onRemove`, and `onMove`.
 - 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 to disable the drawing of nodes or edges on drag.
 
+
 ## 2014-07-07, version 3.0.0
 
 ### Timeline

docs/timeline.html

@@ -449,7 +449,21 @@ var options = {
     <td>margin.item</td>
     <td>Number</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>

lib/timeline/Stack.js

@@ -30,7 +30,7 @@ exports.orderByEnd = function(items) {
  * other.
  * @param {Item[]} 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.
  * @param {boolean} [force=false]
  *            If true, all items will be repositioned. If false (default), only
@@ -67,7 +67,7 @@ exports.stack = function(items, margin, force) {
 
         if (collidingItem != null) {
           // 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);
     }
@@ -78,7 +78,7 @@ exports.stack = function(items, margin, force) {
  * Adjust vertical positions of the items without stacking them
  * @param {Item[]} 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.
  */
 exports.nostack = function(items, margin) {
@@ -95,16 +95,14 @@ exports.nostack = function(items, margin) {
  * The items must have parameters left, width, top, and height.
  * @param {Item} a          The first 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
  */
 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);
 };

lib/timeline/component/Group.js

@@ -123,7 +123,7 @@ Group.prototype.getLabelWidth = function() {
 /**
  * Repaint this group
  * @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
  * @return {boolean} Returns true if the group is resized
  */
@@ -172,10 +172,10 @@ Group.prototype.redraw = function(range, margin, restack) {
         item.top -= offset;
       });
     }
-    height = max + margin.item / 2;
+    height = max + margin.item.vertical / 2;
   }
   else {
-    height = margin.axis + margin.item;
+    height = margin.axis + margin.item.vertical;
   }
   height = Math.max(height, this.props.label.height);
 

lib/timeline/component/ItemSet.js

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