diff options
author | Pushkar Joshi | 2012-02-24 12:08:49 -0800 |
---|---|---|
committer | Pushkar Joshi | 2012-02-24 12:08:49 -0800 |
commit | 03ca7a5ed13c25faaa9100bb666e062fd15335e6 (patch) | |
tree | c51112223ceb9121cd595a60335eb2795215590f /js/stage/stage.reel/stage.js | |
parent | fcb12cc09eb3cd3b42bd215877ba18f449275b75 (diff) | |
parent | 053fc63a2950c7a5ee4ebf98033b64d474a3c46e (diff) | |
download | ninja-03ca7a5ed13c25faaa9100bb666e062fd15335e6.tar.gz |
Merge branch 'pentool' into brushtool
Conflicts:
imports/codemirror/mode/scheme/scheme.js
js/tools/BrushTool.js
Diffstat (limited to 'js/stage/stage.reel/stage.js')
-rwxr-xr-x[-rw-r--r--] | js/stage/stage.reel/stage.js | 127 |
1 files changed, 81 insertions, 46 deletions
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 9e2df5a2..641ac247 100644..100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -4,11 +4,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | Component = require("montage/ui/component").Component; | 8 | Component = require("montage/ui/component").Component, |
9 | 9 | drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, | |
10 | var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils; | 10 | vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; |
11 | var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; | ||
12 | 11 | ||
13 | exports.Stage = Montage.create(Component, { | 12 | exports.Stage = Montage.create(Component, { |
14 | 13 | ||
@@ -20,8 +19,6 @@ exports.Stage = Montage.create(Component, { | |||
20 | zoomFactor: {value : 1 }, | 19 | zoomFactor: {value : 1 }, |
21 | 20 | ||
22 | _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, | 21 | _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, |
23 | _editSymbolPrefs: { value: { "thickness" : 2.0, "color" : "#C61F00" } }, | ||
24 | |||
25 | _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, | 22 | _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, |
26 | drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } }, | 23 | drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } }, |
27 | 24 | ||
@@ -116,9 +113,6 @@ exports.Stage = Montage.create(Component, { | |||
116 | _userContentLeft: { value: 0 }, | 113 | _userContentLeft: { value: 0 }, |
117 | _userContentTop: { value: 0 }, | 114 | _userContentTop: { value: 0 }, |
118 | _userContentBorder: { value: 0 }, | 115 | _userContentBorder: { value: 0 }, |
119 | savedLeftScroll: { value: null }, | ||
120 | savedTopScroll: { value: null }, | ||
121 | |||
122 | 116 | ||
123 | documentRoot: { | 117 | documentRoot: { |
124 | get: function () { return this._documentRoot; }, | 118 | get: function () { return this._documentRoot; }, |
@@ -205,6 +199,7 @@ exports.Stage = Montage.create(Component, { | |||
205 | this._drawingCanvas.addEventListener("mousedown", this, false); | 199 | this._drawingCanvas.addEventListener("mousedown", this, false); |
206 | this._drawingCanvas.addEventListener("mouseup", this, false); | 200 | this._drawingCanvas.addEventListener("mouseup", this, false); |
207 | this._drawingCanvas.addEventListener("dblclick", this, false); | 201 | this._drawingCanvas.addEventListener("dblclick", this, false); |
202 | this._drawingCanvas.addEventListener("mousewheel", this, false); | ||
208 | 203 | ||
209 | // Hide the canvas | 204 | // Hide the canvas |
210 | this.hideCanvas(true); | 205 | this.hideCanvas(true); |
@@ -247,6 +242,8 @@ exports.Stage = Montage.create(Component, { | |||
247 | 242 | ||
248 | this._scrollLeft = this._iframeContainer.scrollLeft; | 243 | this._scrollLeft = this._iframeContainer.scrollLeft; |
249 | this._scrollTop = this._iframeContainer.scrollTop; | 244 | this._scrollTop = this._iframeContainer.scrollTop; |
245 | this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft; | ||
246 | this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop; | ||
250 | 247 | ||
251 | this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border")); | 248 | this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border")); |
252 | 249 | ||
@@ -261,7 +258,6 @@ exports.Stage = Montage.create(Component, { | |||
261 | this.application.ninja.toolsData.selectedToolInstance._configure(true); | 258 | this.application.ninja.toolsData.selectedToolInstance._configure(true); |
262 | 259 | ||
263 | this.addEventListener("change@appModel.show3dGrid", this, false); | 260 | this.addEventListener("change@appModel.show3dGrid", this, false); |
264 | |||
265 | } | 261 | } |
266 | }, | 262 | }, |
267 | 263 | ||
@@ -362,6 +358,16 @@ exports.Stage = Montage.create(Component, { | |||
362 | } | 358 | } |
363 | }, | 359 | }, |
364 | 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 | |||
365 | /** | 371 | /** |
366 | * Enables the MouseMove on Canvas | 372 | * Enables the MouseMove on Canvas |
367 | */ | 373 | */ |
@@ -509,12 +515,37 @@ exports.Stage = Montage.create(Component, { | |||
509 | */ | 515 | */ |
510 | GetElement: { | 516 | GetElement: { |
511 | value: function(pos) { | 517 | value: function(pos) { |
512 | var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)); | 518 | var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)), |
513 | return this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); | 519 | elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); |
520 | |||
521 | // workaround Chrome 3d bug | ||
522 | if(this.application.ninja.currentDocument.inExclusion(elt) !== -1) | ||
523 | { | ||
524 | return this._getElementUsingSnapping(point); | ||
525 | } else { | ||
526 | return elt; | ||
527 | } | ||
514 | } | 528 | } |
515 | }, | 529 | }, |
516 | 530 | ||
517 | 531 | /** | |
532 | * _getElementUsingSnapping: Returns the object at point using snap manager | ||
533 | * | ||
534 | * @param: point | ||
535 | * @return: Returns the Object in the user document under the point | ||
536 | */ | ||
537 | _getElementUsingSnapping: { | ||
538 | value: function(point) { | ||
539 | this.stageDeps.snapManager.enableElementSnap( true ); | ||
540 | var hitRec = this.stageDeps.snapManager.snap(point.x, point.y, true); | ||
541 | this.stageDeps.snapManager.enableElementSnap( this.stageDeps.snapManager.elementSnapEnabledAppLevel() ); | ||
542 | if (hitRec) { | ||
543 | return hitRec.getElement(); | ||
544 | } else { | ||
545 | return null; | ||
546 | } | ||
547 | } | ||
548 | }, | ||
518 | 549 | ||
519 | 550 | ||
520 | draw: { | 551 | draw: { |
@@ -524,8 +555,7 @@ exports.Stage = Montage.create(Component, { | |||
524 | drawUtils.updatePlanes(); | 555 | drawUtils.updatePlanes(); |
525 | 556 | ||
526 | //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change | 557 | //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change |
527 | if(this.application.ninja.selectedElements.length) | 558 | if(this.application.ninja.selectedElements.length) { |
528 | { | ||
529 | // drawUtils.drawSelectionBounds handles the single selection case as well, | 559 | // drawUtils.drawSelectionBounds handles the single selection case as well, |
530 | // so we don't have to special-case the single selection case. | 560 | // so we don't have to special-case the single selection case. |
531 | // TODO drawUtils.drawSelectionBounds expects an array of elements. | 561 | // TODO drawUtils.drawSelectionBounds expects an array of elements. |
@@ -533,8 +563,7 @@ exports.Stage = Montage.create(Component, { | |||
533 | // TODO to work on _element instead of re-creating a new Array here. | 563 | // TODO to work on _element instead of re-creating a new Array here. |
534 | var selArray = new Array(); | 564 | var selArray = new Array(); |
535 | 565 | ||
536 | for(var i = 0; this.application.ninja.selectedElements[i];i++) | 566 | for(var i = 0; this.application.ninja.selectedElements[i];i++) { |
537 | { | ||
538 | var curElement = this.application.ninja.selectedElements[i]._element; | 567 | var curElement = this.application.ninja.selectedElements[i]._element; |
539 | 568 | ||
540 | // Add element to array that is used to calculate 3d-bounding box of all elements | 569 | // Add element to array that is used to calculate 3d-bounding box of all elements |
@@ -567,7 +596,7 @@ exports.Stage = Montage.create(Component, { | |||
567 | * @params: x, y, w, h | 596 | * @params: x, y, w, h |
568 | */ | 597 | */ |
569 | draw3DSelectionRectangle: { | 598 | draw3DSelectionRectangle: { |
570 | value:function(x0,y0, x1,y1, x2,y2, x3,y3){ | 599 | value:function(x0,y0, x1,y1, x2,y2, x3,y3) { |
571 | // this.clearCanvas(); | 600 | // this.clearCanvas(); |
572 | this.clearDrawingCanvas(); | 601 | this.clearDrawingCanvas(); |
573 | this._drawingContext.strokeStyle = this._canvasDrawingPrefs.color; | 602 | this._drawingContext.strokeStyle = this._canvasDrawingPrefs.color; |
@@ -612,7 +641,7 @@ exports.Stage = Montage.create(Component, { | |||
612 | * Draws selection highlight and reg. point for a given element | 641 | * Draws selection highlight and reg. point for a given element |
613 | */ | 642 | */ |
614 | drawElementBoundingBox: { | 643 | drawElementBoundingBox: { |
615 | value: function(elt, editMode) { | 644 | value: function(elt) { |
616 | this.stageDeps.viewUtils.setViewportObj( elt ); | 645 | this.stageDeps.viewUtils.setViewportObj( elt ); |
617 | var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt ); | 646 | var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt ); |
618 | 647 | ||
@@ -623,18 +652,16 @@ exports.Stage = Montage.create(Component, { | |||
623 | // } | 652 | // } |
624 | 653 | ||
625 | var zoomFactor = 1; | 654 | var zoomFactor = 1; |
626 | if (this._viewport.style && this._viewport.style.zoom) | 655 | if (this._viewport.style && this._viewport.style.zoom) { |
627 | { | ||
628 | zoomFactor = Number(this._viewport.style.zoom); | 656 | zoomFactor = Number(this._viewport.style.zoom); |
629 | } | 657 | } |
658 | |||
630 | var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt ); | 659 | var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt ); |
631 | for (var j=0; j<4; j++) | 660 | for (var j=0; j<4; j++) { |
632 | { | ||
633 | var localPt = bounds3D[j]; | 661 | var localPt = bounds3D[j]; |
634 | var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat); | 662 | var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat); |
635 | 663 | ||
636 | if(zoomFactor !== 1) | 664 | if(zoomFactor !== 1) { |
637 | { | ||
638 | tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); | 665 | tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); |
639 | 666 | ||
640 | tmpPt[0] += this._scrollLeft*(zoomFactor - 1); | 667 | tmpPt[0] += this._scrollLeft*(zoomFactor - 1); |
@@ -644,13 +671,9 @@ exports.Stage = Montage.create(Component, { | |||
644 | } | 671 | } |
645 | 672 | ||
646 | // draw it | 673 | // draw it |
647 | if(editMode) { | 674 | this.context.strokeStyle = this._canvasSelectionPrefs.color; |
648 | this.context.strokeStyle = this._editSymbolPrefs.color; | 675 | this.context.lineWidth = this._canvasSelectionPrefs.thickness; |
649 | this.context.lineWidth = this._editSymbolPrefs.thickness; | 676 | |
650 | } else { | ||
651 | this.context.strokeStyle = this._canvasSelectionPrefs.color; | ||
652 | this.context.lineWidth = this._canvasSelectionPrefs.thickness; | ||
653 | } | ||
654 | 677 | ||