1 /*
  2  * © 2009 ROBO Design
  3  * http://www.robodesign.ro
  4  *
  5  * $Date: 2009-04-21 14:47:43 +0300 $
  6  */
  7 
  8 /**
  9  * @author <a lang="ro" href="http://www.robodesign.ro/mihai">Mihai Şucan</a>
 10  * @fileOverview The drawing tools for the paint application.
 11  */
 12 
 13 /**
 14  * Holds the implementation of each drawing tool.
 15  */
 16 var PaintTools = {};
 17 
 18 /**
 19  * @class The drawing pencil.
 20  *
 21  * @param {Painter} app Reference to the main paint application object.
 22  */
 23 PaintTools.pencil = function (app) {
 24   var _self   = this,
 25       context = app.buffer.context,
 26       update  = app.layerUpdate;
 27 
 28   /**
 29    * Tells if the user has started the drawing operation or not.
 30    *
 31    * @private
 32    * @type Boolean
 33    */
 34   var started = false;
 35 
 36   /**
 37    * Initialize the drawing operation.
 38    *
 39    * @param {Event} ev The DOM Event object.
 40    */
 41   this.mousedown = function (ev) {
 42     context.beginPath();
 43     context.moveTo(ev.x_, ev.y_);
 44     started = true;
 45   };
 46 
 47   /**
 48    * Perform the drawing operation, while the user moves the mouse.
 49    *
 50    * @param {Event} ev The DOM Event object.
 51    */
 52   this.mousemove = function (ev) {
 53     if (started) {
 54       context.lineTo(ev.x_, ev.y_);
 55       context.stroke();
 56     }
 57   };
 58 
 59   /**
 60    * End the drawing operation, once the user releases the mouse button.
 61    *
 62    * @param {Event} ev The DOM Event object.
 63    */
 64   this.mouseup = function (ev) {
 65     if (started) {
 66       _self.mousemove(ev);
 67       context.closePath();
 68       update();
 69       started = false;
 70     }
 71   };
 72 };
 73 
 74 /**
 75  * @class The rectangle tool.
 76  *
 77  * @param {Painter} app Reference to the main paint application object.
 78  */
 79 PaintTools.rect = function (app) {
 80   var _self   = this,
 81       context = app.buffer.context,
 82       canvas  = app.buffer.canvas,
 83       update  = app.layerUpdate;
 84 
 85   /**
 86    * Tells if the user has started the drawing operation or not.
 87    *
 88    * @private
 89    * @type Boolean
 90    */
 91   var started = false;
 92 
 93   /**
 94    * Holds the starting point on the <var>x</var> axis of the image, for the 
 95    * current drawing operation.
 96    *
 97    * @private
 98    * @type Number
 99    */
100   var x0 = 0;
101 
102   /**
103    * Holds the starting point on the <var>y</var> axis of the image, for the 
104    * current drawing operation.
105    *
106    * @private
107    * @type Number
108    */
109   var y0 = 0;
110 
111   /**
112    * Initialize the drawing operation, by storing the location of the pointer, 
113    * the start position.
114    *
115    * @param {Event} ev The DOM Event object.
116    */
117   this.mousedown = function (ev) {
118     started = true;
119     x0 = ev.x_;
120     y0 = ev.y_;
121   };
122 
123   /**
124    * Perform the drawing operation, while the user moves the mouse.
125    *
126    * @param {Event} ev The DOM Event object.
127    */
128   this.mousemove = function (ev) {
129     if (!started) {
130       return;
131     }
132 
133     var x = Math.min(ev.x_,  x0),
134         y = Math.min(ev.y_,  y0),
135         w = Math.abs(ev.x_ - x0),
136         h = Math.abs(ev.y_ - y0);
137 
138     context.clearRect(0, 0, canvas.width, canvas.height);
139 
140     if (!w || !h) {
141       return;
142     }
143 
144     context.strokeRect(x, y, w, h);
145   };
146 
147   /**
148    * End the drawing operation, once the user releases the mouse button.
149    *
150    * @param {Event} ev The DOM Event object.
151    */
152   this.mouseup = function (ev) {
153     if (started) {
154       _self.mousemove(ev);
155       update();
156       started = false;
157     }
158   };
159 };
160 
161 /**
162  * @class The line tool.
163  *
164  * @param {Painter} app Reference to the main paint application object.
165  */
166 PaintTools.line = function (app) {
167   var _self   = this,
168       context = app.buffer.context,
169       canvas  = app.buffer.canvas,
170       update  = app.layerUpdate;
171 
172   /**
173    * Tells if the user has started the drawing operation or not.
174    *
175    * @private
176    * @type Boolean
177    */
178   var started = false;
179 
180   /**
181    * Holds the starting point on the <var>x</var> axis of the image, for the 
182    * current drawing operation.
183    *
184    * @private
185    * @type Number
186    */
187   var x0 = 0;
188 
189   /**
190    * Holds the starting point on the <var>y</var> axis of the image, for the 
191    * current drawing operation.
192    *
193    * @private
194    * @type Number
195    */
196   var y0 = 0;
197 
198   /**
199    * Initialize the drawing operation, by storing the location of the pointer, 
200    * the start position.
201    *
202    * @param {Event} ev The DOM Event object.
203    */
204   this.mousedown = function (ev) {
205     started = true;
206     x0 = ev.x_;
207     y0 = ev.y_;
208   };
209 
210   /**
211    * Perform the drawing operation, while the user moves the mouse.
212    *
213    * @param {Event} ev The DOM Event object.
214    */
215   this.mousemove = function (ev) {
216     if (!started) {
217       return;
218     }
219 
220     context.clearRect(0, 0, canvas.width, canvas.height);
221 
222     context.beginPath();
223     context.moveTo(x0, y0);
224     context.lineTo(ev.x_, ev.y_);
225     context.stroke();
226     context.closePath();
227   };
228 
229   /**
230    * End the drawing operation, once the user releases the mouse button.
231    *
232    * @param {Event} ev The DOM Event object.
233    */
234   this.mouseup = function (ev) {
235     if (started) {
236       _self.mousemove(ev);
237       update();
238       started = false;
239     }
240   };
241 };
242 
243 // vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
244