diff options
author | Armen Kesablyan | 2012-02-07 16:51:14 -0800 |
---|---|---|
committer | Armen Kesablyan | 2012-02-07 16:51:14 -0800 |
commit | 8110e01dc5093ac6baf621103dcaa5f769e5be92 (patch) | |
tree | ecf339e3097b6ba25d81cbe44d913ee67591bf4b /js/stage | |
parent | 5f506542d28e12b707c3bfa41b53383519838477 (diff) | |
parent | 668510892537eaaeb2e11520831d87b44b2489b7 (diff) | |
download | ninja-8110e01dc5093ac6baf621103dcaa5f769e5be92.tar.gz |
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal
Diffstat (limited to 'js/stage')
-rw-r--r-- | js/stage/layout.js | 86 | ||||
-rw-r--r-- | js/stage/stage.reel/stage.js | 63 |
2 files changed, 64 insertions, 85 deletions
diff --git a/js/stage/layout.js b/js/stage/layout.js index 625c09ad..1a491210 100644 --- a/js/stage/layout.js +++ b/js/stage/layout.js | |||
@@ -58,7 +58,7 @@ exports.Layout = Montage.create(Component, { | |||
58 | 58 | ||
59 | this.eventManager.addEventListener("selectionChange", this, false); | 59 | this.eventManager.addEventListener("selectionChange", this, false); |
60 | 60 | ||
61 | this.eventManager.addEventListener("deleteSelection", this, true); | 61 | this.eventManager.addEventListener("deleteSelection", this, false); |
62 | 62 | ||
63 | // this.addEventListener("change@stage.appModel.layoutView", this.handleLayoutView, false); | 63 | // this.addEventListener("change@stage.appModel.layoutView", this.handleLayoutView, false); |
64 | 64 | ||
@@ -74,26 +74,23 @@ exports.Layout = Montage.create(Component, { | |||
74 | handleElementAdded: { | 74 | handleElementAdded: { |
75 | value: function(event) { | 75 | value: function(event) { |
76 | this.domTree.push(event.detail); | 76 | this.domTree.push(event.detail); |
77 | |||
78 | this.draw(); | ||
79 | this.draw3DInfo(false); | ||
77 | } | 80 | } |
78 | }, | 81 | }, |
79 | 82 | ||
80 | handleElementDeleted: { | 83 | handleElementDeleted: { |
81 | value: function(event) { | 84 | value: function(event) { |
82 | this.domTree.splice(this.domTree.indexOf(event.detail), 1); | 85 | this.domTree.splice(this.domTree.indexOf(event.detail), 1); |
83 | |||
84 | this.draw(); | ||
85 | } | 86 | } |
86 | }, | 87 | }, |
87 | 88 | ||
88 | captureDeleteSelection: { | 89 | // Redraw stage only once after all deletion is completed |
90 | handleDeleteSelection: { | ||
89 | value: function(event) { | 91 | value: function(event) { |
90 | //this.redrawDocument(); | 92 | this.draw(); |
91 | 93 | this.draw3DInfo(false); | |
92 | var len = event.detail.length; | ||
93 | for(var i = 0; i < len ; i++) { | ||
94 | this.domTree.splice(this.domTree.indexOf(event.detail[i]),1); | ||
95 | } | ||
96 | |||
97 | } | 94 | } |
98 | }, | 95 | }, |
99 | 96 | ||
@@ -112,6 +109,7 @@ exports.Layout = Montage.create(Component, { | |||
112 | } | 109 | } |
113 | 110 | ||
114 | this.draw(); // Not a reel yet :) | 111 | this.draw(); // Not a reel yet :) |
112 | this.draw3DInfo(false); | ||
115 | 113 | ||
116 | 114 | ||
117 | } | 115 | } |
@@ -128,9 +126,16 @@ exports.Layout = Montage.create(Component, { | |||
128 | }, | 126 | }, |
129 | 127 | ||
130 | draw3DInfo: { | 128 | draw3DInfo: { |
131 | value: function() { | 129 | value: function(updatePlanes) { |
132 | drawUtils.updatePlanes(); | 130 | if(updatePlanes) |
133 | if(this.stage.appModel.show3dGrid) drawUtils.drawWorkingPlane(); | 131 | { |
132 | drawUtils.updatePlanes(); | ||
133 | } | ||
134 | if(this.stage.appModel.show3dGrid) | ||
135 | { | ||
136 | this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView(); | ||
137 | drawUtils.drawWorkingPlane(); | ||
138 | } | ||
134 | drawUtils.draw3DCompass(); | 139 | drawUtils.draw3DCompass(); |
135 | } | 140 | } |
136 | }, | 141 | }, |
@@ -282,8 +287,9 @@ exports.Layout = Montage.create(Component, { | |||
282 | } | 287 | } |
283 | }, | 288 | }, |
284 | 289 | ||
285 | // Alternate dashed line method. | 290 | // Dashed line function found at http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas/ |
286 | ___dashedLine: { | 291 | // Portions used with permission of Gavin Kistner (phrogz) |
292 | _dashedLine: { | ||
287 | value: function(x, y, x2, y2, dashArray) { | 293 | value: function(x, y, x2, y2, dashArray) { |
288 | this.ctx.lineCap = "square"; | 294 | this.ctx.lineCap = "square"; |
289 | this.ctx.beginPath(); | 295 | this.ctx.beginPath(); |
@@ -303,7 +309,7 @@ exports.Layout = Montage.create(Component, { | |||
303 | var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope)); | 309 | var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope)); |
304 | if(xSlope){ | 310 | if(xSlope){ |
305 | if(dx < 0) step = -step; | 311 | if(dx < 0) step = -step; |
306 | x += step | 312 | x += step; |
307 | y += slope * step; | 313 | y += slope * step; |
308 | }else{ | 314 | }else{ |
309 | if(dy < 0) step = -step; | 315 | if(dy < 0) step = -step; |
@@ -321,52 +327,6 @@ exports.Layout = Montage.create(Component, { | |||
321 | } | 327 | } |
322 | }, | 328 | }, |
323 | 329 | ||
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: { | 330 | _elementName: { |
371 | value: function(item) { | 331 | value: function(item) { |
372 | return this.application.ninja.elementMediator.getNJProperty(item, "selection"); | 332 | return this.application.ninja.elementMediator.getNJProperty(item, "selection"); |
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 3e0b852e..9e2df5a2 100644 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -175,7 +175,7 @@ exports.Stage = Montage.create(Component, { | |||
175 | } | 175 | } |
176 | else if(this.updatedStage) { | 176 | else if(this.updatedStage) { |
177 | this.layout.draw(); | 177 | this.layout.draw(); |
178 | this.layout.draw3DInfo(); | 178 | this.layout.draw3DInfo(true); |
179 | } | 179 | } |
180 | } | 180 | } |
181 | }, | 181 | }, |
@@ -787,14 +787,9 @@ exports.Stage = Montage.create(Component, { | |||
787 | var userContent = this.application.ninja.currentDocument.documentRoot; | 787 | var userContent = this.application.ninja.currentDocument.documentRoot; |
788 | if (userContent) | 788 | if (userContent) |
789 | { | 789 | { |
790 | var w = userContent.offsetWidth, | 790 | var w = this._canvas.width, |
791 | h = userContent.offsetHeight; | 791 | h = this._canvas.height; |
792 | if(userContent.width) | 792 | var globalPt = [w/2, h/2, 0]; |
793 | w = userContent.width; | ||
794 | if(userContent.height) | ||
795 | h = userContent.height; | ||
796 | var localPt = [ w/2, h/2, 0]; | ||
797 | var globalPt = this.stageDeps.viewUtils.localToGlobal( localPt, userContent ); | ||
798 | 793 | ||
799 | this.stageDeps.viewUtils.setStageZoom( globalPt, value/100 ); | 794 | this.stageDeps.viewUtils.setStageZoom( globalPt, value/100 ); |
800 | 795 | ||
@@ -811,42 +806,66 @@ exports.Stage = Montage.create(Component, { | |||
811 | } | 806 | } |
812 | }, | 807 | }, |
813 | 808 | ||
809 | getPlaneForView: | ||
810 | { | ||
811 | value: function( side ) | ||
812 | { | ||
813 | var plane = [0,0,1,0]; | ||
814 | switch(side) | ||
815 | { | ||
816 | case "top": | ||
817 | plane = [0,1,0,0]; | ||
818 | plane[3] = this.application.ninja.currentDocument.documentRoot.offsetHeight / 2.0; | ||
819 | break; | ||
820 | |||
821 | case "side": | ||
822 | plane = [1,0,0,0]; | ||
823 | plane[3] = this.application.ninja.currentDocument.documentRoot.offsetWidth / 2.0; | ||
824 | break; | ||
825 | |||
826 | case "front": | ||
827 | plane = [0,0,1,0]; | ||
828 | break; | ||
829 | |||
830 | default: | ||
831 | console.log( "unrecognized view in snapManager.getPlaneForView: " + side ); | ||
832 | break; | ||
833 | } | ||
834 | |||
835 | return plane; | ||
836 | } | ||
837 | }, | ||
838 | |||
814 | setStageView: { | 839 | setStageView: { |
815 | value: function(side) { | 840 | value: function(side) { |
816 | var mat, | 841 | var mat, |
817 | workingPlane = null, | 842 | currentDoc = this.application.ninja.currentDocument.documentRoot, |
818 | currentDoc = this.application.ninja.currentDocument.documentRoot; | 843 | isDrawingGrid = this.application.ninja.appModel.show3dGrid; |
819 | // Stage 3d Props. | 844 | // Stage 3d Props. |
820 |