diff options
author | Valerio Virgillito | 2012-06-11 17:46:29 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-06-11 17:46:29 -0700 |
commit | b6c88f548c8d3756738e534418732710af733f03 (patch) | |
tree | d651ce2811019a3bccfd8be1326762cd2c601316 /js/stage/stage.reel/stage.js | |
parent | 91123fef348ec54d89005adbc151e816856a6a18 (diff) | |
parent | 6854a72504f57903bd5de003e377f2aefb02d0da (diff) | |
download | ninja-b6c88f548c8d3756738e534418732710af733f03.tar.gz |
Merge branch 'refs/heads/master' into montage-v10-integration
Conflicts:
js/io/system/ninjalibrary.json
js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
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 0ad004d6..129bcc33 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -243,6 +243,8 @@ exports.Stage = Montage.create(Component, { | |||
243 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { | 243 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { |
244 | this.currentDocument.model.scrollLeft = this._scrollLeft; | 244 | this.currentDocument.model.scrollLeft = this._scrollLeft; |
245 | this.currentDocument.model.scrollTop = this._scrollTop; | 245 | this.currentDocument.model.scrollTop = this._scrollTop; |
246 | //call configure false with the old document on the selected tool to tear down down any temp. stuff | ||
247 | this.application.ninja.toolsData.selectedToolInstance._configure(false); | ||
246 | } | 248 | } |
247 | 249 | ||
248 | this._currentDocument = value; | 250 | this._currentDocument = value; |
@@ -301,7 +303,7 @@ exports.Stage = Montage.create(Component, { | |||
301 | 303 | ||
302 | // Hack for now until a full component | 304 | // Hack for now until a full component |
303 | this.layout.draw(); | 305 | this.layout.draw(); |
304 | if(this.currentDocument) { | 306 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { |
305 | this.layout.draw3DInfo(true); | 307 | this.layout.draw3DInfo(true); |
306 | } | 308 | } |
307 | } else if(this.updatedStage) { | 309 | } else if(this.updatedStage) { |
@@ -336,9 +338,6 @@ exports.Stage = Montage.create(Component, { | |||
336 | 338 | ||
337 | this.eventManager.addEventListener( "appMouseUp", this, false); | 339 | this.eventManager.addEventListener( "appMouseUp", this, false); |
338 | 340 | ||
339 | |||
340 | this.eventManager.addEventListener( "openDocument", this, false); | ||
341 | this.eventManager.addEventListener( "switchDocument", this, false); | ||
342 | this.eventManager.addEventListener( "enableStageMove", this, false); | 341 | this.eventManager.addEventListener( "enableStageMove", this, false); |
343 | this.eventManager.addEventListener( "disableStageMove", this, false); | 342 | this.eventManager.addEventListener( "disableStageMove", this, false); |
344 | 343 | ||
@@ -346,19 +345,9 @@ exports.Stage = Montage.create(Component, { | |||
346 | this.eventManager.addEventListener( "elementChanging", this, false); | 345 | this.eventManager.addEventListener( "elementChanging", this, false); |
347 | this.eventManager.addEventListener( "elementChange", this, false); | 346 | this.eventManager.addEventListener( "elementChange", this, false); |
348 | 347 | ||
349 | } | 348 | this.addPropertyChangeListener("currentDocument.model.domContainer", this, true); |
350 | }, | 349 | // this.addPropertyChangeListener("currentDocument.model.domContainer", this); |
351 | |||
352 | // Event details will contain the active document prior to opening a new one | ||
353 | handleOpenDocument: { | ||
354 | value: function(evt) { | ||
355 | this.initWithDocument(); | ||
356 | } | ||
357 | }, | ||
358 | 350 | ||
359 | handleSwitchDocument: { | ||
360 | value: function(evt) { | ||
361 | this.initWithDocument(true); | ||
362 | } | 351 | } |
363 | }, | 352 | }, |
364 | 353 | ||
@@ -412,7 +401,6 @@ exports.Stage = Montage.create(Component, { | |||
412 | } else { | 401 | } else { |
413 | this.centerStage(); | 402 | this.centerStage(); |
414 | } | 403 | } |
415 | |||
416 | // TODO - We will need to modify this once we support switching between multiple documents | 404 | // TODO - We will need to modify this once we support switching between multiple documents |
417 | this.application.ninja.toolsData.selectedToolInstance._configure(true); | 405 | this.application.ninja.toolsData.selectedToolInstance._configure(true); |
418 | } | 406 | } |
@@ -438,6 +426,17 @@ exports.Stage = Montage.create(Component, { | |||
438 | this.updatedStage = true; | 426 | this.updatedStage = true; |
439 | } | 427 | } |
440 | } | 428 | } |
429 | /* | ||
430 | else if(notification.currentPropertyPath === "currentDocument.model.domContainer") { | ||
431 | if() | ||
432 | } | ||
433 | */ | ||
434 | } | ||
435 | }, | ||
436 | |||
437 | handleWillChange: { | ||
438 | value: function(notification) { | ||
439 | // console.log("stage -> container is about to change"); | ||
441 | } | 440 | } |
442 | }, | 441 | }, |
443 | 442 | ||
@@ -704,10 +703,10 @@ exports.Stage = Montage.create(Component, { | |||
704 | if(selectable) { | 703 | if(selectable) { |
705 | 704 | ||
706 | if(this.currentDocument.inExclusion(element) !== -1) { | 705 | if(this.currentDocument.inExclusion(element) !== -1) { |
707 | return this.application.ninja.currentSelectedContainer; | 706 | return this.currentDocument.model.domContainer; |
708 | } | 707 | } |
709 | 708 | ||
710 | var activeContainerId = this.application.ninja.currentSelectedContainer.uuid; | 709 | var activeContainerId = this.currentDocument.model.domContainer.uuid; |
711 | if(element.parentNode.uuid === activeContainerId) { | 710 | if(element.parentNode.uuid === activeContainerId) { |
712 | return element; | 711 | return element; |
713 | } else { | 712 | } else { |
@@ -751,10 +750,16 @@ exports.Stage = Montage.create(Component, { | |||
751 | 750 | ||
752 | draw: { | 751 | draw: { |
753 | value: function() { | 752 | value: function() { |
753 | if(!this.currentDocument) return; | ||
754 | |||
754 | this.clearCanvas(); | 755 | this.clearCanvas(); |
755 | 756 | ||
756 | drawUtils.updatePlanes(); | 757 | drawUtils.updatePlanes(); |
757 | 758 | ||
759 | if(this.currentDocument.model.domContainer !== this.currentDocument.model.documentRoot) { | ||
760 | this.drawDomContainer(this.currentDocument.model.domContainer); | ||
761 | } | ||
762 | |||
758 | //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change | 763 | //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change |
759 | if(this.application.ninja.selectedElements.length) { | 764 | if(this.application.ninja.selectedElements.length) { |
760 | // drawUtils.drawSelectionBounds handles the single selection case as well, | 765 | // drawUtils.drawSelectionBounds handles the single selection case as well, |
@@ -787,9 +792,6 @@ exports.Stage = Montage.create(Component, { | |||
787 | 792 | ||
788 | }, | 793 | }, |
789 | 794 | ||
790 | |||
791 | |||
792 | |||
793 | /** | 795 | /** |
794 | * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection | 796 | * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection |
795 | * Uses the _canvasDrawingPrefs for line thickness and color | 797 | * Uses the _canvasDrawingPrefs for line thickness and color |
@@ -891,6 +893,109 @@ exports.Stage = Montage.create(Component, { | |||
891 | } | 893 | } |
892 | }, | 894 | }, |
893 | 895 | ||
896 | |||
897 | drawDomContainer: { | ||
898 | value: function(elt) { | ||
899 | |||
900 | |||
901 | this.stageDeps.viewUtils.setViewportObj( elt ); | ||
902 | var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt ); | ||
903 | |||
904 | // convert the local bounds to the world | ||
905 | |||
906 | |||
907 | |||
908 | var zoomFactor = 1; | ||
909 | if (this._viewport && this._viewport.style && this._viewport.style.zoom) { | ||
910 | zoomFactor = Number(this._viewport.style.zoom); | ||
911 | } | ||
912 | |||
913 | var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt ); | ||
914 | for (var j=0; j<4; j++) { | ||
915 | var localPt = bounds3D[j]; | ||
916 | var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat); | ||
917 | |||
918 | if(zoomFactor !== 1) { | ||
919 | tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); | ||
920 | |||
921 | tmpPt[0] += this._scrollLeft*(zoomFactor - 1); | ||
922 | tmpPt[1] += this._scrollTop*(zoomFactor - 1); | ||
923 | } | ||
924 | bounds3D[j] = tmpPt; | ||
925 | } | ||
926 | |||
927 | // Draw 3 outlines | ||
928 | // for(var i = 0; i < 3) | ||
929 | |||
930 | this.context.save(); | ||
931 | // draw it | ||
932 | this.context.strokeStyle = "#ff0000"; | ||
933 | this.context.lineWidth = 1; | ||
934 | |||
935 | |||
936 | this.context.beginPath(); | ||
937 | |||
938 | this.context.moveTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] - 0.5 ); | ||
939 | |||
940 | // This more granular approach lets us specify different gaps for the selection around the element | ||
941 | this.context.lineTo( bounds3D[0][0] - 0.5 , bounds3D[0][1] - 0.5 ); | ||
942 | this.context.lineTo( bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5 ); | ||
943 | this.context.lineTo( bounds3D[2][0] + 0.5 , bounds3D[2][1] + 0.5 ); | ||
944 | this.context.lineTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] + 0.5 ); | ||
945 | |||
946 | this.context.closePath(); | ||
947 | this.context.stroke(); | ||
948 | |||
949 | this.context.restore(); | ||
950 | |||
951 | /* | ||
952 | |||
953 | this.context.save(); | ||
954 | // draw it | ||
955 | this.context.strokeStyle = "rgba(0,11,61,0.8)"; | ||
956 | this.context.lineWidth = 1; | ||
957 | |||
958 | |||
959 | this.context.beginPath(); | ||
960 | |||
961 | this.context.moveTo( bounds3D[3][0] + 1.5 , bounds3D[3][1] - 1.5 ); | ||
962 | |||
963 | // This more granular approach lets us specify different gaps for the selection around the element | ||
964 | this.context.lineTo( bounds3D[0][0] - 1.5 , bounds3D[0][1] - 1.5 ); | ||
965 | this.context.lineTo( bounds3D[1][0] - 1.5 , bounds3D[1][1] + 1.5 ); | ||
966 | this.context.lineTo( bounds3D[2][0] + 1.5 , bounds3D[2][1] + 1.5 ); | ||
967 | this.context.lineTo( bounds3D[3][0] + 1.5 , bounds3D[3][1] + 1.5 ); | ||
968 | |||
969 | this.context.closePath(); | ||
970 | this.context.stroke(); | ||
971 | |||
972 | this.context.restore(); | ||
973 | |||
974 | |||
975 | this.context.save(); | ||
976 | // draw it | ||
977 | this.context.strokeStyle = "rgba(255,0,0,0.3)"; | ||