Option to allow range items be movable but not resizable.

docs/timeline/index.html

@@ -374,6 +374,12 @@ <h3 id="items">Items</h3>
       <td>no</td>
       <td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
     </tr>
+    <tr parent="itemEditable" class="hidden">
+      <td class="indent">editable.updateRangeDuration</td>
+      <td>boolean</td>
+      <td>no</td>
+      <td>If true, range items can be changed their duration by dragging the sides of the item. Only applicable in range items and when <code>editable.updateTime</code> is true . See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
+    </tr>
   </table>
 
   <h3 id="groups">Groups</h3>
@@ -615,6 +621,12 @@ <h2 id="Configuration_Options">Configuration Options</h2>
       <td><code>false</code></td>
       <td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
     </tr>
+    <tr parent="editable" class="hidden">
+      <td class="indent">editable.updateRangeDuration</td>
+      <td>boolean</td>
+      <td><code>false</code></td>
+      <td>If true, range items can be changed their duration by dragging the sides of the item. Only applicable in range items and when <code>editable.updateTime</code> is true . See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
+    </tr>
     <tr parent="editable" class="hidden">
       <td class="indent">editable.overrideItems</td>
       <td>boolean</td>
@@ -2000,6 +2012,7 @@ <h2 id="Editing_Items">Editing Items</h2>
   editable: {
     add: true,         // add new items by double tapping
     updateTime: true,  // drag items horizontally
+    updateRangeDuration: true, // change duration in range items
     updateGroup: true, // drag items from one group to another
     remove: true,       // delete an item by tapping the delete button top right
     overrideItems: false  // allow these options to override item.editable

examples/timeline/editing/editingItems.html

@@ -61,6 +61,7 @@
     editable: {
       add: true,
       updateTime: true,
+      updateRangeDuration: true,
       updateGroup: true,
       remove: true
     },

examples/timeline/editing/individualEditableItems.html

@@ -48,7 +48,8 @@
     {id: 5, content: 'Edit Time Only', editable: { updateTime: true, updateGroup: false, remove: false }, start: '2010-08-28', group: 1},
     {id: 6, content: 'Edit Group Only', editable: { updateTime: false, updateGroup: true, remove: false }, start: '2010-08-29', group: 2},
     {id: 7, content: 'Remove Only', editable: { updateTime: false, updateGroup: false, remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
-    {id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
+    {id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2},
+    {id: 9, content: 'Duration fixed', editable: { updateTime: true, updateRangeDuration: false ,updateGroup: false, remove: true }, start: '2010-08-31', end: '2010-09-02', group: 2},
   ]);
 
   var container = document.getElementById('visualization');

examples/timeline/editing/overrideEditingItems.html

@@ -39,6 +39,7 @@
 <input name="remove" type="checkbox" checked>remove</input></br>
 <input name="updateGroup" type="checkbox">updateGroup</input></br>
 <input name="updateTime" type="checkbox" checked>updateTime</input><br>
+<input name="updateRangeDuration" type="checkbox" checked>updateRangeDuration</input><br>
 <input name="overrideItems" type="checkbox">overrideItems</input><br>
 }
 </form>
@@ -76,6 +77,7 @@
       remove: true,
       updateGroup: false,
       updateTime: true,
+      updateRangeDuration: true,
       overrideItems: false
     }  // default for all items
   };

lib/timeline/component/ItemSet.js

@@ -63,6 +63,7 @@ class ItemSet extends Component {
 
       editable: {
         updateTime: false,
+        updateRangeDuration: false,
         updateGroup: false,
         add: false,
         remove: false,
@@ -365,6 +366,8 @@ class ItemSet extends Component {
    *                              Set all editable options to true or false
    *                           {boolean} editable.updateTime
    *                              Allow dragging an item to an other moment in time
+   *                           {boolean} editable.updateRangeDuration
+   *                              Allow change range duration by dragging the sides of the item 
    *                           {boolean} editable.updateGroup
    *                              Allow dragging an item to an other group
    *                           {boolean} editable.add
@@ -454,13 +457,14 @@ class ItemSet extends Component {
       if ('editable' in options) {
         if (typeof options.editable === 'boolean') {
           this.options.editable.updateTime    = options.editable;
+          this.options.editable.updateRangeDuration   = options.editable;
           this.options.editable.updateGroup   = options.editable;
           this.options.editable.add           = options.editable;
           this.options.editable.remove        = options.editable;
           this.options.editable.overrideItems = false;
         }
         else if (typeof options.editable === 'object') {
-          util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove', 'overrideItems'], this.options.editable, options.editable);
+          util.selectiveExtend(['updateTime','updateRangeDuration' ,'updateGroup', 'add', 'remove', 'overrideItems'], this.options.editable, options.editable);
         }
       }
 

lib/timeline/component/item/Item.js

@@ -530,12 +530,13 @@ class Item {
       if(typeof this.options.editable === 'boolean') {
         this.editable = {
           updateTime: this.options.editable,
+          updateRangeDuration: this.options.editable,
           updateGroup: this.options.editable,
           remove: this.options.editable
         };
       } else if(typeof this.options.editable === 'object') {
           this.editable = {};
-          util.selectiveExtend(['updateTime', 'updateGroup', 'remove'], this.editable, this.options.editable);
+          util.selectiveExtend(['updateTime','updateRangeDuration' ,'updateGroup', 'remove'], this.editable, this.options.editable);
       }
     }
     // Item data overrides, except if options.editable.overrideItems is set.
@@ -544,14 +545,15 @@ class Item {
         if (typeof this.data.editable === 'boolean') {
           this.editable = {
             updateTime: this.data.editable,
+            updateRangeDuration: this.data.editable,
             updateGroup: this.data.editable,
             remove: this.data.editable
           }
         } else if (typeof this.data.editable === 'object') {
           // TODO: in timeline.js 5.0, we should change this to not reset options from the timeline configuration.
           // Basically just remove the next line...
           this.editable = {};
-          util.selectiveExtend(['updateTime', 'updateGroup', 'remove'], this.editable, this.data.editable);
+          util.selectiveExtend(['updateTime','updateRangeDuration' ,'updateGroup', 'remove'], this.editable, this.data.editable);
         }
       }
     }

lib/timeline/component/item/RangeItem.js

@@ -379,7 +379,7 @@ class RangeItem extends Item {
    * @protected
    */
   _repaintDragLeft() {
-    if ((this.selected || this.options.itemsAlwaysDraggable.range) && this.editable.updateTime && !this.dom.dragLeft) {
+    if ((this.selected || this.options.itemsAlwaysDraggable.range) && this.editable.updateRangeDuration && !this.dom.dragLeft) {
       // create and show drag area
       const dragLeft = document.createElement('div');
       dragLeft.className = 'vis-drag-left';
@@ -402,7 +402,7 @@ class RangeItem extends Item {
    * @protected
    */
   _repaintDragRight() {
-    if ((this.selected || this.options.itemsAlwaysDraggable.range) && this.editable.updateTime && !this.dom.dragRight) {
+    if ((this.selected || this.options.itemsAlwaysDraggable.range) && this.editable.updateRangeDuration && !this.dom.dragRight) {
       // create and show drag area
       const dragRight = document.createElement('div');
       dragRight.className = 'vis-drag-right';

lib/timeline/optionsTimeline.js

@@ -48,6 +48,7 @@ let allOptions = {
     remove: { 'boolean': bool, 'undefined': 'undefined'},
     updateGroup: { 'boolean': bool, 'undefined': 'undefined'},
     updateTime: { 'boolean': bool, 'undefined': 'undefined'},
+    updateRangeDuration: { 'boolean': bool, 'undefined': 'undefined'},
     overrideItems: { 'boolean': bool, 'undefined': 'undefined'},
     __type__: { 'boolean': bool, object}
   },
@@ -211,7 +212,8 @@ let configureOptions = {
       add: false,
       remove: false,
       updateGroup: false,
-      updateTime: false
+      updateTime: false,
+      updateRangeDuration: false
     },
     end: '',
     format: {

types/index.d.ts

@@ -141,6 +141,7 @@ export interface TimelineEditableOption {
   remove?: boolean;
   updateGroup?: boolean;
   updateTime?: boolean;
+  updateRangeDuration?: boolean;
   overrideItems?: boolean;
 }
 
@@ -744,6 +745,7 @@ export interface TimelineItemEditableOption {
   remove?: boolean;
   updateGroup?: boolean;
   updateTime?: boolean;
+  updateRangeDuration?: boolean;
 }
 
 export type TimelineItemEditableType = boolean | TimelineItemEditableOption;