diff options
Diffstat (limited to 'js/document')
-rwxr-xr-x | js/document/html-document.js | 278 | ||||
-rwxr-xr-x | js/document/templates/montage-html/default_html.css | 4 | ||||
-rw-r--r-- | js/document/templates/montage-html/main.reel/main.js | 42 | ||||
-rwxr-xr-x | js/document/text-document.js | 8 |
4 files changed, 224 insertions, 108 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js index 23b55e92..42a7d537 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js | |||
@@ -8,7 +8,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
8 | // | 8 | // |
9 | var Montage = require("montage/core/core").Montage, | 9 | var Montage = require("montage/core/core").Montage, |
10 | TextDocument = require("js/document/text-document").TextDocument, | 10 | TextDocument = require("js/document/text-document").TextDocument, |
11 | NJUtils = require("js/lib/NJUtils").NJUtils; | 11 | NJUtils = require("js/lib/NJUtils").NJUtils, |
12 | GLWorld = require("js/lib/drawing/world").World, | ||
13 | MaterialsModel = require("js/models/materials-model").MaterialsModel; | ||
12 | //////////////////////////////////////////////////////////////////////// | 14 | //////////////////////////////////////////////////////////////////////// |
13 | // | 15 | // |
14 | exports.HTMLDocument = Montage.create(TextDocument, { | 16 | exports.HTMLDocument = Montage.create(TextDocument, { |
@@ -187,32 +189,171 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
187 | // }, | 189 | // }, |
188 | 190 | ||
189 | glData: { | 191 | glData: { |
190 | get: function() | 192 | get: function() { |
191 | { | 193 | // |
192 | var elt = this.iframe.contentWindow.document.getElementById("UserContent"); | 194 | var elt = this.iframe.contentWindow.document.getElementById("UserContent"); |
193 | this._glData = null; | 195 | // |
194 | if (elt) | 196 | if (elt) { |
195 | { | 197 | var matLib = MaterialsModel.exportMaterials(); |
196 | var cdm = new CanvasDataManager(); | 198 | this._glData = [matLib]; |
197 | this._glData = []; | 199 | this.collectGLData(elt, this._glData ); |
198 | cdm.collectGLData( elt, this._glData ); | 200 | } else { |
201 | this._glData = null | ||
199 | } | 202 | } |
200 | 203 | // | |
201 | return this._glData; | 204 | return this._glData; |
202 | }, | 205 | }, |
203 | 206 | set: function(value) { | |
204 | set: function(value) | ||
205 | { | ||
206 | var elt = this.documentRoot; | 207 | var elt = this.documentRoot; |
207 | if (elt) | 208 | if (elt) |
208 | { | 209 | { |
209 | console.log( "load canvas data: " , value ); | 210 | var nWorlds= value.length; |
210 | var cdm = new CanvasDataManager(); | 211 | for (var i=0; i<nWorlds; i++) |
211 | cdm.loadGLData(elt, value); | 212 | { |
213 | /* | ||
214 | // Use this code to test the runtime version of WebGL | ||
215 | var cdm = new CanvasDataManager(); | ||
216 | cdm.loadGLData(elt, value, null ); | ||
217 | */ | ||
218 | |||
219 | // /* | ||
220 | // get the data for the next canvas | ||
221 | var importStr = value[i]; | ||
222 | |||
223 | // determine if it is the new (JSON) or old style format | ||
224 | var id = null; | ||
225 | var jObj = null; | ||
226 | var index = importStr.indexOf( ';' ); | ||
227 | if ((importStr[0] === 'v') && (index < 24)) | ||
228 | { | ||
229 | // JSON format. pull off the | ||
230 | importStr = importStr.substr( index+1 ); | ||
231 | jObj = jObj = JSON.parse( importStr ); | ||
232 | id = jObj.id; | ||
233 | } | ||
234 | else | ||
235 | { | ||
236 | // at this point the data could be either the materials library or | ||
237 | // an old style world. We can determine which by converting the string | ||
238 | // to an object via JSON.parse. That operation will fail if the string | ||
239 | // is an old style world. | ||
240 | var matLibStr = 'materialLibrary;'; | ||
241 | index = importStr.indexOf( matLibStr ); | ||
242 | if (index == 0) | ||
243 | { | ||
244 | importStr = importStr.substr( matLibStr.length ); | ||
245 | var matLibObj = JSON.parse( importStr ); | ||
246 | MaterialsModel.importMaterials( matLibObj ); | ||
247 | } | ||
248 | else | ||
249 | { | ||
250 | var startIndex = importStr.indexOf( "id: " ); | ||
251 | if (startIndex >= 0) { | ||
252 | var endIndex = importStr.indexOf( "\n", startIndex ); | ||
253 | if (endIndex > 0) | ||
254 | id = importStr.substring( startIndex+4, endIndex ); | ||
255 | } | ||
256 | } | ||
257 | } | ||
258 | |||
259 | if (id != null) | ||
260 | { | ||
261 | var canvas = this.findCanvasWithID( id, elt ); | ||
262 | if (canvas) | ||
263 | { | ||
264 | if (!canvas.elementModel) | ||
265 | { | ||
266 | NJUtils.makeElementModel(canvas, "Canvas", "shape", true); | ||
267 | } | ||
268 | if (canvas.elementModel) | ||
269 | { | ||
270 | if (canvas.elementModel.shapeModel.GLWorld) | ||
271 | canvas.elementModel.shapeModel.GLWorld.clearTree(); | ||
272 | |||
273 | if (jObj) | ||
274 | { | ||
275 | var useWebGL = jObj.webGL; | ||
276 | var world = new GLWorld( canvas, useWebGL ); | ||
277 | world.importJSON( jObj ); | ||
278 | } | ||
279 | else | ||
280 | { | ||
281 | var index = importStr.indexOf( "webGL: " ); | ||
282 | var useWebGL = (index >= 0); | ||
283 | var world = new GLWorld( canvas, useWebGL ); | ||
284 | world.import( importStr ); | ||
285 | } | ||
286 | |||
287 | this.buildShapeModel( canvas.elementModel, world ); | ||
288 | } | ||
289 | } | ||
290 | } | ||
291 | // */ | ||
292 | } | ||
212 | } | 293 | } |
213 | } | 294 | } |
214 | }, | 295 | }, |
215 | 296 | ||
297 | buildShapeModel: | ||
298 | { | ||
299 | value: function( elementModel, world ) | ||
300 | { | ||
301 | var shapeModel = elementModel.shapeModel; | ||
302 | shapeModel.shapeCount = 1; // for now... | ||
303 | shapeModel.useWebGl = world._useWebGL; | ||
304 | shapeModel.GLWorld = world; | ||
305 | var root = world.getGeomRoot(); | ||
306 | if (root) | ||
307 | { | ||
308 | shapeModel.GLGeomObj = root; | ||
309 | shapeModel.strokeSize = root._strokeWidth; | ||
310 | shapeModel.stroke = root._strokeColor.slice(); | ||
311 | shapeModel.strokeMaterial = root._strikeMaterial ? root._strokeMaterial.dup() : null; | ||
312 | shapeModel.strokeStyle = "solid"; | ||
313 | //shapeModel.strokeStyleIndex | ||
314 | //shapeModel.border | ||
315 | //shapeModel.background | ||
316 | switch (root.geomType()) | ||
317 | { | ||
318 | case root.GEOM_TYPE_RECTANGLE: | ||
319 | elementModel.selection = "Rectangle"; | ||
320 | elementModel.pi = "RectanglePi"; | ||
321 | shapeModel.fill = root._fillColor.slice(); | ||
322 | shapeModel.fillMaterial = root._fillMaterial ? root._fillMaterial.dup() : null; | ||
323 | shapeModel.tlRadius = root._tlRadius; | ||
324 | shapeModel.trRadius = root._trRadius; | ||
325 | shapeModel.blRadius = root._blRadius; | ||
326 | shapeModel.brRadius = root._brRadius; | ||
327 | break; | ||
328 | |||
329 | case root.GEOM_TYPE_CIRCLE: | ||
330 | elementModel.selection = "Oval"; | ||
331 | elementModel.pi = "OvalPi"; | ||
332 | shapeModel.fill = root._fillColor.slice(); | ||
333 | shapeModel.fillMaterial = root._fillMaterial ? root._fillMaterial.dup() : null; | ||
334 | shapeModel.innerRadius = root._innerRadius; | ||
335 | break; | ||
336 | |||
337 | case root.GEOM_TYPE_LINE: | ||
338 | elementModel.selection = "Line"; | ||
339 | elementModel.pi = "LinePi"; | ||
340 | shapeModel.slope = root._slope; | ||
341 | break; | ||
342 | |||
343 | case root.GEOM_TYPE_BRUSH_STROKE: | ||
344 | elementModel.selection = "BrushStroke"; | ||
345 | elementModel.pi = "BrushStrokePi"; | ||
346 | break; | ||
347 | |||
348 | |||
349 | default: | ||
350 | console.log( "geometry type not supported for file I/O, " + root.geomType()); | ||
351 | break; | ||
352 | } | ||
353 | } | ||
354 | } | ||
355 | }, | ||
356 | |||
216 | zoomFactor: { | 357 | zoomFactor: { |
217 | get: function() { return this._zoomFactor; }, | 358 | get: function() { return this._zoomFactor; }, |
218 | set: function(value) { this._zoomFactor = value; } | 359 | set: function(value) { this._zoomFactor = value; } |
@@ -240,6 +381,27 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
240 | } | 381 | } |
241 | } | 382 | } |
242 | }, | 383 | }, |
384 | |||
385 | /** | ||
386 | * search the DOM tree to find a canvas with the given id | ||
387 | */ | ||
388 | findCanvasWithID: { | ||
389 | value: function( id, elt ) { | ||
390 | var cid = elt.getAttribute( "data-RDGE-id" ); | ||
391 | if (cid == id) return elt; | ||