Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Show tooltip on dot as well #4274

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Show tooltip on dot as well #4274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
98 changes: 50 additions & 48 deletions lib/timeline/component/ItemSet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,27 +116,27 @@ 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
};
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
Expand All @@ -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) {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -482,7 +484,7 @@ ItemSet.prototype.markDirty = function(options) {
*/
ItemSet.prototype.destroy = function() {
this.clearPopupTimer();

this.hide();
this.setItems(null);
this.setGroups(null);
Expand Down Expand Up @@ -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 {
Expand All @@ -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);
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -1565,7 +1567,7 @@ ItemSet.prototype._onDrag = function (event) {
if (this.popup != null) {
this.popup.hide();
}

if (this.touchParams.itemProps) {
event.stopPropagation();

Expand Down Expand Up @@ -1704,7 +1706,7 @@ ItemSet.prototype._onDrag = function (event) {
}
}.bind(this));
}.bind(this));

this.body.emitter.emit('_change');
}
};
Expand All @@ -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();
}
Expand Down Expand Up @@ -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
});
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -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) {
Expand All @@ -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]);
Expand All @@ -1912,24 +1914,24 @@ 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++;
}
}
}

}
}
};

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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand All @@ -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) {
Expand Down Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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];
Expand Down
1 change: 1 addition & 0 deletions lib/timeline/component/item/BoxItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down