Extends ojbet paper Raphael.js

**Archimède** · 26/02/2021, 15h30

Salut, voilà j'essaie de me construire quelques composants (bouton, combobox, tirette etc... à intégrer directement dans paper)
pour éviter d'avoir des balises html qui se chargent avant et indépendamment de l'animation. En fait, je veux refaire du flash...
Du coup, je me suis essayé à un bouton pour démarrer.

J'aimerais faire une classe que je pourrais typer dès le départ comme un objet paper.element

faire un truc comme ça : class Button extends paper.element {....

En effet, j'aimerais pouvoir faire mybutton=new Button(....) et mybutton.click(handleClick)

Alors pour l'instant, j'arrive toujours à bidouiller une solution :

Code HTML :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<!DOCTYPE html>
 
<html>
<head>
    <title></title>
    <style>
        #stage{
            
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
</head>
<body>
<div id="stage"></div>
 
<script>
function Button(x,y,w,h){
  var _Text1 ="Button",_Text2="";
  var bascule=false; 
  var form=paper.rect(x,y,w,h,7).attr({
          'stroke-width' :1,
           stroke: '#707070'});
  
  var str=paper.text(x+w/2 ,y +h/2, _Text1).attr({
           "font-family":"Tahoma",
           "font-size":18,
            fill:'black'
        });
  
 
  var  group=paper.set();
  group.push( form,str ).attr({ "cursor" : "pointer"});
  
 this.innerHTML=group; 
  
  Object.defineProperties(this, {
        "titre": {
            get: function () {
                return _Text1;
            },
            set: function (value) {
                _Text1 = value;
               str.attr({'text':value});
            }
        }
    });
 
 
 Object.defineProperties(this, {
        "titreclick": {
            get: function () {
                return _Text2;
            },
            set: function (value) {
                _Text2 = value;
            }
        }
    });
 
   
 function skin(order){
  switch(order){
    case (0): form.attr({ fill: '90-#cfcfcf:50-#dddddd:5-#ebebeb:20-#f2f2f2:25'});
     break;
    case (1): form.attr({fill: '90-#bef6fd:20-#a7d9f5:50-#d9f0f2:15-#eaf6f2:15' });
      break;
    case (2): form.attr({fill: '90-#98d1ef:20-#66afd7:50-#c4e5f6:15-#deedf6:15'});
      break;
   }
 }
 
 skin(0);
 
  function handleMouseOver(e){
     skin(1);
  }
  
   function handleMouseOut(e){
     skin(0);
  }
  
   function handleMouseDown(e){
    bascule=!bascule;
    skin(2);
    caption();
  
  }
  
  function caption(){
    if (_Text2 !='' ){
       if (bascule){
          str.attr({'text':_text2});
       } else {
          str.attr({'text':_text1});
       }
    }
    else {
          str.attr({'text':_text1});
    }
  }
 
   
  group.mouseout(handleMouseOut);
  group.mouseover(handleMouseOver);
  group.mousedown(handleMouseDown);
  group.mouseup(handleMouseOut);
}
 
var paper= Raphael("stage",500,300);
var mybutton=new Button(20,20,150,50);
mybutton.titre='Start';
mybutton.titreclick='Stop';
 
mybutton.innerHTML.click(function(e){
   console.log("ça marche");
});
 
</script>
 
</body>
</html>

Mais bon, le but, c'est d'essayer de faire ça un peu plus correctement...Alors comment trouver la bonne syntaxe pour faire dériver mon bouton de paper element ?

**NoSmoking** · 27/02/2021, 10h43

Bonjour,
je pense que tu devrais adopter une façon « moderne » d'aborder tes classes : Classes, même si cela n'a pas révolutionnait le JavaScript.

Si tu veux « étendre » Raphaêl.paper, il te faut commencer par regarder comment s'articule le code de cette bibliothèque, mais est-ce utile.

Nota : comme déjà abordé, il me semble qu'il y a plus récent comme « bibli like Raphaêl », à partir desquelles il serait peut-être préférable de partir, par exemple Snap.svg par le même auteur.

**Archimède** · 27/02/2021, 12h48

Je te remercie. En effet, j'avais déjà vu cette bibliothèque sans aller voir la doc et je ne savais pas qu'elle était du même auteur Dimitry...
Elle paraît en effet plus aboutie bien que RaphaelJs fait le taf toute en étant légère. Si le problème des événements sur les groupes est géré directement par snap sans l'utilisation de plugin alors ça devient en effet très intéressant... A voir.
Et là, on trouve des tutos en français :https://darchevillepatrick.info/svg/svg18.php#corps
Sinon, j'ai vu que l'on pouvait rajouter des méthodes à paper avec Raphael.fn
Mon but était de passer en effet par class Button{ constructor(x,y,w,h){....
Bon, je vais peut-être changer de direction avec Snap...Il faut faire un essai sur la gestion des événements avec les groupes pour voir si ça vaut le coup de migrer vers snap...

Merci et bon W.E

**Archimède** · 28/02/2021, 12h27

Vite fait, j'ai tenté le coup de reprendre exactement le code précédent (que je vais reprendre pour les class) avec l'utilisation de Snap. Déjà Le groupe réagit correctement aux événements souris... En effet avec Raphael, le text avait un bug sur le mouseDown ( pas de changement de couleur en bleu) Peut-être fallait-il passer par le plugin pour former un vrai groupe svg). Avantage à Raphael dans la fluidité de fonctionnement (la librairie est moins lourde sans doute).

Pour Snap donc, pas de bug dans la fonctionnalité du groupe qui réagit bien aux événements souris :

Code html :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #stage{
          margin:2% 25%;
          background :#f0e5cb;
        }
    </style>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</head>
<body>
<svg width="50%" height="auto" viewBox="0 0 1000 600"  id="stage"></svg>
<script>
 
function Button(x,y,w,h){
  var _Text1 ="Button",_Text2="";
  var bascule=false; 
  var form=s.rect(x,y,w,h,7).attr({
          'stroke-width' :1,
           stroke: '#707070'});
  
  var str=s.text(x + w/2 ,y + h/2, _Text1).attr({
           "font-family":"Tahoma",
           "font-size":22,
            fill:'black',
            'text-anchor':"middle",
             "dominant-baseline":"middle"
        });
  
 
  var  group = s.group( form,str ).attr({ "cursor" : "pointer"});
  
 this.innerHTML=group; 
  
  Object.defineProperties(this, {
        "titre": {
            get: function () {
                return _Text1;
            },
            set: function (value) {
                _Text1 = value;
                str.attr({'text':value});
            }
        }
    });
 
 
 Object.defineProperties(this, {
        "titreclick": {
            get: function () {
                return _Text2;
            },
            set: function (value) {
                _Text2 = value;
            }
        }
    });
 
var  lineairev1 = s.gradient("l(0, 0, 0, 1) #cfcfcf:50-#dddddd:5-#ebebeb:20-#f2f2f2:25");
var  lineairev2 = s.gradient("l(0, 0, 0, 1) #bef6fd:20-#a7d9f5:50-#d9f0f2:15-#eaf6f2:15");
var  lineairev3 = s.gradient("l(0, 0, 0, 1) #98d1ef:20-#66afd7:50-#c4e5f6:15-#deedf6:15"); 
 function skin(order){
  switch(order){
    case (0): form.attr({ fill:lineairev1} );
     break;
    case (1): form.attr({fill: lineairev2 });
      break;
    case (2): form.attr({fill:lineairev3});
      break;
   }
 }
 
 skin(0);
 
  function handleMouseOver(e){
     skin(1);
  }
  
   function handleMouseOut(e){
     skin(0);
  }
  
   function handleMouseDown(e){
    bascule=!bascule;
    skin(2);
    caption();
  }
  
  function caption(){
    if (_Text2 !='' ){
       if (bascule){
          str.attr({'text':_Text2});
       } else {
          str.attr({'text':_Text1});
       }
    }
    else {
          str.attr({'text':_Text1});
    }
  }
 
   
  group.mouseout(handleMouseOut);
  group.mouseover(handleMouseOver);
  group.mousedown(handleMouseDown);
  group.mouseup(handleMouseOut);
}
var s = Snap("#stage");
var mybutton=new Button(20,20,150,50);
mybutton.titre='Start';
mybutton.titreclick='Stop';
 
mybutton.innerHTML.click(function(e){
   console.log("ça marche");
});
 
</script>
 
</body>
</html>

Après, il faut voir sur un code plus complexe si ça ne plombe pas la fluidité de l'ensemble pour Snap... Les tutos trouvés sur le net restent encore très succincts et ne présentent que les fonctionnalités basiques comme pour RaphaelJS...
Je ne sais pas quel est le choix le plus judicieux à faire.

Finalement, ça a l'air plutôt correct...et très facile de migrer de raphael à snap. Donc j'adopte. Merci encore.

**NoSmoking** · 01/03/2021, 11h58

Peut-être fallait-il passer par le plugin pour former un vrai groupe svg).

c'est un impératif de passer par des groupes, diviser pour mieux régner.

Je ne sais pas quel est le choix le plus judicieux à faire.

SnapJS intégre les groupe et pour le reste les similitudes sont très fortes, donc oui SnapJS est un meilleur choix dans ce qui se fait de léger. Il en existe d'autres comme D3JS par exemple mais quoiqu'il arrive il va te falloir mettre les doigts sur le clavier suivant ce que tu veux réaliser

Un petit point sur la réalisations de tes propres objets, part tout de suite sur des class pour une meilleur lisibilité et une meilleur évolution.
En reprenant rapidement ce que tu as fais et en évitant de mixer de trop les approches cela pourrait donner :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
class Btn {
  constructor(left, top, width, height) {
    // les valeurs par défaut
    this.left = left || 0;
    this.top = top || 0;
    this.width = width || 100;
    this.height = height || 50;
    this.texte = "Bouton";
    this.fillOver = s.gradient("l(0, 0, 0, 1) #bef6fd:20-#a7d9f5:50-#d9f0f2:15-#eaf6f2:15");
    this.fillOut = s.gradient("l(0, 0, 0, 1) #cfcfcf:50-#dddddd:5-#ebebeb:20-#f2f2f2:25");
    this.fillDown = s.gradient("l(0, 0, 0, 1) #98d1ef:20-#66afd7:50-#c4e5f6:15-#deedf6:15");
    //
    this.snapGroup = this.createBouton();
    this.initEventMouse();
  }
  addEvent(type, callback) {
    if (this.snapGroup[type] && "function" === typeof callback) {
      this.snapGroup[type](callback);
    }
  }
  caption(value) {
    if (value) {
      this.texte = value;
      this.snapText.attr({
        "text": value
      });
    }
    else {
      return this.texte;
    }
  }
  changeFond(value) {
    this.snapGroup.attr({
      "fill": value
    });
  }
  createBouton() {
    this.snapRect = s.rect(this.left, this.top, this.width, this.height, 7).attr({
      "stroke-width": 1,
      "stroke": "#707070"
    });
    this.snapText = s.text(this.left + this.width / 2, this.top + this.height / 2, this.texte).attr({
      "font-family": "Tahoma",
      "font-size": 22,
      "fill": "black",
      "text-anchor": "middle",
      "dominant-baseline": "middle"
    });
    return s.group(this.snapRect, this.snapText).attr({
      "fill": this.fillOut,
      "cursor": "pointer"
    });
  }
  initEventMouse() {
    const g = this.snapGroup.node;
    g.addEventListener("mouseout", () => {
      this.changeFond(this.fillOut);
    });
    g.addEventListener("mouseover", () => {
      this.changeFond(this.fillOver);
    });
    g.addEventListener("mousedown", () => {
      this.changeFond(this.fillDown);
    });
  }
}

avec un appel du type

Code :

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

1
2
3
const s = Snap("#stage");
const bouton =  new Btn(100, 100, 200, 75);
bouton.addEvent("click", () => alert("Button clicked !"));

Je n'ai pas tout repris ce que tu avais commencé et c'est sûrement perfectible mais c'est pour l'approche.

**Archimède** · 01/03/2021, 16h29

Salut,
merci pour la trame sur la class, je vais pouvoir m'en inspirer et ainsi être plus performant en JS.

Il en existe d'autres comme D3JS par exemple mais quoiqu'il arrive il va te falloir mettre les doigts sur le clavier suivant ce que tu veux réaliser

Oui évidemment, mais j'aime bien ça donc ce n'est pas une contrainte.

Après Snap svg me convient tout à fait. J'ai refait un essai avec le rapporteur pour voir si ça tournait de manière fluide... Impeccable !
Il faut effectivement revoir la signature des méthodes qui diffèrent un peu de Raphael.
Pour les groupes, par exemple, il faut faire :

Code :

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

1
2
3
 
var rapporteur= s.g();
et rapporteur.add(obj1)....  add(obj2) .... pour ajouter des eléments au fur et à mesure.

je n'ai pas vu encore l'équivalent de setStart et set Finish... Après, il y a line polyline , qui évitent les path- Pour les cercles, on rajoute fill:'none' pour éviter un remplissage non désiré (curieux).

Mais globalement, c'est pas mal du tout. Après pour refaire mes animations flash, j'ai besoin d'une petite librairie de composants visuels ( à se faire)-

Merci encore, je jette un œil sur D3JS pour voir...

Extends ojbet paper Raphael.js

JavaScript

Vue hybride

Discussions similaires

Partager

Partager