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.js352
1 files changed, 207 insertions, 145 deletions
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 7c587989..b7235d19 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -29,10 +29,10 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
29POSSIBILITY OF SUCH DAMAGE. 29POSSIBILITY OF SUCH DAMAGE.
30</copyright> */ 30</copyright> */
31 31
32var Montage = require("montage/core/core").Montage, 32var Montage = require("montage/core/core").Montage,
33 Component = require("montage/ui/component").Component, 33 Component = require("montage/ui/component").Component,
34 drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, 34 drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
35 vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; 35 vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
36 36
37exports.Stage = Montage.create(Component, { 37exports.Stage = Montage.create(Component, {
38 38
@@ -46,8 +46,20 @@ exports.Stage = Montage.create(Component, {
46 drawNow: { value : false }, 46 drawNow: { value : false },
47 switchedFromCodeDoc: { value : false }, 47 switchedFromCodeDoc: { value : false },
48 48
49 drawLayout: { value : false },
50 updatePlanes: { value : false },
51 draw3DInfo: { value : false },
52
49 // TO REVIEW 53 // TO REVIEW
50 zoomFactor: {value : 1 }, 54 zoomFactor: {
55 get: function() {
56 if (this._viewport && this._viewport.style && this._viewport.style.zoom) {
57 return Number(this._viewport.style.zoom);
58 } else {
59 return 1;
60 }
61 }
62 },
51 63
52 _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, 64 _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
53 _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, 65 _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } },
@@ -85,7 +97,21 @@ exports.Stage = Montage.create(Component, {
85 set: function(value) { 97 set: function(value) {
86 this._resizeCanvases = value; 98 this._resizeCanvases = value;
87 if(value) { 99 if(value) {
88 this.needsDraw = true; 100 // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px
101 this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11;
102 this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26;
103
104 if(this.currentDocument) {
105 if(this.currentDocument.currentView === "design") {
106 this.drawLayout = true;
107 this.updatePlanes = true;
108 this.draw3DInfo = true;
109 this.needsDrawSelection = true;
110 }
111 if(this.currentDocument.model && this.currentDocument.model.documentRoot) {
112 this.currentDocument.model.documentRoot.elementModel.setProperty("offsetCache", false);
113 }
114 }
89 } 115 }
90 } 116 }
91 }, 117 },
@@ -99,6 +125,44 @@ exports.Stage = Montage.create(Component, {
99 set: function(value) { 125 set: function(value) {
100 this._updatedStage = value; 126 this._updatedStage = value;
101 if(value) { 127 if(value) {
128 if(this.currentDocument) {
129 if(this.currentDocument.currentView === "design") {
130 this.drawLayout = true;
131 this.updatePlanes = true;
132 this.draw3DInfo = true;
133 this.needsDrawSelection = true;
134 }
135 if(this.currentDocument.model && this.currentDocument.model.documentRoot) {
136 this.currentDocument.model.documentRoot.elementModel.setProperty("offsetCache", false);
137 }
138 }
139 }
140 }
141 },
142
143 _needsDrawSelection: { value: false },
144
145 needsDrawSelection: {
146 get: function() {
147 return this._needsDrawSelection;
148 },
149 set: function(value) {
150 this._needsDrawSelection = value;
151 if(value) {
152 this.needsDraw = true;
153 }
154 }
155 },
156
157 _needsDrawTool: { value: null },
158
159 needsDrawTool: {
160 get: function() {
161 return this._needsDrawTool;
162 },
163 set: function(value) {
164 this._needsDrawTool = value;
165 if(value) {
102 this.needsDraw = true; 166 this.needsDraw = true;
103 } 167 }
104 } 168 }
@@ -346,20 +410,55 @@ exports.Stage = Montage.create(Component, {
346 410
347 willDraw: { 411 willDraw: {
348 value: function() { 412 value: function() {
349 if(this.resizeCanvases) { 413 if(this._needsDrawTool) {
350 // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px 414// console.log("drawTool");
351 this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11; 415 this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(this._needsDrawTool);
352 this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26; 416 this.needsDrawTool = null;
353 // Hack for now until a full component 417 }
354 this.layout.draw(); 418 }
355 if(this.currentDocument && (this.currentDocument.currentView === "design")) { 419 },
356 this.layout.draw3DInfo(true); 420
421 draw: {
422 value: function() {
423 if(!this.currentDocument) return;
424
425 if(this.draw3DInfo) {
426// console.log("draw3DInfo");
427 if(this.updatePlanes) {
428// console.log("updatePlanes");
429 drawUtils.updatePlanes();
430 this.stageDeps.snapManager._isCacheInvalid = true;
431 this.updatePlanes = false;
432 }
433 if(this.appModel.show3dGrid) {
434// console.log("show3dGrid");
435 this.stageDeps.snapManager.updateWorkingPlaneFromView();
357 } 436 }
358 } else if(this.updatedStage) { 437// console.log("drawWorkingPlane");
438 drawUtils.drawWorkingPlane();
439 this.draw3DInfo = false;
440 }
441 if(this.drawLayout) {
442 this.layout.clearCanvas();
443// console.log("drawLayout");
359 this.layout.draw(); 444 this.layout.draw();
360 this.layout.draw3DInfo(true); 445 this.drawLayout = false;
446 }
447
448 if(this._needsDrawSelection) {
449 this.clearCanvas();
450 if(this.currentDocument.model.domContainer !== this.currentDocument.model.documentRoot) {
451 this.drawDomContainer(this.currentDocument.model.domContainer);
452 }
453 //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change
454 if(this.application.ninja.selectedElements.length) {
455 drawUtils.drawSelectionBounds(this.application.ninja.selectedElements, this.showSelectionBounds);
456 }
457 NJevent("selectionDrawn");
458 this.needsDrawSelection = false;
361 } 459 }
362 } 460 }
461
363 }, 462 },
364 463
365 didDraw: { 464 didDraw: {
@@ -568,7 +667,7 @@ exports.Stage = Montage.create(Component, {
568 this._clickPoint.y = point.y; // event.layerY; 667 this._clickPoint.y = point.y; // event.layerY;
569 668
570 this.enableMouseInOut(); 669 this.enableMouseInOut();
571 670
572 this.application.ninja.toolsData.selectedToolInstance.downPoint.x = point.x; 671 this.application.ninja.toolsData.selectedToolInstance.downPoint.x = point.x;
573 this.application.ninja.toolsData.selectedToolInstance.downPoint.y = point.y; 672 this.application.ninja.toolsData.selectedToolInstance.downPoint.y = point.y;
574 this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonDown(event); 673 this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonDown(event);
@@ -630,7 +729,9 @@ exports.Stage = Montage.create(Component, {
630 729
631 handleMousemove: { 730 handleMousemove: {
632 value: function(event) { 731 value: function(event) {
633 this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(event); 732// this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(event);
733 // Set a flag here, and tell the tool to handle mouse move in our draw cycle
734 this.needsDrawTool = event;
634 } 735 }
635 }, 736 },
636 737
@@ -653,25 +754,34 @@ exports.Stage = Montage.create(Component, {
653 754
654 handleSelectionChange: { 755 handleSelectionChange: {
655 value: function(event) { 756 value: function(event) {
656 // TODO - this is a hack for now because some tools depend on selectionDrawn event for some logic 757 this.showSelectionBounds = true;
758 this.needsDrawSelection = true;
759 this.drawLayout = true;
760 this.layout.handleSelectionChange(event);
761 // TODO - Some tools currently depend on selectionDrawn event at this point, so force a draw here
657 if(this.drawNow) { 762 if(this.drawNow) {
658 this.draw(); 763 this.draw();
659 this.drawNow = false; 764 this.drawNow = false;
660 } else {
661 this.needsDraw = true;
662 } 765 }
663 } 766 }
664 }, 767 },
665 768
666 handleElementChanging: { 769 handleElementChanging: {
667 value: function(event) { 770 value: function(event) {
668 this.needsDraw = true; 771 // TODO - This assumes only selected elements can have their properties modified
772 this.draw3DInfo = true;
773 this.showSelectionBounds = false;
774 this.needsDrawSelection = true;
669 } 775 }
670</