diff options
Diffstat (limited to 'js/stage')
-rw-r--r-- | js/stage/layout.js | 67 | ||||
-rw-r--r-- | js/stage/stage.reel/stage.js | 63 |
2 files changed, 56 insertions, 74 deletions
diff --git a/js/stage/layout.js b/js/stage/layout.js index 625c09ad..dd5be081 100644 --- a/js/stage/layout.js +++ b/js/stage/layout.js | |||
@@ -112,6 +112,7 @@ exports.Layout = Montage.create(Component, { | |||
112 | } | 112 | } |
113 | 113 | ||
114 | this.draw(); // Not a reel yet :) | 114 | this.draw(); // Not a reel yet :) |
115 | this.draw3DInfo(false); | ||
115 | 116 | ||
116 | 117 | ||
117 | } | 118 | } |
@@ -128,9 +129,16 @@ exports.Layout = Montage.create(Component, { | |||
128 | }, | 129 | }, |
129 | 130 | ||
130 | draw3DInfo: { | 131 | draw3DInfo: { |
131 | value: function() { | 132 | value: function(updatePlanes) { |
132 | drawUtils.updatePlanes(); | 133 | if(updatePlanes) |
133 | if(this.stage.appModel.show3dGrid) drawUtils.drawWorkingPlane(); | 134 | { |
135 | drawUtils.updatePlanes(); | ||
136 | } | ||
137 | if(this.stage.appModel.show3dGrid) | ||
138 | { | ||
139 | this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView(); | ||
140 | drawUtils.drawWorkingPlane(); | ||
141 | } | ||
134 | drawUtils.draw3DCompass(); | 142 | drawUtils.draw3DCompass(); |
135 | } | 143 | } |
136 | }, | 144 | }, |
@@ -282,8 +290,9 @@ exports.Layout = Montage.create(Component, { | |||
282 | } | 290 | } |
283 | }, | 291 | }, |
284 | 292 | ||
285 | // Alternate dashed line method. | 293 | // Dashed line function found at http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas/ |
286 | ___dashedLine: { | 294 | // Portions used with permission of Gavin Kistner (phrogz) |
295 | _dashedLine: { | ||
287 | value: function(x, y, x2, y2, dashArray) { | 296 | value: function(x, y, x2, y2, dashArray) { |
288 | this.ctx.lineCap = "square"; | 297 | this.ctx.lineCap = "square"; |
289 | this.ctx.beginPath(); | 298 | this.ctx.beginPath(); |
@@ -303,7 +312,7 @@ exports.Layout = Montage.create(Component, { | |||
303 | var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope)); | 312 | var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope)); |
304 | if(xSlope){ | 313 | if(xSlope){ |
305 | if(dx < 0) step = -step; | 314 | if(dx < 0) step = -step; |
306 | x += step | 315 | x += step; |
307 | y += slope * step; | 316 | y += slope * step; |
308 | }else{ | 317 | }else{ |
309 | if(dy < 0) step = -step; | 318 | if(dy < 0) step = -step; |
@@ -321,52 +330,6 @@ exports.Layout = Montage.create(Component, { | |||
321 | } | 330 | } |
322 | }, | 331 | }, |
323 | 332 | ||
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: { | 333 | _elementName: { |
371 | value: function(item) { | 334 | value: function(item) { |
372 | return this.application.ninja.elementMediator.getNJProperty(item, "selection"); | 335 | 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 | currentDoc.elementModel.props3D.ResetTranslationValues(); | 845 | currentDoc.elementModel.props3D.ResetTranslationValues(); |
821 | currentDoc.elementModel.props3D.ResetRotationValues(); | 846 | currentDoc.elementModel.props3D.ResetRotationValues(); |
822 | 847 | ||
823 | 848 | ||
824 | switch(side) { | 849 | switch(side){ |
825 | case "top": | 850 | case "top": |
826 | mat = Matrix.RotationX(Math.PI * 270.0/180.0); | 851 | mat = Matrix.RotationX(Math.PI * 270.0/180.0); |
827 | |||
828 | drawUtils.drawXY = drawUtils.drawYZ = false; | 852 | drawUtils.drawXY = drawUtils.drawYZ = false; |
829 | drawUtils.drawXZ = drawUtils.isDrawingGrid(); | 853 | drawUtils.drawXZ = isDrawingGrid; |
830 | workingPlane = [0,1,0,0]; | ||
831 | break; | 854 | break; |
832 | 855 | ||
833 | case "side": | 856 | case "side": |
834 | mat = Matrix.RotationY(Math.PI * 270/180); | 857 | mat = Matrix.RotationY(Math.PI * 270/180); |
835 | |||
836 | drawUtils.drawXY = drawUtils.drawXZ = false; | 858 | drawUtils.drawXY = drawUtils.drawXZ = false; |
837 | drawUtils.drawYZ = drawUtils.isDrawingGrid(); | 859 | drawUtils.drawYZ = isDrawingGrid; |
838 | workingPlane = [1,0,0,0]; | ||
839 | break; | 860 | break; |
840 | 861 | ||
841 | case "front": | 862 | case "front": |
842 | mat = Matrix.I(4); | 863 | mat = Matrix.I(4); |
843 | |||
844 | drawUtils.drawYZ = drawUtils.drawXZ = false; | 864 | drawUtils.drawYZ = drawUtils.drawXZ = false; |
845 | drawUtils.drawXY = drawUtils.isDrawingGrid(); | 865 | drawUtils.drawXY = isDrawingGrid; |
846 | workingPlane = [0,0,1,0]; | ||
847 | break; | 866 | break; |
848 | } | 867 | } |
849 | 868 | workingPlane = this.getPlaneForView( side ); | |
850 | 869 | ||
851 | this.stageDeps.viewUtils.setMatrixForElement(currentDoc, mat, false); | 870 | this.stageDeps.viewUtils.setMatrixForElement(currentDoc, mat, false); |
852 | 871 | ||