mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
538 lines
11 KiB
JavaScript
538 lines
11 KiB
JavaScript
GUI.Controller.prototype.at = function(when, what, tween) {
|
|
// TODO: tween
|
|
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-time');
|
|
|
|
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;
|
|
}
|
|
|
|
console.log(next, prev);
|
|
|
|
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;
|
|
});
|
|
|
|
var barSize = 4;
|
|
var rectSize = 7;
|
|
|
|
var c1 = '#ffd800';
|
|
var c2 = '#ff9000';
|
|
|
|
this.getSaveObject = function() {
|
|
var obj = { 'value': _this.value, 'time': time };
|
|
|
|
if (this.hold) {
|
|
obj.hold = true;
|
|
}
|
|
|
|
// 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.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) {
|
|
|
|
var nx = GUI.constrain(GUI.map(n.time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1));
|
|
|
|
nx = GUI.constrain(GUI.map(nx, 0, 1, 0, scrubber.width));
|
|
|
|
g.lineWidth = rectSize/2
|
|
g.strokeStyle='#222';
|
|
g.beginPath();
|
|
g.moveTo(nx, 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();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|