aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage')
-rw-r--r--js/stage/layout.js86
-rw-r--r--js/stage/stage.reel/stage.js63
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 96bfccdd..6d9a7355 100644
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -176,7 +176,7 @@ exports.Stage = Montage.create(Component, {
176 } 176 }
177 else if(this.updatedStage) { 177 else if(this.updatedStage) {
178 this.layout.draw(); 178 this.layout.draw();
179 this.layout.draw3DInfo(); 179 this.layout.draw3DInfo(true);
180 } 180 }
181 } 181 }
182 }, 182 },
@@ -794,14 +794,9 @@ exports.Stage = Montage.create(Component, {
794 var userContent = this.application.ninja.currentDocument.documentRoot; 794 var userContent = this.application.ninja.currentDocument.documentRoot;
795 if (userContent) 795 if (userContent)
796 { 796 {
797 var w = userContent.offsetWidth, 797 var w = this._canvas.width,
798 h = userContent.offsetHeight; 798 h = this._canvas.height;
799 if(userContent.width) 799 var globalPt = [w/2, h/2, 0];
800 w = userContent.width;
801 if(userContent.height)
802 h = userContent.height;
803 var localPt = [ w/2, h/2, 0];
804 var globalPt = this.stageDeps.viewUtils.localToGlobal( localPt, userContent );
805 800
806 this.stageDeps.viewUtils.setStageZoom( globalPt, value/100 ); 801 this.stageDeps.viewUtils.setStageZoom( globalPt, value/100 );
807 802
@@ -818,42 +813,66 @@ exports.Stage = Montage.create(Component, {
818 } 813 }
819 }, 814 },
820 815
816 getPlaneForView:
817 {
818 value: function( side )
819 {
820 var plane = [0,0,1,0];
821 switch(side)
822 {
823 case "top":
824 plane = [0,1,0,0];
825 plane[3] = this.application.ninja.currentDocument.documentRoot.offsetHeight / 2.0;
826 break;
827
828 case "side":
829 plane = [1,0,0,0];
830 plane[3] = this.application.ninja.currentDocument.documentRoot.offsetWidth / 2.0;
831 break;
832
833 case "front":
834 plane = [0,0,1,0];
835 break;
836
837 default:
838 console.log( "unrecognized view in snapManager.getPlaneForView: " + side );
839 break;
840 }
841
842 return plane;
843 }
844 },
845
821 setStageView: { 846 setStageView: {
822 value: function(side) { 847 value: function(side) {
823 var mat, 848 var mat,
824 workingPlane = null, 849 currentDoc = this.application.ninja.currentDocument.documentRoot,
825 currentDoc = this.application.ninja.currentDocument.documentRoot; 850 isDrawingGrid = this.application.ninja.appModel.show3dGrid;
826 // Stage 3d Props. 851 // Stage 3d Props.
827 currentDoc.elementModel.props3D.ResetTranslationValues(); 852 currentDoc.elementModel.props3D.ResetTranslationValues();
828 currentDoc.elementModel.props3D.ResetRotationValues(); 853 currentDoc.elementModel.props3D.ResetRotationValues();
829 854
830 855
831 switch(side) { 856