vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2216 lines
65 KiB

10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
9 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. var Hammer = require('../../module/hammer');
  2. var util = require('../../util');
  3. var DataSet = require('../../DataSet');
  4. var DataView = require('../../DataView');
  5. var TimeStep = require('../TimeStep');
  6. var Component = require('./Component');
  7. var Group = require('./Group');
  8. var BackgroundGroup = require('./BackgroundGroup');
  9. var BoxItem = require('./item/BoxItem');
  10. var PointItem = require('./item/PointItem');
  11. var RangeItem = require('./item/RangeItem');
  12. var BackgroundItem = require('./item/BackgroundItem');
  13. import Popup from '../../shared/Popup';
  14. var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
  15. var BACKGROUND = '__background__'; // reserved group id for background items without group
  16. /**
  17. * An ItemSet holds a set of items and ranges which can be displayed in a
  18. * range. The width is determined by the parent of the ItemSet, and the height
  19. * is determined by the size of the items.
  20. * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
  21. * @param {Object} [options] See ItemSet.setOptions for the available options.
  22. * @constructor ItemSet
  23. * @extends Component
  24. */
  25. function ItemSet(body, options) {
  26. this.body = body;
  27. this.defaultOptions = {
  28. type: null, // 'box', 'point', 'range', 'background'
  29. orientation: {
  30. item: 'bottom' // item orientation: 'top' or 'bottom'
  31. },
  32. align: 'auto', // alignment of box items
  33. stack: true,
  34. stackSubgroups: true,
  35. groupOrderSwap: function(fromGroup, toGroup, groups) {
  36. var targetOrder = toGroup.order;
  37. toGroup.order = fromGroup.order;
  38. fromGroup.order = targetOrder;
  39. },
  40. groupOrder: 'order',
  41. selectable: true,
  42. multiselect: false,
  43. itemsAlwaysDraggable: false,
  44. editable: {
  45. updateTime: false,
  46. updateGroup: false,
  47. add: false,
  48. remove: false,
  49. overrideItems: false
  50. },
  51. groupEditable: {
  52. order: false,
  53. add: false,
  54. remove: false
  55. },
  56. snap: TimeStep.snap,
  57. onAdd: function (item, callback) {
  58. callback(item);
  59. },
  60. onUpdate: function (item, callback) {
  61. callback(item);
  62. },
  63. onMove: function (item, callback) {
  64. callback(item);
  65. },
  66. onRemove: function (item, callback) {
  67. callback(item);
  68. },
  69. onMoving: function (item, callback) {
  70. callback(item);
  71. },
  72. onAddGroup: function (item, callback) {
  73. callback(item);
  74. },
  75. onMoveGroup: function (item, callback) {
  76. callback(item);
  77. },
  78. onRemoveGroup: function (item, callback) {
  79. callback(item);
  80. },
  81. margin: {
  82. item: {
  83. horizontal: 10,
  84. vertical: 10
  85. },
  86. axis: 20
  87. },
  88. tooltipOnItemUpdateTime: false
  89. };
  90. // options is shared by this ItemSet and all its items
  91. this.options = util.extend({}, this.defaultOptions);
  92. this.options.rtl = options.rtl;
  93. // options for getting items from the DataSet with the correct type
  94. this.itemOptions = {
  95. type: {start: 'Date', end: 'Date'}
  96. };
  97. this.conversion = {
  98. toScreen: body.util.toScreen,
  99. toTime: body.util.toTime
  100. };
  101. this.dom = {};
  102. this.props = {};
  103. this.hammer = null;
  104. var me = this;
  105. this.itemsData = null; // DataSet
  106. this.groupsData = null; // DataSet
  107. // listeners for the DataSet of the items
  108. this.itemListeners = {
  109. 'add': function (event, params, senderId) {
  110. me._onAdd(params.items);
  111. },
  112. 'update': function (event, params, senderId) {
  113. me._onUpdate(params.items);
  114. },
  115. 'remove': function (event, params, senderId) {
  116. me._onRemove(params.items);
  117. }
  118. };
  119. // listeners for the DataSet of the groups
  120. this.groupListeners = {
  121. 'add': function (event, params, senderId) {
  122. me._onAddGroups(params.items);
  123. },
  124. 'update': function (event, params, senderId) {
  125. me._onUpdateGroups(params.items);
  126. },
  127. 'remove': function (event, params, senderId) {
  128. me._onRemoveGroups(params.items);
  129. }
  130. };
  131. this.items = {}; // object with an Item for every data item
  132. this.groups = {}; // Group object for every group
  133. this.groupIds = [];
  134. this.selection = []; // list with the ids of all selected nodes
  135. this.stackDirty = true; // if true, all items will be restacked on next redraw
  136. this.touchParams = {}; // stores properties while dragging
  137. this.groupTouchParams = {};
  138. // create the HTML DOM
  139. this._create();
  140. this.setOptions(options);
  141. }
  142. ItemSet.prototype = new Component();
  143. // available item types will be registered here
  144. ItemSet.types = {
  145. background: BackgroundItem,
  146. box: BoxItem,
  147. range: RangeItem,
  148. point: PointItem
  149. };
  150. /**
  151. * Create the HTML DOM for the ItemSet
  152. */
  153. ItemSet.prototype._create = function(){
  154. var frame = document.createElement('div');
  155. frame.className = 'vis-itemset';
  156. frame['timeline-itemset'] = this;
  157. this.dom.frame = frame;
  158. // create background panel
  159. var background = document.createElement('div');
  160. background.className = 'vis-background';
  161. frame.appendChild(background);
  162. this.dom.background = background;
  163. // create foreground panel
  164. var foreground = document.createElement('div');
  165. foreground.className = 'vis-foreground';
  166. frame.appendChild(foreground);
  167. this.dom.foreground = foreground;
  168. // create axis panel
  169. var axis = document.createElement('div');
  170. axis.className = 'vis-axis';
  171. this.dom.axis = axis;
  172. // create labelset
  173. var labelSet = document.createElement('div');
  174. labelSet.className = 'vis-labelset';
  175. this.dom.labelSet = labelSet;
  176. // create ungrouped Group
  177. this._updateUngrouped();
  178. // create background Group
  179. var backgroundGroup = new BackgroundGroup(BACKGROUND, null, this);
  180. backgroundGroup.show();
  181. this.groups[BACKGROUND] = backgroundGroup;
  182. // attach event listeners
  183. // Note: we bind to the centerContainer for the case where the height
  184. // of the center container is larger than of the ItemSet, so we
  185. // can click in the empty area to create a new item or deselect an item.
  186. this.hammer = new Hammer(this.body.dom.centerContainer);
  187. // drag items when selected
  188. this.hammer.on('hammer.input', function (event) {
  189. if (event.isFirst) {
  190. this._onTouch(event);
  191. }
  192. }.bind(this));
  193. this.hammer.on('panstart', this._onDragStart.bind(this));
  194. this.hammer.on('panmove', this._onDrag.bind(this));
  195. this.hammer.on('panend', this._onDragEnd.bind(this));
  196. this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
  197. // single select (or unselect) when tapping an item
  198. this.hammer.on('tap', this._onSelectItem.bind(this));
  199. // multi select when holding mouse/touch, or on ctrl+click
  200. this.hammer.on('press', this._onMultiSelectItem.bind(this));
  201. // add item on doubletap
  202. this.hammer.on('doubletap', this._onAddItem.bind(this));
  203. if (this.options.rtl) {
  204. this.groupHammer = new Hammer(this.body.dom.rightContainer);
  205. } else {
  206. this.groupHammer = new Hammer(this.body.dom.leftContainer);
  207. }
  208. this.groupHammer.on('tap', this._onGroupClick.bind(this));
  209. this.groupHammer.on('panstart', this._onGroupDragStart.bind(this));
  210. this.groupHammer.on('panmove', this._onGroupDrag.bind(this));
  211. this.groupHammer.on('panend', this._onGroupDragEnd.bind(this));
  212. this.groupHammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_VERTICAL});
  213. this.body.dom.centerContainer.addEventListener('mouseover', this._onMouseOver.bind(this));
  214. this.body.dom.centerContainer.addEventListener('mouseout', this._onMouseOut.bind(this));
  215. // attach to the DOM
  216. this.show();
  217. };
  218. /**
  219. * Set options for the ItemSet. Existing options will be extended/overwritten.
  220. * @param {Object} [options] The following options are available:
  221. * {String} type
  222. * Default type for the items. Choose from 'box'
  223. * (default), 'point', 'range', or 'background'.
  224. * The default style can be overwritten by
  225. * individual items.
  226. * {String} align
  227. * Alignment for the items, only applicable for
  228. * BoxItem. Choose 'center' (default), 'left', or
  229. * 'right'.
  230. * {String} orientation.item
  231. * Orientation of the item set. Choose 'top' or
  232. * 'bottom' (default).
  233. * {Function} groupOrder
  234. * A sorting function for ordering groups
  235. * {Boolean} stack
  236. * If true (default), items will be stacked on
  237. * top of each other.
  238. * {Number} margin.axis
  239. * Margin between the axis and the items in pixels.
  240. * Default is 20.
  241. * {Number} margin.item.horizontal
  242. * Horizontal margin between items in pixels.
  243. * Default is 10.
  244. * {Number} margin.item.vertical
  245. * Vertical Margin between items in pixels.
  246. * Default is 10.
  247. * {Number} margin.item
  248. * Margin between items in pixels in both horizontal
  249. * and vertical direction. Default is 10.
  250. * {Number} margin
  251. * Set margin for both axis and items in pixels.
  252. * {Boolean} selectable
  253. * If true (default), items can be selected.
  254. * {Boolean} multiselect
  255. * If true, multiple items can be selected.
  256. * False by default.
  257. * {Boolean} editable
  258. * Set all editable options to true or false
  259. * {Boolean} editable.updateTime
  260. * Allow dragging an item to an other moment in time
  261. * {Boolean} editable.updateGroup
  262. * Allow dragging an item to an other group
  263. * {Boolean} editable.add
  264. * Allow creating new items on double tap
  265. * {Boolean} editable.remove
  266. * Allow removing items by clicking the delete button
  267. * top right of a selected item.
  268. * {Function(item: Item, callback: Function)} onAdd
  269. * Callback function triggered when an item is about to be added:
  270. * when the user double taps an empty space in the Timeline.
  271. * {Function(item: Item, callback: Function)} onUpdate
  272. * Callback function fired when an item is about to be updated.
  273. * This function typically has to show a dialog where the user
  274. * change the item. If not implemented, nothing happens.
  275. * {Function(item: Item, callback: Function)} onMove
  276. * Fired when an item has been moved. If not implemented,
  277. * the move action will be accepted.
  278. * {Function(item: Item, callback: Function)} onRemove
  279. * Fired when an item is about to be deleted.
  280. * If not implemented, the item will be always removed.
  281. */
  282. ItemSet.prototype.setOptions = function(options) {
  283. if (options) {
  284. // copy all options that we know
  285. var fields = [
  286. 'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect', 'itemsAlwaysDraggable',
  287. 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate',
  288. 'hide', 'snap', 'groupOrderSwap', 'tooltipOnItemUpdateTime'
  289. ];
  290. util.selectiveExtend(fields, this.options, options);
  291. if ('orientation' in options) {
  292. if (typeof options.orientation === 'string') {
  293. this.options.orientation.item = options.orientation === 'top' ? 'top' : 'bottom';
  294. }
  295. else if (typeof options.orientation === 'object' && 'item' in options.orientation) {
  296. this.options.orientation.item = options.orientation.item;
  297. }
  298. }
  299. if ('margin' in options) {
  300. if (typeof options.margin === 'number') {
  301. this.options.margin.axis = options.margin;
  302. this.options.margin.item.horizontal = options.margin;
  303. this.options.margin.item.vertical = options.margin;
  304. }
  305. else if (typeof options.margin === 'object') {
  306. util.selectiveExtend(['axis'], this.options.margin, options.margin);
  307. if ('item' in options.margin) {
  308. if (typeof options.margin.item === 'number') {
  309. this.options.margin.item.horizontal = options.margin.item;
  310. this.options.margin.item.vertical = options.margin.item;
  311. }
  312. else if (typeof options.margin.item === 'object') {
  313. util.selectiveExtend(['horizontal', 'vertical'], this.options.margin.item, options.margin.item);
  314. }
  315. }
  316. }
  317. }
  318. if ('editable' in options) {
  319. if (typeof options.editable === 'boolean') {
  320. this.options.editable.updateTime = options.editable;
  321. this.options.editable.updateGroup = options.editable;
  322. this.options.editable.add = options.editable;
  323. this.options.editable.remove = options.editable;
  324. this.options.editable.overrideItems = false;
  325. }
  326. else if (typeof options.editable === 'object') {
  327. util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove', 'overrideItems'], this.options.editable, options.editable);
  328. }
  329. }
  330. if ('groupEditable' in options) {
  331. if (typeof options.groupEditable === 'boolean') {
  332. this.options.groupEditable.order = options.groupEditable;
  333. this.options.groupEditable.add = options.groupEditable;
  334. this.options.groupEditable.remove = options.groupEditable;
  335. }
  336. else if (typeof options.groupEditable === 'object') {
  337. util.selectiveExtend(['order', 'add', 'remove'], this.options.groupEditable, options.groupEditable);
  338. }
  339. }
  340. // callback functions
  341. var addCallback = (function (name) {
  342. var fn = options[name];
  343. if (fn) {
  344. if (!(fn instanceof Function)) {
  345. throw new Error('option ' + name + ' must be a function ' + name + '(item, callback)');
  346. }
  347. this.options[name] = fn;
  348. }
  349. }).bind(this);
  350. ['onAdd', 'onUpdate', 'onRemove', 'onMove', 'onMoving', 'onAddGroup', 'onMoveGroup', 'onRemoveGroup'].forEach(addCallback);
  351. // force the itemSet to refresh: options like orientation and margins may be changed
  352. this.markDirty();
  353. }
  354. };
  355. /**
  356. * Mark the ItemSet dirty so it will refresh everything with next redraw.
  357. * Optionally, all items can be marked as dirty and be refreshed.
  358. * @param {{refreshItems: boolean}} [options]
  359. */
  360. ItemSet.prototype.markDirty = function(options) {
  361. this.groupIds = [];
  362. this.stackDirty = true;
  363. if (options && options.refreshItems) {
  364. util.forEach(this.items, function (item) {
  365. item.dirty = true;
  366. if (item.displayed) item.redraw();
  367. });
  368. }
  369. };
  370. /**
  371. * Destroy the ItemSet
  372. */
  373. ItemSet.prototype.destroy = function() {
  374. this.hide();
  375. this.setItems(null);
  376. this.setGroups(null);
  377. this.hammer = null;
  378. this.body = null;
  379. this.conversion = null;
  380. };
  381. /**
  382. * Hide the component from the DOM
  383. */
  384. ItemSet.prototype.hide = function() {
  385. // remove the frame containing the items
  386. if (this.dom.frame.parentNode) {
  387. this.dom.frame.parentNode.removeChild(this.dom.frame);
  388. }
  389. // remove the axis with dots
  390. if (this.dom.axis.parentNode) {
  391. this.dom.axis.parentNode.removeChild(this.dom.axis);
  392. }
  393. // remove the labelset containing all group labels
  394. if (this.dom.labelSet.parentNode) {
  395. this.dom.labelSet.parentNode.removeChild(this.dom.labelSet);
  396. }
  397. };
  398. /**
  399. * Show the component in the DOM (when not already visible).
  400. * @return {Boolean} changed
  401. */
  402. ItemSet.prototype.show = function() {
  403. // show frame containing the items
  404. if (!this.dom.frame.parentNode) {
  405. this.body.dom.center.appendChild(this.dom.frame);
  406. }
  407. // show axis with dots
  408. if (!this.dom.axis.parentNode) {
  409. this.body.dom.backgroundVertical.appendChild(this.dom.axis);
  410. }
  411. // show labelset containing labels
  412. if (!this.dom.labelSet.parentNode) {
  413. if (this.options.rtl) {
  414. this.body.dom.right.appendChild(this.dom.labelSet);
  415. } else {
  416. this.body.dom.left.appendChild(this.dom.labelSet);
  417. }
  418. }
  419. };
  420. /**
  421. * Set selected items by their id. Replaces the current selection
  422. * Unknown id's are silently ignored.
  423. * @param {string[] | string} [ids] An array with zero or more id's of the items to be
  424. * selected, or a single item id. If ids is undefined
  425. * or an empty array, all items will be unselected.
  426. */
  427. ItemSet.prototype.setSelection = function(ids) {
  428. var i, ii, id, item;
  429. if (ids == undefined) ids = [];
  430. if (!Array.isArray(ids)) ids = [ids];
  431. // unselect currently selected items
  432. for (i = 0, ii = this.selection.length; i < ii; i++) {
  433. id = this.selection[i];
  434. item = this.items[id];
  435. if (item) item.unselect();
  436. }
  437. // select items
  438. this.selection = [];
  439. for (i = 0, ii = ids.length; i < ii; i++) {
  440. id = ids[i];
  441. item = this.items[id];
  442. if (item) {
  443. this.selection.push(id);
  444. item.select();
  445. }
  446. }
  447. };
  448. /**
  449. * Get the selected items by their id
  450. * @return {Array} ids The ids of the selected items
  451. */
  452. ItemSet.prototype.getSelection = function() {
  453. return this.selection.concat([]);
  454. };
  455. /**
  456. * Get the id's of the currently visible items.
  457. * @returns {Array} The ids of the visible items
  458. */
  459. ItemSet.prototype.getVisibleItems = function() {
  460. var range = this.body.range.getRange();
  461. if (this.options.rtl) {
  462. var right = this.body.util.toScreen(range.start);
  463. var left = this.body.util.toScreen(range.end);
  464. } else {
  465. var left = this.body.util.toScreen(range.start);
  466. var right = this.body.util.toScreen(range.end);
  467. }
  468. var ids = [];
  469. for (var groupId in this.groups) {
  470. if (this.groups.hasOwnProperty(groupId)) {
  471. var group = this.groups[groupId];
  472. var rawVisibleItems = group.visibleItems;
  473. // filter the "raw" set with visibleItems into a set which is really
  474. // visible by pixels
  475. for (var i = 0; i < rawVisibleItems.length; i++) {
  476. var item = rawVisibleItems[i];
  477. // TODO: also check whether visible vertically
  478. if (this.options.rtl) {
  479. if ((item.right < left) && (item.right + item.width > right)) {
  480. ids.push(item.id);
  481. }
  482. } else {
  483. if ((item.left < right) && (item.left + item.width > left)) {
  484. ids.push(item.id);
  485. }
  486. }
  487. }
  488. }
  489. }
  490. return ids;
  491. };
  492. /**
  493. * Deselect a selected item
  494. * @param {String | Number} id
  495. * @private
  496. */
  497. ItemSet.prototype._deselect = function(id) {
  498. var selection = this.selection;
  499. for (var i = 0, ii = selection.length; i < ii; i++) {
  500. if (selection[i] == id) { // non-strict comparison!
  501. selection.splice(i, 1);
  502. break;
  503. }
  504. }
  505. };
  506. /**
  507. * Repaint the component
  508. * @return {boolean} Returns true if the component is resized
  509. */
  510. ItemSet.prototype.redraw = function() {
  511. var margin = this.options.margin,
  512. range = this.body.range,
  513. asSize = util.option.asSize,
  514. options = this.options,
  515. orientation = options.orientation.item,
  516. resized = false,
  517. frame = this.dom.frame;
  518. // recalculate absolute position (before redrawing groups)
  519. this.props.top = this.body.domProps.top.height + this.body.domProps.border.top;
  520. if (this.options.rtl) {
  521. this.props.right = this.body.domProps.right.width + this.body.domProps.border.right;
  522. } else {
  523. this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;
  524. }
  525. // update class name
  526. frame.className = 'vis-itemset';
  527. // reorder the groups (if needed)
  528. resized = this._orderGroups() || resized;
  529. // check whether zoomed (in that case we need to re-stack everything)
  530. // TODO: would be nicer to get this as a trigger from Range
  531. var visibleInterval = range.end - range.start;
  532. var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.props.width != this.props.lastWidth);
  533. if (zoomed) this.stackDirty = true;
  534. this.lastVisibleInterval = visibleInterval;
  535. this.props.lastWidth = this.props.width;
  536. var restack = this.stackDirty;
  537. var firstGroup = this._firstGroup();
  538. var firstMargin = {
  539. item: margin.item,
  540. axis: margin.axis
  541. };
  542. var nonFirstMargin = {
  543. item: margin.item,
  544. axis: margin.item.vertical / 2
  545. };
  546. var height = 0;
  547. var minHeight = margin.axis + margin.item.vertical;
  548. // redraw the background group
  549. this.groups[BACKGROUND].redraw(range, nonFirstMargin, restack);
  550. // redraw all regular groups
  551. util.forEach(this.groups, function (group) {
  552. var groupMargin = (group == firstGroup) ? firstMargin : nonFirstMargin;
  553. var groupResized = group.redraw(range, groupMargin, restack);
  554. resized = groupResized || resized;
  555. height += group.height;
  556. });
  557. height = Math.max(height, minHeight);
  558. this.stackDirty = false;
  559. // update frame height
  560. frame.style.height = asSize(height);
  561. // calculate actual size
  562. this.props.width = frame.offsetWidth;
  563. this.props.height = height;
  564. // reposition axis
  565. this.dom.axis.style.top = asSize((orientation == 'top') ?
  566. (this.body.domProps.top.height + this.body.domProps.border.top) :
  567. (this.body.domProps.top.height + this.body.domProps.centerContainer.height));
  568. if (this.options.rtl) {
  569. this.dom.axis.style.right = '0';
  570. } else {
  571. this.dom.axis.style.left = '0';
  572. }
  573. this.initialItemSetDrawn = true;
  574. // check if this component is resized
  575. resized = this._isResized() || resized;
  576. return resized;
  577. };
  578. /**
  579. * Get the first group, aligned with the axis
  580. * @return {Group | null} firstGroup
  581. * @private
  582. */
  583. ItemSet.prototype._firstGroup = function() {
  584. var firstGroupIndex = (this.options.orientation.item == 'top') ? 0 : (this.groupIds.length - 1);
  585. var firstGroupId = this.groupIds[firstGroupIndex];
  586. var firstGroup = this.groups[firstGroupId] || this.groups[UNGROUPED];
  587. return firstGroup || null;
  588. };
  589. /**
  590. * Create or delete the group holding all ungrouped items. This group is used when
  591. * there are no groups specified.
  592. * @protected
  593. */
  594. ItemSet.prototype._updateUngrouped = function() {
  595. var ungrouped = this.groups[UNGROUPED];
  596. var background = this.groups[BACKGROUND];
  597. var item, itemId;
  598. if (this.groupsData) {
  599. // remove the group holding all ungrouped items
  600. if (ungrouped) {
  601. ungrouped.hide();
  602. delete this.groups[UNGROUPED];
  603. for (itemId in this.items) {
  604. if (this.items.hasOwnProperty(itemId)) {
  605. item = this.items[itemId];
  606. item.parent && item.parent.remove(item);
  607. var groupId = this._getGroupId(item.data);
  608. var group = this.groups[groupId];
  609. group && group.add(item) || item.hide();
  610. }
  611. }
  612. }
  613. }
  614. else {
  615. // create a group holding all (unfiltered) items
  616. if (!ungrouped) {
  617. var id = null;
  618. var data = null;
  619. ungrouped = new Group(id, data, this);
  620. this.groups[UNGROUPED] = ungrouped;
  621. for (itemId in this.items) {
  622. if (this.items.hasOwnProperty(itemId)) {
  623. item = this.items[itemId];
  624. ungrouped.add(item);
  625. }
  626. }
  627. ungrouped.show();
  628. }
  629. }
  630. };
  631. /**
  632. * Get the element for the labelset
  633. * @return {HTMLElement} labelSet
  634. */
  635. ItemSet.prototype.getLabelSet = function() {
  636. return this.dom.labelSet;
  637. };
  638. /**
  639. * Set items
  640. * @param {vis.DataSet | null} items
  641. */
  642. ItemSet.prototype.setItems = function(items) {
  643. var me = this,
  644. ids,
  645. oldItemsData = this.itemsData;
  646. // replace the dataset
  647. if (!items) {
  648. this.itemsData = null;
  649. }
  650. else if (items instanceof DataSet || items instanceof DataView) {
  651. this.itemsData = items;
  652. }
  653. else {
  654. throw new TypeError('Data must be an instance of DataSet or DataView');
  655. }
  656. if (oldItemsData) {
  657. // unsubscribe from old dataset
  658. util.forEach(this.itemListeners, function (callback, event) {
  659. oldItemsData.off(event, callback);
  660. });
  661. // remove all drawn items
  662. ids = oldItemsData.getIds();
  663. this._onRemove(ids);
  664. }
  665. if (this.itemsData) {
  666. // subscribe to new dataset
  667. var id = this.id;
  668. util.forEach(this.itemListeners, function (callback, event) {
  669. me.itemsData.on(event, callback, id);
  670. });
  671. // add all new items
  672. ids = this.itemsData.getIds();
  673. this._onAdd(ids);
  674. // update the group holding all ungrouped items
  675. this._updateUngrouped();
  676. }
  677. this.body.emitter.emit('_change', {queue: true});
  678. };
  679. /**
  680. * Get the current items
  681. * @returns {vis.DataSet | null}
  682. */
  683. ItemSet.prototype.getItems = function() {
  684. return this.itemsData;
  685. };
  686. /**
  687. * Set groups
  688. * @param {vis.DataSet} groups
  689. */
  690. ItemSet.prototype.setGroups = function(groups) {
  691. var me = this,
  692. ids;
  693. // unsubscribe from current dataset
  694. if (this.groupsData) {
  695. util.forEach(this.groupListeners, function (callback, event) {
  696. me.groupsData.off(event, callback);
  697. });
  698. // remove all drawn groups
  699. ids = this.groupsData.getIds();
  700. this.groupsData = null;
  701. this._onRemoveGroups(ids); // note: this will cause a redraw
  702. }
  703. // replace the dataset
  704. if (!groups) {
  705. this.groupsData = null;
  706. }
  707. else if (groups instanceof DataSet || groups instanceof DataView) {
  708. this.groupsData = groups;
  709. }
  710. else {
  711. throw new TypeError('Data must be an instance of DataSet or DataView');
  712. }
  713. if (this.groupsData) {
  714. // go over all groups nesting
  715. var groupsData = this.groupsData;
  716. if (this.groupsData instanceof DataView) {
  717. groupsData = this.groupsData.getDataSet()
  718. }
  719. groupsData.get().forEach(function(group){
  720. if (group.nestedGroups) {
  721. group.nestedGroups.forEach(function(nestedGroupId) {
  722. var updatedNestedGroup = groupsData.get(nestedGroupId);
  723. updatedNestedGroup.nestedInGroup = group.id;
  724. if (group.showNested == false) {
  725. updatedNestedGroup.visible = false;
  726. }
  727. groupsData.update(updatedNestedGroup);
  728. })
  729. }
  730. })
  731. // subscribe to new dataset
  732. var id = this.id;
  733. util.forEach(this.groupListeners, function (callback, event) {
  734. me.groupsData.on(event, callback, id);
  735. });
  736. // draw all ms
  737. ids = this.groupsData.getIds();
  738. this._onAddGroups(ids);
  739. }
  740. // update the group holding all ungrouped items
  741. this._updateUngrouped();
  742. // update the order of all items in each group
  743. this._order();
  744. this.body.emitter.emit('_change', {queue: true});
  745. };
  746. /**
  747. * Get the current groups
  748. * @returns {vis.DataSet | null} groups
  749. */
  750. ItemSet.prototype.getGroups = function() {
  751. return this.groupsData;
  752. };
  753. /**
  754. * Remove an item by its id
  755. * @param {String | Number} id
  756. */
  757. ItemSet.prototype.removeItem = function(id) {
  758. var item = this.itemsData.get(id),
  759. dataset = this.itemsData.getDataSet();
  760. if (item) {
  761. // confirm deletion
  762. this.options.onRemove(item, function (item) {
  763. if (item) {
  764. // remove by id here, it is possible that an item has no id defined
  765. // itself, so better not delete by the item itself
  766. dataset.remove(id);
  767. }
  768. });
  769. }
  770. };
  771. /**
  772. * Get the time of an item based on it's data and options.type
  773. * @param {Object} itemData
  774. * @returns {string} Returns the type
  775. * @private
  776. */
  777. ItemSet.prototype._getType = function (itemData) {
  778. return itemData.type || this.options.type || (itemData.end ? 'range' : 'box');
  779. };
  780. /**
  781. * Get the group id for an item
  782. * @param {Object} itemData
  783. * @returns {string} Returns the groupId
  784. * @private
  785. */
  786. ItemSet.prototype._getGroupId = function (itemData) {
  787. var type = this._getType(itemData);
  788. if (type == 'background' && itemData.group == undefined) {
  789. return BACKGROUND;
  790. }
  791. else {
  792. return this.groupsData ? itemData.group : UNGROUPED;
  793. }
  794. };
  795. /**
  796. * Handle updated items
  797. * @param {Number[]} ids
  798. * @protected
  799. */
  800. ItemSet.prototype._onUpdate = function(ids) {
  801. var me = this;
  802. ids.forEach(function (id) {
  803. var itemData = me.itemsData.get(id, me.itemOptions);
  804. var item = me.items[id];
  805. var type = itemData ? me._getType(itemData) : null;
  806. var constructor = ItemSet.types[type];
  807. var selected;
  808. if (item) {
  809. // update item
  810. if (!constructor || !(item instanceof constructor)) {
  811. // item type has changed, delete the item and recreate it
  812. selected = item.selected; // preserve selection of this item
  813. me._removeItem(item);
  814. item = null;
  815. }
  816. else {
  817. me._updateItem(item, itemData);
  818. }
  819. }
  820. if (!item && itemData) {
  821. // create item
  822. if (constructor) {
  823. item = new constructor(itemData, me.conversion, me.options);
  824. item.id = id; // TODO: not so nice setting id afterwards
  825. me._addItem(item);
  826. if (selected) {
  827. this.selection.push(id);
  828. item.select();
  829. }
  830. }
  831. else if (type == 'rangeoverflow') {
  832. // TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
  833. throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
  834. '.vis-item.vis-range .vis-item-content {overflow: visible;}');
  835. }
  836. else {
  837. throw new TypeError('Unknown item type "' + type + '"');
  838. }
  839. }
  840. }.bind(this));
  841. this._order();
  842. this.stackDirty = true; // force re-stacking of all items next redraw
  843. this.body.emitter.emit('_change', {queue: true});
  844. };
  845. /**
  846. * Handle added items
  847. * @param {Number[]} ids
  848. * @protected
  849. */
  850. ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
  851. /**
  852. * Handle removed items
  853. * @param {Number[]} ids
  854. * @protected
  855. */
  856. ItemSet.prototype._onRemove = function(ids) {
  857. var count = 0;
  858. var me = this;
  859. ids.forEach(function (id) {
  860. var item = me.items[id];
  861. if (item) {
  862. count++;
  863. me._removeItem(item);
  864. }
  865. });
  866. if (count) {
  867. // update order
  868. this._order();
  869. this.stackDirty = true; // force re-stacking of all items next redraw
  870. this.body.emitter.emit('_change', {queue: true});
  871. }
  872. };
  873. /**
  874. * Update the order of item in all groups
  875. * @private
  876. */
  877. ItemSet.prototype._order = function() {
  878. // reorder the items in all groups
  879. // TODO: optimization: only reorder groups affected by the changed items
  880. util.forEach(this.groups, function (group) {
  881. group.order();
  882. });
  883. };
  884. /**
  885. * Handle updated groups
  886. * @param {Number[]} ids
  887. * @private
  888. */
  889. ItemSet.prototype._onUpdateGroups = function(ids) {
  890. this._onAddGroups(ids);
  891. };
  892. /**
  893. * Handle changed groups (added or updated)
  894. * @param {Number[]} ids
  895. * @private
  896. */
  897. ItemSet.prototype._onAddGroups = function(ids) {
  898. var me = this;
  899. ids.forEach(function (id) {
  900. var groupData = me.groupsData.get(id);
  901. var group = me.groups[id];
  902. if (!group) {
  903. // check for reserved ids
  904. if (id == UNGROUPED || id == BACKGROUND) {
  905. throw new Error('Illegal group id. ' + id + ' is a reserved id.');
  906. }
  907. var groupOptions = Object.create(me.options);
  908. util.extend(groupOptions, {
  909. height: null
  910. });
  911. group = new Group(id, groupData, me);
  912. me.groups[id] = group;
  913. // add items with this groupId to the new group
  914. for (var itemId in me.items) {
  915. if (me.items.hasOwnProperty(itemId)) {
  916. var item = me.items[itemId];
  917. if (item.data.group == id) {
  918. group.add(item);
  919. }
  920. }
  921. }
  922. group.order();
  923. group.show();
  924. }
  925. else {
  926. // update group
  927. group.setData(groupData);
  928. }
  929. });
  930. this.body.emitter.emit('_change', {queue: true});
  931. };
  932. /**
  933. * Handle removed groups
  934. * @param {Number[]} ids
  935. * @private
  936. */
  937. ItemSet.prototype._onRemoveGroups = function(ids) {
  938. var groups = this.groups;
  939. ids.forEach(function (id) {
  940. var group = groups[id];
  941. if (group) {
  942. group.hide();
  943. delete groups[id];
  944. }
  945. });
  946. this.markDirty();
  947. this.body.emitter.emit('_change', {queue: true});
  948. };
  949. /**
  950. * Reorder the groups if needed
  951. * @return {boolean} changed
  952. * @private
  953. */
  954. ItemSet.prototype._orderGroups = function () {
  955. if (this.groupsData) {
  956. // reorder the groups
  957. var groupIds = this.groupsData.getIds({
  958. order: this.options.groupOrder
  959. });
  960. groupIds = this._orderNestedGroups(groupIds);
  961. var changed = !util.equalArray(groupIds, this.groupIds);
  962. if (changed) {
  963. // hide all groups, removes them from the DOM
  964. var groups = this.groups;
  965. groupIds.forEach(function (groupId) {
  966. groups[groupId].hide();
  967. });
  968. // show the groups again, attach them to the DOM in correct order
  969. groupIds.forEach(function (groupId) {
  970. groups[groupId].show();
  971. });
  972. this.groupIds = groupIds;
  973. }
  974. return changed;
  975. }
  976. else {
  977. return false;
  978. }
  979. };
  980. /**
  981. * Reorder the nested groups
  982. * @return {boolean} changed
  983. * @private
  984. */
  985. ItemSet.prototype._orderNestedGroups = function(groupIds) {
  986. var newGroupIdsOrder = [];
  987. groupIds.forEach(function(groupId){
  988. var groupData = this.groupsData.get(groupId);
  989. if (!groupData.nestedInGroup) {
  990. newGroupIdsOrder.push(groupId)
  991. }
  992. if (groupData.nestedGroups) {
  993. var nestedGroups = this.groupsData.get({
  994. filter: function(nestedGroup) {
  995. return nestedGroup.nestedInGroup == groupId;
  996. }
  997. });
  998. var nestedGroupIds = nestedGroups.map(function(nestedGroup) { return nestedGroup.id })
  999. newGroupIdsOrder = newGroupIdsOrder.concat(nestedGroupIds);
  1000. }
  1001. }, this)
  1002. return newGroupIdsOrder;
  1003. }
  1004. /**
  1005. * Add a new item
  1006. * @param {Item} item
  1007. * @private
  1008. */
  1009. ItemSet.prototype._addItem = function(item) {
  1010. this.items[item.id] = item;
  1011. // add to group
  1012. var groupId = this._getGroupId(item.data);
  1013. var group = this.groups[groupId];
  1014. if (!group) {
  1015. item.groupShowing = false;
  1016. } else if (group && group.data && group.data.showNested) {
  1017. item.groupShowing = true;
  1018. }
  1019. if (group) group.add(item);
  1020. };
  1021. /**
  1022. * Update an existing item
  1023. * @param {Item} item
  1024. * @param {Object} itemData
  1025. * @private
  1026. */
  1027. ItemSet.prototype._updateItem = function(item, itemData) {
  1028. var oldGroupId = item.data.group;
  1029. var oldSubGroupId = item.data.subgroup;
  1030. // update the items data (will redraw the item when displayed)
  1031. item.setData(itemData);
  1032. var groupId = this._getGroupId(item.data);
  1033. var group = this.groups[groupId];
  1034. if (!group) {
  1035. item.groupShowing = false;
  1036. } else if (group && group.data && group.data.showNested) {
  1037. item.groupShowing = true;
  1038. }
  1039. // update group
  1040. if (oldGroupId != item.data.group || oldSubGroupId != item.data.subgroup) {
  1041. var oldGroup = this.groups[oldGroupId];
  1042. if (oldGroup) oldGroup.remove(item);
  1043. if (group) group.add(item);
  1044. }
  1045. };
  1046. /**
  1047. * Delete an item from the ItemSet: remove it from the DOM, from the map
  1048. * with items, and from the map with visible items, and from the selection
  1049. * @param {Item} item
  1050. * @private
  1051. */
  1052. ItemSet.prototype._removeItem = function(item) {
  1053. // remove from DOM
  1054. item.hide();
  1055. // remove from items
  1056. delete this.items[item.id];
  1057. // remove from selection
  1058. var index = this.selection.indexOf(item.id);
  1059. if (index != -1) this.selection.splice(index, 1);
  1060. // remove from group
  1061. item.parent && item.parent.remove(item);
  1062. };
  1063. /**
  1064. * Create an array containing all items being a range (having an end date)
  1065. * @param array
  1066. * @returns {Array}
  1067. * @private
  1068. */
  1069. ItemSet.prototype._constructByEndArray = function(array) {
  1070. var endArray = [];
  1071. for (var i = 0; i < array.length; i++) {
  1072. if (array[i] instanceof RangeItem) {
  1073. endArray.push(array[i]);
  1074. }
  1075. }
  1076. return endArray;
  1077. };
  1078. /**
  1079. * Register the clicked item on touch, before dragStart is initiated.
  1080. *
  1081. * dragStart is initiated from a mousemove event, AFTER the mouse/touch is
  1082. * already moving. Therefore, the mouse/touch can sometimes be above an other
  1083. * DOM element than the item itself.
  1084. *
  1085. * @param {Event} event
  1086. * @private
  1087. */
  1088. ItemSet.prototype._onTouch = function (event) {
  1089. // store the touched item, used in _onDragStart
  1090. this.touchParams.item = this.itemFromTarget(event);
  1091. this.touchParams.dragLeftItem = event.target.dragLeftItem || false;
  1092. this.touchParams.dragRightItem = event.target.dragRightItem || false;
  1093. this.touchParams.itemProps = null;
  1094. };
  1095. /**
  1096. * Given an group id, returns the index it has.
  1097. *
  1098. * @param {Number} groupID
  1099. * @private
  1100. */
  1101. ItemSet.prototype._getGroupIndex = function(groupId) {
  1102. for (var i = 0; i < this.groupIds.length; i++) {
  1103. if (groupId == this.groupIds[i])
  1104. return i;
  1105. }
  1106. };
  1107. /**
  1108. * Start dragging the selected events
  1109. * @param {Event} event
  1110. * @private
  1111. */
  1112. ItemSet.prototype._onDragStart = function (event) {
  1113. if (this.touchParams.itemIsDragging) { return; }
  1114. var item = this.touchParams.item || null;
  1115. var me = this;
  1116. var props;
  1117. if (item && (item.selected || this.options.itemsAlwaysDraggable)) {
  1118. if (this.options.editable.overrideItems &&
  1119. !this.options.editable.updateTime &&
  1120. !this.options.editable.updateGroup) {
  1121. return;
  1122. }
  1123. // override options.editable
  1124. if ((item.editable != null && !item.editable.updateTime && !item.editable.updateGroup)
  1125. && !this.options.editable.overrideItems) {
  1126. return;
  1127. }
  1128. var dragLeftItem = this.touchParams.dragLeftItem;
  1129. var dragRightItem = this.touchParams.dragRightItem;
  1130. this.touchParams.itemIsDragging = true;
  1131. this.touchParams.selectedItem = item;
  1132. if (dragLeftItem) {
  1133. props = {
  1134. item: dragLeftItem,
  1135. initialX: event.center.x,
  1136. dragLeft: true,
  1137. data: this._cloneItemData(item.data)
  1138. };
  1139. this.touchParams.itemProps = [props];
  1140. }
  1141. else if (dragRightItem) {
  1142. props = {
  1143. item: dragRightItem,
  1144. initialX: event.center.x,
  1145. dragRight: true,
  1146. data: this._cloneItemData(item.data)
  1147. };
  1148. this.touchParams.itemProps = [props];
  1149. }
  1150. else {
  1151. var baseGroupIndex = this._getGroupIndex(item.data.group);
  1152. var itemsToDrag = (this.options.itemsAlwaysDraggable && !item.selected) ? [item.id] : this.getSelection();
  1153. this.touchParams.itemProps = itemsToDrag.map(function (id) {
  1154. var item = me.items[id];
  1155. var groupIndex = me._getGroupIndex(item.data.group);
  1156. return {
  1157. item: item,
  1158. initialX: event.center.x,
  1159. groupOffset: baseGroupIndex-groupIndex,
  1160. data: this._cloneItemData(item.data)
  1161. };
  1162. }.bind(this));
  1163. }
  1164. event.stopPropagation();
  1165. }
  1166. else if (this.options.editable.add && (event.srcEvent.ctrlKey || event.srcEvent.metaKey)) {
  1167. // create a new range item when dragging with ctrl key down
  1168. this._onDragStartAddItem(event);
  1169. }
  1170. };
  1171. /**
  1172. * Start creating a new range item by dragging.
  1173. * @param {Event} event
  1174. * @private
  1175. */
  1176. ItemSet.prototype._onDragStartAddItem = function (event) {
  1177. var snap = this.options.snap || null;
  1178. if (this.options.rtl) {
  1179. var xAbs = util.getAbsoluteRight(this.dom.frame);
  1180. var x = xAbs - event.center.x + 10; // plus 10 to compensate for the drag starting as soon as you've moved 10px
  1181. } else {
  1182. var xAbs = util.getAbsoluteLeft(this.dom.frame);
  1183. var x = event.center.x - xAbs - 10; // minus 10 to compensate for the drag starting as soon as you've moved 10px
  1184. }
  1185. var time = this.body.util.toTime(x);
  1186. var scale = this.body.util.getScale();
  1187. var step = this.body.util.getStep();
  1188. var start = snap ? snap(time, scale, step) : time;
  1189. var end = start;
  1190. var itemData = {
  1191. type: 'range',
  1192. start: start,
  1193. end: end,
  1194. content: 'new item'
  1195. };
  1196. var id = util.randomUUID();
  1197. itemData[this.itemsData._fieldId] = id;
  1198. var group = this.groupFromTarget(event);
  1199. if (group) {
  1200. itemData.group = group.groupId;
  1201. }
  1202. var newItem = new RangeItem(itemData, this.conversion, this.options);
  1203. newItem.id = id; // TODO: not so nice setting id afterwards
  1204. newItem.data = this._cloneItemData(itemData);
  1205. this._addItem(newItem);
  1206. this.touchParams.selectedItem = newItem;
  1207. var props = {
  1208. item: newItem,
  1209. initialX: event.center.x,
  1210. data: newItem.data
  1211. };
  1212. if (this.options.rtl) {
  1213. props.dragLeft = true;
  1214. } else {
  1215. props.dragRight = true;
  1216. }
  1217. this.touchParams.itemProps = [props];
  1218. event.stopPropagation();
  1219. };
  1220. /**
  1221. * Drag selected items
  1222. * @param {Event} event
  1223. * @private
  1224. */
  1225. ItemSet.prototype._onDrag = function (event) {
  1226. if (this.touchParams.itemProps) {
  1227. event.stopPropagation();
  1228. var me = this;
  1229. var snap = this.options.snap || null;
  1230. if (this.options.rtl) {
  1231. var xOffset = this.body.dom.root.offsetLeft + this.body.domProps.right.width;
  1232. } else {
  1233. var xOffset = this.body.dom.root.offsetLeft + this.body.domProps.left.width;
  1234. }
  1235. var scale = this.body.util.getScale();
  1236. var step = this.body.util.getStep();
  1237. //only calculate the new group for the item that's actually dragged
  1238. var selectedItem = this.touchParams.selectedItem;
  1239. var updateGroupAllowed = ((this.options.editable.overrideItems || selectedItem.editable == null) && this.options.editable.updateGroup) ||
  1240. (!this.options.editable.overrideItems && selectedItem.editable != null && selectedItem.editable.updateGroup);
  1241. var newGroupBase = null;
  1242. if (updateGroupAllowed && selectedItem) {
  1243. if (selectedItem.data.group != undefined) {
  1244. // drag from one group to another
  1245. var group = me.groupFromTarget(event);
  1246. if (group) {
  1247. //we know the offset for all items, so the new group for all items
  1248. //will be relative to this one.
  1249. newGroupBase = this._getGroupIndex(group.groupId);
  1250. }
  1251. }
  1252. }
  1253. // move
  1254. this.touchParams.itemProps.forEach(function (props) {
  1255. var current = me.body.util.toTime(event.center.x - xOffset);
  1256. var initial = me.body.util.toTime(props.initialX - xOffset);
  1257. if (this.options.rtl) {
  1258. var offset = -(current - initial); // ms
  1259. } else {
  1260. var offset = (current - initial); // ms
  1261. }
  1262. var itemData = this._cloneItemData(props.item.data); // clone the data
  1263. if (props.item.editable != null
  1264. && !props.item.editable.updateTime
  1265. && !props.item.editable.updateGroup
  1266. && !me.options.editable.overrideItems) {
  1267. return;
  1268. }
  1269. var updateTimeAllowed = ((this.options.editable.overrideItems || selectedItem.editable == null) && this.options.editable.updateTime) ||
  1270. (!this.options.editable.overrideItems && selectedItem.editable != null && selectedItem.editable.updateTime);
  1271. if (updateTimeAllowed) {
  1272. if (props.dragLeft) {
  1273. // drag left side of a range item
  1274. if (this.options.rtl) {
  1275. if (itemData.end != undefined) {
  1276. var initialEnd = util.convert(props.data.end, 'Date');
  1277. var end = new Date(initialEnd.valueOf() + offset);
  1278. // TODO: pass a Moment instead of a Date to snap(). (Breaking change)
  1279. itemData.end = snap ? snap(end, scale, step) : end;
  1280. }
  1281. } else {
  1282. if (itemData.start != undefined) {
  1283. var initialStart = util.convert(props.data.start, 'Date');
  1284. var start = new Date(initialStart.valueOf() + offset);
  1285. // TODO: pass a Moment instead of a Date to snap(). (Breaking change)
  1286. itemData.start = snap ? snap(start, scale, step) : start;
  1287. }
  1288. }
  1289. }
  1290. else if (props.dragRight) {
  1291. // drag right side of a range item
  1292. if (this.options.rtl) {
  1293. if (itemData.start != undefined) {
  1294. var initialStart = util.convert(props.data.start, 'Date');
  1295. var start = new Date(initialStart.valueOf() + offset);
  1296. // TODO: pass a Moment instead of a Date to snap(). (Breaking change)
  1297. itemData.start = snap ? snap(start, scale, step) : start;
  1298. }
  1299. } else {
  1300. if (itemData.end != undefined) {
  1301. var initialEnd = util.convert(props.data.end, 'Date');
  1302. var end = new Date(initialEnd.valueOf() + offset);
  1303. // TODO: pass a Moment instead of a Date to snap(). (Breaking change)
  1304. itemData.end = snap ? snap(end, scale, step) : end;
  1305. }
  1306. }
  1307. }
  1308. else {
  1309. // drag both start and end
  1310. if (itemData.start != undefined) {
  1311. var initialStart = util.convert(props.data.start, 'Date').valueOf();
  1312. var start = new Date(initialStart + offset);
  1313. if (itemData.end != undefined) {
  1314. var initialEnd = util.convert(props.data.end, 'Date');
  1315. var duration = initialEnd.valueOf() - initialStart.valueOf();
  1316. // TODO: pass a Moment instead of a Date to snap(). (Breaking change)
  1317. itemData.start = snap ? snap(start, scale, step) : start;
  1318. itemData.end = new Date(itemData.start.valueOf() + duration);
  1319. }
  1320. else {
  1321. // TODO: pass a Moment instead of a Date to snap(). (Breaking change)
  1322. itemData.start = snap ? snap(start, scale, step) : start;
  1323. }
  1324. }
  1325. }
  1326. }
  1327. if (updateGroupAllowed && (!props.dragLeft && !props.dragRight) && newGroupBase!=null) {
  1328. if (itemData.group != undefined) {
  1329. var newOffset = newGroupBase - props.groupOffset;
  1330. //make sure we stay in bounds
  1331. newOffset = Math.max(0, newOffset);
  1332. newOffset = Math.min(me.groupIds.length-1, newOffset);
  1333. itemData.group = me.groupIds[newOffset];
  1334. }
  1335. }
  1336. // confirm moving the item
  1337. itemData = this._cloneItemData(itemData); // convert start and end to the correct type
  1338. me.options.onMoving(itemData, function (itemData) {
  1339. if (itemData) {
  1340. props.item.setData(this._cloneItemData(itemData, 'Date'));
  1341. }
  1342. }.bind(this));
  1343. }.bind(this));
  1344. this.stackDirty = true; // force re-stacking of all items next redraw
  1345. this.body.emitter.emit('_change');
  1346. }
  1347. };
  1348. /**
  1349. * Move an item to another group
  1350. * @param {Item} item
  1351. * @param {String | Number} groupId
  1352. * @private
  1353. */
  1354. ItemSet.prototype._moveToGroup = function(item, groupId) {
  1355. var group = this.groups[groupId];
  1356. if (group && group.groupId != item.data.group) {
  1357. var oldGroup = item.parent;
  1358. oldGroup.remove(item);
  1359. oldGroup.order();
  1360. group.add(item);
  1361. group.order();
  1362. item.data.group = group.groupId;
  1363. }
  1364. };
  1365. /**
  1366. * End of dragging selected items
  1367. * @param {Event} event
  1368. * @private
  1369. */
  1370. ItemSet.prototype._onDragEnd = function (event) {
  1371. if (this.touchParams.itemProps) {
  1372. event.stopPropagation();
  1373. var me = this;
  1374. var dataset = this.itemsData.getDataSet();
  1375. var itemProps = this.touchParams.itemProps ;
  1376. this.touchParams.itemProps = null;
  1377. this.touchParams.itemIsDragging = false;
  1378. itemProps.forEach(function (props) {
  1379. var id = props.item.id;
  1380. var exists = me.itemsData.get(id, me.itemOptions) != null;
  1381. if (!exists) {
  1382. // add a new item
  1383. me.options.onAdd(props.item.data, function (itemData) {
  1384. me._removeItem(props.item); // remove temporary item
  1385. if (itemData) {
  1386. me.itemsData.getDataSet().add(itemData);
  1387. }
  1388. // force re-stacking of all items next redraw
  1389. me.stackDirty = true;
  1390. me.body.emitter.emit('_change');
  1391. });
  1392. }
  1393. else {
  1394. // update existing item
  1395. var itemData = this._cloneItemData(props.item.data); // convert start and end to the correct type
  1396. me.options.onMove(itemData, function (itemData) {
  1397. if (itemData) {
  1398. // apply changes
  1399. itemData[dataset._fieldId] = id; // ensure the item contains its id (can be undefined)
  1400. dataset.update(itemData);
  1401. }
  1402. else {
  1403. // restore original values
  1404. props.item.setData(props.data);
  1405. me.stackDirty = true; // force re-stacking of all items next redraw
  1406. me.body.emitter.emit('_change');
  1407. }
  1408. });
  1409. }
  1410. }.bind(this));
  1411. }
  1412. };
  1413. ItemSet.prototype._onGroupClick = function (event) {
  1414. var group = this.groupFromTarget(event);
  1415. if (!group.nestedGroups) return;
  1416. var groupsData = this.groupsData;
  1417. if (this.groupsData instanceof DataView) {
  1418. groupsData = this.groupsData.getDataSet()
  1419. }
  1420. group.showNested = !group.showNested;
  1421. var nestedGroups = groupsData.get(group.nestedGroups).map(function(nestedGroup) {
  1422. if (nestedGroup.visible == undefined) { nestedGroup.visible = true; }
  1423. nestedGroup.visible = !!group.showNested;
  1424. return nestedGroup;
  1425. });
  1426. groupsData.update(nestedGroups);
  1427. if (group.showNested) {
  1428. util.removeClassName(group.dom.label, 'collapsed');
  1429. util.addClassName(group.dom.label, 'expanded');
  1430. } else {
  1431. util.removeClassName(group.dom.label, 'expanded');
  1432. var collapsedDirClassName = this.options.rtl ? 'collapsed-rtl' : 'collapsed'
  1433. util.addClassName(group.dom.label, collapsedDirClassName);
  1434. }
  1435. }
  1436. ItemSet.prototype._onGroupDragStart = function (event) {
  1437. if (this.options.groupEditable.order) {
  1438. this.groupTouchParams.group = this.groupFromTarget(event);
  1439. if (this.groupTouchParams.group) {
  1440. event.stopPropagation();
  1441. this.groupTouchParams.originalOrder = this.groupsData.getIds({
  1442. order: this.options.groupOrder
  1443. });
  1444. }
  1445. }
  1446. }
  1447. ItemSet.prototype._onGroupDrag = function (event) {
  1448. if (this.options.groupEditable.order && this.groupTouchParams.group) {
  1449. event.stopPropagation();
  1450. var groupsData = this.groupsData;
  1451. if (this.groupsData instanceof DataView) {
  1452. groupsData = this.groupsData.getDataSet()
  1453. }
  1454. // drag from one group to another
  1455. var group = this.groupFromTarget(event);
  1456. // try to avoid toggling when groups differ in height
  1457. if (group && group.height != this.groupTouchParams.group.height) {
  1458. var movingUp = (group.top < this.groupTouchParams.group.top);
  1459. var clientY = event.center ? event.center.y : event.clientY;
  1460. var targetGroupTop = util.getAbsoluteTop(group.dom.foreground);
  1461. var draggedGroupHeight = this.groupTouchParams.group.height;
  1462. if (movingUp) {
  1463. // skip swapping the groups when the dragged group is not below clientY afterwards
  1464. if (targetGroupTop + draggedGroupHeight < clientY) {
  1465. return;
  1466. }
  1467. } else {
  1468. var targetGroupHeight = group.height;
  1469. // skip swapping the groups when the dragged group is not below clientY afterwards
  1470. if (targetGroupTop + targetGroupHeight - draggedGroupHeight > clientY) {
  1471. return;
  1472. }
  1473. }
  1474. }
  1475. if (group && group != this.groupTouchParams.group) {
  1476. var targetGroup = groupsData.get(group.groupId);
  1477. var draggedGroup = groupsData.get(this.groupTouchParams.group.groupId);
  1478. // switch groups
  1479. if (draggedGroup && targetGroup) {
  1480. this.options.groupOrderSwap(draggedGroup, targetGroup, groupsData);
  1481. groupsData.update(draggedGroup);
  1482. groupsData.update(targetGroup);
  1483. }
  1484. // fetch current order of groups
  1485. var newOrder = groupsData.getIds({
  1486. order: this.options.groupOrder
  1487. });
  1488. // in case of changes since _onGroupDragStart
  1489. if (!util.equalArray(newOrder, this.groupTouchParams.originalOrder)) {
  1490. var origOrder = this.groupTouchParams.originalOrder;
  1491. var draggedId = this.groupTouchParams.group.groupId;
  1492. var numGroups = Math.min(origOrder.length, newOrder.length);
  1493. var curPos = 0;
  1494. var newOffset = 0;
  1495. var orgOffset = 0;
  1496. while (curPos < numGroups) {
  1497. // as long as the groups are where they should be step down along the groups order
  1498. while ((curPos+newOffset) < numGroups
  1499. && (curPos+orgOffset) < numGroups
  1500. && newOrder[curPos+newOffset] == origOrder[curPos+orgOffset]) {
  1501. curPos++;
  1502. }
  1503. // all ok
  1504. if (curPos+newOffset >= numGroups) {
  1505. break;
  1506. }
  1507. // not all ok
  1508. // if dragged group was move upwards everything below should have an offset
  1509. if (newOrder[curPos+newOffset] == draggedId) {
  1510. newOffset = 1;
  1511. continue;
  1512. }
  1513. // if dragged group was move downwards everything above should have an offset
  1514. else if (origOrder[curPos+orgOffset] == draggedId) {
  1515. orgOffset = 1;
  1516. continue;
  1517. }
  1518. // found a group (apart from dragged group) that has the wrong position -> switch with the
  1519. // group at the position where other one should be, fix index arrays and continue
  1520. else {
  1521. var slippedPosition = newOrder.indexOf(origOrder[curPos+orgOffset])
  1522. var switchGroup = groupsData.get(newOrder[curPos+newOffset]);
  1523. var shouldBeGroup = groupsData.get(origOrder[curPos+orgOffset]);
  1524. this.options.groupOrderSwap(switchGroup, shouldBeGroup, groupsData);
  1525. groupsData.update(switchGroup);
  1526. groupsData.update(shouldBeGroup);
  1527. var switchGroupId = newOrder[curPos+newOffset];
  1528. newOrder[curPos+newOffset] = origOrder[curPos+orgOffset];
  1529. newOrder[slippedPosition] = switchGroupId;
  1530. curPos++;
  1531. }
  1532. }
  1533. }
  1534. }
  1535. }
  1536. }
  1537. ItemSet.prototype._onGroupDragEnd = function (event) {
  1538. if (this.options.groupEditable.order && this.groupTouchParams.group) {
  1539. event.stopPropagation();
  1540. // update existing group
  1541. var me = this;
  1542. var id = me.groupTouchParams.group.groupId;
  1543. var dataset = me.groupsData.getDataSet();
  1544. var groupData = util.extend({}, dataset.get(id)); // clone the data
  1545. me.options.onMoveGroup(groupData, function (groupData) {
  1546. if (groupData) {
  1547. // apply changes
  1548. groupData[dataset._fieldId] = id; // ensure the group contains its id (can be undefined)
  1549. dataset.update(groupData);
  1550. }
  1551. else {
  1552. // fetch current order of groups
  1553. var newOrder = dataset.getIds({
  1554. order: me.options.groupOrder
  1555. });
  1556. // restore original order
  1557. if (!util.equalArray(newOrder, me.groupTouchParams.originalOrder)) {
  1558. var origOrder = me.groupTouchParams.originalOrder;
  1559. var numGroups = Math.min(origOrder.length, newOrder.length);
  1560. var curPos = 0;
  1561. while (curPos < numGroups) {
  1562. // as long as the groups are where they should be step down along the groups order
  1563. while (curPos < numGroups && newOrder[curPos] == origOrder[curPos]) {
  1564. curPos++;
  1565. }
  1566. // all ok
  1567. if (curPos >= numGroups) {
  1568. break;
  1569. }
  1570. // found a group that has the wrong position -> switch with the
  1571. // group at the position where other one should be, fix index arrays and continue
  1572. var slippedPosition = newOrder.indexOf(origOrder[curPos])
  1573. var switchGroup = dataset.get(newOrder[curPos]);
  1574. var shouldBeGroup = dataset.get(origOrder[curPos]);
  1575. me.options.groupOrderSwap(switchGroup, shouldBeGroup, dataset);
  1576. groupsData.update(switchGroup);
  1577. groupsData.update(shouldBeGroup);
  1578. var switchGroupId = newOrder[curPos];
  1579. newOrder[curPos] = origOrder[curPos];
  1580. newOrder[slippedPosition] = switchGroupId;
  1581. curPos++;
  1582. }
  1583. }
  1584. }
  1585. });
  1586. me.body.emitter.emit('groupDragged', { groupId: id });
  1587. }
  1588. }
  1589. /**
  1590. * Handle selecting/deselecting an item when tapping it
  1591. * @param {Event} event
  1592. * @private
  1593. */
  1594. ItemSet.prototype._onSelectItem = function (event) {
  1595. if (!this.options.selectable) return;
  1596. var ctrlKey = event.srcEvent && (event.srcEvent.ctrlKey || event.srcEvent.metaKey);
  1597. var shiftKey = event.srcEvent && event.srcEvent.shiftKey;
  1598. if (ctrlKey || shiftKey) {
  1599. this._onMultiSelectItem(event);
  1600. return;
  1601. }
  1602. var oldSelection = this.getSelection();
  1603. var item = this.itemFromTarget(event);
  1604. var selection = item ? [item.id] : [];
  1605. this.setSelection(selection);
  1606. var newSelection = this.getSelection();
  1607. // emit a select event,
  1608. // except when old selection is empty and new selection is still empty
  1609. if (newSelection.length > 0 || oldSelection.length > 0) {
  1610. this.body.emitter.emit('select', {
  1611. items: newSelection,
  1612. event: util.elementsCensor(event)
  1613. });
  1614. }
  1615. };
  1616. /**
  1617. * Handle hovering an item
  1618. * @param {Event} event
  1619. * @private
  1620. */
  1621. ItemSet.prototype._onMouseOver = function (event) {
  1622. var item = this.itemFromTarget(event);
  1623. if (!item) return;
  1624. if (item.getTitle()) {
  1625. if (item.popup == null) {
  1626. item.setPopup(new Popup(this.body.dom.root));
  1627. }
  1628. var container = this.body.dom.centerContainer;
  1629. item.popup.setPosition(
  1630. event.clientX - util.getAbsoluteLeft(container),
  1631. event.clientY - util.getAbsoluteTop(container)
  1632. );
  1633. item.popup.show();
  1634. }
  1635. this.body.emitter.emit('itemover', {
  1636. item: item.id,
  1637. event: util.elementsCensor(event)
  1638. });
  1639. };
  1640. ItemSet.prototype._onMouseOut = function (event) {
  1641. var item = this.itemFromTarget(event);
  1642. if (!item) return;
  1643. if (item.popup != null) {
  1644. item.popup.hide();
  1645. }
  1646. this.body.emitter.emit('itemout', {
  1647. item: item.id,
  1648. event: util.elementsCensor(event)
  1649. });
  1650. };
  1651. /**
  1652. * Handle updates of an item on double tap
  1653. * @param event
  1654. * @private
  1655. */
  1656. ItemSet.prototype._onUpdateItem = function (item) {
  1657. if (!this.options.selectable) return;
  1658. if (!this.options.editable.add) return;
  1659. var me = this;
  1660. if (item) {
  1661. // execute async handler to update the item (or cancel it)
  1662. var itemData = me.itemsData.get(item.id); // get a clone of the data from the dataset
  1663. this.options.onUpdate(itemData, function (itemData) {
  1664. if (itemData) {
  1665. me.itemsData.getDataSet().update(itemData);
  1666. }
  1667. });
  1668. }
  1669. }
  1670. /**
  1671. * Handle creation of an item on double tap
  1672. * @param event
  1673. * @private
  1674. */
  1675. ItemSet.prototype._onAddItem = function (event) {
  1676. if (!this.options.selectable) return;
  1677. if (!this.options.editable.add) return;
  1678. var me = this;
  1679. var snap = this.options.snap || null;
  1680. var item = this.itemFromTarget(event);
  1681. if (!item) {
  1682. // add item
  1683. if (this.options.rtl) {
  1684. var xAbs = util.getAbsoluteRight(this.dom.frame);
  1685. var x = xAbs - event.center.x;
  1686. } else {
  1687. var xAbs = util.getAbsoluteLeft(this.dom.frame);
  1688. var x = event.center.x - xAbs;
  1689. }
  1690. // var xAbs = util.getAbsoluteLeft(this.dom.frame);
  1691. // var x = event.center.x - xAbs;
  1692. var start = this.body.util.toTime(x);
  1693. var scale = this.body.util.getScale();
  1694. var step = this.body.util.getStep();
  1695. var newItemData = {
  1696. start: snap ? snap(start, scale, step) : start,
  1697. content: 'new item'
  1698. };
  1699. if (event.type == 'drop') {
  1700. var itemData = JSON.parse(event.dataTransfer.getData("text"))
  1701. newItemData.content = itemData.content; // content is required
  1702. newItemData.type = itemData.type || 'box';
  1703. newItemData[this.itemsData._fieldId] = itemData.id || util.randomUUID();
  1704. if (itemData.type == 'range' || (itemData.end && itemData.start)) {
  1705. if (!itemData.end) {
  1706. var end = this.body.util.toTime(x + this.props.width / 5);
  1707. newItemData.end = snap ? snap(end, scale, step) : end;
  1708. } else {
  1709. newItemData.end = itemData.end;
  1710. newItemData.start = itemData.start;
  1711. }
  1712. }
  1713. } else {
  1714. newItemData[this.itemsData._fieldId] = util.randomUUID();
  1715. // when default type is a range, add a default end date to the new item
  1716. if (this.options.type === 'range') {
  1717. var end = this.body.util.toTime(x + this.props.width / 5);
  1718. newItemData.end = snap ? snap(end, scale, step) : end;
  1719. }
  1720. }
  1721. var group = this.groupFromTarget(event);
  1722. if (group) {
  1723. newItemData.group = group.groupId;
  1724. }
  1725. // execute async handler to customize (or cancel) adding an item
  1726. newItemData = this._cloneItemData(newItemData); // convert start and end to the correct type
  1727. this.options.onAdd(newItemData, function (item) {
  1728. if (item) {
  1729. me.itemsData.getDataSet().add(item);
  1730. if (event.type == 'drop') {
  1731. me.setSelection([item.id]);
  1732. }
  1733. // TODO: need to trigger a redraw?
  1734. }
  1735. });
  1736. }
  1737. };
  1738. /**
  1739. * Handle selecting/deselecting multiple items when holding an item
  1740. * @param {Event} event
  1741. * @private
  1742. */
  1743. ItemSet.prototype._onMultiSelectItem = function (event) {
  1744. if (!this.options.selectable) return;
  1745. var item = this.itemFromTarget(event);
  1746. if (item) {
  1747. // multi select items (if allowed)
  1748. var selection = this.options.multiselect
  1749. ? this.getSelection() // take current selection
  1750. : []; // deselect current selection
  1751. var shiftKey = event.srcEvent && event.srcEvent.shiftKey || false;
  1752. if (shiftKey && this.options.multiselect) {
  1753. // select all items between the old selection and the tapped item
  1754. var itemGroup = this.itemsData.get(item.id).group;
  1755. // when filtering get the group of the last selected item
  1756. var lastSelectedGroup = undefined;
  1757. if (this.options.multiselectPerGroup) {
  1758. if (selection.length > 0) {
  1759. lastSelectedGroup = this.itemsData.get(selection[0]).group;
  1760. }
  1761. }
  1762. // determine the selection range
  1763. if (!this.options.multiselectPerGroup || lastSelectedGroup == undefined || lastSelectedGroup == itemGroup) {
  1764. selection.push(item.id);
  1765. }
  1766. var range = ItemSet._getItemRange(this.itemsData.get(selection, this.itemOptions));
  1767. if (!this.options.multiselectPerGroup || lastSelectedGroup == itemGroup) {
  1768. // select all items within the selection range
  1769. selection = [];
  1770. for (var id in this.items) {
  1771. if (this.items.hasOwnProperty(id)) {
  1772. var _item = this.items[id];
  1773. var start = _item.data.start;
  1774. var end = (_item.data.end !== undefined) ? _item.data.end : start;
  1775. if (start >= range.min &&
  1776. end <= range.max &&
  1777. (!this.options.multiselectPerGroup || lastSelectedGroup == this.itemsData.get(_item.id).group) &&
  1778. !(_item instanceof BackgroundItem)) {
  1779. selection.push(_item.id); // do not use id but item.id, id itself is stringified
  1780. }
  1781. }
  1782. }
  1783. }
  1784. }
  1785. else {
  1786. // add/remove this item from the current selection
  1787. var index = selection.indexOf(item.id);
  1788. if (index == -1) {
  1789. // item is not yet selected -> select it
  1790. selection.push(item.id);
  1791. }
  1792. else {
  1793. // item is already selected -> deselect it
  1794. selection.splice(index, 1);
  1795. }
  1796. }
  1797. this.setSelection(selection);
  1798. this.body.emitter.emit('select', {
  1799. items: this.getSelection(),
  1800. event: util.elementsCensor(event)
  1801. });
  1802. }
  1803. };
  1804. /**
  1805. * Calculate the time range of a list of items
  1806. * @param {Array.<Object>} itemsData
  1807. * @return {{min: Date, max: Date}} Returns the range of the provided items
  1808. * @private
  1809. */
  1810. ItemSet._getItemRange = function(itemsData) {
  1811. var max = null;
  1812. var min = null;
  1813. itemsData.forEach(function (data) {
  1814. if (min == null || data.start < min) {
  1815. min = data.start;
  1816. }
  1817. if (data.end != undefined) {
  1818. if (max == null || data.end > max) {
  1819. max = data.end;
  1820. }
  1821. }
  1822. else {
  1823. if (max == null || data.start > max) {
  1824. max = data.start;
  1825. }
  1826. }
  1827. });
  1828. return {
  1829. min: min,
  1830. max: max
  1831. }
  1832. };
  1833. /**
  1834. * Find an item from an event target:
  1835. * searches for the attribute 'timeline-item' in the event target's element tree
  1836. * @param {Event} event
  1837. * @return {Item | null} item
  1838. */
  1839. ItemSet.prototype.itemFromTarget = function(event) {
  1840. var target = event.target;
  1841. while (target) {
  1842. if (target.hasOwnProperty('timeline-item')) {
  1843. return target['timeline-item'];
  1844. }
  1845. target = target.parentNode;
  1846. }
  1847. return null;
  1848. };
  1849. /**
  1850. * Find the Group from an event target:
  1851. * searches for the attribute 'timeline-group' in the event target's element tree
  1852. * @param {Event} event
  1853. * @return {Group | null} group
  1854. */
  1855. ItemSet.prototype.groupFromTarget = function(event) {
  1856. var clientY = event.center ? event.center.y : event.clientY;
  1857. for (var i = 0; i < this.groupIds.length; i++) {
  1858. var groupId = this.groupIds[i];
  1859. var group = this.groups[groupId];
  1860. var foreground = group.dom.foreground;
  1861. var top = util.getAbsoluteTop(foreground);
  1862. if (clientY > top && clientY < top + foreground.offsetHeight) {
  1863. return group;
  1864. }
  1865. if (this.options.orientation.item === 'top') {
  1866. if (i === this.groupIds.length - 1 && clientY > top) {
  1867. return group;
  1868. }
  1869. }
  1870. else {
  1871. if (i === 0 && clientY < top + foreground.offset) {
  1872. return group;
  1873. }
  1874. }
  1875. }
  1876. return null;
  1877. };
  1878. /**
  1879. * Find the ItemSet from an event target:
  1880. * searches for the attribute 'timeline-itemset' in the event target's element tree
  1881. * @param {Event} event
  1882. * @return {ItemSet | null} item
  1883. */
  1884. ItemSet.itemSetFromTarget = function(event) {
  1885. var target = event.target;
  1886. while (target) {
  1887. if (target.hasOwnProperty('timeline-itemset')) {
  1888. return target['timeline-itemset'];
  1889. }
  1890. target = target.parentNode;
  1891. }
  1892. return null;
  1893. };
  1894. /**
  1895. * Clone the data of an item, and "normalize" it: convert the start and end date
  1896. * to the type (Date, Moment, ...) configured in the DataSet. If not configured,
  1897. * start and end are converted to Date.
  1898. * @param {Object} itemData, typically `item.data`
  1899. * @param {string} [type] Optional Date type. If not provided, the type from the DataSet is taken
  1900. * @return {Object} The cloned object
  1901. * @private
  1902. */
  1903. ItemSet.prototype._cloneItemData = function (itemData, type) {
  1904. var clone = util.extend({}, itemData);
  1905. if (!type) {
  1906. // convert start and end date to the type (Date, Moment, ...) configured in the DataSet
  1907. type = this.itemsData.getDataSet()._options.type;
  1908. }
  1909. if (clone.start != undefined) {
  1910. clone.start = util.convert(clone.start, type && type.start || 'Date');
  1911. }
  1912. if (clone.end != undefined) {
  1913. clone.end = util.convert(clone.end , type && type.end || 'Date');
  1914. }
  1915. return clone;
  1916. };
  1917. module.exports = ItemSet;