Init

.gitignore

@@ -0,0 +1 @@
+.idea/

canvas.html

@@ -44,10 +44,10 @@
 
 	<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
 	<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
-<!--	<script src="model.js" type="text/javascript"></script>-->
-<!--	<script src="view.js" type="text/javascript"></script>-->
+	<script src="model.js" type="text/javascript"></script>
+	<script src="view.js" type="text/javascript"></script>
 	<script src="interaction.js" type="text/javascript"></script>
-<!--   <script src="controller.js" type="text/javascript"></script>-->
-   <script src="main.js" type="text/javascript"></script>
+	<script src="controller.js" type="text/javascript"></script>
+	<script src="main.js" type="text/javascript"></script>
   </body>
 </html>

controller.js

@@ -2,16 +2,76 @@
 var editingMode = { rect: 0, line: 1 };
 
 function Pencil(ctx, drawing, canvas) {
-	this.currEditingMode = editingMode.line;
+	this.ctx = ctx;
+	this.drawing = drawing;
+	this.canvas = canvas;
+	this.currEditingMode = editingMode.rect;
 	this.currLineWidth = 5;
 	this.currColour = '#000000';
-	this.currentShape = 0;
+	this.currentShape = null;
 
-	// Liez ici les widgets à la classe pour modifier les attributs présents ci-dessus.
+	// Liaison des widgets aux attributs du Pencil
+	document.getElementById('butRect').addEventListener('change', function() {
+		this.currEditingMode = editingMode.rect;
+	}.bind(this));
+
+	document.getElementById('butLine').addEventListener('change', function() {
+		this.currEditingMode = editingMode.line;
+	}.bind(this));
+
+	document.getElementById('spinnerWidth').addEventListener('change', function(evt) {
+		this.currLineWidth = parseInt(evt.target.value);
+	}.bind(this));
+
+	document.getElementById('colour').addEventListener('change', function(evt) {
+		this.currColour = evt.target.value;
+	}.bind(this));
 
 	new DnD(canvas, this);
+}
 
-	// Implémentez ici les 3 fonctions onInteractionStart, onInteractionUpdate et onInteractionEnd
+Pencil.prototype.onInteractionStart = function(dnd) {
+	switch (this.currEditingMode) {
+		case editingMode.rect:
+			this.currentShape = new Rectangle(dnd.initX, dnd.initY, 0, 0, this.currLineWidth, this.currColour);
+			break;
+		case editingMode.line:
+			this.currentShape = new Line(dnd.initX, dnd.initY, dnd.initX, dnd.initY, this.currLineWidth, this.currColour);
+			break;
+	}
+	this.drawing.paint(this.ctx, this.canvas);
 };
 
+Pencil.prototype.onInteractionUpdate = function(dnd) {
+	if (!this.currentShape) return;
+	switch (this.currEditingMode) {
+		case editingMode.rect:
+			this.currentShape.setWidth(dnd.finalX - this.currentShape.getInitX());
+			this.currentShape.setHeight(dnd.finalY - this.currentShape.getInitY());
+			break;
+		case editingMode.line:
+			this.currentShape.setX2(dnd.finalX);
+			this.currentShape.setY2(dnd.finalY);
+			break;
+	}
+	// Redessiner le dessin existant puis la forme en cours
+	this.drawing.paint(this.ctx, this.canvas);
+	this.currentShape.paint(this.ctx);
+};
 
+Pencil.prototype.onInteractionEnd = function(dnd) {
+	if (!this.currentShape) return;
+	switch (this.currEditingMode) {
+		case editingMode.rect:
+			this.currentShape.setWidth(dnd.finalX - this.currentShape.getInitX());
+			this.currentShape.setHeight(dnd.finalY - this.currentShape.getInitY());
+			break;
+		case editingMode.line:
+			this.currentShape.setX2(dnd.finalX);
+			this.currentShape.setY2(dnd.finalY);
+			break;
+	}
+	this.drawing.addForm(this.currentShape);
+	this.currentShape = null;
+	this.drawing.paint(this.ctx, this.canvas);
+};

interaction.js

@@ -2,11 +2,43 @@
 // La création d'un Dnd requière un canvas et un interacteur.
 // L'interacteur viendra dans un second temps donc ne vous en souciez pas au départ.
 function DnD(canvas, interactor) {
-	// Définir ici les attributs de la 'classe'
-
-	// Developper les 3 fonctions gérant les événements
-
-	// Associer les fonctions précédentes aux évènements du canvas.
+	this.initX = 0;
+	this.initY = 0;
+	this.finalX = 0;
+	this.finalY = 0;
+	this.pressed = false;
+
+	this.onMouseDown = function(evt) {
+		var pos = getMousePosition(canvas, evt);
+		this.pressed = true;
+		this.initX = pos.x;
+		this.initY = pos.y;
+		console.log("mousedown:", pos.x, pos.y);
+		if (interactor) interactor.onInteractionStart(this);
+	}.bind(this);
+
+	this.onMouseMove = function(evt) {
+		if (!this.pressed) return;
+		var pos = getMousePosition(canvas, evt);
+		this.finalX = pos.x;
+		this.finalY = pos.y;
+		console.log("mousemove:", pos.x, pos.y);
+		if (interactor) interactor.onInteractionUpdate(this);
+	}.bind(this);
+
+	this.onMouseUp = function(evt) {
+		if (!this.pressed) return;
+		var pos = getMousePosition(canvas, evt);
+		this.pressed = false;
+		this.finalX = pos.x;
+		this.finalY = pos.y;
+		console.log("mouseup:", pos.x, pos.y);
+		if (interactor) interactor.onInteractionEnd(this);
+	}.bind(this);
+
+	canvas.addEventListener('mousedown', this.onMouseDown, false);
+	canvas.addEventListener('mousemove', this.onMouseMove, false);
+	canvas.addEventListener('mouseup', this.onMouseUp, false);
 };
 
 
@@ -18,6 +50,3 @@ function getMousePosition(canvas, evt) {
     y: evt.clientY - rect.top
   };
 };
-
-
-

main.js

@@ -2,25 +2,9 @@
 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');
 
-canvas.width=800
-canvas.height=600
-
-// Code temporaire pour tester le DnD
-new DnD(canvas);
-ctx.fillStyle = '#F0F0F0'; // set canvas' background color
-ctx.fillRect(0, 0, canvas.width, canvas.height);  // now fill the canvas
-/////
-
-// Code temporaire pour tester l'affiche de la vue
-//var rec = new Rectangle(10, 20, 50, 100, 5, '#00CCC0');
-//rec.paint(ctx);
-//var ligne = new Rectangle(10, 20, 50, 100, 5, '#00CCC0');
-//ligne.paint(ctx);
-// tester également Dessin.
-////
-
-// Code final à utiliser pour manipuler Pencil.
-//var drawing = new Drawing();
-//var pencil = new Pencil(ctx, drawing, canvas);
-//drawing.paint(ctx, canvas);
+canvas.width = 800;
+canvas.height = 600;
 
+var drawing = new Drawing();
+var pencil = new Pencil(ctx, drawing, canvas);
+drawing.paint(ctx, canvas);

model.js

@@ -1,3 +1,54 @@
 
-// Implémenter ici les 4 classes du modèle.
-// N'oubliez pas l'héritage !
+// Classe de base : Shape
+function Shape(lineWidth, colour) {
+	this.lineWidth = lineWidth;
+	this.colour = colour;
+}
+
+// Classe Rectangle
+function Rectangle(initX, initY, width, height, lineWidth, colour) {
+	Shape.call(this, lineWidth, colour);
+	this.initX = initX;
+	this.initY = initY;
+	this.width = width;
+	this.height = height;
+}
+Rectangle.prototype = new Shape();
+
+Rectangle.prototype.getInitX = function() { return this.initX; };
+Rectangle.prototype.getInitY = function() { return this.initY; };
+Rectangle.prototype.getWidth  = function() { return this.width; };
+Rectangle.prototype.getHeight = function() { return this.height; };
+Rectangle.prototype.setWidth  = function(w) { this.width = w; };
+Rectangle.prototype.setHeight = function(h) { this.height = h; };
+
+// Classe Line
+function Line(x1, y1, x2, y2, lineWidth, colour) {
+	Shape.call(this, lineWidth, colour);
+	this.x1 = x1;
+	this.y1 = y1;
+	this.x2 = x2;
+	this.y2 = y2;
+}
+Line.prototype = new Shape();
+
+Line.prototype.getX1 = function() { return this.x1; };
+Line.prototype.getY1 = function() { return this.y1; };
+Line.prototype.getX2 = function() { return this.x2; };
+Line.prototype.getY2 = function() { return this.y2; };
+Line.prototype.setX2 = function(x) { this.x2 = x; };
+Line.prototype.setY2 = function(y) { this.y2 = y; };
+
+// Classe Drawing
+function Drawing() {
+	this.forms = new Array();
+}
+
+Drawing.prototype.getForms = function() { return this.forms; };
+
+Drawing.prototype.addForm = function(form) { this.forms.push(form); };
+
+Drawing.prototype.removeForm = function(form) {
+	var idx = this.forms.indexOf(form);
+	if (idx > -1) this.forms.splice(idx, 1);
+};

view.js

@@ -1,2 +1,30 @@
 
-// Implémenter ici les fonctions paint à ajouter dans chacune des classes du modèle.
+// Fonctions paint ajoutées aux classes du modèle.
+
+Shape.prototype.paint = function(ctx) {
+	ctx.strokeStyle = this.colour;
+	ctx.lineWidth = this.lineWidth;
+};
+
+Rectangle.prototype.paint = function(ctx) {
+	Shape.prototype.paint.call(this, ctx);
+	ctx.beginPath();
+	ctx.rect(this.getInitX(), this.getInitY(), this.getWidth(), this.getHeight());
+	ctx.stroke();
+};
+
+Line.prototype.paint = function(ctx) {
+	Shape.prototype.paint.call(this, ctx);
+	ctx.beginPath();
+	ctx.moveTo(this.getX1(), this.getY1());
+	ctx.lineTo(this.getX2(), this.getY2());
+	ctx.stroke();
+};
+
+Drawing.prototype.paint = function(ctx, canvas) {
+	ctx.fillStyle = '#F0F0F0';
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	this.getForms().forEach(function(shape) {
+		shape.paint(ctx);
+	});
+};