diff options
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 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 | ||