//# Create a trail with move events
//This demo shows how to create a trail behind the mouse when clicking and dragging.
//Click on the view and then drag.
//Import the `ui.View` class.
import ui.View as View;
//## Class: Application
//Create an application.
exports = Class(GC.Application, function () {
//Create a circular buffer and the index in the buffer.
this.initUI = function () {
this.style.backgroundColor = "#FFFFFF";
//A circular buffer
this._trail = [];
//The index in the buffer
this._index = 0;
//This function is called when the user drags. The second parameter contains the drag coordinates.
this.view.on("InputMove", function (evt, pt) {
var opts = {superview: GC.app.view, x: pt.x - 3, y: pt.y - 3};
if (GC.app._trail.length < 64) {
//Add a new view to the circular buffer.
GC.app._trail.push(new TrailBox(opts));
} else {
GC.app._trail[GC.app._index].reset(opts);
//Next value of the circular buffer.
GC.app._index = (GC.app._index + 1) & 63;
}
});
};
this.launchUI = function () {};
});
//## Class: TrailBox
//Create a view which fades out over a time of 500 ms.
var TrailBox = Class(View, function (supr) {
this.init = function (opts) {
supr(this, "init", [merge(opts, {width: 6, height: 6, backgroundColor: "#008800"})]);
//Set the start time.
this._dt = 0;
};
//Reset the view.
this.reset = function (opts) {
//Set the start time
this._dt = 0;
//Because opts contains a superview this view is added to the superview!
this.updateOpts(opts);
};
//This function is called 500ms and then removed from its superview
this.tick = function (dt) {
this._dt += dt;
if (this._dt > 500) {
//Remove this view from the superview
this.removeFromSuperview();
} else {
//Fade out...
this.updateOpts({opacity: 1 - this._dt / 500});
}
};
});
//When you click (or touch) and drag the screen should look like this:
//