dat.gui/time/scrubber.js

775 lines
16 KiB
JavaScript

GUI.Controller.prototype.at = function(when, what, tween) {
if (!this.scrubber) {
GUI.error("You must create a new Timer for this GUI in order to define events.");
return this;
}
this.scrubber.add(new GUI.ScrubberPoint(this.scrubber, when, what));
this.scrubber.render();
return this;
}
GUI.Scrubber = function(controller, timer) {
var _this = this;
this.points = [];
this.timer = timer;
this.timer.scrubbers.push(this);
this.controller = controller;
this.controller.scrubber = this;
this.playing = false;
var previouslyHandled;
this.getSaveObject = function() {
var pointArray = [];
for (var i in this.points) {
pointArray.push(this.points[i].getSaveObject());
}
var obj = {'points': pointArray};
return obj;
};
this.sort = function() {
this.points.sort(function(a,b) {
return a.time - b.time;
});
};
this.add = function(p) {
this.points.push(p);
this.getSaveObject();
this.sort();
};
var lastDown = 0;
this.controller.addChangeListener(function(newVal) {
if (!_this.playing) {
var v = newVal;
if (_this.controller.type == "boolean") {
v = !v; // Couldn't tell you why I have to do this.
}
if (_this.timer.activePoint == null) {
_this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, v);
_this.add(_this.timer.activePoint);
_this.render();
} else {
_this.timer.activePoint.value = v;
}
}
});
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-scrubber');
var canvas = document.createElement('canvas');
this.domElement.appendChild(canvas);
this.g = canvas.getContext('2d');
var width;
var position;
var height;
var mx, pmx;
this.__defineGetter__('width', function() {
return width;
});
this.__defineGetter__('height', function() {
return height;
});
controller.domElement.insertBefore(this.domElement, controller.propertyNameElement.nextSibling);
this.render = function() {
// TODO: if visible ...
_this.g.clearRect(0, 0, width, height);
// Draw 0
if (_this.timer.windowMin < 0) {
var x = GUI.map(0, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth, 0, width);
_this.g.fillStyle = '#000';
_this.g.fillRect(0, 0, x, height-1);
}
// Draw ticks
if (_this.timer.useSnap) {
_this.g.lineWidth = 1;
for (var i = _this.timer.snap(_this.timer.windowMin); i < _this.timer.windowMin+_this.timer.windowWidth; i+= _this.timer.snapIncrement) {
if (i == 0) continue;
var x = Math.round(GUI.map(i, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth, 0, width))+0.5;
if (i < 0) {
_this.g.strokeStyle = '#111111';
} else {
_this.g.strokeStyle = '#282828';
}
_this.g.beginPath();
_this.g.moveTo(x, 0);
_this.g.lineTo(x, height-1);
_this.g.stroke();
}
}
// Draw points
for (var i in _this.points) {
_this.points[i].render();
}
// Draw playhead
_this.g.strokeStyle = '#ff0024';
_this.g.lineWidth = 1;
var t = Math.round(GUI.map(_this.timer.playhead, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth, 0, width))+0.5;
_this.g.beginPath();
_this.g.moveTo(t, 0);
_this.g.lineTo(t, height);
_this.g.stroke();
}
this.render();
var onResize = function() {
canvas.width = width = _this.domElement.offsetWidth;
canvas.height = height = _this.domElement.offsetHeight;
position = GUI.getOffset(canvas);
_this.render();
};
window.addEventListener('resize', function(e) {
onResize();
}, false);
var scrubPan = function() {
var t = _this.timer.playhead;
var tmin = _this.timer.windowMin + _this.timer.windowWidth/5;
var tmax = _this.timer.windowMin + _this.timer.windowWidth - _this.timer.windowWidth/5;
if (t < tmin) {
_this.timer.windowMin += GUI.map(t, _this.timer.windowMin, tmin, -_this.timer.windowWidth/50, 0);
}
if (t > tmax) {
_this.timer.windowMin += 0;
_this.timer.windowMin += GUI.map(t, tmax, _this.timer.windowMin+_this.timer.windowWidth, 0,_this.timer.windowWidth/50);
}
}
var scrub = function(e) {
var t = GUI.map(e.pageX, position.left, position.left+width, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth);
_this.timer.playhead = _this.timer.snap(t);
scrubPan();
}
var pan = function(e) {
mx = e.pageX;
var t = GUI.map(mx - pmx, 0, width, 0, _this.timer.windowWidth);
_this.timer.windowMin -= t;
pmx = mx;
}
var dragActive = function(e) {
var t = GUI.map(e.pageX, position.left, position.left+width, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth);
_this.timer.activePoint.time = _this.timer.snap(t);
_this.timer.playhead = _this.timer.snap(t);
pmx = mx;
_this.sort();
}
canvas.addEventListener('mousedown', function(e) {
if (false) {
e.preventDefault();
document.addEventListener('mousemove', pan, false);
return false;
}
var thisDown = GUI.millis();
// Double click creates a keyframe
if (thisDown - lastDown < 300) {
_this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, _this.controller.getValue());
_this.add(_this.timer.activePoint);
_this.render();
// A regular click COULD select a point ...
} else if (_this.timer.hoverPoint != null) {
_this.timer.activePoint = _this.timer.hoverPoint;
_this.timer.playhead = _this.timer.snap(_this.timer.activePoint.time);
pmx = mx = e.pageX;
document.addEventListener('mousemove', dragActive, false);
// Or we could just be trying to place the playhead/scrub.
} else {
_this.timer.activePoint = null;
_this.timer.hoverPoint = null;
scrub(e);
document.body.style.cursor = 'text';
_this.timer.pause();
pmx = mx = e.pageX;
document.addEventListener('mousemove', scrub, false);
_this.render();
}
lastDown = thisDown;
}, false);
canvas.addEventListener('mousewheel', function(e) {
e.preventDefault();
var dx = e.wheelDeltaX*4;
var dy = e.wheelDeltaY*4;
_this.timer.windowWidth -= dy;
_this.timer.windowMin += dy/2 - dx;
return false;
}, false);
canvas.addEventListener('mousemove', function(e) {
_this.timer.hoverPoint = null;
for (var i in _this.points) {
var cur = _this.points[i];
if (cur.isHovering(e.pageX-position.left)) {
_this.timer.hoverPoint = cur;
}
}
if (_this.timer.hoverPoint == null) {
document.body.style.cursor = 'pointer';
} else {
document.body.style.cursor = 'auto';
}
_this.render();
});
document.addEventListener('mouseup', function() {
document.body.style.cursor = 'auto';
document.removeEventListener('mousemove', dragActive, false);
document.removeEventListener('mousemove', scrub, false);
document.removeEventListener('mousemove', pan, false);
}, false);
onResize();
this.timer.addPlayListener(this.render);
var handlePoint = function(point) {
if (point != previouslyHandled) {
previouslyHandled = point;
_this.controller.setValue(point.value);
}
};
var onPlayChange = function(curTime, prevTime) {
if (_this.points.length == 0) return;
_this.playing = true;
if (_this.controller.type == 'function') {
for (var i = 0; i < _this.points.length; i++) {
var t = _this.points[i].time;
if ((curTime > prevTime && prevTime < t && t < curTime) ||
(curTime < prevTime && prevTime > t && t > curTime)) {
_this.controller.getValue().call(this);
}
}
} else {
var prev = undefined, next = undefined;
// Find "surrounding" points.
for (var i = 0; i < _this.points.length; i++) {
var t = _this.points[i].time;
if (t > curTime) {
if (i == 0) {
prev = null;
next = _this.points[i];
break;
} else {
prev = _this.points[i-1];
next = _this.points[i];
break;
}
}
}
if (next == undefined) {
prev = _this.points[_this.points.length-1];
next = null;
}
if (next != null & prev != null) {
if (_this.controller.type == 'number') {
var t = prev.tween(GUI.map(curTime, prev.time, next.time, 0, 1));
_this.controller.setValue(GUI.map(t, 0, 1, prev.value, next.value));
} else {
handlePoint(prev);
}
} else if (next != null) {
handlePoint(next);
} else if (prev != null) {
handlePoint(prev);
}
}
_this.playing = false;
};
this.timer.addPlayListener(onPlayChange);
this.timer.addWindowListener(this.render);
};
GUI.ScrubberPoint = function(scrubber, time, value) {
var _this = this;
var g = scrubber.g;
var timer = scrubber.timer;
var type = scrubber.controller.type;
var x, y;
this.hold = false;
var val;
this.__defineSetter__("value", function(v) {
val = v;
scrubber.render();
});
this.value = value;
this.__defineGetter__("value", function() {
return val;
});
this.__defineGetter__("x", function() {
return x;
});
this.__defineGetter__("y", function() {
return y;
});
var barSize = 4;
var rectSize = 7;
var c1 = '#ffd800';
var c2 = '#ff9000';
this.getSaveObject = function() {
var obj = { 'value': _this.value, 'time': time };
// TODO: save tweens
return obj;
};
this.tween = function(t) {
return t;
};
this.remove = function() {
scrubber.points.splice(scrubber.points.indexOf(this), 1);
scrubber.render();
};
this.isHovering = function(xx) {
return xx >= x-rectSize/2 && xx <= x+rectSize/2;
};
this.__defineGetter__('next', function() {
if (scrubber.points.length <= 1) {
return null;
}
var i = scrubber.points.indexOf(this);
if (i + 1 >= scrubber.points.length) {
return null;
}
return scrubber.points[i+1];
});
this.__defineGetter__('time', function() {
return time;
});
this.__defineSetter__('time', function(s) {
time = s;
});
this.render = function() {
x = GUI.map(time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1);
if (x >= 0 && x <= 1) {
x = Math.round(GUI.map(x, 0, 1, 0, scrubber.width));
} else {
return;
}
y = scrubber.height/2;
if (scrubber.controller.type == 'number') {
y = GUI.map(_this.value, scrubber.controller.min, scrubber.controller.max, scrubber.height, 0);
}
if (scrubber.timer.activePoint == this) {
g.fillStyle = '#ffd800'; //
} else if (scrubber.timer.hoverPoint == this) {
g.fillStyle = '#999';
} else {
g.fillStyle = '#ccc';
}
switch (type) {
case 'boolean':
g.save();
g.translate(x, y-0.5);
if (this.value) {
g.strokeStyle = g.fillStyle;
g.lineWidth = barSize;
g.beginPath();
g.arc(0, 0, barSize, 0, Math.PI*2, false);
g.stroke();
} else {
g.rotate(Math.PI/4);
g.fillRect(-barSize/2, -barSize*3.5/2, barSize, barSize*3.5);
g.rotate(Math.PI/2);
g.fillRect(-barSize/2, -barSize*3.5/2, barSize, barSize*3.5);
}
g.restore();
break;
case 'number':
g.save();
var n = this.next;
if (n != null) {
console.log(n.x, n.y);
g.lineWidth = rectSize/2;
g.strokeStyle='#222';
g.beginPath();
g.moveTo(n.x, n.y);
g.lineTo(x, y);
g.stroke();
}
g.translate(x, y);
g.rotate(Math.PI/4);
// g.fillStyle = c1;
g.fillRect(-rectSize/2, -rectSize/2, rectSize, rectSize);
g.restore();
break;
default:
g.save();
g.translate(x-barSize/2, 0);
//g.fillStyle = c1;
g.fillRect(0, 0, barSize/2, scrubber.height-1);
//g.fillStyle = c2;
g.fillRect(barSize/2, 0, barSize/2, scrubber.height-1);
g.restore();
}
}
}
GUI.Easing = {}
GUI.Easing.Linear = function ( k ) {
return k;
};
GUI.Easing.QuadraticEaseIn = function ( k ) {
return k * k;
};
GUI.Easing.QuadraticEaseOut = function ( k ) {
return - k * ( k - 2 );
};
GUI.Easing.QuadraticEaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
return - 0.5 * ( --k * ( k - 2 ) - 1 );
};
GUI.Easing.CubicEaseIn = function ( k ) {
return k * k * k;
};
GUI.Easing.CubicEaseOut = function ( k ) {
return --k * k * k + 1;
};
GUI.Easing.CubicEaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k;
return 0.5 * ( ( k -= 2 ) * k * k + 2 );
};
GUI.Easing.QuarticEaseIn = function ( k ) {
return k * k * k * k;
};
GUI.Easing.QuarticEaseOut = function ( k ) {
return - ( --k * k * k * k - 1 );
}
GUI.Easing.QuarticEaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k;
return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 );
};
//
GUI.Easing.QuinticEaseIn = function ( k ) {
return k * k * k * k * k;
};
GUI.Easing.QuinticEaseOut = function ( k ) {
return ( k = k - 1 ) * k * k * k * k + 1;
};
GUI.Easing.QuinticEaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k;
return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 );
};
GUI.Easing.SinusoidalEaseIn = function ( k ) {
return - Math.cos( k * Math.PI / 2 ) + 1;
};
GUI.Easing.SinusoidalEaseOut = function ( k ) {
return Math.sin( k * Math.PI / 2 );
};
GUI.Easing.SinusoidalEaseInOut = function ( k ) {
return - 0.5 * ( Math.cos( Math.PI * k ) - 1 );
};
GUI.Easing.ExponentialEaseIn = function ( k ) {
return k == 0 ? 0 : Math.pow( 2, 10 * ( k - 1 ) );
};
GUI.Easing.ExponentialEaseOut = function ( k ) {
return k == 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1;
};
GUI.Easing.ExponentialEaseInOut = function ( k ) {
if ( k == 0 ) return 0;
if ( k == 1 ) return 1;
if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 2, 10 * ( k - 1 ) );
return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 );
};
GUI.Easing.CircularEaseIn = function ( k ) {
return - ( Math.sqrt( 1 - k * k ) - 1);
};
GUI.Easing.CircularEaseOut = function ( k ) {
return Math.sqrt( 1 - --k * k );
};
GUI.Easing.CircularEaseInOut = function ( k ) {
if ( ( k /= 0.5 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1);
return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1);
};
GUI.Easing.ElasticEaseIn = function( k ) {
var s, a = 0.1, p = 0.4;
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
};
GUI.Easing.ElasticEaseOut = function( k ) {
var s, a = 0.1, p = 0.4;
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 );
};
GUI.Easing.ElasticEaseInOut = function( k ) {
var s, a = 0.1, p = 0.4;
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1;
};
GUI.Easing.BackEaseIn = function( k ) {
var s = 1.70158;
return k * k * ( ( s + 1 ) * k - s );
};
GUI.Easing.BackEaseOut = function( k ) {
var s = 1.70158;
return ( k = k - 1 ) * k * ( ( s + 1 ) * k + s ) + 1;
};
GUI.Easing.BackEaseInOut = function( k ) {
var s = 1.70158 * 1.525;
if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) );
return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 );
};
GUI.Easing.BounceEaseIn = function( k ) {
return 1 - GUI.Easing.Bounce.EaseOut( 1 - k );
};
GUI.Easing.BounceEaseOut = function( k ) {
if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
return 7.5625 * k * k;
} else if ( k < ( 2 / 2.75 ) ) {
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
} else if ( k < ( 2.5 / 2.75 ) ) {
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
} else {
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
}
};
GUI.Easing.BounceEaseInOut = function( k ) {
if ( k < 0.5 ) return GUI.Easing.Bounce.EaseIn( k * 2 ) * 0.5;
return GUI.Easing.Bounce.EaseOut( k * 2 - 1 ) * 0.5 + 0.5;
};