mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Made backwards scrubbing better, weird bug on last string point
This commit is contained in:
parent
121da420e8
commit
7d9bc0ef96
@ -8,13 +8,14 @@ GUI.BooleanController = function() {
|
||||
input.setAttribute('type', 'checkbox');
|
||||
|
||||
this.domElement.addEventListener('click', function(e) {
|
||||
input.checked = !input.checked;
|
||||
e.preventDefault();
|
||||
_this.setValue(input.checked);
|
||||
// input.checked = !input.checked;
|
||||
// e.preventDefault();
|
||||
// _this.setValue(input.checked);
|
||||
}, false);
|
||||
|
||||
input.addEventListener('mouseup', function(e) {
|
||||
input.checked = !input.checked; // counteracts default.
|
||||
//input.checked = !input.checked; // counteracts default.
|
||||
_this.setValue(this.checked);
|
||||
}, false);
|
||||
|
||||
this.domElement.style.cursor = "pointer";
|
||||
|
@ -27,18 +27,20 @@ GUI.Scrubber = function(controller, timer) {
|
||||
this.sort();
|
||||
}
|
||||
|
||||
var lastDown = 0;
|
||||
|
||||
this.controller.addChangeListener(function(newVal) {
|
||||
|
||||
|
||||
if (!_this.playing) {
|
||||
if (_this.timer.activePoint == null) {
|
||||
_this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, newVal);
|
||||
_this.add(_this.timer.activePoint);
|
||||
_this.render();
|
||||
} else {
|
||||
_this.timer.activePoint.value = newVal;
|
||||
|
||||
if (!_this.playing) {
|
||||
if (_this.timer.activePoint == null) {
|
||||
_this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, newVal);
|
||||
_this.add(_this.timer.activePoint);
|
||||
_this.render();
|
||||
} else {
|
||||
_this.timer.activePoint.value = newVal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
this.domElement = document.createElement('div');
|
||||
@ -101,20 +103,30 @@ GUI.Scrubber = function(controller, timer) {
|
||||
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 = t;
|
||||
|
||||
/*
|
||||
if (t < _this.timer.windowMin + _this.timer.windowWidth/5) {
|
||||
_this.timer.windowMin = _this.timer.playhead -_this.timer.windowWidth/5;
|
||||
}
|
||||
|
||||
if (t > _this.timer.windowMin + _this.timer.windowWidth - _this.timer.windowWidth/5) {
|
||||
_this.timer.windowMin = _this.timer.playhead +_this.timer.windowWidth/5-_this.timer.windowWidth;
|
||||
}*/
|
||||
scrubPan();
|
||||
|
||||
}
|
||||
|
||||
@ -130,7 +142,16 @@ GUI.Scrubber = function(controller, timer) {
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousedown', function(e) {
|
||||
if (_this.timer.hoverPoint != null) {
|
||||
|
||||
var thisDown = GUI.millis();
|
||||
|
||||
if (thisDown - lastDown < 300) {
|
||||
|
||||
_this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, _this.controller.getValue());
|
||||
_this.add(_this.timer.activePoint);
|
||||
_this.render();
|
||||
|
||||
} else if (_this.timer.hoverPoint != null ) {
|
||||
|
||||
_this.timer.activePoint = _this.timer.hoverPoint;
|
||||
_this.timer.playhead = _this.timer.activePoint.time;
|
||||
@ -143,11 +164,14 @@ GUI.Scrubber = function(controller, timer) {
|
||||
_this.timer.hoverPoint = null;
|
||||
scrub(e);
|
||||
document.body.style.cursor = "text";
|
||||
_this.timer.pause();
|
||||
document.addEventListener('mousemove', scrub, false);
|
||||
_this.render();
|
||||
|
||||
}
|
||||
|
||||
lastDown = thisDown;
|
||||
|
||||
}, false);
|
||||
|
||||
canvas.addEventListener('mousemove', function(e) {
|
||||
@ -185,7 +209,8 @@ GUI.Scrubber = function(controller, timer) {
|
||||
// This assumes a SORTED point array
|
||||
// And a PROGRESSING/INCREASING/GROWING playhead
|
||||
|
||||
if (_this.controller.type == "number") {
|
||||
if (_this.controller.type == "number" ||
|
||||
_this.controller.type == "string") {
|
||||
|
||||
var closestToLeft = null;
|
||||
for (var i = 0; i < _this.points.length; i++) {
|
||||
@ -196,7 +221,8 @@ GUI.Scrubber = function(controller, timer) {
|
||||
}
|
||||
}
|
||||
|
||||
if (closestToLeft != null && closestToLeft.time <= curTime) {
|
||||
if (closestToLeft != null && closestToLeft.time <= curTime &&
|
||||
_this.controller.type == "number") {
|
||||
|
||||
var n = closestToLeft.next;
|
||||
if (n != null) {
|
||||
@ -209,19 +235,29 @@ GUI.Scrubber = function(controller, timer) {
|
||||
|
||||
}
|
||||
|
||||
} else if (closestToLeft != null) {
|
||||
_this.controller.setValue(closestToLeft.value);
|
||||
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
for (var i = 0; i < _this.points.length; i++) {
|
||||
var cur = _this.points[i];
|
||||
|
||||
if (cur.time < prevTime) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (cur.time >= prevTime && cur.time <= curTime) {
|
||||
pointHandlers[_this.controller.type].call(_this, cur);
|
||||
|
||||
var cur = _this.points[i];
|
||||
if (prevTime < curTime) {
|
||||
|
||||
|
||||
if (cur.time < prevTime) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (cur.time >= prevTime && cur.time <= curTime) {
|
||||
pointHandlers[_this.controller.type].call(_this, cur);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -25,13 +25,12 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
var onDrag = function(e) {
|
||||
if (!clicked) return;
|
||||
var pos = GUI.getOffset(_this.domElement);
|
||||
console.log(pos.left + " " + pos.top);
|
||||
var val = GUI.map(e.pageX, pos.left, pos.top + _this.domElement.offsetWidth, min, max);
|
||||
var val = GUI.map(e.pageX, pos.left, pos.left + _this.domElement.offsetWidth, min, max);
|
||||
val = Math.round(val/step)*step;
|
||||
numberController.setValue(val);
|
||||
}
|
||||
|
||||
this.domElement.addEventListener('mousedown', function(e) {
|
||||
this.domElement.addEventListener('mousedown', function(e) {
|
||||
clicked = true;
|
||||
x = px = e.pageX;
|
||||
_this.domElement.setAttribute('class', 'guidat-slider-bg active');
|
||||
|
@ -1,3 +1,8 @@
|
||||
GUI.millis = function() {
|
||||
var d = new Date();
|
||||
return d.getTime();
|
||||
}
|
||||
|
||||
GUI.Timer = function(gui) {
|
||||
|
||||
var _this = this;
|
||||
@ -13,8 +18,8 @@ GUI.Timer = function(gui) {
|
||||
var playListeners = [];
|
||||
var windowListeners = [];
|
||||
|
||||
var windowMin = 0;
|
||||
var windowWidth = 10000;
|
||||
var windowMin = -windowWidth/4;
|
||||
|
||||
var thisTime;
|
||||
var lastTime;
|
||||
@ -24,11 +29,6 @@ GUI.Timer = function(gui) {
|
||||
|
||||
var playing = false;
|
||||
|
||||
var millis = function() {
|
||||
var d = new Date();
|
||||
return d.getTime();
|
||||
}
|
||||
|
||||
window.addEventListener("keyup", function(e) {
|
||||
switch (e.keyCode) {
|
||||
case 32:
|
||||
@ -91,14 +91,14 @@ GUI.Timer = function(gui) {
|
||||
|
||||
this.play = function() {
|
||||
playing = true;
|
||||
lastTime = millis();
|
||||
lastTime = GUI.millis();
|
||||
if (playInterval == -1) {
|
||||
playInterval = setInterval(this.update, playResolution);
|
||||
}
|
||||
};
|
||||
|
||||
this.update = function() {
|
||||
thisTime = millis();
|
||||
thisTime = GUI.millis();
|
||||
_this.playhead = _this.playhead + (thisTime - lastTime);
|
||||
lastTime = thisTime;
|
||||
};
|
||||
@ -120,7 +120,7 @@ GUI.Timer = function(gui) {
|
||||
this.stop = function() {
|
||||
this.pause();
|
||||
this.playhead = 0;
|
||||
this.windowMin = 0;
|
||||
this.windowMin = -windowWidth/4;
|
||||
};
|
||||
|
||||
this.addPlayListener = function(fnc) {
|
||||
|
@ -44,7 +44,7 @@
|
||||
|
||||
// Text field
|
||||
gui.add(fizzyText, "message")
|
||||
.at(-1000, "gui-dat")
|
||||
.at(1, "gui-dat")
|
||||
.at(1000, "is")
|
||||
.at(2000, "getting")
|
||||
.at(3000, "pretty")
|
||||
|
Loading…
Reference in New Issue
Block a user