Browse Source

Fixed vertical drag issue while pinching

css_transitions
jos 10 years ago
parent
commit
63c36ffb6f
4 changed files with 56 additions and 44 deletions
  1. +23
    -28
      src/timeline/Range.js
  2. +26
    -9
      src/timeline/Timeline.js
  3. +3
    -3
      test/timeline.html
  4. +4
    -4
      test/timeline_groups.html

+ 23
- 28
src/timeline/Range.js View File

@ -27,6 +27,10 @@ function Range(body, options) {
}; };
this.options = util.extend({}, this.defaultOptions); this.options = util.extend({}, this.defaultOptions);
this.props = {
touch: {}
};
// drag listeners for dragging // drag listeners for dragging
this.body.emitter.on('dragstart', this._onDragStart.bind(this)); this.body.emitter.on('dragstart', this._onDragStart.bind(this));
this.body.emitter.on('drag', this._onDrag.bind(this)); this.body.emitter.on('drag', this._onDrag.bind(this));
@ -260,9 +264,6 @@ Range.conversion = function (start, end, width) {
} }
}; };
// global (private) object to store drag params
var touchParams = {};
/** /**
* Start dragging horizontally or vertically * Start dragging horizontally or vertically
* @param {Event} event * @param {Event} event
@ -274,10 +275,10 @@ Range.prototype._onDragStart = function(event) {
// refuse to drag when we where pinching to prevent the timeline make a jump // refuse to drag when we where pinching to prevent the timeline make a jump
// when releasing the fingers in opposite order from the touch screen // when releasing the fingers in opposite order from the touch screen
if (touchParams.ignore) return;
if (!this.props.touch.allowDragging) return;
touchParams.start = this.start;
touchParams.end = this.end;
this.props.touch.start = this.start;
this.props.touch.end = this.end;
if (this.body.dom.root) { if (this.body.dom.root) {
this.body.dom.root.style.cursor = 'move'; this.body.dom.root.style.cursor = 'move';
@ -298,14 +299,15 @@ Range.prototype._onDrag = function (event) {
// refuse to drag when we where pinching to prevent the timeline make a jump // refuse to drag when we where pinching to prevent the timeline make a jump
// when releasing the fingers in opposite order from the touch screen // when releasing the fingers in opposite order from the touch screen
if (touchParams.ignore) return;
if (!this.props.touch.allowDragging) return;
console.log('onDrag range');
var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY, var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
interval = (touchParams.end - touchParams.start),
interval = (this.props.touch.end - this.props.touch.start),
width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height, width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
diffRange = -delta / width * interval; diffRange = -delta / width * interval;
this._applyRange(touchParams.start + diffRange, touchParams.end + diffRange);
this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
this.body.emitter.emit('rangechange', { this.body.emitter.emit('rangechange', {
start: new Date(this.start), start: new Date(this.start),
@ -324,7 +326,7 @@ Range.prototype._onDragEnd = function (event) {
// refuse to drag when we where pinching to prevent the timeline make a jump // refuse to drag when we where pinching to prevent the timeline make a jump
// when releasing the fingers in opposite order from the touch screen // when releasing the fingers in opposite order from the touch screen
if (touchParams.ignore) return;
if (!this.props.touch.allowDragging) return;
if (this.body.dom.root) { if (this.body.dom.root) {
this.body.dom.root.style.cursor = 'auto'; this.body.dom.root.style.cursor = 'auto';
@ -391,17 +393,10 @@ Range.prototype._onMouseWheel = function(event) {
* @private * @private
*/ */
Range.prototype._onTouch = function (event) { Range.prototype._onTouch = function (event) {
touchParams.start = this.start;
touchParams.end = this.end;
touchParams.ignore = false;
touchParams.center = null;
// don't move the range when dragging a selected event
// TODO: it's not so neat to have to know about ItemSet here
var item = ItemSet.itemFromTarget(event);
if (item && item.selected && this.options.editable) {
touchParams.ignore = true;
}
this.props.touch.start = this.start;
this.props.touch.end = this.end;
this.props.touch.allowDragging = true;
this.props.touch.center = null;
}; };
/** /**
@ -409,7 +404,7 @@ Range.prototype._onTouch = function (event) {
* @private * @private
*/ */
Range.prototype._onHold = function () { Range.prototype._onHold = function () {
touchParams.ignore = true;
this.props.touch.allowDragging = false;
}; };
/** /**
@ -421,19 +416,19 @@ Range.prototype._onPinch = function (event) {
// only allow zooming when configured as zoomable and moveable // only allow zooming when configured as zoomable and moveable
if (!(this.options.zoomable && this.options.moveable)) return; if (!(this.options.zoomable && this.options.moveable)) return;
touchParams.ignore = true;
this.props.touch.allowDragging = false;
if (event.gesture.touches.length > 1) { if (event.gesture.touches.length > 1) {
if (!touchParams.center) {
touchParams.center = getPointer(event.gesture.center, this.body.dom.center);
if (!this.props.touch.center) {
this.props.touch.center = getPointer(event.gesture.center, this.body.dom.center);
} }
var scale = 1 / event.gesture.scale, var scale = 1 / event.gesture.scale,
initDate = this._pointerToDate(touchParams.center);
initDate = this._pointerToDate(this.props.touch.center);
// calculate new start and end // calculate new start and end
var newStart = parseInt(initDate + (touchParams.start - initDate) * scale);
var newEnd = parseInt(initDate + (touchParams.end - initDate) * scale);
var newStart = parseInt(initDate + (this.props.touch.start - initDate) * scale);
var newEnd = parseInt(initDate + (this.props.touch.end - initDate) * scale);
// apply new range // apply new range
this.setRange(newStart, newEnd); this.setRange(newStart, newEnd);

+ 26
- 9
src/timeline/Timeline.js View File

@ -135,6 +135,8 @@ Timeline.prototype._create = function (container) {
this.on('rangechange', this.redraw.bind(this)); this.on('rangechange', this.redraw.bind(this));
this.on('change', this.redraw.bind(this)); this.on('change', this.redraw.bind(this));
this.on('touch', this._onTouch.bind(this));
this.on('pinch', this._onPinch.bind(this));
this.on('dragstart', this._onDragStart.bind(this)); this.on('dragstart', this._onDragStart.bind(this));
this.on('drag', this._onDrag.bind(this)); this.on('drag', this._onDrag.bind(this));
@ -147,7 +149,7 @@ Timeline.prototype._create = function (container) {
var me = this; var me = this;
var events = [ var events = [
'pinch',
'touch', 'pinch',
'tap', 'doubletap', 'hold', 'tap', 'doubletap', 'hold',
'dragstart', 'drag', 'dragend', 'dragstart', 'drag', 'dragend',
'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox 'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
@ -176,6 +178,7 @@ Timeline.prototype._create = function (container) {
border: {}, border: {},
scrollTop: 0 scrollTop: 0
}; };
this.touch = {}; // store state information needed for touch events
// attach the root panel to the provided container // attach the root panel to the provided container
if (!container) throw new Error('No container provided'); if (!container) throw new Error('No container provided');
@ -688,13 +691,31 @@ Timeline.prototype._stopAutoResize = function () {
// TODO: remove event listener on window.resize // TODO: remove event listener on window.resize
}; };
/**
* Start moving the timeline vertically
* @param {Event} event
* @private
*/
Timeline.prototype._onTouch = function (event) {
this.touch.allowDragging = true;
};
/**
* Start moving the timeline vertically
* @param {Event} event
* @private
*/
Timeline.prototype._onPinch = function (event) {
this.touch.allowDragging = false;
};
/** /**
* Start moving the timeline vertically * Start moving the timeline vertically
* @param {Event} event * @param {Event} event
* @private * @private
*/ */
Timeline.prototype._onDragStart = function (event) { Timeline.prototype._onDragStart = function (event) {
touchParams.initialScrollTop = this.props.scrollTop;
this.touch.initialScrollTop = this.props.scrollTop;
}; };
/** /**
@ -703,15 +724,14 @@ Timeline.prototype._onDragStart = function (event) {
* @private * @private
*/ */
Timeline.prototype._onDrag = function (event) { Timeline.prototype._onDrag = function (event) {
/* TODO: no dragging when pinching
// refuse to drag when we where pinching to prevent the timeline make a jump // refuse to drag when we where pinching to prevent the timeline make a jump
// when releasing the fingers in opposite order from the touch screen // when releasing the fingers in opposite order from the touch screen
if (touchParams.pinching) return;
*/
if (!this.touch.allowDragging) return;
var delta = event.gesture.deltaY; var delta = event.gesture.deltaY;
var oldScrollTop = this._getScrollTop(); var oldScrollTop = this._getScrollTop();
var newScrollTop = this._setScrollTop(touchParams.initialScrollTop + delta);
var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
if (newScrollTop != oldScrollTop) { if (newScrollTop != oldScrollTop) {
this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
@ -750,6 +770,3 @@ Timeline.prototype._setScrollTop = function (scrollTop) {
Timeline.prototype._getScrollTop = function () { Timeline.prototype._getScrollTop = function () {
return this.props.scrollTop; return this.props.scrollTop;
}; };
// global (private) object to store drag params
var touchParams = {};

+ 3
- 3
test/timeline.html View File

@ -28,10 +28,10 @@
</select> </select>
</div> </div>
<script> <script>
var orientation = document.getElementById('orientation');
orientation.onchange = function () {
var o = document.getElementById('orientation');
o.onchange = function () {
timeline.setOptions({ timeline.setOptions({
orientation: orientation.value
orientation: o.value
}); });
}; };
</script> </script>

+ 4
- 4
test/timeline_groups.html View File

@ -31,10 +31,10 @@
</select> </select>
</div> </div>
<script> <script>
var orientation = document.getElementById('orientation');
orientation.onchange = function () {
var o = document.getElementById('orientation');
o.onchange = function () {
timeline.setOptions({ timeline.setOptions({
orientation: orientation.value
orientation: o.value
}); });
}; };
</script> </script>
@ -79,7 +79,7 @@
updateGroup: true updateGroup: true
}, },
//stack: false, //stack: false,
//height: 200,
height: 200,
groupOrder: 'content' groupOrder: 'content'
}; };

Loading…
Cancel
Save