Commit 86859b71 authored by Bertrand  NÉRON's avatar Bertrand NÉRON

No commit message

No commit message
parent c452782f
......@@ -2,47 +2,136 @@
<html>
<head>
<title>test event</title>
<script src="lib/jquery.js" type="text/javascript"></script>
<!-- <script src="lib/jquery1_4_2.js" type="text/javascript"></script>-->
<link rel="stylesheet" href="style/main.css" type="text/css">
<script src="lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="lib/jquery.mousewheel.js" type="text/javascript"></script>
<script src="lib/raphael-min.js" type="text/javascript"></script>
</head>
<body>
<h1>titre</h1>
<div id="genes_schema">
<p>toto</p>
<p id="test">toto</p>
<div id="genes_schema" class="grabbable" style="width: 500px; height: 500px;background-color: #e6e6e6; border: 2px" >
<div id="divScroll" class="grabbable" style="width: 250px; height: 250px; background-color: #e6e6e6; border: 2px groove #f6f6f6;">use the wheel over this DIV</div>
<div id="event_log">
<p>log event</p>
</div>
</body>
<script type="text/javascript">
var paper = new Raphael("genes_schema", 300, 150);
paper.circle(50, 75, 30);
paper.circle(150, 75, 30);
var paper = new Raphael("genes_schema", 500, 500);
var bckground = paper.rect( 0 , 0 , 500 , 500).attr( {fill:"pink"});
var both = paper.set();
var first_c = paper.circle(50, 75, 30);
var rec =paper.rect( 100 ,100 , 50 , 50);
both.push(first_c );
both.push(rec );
//var sec_circle = paper.circle(150, 75, 30);
$("circle").each(function(i) {
$(this).attr({fill: 'red', stroke: '#000'});
$(this).mouseup(function() {
$("#test").append("<p>Mouseup</p>");
$("#event_log").append("<p>Mouseup</p>");
});
$(this).mousedown(function() {
$("#test").append("<p>MouseDown</p>");
$(this).mousedown(function(ObjectEvent) {
$("#event_log").append("<p>MouseDown</p>");
});
});
</script>
<!--
<script type="text/javascript">
$(function() {
var paper = new Raphael("canvas_container", 300, 150);
paper.circle(50, 75, 30);
paper.circle(150, 75, 30);
$("circle").each(function(i) {
$(this).mouseover(function() {
$("#test").append("<p>MouseOver</p>");
});
$(this).mouseout(function() {
$("#test").append("<p>MouseOut</p>");
var intOverallDelta = 0;
$("#divScroll").bind("mousewheel",function(objEvent, delta , deltaX, deltaY){
objEvent.stopImmediatePropagation();
objEvent.stopPropagation();
console.log(delta, deltaX, deltaY);
objEvent.stopPropagation();
return false;
});
$("#genes_schema").bind("mousedown" , function( evt ){
console.log( "x="+evt.pageX +" y= "+evt.pageY );
$(this).toggleClass( "grabbing" ).toggleClass( "grabbable" );
console.log("mouseDown");
});
$("#genes_schema").bind("mouseup" , function(){
$(this).toggleClass( "grabbable" ).toggleClass( "grabbing" );
console.log("mouseUp");
});
/*
var nowX, nowY, R = Raphael("canvas", 500, 500),
c = R.rect(200, 200, 40, 40).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5,
cursor: "move"
}),
j = R.rect(0,0,100,100),
// start, move, and up are the drag functions
start = function () {
// storing original coordinates
this.ox = this.attr("x");
this.oy = this.attr("y");
this.attr({opacity: 1});
if (this.attr("y") < 60 && this.attr("x") < 60)
this.attr({fill: "#000"});
},
move = function (dx, dy) {
// move will be called with dx and dy
if (this.attr("y") > 60 || this.attr("x") > 60)
this.attr({x: this.ox + dx, y: this.oy + dy});
else {
nowX = Math.min(60, this.ox + dx);
nowY = Math.min(60, this.oy + dy);
nowX = Math.max(0, nowX);
nowY = Math.max(0, nowY);
this.attr({x: nowX, y: nowY });
if (this.attr("fill") != "#000") this.attr({fill: "#000"});
}
},
up = function () {
// restoring state
this.attr({opacity: .5});
if (this.attr("y") < 60 && this.attr("x") < 60)
this.attr({fill: "#AEAEAE"});
};
// rstart and rmove are the resize functions;
c.drag(move, start, up);
};​
*/
//var ox = 0;
//var oy = 0;
var mousedown= function(x ,y,event) {
console.log( "raphael mousedown");
this.ox = event.screenX;
this.oy = event.screenY;
this.attr({
opacity: .5
});
};
var mousemove= function(dx, dy,x ,y ,event) {
console.log( "raphael mousemove");
this.translate(event.screenX - this.ox, event.screenY - this.oy);
this.ox = event.screenX;
this.oy = event.screenY;
};
var mouseup= function(x,y,event){
console.log( "raphael mouseup");
dragging = false;
this.attr({
opacity: 1
});
};
//bckground.drag( move ,start ,stop );
//first_c.drag( move ,start ,stop );
//bckground.drag( move ,start ,stop , first_c ,first_c, first_c );
bckground.drag( mousemove ,mousedown ,mouseup , both ,both, both );
</script>
-->
</html>
\ No newline at end of file
This diff is collapsed.
.gene_sctC { background-color: blue}
.gene_sctD { background-color: yellow}
.gene_sctF { background-color: red}
.gene_sctI { background-color: green}
.gene_sctJ { background-color: orange}
.gene_sctL { background-color: pink}
\ No newline at end of file
.gene_sctC { background-color: BlueViolet }
.gene_sctD { background-color: Blue}
.gene_sctD2{ background-color: DarkCyan}
.gene_sctF { background-color: Cyan}
.gene_sctI { background-color: Aqua}
.gene_sctJ { background-color: DarkGreen}
.gene_sctL { background-color: Green}
.gene_sctN { background-color: ForestGreen}
.gene_sctO { background-color: LimeGreen}
.gene_sctQ { background-color: GreenYellow}
.gene_sctR { background-color: YellowGreen}
.gene_sctS { background-color: Yellow}
.gene_sctT { background-color: Gold}
.gene_sctU { background-color: GoldenRod}
.gene_sctV { background-color: Orange}
.gene_sycD { background-color: DarkOrange}
.gene_sycN { background-color: OrangeRed}
.gene_yopB { background-color: Red}
.gene_yopD { background-color: FireBrick}
.gene_yopN { background-color: Maroon}
\ No newline at end of file
......@@ -48,3 +48,14 @@ td{
#genes_schema{
border:1px solid black;
}
body {
cursor: default;
}
.grabbing{
cursor: url("../closedhand.cur") , default !important;
}
.grabbable{
cursor: url("../openhand.cur") , default !important;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment