From 3bc3d164dfd86aa06509c3dd896454524ed57e91 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sat, 7 Oct 2017 17:25:18 +0300
Subject: [PATCH] Drag object in to item (#3506)

* Make items redraws return queues

* Parallel initial items redraw

* Seperate read and write actions in items

* Parallel all items redraws

* Remove comments

* Fix linting comments

* Fix redraws on actions

* Seperate group read and write

* Add objects that can be dropped to items

* Move example

* Fix group get/set group properties

* Add documentation

* Remove console.log

* return Group.js changes

* Fix review comments

* Fix example

* Update drag&drop.html
---
 docs/timeline/index.html               |   9 ++
 examples/timeline/other/drag&drop.html |  90 ++++++++++++----
 lib/timeline/Core.js                   |  11 +-
 lib/timeline/component/ItemSet.js      | 136 ++++++++++++++-----------
 lib/timeline/optionsTimeline.js        |   1 +
 5 files changed, 163 insertions(+), 84 deletions(-)

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index e76267de..f30ddbe2 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -913,6 +913,14 @@ function (option, path) {
       </td>
     </tr>
 
+    <tr>
+        <td>onDropObjectOnItem</td>
+        <td>function</td>
+        <td>none</td>
+        <td>Callback function triggered when an object containing <code>target:'item'</code> in its drag data is dropped in to a timeline item.
+        </td>
+      </tr>
+
     <tr>
       <td>onUpdate</td>
       <td>function</td>
@@ -1823,6 +1831,7 @@ var items = new vis.DataSet([
   <ul>
     <li><code>onAdd(item, callback)</code> Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.</li>
     <li><code>onUpdate(item, callback)</code> Fired when an item is about to be updated. This function typically has to show a dialog where the user change the item. If not implemented, nothing happens.</li>
+    <li><code>onDropObjectOnItem(objectData, item)</code> Fired when an object is dropped in to an existing timeline item.</li>
     <li><code>onMove(item, callback)</code> Fired when an item has been moved. If not implemented, the move action will be accepted.</li>
     <li><code>onMoving(item, callback)</code> Fired repeatedly while an item is being moved (dragged). Can be used to adjust the items start, end, and/or group to allowed regions.</li>
     <li><code>onRemove(item, callback)</code> Fired when an item is about to be deleted. If not implemented, the item will be always removed.</li>
diff --git a/examples/timeline/other/drag&drop.html b/examples/timeline/other/drag&drop.html
index ab0d589d..fa323156 100644
--- a/examples/timeline/other/drag&drop.html
+++ b/examples/timeline/other/drag&drop.html
@@ -27,6 +27,27 @@
       font-size: inherit;
       cursor: move;
     }
+    li.object-item {
+      list-style: none;
+      width: 150px;
+      color: #1A1A1A;
+      background-color: #D5DDF6;
+      border: 1px solid #97B0F8;
+      border-radius: 2px;
+      margin-bottom: 5px;
+      padding: 5px 12px;
+    }
+    li.object-item:before {
+      content: "≣";
+      font-family: Arial, sans-serif;
+      display: inline-block;
+      font-size: inherit;
+      cursor: move;
+    }
+    .items-panel {
+      display: flex;
+      justify-content: space-around;
+    }
   </style>
 </head>
 
@@ -37,23 +58,33 @@
 <p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set  the item's information as you want this way.</p>
 
 <div id="mytimeline" ></div>
-<div>
-  <h3>Items:</h3>
-  <ul class="items">
-    <li draggable="true" class="item">
-      item 1 - box
-    </li>
-    <li draggable="true" class="item">
-      item 2 - point
-    </li>
-    <li draggable="true" class="item">
-      item 3 - range
-    </li>
-    <li draggable="true" class="item">
-      item 3 - range - fixed times - <br>
-      (start: now, end: now + 10 min)
+
+<div class='items-panel'>
+  <div class='side'>
+    <h3>Items:</h3>
+    <ul class="items">
+      <li draggable="true" class="item">
+        item 1 - box
+      </li>
+      <li draggable="true" class="item">
+        item 2 - point
+      </li>
+      <li draggable="true" class="item">
+        item 3 - range
+      </li>
+      <li draggable="true" class="item">
+        item 3 - range - fixed times - <br>
+        (start: now, end: now + 10 min)
+      </li>
+    </ul>
+  </div>
+
+  <div class='side'>
+    <h3>Object with "target:'item'":</h3>
+    <li draggable="true" class="object-item">
+      object with target:'item'
     </li>
-  </ul>
+  </div>
 </div>
 
 <script>
@@ -99,7 +130,11 @@
     start: new Date(),
     end: new Date(1000*60*60*24 + (new Date()).valueOf()),
     editable: true,
-    orientation: 'top'
+    orientation: 'top',
+    onDropObjectOnItem: function(objectData, item, callback) {
+      if (!item) { return; }
+      alert('dropped object with content: "' + objectData.content + '" to item: "' + item.content + '"');
+    }
   };
 
   // create a Timeline
@@ -107,7 +142,7 @@
   timeline1 = new vis.Timeline(container, items, groups, options);
 
   function handleDragStart(event) {
-    dragSrcEl = event.target;
+    var dragSrcEl = event.target;
 
     event.dataTransfer.effectAllowed = 'move';
     var itemType = event.target.innerHTML.split('-')[1].trim();
@@ -122,17 +157,34 @@
       item.start = new Date();
       item.end = new Date(1000*60*10 + (new Date()).valueOf());
     }
-
     event.dataTransfer.setData("text", JSON.stringify(item));
   }
 
+  function handleObjectItemDragStart(event) {
+    var dragSrcEl = event.target;
+    
+    event.dataTransfer.effectAllowed = 'move';
+    var objectItem = {
+      content: 'objectItemData',
+      target: 'item'
+    };
+    event.dataTransfer.setData("text", JSON.stringify(objectItem));
+  }
+
   var items = document.querySelectorAll('.items .item');
 
+  var objectItems = document.querySelectorAll('.object-item');
+
   for (var i = items.length - 1; i >= 0; i--) {
     var item = items[i];
     item.addEventListener('dragstart', handleDragStart.bind(this), false);
   }
 
+  for (var i = objectItems.length - 1; i >= 0; i--) {
+    var objectItem = objectItems[i];
+    objectItem.addEventListener('dragstart', handleObjectItemDragStart.bind(this), false);
+  }
+
 </script>
 
 </body>
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 65b07f5e..b266ef7d 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -291,10 +291,10 @@ Core.prototype._create = function (container) {
     // prevent redirect to blank page - Firefox
     if(event.preventDefault) { event.preventDefault(); }
     if(event.stopPropagation) { event.stopPropagation(); }
-    // return when dropping non-vis items 
+    // return when dropping non-vis items
     try {
       var itemData = JSON.parse(event.dataTransfer.getData("text"))
-      if (!itemData.content) return
+      if (!itemData || !itemData.content) return
     } catch (err) {
       return false;
     }
@@ -303,8 +303,13 @@ Core.prototype._create = function (container) {
     event.center = {
       x: event.clientX,
       y: event.clientY
+    };
+
+    if (itemData.target !== 'item') {
+      me.itemSet._onAddItem(event);
+    } else {
+      me.itemSet._onDropObjectOnItem(event);
     }
-    me.itemSet._onAddItem(event);
     me.emit('drop', me.getEventProperties(event))
     return false;
   }
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 967d1132..9e683e55 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -61,10 +61,14 @@ function ItemSet(body, options) {
       order: false,
       add: false,
       remove: false
-    },    
-    
+    },
+
     snap: TimeStep.snap,
 
+    // Only called when `objectData.target === 'item'.
+    onDropObjectOnItem: function(objectData, item, callback) {
+      callback(item)
+    },
     onAdd: function (item, callback) {
       callback(item);
     },
@@ -444,7 +448,7 @@ ItemSet.prototype.setOptions = function(options) {
         this.options[name] = fn;
       }
     }).bind(this);
-    ['onAdd', 'onUpdate', 'onRemove', 'onMove', 'onMoving', 'onAddGroup', 'onMoveGroup', 'onRemoveGroup'].forEach(addCallback);
+    ['onDropObjectOnItem', 'onAdd', 'onUpdate', 'onRemove', 'onMove', 'onMoving', 'onAddGroup', 'onMoveGroup', 'onRemoveGroup'].forEach(addCallback);
 
     // force the itemSet to refresh: options like orientation and margins may be changed
     this.markDirty();
@@ -2060,7 +2064,19 @@ ItemSet.prototype._onUpdateItem = function (item) {
 };
 
 /**
- * Handle creation of an item on double tap
+ * Handle drop event of data on item
+ * Only called when `objectData.target === 'item'.
+ * @param {Event} event The event 
+ * @private
+ */
+ItemSet.prototype._onDropObjectOnItem = function(event) {
+  var item = this.itemFromTarget(event);
+  var objectData = JSON.parse(event.dataTransfer.getData("text"));
+  this.options.onDropObjectOnItem(objectData, item)
+}
+
+/**
+ * Handle creation of an item on double tap or drop of a drag event
  * @param {Event} event   The event
  * @private
  */
@@ -2070,69 +2086,65 @@ ItemSet.prototype._onAddItem = function (event) {
 
   var me = this;
   var snap = this.options.snap || null;
-  var item = this.itemFromTarget(event);
-
-  if (!item) {
-    var xAbs;
-    var x;
-    // add item
-    if (this.options.rtl) {
-      xAbs = util.getAbsoluteRight(this.dom.frame);
-      x = xAbs - event.center.x;
-    } else {
-      xAbs = util.getAbsoluteLeft(this.dom.frame);
-      x = event.center.x - xAbs;
+  var xAbs;
+  var x;
+  // add item
+  if (this.options.rtl) {
+    xAbs = util.getAbsoluteRight(this.dom.frame);
+    x = xAbs - event.center.x;
+  } else {
+    xAbs = util.getAbsoluteLeft(this.dom.frame);
+    x = event.center.x - xAbs;
+  }
+  // var xAbs = util.getAbsoluteLeft(this.dom.frame);
+  // var x = event.center.x - xAbs;
+  var start = this.body.util.toTime(x);
+  var scale = this.body.util.getScale();
+  var step = this.body.util.getStep();
+  var end;
+
+  var newItemData;
+  if (event.type == 'drop') {
+    newItemData = JSON.parse(event.dataTransfer.getData("text"));
+    newItemData.content = newItemData.content ? newItemData.content : 'new item';
+    newItemData.start = newItemData.start ? newItemData.start : (snap ? snap(start, scale, step) : start);
+    newItemData.type = newItemData.type || 'box';
+    newItemData[this.itemsData._fieldId] = newItemData.id || util.randomUUID();
+
+    if (newItemData.type == 'range' && !newItemData.end) {
+      end = this.body.util.toTime(x + this.props.width / 5);
+      newItemData.end = snap ? snap(end, scale, step) : end;
     }
-    // var xAbs = util.getAbsoluteLeft(this.dom.frame);
-    // var x = event.center.x - xAbs;
-    var start = this.body.util.toTime(x);
-    var scale = this.body.util.getScale();
-    var step = this.body.util.getStep();
-    var end;
-
-    var newItemData;
-    if (event.type == 'drop') {
-      newItemData = JSON.parse(event.dataTransfer.getData("text"));
-      newItemData.content = newItemData.content ? newItemData.content : 'new item';
-      newItemData.start = newItemData.start ? newItemData.start : (snap ? snap(start, scale, step) : start);
-      newItemData.type = newItemData.type || 'box';
-      newItemData[this.itemsData._fieldId] = newItemData.id || util.randomUUID();
-
-      if (newItemData.type == 'range' && !newItemData.end) {
-        end = this.body.util.toTime(x + this.props.width / 5);
-        newItemData.end = snap ? snap(end, scale, step) : end;
-      }
-    } else {
-      newItemData = {
-        start: snap ? snap(start, scale, step) : start,
-        content: 'new item'
-      };
-      newItemData[this.itemsData._fieldId] = util.randomUUID();
-
-      // when default type is a range, add a default end date to the new item
-      if (this.options.type === 'range') {
-        end = this.body.util.toTime(x + this.props.width / 5);
-        newItemData.end = snap ? snap(end, scale, step) : end;
-      }
+  } else {
+    newItemData = {
+      start: snap ? snap(start, scale, step) : start,
+      content: 'new item'
+    };
+    newItemData[this.itemsData._fieldId] = util.randomUUID();
+
+    // when default type is a range, add a default end date to the new item
+    if (this.options.type === 'range') {
+      end = this.body.util.toTime(x + this.props.width / 5);
+      newItemData.end = snap ? snap(end, scale, step) : end;
     }
+  }
 
-    var group = this.groupFromTarget(event);
-    if (group) {
-      newItemData.group = group.groupId;
-    }
+  var group = this.groupFromTarget(event);
+  if (group) {
+    newItemData.group = group.groupId;
+  }
 
-    // execute async handler to customize (or cancel) adding an item
-    newItemData = this._cloneItemData(newItemData);     // convert start and end to the correct type
-    this.options.onAdd(newItemData, function (item) {
-      if (item) {
-        me.itemsData.getDataSet().add(item);
-        if (event.type == 'drop') {
-          me.setSelection([item.id]);
-        }
-        // TODO: need to trigger a redraw?
+  // execute async handler to customize (or cancel) adding an item
+  newItemData = this._cloneItemData(newItemData);     // convert start and end to the correct type
+  this.options.onAdd(newItemData, function (item) {
+    if (item) {
+      me.itemsData.getDataSet().add(item);
+      if (event.type == 'drop') {
+        me.setSelection([item.id]);
       }
-    });
-  }
+      // TODO: need to trigger a redraw?
+    }
+  });
 };
 
 /**
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index 9ae8b49c..928bb43f 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -118,6 +118,7 @@ let allOptions = {
   multiselect: { 'boolean': bool},
   multiselectPerGroup: { 'boolean': bool},
   onAdd: {'function': 'function'},
+  onDropObjectOnItem: {'function': 'function'},
   onUpdate: {'function': 'function'},
   onMove: {'function': 'function'},
   onMoving: {'function': 'function'},