aboutsummaryrefslogtreecommitdiff
path: root/js/document
diff options
context:
space:
mode:
Diffstat (limited to 'js/document')
-rwxr-xr-xjs/document/html-document.js278
-rwxr-xr-xjs/document/templates/montage-html/default_html.css4
-rw-r--r--js/document/templates/montage-html/main.reel/main.js42
-rwxr-xr-xjs/document/text-document.js8
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//
9var Montage = require("montage/core/core").Montage, 9var 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//
14exports.HTMLDocument = Montage.create(TextDocument, { 16exports.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;
392