aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorValerio Virgillito2012-02-02 15:17:16 -0800
committerValerio Virgillito2012-02-02 15:17:16 -0800
commit54f9f6ebfb495feed695cf12a0f245f535cd3372 (patch)
treef9d4a203c666422e1f906c5de181bc1eb338ed92 /js
parent57836b24aca08de591bece3e5878caaceadf5c57 (diff)
downloadninja-54f9f6ebfb495feed695cf12a0f245f535cd3372.tar.gz
Switching to alternate dashed line function. Adding code attributions.
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
Diffstat (limited to 'js')
-rw-r--r--js/stage/layout.js53
1 files changed, 4 insertions, 49 deletions
diff --git a/js/stage/layout.js b/js/stage/layout.js
index 625c09ad..1e712550 100644
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -282,8 +282,9 @@ exports.Layout = Montage.create(Component, {
282 } 282 }
283 }, 283 },
284 284
285 // Alternate dashed line method. 285 // Dashed line function found at http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas/
286 ___dashedLine: { 286 // Portions used with permission of Gavin Kistner (phrogz)
287 _dashedLine: {
287 value: function(x, y, x2, y2, dashArray) { 288 value: function(x, y, x2, y2, dashArray) {
288 this.ctx.lineCap = "square"; 289 this.ctx.lineCap = "square";
289 this.ctx.beginPath(); 290 this.ctx.beginPath();
@@ -303,7 +304,7 @@ exports.Layout = Montage.create(Component, {
303 var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope)); 304 var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
304 if(xSlope){ 305 if(xSlope){
305 if(dx < 0) step = -step; 306 if(dx < 0) step = -step;
306 x += step 307 x += step;
307 y += slope * step; 308 y += slope * step;
308 }else{ 309 }else{
309 if(dy < 0) step = -step; 310 if(dy < 0) step = -step;
@@ -321,52 +322,6 @@ exports.Layout = Montage.create(Component, {
321 } 322 }
322 }, 323 },
323 324
324 _dashedLine: {
325 value: function (fromX, fromY, toX, toY, pattern){
326 this.ctx.beginPath();
327 // Our growth rate for our line can be one of the following:
328 // (+,+), (+,-), (-,+), (-,-)
329 // Because of this, our algorithm needs to understand if the x-coord and
330 // y-coord should be getting smaller or larger and properly cap the values
331 // based on (x,y).
332 var lt = function (a, b) { return a <= b; };
333 var gt = function (a, b) { return a >= b; };
334 var capmin = function (a, b) { return Math.min(a, b); };
335 var capmax = function (a, b) { return Math.max(a, b); };
336
337 var checkX = { thereYet: gt, cap: capmin };
338 var checkY = { thereYet: gt, cap: capmin };
339
340 if (fromY - toY > 0) {
341 checkY.thereYet = lt;
342 checkY.cap = capmax;
343 }
344 if (fromX - toX > 0) {
345 checkX.thereYet = lt;
346 checkX.cap = capmax;
347 }
348
349 this.ctx.moveTo(fromX, fromY);
350 var offsetX = fromX;
351 var offsetY = fromY;
352 var idx = 0, dash = true;
353 while (!(checkX.thereYet(offsetX, toX) && checkY.thereYet(offsetY, toY))) {
354 var ang = Math.atan2(toY - fromY, toX - fromX);
355 var len = pattern[idx];
356
357 offsetX = checkX.cap(toX, offsetX + (Math.cos(ang) * len));
358 offsetY = checkY.cap(toY, offsetY + (Math.sin(ang) * len));
359
360 if (dash) this.ctx.lineTo(offsetX, offsetY);
361 else this.ctx.moveTo(offsetX, offsetY);
362
363 idx = (idx + 1) % pattern.length;
364 dash = !dash;
365 }
366 this.ctx.stroke();
367 }
368 },
369
370 _elementName: { 325 _elementName: {
371 value: function(item) { 326 value: function(item) {
372 return this.application.ninja.elementMediator.getNJProperty(item, "selection"); 327 return this.application.ninja.elementMediator.getNJProperty(item, "selection");