aboutsummaryrefslogtreecommitdiff
path: root/js/document
diff options
context:
space:
mode:
Diffstat (limited to 'js/document')
-rwxr-xr-xjs/document/html-document.js147
1 files changed, 124 insertions, 23 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 23b55e92..aa56fd0e 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -8,7 +8,8 @@ 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;
12//////////////////////////////////////////////////////////////////////// 13////////////////////////////////////////////////////////////////////////
13// 14//
14exports.HTMLDocument = Montage.create(TextDocument, { 15exports.HTMLDocument = Montage.create(TextDocument, {
@@ -187,31 +188,112 @@ exports.HTMLDocument = Montage.create(TextDocument, {
187// }, 188// },
188 189
189 glData: { 190 glData: {
190 get: function() 191 get: function() {
191 { 192 //
192 var elt = this.iframe.contentWindow.document.getElementById("UserContent"); 193 var elt = this.iframe.contentWindow.document.getElementById("UserContent");
193 this._glData = null; 194 //
194 if (elt) 195 if (elt) {
195 {
196 var cdm = new CanvasDataManager();
197 this._glData = []; 196 this._glData = [];
198 cdm.collectGLData( elt, this._glData ); 197 //if (path) {
198 //this.collectGLData(elt, this._glData, path);
199 //} else {
200 this.collectGLData(elt, this._glData, "assets/");
201 //}
202 } else {
203 this._glData = null
199 } 204 }
200 205 //
201 return this._glData; 206 return this._glData;
202 }, 207 },
208 set: function(value) {
209 var elt = this.documentRoot;
210 if (elt) {
211 var nWorlds= value.length;
212 for (var i=0; i<nWorlds; i++) {
213 var importStr = value[i];
214 var startIndex = importStr.indexOf( "id: " );
215 if (startIndex >= 0) {
216 var endIndex = importStr.indexOf( "\n", startIndex );
217 if (endIndex > 0) {
218 var id = importStr.substring( startIndex+4, endIndex );
219 if (id) {
220 var canvas = this.findCanvasWithID( id, elt );
221 if (canvas) {
222 if (!canvas.elementModel) {
223 NJUtils.makeElementModel(canvas, "Canvas", "shape", true);
224 }
225 if (canvas.elementModel) {
226 if (canvas.elementModel.shapeModel.GLWorld) {
227 canvas.elementModel.shapeModel.GLWorld.clearTree();
228 }
229 var index = importStr.indexOf( "webGL: " );
230 var useWebGL = (index >= 0)
231 var world = new GLWorld( canvas, useWebGL );
232 world.import( importStr );
233 this.buildShapeModel( canvas.elementModel, world );
234 }
235 }
236 }
237 }
238 }
239 }
240 }
241 }
242 },
203 243
204 set: function(value) 244 buildShapeModel:
245 {
246 value: function( elementModel, world )
205 { 247 {
206 var elt = this.documentRoot; 248 var shapeModel = elementModel.shapeModel;
207 if (elt) 249 shapeModel.shapeCount = 1; // for now...
250 shapeModel.useWebGl = world._useWebGL;
251 shapeModel.GLWorld = world;
252 var root = world.getGeomRoot();
253 if (root)
208 { 254 {
209 console.log( "load canvas data: " , value ); 255 shapeModel.GLGeomObj = root;
210 var cdm = new CanvasDataManager(); 256 shapeModel.strokeSize = root._strokeWidth;
211 cdm.loadGLData(elt, value); 257 shapeModel.stroke = root._strokeColor.slice();
258 shapeModel.strokeMaterial = root._strokeMaterial.dup();
259 shapeModel.strokeStyle = "solid";
260 //shapeModel.strokeStyleIndex
261 //shapeModel.border
262 //shapeModel.background
263 switch (root.geomType())
264 {
265 case root.GEOM_TYPE_RECTANGLE:
266 elementModel.selection = "Rectangle";
267 elementModel.pi = "RectanglePi";
268 shapeModel.fill = root._fillColor.slice();
269 shapeModel.fillMaterial = root._fillMaterial.dup();
270 shapeModel.tlRadius = root._tlRadius;
271 shapeModel.trRadius = root._trRadius;
272 shapeModel.blRadius = root._blRadius;
273 shapeModel.brRadius = root._brRadius;
274 break;
275
276 case root.GEOM_TYPE_CIRCLE:
277 elementModel.selection = "Oval";
278 elementModel.pi = "OvalPi";
279 shapeModel.fill = root._fillColor.slice();
280 shapeModel.fillMaterial = root._fillMaterial.dup();
281 shapeModel.innerRadius = root._innerRadius;
282 break;
283
284 case root.GEOM_TYPE_LINE:
285 elementModel.selection = "Line";
286 elementModel.pi = "LinePi";
287 shapeModel.slope = root._slope;
288 break;
289
290 default:
291 console.log( "geometry type not supported for file I/O, " + root.geomType());
292 break;
293 }
212 } 294 }
213 } 295 }
214 }, 296 },
215 297
216 zoomFactor: { 298 zoomFactor: {
217 get: function() { return this._zoomFactor; }, 299 get: function() { return this._zoomFactor; },
@@ -240,6 +322,27 @@ exports.HTMLDocument = Montage.create(TextDocument, {
240 } 322 }
241 } 323 }
242 }, 324 },
325
326 /**
327 * search the DOM tree to find a canvas with the given id
328 */
329 findCanvasWithID: {
330 value: function( id, elt ) {
331 var cid = elt.getAttribute( "data-RDGE-id" );
332 if (cid == id) return elt;
333
334 if (elt.children)
335 {
336 var nKids = elt.children.length;
337 for (var i=0; i<nKids; i++)
338 {
339 var child = elt.children[i];
340 var foundElt = this.findCanvasWithID( id, child );
341 if (foundElt) return foundElt;
342 }
343 }
344 }
345 },
243 346
244 347
245 348
@@ -265,11 +368,11 @@ exports.HTMLDocument = Montage.create(TextDocument, {
265 368
266 369
267 collectGLData: { 370 collectGLData: {
268 value: function( elt, dataArray ) 371 value: function( elt, dataArray, imagePath )
269 { 372 {
270 if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) 373 if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
271 { 374 {
272 var data = elt.elementModel.shapeModel.GLWorld.export(); 375 var data = elt.elementModel.shapeModel.GLWorld.export( imagePath );
273 dataArray.push( data ); 376 dataArray.push( data );
274 } 377 }
275 378
@@ -279,7 +382,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
279 for (var i=0; i<nKids; i++) 382 for (var i=0; i<nKids; i++)
280 { 383 {
281 var child = elt.children[i]; 384 var child = elt.children[i];
282 this.collectGLData( child, dataArray ); 385 this.collectGLData( child, dataArray, imagePath );
283 } 386 }
284 } 387 }
285 } 388 }
@@ -788,8 +891,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
788 } 891 }
789 } 892 }
790 } 893 }
791 //return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; 894 return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
792 return {mode: 'html', document: this._userDocument, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
793 } else if (this.currentView === "code"){ 895 } else if (this.currentView === "code"){
794 //TODO: Would this get call when we are in code of HTML? 896 //TODO: Would this get call when we are in code of HTML?
795 } else { 897 } else {
@@ -812,8 +914,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
812 } 914 }
813 } 915 }
814 } 916 }
815 //return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; 917 return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};