diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index 5e615b7af..fa40a1679 100644 --- a/lib/timeline/component/ItemSet.js +++ b/lib/timeline/component/ItemSet.js @@ -116,12 +116,12 @@ function ItemSet(body, options) { this.options = util.extend({}, this.defaultOptions); this.options.rtl = options.rtl; this.options.onTimeout = options.onTimeout; - + // options for getting items from the DataSet with the correct type this.itemOptions = { type: {start: 'Date', end: 'Date'} }; - + this.conversion = { toScreen: body.util.toScreen, toTime: body.util.toTime @@ -129,14 +129,14 @@ function ItemSet(body, options) { this.dom = {}; this.props = {}; this.hammer = null; - + var me = this; this.itemsData = null; // DataSet this.groupsData = null; // DataSet this.itemsSettingTime = null; this.initialItemSetDrawn = false; - this.userContinueNotBail = null; - + this.userContinueNotBail = null; + // listeners for the DataSet of the items this.itemListeners = { 'add': function (event, params, senderId) { // eslint-disable-line no-unused-vars @@ -154,7 +154,7 @@ function ItemSet(body, options) { this.groupListeners = { 'add': function (event, params, senderId) { // eslint-disable-line no-unused-vars me._onAddGroups(params.items); - + if (me.groupsData && me.groupsData.length > 0) { var groupsData = me.groupsData.getDataSet(); groupsData.get().forEach(function (groupData) { @@ -283,20 +283,22 @@ ItemSet.prototype._create = function(){ } else { this.groupHammer = new Hammer(this.body.dom.leftContainer); } - + this.groupHammer.on('tap', this._onGroupClick.bind(this)); this.groupHammer.on('panstart', this._onGroupDragStart.bind(this)); this.groupHammer.on('panmove', this._onGroupDrag.bind(this)); this.groupHammer.on('panend', this._onGroupDragEnd.bind(this)); this.groupHammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_VERTICAL}); - - this.body.dom.centerContainer.addEventListener('mouseover', this._onMouseOver.bind(this)); - this.body.dom.centerContainer.addEventListener('mouseout', this._onMouseOut.bind(this)); - this.body.dom.centerContainer.addEventListener('mousemove', this._onMouseMove.bind(this)); - // right-click on timeline - this.body.dom.centerContainer.addEventListener('contextmenu', this._onDragEnd.bind(this)); - this.body.dom.centerContainer.addEventListener('mousewheel', this._onMouseWheel.bind(this)); + // bind mouse events to dom for item and dot + ['centerContainer', 'backgroundVertical'].forEach(function(elem) { + this.body.dom[elem].addEventListener('mouseover', this._onMouseOver.bind(this)); + this.body.dom[elem].addEventListener('mouseout', this._onMouseOut.bind(this)); + this.body.dom[elem].addEventListener('mousemove', this._onMouseMove.bind(this)); + this.body.dom[elem].addEventListener('mousewheel', this._onMouseWheel.bind(this)); + // right-click on timeline + this.body.dom[elem].addEventListener('contextmenu', this._onDragEnd.bind(this)); + }.bind(this)); // attach to the DOM this.show(); @@ -482,7 +484,7 @@ ItemSet.prototype.markDirty = function(options) { */ ItemSet.prototype.destroy = function() { this.clearPopupTimer(); - + this.hide(); this.setItems(null); this.setGroups(null); @@ -611,7 +613,7 @@ ItemSet.prototype.getVisibleItems = function() { var range = this.body.range.getRange(); var right, left; - if (this.options.rtl) { + if (this.options.rtl) { right = this.body.util.toScreen(range.start); left = this.body.util.toScreen(range.end); } else { @@ -630,7 +632,7 @@ ItemSet.prototype.getVisibleItems = function() { for (var i = 0; i < rawVisibleItems.length; i++) { var item = rawVisibleItems[i]; // TODO: also check whether visible vertically - if (this.options.rtl) { + if (this.options.rtl) { if ((item.right < left) && (item.right + item.width > right)) { ids.push(item.id); } @@ -1064,7 +1066,7 @@ ItemSet.prototype._onUpdate = function(ids) { var selected; if (item) { - // update item + // update item if (!constructor || !(item instanceof constructor)) { // item type has changed, delete the item and recreate it selected = item.selected; // preserve selection of this item @@ -1470,7 +1472,7 @@ ItemSet.prototype._onDragStart = function (event) { // called after markDirty() without redraw() being called between. this.redraw(); } - + var baseGroupIndex = this._getGroupIndex(item.data.group); var itemsToDrag = (this.options.itemsAlwaysDraggable.item && !item.selected) ? [item.id] : this.getSelection(); @@ -1537,7 +1539,7 @@ ItemSet.prototype._onDragStartAddItem = function (event) { newItem.data = this._cloneItemData(itemData); this._addItem(newItem); this.touchParams.selectedItem = newItem; - + var props = { item: newItem, initialX: event.center.x, @@ -1565,7 +1567,7 @@ ItemSet.prototype._onDrag = function (event) { if (this.popup != null) { this.popup.hide(); } - + if (this.touchParams.itemProps) { event.stopPropagation(); @@ -1704,7 +1706,7 @@ ItemSet.prototype._onDrag = function (event) { } }.bind(this)); }.bind(this)); - + this.body.emitter.emit('_change'); } }; @@ -1721,9 +1723,9 @@ ItemSet.prototype._moveToGroup = function(item, groupId) { var oldGroup = item.parent; oldGroup.remove(item); oldGroup.order(); - + item.data.group = group.groupId; - + group.add(item); group.order(); } @@ -1812,10 +1814,10 @@ ItemSet.prototype._onGroupClick = function (event) { ItemSet.prototype._onGroupDragStart = function (event) { if (this.options.groupEditable.order) { this.groupTouchParams.group = this.groupFromTarget(event); - + if (this.groupTouchParams.group) { event.stopPropagation(); - + this.groupTouchParams.originalOrder = this.groupsData.getIds({ order: this.options.groupOrder }); @@ -1826,14 +1828,14 @@ ItemSet.prototype._onGroupDragStart = function (event) { ItemSet.prototype._onGroupDrag = function (event) { if (this.options.groupEditable.order && this.groupTouchParams.group) { event.stopPropagation(); - + var groupsData = this.groupsData; if (this.groupsData instanceof DataView) { groupsData = this.groupsData.getDataSet() } // drag from one group to another var group = this.groupFromTarget(event); - + // try to avoid toggling when groups differ in height if (group && group.height != this.groupTouchParams.group.height) { var movingUp = (group.top < this.groupTouchParams.group.top); @@ -1853,24 +1855,24 @@ ItemSet.prototype._onGroupDrag = function (event) { } } } - + if (group && group != this.groupTouchParams.group) { var targetGroup = groupsData.get(group.groupId); var draggedGroup = groupsData.get(this.groupTouchParams.group.groupId); - + // switch groups if (draggedGroup && targetGroup) { this.options.groupOrderSwap(draggedGroup, targetGroup, groupsData); groupsData.update(draggedGroup); groupsData.update(targetGroup); } - + // fetch current order of groups var newOrder = groupsData.getIds({ order: this.options.groupOrder }); - + // in case of changes since _onGroupDragStart if (!util.equalArray(newOrder, this.groupTouchParams.originalOrder)) { var origOrder = this.groupTouchParams.originalOrder; @@ -1881,17 +1883,17 @@ ItemSet.prototype._onGroupDrag = function (event) { var orgOffset = 0; while (curPos < numGroups) { // as long as the groups are where they should be step down along the groups order - while ((curPos+newOffset) < numGroups - && (curPos+orgOffset) < numGroups + while ((curPos+newOffset) < numGroups + && (curPos+orgOffset) < numGroups && newOrder[curPos+newOffset] == origOrder[curPos+orgOffset]) { curPos++; } - + // all ok if (curPos+newOffset >= numGroups) { break; } - + // not all ok // if dragged group was move upwards everything below should have an offset if (newOrder[curPos+newOffset] == draggedId) { @@ -1902,8 +1904,8 @@ ItemSet.prototype._onGroupDrag = function (event) { else if (origOrder[curPos+orgOffset] == draggedId) { orgOffset = 1; - } - // found a group (apart from dragged group) that has the wrong position -> switch with the + } + // found a group (apart from dragged group) that has the wrong position -> switch with the // group at the position where other one should be, fix index arrays and continue else { var slippedPosition = newOrder.indexOf(origOrder[curPos+orgOffset]); @@ -1912,16 +1914,16 @@ ItemSet.prototype._onGroupDrag = function (event) { this.options.groupOrderSwap(switchGroup, shouldBeGroup, groupsData); groupsData.update(switchGroup); groupsData.update(shouldBeGroup); - + var switchGroupId = newOrder[curPos+newOffset]; newOrder[curPos+newOffset] = origOrder[curPos+orgOffset]; newOrder[slippedPosition] = switchGroupId; - + curPos++; } } } - + } } }; @@ -1929,7 +1931,7 @@ ItemSet.prototype._onGroupDrag = function (event) { ItemSet.prototype._onGroupDragEnd = function (event) { if (this.options.groupEditable.order && this.groupTouchParams.group) { event.stopPropagation(); - + // update existing group var me = this; var id = me.groupTouchParams.group.groupId; @@ -2093,7 +2095,7 @@ ItemSet.prototype._onMouseMove = function (event) { // restart timer this.setPopupTimer(this.popup); } - + if (this.options.showTooltips && this.options.tooltip.followMouse) { if (this.popup) { if (!this.popup.hidden) { @@ -2129,7 +2131,7 @@ ItemSet.prototype._onUpdateItem = function (item) { if (!this.options.editable.add) return; var me = this; - + if (item) { // execute async handler to update the item (or cancel it) var itemData = me.itemsData.get(item.id); // get a clone of the data from the dataset @@ -2144,7 +2146,7 @@ ItemSet.prototype._onUpdateItem = function (item) { /** * Handle drop event of data on item * Only called when `objectData.target === 'item'. - * @param {Event} event The event + * @param {Event} event The event * @private */ ItemSet.prototype._onDropObjectOnItem = function(event) { @@ -2261,7 +2263,7 @@ ItemSet.prototype._onMultiSelectItem = function (event) { selection.push(item.id); } var range = ItemSet._getItemRange(this.itemsData.get(selection, this.itemOptions)); - + if (!this.options.multiselectPerGroup || lastSelectedGroup == itemGroup) { // select all items within the selection range selection = []; @@ -2383,13 +2385,13 @@ ItemSet.prototype.itemFromRelatedTarget = function(event) { ItemSet.prototype.groupFromTarget = function(event) { var clientY = event.center ? event.center.y : event.clientY; var groupIds = this.groupIds; - + if (groupIds.length <= 0 && this.groupsData) { groupIds = this.groupsData.getIds({ order: this.options.groupOrder }); } - + for (var i = 0; i < groupIds.length; i++) { var groupId = groupIds[i]; var group = this.groups[groupId]; diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js index 595b9adee..7d878a858 100644 --- a/lib/timeline/component/item/BoxItem.js +++ b/lib/timeline/component/item/BoxItem.js @@ -78,6 +78,7 @@ BoxItem.prototype._createDomElement = function() { // dot on axis this.dom.dot = document.createElement('DIV'); this.dom.dot.className = 'vis-dot'; + this.dom.dot['timeline-item'] = this; // attach this item as attribute this.dom.box['timeline-item'] = this;