diff options
author | Pierre Frisch | 2011-12-22 07:25:50 -0800 |
---|---|---|
committer | Valerio Virgillito | 2012-01-27 11:18:17 -0800 |
commit | b89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch) | |
tree | 0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /js/stage/stage.reel/stage.js | |
parent | 2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff) | |
download | ninja-b89a7ee8b956c96a1dcee995ea840feddc5d4b27.tar.gz |
First commit of Ninja to ninja-internal
Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
Diffstat (limited to 'js/stage/stage.reel/stage.js')
-rw-r--r-- | js/stage/stage.reel/stage.js | 861 |
1 files changed, 861 insertions, 0 deletions
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js new file mode 100644 index 00000000..3e0b852e --- /dev/null +++ b/js/stage/stage.reel/stage.js | |||
@@ -0,0 +1,861 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component; | ||
9 | |||
10 | var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils; | ||
11 | var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; | ||
12 | |||
13 | exports.Stage = Montage.create(Component, { | ||
14 | |||
15 | // TODO - Need to figure out how to remove this dependency | ||
16 | // Needed by some tools that depend on selectionDrawn event to set up some logic | ||
17 | drawNow: { value : false }, | ||
18 | |||
19 | // TO REVIEW | ||
20 | zoomFactor: {value : 1 }, | ||
21 | |||
22 | _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, | ||
23 | _editSymbolPrefs: { value: { "thickness" : 2.0, "color" : "#C61F00" } }, | ||
24 | |||
25 | _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, | ||
26 | drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } }, | ||
27 | |||
28 | _iframeContainer: { value: null }, | ||
29 | |||
30 | _scrollFlag: {value: true, writable: true}, | ||
31 | outFlag: { value: false, writable: true }, | ||
32 | |||
33 | _resizeCanvases: { value: true }, | ||
34 | |||
35 | viewUtils: { | ||
36 | get: function() { return this.stageDeps.viewUtils; } | ||
37 | }, | ||
38 | |||
39 | snapManager: { | ||
40 | get: function() { return this.stageDeps.snapManager; } | ||
41 | }, | ||
42 | |||
43 | resizeCanvases: { | ||
44 | get: function() { | ||
45 | return this._resizeCanvases; | ||
46 | }, | ||
47 | set: function(value) { | ||
48 | this._resizeCanvases = value; | ||
49 | if(value) { | ||
50 | this.needsDraw = true; | ||
51 | } | ||
52 | } | ||
53 | }, | ||
54 | |||
55 | _updatedStage: { value: false }, | ||
56 | |||
57 | updatedStage: { | ||
58 | get: function() { | ||
59 | return this._updatedStage; | ||
60 | }, | ||
61 | set: function(value) { | ||
62 | this._updatedStage = value; | ||
63 | if(value) { | ||
64 | this.needsDraw = true; | ||
65 | } | ||
66 | } | ||
67 | }, | ||
68 | |||
69 | _currentDocumentStageView: { | ||
70 | value: "front" | ||
71 | }, | ||
72 | |||
73 | currentDocumentStageView: { | ||
74 | get: function() { | ||
75 | return this._currentDocumentStageView; | ||
76 | }, | ||
77 | set: function(value) { | ||
78 | if(this._currentDocumentStageView !== value) { | ||
79 | this._currentDocumentStageView = value; | ||
80 | this.setStageView(this.currentDocumentStageView); | ||
81 | } | ||
82 | } | ||
83 | }, | ||
84 | |||
85 | contextMenu: { | ||
86 | value: false | ||
87 | }, | ||
88 | |||
89 | /** MAIN CANVASES **/ | ||
90 | _canvas: { value: null }, // selection bounds, 3d normals and the overall 3d selection box use this canvas | ||
91 | canvas: { get: function() { return this._canvas; } }, | ||
92 | |||
93 | _context: { value: null }, | ||
94 | context: { get: function() { return this._context; } }, | ||
95 | |||
96 | _layoutCanvas: { value: null }, | ||
97 | layoutCanvas: { get: function() { return this._layoutCanvas; } }, | ||
98 | |||
99 | _drawingCanvas: { value: null }, | ||
100 | drawingCanvas: { get: function() { return this._drawingCanvas; } }, | ||
101 | |||
102 | _drawingContext: { value: null }, | ||
103 | drawingContext: { get: function() { return this._drawingContext; } }, | ||
104 | |||
105 | _clickPoint: { value: { x: { value: null }, y: { value: null } } }, | ||
106 | |||
107 | // We will set this to false while moving objects to improve performance | ||
108 | showSelectionBounds: { value: true }, | ||
109 | |||
110 | _documentRoot: { value: null }, | ||
111 | _viewport: { value: null }, | ||
112 | _documentOffsetLeft: { value: 0 }, | ||
113 | _documentOffsetTop: { value: 0 }, | ||
114 | _scrollLeft: { value: 0 }, | ||
115 | _scrollTop: { value: 0 }, | ||
116 | _userContentLeft: { value: 0 }, | ||
117 | _userContentTop: { value: 0 }, | ||
118 | _userContentBorder: { value: 0 }, | ||
119 | savedLeftScroll: { value: null }, | ||
120 | savedTopScroll: { value: null }, | ||
121 | |||
122 | |||
123 | documentRoot: { | ||
124 | get: function () { return this._documentRoot; }, | ||
125 | set: function(value) { this._documentRoot = value; } | ||
126 | }, | ||
127 | |||
128 | viewport: { | ||
129 | get: function () { return this._viewport; }, | ||
130 | set: function(value) { this._viewport = value; } | ||
131 | }, | ||
132 | |||
133 | documentOffsetLeft: { | ||
134 | get: function() { return this._documentOffsetLeft; }, | ||
135 | set: function(value) { this._documentOffsetLeft = value; } | ||
136 | }, | ||
137 | |||
138 | documentOffsetTop: { | ||
139 | get: function() { return this._documentOffsetTop }, | ||
140 | set: function(value) { this._documentOffsetTop = value; } | ||
141 | }, | ||
142 | |||
143 | scrollLeft: { | ||
144 | get: function() { return this._scrollLeft; } | ||
145 | }, | ||
146 | |||
147 | scrollTop: { | ||
148 | get: function() { return this._scrollTop; } | ||
149 | }, | ||
150 | |||
151 | userContentLeft: { | ||
152 | get: function() { return this._userContentLeft; }, | ||
153 | set: function(value) { this._userContentLeft = value; } | ||
154 | }, | ||
155 | |||
156 | userContentTop: { | ||
157 | get: function() { return this._userContentTop; }, | ||
158 | set: function(value) { this._userContentTop = value; } | ||
159 | }, | ||
160 | |||
161 | userContentBorder: { | ||
162 | get: function() { return this._userContentBorder; }, | ||
163 | set: function(value) { this._userContentBorder = value; } | ||
164 | }, | ||
165 | |||
166 | willDraw: { | ||
167 | value: function() { | ||
168 | if(this.resizeCanvases) { | ||
169 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px | ||
170 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | ||
171 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; | ||
172 | |||
173 | // Hack for now until a full component | ||
174 | this.layout.draw(); | ||
175 | } | ||
176 | else if(this.updatedStage) { | ||
177 | this.layout.draw(); | ||
178 | this.layout.draw3DInfo(); | ||
179 | } | ||
180 | } | ||
181 | }, | ||
182 | |||
183 | didDraw: { | ||
184 | value: function() { | ||
185 | this.resizeCanvases = false; | ||
186 | this.updatedStage = false; | ||
187 | } | ||
188 | }, | ||
189 | |||
190 | prepareForDraw: { | ||
191 | value: function() { | ||
192 | |||
193 | this._context = this._canvas.getContext("2d"); | ||
194 | this._drawingContext= this._drawingCanvas.getContext("2d"); | ||
195 | |||
196 | this._scrollLeft = this._iframeContainer.scrollLeft; | ||
197 | this._scrollTop = this._iframeContainer.scrollTop; | ||
198 | this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; | ||
199 | this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; | ||
200 | |||
201 | // TODO: Fix the mouse wheel scroll | ||
202 | // this._canvas.addEventListener("mousewheel", this, false); | ||
203 | |||
204 | // Setup event listeners | ||
205 | this._drawingCanvas.addEventListener("mousedown", this, false); | ||
206 | this._drawingCanvas.addEventListener("mouseup", this, false); | ||
207 | this._drawingCanvas.addEventListener("dblclick", this, false); | ||
208 | |||
209 | // Hide the canvas | ||
210 | this.hideCanvas(true); | ||
211 | |||
212 | this.eventManager.addEventListener( "appMouseUp", this, false); | ||
213 | |||
214 | |||
215 | this.eventManager.addEventListener( "openDocument", this, false); | ||
216 | this.eventManager.addEventListener( "enableStageMove", this, false); | ||
217 | this.eventManager.addEventListener( "disableStageMove", this, false); | ||
218 | |||
219 | this.eventManager.addEventListener( "selectionChange", this, false); | ||
220 | this.eventManager.addEventListener( "elementChanging", this, false); | ||
221 | this.eventManager.addEventListener( "elementChange", this, false); | ||
222 | |||
223 | } | ||
224 | }, | ||
225 | |||
226 | // Event details will contain the active document prior to opening a new one | ||
227 | handleOpenDocument: { | ||
228 | value: function(evt) { | ||
229 | |||
230 | var prevActiveDocument = evt.detail; | ||
231 | // Hide current document is one is open | ||
232 | if(prevActiveDocument) { | ||
233 | prevActiveDocument.container.style["display"] = "none"; | ||
234 | if(prevActiveDocument.documentType === "htm" || prevActiveDocument.documentType === "html") this.hideCanvas(true); | ||
235 | } | ||
236 | |||
237 | this.hideCanvas(false); | ||
238 | |||