Discussion :

[Meloooo]

Bonjour,
Je travaille avec Jquery SVG.
Ma page à plusieurs boutons (Créer rectangle, Move, Connecteur...)
Lorsque je clique sur un des boutons une fonction se lance.
Mon souci, c'est que pour chacune de mes fonctions j'ai le même sélécteur.
Ex :
Lorsque je clic sur le bouton 'Connecteur', ca me créer un connecteur sur mon rectangle, ensuite lorsque je clic sur le bouton 'Move' et que je bouge mon rectangle, il me créer automatiquement un connecteur.
Voici le code pour le click sur les boutons :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$('#connector').click( function() {
    enable = 0;
    $('#choice').css('display' , 'none');   
    connector();
});
$('#moveBt').click(function() {
	enable = 0;   
    $('#choice').css('display' , 'none');
    move(); 
});

et voici, les fonctions en questions :
connector() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
   $('rect').mousedown(function(e){
                  // mon code
   }).mouseup(function() {
                 // mon code    
   });

et move()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
function move(){
    $('rect').mousedown(function(e){
              // mon code    
     })
     var mousemove = function(e){ 
         // mon code
    }
    var mouseup = function(e){
                 // mon code   
    };
}

Je pense que ca ne sert à rien que je vous mette le code entier pour chacune des fonctions.
J'ai bien essayé de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$('rect').unbind('mousedown', connector());

sur ma fonction move()
Mais ca ne fonctionne pas.
Merci de votre aide.

[Lorenzo77]

salut,

ceci devrait fonctionner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('rect').unbind('mousedown');

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('rect').unbind();

[Meloooo]

Merci de ta réponse, mais les unbind ne fonctionne pas, surement parce que sur presque toutes mes fonctions j'ai le même sélecteur.

J'ai réussi à trouver une piste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
var enable = 1;
function node(){
$('#svgsketch').on('click', function(event) {
    if(enable == 1){
            // mon code pour créer le noeud
    } else { return false; }
});

Et sur les autres cliques des boutons, ma variable passe à 0...
Marche pour la création de forme mais pas pour le mouvement et la création de liaison entre mes formes...
Voici ma fonction move

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
    if(move_ == 1){
    $('rect').on('mousedown', function(e){
         x = e.target.parentNode.getAttribute('id');
         destinationX_ = e.target.parentNode.getAttribute('x');      
         destinationY_ = e.target.parentNode.getAttribute('y');             
         $('#x').html(destinationX_);
         $('#y').html(destinationY_);  
         $(window).bind('mousemove', mousemove);
         $(window).bind('mouseup', mouseup);      
     })
     var mousemove = function(e){ 
         var destinationX = e.pageX - $('#svgsketch').offset().left;  
         var destinationY = e.pageY - $('#svgsketch').offset().top;  
        $('#'+x).attr('transform' , 'translate('+destinationX+', '+destinationY+')');    
    }
    var mouseup = function(e){   
        $(window).unbind('mousemove', mousemove);
        $(window).unbind('mouseup', mouseup); 
    };
    } else { return false;}

et ma fonction liaison :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
    move_ = 0;
$("#temp").css('display' , 'block');
dashArray = '5';
line = sketchpad.line(0,0,0,0,{fill:"red",role:"dragshape",stroke:"red",strokeWidth:1, strokeDashArray:dashArray, id:'temp'});	
$('#svgsketch').mousedown( function(event){
    event.preventDefault();
	event = event.target;
	cx = event.getAttribute('cx');
	cy = event.getAttribute('cy');	
    group = event.parentNode.getAttribute('id'); 
	$('#line1').html(cx);
	$('#line2').html(cy);
    $('#temp').css('display' , 'block');
    xCon = $('circle').attr('cx');
    $('#svgsketch').bind('mousemove' , mousemove);
    $('#svgsketch').bind('mouseup' , mouseup); 
});
var mouseup= function(event){
    $('#temp').css('display' , 'none');
    dashArray = '0'
    event.preventDefault();
	event = event.target;
	cx = event.getAttribute('cx');
	cy = event.getAttribute('cy');	
    group = event.parentNode.getAttribute('id');    
	$('#line3').html(cx);
	$('#line4').html(cy);
    $('#svgsketch').unbind('mousemove' , mousemove); 
	sketchpad.line($("#"+group), $('#line1').html(),$('#line2').html(),$('#line3').html(),$('#line4').html(),{fill:"red",role:"dragshape",stroke:"red",strokeWidth:1,strokeDashArray:dashArray});	     
 
    x1 = line.getAttribute('x1');
    x2 = line.getAttribute('x2');
    y1 = line.getAttribute('y1');
    y2 = line.getAttribute('y2');    
    valueX1 = (parseInt(x2) + parseInt(x1)) / 2 ;
    valueY1 = (parseInt(y2) + parseInt(y1)) / 2 ;
    valueX2 = parseInt(valueX1) - 5;
    valueY2 = parseInt(valueY1) - 10;
    valueX2bis = parseInt(valueX1) - 10;    
    valueY2bis = parseInt(valueY1) + 5; 
    $('#temp').css('display' , 'none');    
};
var mousemove = function(event){
    $("#temp").css('display' , 'block');
    var destinationX = parseInt(event.pageX) - parseInt($('#svgsketch').offset().left);  
    var destinationY = parseInt(event.pageY) - parseInt($('#svgsketch').offset().top);     
    sketchpad.change(line, {x1:$('#line1').html(), y1:$('#line2').html(), x2:destinationX, y2:destinationY});
};

Quand j’essaye de relier deux formes entre elles et qu'ensuite je tente de les bouger, je vois quand même ma ligne (mousemove de liaison)

Merci de votre aide

[danielhagnoul]

Bonsoir

Il ne faut pas inclure des gestionnaires d'évènements dans des fonctions qui sont appelées plus d'une fois, sinon vous créez de nouveaux gestionnaires d'évènement lors de chaque appel de fonction.

[Meloooo]

Hum, je comprends mais comment faire dans mon cas ?
Car j'ai plusieurs boutons qui mènent vers mes fonctions, et l'utilisateur peut cliquer plusieurs fois sur ces boutons au cours de sa création.

Merci de votre réponse.

[danielhagnoul]

Bonjour

C'est votre manière de concevoir l'enchaînement des actions qui est erronée.

La page web est un environnement asynchrone.

Après les actions initiées par l'ouverture de la page, c'est toujours l'utilisateur et lui seul qui décide et qui agit.

Chaque action de l'utilisateur peut activer un gestionnaire d'événement qui doit toujours agir sur la page web de manière asynchrone.

Le concepteur de la page doit inclure ses enchaînements d'actions asynchrones dans le code d'un gestionnaire d'événement qui sera initié par une action de l'utilisateur.

Exceptionnellement, car le comportement de la page web ne doit pas dérouter l'utilisateur, on peut déclencher un gestionnaire d'événement avec la méthode trigger( eventType ).