aboutsummaryrefslogtreecommitdiff
path: root/js/stage/stage.reel/stage.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage/stage.reel/stage.js')
-rwxr-xr-xjs/stage/stage.reel/stage.js149
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.lineWidth = 1;
918
919
920 this.context.beginPath();
921
922 this.context.moveTo( bounds3D[3][0] + 2.5 , bounds3D[3][1] - 2.5 );
923
924 // This more granular approach lets us specify different gaps for the selection around the element
925 this.context.lineTo( bounds3D[0][0] - 2.5 , bounds3D[0][1] - 2.5 );
926 this.context.lineTo( bounds3D[1][0] - 2.5 , bounds3D[1][1] + 2.5 );