www

commit 9275b37787776d92eeea876b0a4a57f091c2329d
parent 9c653e23b34b3e6bcd3031f5d7db1e925d3ba748
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date:   Sun, 13 Feb 2011 22:52:42 +0100

Nettoyage du code, blocs déplacables.

* Nouvelle "forme" boundingRect : crée un rectangle contenant toutes les formes passées en paramètre, avec une marge optionnelle.
* Nouvelle "forme" marginText : crée un texte dont le coin en haut à gauche est à la position demandée, + marge. Peu utile maintenant qu'on a boundingRect.
* Drag'n'drop, qui fonctionne sur le set grâce aux paramètres non documentés de drag() :)
* Masquage du message indiquant que JavaScript est nécessaire au fonctionnement de l'application.

Diffstat:
M
grunt.js
 | 
60
+++++++++++++++++++++++++++++++++++++++++++++++-------------

1 file changed, 47 insertions(+), 13 deletions(-)
diff --git a/grunt.js b/grunt.js
@@ -1,32 +1,66 @@
-function drawText(x,y,text,margin) {
-	margin = (margin == null) ? 10 : margin;
-	var t = r.text(0,0,text);
+Raphael.fn.marginText = function (x,y,text,margin) {
+	margin = isNaN(+margin) ? 10 : margin;
+	var t = this.text(0,0,text);
 	var size = t.getBBox();
-	var marginRect = r.rect(size.x - margin, size.y - margin, size.width + 2*margin, size.height + 2*margin).hide().attr("stroke-width", 0);
-	return r.set().push(t,marginRect).translate(margin+x-size.x, margin+y-size.y);
-}
+	t.translate(margin+x-size.x, margin+y-size.y);
+	// TODO : surcharger les méthodes permettant de faire un set! sur x et y.
+	var getBBox = t.getBBox;
+	t.getBBox = function() {
+		var bBox = getBBox.call(this);
+		bBox.x -= margin;
+		bBox.y -= margin;
+		bBox.width += 2*margin;
+		bBox.height += 2*margin;
+		return bBox
+	};
+	return t;
+};
+
+Raphael.fn.boundingRect = function(margin) {
+	margin = +margin || 0;
+	var set = this.set();
+	set.push.apply(set,arguments);
+	var size = set.getBBox();
+	var rect = this.rect(size.x-margin, size.y-margin, size.width+2*margin, size.height+2*margin);
+	rect.set = set.push(rect);
+	return rect;
+};
 
 function Block(name) {
 	this.name = name;
 	this.draw = function(x,y) {
-		var name = drawText(x,y,this.name);
-		var size = name.getBBox();
-		var block = r.rect(x, y, size.width, 50 + size.height).insertBefore(name).attr({
+		var name = r.text(x,y,this.name);
+		var block = r.boundingRect(10, name).insertBefore(name).attr({
 			stroke: this.borderColor,
 			fill: this.fillColor
 		});
-		return r.set().push(block, name);
+		var start = function () {
+			this.oldDx = 0;
+			this.oldDy = 0;
+			this.attr({opacity: 0.5});
+		};
+		var move = function (dx, dy) {
+			this.translate(dx-this.oldDx, dy-this.oldDy);
+			this.oldDx = dx;
+			this.oldDy = dy;
+		};
+		var up = function () {
+			this.attr({opacity: 1});
+		};
+		block.set.drag(move, start, up, block.set, block.set, block.set);
+		return block.set;
 	};
-}
+};
 
 // Colors
 Block.prototype.borderColor = "#000";
 Block.prototype.fillColor = "#ff8";
 
 function init() {
+	$('noscript').hide();
 	r = Raphael("ide", 640, 480);
-	new Block("Block 1").draw(150, 100);
-	new Block("My pretty block").draw(30, 200);
+	b1 = new Block("Block 1").draw(150, 100);
+	b2 = new Block("My pretty block").draw(30, 200);
 }
 
 new Event.observe(window, 'load', init);