aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-02-21 18:04:27 -0800
committerJose Antonio Marquez2012-02-21 18:04:27 -0800
commit25e6a03cf8af4bd0496a8b21c82332d76ddd9fff (patch)
tree9b4ef3a716139d5259261cae97e8603a1d33a91f /js/stage
parent20dc41e571ddec6b781653fac43e2ca34026937d (diff)
parent2f24dafec79583547fe663d5a387d8ef15aae3bf (diff)
downloadninja-25e6a03cf8af4bd0496a8b21c82332d76ddd9fff.tar.gz
Merge branch 'refs/heads/NinjaInternal' into Color
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/layout.js29
-rwxr-xr-xjs/stage/stage-view.reel/stage-view.js4
-rwxr-xr-xjs/stage/stage.reel/stage.html2
-rwxr-xr-xjs/stage/stage.reel/stage.js59
4 files changed, 52 insertions, 42 deletions
diff --git a/js/stage/layout.js b/js/stage/layout.js
index 1a491210..56bb70bf 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -195,11 +195,30 @@ exports.Layout = Montage.create(Component, {
195 bounds3D[j] = tmpPt; 195 bounds3D[j] = tmpPt;
196 } 196 }
197 197
198 // Draw the Item ouline 198 if(item.uuid === this.application.ninja.currentSelectedContainer.uuid) {
199 this._dashedLine(bounds3D[3][0] - 0.5,bounds3D[3][1]- 0.5,bounds3D[0][0] + 2.5, bounds3D[0][1] - 0.5,[5,5]); 199 this.ctx.save();
200 this._dashedLine(bounds3D[0][0] - 0.5, bounds3D[0][1] - 0.5, bounds3D[1][0]- 0.5, bounds3D[1][1] + 0.5, [5,5] ); 200 this.ctx.strokeStyle = "#C61F00";
201 this._dashedLine(bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5, bounds3D[2][0]+ 0.5, bounds3D[2][1] + 0.5, [5,5] ); 201
202 this._dashedLine(bounds3D[2][0] + 0.5, bounds3D[2][1] + 0.5, bounds3D[3][0] + 0.5, bounds3D[3][1] - 0.5, [5,5] ); 202 this.ctx.beginPath();
203
204 this.ctx.moveTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] - 0.5 );
205
206 this.ctx.lineTo( bounds3D[0][0] - 0.5 , bounds3D[0][1] - 0.5 );
207 this.ctx.lineTo( bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5 );
208 this.ctx.lineTo( bounds3D[2][0] + 0.5 , bounds3D[2][1] + 0.5 );
209 this.ctx.lineTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] + 0.5 );
210
211 this.ctx.closePath();
212 this.ctx.stroke();
213
214 this.ctx.restore();
215 } else {
216 // Draw the Item ouline
217 this._dashedLine(bounds3D[3][0] - 0.5,bounds3D[3][1]- 0.5,bounds3D[0][0] + 2.5, bounds3D[0][1] - 0.5,[5,5]);
218 this._dashedLine(bounds3D[0][0] - 0.5, bounds3D[0][1] - 0.5, bounds3D[1][0]- 0.5, bounds3D[1][1] + 0.5, [5,5] );
219 this._dashedLine(bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5, bounds3D[2][0]+ 0.5, bounds3D[2][1] + 0.5, [5,5] );
220 this._dashedLine(bounds3D[2][0] + 0.5, bounds3D[2][1] + 0.5, bounds3D[3][0] + 0.5, bounds3D[3][1] - 0.5, [5,5] );
221 }
203 222
204 // Draw the Label is all mode 223 // Draw the Label is all mode
205 if(this.layoutView === "layoutAll") { 224 if(this.layoutView === "layoutAll") {
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index 46d74e13..dc9980f0 100755
--- a/js/stage/stage-view.reel/stage-view.js
+++ b/js/stage/stage-view.reel/stage-view.js
@@ -98,9 +98,9 @@ exports.StageView = Montage.create(Component, {
98 onChange: function(){ 98 onChange: function(){
99 var historySize = doc.editor.historySize(); 99 var historySize = doc.editor.historySize();
100 if(historySize.undo>0){ 100 if(historySize.undo>0){
101 doc.dirtyFlag=true; 101 doc.needsSave = true;
102 }else if(historySize.undo===0 && historySize.redo>0){ 102 }else if(historySize.undo===0 && historySize.redo>0){
103 doc.dirtyFlag=false; 103 doc.needsSave = false;
104 } 104 }
105 }, 105 },
106 onCursorActivity: function() { 106 onCursorActivity: function() {
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 9ed0f636..812e3d55 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -82,7 +82,7 @@
82 <section id="stageAndScenesContainer" class="stageAndScenesContainer"> 82 <section id="stageAndScenesContainer" class="stageAndScenesContainer">
83 <section id="stageView"></section> 83 <section id="stageView"></section>
84 <section id="iframeContainer"></section> 84 <section id="iframeContainer"></section>
85 <section id="textToolObject">asdasd asd asd asd asd asd </section> 85 <section id="textToolObject"></section>
86 <canvas id="layoutCanvas"></canvas> 86 <canvas id="layoutCanvas"></canvas>
87 <canvas id="stageCanvas"></canvas> 87 <canvas id="stageCanvas"></canvas>
88 <canvas id="drawingCanvas"></canvas> 88 <canvas id="drawingCanvas"></canvas>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 59eb9317..44e14827 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -19,8 +19,6 @@ exports.Stage = Montage.create(Component, {
19 zoomFactor: {value : 1 }, 19 zoomFactor: {value : 1 },
20 20
21 _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, 21 _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
22 _editSymbolPrefs: { value: { "thickness" : 2.0, "color" : "#C61F00" } },
23
24 _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, 22 _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } },
25 drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } }, 23 drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } },
26 24
@@ -201,6 +199,7 @@ exports.Stage = Montage.create(Component, {
201 this._drawingCanvas.addEventListener("mousedown", this, false); 199 this._drawingCanvas.addEventListener("mousedown", this, false);
202 this._drawingCanvas.addEventListener("mouseup", this, false); 200 this._drawingCanvas.addEventListener("mouseup", this, false);
203 this._drawingCanvas.addEventListener("dblclick", this, false); 201 this._drawingCanvas.addEventListener("dblclick", this, false);
202 this._drawingCanvas.addEventListener("mousewheel", this, false);
204 203
205 // Hide the canvas 204 // Hide the canvas
206 this.hideCanvas(true); 205 this.hideCanvas(true);
@@ -259,7 +258,6 @@ exports.Stage = Montage.create(Component, {
259 this.application.ninja.toolsData.selectedToolInstance._configure(true); 258 this.application.ninja.toolsData.selectedToolInstance._configure(true);
260 259
261 this.addEventListener("change@appModel.show3dGrid", this, false); 260 this.addEventListener("change@appModel.show3dGrid", this, false);
262
263 } 261 }
264 }, 262 },
265 263
@@ -360,6 +358,16 @@ exports.Stage = Montage.create(Component, {
360 } 358 }
361 }, 359 },
362 360
361 handleMousewheel: {
362 value: function(event) {
363 if(event._event.wheelDelta > 0) {
364 this._iframeContainer.scrollTop -= 20;
365 } else {
366 this._iframeContainer.scrollTop += 20;
367 }
368 }
369 },
370
363 /** 371 /**
364 * Enables the MouseMove on Canvas 372 * Enables the MouseMove on Canvas
365 */ 373 */
@@ -522,8 +530,7 @@ exports.Stage = Montage.create(Component, {
522 drawUtils.updatePlanes(); 530 drawUtils.updatePlanes();
523 531
524 //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change 532 //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change
525 if(this.application.ninja.selectedElements.length) 533 if(this.application.ninja.selectedElements.length) {
526 {
527 // drawUtils.drawSelectionBounds handles the single selection case as well, 534 // drawUtils.drawSelectionBounds handles the single selection case as well,
528 // so we don't have to special-case the single selection case. 535 // so we don't have to special-case the single selection case.
529 // TODO drawUtils.drawSelectionBounds expects an array of elements. 536 // TODO drawUtils.drawSelectionBounds expects an array of elements.
@@ -531,8 +538,7 @@ exports.Stage = Montage.create(Component, {
531 // TODO to work on _element instead of re-creating a new Array here. 538 // TODO to work on _element instead of re-creating a new Array here.
532 var selArray = new Array(); 539 var selArray = new Array();
533 540
534 for(var i = 0; this.application.ninja.selectedElements[i];i++) 541 for(var i = 0; this.application.ninja.selectedElements[i];i++) {
535 {
536 var curElement = this.application.ninja.selectedElements[i]._element; 542 var curElement = this.application.ninja.selectedElements[i]._element;
537 543
538 // Add element to array that is used to calculate 3d-bounding box of all elements 544 // Add element to array that is used to calculate 3d-bounding box of all elements
@@ -565,7 +571,7 @@ exports.Stage = Montage.create(Component, {
565 * @params: x, y, w, h 571 * @params: x, y, w, h
566 */ 572 */
567 draw3DSelectionRectangle: { 573 draw3DSelectionRectangle: {
568 value:function(x0,y0, x1,y1, x2,y2, x3,y3){ 574 value:function(x0,y0, x1,y1, x2,y2, x3,y3) {
569// this.clearCanvas(); 575// this.clearCanvas();
570 this.clearDrawingCanvas(); 576 this.clearDrawingCanvas();
571 this._drawingContext.strokeStyle = this._canvasDrawingPrefs.color; 577 this._drawingContext.strokeStyle = this._canvasDrawingPrefs.color;
@@ -610,7 +616,7 @@ exports.Stage = Montage.create(Component, {
610 * Draws selection highlight and reg. point for a given element 616 * Draws selection highlight and reg. point for a given element
611 */ 617 */
612 drawElementBoundingBox: { 618 drawElementBoundingBox: {
613 value: function(elt, editMode) { 619 value: function(elt) {
614 this.stageDeps.viewUtils.setViewportObj( elt ); 620 this.stageDeps.viewUtils.setViewportObj( elt );
615 var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt ); 621 var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt );
616 622
@@ -621,18 +627,16 @@ exports.Stage = Montage.create(Component, {
621// } 627// }
622 628
623 var zoomFactor = 1; 629 var zoomFactor = 1;
624 if (this._viewport.style && this._viewport.style.zoom) 630 if (this._viewport.style && this._viewport.style.zoom) {
625 {
626 zoomFactor = Number(this._viewport.style.zoom); 631 zoomFactor = Number(this._viewport.style.zoom);
627 } 632 }
633
628 var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt ); 634 var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt );
629 for (var j=0; j<4; j++) 635 for (var j=0; j<4; j++) {
630 {
631 var localPt = bounds3D[j]; 636 var localPt = bounds3D[j];
632 var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat); 637 var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat);
633 638
634 if(zoomFactor !== 1) 639 if(zoomFactor !== 1) {
635 {
636 tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); 640 tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor);
637 641
638 tmpPt[0] += this._scrollLeft*(zoomFactor - 1); 642 tmpPt[0] += this._scrollLeft*(zoomFactor - 1);
@@ -642,13 +646,9 @@ exports.Stage = Montage.create(Component, {
642 } 646 }
643 647
644 // draw it 648 // draw it
645 if(editMode) { 649 this.context.strokeStyle = this._canvasSelectionPrefs.color;
646 this.context.strokeStyle = this._editSymbolPrefs.color; 650 this.context.lineWidth = this._canvasSelectionPrefs.thickness;
647 this.context.lineWidth = this._editSymbolPrefs.thickness; 651
648 } else {
649 this.context.strokeStyle = this._canvasSelectionPrefs.color;
650 this.context.lineWidth = this._canvasSelectionPrefs.thickness;
651 }
652 652
653 this.context.beginPath(); 653 this.context.beginPath();
654 654
@@ -662,13 +662,6 @@ exports.Stage = Montage.create(Component, {
662 662
663 this.context.closePath(); 663 this.context.closePath();
664 this.context.stroke(); 664 this.context.stroke();
665