Développer un plugin jQuery

Version imprimable

Bonjour à tous,

Donc voilà, pour me faire la main je m'entraine à develloper un plug in jquery (censé dessiner un graphique dans un canvas). Mais lorsque j'apelle la méthode de mon plug in avec un sélecteur qui fait référence à plusieurs éléments, il y as des confusions entre les variables de deux canvas identiques, j'ai uploadé un exemple ici avec 2*2 canvas identiques, pour voir les bug, pratiquez le drag and drop sur chaque graphique.

Lien: http://habbologie.com/plug/

Code jQuery:

Code:

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
 
(function($){
 
    var ID = 0;
 
    $.fn.jGraph=function(options){
        var test=0;
        // Defaults
        var defaults = {
            'width': 600,
            'height': 250,
            'abscissa': [-100, 100],
            'ordered': [-50, +50]
        };
 
        var params = $.extend(defaults, options);
 
        return this.each(function(){
 
            $(this).attr('id', 'j$(this)'+(++ID));
            this.stepX, this.stepY;
            this.click = false;
            this.abscissa = params.abscissa;
            this.ordered = params.ordered;
            var ctx = this.getContext('2d');
            this.width = params.width;
            this.height = params.height;
            // css canvas
            $(this).css({
                'border': '1px solid black',
            });
 
            // Get mouse's coords
            this.mouseCoords = function(e){
                var x = e.clientX - this.offsetLeft;
                var y = e.clientY - this.offsetTop;
                console.log(x+' '+y);
                return [x, y];
            }
 
            this.drawLines = function(){
                console.log('ok');
                // Step for the points
                this.pointsX = this.abscissa[1]-this.abscissa[0];
                this.pointsY = this.ordered[1]-this.ordered[0];
                this.stepX = Math.round(params.width/this.pointsX);
                this.stepY = params.height/this.pointsY;
 
                // Ordered
                ctx.strokeStyle='#383838';
                ctx.lineWidth='1px'; 
                ctx.beginPath();
                ctx.moveTo(-(this.abscissa[0])*this.stepX, params.height);
                ctx.lineTo(-(this.abscissa[0])*this.stepX, 0);
                ctx.stroke(); 
 
                // Ordered
                ctx.strokeStyle='#383838';
                ctx.lineWidth='1px'; 
                ctx.beginPath();
                ctx.moveTo(0, this.ordered[1]*this.stepY);
                ctx.lineTo(params.width, this.ordered[1]*this.stepY);
                ctx.stroke(); 
 
                // Abcissa's points
 
                for(i=-this.pointsX/10; i>=this.abscissa[0]-this.pointsX/10; i-= this.pointsX/10){
                    ctx.strokeStyle='#383838';
                    ctx.lineWidth='1px'; 
                    ctx.beginPath();
                    ctx.moveTo(Math.abs(this.abscissa[0]*this.stepX)+(i*this.stepX), this.ordered[1]*this.stepY+3);
                    ctx.lineTo(Math.abs(this.abscissa[0]*this.stepX)+(i*this.stepX), this.ordered[1]*this.stepY-3);
                    ctx.fillText(Math.round(i), Math.abs(this.abscissa[0]*this.stepX)+(i*this.stepX)-5, this.ordered[1]*this.stepY-4);
                    ctx.stroke();
                }
 
            }
 
            this.draw = function(){
                ctx.clearRect(0,0,params.width, params.height)
                this.drawLines();
            }
 
            // Move $(this)
 
            $(this).mousedown(function(e){
                this.click = true;
                clickCoords = this.mouseCoords(e);
            });
            $(this).mouseup(function(){
                this.click = false;
            });
            $(this).mousemove(function(e){
                if(this.click){
                    moveCoords = this.mouseCoords(e);
                    this.x = moveCoords[0]-clickCoords[0];
                    this.y = moveCoords[1]-clickCoords[1];
                    this.abscissa[0] -= this.x/this.stepX;
                    this.abscissa[1] -= this.x/this.stepX;
                    this.ordered[0] += this.y/this.stepY;
                    this.ordered[1] += this.y/this.stepY;
                    clickCoords = moveCoords;
                    console.log(this.x+' '+this.y);
                    this.draw();
                }
            });
 
            this.draw();
        });
    };
})(jQuery);

Merci d'avance !

30/01/2014, 20h33
NoSmoking

Bonjour,
à lire :fleche: Écrire ses propres plugins avec jQuery

Bonsoir,

Merci du lien, grace à celui ci j'ai pu un peu clarifier le code, sauf que maintenant, il ne marche pas:
J'ai bien un jGraphInit sur chaque élement, mais rien ne se dessine dans les canvas, voici le nouveau code:

Code:

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
123
124
125
126
127
128
129
(function($){
 
    /* Main function jGraph */
    $.fn.jGraph=function(params){
 
 
        /* Closure elements for each */
        this.each(function(_, el){
 
            jGraphInit(el, params);
        });
 
        /* Chaining */
        return this;
 
    }
 
    /* Default options */
    var defaults = {
            width: 600,
            height: 250,
            abs: [-100, 100],
            ord: [-50, +50]
        };
 
    /* Graphic's initiation */
    function jGraphInit(el, params){
 
        var options = $.extend(defaults, params);
        var graphic = new Graphic(el, options);
        $(this).data('jGraph', graphic);
        graphic.drawGraph();
        el.width = graphic.size.width;
        el.height = graphic.size.height;
 
    }
 
    /* Utility functions */
    function mouseGraphCoords(e){
        var graphic = $(this).data('jGraph');
        return {x: e.clientX - graphic.offset.left, y:e.clientX - graphic.offset.top };
    }
 
    /* Builder of the Graphic object */
    function Graphic(el, options){
 
        this.el = el;
        this.size = {width: options.width, height: options.height};
        this.offset = {left: el.offsetLeft, top: el.offsetTop};
        this.ctx = el.getContext('2d');
        this.abs = {left: options.abs[0], right: options.abs[1]};
        this.ord = {bottom: options.ord[0], top: options.ord[1]};
        this.points = {x: this.abs.right - this.abs.left, y: this.ord.top - this.ord.bottom};
        this.step = {x: Math.round(options.width/this.points.x), y: Math.round(options.height/this.points.y)};
        this.clicked = false;
        this.clickCoords = null;
        this.moveCoords = null;
 
        $(this.el).mousedown(function(e){
            this.clickCoords = mouseGraphCoords(e);
            this.clicked = true;
        });
 
        $(this.el).mouseup(function(){
            this.clicked = false;
        });
 
        $(this.el).mousemove(function(e){
            if(this.clicked){
                this.moveGraph(e);
            }
        });
    }
 
    Graphic.prototype.moveGraph = function(e){
 
        this.moveCoords = mouseGraphCoords(e);
        var x = this.moveCoords.x - this.clickCoords.x;
        var y = this.moveCoords.y - this.clickCoords.y;
        this.abs.left -= x / this.step.x;
        this.abs.right -= x / this.step.x;
        this.ord.bottom += y / this.step.y;
        this.ord.top += y / this.step.y;
        this.clickCoords = this.moveCoords;
 
        this.drawGraph();
    };
 
    Graphic.prototype.drawGraph = function(){
 
        this.points.x = this.abs.right - this.abs.left;
        this.points.y = this.ord.top - this.ord.bottom;
        this.step.x = Math.round(this.size.width / this.points.x);
        this.step.y = Math.round(this.size.height / this.points.y);
 
        // Ord
        this.ctx.strokeStyle='#383838';
        this.ctx.lineWidth='1px';
        this.ctx.beginPath();
        this.ctx.moveTo(-(this.abs.left) * this.step.x, this.size.height);
        this.ctx.lineTo(-(this.abs.left) * this.step.x, 0);
        this.ctx.stroke();
 
        // Abs
        this.ctx.strokeStyle='#383838';
        this.ctx.lineWidth='1px';
        this.ctx.beginPath();
        this.ctx.moveTo(0, this.ord.top * this.step.y);
        this.ctx.lineTo(this.size.width, this.ord.top * this.step.y);
        this.ctx.stroke();
 
        // Abcissa's points
        for(i =- this.points.x / 10; i >= this.abs.left - this.points.x / 10; i -= this.points.x/ 10){
            this.ctx.strokeStyle='#383838';
            this.ctx.lineWidth='1px';
            this.ctx.beginPath();
            this.ctx.moveTo(Math.abs(this.abs.left * this.step.x) + (i * this.step.x), this.ord.top * this.step.y + 3);
            this.ctx.lineTo(Math.abs(this.abs.left * this.step.x) + (i * this.step.x), this.ord.top * this.step.y - 3);
            this.ctx.fillText(Math.round(i), Math.abs(this.abs.left * this.step.x) + (i * this.step.x) - 5, this.ord.top * this.step.y - 4);
            this.ctx.stroke();
        }
 
    };
 
 
 
 
 
})(jQuery);

01/02/2014, 19h16
NoSmoking
Pas regardé ta 2éme source!

Ton problème semble venir de ces lignes
Code:

1 2 3 4 5 6 var defaults = { 'width': 600, 'height': 250, 'abscissa': [-100, 100], // <- cette déclaration 'ordered': [-50, +50] // <- cette déclaration };
tu utilises des tableaux et ceux ci, lors de l'initialisation
Code:

1 2 this.abscissa = params.abscissa; this.ordered = params.ordered;
ne sont récupérés que par adresse, donc quand tu modifies tes positions elles impactent l'unique tableau en référence. (pas sûr d'être clair!).

Essaies de passer par un objet dans défaults, 'abscissa': { 'min':-100, 'max': 100}, ou modifie le code pour créer une copie des tableaux
Code:

1 2 this.abscissa = params.abscissa.slice(); this.ordered = params.ordered.slice();

C'est la bonne explication ! Passage d'un tableau par référence, donc commun à toutes les instances du plugin.

La solution simple concat() : https://developer.mozilla.org/en-US/...s/Array/concat

Code:

1
2
this.abscissa = params.abscissa.concat();
this.ordered = params.ordered.concat();

*****************

Pour un plugin, il est impératif de distinguer l'exécution du code au moment de l'appel du plugin de l'exécution du code d'un gestionnaire d'événement créé par le plugin. Lorsque le gestionnaire d'événement est actif, seul son code est actif.

Voici une solution certainement un peu plus difficile à comprendre pour un débutant.

On peut créer un objet Graph par canvas dans l'espace data : $( selector ).data( "Graph", { ... });

Il suffit de copier-coller le code ci-dessous pour tester.

Code:

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Forum jQuery</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    <script>
        "use strict";
 
        var debugBool = true;
 
         /*
          * J'utilise head.js pour charger CSS et JS de manière asynchrone 
          * et parallèle, mais les fichiers sont exécute dans l'ordre.
          * Voir la documentation et l'API : http://headjs.com/
          * Les polices de caractères et le fichier head.js doivent être 
          * inclus manuellement.
          */
        head.load(
            "http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
            "http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css",
            "http://code.jquery.com/qunit/qunit-1.13.0.css",
            { "d3" : "http://d3js.org/d3.v3.min.js" },
            { "d3Hello" : "http://danielhagnoul.developpez.com/lib/dvjh/d3Hello.js" },
            { "jquery" : "http://code.jquery.com/jquery-2.1.0.min.js" },
            { "jqueryui" : "http://code.jquery.com/ui/1.10.4/jquery-ui.min.js" },
            "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
            { "qunit" : "http://code.jquery.com/qunit/qunit-1.13.0.js" },
            { "testsQUnit" : "http://danielhagnoul.developpez.com/lib/dvjh/testsQUnit.js" }
        );      
    </script>
    <style>
        /* Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
/*-- Début code du test --*/
 
 
/*-- Fin code du test --*/
 
    </style>
</head>
<body>
    <header>
        <h1>Forum jQuery</h1>
        <h2>
            <a href="">Lien</a>
        </h2>
    </header>
    <section class="conteneur">
        <nav>
 
<!-- Début code du test -->
 
 
<!-- Fin code du test -->
 
        </nav>
        <article>
 
<!-- Début code du test -->
 
<canvas id="graph1" class='_1'></canvas>
 
<!-- Fin code du test -->
 
        </article>
        <article>
 
<!-- Début code du test -->
 
<canvas id="graph2" class='_1'></canvas>
 
<!-- Fin code du test -->
 
        </article>
        <article>
 
<!-- Début code du test -->
 
<canvas id="graph3" class='_2'></canvas>
 
<!-- Fin code du test -->
 
        </article>
        <article class="qunit">
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
        </article>
    </section>
    <footer class="h-entry">
        <time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
        <a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
        <a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
        <a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
        <a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a>
    </footer>
    <script>
        "use strict";
 
        /*
         * Chargeur de code head.js, document ready et fichiers chargés.
         */
        head.ready( [ 
                "d3", "d3Hello", 
                "jquery", "jqueryui", 
                "qunit", "testsQUnit"
            ], function(){
 
/* Début code du test */
 
(function( $ ){
 
    $.fn.jGraph = function( options ){
        var test = 0,
            defaults = {
                'width': 600,
                'height': 250,
                'abscissa': [ -100, 100 ],
                'ordered': [ -50, +50 ]
            },
            params = $.extend( true, {}, defaults, options );
 
        return this.each( function( i, item ){
 
            var drawLines = function( jObj ){
                var Graph = jObj.data( "Graph" );
 
                // Step for the points
                Graph.pointsX = Graph.abscissa[ 1 ] - Graph.abscissa[ 0 ];
                Graph.pointsY = Graph.ordered[ 1 ] - Graph.ordered[ 0 ];
                Graph.stepX = Math.round( Graph.width / Graph.pointsX );
                Graph.stepY = Graph.height / Graph.pointsY;
 
                // abscissa
                Graph.ctx.strokeStyle = '#383838';
                Graph.ctx.lineWidth = '1px';
                Graph.ctx.beginPath();
                Graph.ctx.moveTo( -( Graph.abscissa[ 0 ] ) * Graph.stepX, Graph.height );
                Graph.ctx.lineTo( -( Graph.abscissa[ 0 ] ) * Graph.stepX, 0 );
                Graph.ctx.stroke();
 
                // Ordered
                Graph.ctx.strokeStyle = '#383838';
                Graph.ctx.lineWidth = '1px';
                Graph.ctx.beginPath();
                Graph.ctx.moveTo( 0, Graph.ordered[ 1 ] * Graph.stepY );
                Graph.ctx.lineTo( Graph.width, Graph.ordered[ 1 ] * Graph.stepY );
                Graph.ctx.stroke();
 
                // Abcissa's points
                for ( var i = -( Graph.pointsX / 10 ); i >= ( Graph.abscissa[ 0 ] - Graph.pointsX / 10 ); i -= ( Graph.pointsX / 10 ) ){
                    Graph.ctx.strokeStyle = '#383838';
                    Graph.ctx.lineWidth = '1px';
 
                    Graph.ctx.beginPath();
 
                    Graph.ctx.moveTo( Math.abs( Graph.abscissa[ 0 ] * Graph.stepX ) + 
                                        ( i * Graph.stepX ), Graph.ordered[ 1 ] * Graph.stepY + 3 );
                    Graph.ctx.lineTo( Math.abs( Graph.abscissa[ 0 ] * Graph.stepX ) + 
                                        ( i * Graph.stepX ), Graph.ordered[ 1 ] * Graph.stepY - 3 );
                    Graph.ctx.fillText( Math.round( i ), Math.abs( Graph.abscissa[ 0 ] * Graph.stepX ) + 
                                        ( i * Graph.stepX ) - 5, Graph.ordered[ 1 ] * Graph.stepY - 4 );
 
                    Graph.ctx.stroke();
                }
 
                jObj.data( "Graph", Graph );
            };
 
            var draw = function( jObj ){
                var Graph = jObj.data( "Graph" );
 
                Graph.ctx.clearRect( 0, 0, Graph.width, Graph.height );
 
                jObj.data( "Graph", Graph );
 
                drawLines( jObj );
            };
 
            // Get mouse's coords
            var mouseCoords = function( jObj, e ){
                var x = e.clientX - jObj.offset().left;
                var y = e.clientY - jObj.position().top;
 
                return [ x, y ];
            };
 
            item.width = params.width;
            item.height = params.height;
 
            $( item )
                .css( "border", "1px solid black" )
                .data( "Graph", {
                    "ctx" : item.getContext( '2d' ),
                    "width" : params.width,
                    "height" : params.height,
                    "stepX" : 0,
                    "stepY" : 0,
                    "pointsX" : 0,
                    "pointsY" : 0,
                    "clicked" : false,
                    "abscissa" :  params.abscissa.concat(),
                    "ordered" : params.ordered.concat(),
                    "offsetLeft" : item.offsetLeft,
                    "offsetTop" : item.offsetTop
                });
 
            draw( $( item ) );
 
            // Move graph
            $( item ).on( "mousedown", function( e ){
                var Graph = $( this ).data( "Graph" );
 
                Graph.clicked = true;
                Graph.clickCoords = mouseCoords( $( this ), e );
                Graph.moveCoords = Graph.clickCoords;
 
                console.log( "MOUSEDOWN " + $( this ).attr( 'id' ) + 
                                '\nmouveCoords : ' + Graph.moveCoords + 
                                '\nclickCoords : ' + Graph.clickCoords );
 
                $( this ).data( "Graph", Graph );
            });
 
            $( item ).on( "mouseup", function(){
                var Graph = $( this ).data( "Graph" );
 
                Graph.clicked = false;
 
                console.log( "MOUSEUP " + $( this ).attr( 'id' ) + 
                                '\nmouveCoords : ' + Graph.moveCoords + 
                                '\nclickCoords : ' + Graph.clickCoords );
 
                $( this ).data( "Graph", Graph );
            });
 
            $( item ).on( "mousemove", function( e ){
                var Graph = $( this ).data( "Graph" );
 
                if ( Graph.clicked ){
 
                    console.log( "MOUSEMOVE " + $( this ).attr( 'id' ) + 
                                    '\nmouveCoords : ' + Graph.moveCoords + 
                                    '\nclickCoords : ' + Graph.clickCoords);
 
                    Graph.moveCoords = mouseCoords( $( this ), e );
 
                    var x = Graph.moveCoords[ 0 ] - Graph.clickCoords[ 0 ];
                    var y = Graph.moveCoords[ 1 ] - Graph.clickCoords[ 1 ];
 
                    Graph.abscissa[ 0 ] -= x / Graph.stepX;
                    Graph.abscissa[ 1 ] -= x / Graph.stepX;
                    Graph.ordered[ 0 ] += y / Graph.stepY;
                    Graph.ordered[ 1 ] += y / Graph.stepY;
 
                    Graph.clickCoords = Graph.moveCoords;
 
                    $( this ).data( "Graph", Graph );
 
                    draw( $( this ) );
                }
            });
        });
    };
})(jQuery);
 
$( "canvas[id^='graph']" ).jGraph();
 
 
/* Fin code du test */
 
            if ( debugBool ){
                console.log( ISOformat( new Date() ) );
 
                $( ".qunit" ).show();
 
                testQUnitSelector( "App", [ 
                    ".conteneur", '._1', '._2'
                ] );
 
                testQUnitID( "App", [ 
                    "qunit", "qunit-fixture"
                ] );
            }
 
        });
    </script>
</body>
</html>