diff options
Diffstat (limited to 'js/stage')
-rwxr-xr-x | js/stage/layout.js | 6 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 149 |
2 files changed, 130 insertions, 25 deletions
diff --git a/js/stage/layout.js b/js/stage/layout.js index a2f81e97..28484b71 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js | |||
@@ -111,11 +111,11 @@ exports.Layout = Montage.create(Component, { | |||
111 | // Make an array copy of the line node list which is not an array like object | 111 | // Make an array copy of the line node list which is not an array like object |
112 | this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true); | 112 | this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true); |
113 | // Index of the current container | 113 | // Index of the current container |
114 | containerIndex = this.domTree.indexOf(this.application.ninja.currentSelectedContainer); | 114 | containerIndex = this.domTree.indexOf(this.currentDocument.model.domContainer); |
115 | 115 | ||
116 | if(containerIndex < 0) { | 116 | if(containerIndex < 0) { |
117 | // Stage is the container. | 117 | // Stage is the container. |
118 | this.domTree = Array.prototype.slice.call(this.application.ninja.currentSelectedContainer.childNodes, 0); | 118 | this.domTree = Array.prototype.slice.call(this.currentDocument.model.domContainer.childNodes, 0); |
119 | } else { | 119 | } else { |
120 | // Child nodes of the container | 120 | // Child nodes of the container |
121 | this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0); | 121 | this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0); |
@@ -213,7 +213,7 @@ exports.Layout = Montage.create(Component, { | |||
213 | bounds3D[j] = tmpPt; | 213 | bounds3D[j] = tmpPt; |
214 | } | 214 | } |
215 | 215 | ||
216 | if(item.uuid === this.application.ninja.currentSelectedContainer.uuid) { | 216 | if(item.uuid === this.currentDocument.model.domContainer.uuid) { |
217 | this.ctx.save(); | 217 | this.ctx.save(); |
218 | this.ctx.strokeStyle = "#C61F00"; | 218 | this.ctx.strokeStyle = "#C61F00"; |
219 | 219 | ||
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.rest |