diff options
author | hwc487 | 2012-06-12 15:52:35 -0700 |
---|---|---|
committer | hwc487 | 2012-06-12 15:52:35 -0700 |
commit | 9490f816924e9e9c9970ef9384241c07ec0a6e9f (patch) | |
tree | f44449a2e0055e21960a5513fb3a0738a91db528 /js/stage/stage.reel/stage.js | |
parent | b7a41cbd5a30d32f524ee60e2dfdf9c65c7ec55b (diff) | |
parent | 6854a72504f57903bd5de003e377f2aefb02d0da (diff) | |
download | ninja-9490f816924e9e9c9970ef9384241c07ec0a6e9f.tar.gz |
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into Textures
Conflicts:
assets/canvas-runtime.js
js/io/system/ninjalibrary.json
js/mediators/element-mediator.js
Diffstat (limited to 'js/stage/stage.reel/stage.js')
-rwxr-xr-x | js/stage/stage.reel/stage.js | 149 |
1 files changed, 127 insertions, 22 deletions
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index d8f7313b..da109d45 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -182,6 +182,8 @@ exports.Stage = Montage.create(Component, { | |||
182 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { | 182 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { |
183 | this.currentDocument.model.scrollLeft = this._scrollLeft; | 183 | this.currentDocument.model.scrollLeft = this._scrollLeft; |
184 | this.currentDocument.model.scrollTop = this._scrollTop; | 184 | this.currentDocument.model.scrollTop = this._scrollTop; |
185 | //call configure false with the old document on the selected tool to tear down down any temp. stuff | ||
186 | this.application.ninja.toolsData.selectedToolInstance._configure(false); | ||
185 | } | 187 | } |
186 | 188 | ||
187 | this._currentDocument = value; | 189 | this._currentDocument = value; |
@@ -240,7 +242,7 @@ exports.Stage = Montage.create(Component, { | |||
240 | 242 | ||
241 | // Hack for now until a full component | 243 | // Hack for now until a full component |
242 | this.layout.draw(); | 244 | this.layout.draw(); |
243 | if(this.currentDocument) { | 245 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { |
244 | this.layout.draw3DInfo(true); | 246 | this.layout.draw3DInfo(true); |
245 | } | 247 | } |
246 | } else if(this.updatedStage) { | 248 | } else if(this.updatedStage) { |
@@ -275,9 +277,6 @@ exports.Stage = Montage.create(Component, { | |||
275 | 277 | ||
276 | this.eventManager.addEventListener( "appMouseUp", this, false); | 278 | this.eventManager.addEventListener( "appMouseUp", this, false); |
277 | 279 | ||
278 | |||
279 | this.eventManager.addEventListener( "openDocument", this, false); | ||
280 | this.eventManager.addEventListener( "switchDocument", this, false); | ||
281 | this.eventManager.addEventListener( "enableStageMove", this, false); | 280 | this.eventManager.addEventListener( "enableStageMove", this, false); |
282 | this.eventManager.addEventListener( "disableStageMove", this, false); | 281 | this.eventManager.addEventListener( "disableStageMove", this, false); |
283 | 282 | ||
@@ -285,19 +284,9 @@ exports.Stage = Montage.create(Component, { | |||
285 | this.eventManager.addEventListener( "elementChanging", this, false); | 284 | this.eventManager.addEventListener( "elementChanging", this, false); |
286 | this.eventManager.addEventListener( "elementChange", this, false); | 285 | this.eventManager.addEventListener( "elementChange", this, false); |
287 | 286 | ||
288 | } | 287 | this.addPropertyChangeListener("currentDocument.model.domContainer", this, true); |
289 | }, | 288 | // this.addPropertyChangeListener("currentDocument.model.domContainer", this); |
290 | |||
291 | // Event details will contain the active document prior to opening a new one | ||
292 | handleOpenDocument: { | ||
293 | value: function(evt) { | ||
294 | this.initWithDocument(); | ||
295 | } | ||
296 | }, | ||
297 | 289 | ||
298 | handleSwitchDocument: { | ||
299 | value: function(evt) { | ||
300 | this.initWithDocument(true); | ||
301 | } | 290 | } |
302 | }, | 291 | }, |
303 | 292 | ||
@@ -351,7 +340,6 @@ exports.Stage = Montage.create(Component, { | |||
351 | } else { | 340 | } else { |
352 | this.centerStage(); | 341 | this.centerStage(); |
353 | } | 342 | } |
354 | |||
355 | // TODO - We will need to modify this once we support switching between multiple documents | 343 | // TODO - We will need to modify this once we support switching between multiple documents |
356 | this.application.ninja.toolsData.selectedToolInstance._configure(true); | 344 | this.application.ninja.toolsData.selectedToolInstance._configure(true); |
357 | } | 345 | } |
@@ -377,6 +365,17 @@ exports.Stage = Montage.create(Component, { | |||
377 | this.updatedStage = true; | 365 | this.updatedStage = true; |
378 | } | 366 | } |
379 | } | 367 | } |
368 | /* | ||
369 | else if(notification.currentPropertyPath === "currentDocument.model.domContainer") { | ||
370 | if() | ||
371 | } | ||
372 | */ | ||
373 | } | ||
374 | }, | ||
375 | |||
376 | handleWillChange: { | ||
377 | value: function(notification) { | ||
378 | // console.log("stage -> container is about to change"); | ||
380 | } | 379 | } |
381 | }, | 380 | }, |
382 | 381 | ||
@@ -643,10 +642,10 @@ exports.Stage = Montage.create(Component, { | |||
643 | if(selectable) { | 642 | if(selectable) { |
644 | 643 | ||
645 | if(this.currentDocument.inExclusion(element) !== -1) { | 644 | if(this.currentDocument.inExclusion(element) !== -1) { |
646 | return this.application.ninja.currentSelectedContainer; | 645 | return this.currentDocument.model.domContainer; |
647 | } | 646 | } |
648 | 647 | ||
649 | var activeContainerId = this.application.ninja.currentSelectedContainer.uuid; | 648 | var activeContainerId = this.currentDocument.model.domContainer.uuid; |
650 | if(element.parentNode.uuid === activeContainerId) { | 649 | if(element.parentNode.uuid === activeContainerId) { |
651 | return element; | 650 | return element; |
652 | } else { | 651 | } else { |
@@ -690,10 +689,16 @@ exports.Stage = Montage.create(Component, { | |||
690 | 689 | ||
691 | draw: { | 690 | draw: { |
692 | value: function() { | 691 | value: function() { |
692 | if(!this.currentDocument) return; | ||
693 | |||
693 | this.clearCanvas(); | 694 | this.clearCanvas(); |
694 | 695 | ||
695 | drawUtils.updatePlanes(); | 696 | drawUtils.updatePlanes(); |
696 | 697 | ||
698 | if(this.currentDocument.model.domContainer !== this.currentDocument.model.documentRoot) { | ||
699 | this.drawDomContainer(this.currentDocument.model.domContainer); | ||
700 | } | ||
701 | |||
697 | //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change | 702 | //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change |
698 | if(this.application.ninja.selectedElements.length) { | 703 | if(this.application.ninja.selectedElements.length) { |
699 | // drawUtils.drawSelectionBounds handles the single selection case as well, | 704 | // drawUtils.drawSelectionBounds handles the single selection case as well, |
@@ -726,9 +731,6 @@ exports.Stage = Montage.create(Component, { | |||
726 | 731 | ||
727 | }, | 732 | }, |
728 | 733 | ||
729 | |||
730 | |||
731 | |||
732 | /** | 734 | /** |
733 | * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection | 735 | * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection |
734 | * Uses the _canvasDrawingPrefs for line thickness and color | 736 | * Uses the _canvasDrawingPrefs for line thickness and color |
@@ -830,6 +832,109 @@ exports.Stage = Montage.create(Component, { | |||
830 | } | 832 | } |
831 | }, | 833 | }, |
832 | 834 | ||
835 | |||
836 | drawDomContainer: { | ||
837 | value: function(elt) { | ||
838 | |||
839 | |||
840 | this.stageDeps.viewUtils.setViewportObj( elt ); | ||
841 | var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt ); | ||
842 | |||
843 | // convert the local bounds to the world | ||
844 | |||
845 | |||
846 | |||
847 | var zoomFactor = 1; | ||
848 | if (this._viewport && this._viewport.style && this._viewport.style.zoom) { | ||
849 | zoomFactor = Number(this._viewport.style.zoom); | ||
850 | } | ||
851 | |||
852 | var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt ); | ||
853 | for (var j=0; j<4; j++) { | ||
854 | var localPt = bounds3D[j]; | ||
855 | var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat); | ||
856 | |||
857 | if(zoomFactor !== 1) { | ||
858 | tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); | ||
859 | |||
860 | tmpPt[0] += this._scrollLeft*(zoomFactor - 1); | ||
861 | tmpPt[1] += this._scrollTop*(zoomFactor - 1); | ||
862 | } | ||
863 | bounds3D[j] = tmpPt; | ||
864 | } | ||
865 | |||
866 | // Draw 3 outlines | ||
867 | // for(var i = 0; i < 3) | ||
868 | |||
869 | this.context.save(); | ||
870 | // draw it | ||
871 | this.context.strokeStyle = "#ff0000"; | ||
872 | this.context.lineWidth = 1; | ||
873 | |||
874 | |||
875 | this.context.beginPath(); | ||
876 | |||
877 | this.context.moveTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] - 0.5 ); | ||
878 | |||
879 | // This more granular approach lets us specify different gaps for the selection around the element | ||
880 | this.context.lineTo( bounds3D[0][0] - 0.5 , bounds3D[0][1] - 0.5 ); | ||
881 | this.context.lineTo( bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5 ); | ||
882 | this.context.lineTo( bounds3D[2][0] + 0.5 , bounds3D[2][1] + 0.5 ); | ||
883 | this.context.lineTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] + 0.5 ); | ||
884 | |||
885 | this.context.closePath(); | ||
886 | this.context.stroke(); | ||
887 | |||
888 | this.context.restore(); | ||
889 | |||
890 | /* | ||
891 | |||
892 | this.context.save(); | ||
893 | // draw it | ||
894 | this.context.strokeStyle = "rgba(0,11,61,0.8)"; | ||
895 | this.context.lineWidth = 1; | ||
896 | |||
897 | |||
898 | this.context.beginPath(); | ||
899 | |||
900 | this.context.moveTo( bounds3D[3][0] + 1.5 , bounds3D[3][1] - 1.5 ); | ||
901 | |||
902 | // This more granular approach lets us specify different gaps for the selection around the element | ||
903 | this.context.lineTo( bounds3D[0][0] - 1.5 , bounds3D[0][1] - 1.5 ); | ||
904 | this.context.lineTo( bounds3D[1][0] - 1.5 , bounds3D[1][1] + 1.5 ); | ||
905 | this.context.lineTo( bounds3D[2][0] + 1.5 , bounds3D[2][1] + 1.5 ); | ||
906 | this.context.lineTo( bounds3D[3][0] + 1.5 , bounds3D[3][1] + 1.5 ); | ||
907 | |||
908 | this.context.closePath(); | ||
909 | this.context.stroke(); | ||
910 | |||
911 | this.context.restore(); | ||
912 | |||
913 | |||
914 | this.context.save(); | ||
915 | // draw it | ||
916 | this.context.strokeStyle = "rgba(255,0,0,0.3)"; | ||
917 | this.context |