diff options
Diffstat (limited to 'js/stage')
-rwxr-xr-x | js/stage/layout.js | 13 | ||||
-rwxr-xr-x | js/stage/stage-deps.js | 16 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.html | 2 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 48 |
4 files changed, 50 insertions, 29 deletions
diff --git a/js/stage/layout.js b/js/stage/layout.js index 284968e4..71296405 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js | |||
@@ -136,6 +136,10 @@ exports.Layout = Montage.create(Component, { | |||
136 | value: function() { | 136 | value: function() { |
137 | this.clearCanvas(); | 137 | this.clearCanvas(); |
138 | 138 | ||
139 | // TODO Bind the layoutview mode to the current document | ||
140 | // var mode = this.application.ninja.currentDocument.layoutMode; | ||
141 | if(this.layoutView === "layoutOff") return; | ||
142 | |||
139 | var els = this.elementsToDraw.length; | 143 | var els = this.elementsToDraw.length; |
140 | for(var i = 0, el; i < els; i++){ | 144 | for(var i = 0, el; i < els; i++){ |
141 | this.drawTagOutline(this.elementsToDraw[i]); | 145 | this.drawTagOutline(this.elementsToDraw[i]); |
@@ -147,13 +151,13 @@ exports.Layout = Montage.create(Component, { | |||
147 | value: function(updatePlanes) { | 151 | value: function(updatePlanes) { |
148 | if(updatePlanes) { | 152 | if(updatePlanes) { |
149 | drawUtils.updatePlanes(); | 153 | drawUtils.updatePlanes(); |
154 | this.application.ninja.stage.stageDeps.snapManager._isCacheInvalid = true; | ||
150 | } | 155 | } |
151 | 156 | ||
152 | if(this.stage.appModel.show3dGrid) { | 157 | if(this.stage.appModel.show3dGrid) { |
153 | this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView(); | 158 | this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView(); |
154 | drawUtils.drawWorkingPlane(); | ||
155 | } | 159 | } |
156 | 160 | drawUtils.drawWorkingPlane(); | |
157 | drawUtils.draw3DCompass(); | 161 | drawUtils.draw3DCompass(); |
158 | } | 162 | } |
159 | }, | 163 | }, |
@@ -169,11 +173,6 @@ exports.Layout = Montage.create(Component, { | |||
169 | 173 | ||
170 | if(!item || !this.application.ninja.selectionController.isNodeTraversable(item)) return; | 174 | if(!item || !this.application.ninja.selectionController.isNodeTraversable(item)) return; |
171 | 175 | ||
172 | // TODO Bind the layoutview mode to the current document | ||
173 | // var mode = this.application.ninja.currentDocument.layoutMode; | ||
174 | |||
175 | if(this.layoutView === "layoutOff") return; | ||
176 | |||
177 | // Don't draw outlines for shapes. | 176 | // Don't draw outlines for shapes. |
178 | // TODO Use the element mediator/controller/model to see if its a shape | 177 | // TODO Use the element mediator/controller/model to see if its a shape |
179 | // if (utilsModule.utils.isElementAShape(item)) return; | 178 | // if (utilsModule.utils.isElementAShape(item)) return; |
diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js index f27254f9..709c0201 100755 --- a/js/stage/stage-deps.js +++ b/js/stage/stage-deps.js | |||
@@ -25,7 +25,7 @@ exports.StageDeps = Montage.create(Component, { | |||
25 | return this._currentDocument; | 25 | return this._currentDocument; |
26 | }, | 26 | }, |
27 | set : function(value) { | 27 | set : function(value) { |
28 | if (value === this._currentDocument) {// || value.getProperty("currentView") !== "design") { | 28 | if (value === this._currentDocument) { |
29 | return; | 29 | return; |
30 | } | 30 | } |
31 | 31 | ||
@@ -68,8 +68,6 @@ exports.StageDeps = Montage.create(Component, { | |||
68 | window.MathUtils = MathUtilsClass; | 68 | window.MathUtils = MathUtilsClass; |
69 | window.VecUtils = VecUtils; | 69 | window.VecUtils = VecUtils; |
70 | 70 | ||
71 | snapManager.drawingCanvas = this.stage.drawingCanvas; | ||
72 | |||
73 | // Setup the listeners for the draw-util and snapmanager when removing elements | 71 | // Setup the listeners for the draw-util and snapmanager when removing elements |
74 | // TODO Revisit when supporting multiple documents | 72 | // TODO Revisit when supporting multiple documents |
75 | drawUtils.initialize(); | 73 | drawUtils.initialize(); |
@@ -88,16 +86,6 @@ exports.StageDeps = Montage.create(Component, { | |||
88 | drawUtils.snapManager = snapManager; | 86 | drawUtils.snapManager = snapManager; |
89 | drawUtils.ElementPlanes = ElementPlanes; | 87 | drawUtils.ElementPlanes = ElementPlanes; |
90 | } | 88 | } |
91 | }, | ||
92 | |||
93 | handleSwitchDocument: { | ||
94 | value: function(){ | ||
95 | workingPlane = [0,0,1,0]; | ||
96 | |||
97 | snapManager._isCacheInvalid = true; | ||
98 | snapManager.setupDragPlaneFromPlane (workingPlane); | ||
99 | |||
100 | drawUtils.initializeFromDocument(); | ||
101 | } | ||
102 | } | 89 | } |
90 | |||
103 | }); \ No newline at end of file | 91 | }); \ No newline at end of file |
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 89b674ab..1b5cec17 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": {"@": "stageDeps"}, | 63 | "stageDeps": {"@": "stageDeps"}, |
@@ -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 da5a4f76..4505ff66 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 | ||
@@ -183,7 +189,7 @@ exports.Stage = Montage.create(Component, { | |||
183 | this.initWithDocument(false); | 189 | this.initWithDocument(false); |
184 | } | 190 | } |
185 | } | 191 | } |
186 | }, | 192 | }, |
187 | 193 | ||
188 | _userPaddingLeft: { value: 0 }, | 194 | _userPaddingLeft: { value: 0 }, |
189 | _userPaddingTop: { value: 0 }, | 195 | _userPaddingTop: { value: 0 }, |
@@ -194,7 +200,7 @@ exports.Stage = Montage.create(Component, { | |||
194 | this._userPaddingLeft = value; | 200 | this._userPaddingLeft = value; |
195 | this._documentOffsetLeft = -value; | 201 | this._documentOffsetLeft = -value; |
196 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; | 202 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; |
197 | this.userContentLeft = this._documentOffsetLeft; | 203 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; |
198 | this.updatedStage = true; | 204 | this.updatedStage = true; |
199 | } | 205 | } |
200 | }, | 206 | }, |
@@ -205,7 +211,7 @@ exports.Stage = Montage.create(Component, { | |||
205 | this._userPaddingTop = value; | 211 | this._userPaddingTop = value; |
206 | this._documentOffsetTop = -value; | 212 | this._documentOffsetTop = -value; |
207 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; | 213 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; |
208 | this.userContentTop = this._documentOffsetTop; | 214 | this.userContentTop = this._documentOffsetTop - this._scrollTop; |
209 | this.updatedStage = true; | 215 | this.updatedStage = true; |
210 | } | 216 | } |
211 | }, | 217 | }, |
@@ -214,11 +220,14 @@ exports.Stage = Montage.create(Component, { | |||
214 | value: function() { | 220 | value: function() { |
215 | if(this.resizeCanvases) { | 221 | if(this.resizeCanvases) { |
216 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px | 222 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px |
217 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | 223 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; |
218 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; | 224 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; |
219 | 225 | ||
220 | // Hack for now until a full component | 226 | // Hack for now until a full component |
221 | this.layout.draw(); | 227 | this.layout.draw(); |
228 | if(this.application.ninja.currentDocument) { | ||
229 | this.layout.draw3DInfo(true); | ||
230 | } | ||
222 | } else if(this.updatedStage) { | 231 | } else if(this.updatedStage) { |
223 | this.layout.draw(); | 232 | this.layout.draw(); |
224 | this.layout.draw3DInfo(true); | 233 | this.layout.draw3DInfo(true); |
@@ -238,6 +247,7 @@ exports.Stage = Montage.create(Component, { | |||
238 | 247 | ||
239 | this._context = this._canvas.getContext("2d"); | 248 | this._context = this._canvas.getContext("2d"); |
240 | this._drawingContext= this._drawingCanvas.getContext("2d"); | 249 | this._drawingContext= this._drawingCanvas.getContext("2d"); |
250 | this._gridContext= this._gridCanvas.getContext("2d"); | ||
241 | 251 | ||
242 | // Setup event listeners | 252 | // Setup event listeners |
243 | this._drawingCanvas.addEventListener("mousedown", this, false); | 253 | this._drawingCanvas.addEventListener("mousedown", this, false); |
@@ -281,8 +291,8 @@ exports.Stage = Montage.create(Component, { | |||
281 | var designView = this.application.ninja.currentDocument.model.views.design; | 291 | var designView = this.application.ninja.currentDocument.model.views.design; |
282 | 292 | ||
283 | // Recalculate the canvas sizes because of splitter resizing | 293 | // Recalculate the canvas sizes because of splitter resizing |
284 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | 294 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; |
285 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; | 295 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11; |
286 | 296 | ||
287 | designView.iframe.contentWindow.addEventListener("scroll", this, false); | 297 | designView.iframe.contentWindow.addEventListener("scroll", this, false); |
288 | 298 | ||
@@ -300,6 +310,8 @@ exports.Stage = Montage.create(Component, { | |||
300 | this._scrollLeft = 0; | 310 | this._scrollLeft = 0; |
301 | this._scrollTop = 0; | 311 | this._scrollTop = 0; |
302 | 312 | ||
313 | this.initialize3DOnOpenDocument(); | ||
314 | |||
303 | if(designView._template) { | 315 | if(designView._template) { |
304 | var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); | 316 | var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); |
305 | var initialTop = parseInt((this.canvas.height - designView._template.size.height)/2); | 317 | var initialTop = parseInt((this.canvas.height - designView._template.size.height)/2); |
@@ -521,11 +533,12 @@ exports.Stage = Montage.create(Component, { | |||
521 | this._canvas.style.visibility = "hidden"; |