added red square arround opened node in corpus map
This commit is contained in:
@@ -39,6 +39,7 @@
|
||||
var _p_velocity_factor = 0.5;
|
||||
var _m_pos = {x:0, y:0};
|
||||
var _node_hover_id = -1;
|
||||
var _node_opened_id = -1;
|
||||
var _$entrees_block = $('#block-edlpentreesblock');
|
||||
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
|
||||
var _node_pop_up;
|
||||
@@ -176,6 +177,7 @@
|
||||
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
|
||||
|
||||
this.hover = false;
|
||||
this.opened = false;
|
||||
|
||||
// physics
|
||||
this.p = _physics.makeParticle(this.mass, this.x, this.y);
|
||||
@@ -267,6 +269,14 @@
|
||||
}
|
||||
};
|
||||
|
||||
Node.prototype.open = function(){
|
||||
this.opened = true;
|
||||
};
|
||||
|
||||
Node.prototype.close = function(){
|
||||
this.opened = false;
|
||||
};
|
||||
|
||||
Node.prototype.draw = function(){
|
||||
// carre plein
|
||||
// clouleur aléatoire ds les entrees
|
||||
@@ -280,6 +290,13 @@
|
||||
// _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
|
||||
_ctx.fillStyle = edlp_vars[this.e_color];
|
||||
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
|
||||
|
||||
if(this.opened){
|
||||
_ctx.lineWidth = '1px';
|
||||
_ctx.strokeStyle = 'rgb(255,0,0)';
|
||||
_ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
|
||||
}
|
||||
|
||||
_ctx.closePath();
|
||||
};
|
||||
|
||||
@@ -288,13 +305,6 @@
|
||||
|
||||
// this.init();
|
||||
};
|
||||
|
||||
// ____ __ _
|
||||
// / __ \/ /_ __ _______(_)_________
|
||||
// / /_/ / __ \/ / / / ___/ / ___/ ___/
|
||||
// / ____/ / / / /_/ (__ ) / /__(__ )
|
||||
// /_/ /_/ /_/\__, /____/_/\___/____/
|
||||
// /____/
|
||||
// TODO: we may convert a lot of computation into a web worker https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
|
||||
function checkParticulesCollisions(){
|
||||
// pre create vars to save memory;
|
||||
@@ -354,6 +364,19 @@
|
||||
}
|
||||
};
|
||||
|
||||
// show opened audio node
|
||||
function openNode(id){
|
||||
closeNode();
|
||||
_node_opened_id = id;
|
||||
_nodes[id].open();
|
||||
}
|
||||
function closeNode(){
|
||||
if(_node_opened_id != -1){
|
||||
_nodes[_node_opened_id].close();
|
||||
_node_opened_id = -1;
|
||||
}
|
||||
}
|
||||
|
||||
// ______ __
|
||||
// / ____/ _____ ____ / /______
|
||||
// / __/ | | / / _ \/ __ \/ __/ ___/
|
||||
@@ -385,11 +408,15 @@
|
||||
},
|
||||
};
|
||||
_$canvas.trigger(event);
|
||||
openNode(_node_hover_id);
|
||||
}else{
|
||||
// console.log('corpus : click on map');
|
||||
_$canvas.trigger('corpus-cliked-on-map');
|
||||
}
|
||||
}
|
||||
})
|
||||
.on('audio-node-closed', function(e){
|
||||
closeNode();
|
||||
});
|
||||
|
||||
_$entrees_block_termlinks.on('click', function(event) {
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
var _p_velocity_factor = 0.5;
|
||||
var _m_pos = {x:0, y:0};
|
||||
var _node_hover_id = -1;
|
||||
var _node_opened_id = -1;
|
||||
var _$entrees_block = $('#block-edlpentreesblock');
|
||||
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
|
||||
var _node_pop_up;
|
||||
@@ -176,6 +177,7 @@
|
||||
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
|
||||
|
||||
this.hover = false;
|
||||
this.opened = false;
|
||||
|
||||
// physics
|
||||
this.p = _physics.makeParticle(this.mass, this.x, this.y);
|
||||
@@ -267,6 +269,14 @@
|
||||
}
|
||||
};
|
||||
|
||||
Node.prototype.open = function(){
|
||||
this.opened = true;
|
||||
};
|
||||
|
||||
Node.prototype.close = function(){
|
||||
this.opened = false;
|
||||
};
|
||||
|
||||
Node.prototype.draw = function(){
|
||||
// carre plein
|
||||
// clouleur aléatoire ds les entrees
|
||||
@@ -280,6 +290,13 @@
|
||||
// _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
|
||||
_ctx.fillStyle = edlp_vars[this.e_color];
|
||||
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
|
||||
|
||||
if(this.opened){
|
||||
_ctx.lineWidth = '1px';
|
||||
_ctx.strokeStyle = 'rgb(255,0,0)';
|
||||
_ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
|
||||
}
|
||||
|
||||
_ctx.closePath();
|
||||
};
|
||||
|
||||
@@ -288,13 +305,6 @@
|
||||
|
||||
// this.init();
|
||||
};
|
||||
|
||||
// ____ __ _
|
||||
// / __ \/ /_ __ _______(_)_________
|
||||
// / /_/ / __ \/ / / / ___/ / ___/ ___/
|
||||
// / ____/ / / / /_/ (__ ) / /__(__ )
|
||||
// /_/ /_/ /_/\__, /____/_/\___/____/
|
||||
// /____/
|
||||
// TODO: we may convert a lot of computation into a web worker https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
|
||||
function checkParticulesCollisions(){
|
||||
// pre create vars to save memory;
|
||||
@@ -354,6 +364,19 @@
|
||||
}
|
||||
};
|
||||
|
||||
// show opened audio node
|
||||
function openNode(id){
|
||||
closeNode();
|
||||
_node_opened_id = id;
|
||||
_nodes[id].open();
|
||||
}
|
||||
function closeNode(){
|
||||
if(_node_opened_id != -1){
|
||||
_nodes[_node_opened_id].close();
|
||||
_node_opened_id = -1;
|
||||
}
|
||||
}
|
||||
|
||||
// ______ __
|
||||
// / ____/ _____ ____ / /______
|
||||
// / __/ | | / / _ \/ __ \/ __/ ___/
|
||||
@@ -385,11 +408,15 @@
|
||||
},
|
||||
};
|
||||
_$canvas.trigger(event);
|
||||
openNode(_node_hover_id);
|
||||
}else{
|
||||
// console.log('corpus : click on map');
|
||||
_$canvas.trigger('corpus-cliked-on-map');
|
||||
}
|
||||
}
|
||||
})
|
||||
.on('audio-node-closed', function(e){
|
||||
closeNode();
|
||||
});
|
||||
|
||||
_$entrees_block_termlinks.on('click', function(event) {
|
||||
|
||||
Reference in New Issue
Block a user