diff options
author | Jose Antonio Marquez | 2012-02-21 18:04:27 -0800 |
---|---|---|
committer | Jose Antonio Marquez | 2012-02-21 18:04:27 -0800 |
commit | 25e6a03cf8af4bd0496a8b21c82332d76ddd9fff (patch) | |
tree | 9b4ef3a716139d5259261cae97e8603a1d33a91f /js/stage | |
parent | 20dc41e571ddec6b781653fac43e2ca34026937d (diff) | |
parent | 2f24dafec79583547fe663d5a387d8ef15aae3bf (diff) | |
download | ninja-25e6a03cf8af4bd0496a8b21c82332d76ddd9fff.tar.gz |
Merge branch 'refs/heads/NinjaInternal' into Color
Diffstat (limited to 'js/stage')
-rwxr-xr-x | js/stage/layout.js | 29 | ||||
-rwxr-xr-x | js/stage/stage-view.reel/stage-view.js | 4 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.html | 2 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 59 |
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 | |||