aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/stage-deps.js2
-rwxr-xr-xjs/stage/stage.reel/stage.html2
-rwxr-xr-xjs/stage/stage.reel/stage.js28
3 files changed, 25 insertions, 7 deletions
diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js
index 896d4a5b..2469ba79 100755
--- a/js/stage/stage-deps.js
+++ b/js/stage/stage-deps.js
@@ -37,8 +37,6 @@ exports.StageDeps = Montage.create(Component, {
37 window.MathUtils = MathUtilsClass; 37 window.MathUtils = MathUtilsClass;
38 window.VecUtils = VecUtils; 38 window.VecUtils = VecUtils;
39 39
40 snapManager.drawingCanvas = this.stage.drawingCanvas;
41
42 // Setup the listeners for the draw-util and snapmanager when removing elements 40 // Setup the listeners for the draw-util and snapmanager when removing elements
43 // TODO Revisit when supporting multiple documents 41 // TODO Revisit when supporting multiple documents
44 drawUtils.initialize(); 42 drawUtils.initialize();
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 30c3d231..a819fc79 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -57,6 +57,7 @@
57 "element": {"#": "stageAndScenesContainer"}, 57 "element": {"#": "stageAndScenesContainer"},
58 "_iframeContainer": {"#": "iframeContainer"}, 58 "_iframeContainer": {"#": "iframeContainer"},
59 "_layoutCanvas": {"#": "layoutCanvas"}, 59 "_layoutCanvas": {"#": "layoutCanvas"},
60 "_gridCanvas": {"#": "gridCanvas"},
60 "_canvas": {"#": "stageCanvas"}, 61 "_canvas": {"#": "stageCanvas"},
61 "_drawingCanvas": {"#": "drawingCanvas"}, 62 "_drawingCanvas": {"#": "drawingCanvas"},
62 "stageDeps": {"@": "StageDeps1"}, 63 "stageDeps": {"@": "StageDeps1"},
@@ -83,6 +84,7 @@
83 <section data-montage-id="stageView"></section> 84 <section data-montage-id="stageView"></section>
84 <section data-montage-id="iframeContainer" id="iframeContainer"></section> 85 <section data-montage-id="iframeContainer" id="iframeContainer"></section>
85 <section data-montage-id="textToolObject"></section> 86 <section data-montage-id="textToolObject"></section>
87 <canvas data-montage-id="gridCanvas" class="gridCanvas"></canvas>
86 <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas> 88 <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas>
87 <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas> 89 <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas>
88 <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas> 90 <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index c7afb95c..d8684739 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -97,6 +97,12 @@ exports.Stage = Montage.create(Component, {
97 _layoutCanvas: { value: null }, 97 _layoutCanvas: { value: null },
98 layoutCanvas: { get: function() { return this._layoutCanvas; } }, 98 layoutCanvas: { get: function() { return this._layoutCanvas; } },
99 99
100 _gridCanvas: { value: null },
101 gridCanvas: { get: function() { return this._gridCanvas; } },
102
103 _gridContext: { value: null },
104 gridContext: { get: function() { return this._gridContext; } },
105
100 _drawingCanvas: { value: null }, 106 _drawingCanvas: { value: null },
101 drawingCanvas: { get: function() { return this._drawingCanvas; } }, 107 drawingCanvas: { get: function() { return this._drawingCanvas; } },
102 108
@@ -207,11 +213,14 @@ exports.Stage = Montage.create(Component, {
207 value: function() { 213 value: function() {
208 if(this.resizeCanvases) { 214 if(this.resizeCanvases) {
209 // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px 215 // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px
210 this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; 216 this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ;
211 this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; 217 this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26;
212 218
213 // Hack for now until a full component 219 // Hack for now until a full component
214 this.layout.draw(); 220 this.layout.draw();
221 if(this.application.ninja.currentDocument) {
222 this.layout.draw3DInfo(true);
223 }
215 } else if(this.updatedStage) { 224 } else if(this.updatedStage) {
216 this.layout.draw(); 225 this.layout.draw();
217 this.layout.draw3DInfo(true); 226 this.layout.draw3DInfo(true);
@@ -231,6 +240,7 @@ exports.Stage = Montage.create(Component, {
231 240
232 this._context = this._canvas.getContext("2d"); 241 this._context = this._canvas.getContext("2d");
233 this._drawingContext= this._drawingCanvas.getContext("2d"); 242 this._drawingContext= this._drawingCanvas.getContext("2d");
243 this._gridContext= this._gridCanvas.getContext("2d");
234 244
235 // Setup event listeners 245 // Setup event listeners
236 this._drawingCanvas.addEventListener("mousedown", this, false); 246 this._drawingCanvas.addEventListener("mousedown", this, false);
@@ -276,8 +286,8 @@ exports.Stage = Montage.create(Component, {
276 this.hideCanvas(false); 286 this.hideCanvas(false);
277 287
278 // Recalculate the canvas sizes because of splitter resizing 288 // Recalculate the canvas sizes because of splitter resizing
279 this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; 289 this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ;
280 this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; 290 this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;
281 291
282 designView.iframe.contentWindow.addEventListener("scroll", this, false); 292 designView.iframe.contentWindow.addEventListener("scroll", this, false);
283 293
@@ -519,11 +529,12 @@ exports.Stage = Montage.create(Component, {
519 this._canvas.style.visibility = "hidden"; 529 this._canvas.style.visibility = "hidden";
520 this._layoutCanvas.style.visibility = "hidden"; 530 this._layoutCanvas.style.visibility = "hidden";
521 this._drawingCanvas.style.visibility = "hidden"; 531 this._drawingCanvas.style.visibility = "hidden";
532 this._gridCanvas.style.visibility = "hidden";
522 } else { 533 } else {
523 this._canvas.style.visibility = "visible"; 534 this._canvas.style.visibility = "visible";
524 this._layoutCanvas.style.visibility = "visible"; 535 this._layoutCanvas.style.visibility = "visible";
525 this._drawingCanvas.style.visibility = "visible"; 536 this._drawingCanvas.style.visibility = "visible";
526 537 this._gridCanvas.style.visibility = "visible";
527 } 538 }
528 } 539 }
529 }, 540 },
@@ -560,10 +571,17 @@ exports.Stage = Montage.create(Component, {
560 } 571 }
561 }, 572 },
562 573
574 clearGridCanvas: {
575 value: function() {
576 this._gridContext.clearRect(0, 0, this._gridCanvas.width, this._gridCanvas.height);
577 }
578 },
579
563 clearAllCanvas: { 580 clearAllCanvas: {
564 value: function() { 581 value: function() {
565 this._drawingContext.clearRect(0, 0, this._drawingCanvas.width, this._drawingCanvas.height); 582 this._drawingContext.clearRect(0, 0, this._drawingCanvas.width, this._drawingCanvas.height);
566 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 583 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
584 this._gridContext.clearRect(0, 0, this._gridCanvas.width, this._gridCanvas.height);
567 this.layout.clearCanvas(); 585 this.layout.clearCanvas();
568 } 586 }
569 }, 587 },