Browse Source

Fixed dragging items (half)

css_transitions
josdejong 10 years ago
parent
commit
e95d0d7e4e
4 changed files with 18 additions and 41 deletions
  1. +1
    -1
      src/timeline/Range.js
  2. +2
    -2
      src/timeline/Timeline.js
  3. +5
    -0
      src/timeline/component/CustomTime.js
  4. +10
    -38
      src/timeline/component/ItemSet.js

+ 1
- 1
src/timeline/Range.js View File

@ -16,7 +16,7 @@ function Range(root, parent, options) {
this.parent = parent;
this.options = options || {};
// drag listeners for draggign
// drag listeners for dragging
this.root.on('dragstart', this._onDragStart.bind(this));
this.root.on('drag', this._onDrag.bind(this));
this.root.on('dragend', this._onDragEnd.bind(this));

+ 2
- 2
src/timeline/Timeline.js View File

@ -427,7 +427,7 @@ Timeline.prototype.setSelection = function setSelection (ids) {
Timeline.prototype.getSelection = function getSelection() {
var itemOrGroupSet = (this.itemSet || this.groupSet);
if (itemOrGroupSet) itemOrGroupSet.getSelection() || [];
return itemOrGroupSet ? itemOrGroupSet.getSelection() : [];
};
/**
@ -556,7 +556,7 @@ Timeline.prototype._onMultiSelectItem = function (event) {
}
this.setSelection(selection);
this.emitter.emit('select', {
this.emit('select', {
items: this.getSelection()
});

+ 5
- 0
src/timeline/component/CustomTime.js View File

@ -118,6 +118,7 @@ CustomTime.prototype.getCustomTime = function() {
* @private
*/
CustomTime.prototype._onDragStart = function(event) {
this.eventParams.dragging = true;
this.eventParams.customTime = this.customTime;
event.stopPropagation();
@ -130,6 +131,8 @@ CustomTime.prototype._onDragStart = function(event) {
* @private
*/
CustomTime.prototype._onDrag = function (event) {
if (!this.eventParams.dragging) return;
var deltaX = event.gesture.deltaX,
x = this.options.toScreen(this.eventParams.customTime) + deltaX,
time = this.options.toTime(x);
@ -151,6 +154,8 @@ CustomTime.prototype._onDrag = function (event) {
* @private
*/
CustomTime.prototype._onDragEnd = function (event) {
if (!this.eventParams.dragging) return;
// fire a timechanged event
this.emit('timechanged', {
time: new Date(this.customTime.valueOf())

+ 10
- 38
src/timeline/component/ItemSet.js View File

@ -11,17 +11,11 @@
function ItemSet(options) {
this.id = util.randomUUID();
// event listeners
this.eventListeners = {
dragstart: this._onDragStart.bind(this),
drag: this._onDrag.bind(this),
dragend: this._onDragEnd.bind(this)
};
// one options object is shared by this itemset and all its items
this.options = options || {};
this.itemOptions = Object.create(this.options);
this.dom = {};
this.hammer = null;
var me = this;
this.itemsData = null; // DataSet
@ -98,36 +92,6 @@ ItemSet.types = {
*/
ItemSet.prototype.setOptions = Component.prototype.setOptions;
/**
* Set controller for this component
* @param {Controller | null} controller
*/
ItemSet.prototype.setController = function setController (controller) {
var event;
// unregister old event listeners
if (this.controller) {
for (event in this.eventListeners) {
if (this.eventListeners.hasOwnProperty(event)) {
this.controller.off(event, this.eventListeners[event]);
}
}
}
this.controller = controller || null;
// register new event listeners
if (this.controller) {
for (event in this.eventListeners) {
if (this.eventListeners.hasOwnProperty(event)) {
this.controller.on(event, this.eventListeners[event]);
}
}
}
};
/**
* Set range (start and end).
* @param {Range | Object} range A Range or an object containing start and end.
@ -204,7 +168,6 @@ ItemSet.prototype._deselect = function _deselect(id) {
ItemSet.prototype.repaint = function repaint() {
var asSize = util.option.asSize,
asString = util.option.asString,
asNumber = util.option.asNumber,
options = this.options,
orientation = this.getOption('orientation'),
frame = this.frame;
@ -240,6 +203,15 @@ ItemSet.prototype.repaint = function repaint() {
parentContainer.appendChild(frame);
parentContainer.appendChild(this.dom.axis);
// attach event listeners
// TODO: use event listeners from the rootpanel to improve performance
this.hammer = Hammer(frame, {
prevent_default: true
});
this.hammer.on('dragstart', this._onDragStart.bind(this));
this.hammer.on('drag', this._onDrag.bind(this));
this.hammer.on('dragend', this._onDragEnd.bind(this));
}
// update className

Loading…
Cancel
Save