aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/layout.js6
-rwxr-xr-xjs/stage/stage.reel/stage.js144
2 files changed, 127 insertions, 23 deletions
diff --git a/js/stage/layout.js b/js/stage/layout.js
index 71296405..1831f4e7 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -102,11 +102,11 @@ exports.Layout = Montage.create(Component, {
102 // Make an array copy of the line node list which is not an array like object 102 // Make an array copy of the line node list which is not an array like object
103 this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true); 103 this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true);
104 // Index of the current container 104 // Index of the current container
105 containerIndex = this.domTree.indexOf(this.application.ninja.currentSelectedContainer); 105 containerIndex = this.domTree.indexOf(this.currentDocument.model.domContainer);
106 106
107 if(containerIndex < 0) { 107 if(containerIndex < 0) {
108 // Stage is the container. 108 // Stage is the container.
109 this.domTree = Array.prototype.slice.call(this.application.ninja.currentSelectedContainer.childNodes, 0); 109 this.domTree = Array.prototype.slice.call(this.currentDocument.model.domContainer.childNodes, 0);
110 } else { 110 } else {
111 // Child nodes of the container 111 // Child nodes of the container
112 this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0); 112 this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0);
@@ -204,7 +204,7 @@ exports.Layout = Montage.create(Component, {
204 bounds3D[j] = tmpPt; 204 bounds3D[j] = tmpPt;
205 } 205 }
206 206
207 if(item.uuid === this.application.ninja.currentSelectedContainer.uuid) { 207 if(item.uuid === this.currentDocument.model.domContainer.uuid) {
208 this.ctx.save(); 208 this.ctx.save();
209 this.ctx.strokeStyle = "#C61F00"; 209 this.ctx.strokeStyle = "#C61F00";
210 210
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 30ee1e40..da109d45 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,17 @@ 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");
381 } 379 }
382 }, 380 },
383 381
@@ -644,10 +642,10 @@ exports.Stage = Montage.create(Component, {
644 if(selectable) { 642 if(selectable) {
645 643
646 if(this.currentDocument.inExclusion(element) !== -1) { 644 if(this.currentDocument.inExclusion(element) !== -1) {
647 return this.application.ninja.currentSelectedContainer; 645 return this.currentDocument.model.domContainer;
648 } 646 }
649 647
650 var activeContainerId = this.application.ninja.currentSelectedContainer.uuid; 648 var activeContainerId = this.currentDocument.model.domContainer.uuid;
651 if(element.parentNode.uuid === activeContainerId) { 649 if(element.parentNode.uuid === activeContainerId) {
652 return element; 650 return element;
653 } else { 651 } else {
@@ -691,10 +689,16 @@ exports.Stage = Montage.create(Component, {
691 689
692 draw: { 690 draw: {
693 value: function() { 691 value: function() {
692 if(!this.currentDocument) return;
693
694 this.clearCanvas(); 694 this.clearCanvas();
695 695
696 drawUtils.updatePlanes(); 696 drawUtils.updatePlanes();
697 697
698 if(this.currentDocument.model.domContainer !== this.currentDocument.model.documentRoot) {
699 this.drawDomContainer(this.currentDocument.model.domContainer);
700 }
701
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 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
699 if(this.application.ninja.selectedElements.length) { 703 if(this.application.ninja.selectedElements.length) {
700 // drawUtils.drawSelectionBounds handles the single selection case as well, 704 // drawUtils.drawSelectionBounds handles the single selection case as well,
@@ -727,9 +731,6 @@ exports.Stage = Montage.create(Component, {
727 731
728 }, 732 },
729 733
730
731
732
733 /** 734 /**
734 * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection 735 * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection
735 * Uses the _canvasDrawingPrefs for line thickness and color 736 * Uses the _canvasDrawingPrefs for line thickness and color
@@ -831,6 +832,109 @@ exports.Stage = Montage.create(Component, {
831 } 832 }
832 }, 833 },
833 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 );
927 this.context.lineTo( bounds3D[2][0] + 2.5 , bounds3D[2][1] + 2.5 );