diff options
author | Valerio Virgillito | 2012-06-08 16:59:59 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-06-08 16:59:59 -0700 |
commit | 806974142d44afdd23534bf2d18eff0a8e701e0c (patch) | |
tree | 811acab38c063ca4fb594bcab0a6dc5e143f29a2 /js/stage/stage.reel/stage.js | |
parent | d14249dd2d76e9eb8d14733c10393d36bd2ea8ee (diff) | |
download | ninja-806974142d44afdd23534bf2d18eff0a8e701e0c.tar.gz |
rewrite: currentSelectedContainer -> domContainer
Fixed the currentSelectedContainer by removing bindings and using property change on the current document
added the red outline back.
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 | 145 |
1 files changed, 125 insertions, 20 deletions
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 30ee1e40..5ad8bf8c 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -277,9 +277,6 @@ exports.Stage = Montage.create(Component, { | |||
277 | 277 | ||
278 | this.eventManager.addEventListener( "appMouseUp", this, false); | 278 | this.eventManager.addEventListener( "appMouseUp", this, false); |
279 | 279 | ||
280 | |||
281 | this.eventManager.addEventListener( "openDocument", this, false); | ||
282 | this.eventManager.addEventListener( "switchDocument", this, false); | ||
283 | this.eventManager.addEventListener( "enableStageMove", this, false); | 280 | this.eventManager.addEventListener( "enableStageMove", this, false); |
284 | this.eventManager.addEventListener( "disableStageMove", this, false); | 281 | this.eventManager.addEventListener( "disableStageMove", this, false); |
285 | 282 | ||
@@ -287,19 +284,9 @@ exports.Stage = Montage.create(Component, { | |||
287 | this.eventManager.addEventListener( "elementChanging", this, false); | 284 | this.eventManager.addEventListener( "elementChanging", this, false); |
288 | this.eventManager.addEventListener( "elementChange", this, false); | 285 | this.eventManager.addEventListener( "elementChange", this, false); |
289 | 286 | ||
290 | } | 287 | this.addPropertyChangeListener("currentDocument.model.domContainer", this, true); |
291 | }, | 288 | // this.addPropertyChangeListener("currentDocument.model.domContainer", this); |
292 | |||
293 | // Event details will contain the active document prior to opening a new one | ||
294 | handleOpenDocument: { | ||
295 | value: function(evt) { | ||
296 | this.initWithDocument(); | ||
297 | } | ||
298 | }, | ||
299 | 289 | ||
300 | handleSwitchDocument: { | ||
301 | value: function(evt) { | ||
302 | this.initWithDocument(true); | ||
303 | } | 290 | } |
304 | }, | 291 | }, |
305 | 292 | ||
@@ -378,6 +365,18 @@ exports.Stage = Montage.create(Component, { | |||
378 | this.updatedStage = true; | 365 | this.updatedStage = true; |
379 | } | 366 | } |
380 | } | 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"); | ||
379 | console.log(notification.plus); | ||
381 | } | 380 | } |
382 | }, | 381 | }, |
383 | 382 | ||
@@ -644,10 +643,10 @@ exports.Stage = Montage.create(Component, { | |||
644 | if(selectable) { | 643 | if(selectable) { |
645 | 644 | ||
646 | if(this.currentDocument.inExclusion(element) !== -1) { | 645 | if(this.currentDocument.inExclusion(element) !== -1) { |
647 | return this.application.ninja.currentSelectedContainer; | 646 | return this.currentDocument.model.domContainer; |
648 | } | 647 | } |
649 | 648 | ||
650 | var activeContainerId = this.application.ninja.currentSelectedContainer.uuid; | 649 | var activeContainerId = this.currentDocument.model.domContainer.uuid; |
651 | if(element.parentNode.uuid === activeContainerId) { | 650 | if(element.parentNode.uuid === activeContainerId) { |
652 | return element; | 651 | return element; |
653 | } else { | 652 | } else { |
@@ -691,10 +690,16 @@ exports.Stage = Montage.create(Component, { | |||
691 | 690 | ||
692 | draw: { | 691 | draw: { |
693 | value: function() { | 692 | value: function() { |
693 | if(!this.currentDocument) return; | ||
694 | |||
694 | this.clearCanvas(); | 695 | this.clearCanvas(); |
695 | 696 | ||
696 | drawUtils.updatePlanes(); | 697 | drawUtils.updatePlanes(); |
697 | 698 | ||
699 | if(this.currentDocument.model.domContainer !== this.currentDocument.model.documentRoot) { | ||
700 | this.drawDomContainer(this.currentDocument.model.domContainer); | ||
701 | } | ||
702 | |||
698 | //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change | 703 | //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change |
699 | if(this.application.ninja.selectedElements.length) { | 704 | if(this.application.ninja.selectedElements.length) { |
700 | // drawUtils.drawSelectionBounds handles the single selection case as well, | 705 | // drawUtils.drawSelectionBounds handles the single selection case as well, |
@@ -727,9 +732,6 @@ exports.Stage = Montage.create(Component, { | |||
727 | 732 | ||
728 | }, | 733 | }, |
729 | 734 | ||
730 | |||
731 | |||
732 | |||
733 | /** | 735 | /** |
734 | * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection | 736 | * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection |
735 | * Uses the _canvasDrawingPrefs for line thickness and color | 737 | * Uses the _canvasDrawingPrefs for line thickness and color |
@@ -831,6 +833,109 @@ exports.Stage = Montage.create(Component, { | |||
831 | } | 833 | } |
832 | }, | 834 | }, |
833 | 835 | ||
836 | |||
837 | drawDomContainer: { | ||
838 | value: function(elt) { | ||
839 | |||
840 | |||
841 | this.stageDeps.viewUtils.setViewportObj( elt ); | ||
842 | var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt ); | ||
843 | |||
844 | // convert the local bounds to the world | ||
845 | |||
846 | |||
847 | |||
848 | var zoomFactor = 1; | ||
849 | if (this._viewport && this._viewport.style && this._viewport.style.zoom) { | ||
850 | zoomFactor = Number(this._viewport.style.zoom); | ||
851 | } | ||
852 | |||
853 | var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt ); | ||
854 | for (var j=0; j<4; j++) { | ||
855 | var localPt = bounds3D[j]; | ||
856 | var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat); | ||
857 | |||
858 | if(zoomFactor !== 1) { | ||
859 | tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); | ||
860 | |||
861 | tmpPt[0] += this._scrollLeft*(zoomFactor - 1); | ||
862 | tmpPt[1] += this._scrollTop*(zoomFactor - 1); | ||
863 | } | ||
864 | bounds3D[j] = tmpPt; | ||
865 | } | ||
866 | |||
867 | // Draw 3 outlines | ||
868 | // for(var i = 0; i < 3) | ||
869 | |||
870 | this.context.save(); | ||
871 | // draw it | ||
872 | this.context.strokeStyle = "#ff0000"; | ||
873 | this.context.lineWidth = 1; | ||
874 | |||
875 | |||
876 | this.context.beginPath(); | ||
877 | |||
878 | this.context.moveTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] - 0.5 ); | ||
879 | |||
880 | // This more granular approach lets us specify different gaps for the selection around the element | ||
881 | this.context.lineTo( bounds3D[0][0] - 0.5 , bounds3D[0][1] - 0.5 ); | ||
882 | this.context.lineTo( bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5 ); | ||
883 | this.context.lineTo( bounds3D[2][0] + 0.5 , bounds3D[2][1] + 0.5 ); | ||
884 | this.context.lineTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] + 0.5 ); | ||
885 | |||
886 | this.context.closePath(); | ||
887 | this.context.stroke(); | ||
888 | |||
889 | this.context.restore(); | ||
890 | |||
891 | /* | ||
892 | |||
893 | this.context.save(); | ||
894 | // draw it | ||
895 | this.context.strokeStyle = "rgba(0,11,61,0.8)"; | ||
896 | this.context.lineWidth = 1; | ||
897 | |||
898 | |||
899 | this.context.beginPath(); | ||
900 | |||
901 | this.context.moveTo( bounds3D[3][0] + 1.5 , bounds3D[3][1] - 1.5 ); | ||
902 | |||
903 | // This more granular approach lets us specify different gaps for the selection around the element | ||
904 | this.context.lineTo( bounds3D[0][0] - 1.5 , bounds3D[0][1] - 1.5 ); | ||
905 | this.context.lineTo( bounds3D[1][0] - 1.5 , bounds3D[1][1] + 1.5 ); | ||
906 | this.context.lineTo( bounds3D[2][0] + 1.5 , bounds3D[2][1] + 1.5 ); | ||
907 | this.context.lineTo( bounds3D[3][0] + 1.5 , bounds3D[3][1] + 1.5 ); | ||
908 | |||
909 | this.context.closePath(); | ||
910 | this.context.stroke(); | ||
911 | |||
912 | this.context.restore(); | ||
913 | |||
914 | |||
915 | this.context.save(); | ||
916 | // draw it | ||
917 | this.context.strokeStyle = "rgba(255,0,0,0.3)"; | ||
918 | this.context.lineWidth = 1; | ||
919 | |||
920 | |||
921 | this.context.beginPath(); | ||
922 | |||
923 | this.context.moveTo( bounds3D[3][0] + 2.5 , bounds3D[3][1] - 2.5 ); | ||
924 | |||
925 | // This more granular approach lets us specify different gaps for the selection around the element | ||
926 | this.context.lineTo( bounds3D[0][0] - 2.5 , bounds3D[0][1] - 2.5 ); | ||
927 | this.context.lineTo( bounds3D[1][0] - 2.5 , bounds3D[1][1] + 2.5 ); | ||
928 | this.context.lineTo( bounds3D[2][0] + 2.5 , bounds3D[2][1] + 2.5 ); | ||
929 | this.context.lineTo( bounds3D[3][0] + 2.5 , bounds3D[3][1] + 2.5 ); | ||
930 | |||
931 | this.context.closePath(); | ||
932 | this.context.stroke(); | ||
933 | |||
934 | this.context.restore(); | ||
935 | */ | ||
936 | } | ||
937 | }, | ||
938 | |||
834 | /** | 939 | /** |
835 | * draw3DProjectedAndUnprojectedRectangles -- Draws a 3D rectangle used for marquee selection. | 940 | * draw3DProjectedAndUnprojectedRectangles -- Draws a 3D rectangle used for marquee selection. |
836 | * Draws a second rectangle to indicate the projected | 941 | * Draws a second rectangle to indicate the projected |