Sarean-euskaraz
/
relog
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

making dots selectable

This commit is contained in:
Micho 2013-05-22 12:22:47 +02:00
parent 4f4eb0ff11
commit 12ea08b7e5
2 changed files with 82 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
clients/anim/index.html
View File

@ -23,6 +23,7 @@
position: absolute;
top: 20px;
left: 0;
cursor: pointer;
}
#canvas, #map, .label {
position: absolute;

98
clients/anim/main.js
View File

@ -47,33 +47,72 @@ function setSpeed(speed) {
$('#speed'+speed).addClass('active');
}
var mouseDragX0, dragTime, mouseDrag = false;
function sliderDragMove(event) {
var mouseDrag = false;
var sliderDrag = false;
var mapDrag = false;
var mouseDragX0;
var mouseDragY0;
var mouseDragX;
var mouseDragY;
var sliderDragStartTime;
function sliderDragStart() {
mouseDrag = true;
sliderDrag = true;
sliderDragStartTime = currentTime;
}
function mapDragStart() {
mouseDrag = true;
mapDrag = true;
mouseDragX = mouseDragX0;
mouseDragY = mouseDragY0;
clients.forEach(function (c) { c.selected = false; });
}
function mouseDragMove(event) {
if (mouseDrag) {
currentTime = dragTime + (mouseDragX0 - event.pageX);
if (sliderDrag) {
currentTime = sliderDragStartTime + (mouseDragX0 - event.pageX);
updateFrame();
}
if (mapDrag) {
mouseDragX = event.pageX;
mouseDragY = event.pageY;
var p = $('#container').offset();
var x0 = Math.min(mouseDragX0, mouseDragX) - p.left;
var x1 = Math.max(mouseDragX0, mouseDragX) - p.left;
var y0 = Math.min(mouseDragY0, mouseDragY) - p.top;
var y1 = Math.max(mouseDragY0, mouseDragY) - p.top;
clients.forEach(function (c) {
c.selected = ((c.x >= x0) && (c.x <= x1) && (c.y >= y0) && (c.y <= y1));
});
renderCanvas();
}
event.preventDefault();
return false;
} else {
mouseDragX0 = event.pageX;
mouseDragY0 = event.pageY;
}
}
function sliderDragStart() {
mouseDrag = true;
dragTime = currentTime;
}
function sliderDragStop() {
function mouseDragStop() {
mouseDrag = false;
sliderDrag = false;
mapDrag = false;
renderCanvas();
}
function init() {
context = $('#canvas')[0].getContext('2d');
clients = [];
data.matrix.forEach(function (times, index) {
clients[index] = { point:undefined, x:0, y:0, r:0, x0:0, y0:0, r0:0, index:index, lastEvent:0 };
clients[index] = { point:undefined, x:0, y:0, r:0, x0:0, y0:0, r0:0, index:index, lastEvent:0, selected:false };
random[index] = Math.random();
});
@ -83,9 +122,11 @@ function init() {
$('#speed3').click(function () { setSpeed(3); });
$('#sliderWrapper').mousedown(function () { sliderDragStart(); });
$(document).mousemove(function (e) { return sliderDragMove(e); });
$(document).mouseup(function (e) { sliderDragStop(); });
$(document).on('selectstart', function () { return !mouseDrag; });
$('#container').mousedown(function () { mapDragStart(); });
$(document).mousemove(function (e) { return mouseDragMove(e); });
$(document).mouseup(function (e) { mouseDragStop(); });
$(document).on('selectstart', function (e) { e.preventDefault(); return !mouseDrag; });
var index = -1;
for (var time = -60; time <= (4*24+1)*60; time++) {
@ -144,6 +185,11 @@ function update() {
if (mouseDrag) return;
currentTime += timeStep;
updateFrame();
}
function updateFrame() {
if (currentTime > maxTime) {
currentTime = maxTime;
stopPlay();
@ -151,10 +197,6 @@ function update() {
if (currentTime < minTime) currentTime = minTime;
updateFrame();
}
function updateFrame() {
renderTime();
updateData();
updatePosition();
@ -396,7 +438,6 @@ function updatePosition() {
function renderCanvas() {
context.clearRect(0, 0, width, height);
context.fillStyle = '#000';
clients.forEach(function (client) {
if (client.valid) {
@ -406,7 +447,7 @@ function renderCanvas() {
if ((r > 1) && (!client.settled)) {
var a = Math.min(Math.pow(1/r, 0.7), 1);
context.strokeStyle = 'rgba(0,0,0,'+a+')';
context.strokeStyle = (client.selected) ? 'rgba(238,0,0,'+a+')' : 'rgba(0,0,0,'+a+')';
context.lineWidth = client.r*2*radius;
context.beginPath();
context.moveTo(client.xo, client.yo);
@ -414,6 +455,7 @@ function renderCanvas() {
context.stroke();
} else {
context.fillStyle = (client.selected) ? '#e00' : '#000';
context.beginPath();
context.arc(client.x, client.y, client.r*radius, 0, 2*Math.PI, false);
context.fill();
@ -421,6 +463,24 @@ function renderCanvas() {
}
});
if (mapDrag) {
var x = Math.min(mouseDragX0, mouseDragX);
var y = Math.min(mouseDragY0, mouseDragY);
var w = Math.max(mouseDragX0, mouseDragX) - x;
var h = Math.max(mouseDragY0, mouseDragY) - y;
var p = $('#container').offset();
x -= 0.5 + p.left;
y -= 0.5 + p.top;
context.fillStyle = 'rgba(238,0,0,0.1)';
context.strokeStyle = 'rgba(238,0,0,0.5)';
context.lineWidth = 1;
context.beginPath();
context.rect(x, y, w, h);
context.fill();
context.stroke();
}
/*
context.fillStyle = 'rgba(255,0,0,0.5)';
for (var x = 0; x < width/gridSize; x++) {