mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Changed tabs to two spaces. Happy?
This commit is contained in:
George Michael Brower
parent
561b4a1411
commit
92a13fd869
362
demo/demo.js
362
demo/demo.js
@ -1,227 +1,227 @@
|
|||||||
function FizzyText(message) {
|
function FizzyText(message) {
|
||||||
|
|
||||||
var that = this;
|
var that = this;
|
||||||
|
|
||||||
// These are the variables that we manipulate with gui-dat.
|
// These are the variables that we manipulate with gui-dat.
|
||||||
// Notice they're all defined with "this". That makes them public.
|
// Notice they're all defined with "this". That makes them public.
|
||||||
// Otherwise, gui-dat can't see them.
|
// Otherwise, gui-dat can't see them.
|
||||||
|
|
||||||
this.growthSpeed = 0.5; // how fast do particles change size?
|
this.growthSpeed = 0.5; // how fast do particles change size?
|
||||||
this.maxSize = 3.2; // how big can they get?
|
this.maxSize = 3.2; // how big can they get?
|
||||||
this.noiseStrength = 10; // how turbulent is the flow?
|
this.noiseStrength = 10; // how turbulent is the flow?
|
||||||
this.speed = 0.4; // how fast do particles move?
|
this.speed = 0.4; // how fast do particles move?
|
||||||
this.displayOutline = false; // should we draw the message as a stroke?
|
this.displayOutline = true; // should we draw the message as a stroke?
|
||||||
this.framesRendered = 0;
|
this.framesRendered = 0;
|
||||||
|
|
||||||
// __defineGetter__ and __defineSetter__ makes JavaScript believe that
|
// __defineGetter__ and __defineSetter__ makes JavaScript believe that
|
||||||
// we've defined a variable 'this.message'. This way, whenever we
|
// we've defined a variable 'this.message'. This way, whenever we
|
||||||
// change the message variable, we can call some more functions.
|
// change the message variable, we can call some more functions.
|
||||||
|
|
||||||
this.__defineGetter__("message", function () {
|
this.__defineGetter__("message", function () {
|
||||||
return message;
|
return message;
|
||||||
});
|
});
|
||||||
|
|
||||||
this.__defineSetter__("message", function (m) {
|
this.__defineSetter__("message", function (m) {
|
||||||
message = m;
|
message = m;
|
||||||
createBitmap(message);
|
createBitmap(message);
|
||||||
});
|
});
|
||||||
|
|
||||||
// We can even add functions to the DAT.GUI! As long as they have
|
// We can even add functions to the DAT.GUI! As long as they have
|
||||||
// 0 arguments, we can call them from the dat-gui panel.
|
// 0 arguments, we can call them from the dat-gui panel.
|
||||||
|
|
||||||
this.explode = function() {
|
this.explode = function() {
|
||||||
var mag = Math.random()*30+30;
|
var mag = Math.random() * 30 + 30;
|
||||||
for (var i in particles) {
|
for (var i in particles) {
|
||||||
var angle= Math.random()*Math.PI*2;
|
var angle = Math.random() * Math.PI * 2;
|
||||||
particles[i].vx = Math.cos(angle)*mag;
|
particles[i].vx = Math.cos(angle) * mag;
|
||||||
particles[i].vy = Math.sin(angle)*mag;
|
particles[i].vy = Math.sin(angle) * mag;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
////////////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
var width = 550;
|
var width = 550;
|
||||||
var height = 200;
|
var height = 200;
|
||||||
var textAscent = 101;
|
var textAscent = 101;
|
||||||
var textOffsetLeft = 80;
|
var textOffsetLeft = 80;
|
||||||
var noiseScale = 300;
|
var noiseScale = 300;
|
||||||
var frameTime = 30;
|
var frameTime = 30;
|
||||||
|
|
||||||
var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"];
|
var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"];
|
||||||
|
|
||||||
// This is the context we use to get a bitmap of text using
|
// This is the context we use to get a bitmap of text using
|
||||||
// the getImageData function.
|
// the getImageData function.
|
||||||
var r = document.createElement('canvas');
|
var r = document.createElement('canvas');
|
||||||
var s = r.getContext('2d');
|
var s = r.getContext('2d');
|
||||||
|
|
||||||
// This is the context we actually use to draw.
|
// This is the context we actually use to draw.
|
||||||
var c = document.createElement('canvas');
|
var c = document.createElement('canvas');
|
||||||
var g = c.getContext('2d');
|
var g = c.getContext('2d');
|
||||||
|
|
||||||
r.setAttribute('width', width);
|
r.setAttribute('width', width);
|
||||||
c.setAttribute('width', width);
|
c.setAttribute('width', width);
|
||||||
r.setAttribute('height', height);
|
r.setAttribute('height', height);
|
||||||
c.setAttribute('height', height);
|
c.setAttribute('height', height);
|
||||||
|
|
||||||
// Add our demo to the HTML
|
// Add our demo to the HTML
|
||||||
document.getElementById('helvetica-demo').appendChild(c);
|
document.getElementById('helvetica-demo').appendChild(c);
|
||||||
|
|
||||||
// Stores bitmap image
|
// Stores bitmap image
|
||||||
var pixels = [];
|
var pixels = [];
|
||||||
|
|
||||||
// Stores a list of particles
|
// Stores a list of particles
|
||||||
var particles = [];
|
var particles = [];
|
||||||
|
|
||||||
// Set g.font to the same font as the bitmap canvas, incase we
|
// Set g.font to the same font as the bitmap canvas, incase we
|
||||||
// want to draw some outlines.
|
// want to draw some outlines.
|
||||||
s.font = g.font = "800 82px helvetica, arial, sans-serif";
|
s.font = g.font = "800 82px helvetica, arial, sans-serif";
|
||||||
|
|
||||||
// Instantiate some particles
|
// Instantiate some particles
|
||||||
for (var i = 0; i < 1000; i++) {
|
for (var i = 0; i < 1000; i++) {
|
||||||
particles.push(new Particle(Math.random() * width, Math.random() * height));
|
particles.push(new Particle(Math.random() * width, Math.random() * height));
|
||||||
|
}
|
||||||
|
|
||||||
|
// This function creates a bitmap of pixels based on your message
|
||||||
|
// It's called every time we change the message property.
|
||||||
|
var createBitmap = function (msg) {
|
||||||
|
|
||||||
|
s.fillStyle = "#fff";
|
||||||
|
s.fillRect(0, 0, width, height);
|
||||||
|
|
||||||
|
s.fillStyle = "#222";
|
||||||
|
s.fillText(msg, textOffsetLeft, textAscent);
|
||||||
|
|
||||||
|
// Pull reference
|
||||||
|
var imageData = s.getImageData(0, 0, width, height);
|
||||||
|
pixels = imageData.data;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// Called once per frame, updates the animation.
|
||||||
|
var render = function () {
|
||||||
|
|
||||||
|
that.framesRendered ++;
|
||||||
|
|
||||||
|
g.clearRect(0, 0, width, height);
|
||||||
|
|
||||||
|
if (_this.displayOutline) {
|
||||||
|
g.globalCompositeOperation = "source-over";
|
||||||
|
g.strokeStyle = "#000";
|
||||||
|
g.lineWidth = .5;
|
||||||
|
g.strokeText(message, textOffsetLeft, textAscent);
|
||||||
}
|
}
|
||||||
|
|
||||||
// This function creates a bitmap of pixels based on your message
|
g.globalCompositeOperation = "darker";
|
||||||
// It's called every time we change the message property.
|
|
||||||
var createBitmap = function (msg) {
|
|
||||||
|
|
||||||
s.fillStyle = "#fff";
|
for (var i = 0; i < particles.length; i++) {
|
||||||
s.fillRect(0, 0, width, height);
|
g.fillStyle = colors[i % colors.length];
|
||||||
|
particles[i].render();
|
||||||
s.fillStyle = "#222";
|
|
||||||
s.fillText(msg, textOffsetLeft, textAscent);
|
|
||||||
|
|
||||||
// Pull reference
|
|
||||||
var imageData = s.getImageData(0, 0, width, height);
|
|
||||||
pixels = imageData.data;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Called once per frame, updates the animation.
|
|
||||||
var render = function () {
|
|
||||||
|
|
||||||
that.framesRendered ++;
|
|
||||||
|
|
||||||
g.clearRect(0, 0, width, height);
|
|
||||||
|
|
||||||
if (_this.displayOutline) {
|
|
||||||
g.globalCompositeOperation = "source-over";
|
|
||||||
g.strokeStyle = "#000";
|
|
||||||
g.lineWidth = .5;
|
|
||||||
g.strokeText(message, textOffsetLeft, textAscent);
|
|
||||||
}
|
|
||||||
|
|
||||||
g.globalCompositeOperation = "darker";
|
|
||||||
|
|
||||||
for (var i = 0; i < particles.length; i++) {
|
|
||||||
g.fillStyle = colors[i % colors.length];
|
|
||||||
particles[i].render();
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Returns x, y coordinates for a given index in the pixel array.
|
|
||||||
var getPosition = function (i) {
|
|
||||||
return {
|
|
||||||
x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
|
|
||||||
y: Math.floor(i / (width * 4))
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// Returns a color for a given pixel in the pixel array.
|
|
||||||
var getColor = function (x, y) {
|
|
||||||
var base = (Math.floor(y) * width + Math.floor(x)) * 4;
|
|
||||||
var c = {
|
|
||||||
r: pixels[base + 0],
|
|
||||||
g: pixels[base + 1],
|
|
||||||
b: pixels[base + 2],
|
|
||||||
a: pixels[base + 3]
|
|
||||||
};
|
|
||||||
|
|
||||||
return "rgb(" + c.r + "," + c.g + "," + c.b + ")";
|
|
||||||
};
|
|
||||||
|
|
||||||
// This calls the setter we've defined above, so it also calls
|
|
||||||
// the createBitmap function.
|
|
||||||
this.message = message;
|
|
||||||
|
|
||||||
var loop = function() {
|
|
||||||
// Don't render if we don't see it.
|
|
||||||
// Would be cleaner if I dynamically acquired the top of the canvas.
|
|
||||||
if (document.body.scrollTop < height + 20) {
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// This calls the render function every 30 milliseconds.
|
};
|
||||||
setInterval(loop, frameTime);
|
|
||||||
|
|
||||||
// This class is responsible for drawing and moving those little
|
// Returns x, y coordinates for a given index in the pixel array.
|
||||||
// colored dots.
|
var getPosition = function (i) {
|
||||||
function Particle(x, y, c) {
|
return {
|
||||||
|
x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
|
||||||
|
y: Math.floor(i / (width * 4))
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
// Position
|
// Returns a color for a given pixel in the pixel array.
|
||||||
this.x = x;
|
var getColor = function (x, y) {
|
||||||
this.y = y;
|
var base = (Math.floor(y) * width + Math.floor(x)) * 4;
|
||||||
|
var c = {
|
||||||
|
r: pixels[base + 0],
|
||||||
|
g: pixels[base + 1],
|
||||||
|
b: pixels[base + 2],
|
||||||
|
a: pixels[base + 3]
|
||||||
|
};
|
||||||
|
|
||||||
// Size of particle
|
return "rgb(" + c.r + "," + c.g + "," + c.b + ")";
|
||||||
this.r = 0;
|
};
|
||||||
|
|
||||||
// This velocity is used by the explode function.
|
// This calls the setter we've defined above, so it also calls
|
||||||
this.vx = 0;
|
// the createBitmap function.
|
||||||
this.vy = 0;
|
this.message = message;
|
||||||
|
|
||||||
// Called every frame
|
var loop = function() {
|
||||||
this.render = function () {
|
// Don't render if we don't see it.
|
||||||
|
// Would be cleaner if I dynamically acquired the top of the canvas.
|
||||||
|
if (document.body.scrollTop < height + 20) {
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// What color is the pixel we're sitting on top of?
|
// This calls the render function every 30 milliseconds.
|
||||||
var c = getColor(this.x, this.y);
|
setInterval(loop, frameTime);
|
||||||
|
|
||||||
// Where should we move?
|
// This class is responsible for drawing and moving those little
|
||||||
var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
|
// colored dots.
|
||||||
|
function Particle(x, y, c) {
|
||||||
|
|
||||||
// Are we within the boundaries of the image?
|
// Position
|
||||||
var onScreen = this.x > 0 && this.x < width &&
|
this.x = x;
|
||||||
this.y > 0 && this.y < height;
|
this.y = y;
|
||||||
|
|
||||||
var isBlack = c != "rgb(255,255,255)" && onScreen;
|
// Size of particle
|
||||||
|
this.r = 0;
|
||||||
|
|
||||||
// If we're on top of a black pixel, grow.
|
// This velocity is used by the explode function.
|
||||||
// If not, shrink.
|
this.vx = 0;
|
||||||
if (isBlack) {
|
this.vy = 0;
|
||||||
this.r += _this.growthSpeed;
|
|
||||||
} else {
|
|
||||||
this.r -= _this.growthSpeed;
|
|
||||||
}
|
|
||||||
|
|
||||||
// This velocity is used by the explode function.
|
// Called every frame
|
||||||
this.vx *= 0.5;
|
this.render = function () {
|
||||||
this.vy *= 0.5;
|
|
||||||
|
|
||||||
// Change our position based on the flow field and our
|
// What color is the pixel we're sitting on top of?
|
||||||
// explode velocity.
|
var c = getColor(this.x, this.y);
|
||||||
this.x += Math.cos(angle) * _this.speed + this.vx;
|
|
||||||
this.y += -Math.sin(angle) * _this.speed + this.vy;
|
|
||||||
|
|
||||||
this.r = DAT.GUI.constrain(this.r, 0, _this.maxSize);
|
// Where should we move?
|
||||||
|
var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
|
||||||
|
|
||||||
// If we're tiny, keep moving around until we find a black
|
// Are we within the boundaries of the image?
|
||||||
// pixel.
|
var onScreen = this.x > 0 && this.x < width &&
|
||||||
if (this.r <= 0) {
|
this.y > 0 && this.y < height;
|
||||||
this.x = Math.random() * width;
|
|
||||||
this.y = Math.random() * height;
|
|
||||||
return; // Don't draw!
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw the circle.
|
var isBlack = c != "rgb(255,255,255)" && onScreen;
|
||||||
g.beginPath();
|
|
||||||
g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
|
|
||||||
g.fill();
|
|
||||||
|
|
||||||
}
|
// If we're on top of a black pixel, grow.
|
||||||
|
// If not, shrink.
|
||||||
|
if (isBlack) {
|
||||||
|
this.r += _this.growthSpeed;
|
||||||
|
} else {
|
||||||
|
this.r -= _this.growthSpeed;
|
||||||
|
}
|
||||||
|
|
||||||
|
// This velocity is used by the explode function.
|
||||||
|
this.vx *= 0.5;
|
||||||
|
this.vy *= 0.5;
|
||||||
|
|
||||||
|
// Change our position based on the flow field and our
|
||||||
|
// explode velocity.
|
||||||
|
this.x += Math.cos(angle) * _this.speed + this.vx;
|
||||||
|
this.y += -Math.sin(angle) * _this.speed + this.vy;
|
||||||
|
|
||||||
|
this.r = DAT.GUI.constrain(this.r, 0, _this.maxSize);
|
||||||
|
|
||||||
|
// If we're tiny, keep moving around until we find a black
|
||||||
|
// pixel.
|
||||||
|
if (this.r <= 0) {
|
||||||
|
this.x = Math.random() * width;
|
||||||
|
this.y = Math.random() * height;
|
||||||
|
return; // Don't draw!
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw the circle.
|
||||||
|
g.beginPath();
|
||||||
|
g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
|
||||||
|
g.fill();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,47 +1,48 @@
|
|||||||
DAT.GUI.BooleanController = function() {
|
DAT.GUI.BooleanController = function() {
|
||||||
|
|
||||||
this.type = "boolean";
|
this.type = "boolean";
|
||||||
DAT.GUI.Controller.apply(this, arguments);
|
DAT.GUI.Controller.apply(this, arguments);
|
||||||
|
|
||||||
var _this = this;
|
var _this = this;
|
||||||
var input = document.createElement('input');
|
var input = document.createElement('input');
|
||||||
input.setAttribute('type', 'checkbox');
|
input.setAttribute('type', 'checkbox');
|
||||||
|
|
||||||
if(arguments[3]) {
|
if (arguments[3]) {
|
||||||
input.checked = true;
|
input.checked = true;
|
||||||
this.setValue(true);
|
this.setValue(true);
|
||||||
} else {
|
} else {
|
||||||
input.checked = false;
|
input.checked = false;
|
||||||
this.setValue(false);
|
this.setValue(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.domElement.addEventListener('click', function(e) {
|
||||||
|
input.checked = !input.checked;
|
||||||
|
e.preventDefault();
|
||||||
|
_this.setValue(input.checked);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
input.addEventListener('mouseup', function(e) {
|
||||||
|
input.checked = !input.checked; // counteracts default.
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
this.domElement.style.cursor = "pointer";
|
||||||
|
this.propertyNameElement.style.cursor = "pointer";
|
||||||
|
this.domElement.appendChild(input);
|
||||||
|
|
||||||
|
this.updateDisplay = function() {
|
||||||
|
input.checked = _this.getValue();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
this.setValue = function(val) {
|
||||||
|
if (typeof val != "boolean") {
|
||||||
|
try {
|
||||||
|
val = eval(val);
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
return DAT.GUI.Controller.prototype.setValue.call(this, val);
|
||||||
this.domElement.addEventListener('click', function(e) {
|
};
|
||||||
input.checked = !input.checked;
|
|
||||||
e.preventDefault();
|
|
||||||
_this.setValue(input.checked);
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
input.addEventListener('mouseup', function(e) {
|
|
||||||
input.checked = !input.checked; // counteracts default.
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
this.domElement.style.cursor = "pointer";
|
|
||||||
this.propertyNameElement.style.cursor = "pointer";
|
|
||||||
this.domElement.appendChild(input);
|
|
||||||
|
|
||||||
this.updateDisplay = function() {
|
|
||||||
input.checked = _this.getValue();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
this.setValue = function(val) {
|
|
||||||
if (typeof val != "boolean") {
|
|
||||||
try {
|
|
||||||
val = eval(val);
|
|
||||||
} catch (e) {}
|
|
||||||
}
|
|
||||||
return DAT.GUI.Controller.prototype.setValue.call(this, val);
|
|
||||||
};
|
|
||||||
|
|
||||||
};
|
};
|
||||||
DAT.GUI.extendController(DAT.GUI.BooleanController);
|
DAT.GUI.extendController(DAT.GUI.BooleanController);
|
||||||
|
|||||||
@ -1,20 +1,20 @@
|
|||||||
DAT.GUI.Controller = function() {
|
DAT.GUI.Controller = function() {
|
||||||
|
|
||||||
this.parent = arguments[0];
|
this.parent = arguments[0];
|
||||||
this.object = arguments[1];
|
this.object = arguments[1];
|
||||||
this.propertyName = arguments[2];
|
this.propertyName = arguments[2];
|
||||||
|
|
||||||
if (arguments.length > 0) this.initialValue = this.propertyName[this.object];
|
if (arguments.length > 0) this.initialValue = this.propertyName[this.object];
|
||||||
|
|
||||||
this.domElement = document.createElement('div');
|
this.domElement = document.createElement('div');
|
||||||
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
|
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
|
||||||
|
|
||||||
this.propertyNameElement = document.createElement('span');
|
this.propertyNameElement = document.createElement('span');
|
||||||
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
|
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
|
||||||
this.name(this.propertyName);
|
this.name(this.propertyName);
|
||||||
this.domElement.appendChild(this.propertyNameElement);
|
this.domElement.appendChild(this.propertyNameElement);
|
||||||
|
|
||||||
DAT.GUI.makeUnselectable(this.domElement);
|
DAT.GUI.makeUnselectable(this.domElement);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -22,76 +22,77 @@ DAT.GUI.Controller.prototype.changeFunction = null;
|
|||||||
DAT.GUI.Controller.prototype.finishChangeFunction = null;
|
DAT.GUI.Controller.prototype.finishChangeFunction = null;
|
||||||
|
|
||||||
DAT.GUI.Controller.prototype.name = function(n) {
|
DAT.GUI.Controller.prototype.name = function(n) {
|
||||||
this.propertyNameElement.innerHTML = n;
|
this.propertyNameElement.innerHTML = n;
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
DAT.GUI.Controller.prototype.reset = function() {
|
DAT.GUI.Controller.prototype.reset = function() {
|
||||||
this.setValue(this.initialValue);
|
this.setValue(this.initialValue);
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
DAT.GUI.Controller.prototype.listen = function() {
|
DAT.GUI.Controller.prototype.listen = function() {
|
||||||
this.parent.listenTo(this);
|
this.parent.listenTo(this);
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
DAT.GUI.Controller.prototype.unlisten = function() {
|
DAT.GUI.Controller.prototype.unlisten = function() {
|
||||||
this.parent.unlistenTo(this); // <--- hasn't been tested yet
|
this.parent.unlistenTo(this); // <--- hasn't been tested yet
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
DAT.GUI.Controller.prototype.setValue = function(n) {
|
DAT.GUI.Controller.prototype.setValue = function(n) {
|
||||||
this.object[this.propertyName] = n;
|
this.object[this.propertyName] = n;
|
||||||
if (this.changeFunction != null) {
|
if (this.changeFunction != null) {
|
||||||
this.changeFunction.call(this, n);
|
this.changeFunction.call(this, n);
|
||||||
}
|
}
|
||||||
this.updateDisplay();
|
this.updateDisplay();
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
DAT.GUI.Controller.prototype.getValue = function() {
|
DAT.GUI.Controller.prototype.getValue = function() {
|
||||||
return this.object[this.propertyName];
|
return this.object[this.propertyName];
|
||||||
};
|
};
|
||||||
|
|
||||||
DAT.GUI.Controller.prototype.updateDisplay = function() {};
|
DAT.GUI.Controller.prototype.updateDisplay = function() {
|
||||||
|
};
|
||||||
|
|
||||||
DAT.GUI.Controller.prototype.onChange = function(fnc) {
|
DAT.GUI.Controller.prototype.onChange = function(fnc) {
|
||||||
this.changeFunction = fnc;
|
this.changeFunction = fnc;
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
DAT.GUI.Controller.prototype.onFinishChange = function(fnc) {
|
DAT.GUI.Controller.prototype.onFinishChange = function(fnc) {
|
||||||
this.finishChangeFunction = fnc;
|
this.finishChangeFunction = fnc;
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
DAT.GUI.Controller.prototype.options = function() {
|
DAT.GUI.Controller.prototype.options = function() {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
var select = document.createElement('select');
|
var select = document.createElement('select');
|
||||||
if (arguments.length == 1) {
|
if (arguments.length == 1) {
|
||||||
var arr = arguments[0];
|
var arr = arguments[0];
|
||||||
for (var i in arr) {
|
for (var i in arr) {
|
||||||
var opt = document.createElement('option');
|
var opt = document.createElement('option');
|
||||||
opt.innerHTML = i;
|
opt.innerHTML = i;
|
||||||
opt.setAttribute('value', arr[i]);
|
opt.setAttribute('value', arr[i]);
|
||||||
select.appendChild(opt);
|
select.appendChild(opt);
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (var i = 0; i < arguments.length; i++) {
|
|
||||||
var opt = document.createElement('option');
|
|
||||||
opt.innerHTML = arguments[i];
|
|
||||||
opt.setAttribute('value', arguments[i]);
|
|
||||||
select.appendChild(opt);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
for (var i = 0; i < arguments.length; i++) {
|
||||||
|
var opt = document.createElement('option');
|
||||||
|
opt.innerHTML = arguments[i];
|
||||||
|
opt.setAttribute('value', arguments[i]);
|
||||||
|
select.appendChild(opt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
select.addEventListener('change', function() {
|
select.addEventListener('change', function() {
|
||||||
_this.setValue(this.value);
|
_this.setValue(this.value);
|
||||||
if (_this.finishChangeFunction != null) {
|
if (_this.finishChangeFunction != null) {
|
||||||
_this.finishChangeFunction.call(this, _this.getValue());
|
_this.finishChangeFunction.call(this, _this.getValue());
|
||||||
}
|
}
|
||||||
}, false);
|
}, false);
|
||||||
_this.domElement.appendChild(select);
|
_this.domElement.appendChild(select);
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,29 +1,30 @@
|
|||||||
DAT.GUI.FunctionController = function() {
|
DAT.GUI.FunctionController = function() {
|
||||||
|
|
||||||
this.type = "function";
|
this.type = "function";
|
||||||
|
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
DAT.GUI.Controller.apply(this, arguments);
|
DAT.GUI.Controller.apply(this, arguments);
|
||||||
|
|
||||||
this.domElement.addEventListener('click', function() {
|
this.domElement.addEventListener('click', function() {
|
||||||
_this.fire();
|
_this.fire();
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
this.domElement.style.cursor = "pointer";
|
this.domElement.style.cursor = "pointer";
|
||||||
this.propertyNameElement.style.cursor = "pointer";
|
this.propertyNameElement.style.cursor = "pointer";
|
||||||
|
|
||||||
var fireFunction = null;
|
var fireFunction = null;
|
||||||
this.onFire = function(fnc) {
|
this.onFire = function(fnc) {
|
||||||
fireFunction = fnc;
|
fireFunction = fnc;
|
||||||
return this;
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.fire = function() {
|
||||||
|
if (fireFunction != null) {
|
||||||
|
fireFunction.call(this);
|
||||||
}
|
}
|
||||||
|
_this.object[_this.propertyName].call(_this.object);
|
||||||
|
};
|
||||||
|
|
||||||
this.fire = function() {
|
|
||||||
if (fireFunction != null) {
|
|
||||||
fireFunction.call(this);
|
|
||||||
}
|
|
||||||
_this.object[_this.propertyName].call(_this.object);
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
DAT.GUI.extendController(DAT.GUI.FunctionController);
|
DAT.GUI.extendController(DAT.GUI.FunctionController);
|
||||||
|
|||||||
@ -1,156 +1,156 @@
|
|||||||
DAT.GUI.NumberController = function() {
|
DAT.GUI.NumberController = function() {
|
||||||
|
|
||||||
this.type = "number";
|
this.type = "number";
|
||||||
|
|
||||||
DAT.GUI.Controller.apply(this, arguments);
|
DAT.GUI.Controller.apply(this, arguments);
|
||||||
|
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
// If we simply click and release a number field, we want to highlight it.
|
// If we simply click and release a number field, we want to highlight it.
|
||||||
// This variable keeps track of whether or not we've dragged
|
// This variable keeps track of whether or not we've dragged
|
||||||
var draggedNumberField = false;
|
var draggedNumberField = false;
|
||||||
|
|
||||||
var clickedNumberField = false;
|
var clickedNumberField = false;
|
||||||
|
|
||||||
var y = 0, py = 0;
|
var y = 0, py = 0;
|
||||||
|
|
||||||
var min = arguments[3];
|
var min = arguments[3];
|
||||||
var max = arguments[4];
|
var max = arguments[4];
|
||||||
var step = arguments[5];
|
var step = arguments[5];
|
||||||
|
|
||||||
if (!step) {
|
|
||||||
if (min != undefined && max != undefined) {
|
|
||||||
step = (max-min)*0.01;
|
|
||||||
} else {
|
|
||||||
step = 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var numberField = document.createElement('input');
|
|
||||||
numberField.setAttribute('id', this.propertyName);
|
|
||||||
numberField.setAttribute('type', 'text');
|
|
||||||
numberField.setAttribute('value', this.getValue());
|
|
||||||
|
|
||||||
if (step) numberField.setAttribute('step', step);
|
|
||||||
|
|
||||||
this.domElement.appendChild(numberField);
|
|
||||||
|
|
||||||
var slider;
|
|
||||||
|
|
||||||
|
if (!step) {
|
||||||
if (min != undefined && max != undefined) {
|
if (min != undefined && max != undefined) {
|
||||||
slider = new DAT.GUI.Slider(this, min, max, step, this.getValue());
|
step = (max - min) * 0.01;
|
||||||
this.domElement.appendChild(slider.domElement);
|
} else {
|
||||||
|
step = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var numberField = document.createElement('input');
|
||||||
|
numberField.setAttribute('id', this.propertyName);
|
||||||
|
numberField.setAttribute('type', 'text');
|
||||||
|
numberField.setAttribute('value', this.getValue());
|
||||||
|
|
||||||
|
if (step) numberField.setAttribute('step', step);
|
||||||
|
|
||||||
|
this.domElement.appendChild(numberField);
|
||||||
|
|
||||||
|
var slider;
|
||||||
|
|
||||||
|
if (min != undefined && max != undefined) {
|
||||||
|
slider = new DAT.GUI.Slider(this, min, max, step, this.getValue());
|
||||||
|
this.domElement.appendChild(slider.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
numberField.addEventListener('blur', function(e) {
|
||||||
|
var val = parseFloat(this.value);
|
||||||
|
if (!isNaN(val)) {
|
||||||
|
_this.setValue(val);
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
numberField.addEventListener('mousewheel', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
_this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY) / e.wheelDeltaY * step);
|
||||||
|
return false;
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
numberField.addEventListener('mousedown', function(e) {
|
||||||
|
py = y = e.pageY;
|
||||||
|
clickedNumberField = true;
|
||||||
|
document.addEventListener('mousemove', dragNumberField, false);
|
||||||
|
document.addEventListener('mouseup', mouseup, false);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
// Handle up arrow and down arrow
|
||||||
|
numberField.addEventListener('keydown', function(e) {
|
||||||
|
var newVal;
|
||||||
|
switch (e.keyCode) {
|
||||||
|
case 13: // enter
|
||||||
|
newVal = parseFloat(this.value);
|
||||||
|
_this.setValue(newVal);
|
||||||
|
break;
|
||||||
|
case 38: // up
|
||||||
|
newVal = _this.getValue() + step;
|
||||||
|
_this.setValue(newVal);
|
||||||
|
break;
|
||||||
|
case 40: // down
|
||||||
|
newVal = _this.getValue() - step;
|
||||||
|
_this.setValue(newVal);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
var mouseup = function(e) {
|
||||||
|
document.removeEventListener('mousemove', dragNumberField, false);
|
||||||
|
DAT.GUI.makeSelectable(_this.parent.domElement);
|
||||||
|
DAT.GUI.makeSelectable(numberField);
|
||||||
|
if (clickedNumberField && !draggedNumberField) {
|
||||||
|
numberField.focus();
|
||||||
|
numberField.select();
|
||||||
|
}
|
||||||
|
if (slider) slider.domElement.className = slider.domElement.className.replace(' active', '');
|
||||||
|
draggedNumberField = false;
|
||||||
|
clickedNumberField = false;
|
||||||
|
if (_this.finishChangeFunction != null) {
|
||||||
|
_this.finishChangeFunction.call(this, _this.getValue());
|
||||||
|
}
|
||||||
|
document.removeEventListener('mouseup', mouseup, false);
|
||||||
|
};
|
||||||
|
|
||||||
|
var dragNumberField = function(e) {
|
||||||
|
|
||||||
|
draggedNumberField = true;
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// We don't want to be highlighting this field as we scroll.
|
||||||
|
// Or any other fields in this gui for that matter ...
|
||||||
|
// TODO: Make makeUselectable go through each element and child element.
|
||||||
|
|
||||||
|
DAT.GUI.makeUnselectable(_this.parent.domElement);
|
||||||
|
DAT.GUI.makeUnselectable(numberField);
|
||||||
|
|
||||||
|
if (slider) slider.domElement.className += ' active';
|
||||||
|
|
||||||
|
py = y;
|
||||||
|
y = e.pageY;
|
||||||
|
var dy = py - y;
|
||||||
|
var newVal = _this.getValue() + dy * step;
|
||||||
|
_this.setValue(newVal);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.options = function() {
|
||||||
|
_this.noSlider();
|
||||||
|
_this.domElement.removeChild(numberField);
|
||||||
|
return DAT.GUI.Controller.prototype.options.apply(this, arguments);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.noSlider = function() {
|
||||||
|
if (slider) {
|
||||||
|
_this.domElement.removeChild(slider.domElement);
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setValue = function(val) {
|
||||||
|
|
||||||
|
val = parseFloat(val);
|
||||||
|
|
||||||
|
if (min != undefined && val <= min) {
|
||||||
|
val = min;
|
||||||
|
} else if (max != undefined && val >= max) {
|
||||||
|
val = max;
|
||||||
}
|
}
|
||||||
|
|
||||||
numberField.addEventListener('blur', function(e) {
|
return DAT.GUI.Controller.prototype.setValue.call(this, val);
|
||||||
var val = parseFloat(this.value);
|
|
||||||
if (!isNaN(val)) {
|
|
||||||
_this.setValue(val);
|
|
||||||
}
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
numberField.addEventListener('mousewheel', function(e) {
|
};
|
||||||
e.preventDefault();
|
|
||||||
_this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
|
|
||||||
return false;
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
numberField.addEventListener('mousedown', function(e) {
|
this.updateDisplay = function() {
|
||||||
py = y = e.pageY;
|
numberField.value = DAT.GUI.roundToDecimal(_this.getValue(), 4);
|
||||||
clickedNumberField = true;
|
if (slider) slider.value = _this.getValue();
|
||||||
document.addEventListener('mousemove', dragNumberField, false);
|
};
|
||||||
document.addEventListener('mouseup', mouseup, false);
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
// Handle up arrow and down arrow
|
|
||||||
numberField.addEventListener('keydown', function(e) {
|
|
||||||
var newVal;
|
|
||||||
switch(e.keyCode) {
|
|
||||||
case 13: // enter
|
|
||||||
newVal = parseFloat(this.value);
|
|
||||||
_this.setValue(newVal);
|
|
||||||
break;
|
|
||||||
case 38: // up
|
|
||||||
newVal = _this.getValue() + step;
|
|
||||||
_this.setValue(newVal);
|
|
||||||
break;
|
|
||||||
case 40: // down
|
|
||||||
newVal = _this.getValue() - step;
|
|
||||||
_this.setValue(newVal);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
var mouseup = function(e) {
|
|
||||||
document.removeEventListener('mousemove', dragNumberField, false);
|
|
||||||
DAT.GUI.makeSelectable(_this.parent.domElement);
|
|
||||||
DAT.GUI.makeSelectable(numberField);
|
|
||||||
if (clickedNumberField && !draggedNumberField) {
|
|
||||||
numberField.focus();
|
|
||||||
numberField.select();
|
|
||||||
}
|
|
||||||
if(slider) slider.domElement.className = slider.domElement.className.replace(' active', '');
|
|
||||||
draggedNumberField = false;
|
|
||||||
clickedNumberField = false;
|
|
||||||
if (_this.finishChangeFunction != null) {
|
|
||||||
_this.finishChangeFunction.call(this, _this.getValue());
|
|
||||||
}
|
|
||||||
document.removeEventListener('mouseup', mouseup, false);
|
|
||||||
};
|
|
||||||
|
|
||||||
var dragNumberField = function(e) {
|
|
||||||
|
|
||||||
draggedNumberField = true;
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
// We don't want to be highlighting this field as we scroll.
|
|
||||||
// Or any other fields in this gui for that matter ...
|
|
||||||
// TODO: Make makeUselectable go through each element and child element.
|
|
||||||
|
|
||||||
DAT.GUI.makeUnselectable(_this.parent.domElement);
|
|
||||||
DAT.GUI.makeUnselectable(numberField);
|
|
||||||
|
|
||||||
if(slider) slider.domElement.className += ' active';
|
|
||||||
|
|
||||||
py = y;
|
|
||||||
y = e.pageY;
|
|
||||||
var dy = py - y;
|
|
||||||
var newVal = _this.getValue() + dy*step;
|
|
||||||
_this.setValue(newVal);
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
this.options = function() {
|
|
||||||
_this.noSlider();
|
|
||||||
_this.domElement.removeChild(numberField);
|
|
||||||
return DAT.GUI.Controller.prototype.options.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.noSlider = function() {
|
|
||||||
if (slider) {
|
|
||||||
_this.domElement.removeChild(slider.domElement);
|
|
||||||
}
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
this.setValue = function(val) {
|
|
||||||
|
|
||||||
val = parseFloat(val);
|
|
||||||
|
|
||||||
if (min != undefined && val <= min) {
|
|
||||||
val = min;
|
|
||||||
} else if (max != undefined && val >= max) {
|
|
||||||
val = max;
|
|
||||||
}
|
|
||||||
|
|
||||||
return DAT.GUI.Controller.prototype.setValue.call(this, val);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.updateDisplay = function() {
|
|
||||||
numberField.value = DAT.GUI.roundToDecimal(_this.getValue(), 4);
|
|
||||||
if (slider) slider.value = _this.getValue();
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
DAT.GUI.extendController(DAT.GUI.NumberController);
|
DAT.GUI.extendController(DAT.GUI.NumberController);
|
||||||
|
|||||||
@ -1,66 +1,66 @@
|
|||||||
DAT.GUI.Slider = function(numberController, min, max, step, initValue) {
|
DAT.GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||||
|
|
||||||
var clicked = false;
|
var clicked = false;
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
var x, px;
|
var x, px;
|
||||||
|
|
||||||
this.domElement = document.createElement('div');
|
this.domElement = document.createElement('div');
|
||||||
this.domElement.setAttribute('class', 'guidat-slider-bg');
|
this.domElement.setAttribute('class', 'guidat-slider-bg');
|
||||||
|
|
||||||
this.fg = document.createElement('div');
|
this.fg = document.createElement('div');
|
||||||
this.fg.setAttribute('class', 'guidat-slider-fg');
|
this.fg.setAttribute('class', 'guidat-slider-fg');
|
||||||
|
|
||||||
this.domElement.appendChild(this.fg);
|
this.domElement.appendChild(this.fg);
|
||||||
|
|
||||||
var onDrag = function(e) {
|
var onDrag = function(e) {
|
||||||
if (!clicked) return;
|
if (!clicked) return;
|
||||||
var pos = findPos(_this.domElement);
|
var pos = findPos(_this.domElement);
|
||||||
var val = DAT.GUI.map(e.pageX, pos[0], pos[0] + _this.domElement
|
var val = DAT.GUI.map(e.pageX, pos[0], pos[0] + _this.domElement
|
||||||
.offsetWidth, min, max);
|
.offsetWidth, min, max);
|
||||||
val = Math.round(val/step)*step;
|
val = Math.round(val / step) * step;
|
||||||
numberController.setValue(val);
|
numberController.setValue(val);
|
||||||
};
|
};
|
||||||
|
|
||||||
this.domElement.addEventListener('mousedown', function(e) {
|
this.domElement.addEventListener('mousedown', function(e) {
|
||||||
clicked = true;
|
clicked = true;
|
||||||
x = px = e.pageX;
|
x = px = e.pageX;
|
||||||
_this.domElement.className += ' active';
|
_this.domElement.className += ' active';
|
||||||
_this.fg.className += ' active';
|
_this.fg.className += ' active';
|
||||||
numberController.domElement.className += ' active';
|
numberController.domElement.className += ' active';
|
||||||
onDrag(e);
|
onDrag(e);
|
||||||
document.addEventListener('mouseup', mouseup, false);
|
document.addEventListener('mouseup', mouseup, false);
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
var mouseup = function(e) {
|
var mouseup = function(e) {
|
||||||
_this.domElement.className = _this.domElement.className.replace(' active', '');
|
_this.domElement.className = _this.domElement.className.replace(' active', '');
|
||||||
_this.fg.className = _this.fg.className.replace(' active', '');
|
_this.fg.className = _this.fg.className.replace(' active', '');
|
||||||
numberController.domElement.className = numberController.domElement.className.replace(' active', '');
|
numberController.domElement.className = numberController.domElement.className.replace(' active', '');
|
||||||
clicked = false;
|
clicked = false;
|
||||||
if (numberController.finishChangeFunction != null) {
|
if (numberController.finishChangeFunction != null) {
|
||||||
numberController.finishChangeFunction.call(this, numberController.getValue());
|
numberController.finishChangeFunction.call(this, numberController.getValue());
|
||||||
}
|
}
|
||||||
document.removeEventListener('mouseup', mouseup, false);
|
document.removeEventListener('mouseup', mouseup, false);
|
||||||
};
|
};
|
||||||
|
|
||||||
var findPos = function(obj) {
|
var findPos = function(obj) {
|
||||||
var curleft = 0, curtop = 0;
|
var curleft = 0, curtop = 0;
|
||||||
if (obj.offsetParent) {
|
if (obj.offsetParent) {
|
||||||
do {
|
do {
|
||||||
curleft += obj.offsetLeft;
|
curleft += obj.offsetLeft;
|
||||||
curtop += obj.offsetTop;
|
curtop += obj.offsetTop;
|
||||||
} while ((obj = obj.offsetParent));
|
} while ((obj = obj.offsetParent));
|
||||||
return [curleft,curtop];
|
return [curleft,curtop];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.__defineSetter__('value', function(e) {
|
this.__defineSetter__('value', function(e) {
|
||||||
var pct = DAT.GUI.map(e, min, max, 0, 100);
|
var pct = DAT.GUI.map(e, min, max, 0, 100);
|
||||||
this.fg.style.width = pct+"%";
|
this.fg.style.width = pct + "%";
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener('mousemove', onDrag, false);
|
document.addEventListener('mousemove', onDrag, false);
|
||||||
|
|
||||||
this.value = initValue;
|
this.value = initValue;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,46 +1,46 @@
|
|||||||
DAT.GUI.StringController = function() {
|
DAT.GUI.StringController = function() {
|
||||||
|
|
||||||
this.type = "string";
|
this.type = "string";
|
||||||
|
|
||||||
var _this = this;
|
var _this = this;
|
||||||
DAT.GUI.Controller.apply(this, arguments);
|
DAT.GUI.Controller.apply(this, arguments);
|
||||||
|
|
||||||
var input = document.createElement('input');
|
var input = document.createElement('input');
|
||||||
|
|
||||||
var initialValue = this.getValue();
|
var initialValue = this.getValue();
|
||||||
|
|
||||||
input.setAttribute('value', initialValue);
|
input.setAttribute('value', initialValue);
|
||||||
input.setAttribute('spellcheck', 'false');
|
input.setAttribute('spellcheck', 'false');
|
||||||
|
|
||||||
this.domElement.addEventListener('mouseup', function() {
|
this.domElement.addEventListener('mouseup', function() {
|
||||||
input.focus();
|
input.focus();
|
||||||
input.select();
|
input.select();
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
// TODO: getting messed up on ctrl a
|
// TODO: getting messed up on ctrl a
|
||||||
input.addEventListener('keyup', function(e) {
|
input.addEventListener('keyup', function(e) {
|
||||||
if (e.keyCode == 13 && _this.finishChangeFunction != null) {
|
if (e.keyCode == 13 && _this.finishChangeFunction != null) {
|
||||||
_this.finishChangeFunction.call(this, _this.getValue());
|
_this.finishChangeFunction.call(this, _this.getValue());
|
||||||
}
|
}
|
||||||
_this.setValue(input.value);
|
_this.setValue(input.value);
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
input.addEventListener('blur', function() {
|
input.addEventListener('blur', function() {
|
||||||
if (_this.finishChangeFunction != null) {
|
if (_this.finishChangeFunction != null) {
|
||||||
_this.finishChangeFunction.call(this, _this.getValue());
|
_this.finishChangeFunction.call(this, _this.getValue());
|
||||||
}
|
}
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
this.updateDisplay = function() {
|
this.updateDisplay = function() {
|
||||||
input.value = _this.getValue();
|
input.value = _this.getValue();
|
||||||
};
|
};
|
||||||
|
|
||||||
this.options = function() {
|
this.options = function() {
|
||||||
_this.domElement.removeChild(input);
|
_this.domElement.removeChild(input);
|
||||||
return DAT.GUI.Controller.prototype.options.apply(this, arguments);
|
return DAT.GUI.Controller.prototype.options.apply(this, arguments);
|
||||||
};
|
};
|
||||||
|
|
||||||
this.domElement.appendChild(input);
|
this.domElement.appendChild(input);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user