diff options
Diffstat (limited to 'js/document')
-rwxr-xr-x | js/document/html-document.js | 137 |
1 files changed, 129 insertions, 8 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js index b9b68972..05c7d6c0 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 | CanvasDataManager = require("js/lib/rdge/runtime/CanvasDataManager").CanvasDataManager, | ||
13 | GLWorld = require("js/lib/drawing/world").World; | ||
12 | //////////////////////////////////////////////////////////////////////// | 14 | //////////////////////////////////////////////////////////////////////// |
13 | // | 15 | // |
14 | exports.HTMLDocument = Montage.create(TextDocument, { | 16 | exports.HTMLDocument = Montage.create(TextDocument, { |
@@ -206,13 +208,113 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
206 | var elt = this.documentRoot; | 208 | var elt = this.documentRoot; |
207 | if (elt) | 209 | if (elt) |
208 | { | 210 | { |
209 | console.log( "load canvas data: " , value ); | 211 | // FOR JOSE: The following commented out lines are what the runtime |
210 | var cdm = new CanvasDataManager(); | 212 | // version should execute. |
211 | cdm.loadGLData(elt, value); | 213 | // var loadForRuntime = true; |
214 | // if (loadForRuntime) | ||
215 | // { | ||
216 | // var cdm = new CanvasDataManager(); | ||
217 | // cdm.loadGLData(elt, value ); | ||
218 | // } | ||
219 | // else | ||
220 | { | ||
221 | var nWorlds= value.length; | ||
222 | for (var i=0; i<nWorlds; i++) | ||
223 | { | ||
224 | var importStr = value[i]; | ||
225 | var startIndex = importStr.indexOf( "id: " ); | ||
226 | if (startIndex >= 0) | ||
227 | { | ||
228 | var endIndex = importStr.indexOf( "\n", startIndex ); | ||
229 | if (endIndex > 0) | ||
230 | { | ||
231 | var id = importStr.substring( startIndex+4, endIndex ); | ||
232 | if (id) | ||
233 | { | ||
234 | var canvas = this.findCanvasWithID( id, elt ); | ||
235 | if (canvas) | ||
236 | { | ||
237 | if (!canvas.elementModel) | ||
238 | { | ||
239 | NJUtils.makeElementModel(canvas, "Canvas", "shape", true); | ||
240 | } | ||
241 | |||
242 | if (canvas.elementModel) | ||
243 | { | ||
244 | if (canvas.elementModel.shapeModel.GLWorld) | ||
245 | canvas.elementModel.shapeModel.GLWorld.clearTree(); | ||
246 | |||
247 | var index = importStr.indexOf( "webGL: " ); | ||
248 | var useWebGL = (index >= 0) | ||
249 | var world = new GLWorld( canvas, useWebGL ); | ||
250 | world.import( importStr ); | ||
251 | |||
252 | this.buildShapeModel( canvas.elementModel, world ); | ||
253 | } | ||
254 | } | ||
255 | } | ||
256 | } | ||
257 | } | ||
258 | } | ||
259 | } | ||
212 | } | 260 | } |
213 | } | 261 | } |
214 | }, | 262 | }, |
215 | 263 | ||
264 | buildShapeModel: | ||
265 | { | ||
266 | value: function( elementModel, world ) | ||
267 | { | ||
268 | var shapeModel = elementModel.shapeModel; | ||
269 | shapeModel.shapeCount = 1; // for now... | ||
270 | shapeModel.useWebGl = world._useWebGL; | ||
271 | shapeModel.GLWorld = world; | ||
272 | var root = world.getGeomRoot(); | ||
273 | if (root) | ||
274 | { | ||
275 | shapeModel.GLGeomObj = root; | ||
276 | shapeModel.strokeSize = root._strokeWidth; | ||
277 | shapeModel.stroke = root._strokeColor.slice(); | ||
278 | shapeModel.strokeMaterial = root._strokeMaterial.dup(); | ||
279 | shapeModel.strokeStyle = "solid"; | ||
280 | //shapeModel.strokeStyleIndex | ||
281 | //shapeModel.border | ||
282 | //shapeModel.background | ||
283 | switch (root.geomType()) | ||
284 | { | ||
285 | case root.GEOM_TYPE_RECTANGLE: | ||
286 | elementModel.selection = "Rectangle"; | ||
287 | elementModel.pi = "RectanglePi"; | ||
288 | shapeModel.fill = root._fillColor.slice(); | ||
289 | shapeModel.fillMaterial = root._fillMaterial.dup(); | ||
290 | shapeModel.tlRadius = root._tlRadius; | ||
291 | shapeModel.trRadius = root._trRadius; | ||
292 | shapeModel.blRadius = root._blRadius; | ||
293 | shapeModel.brRadius = root._brRadius; | ||
294 | break; | ||
295 | |||
296 | case root.GEOM_TYPE_CIRCLE: | ||
297 | elementModel.selection = "Oval"; | ||
298 | elementModel.pi = "OvalPi"; | ||
299 | shapeModel.fill = root._fillColor.slice(); | ||
300 | shapeModel.fillMaterial = root._fillMaterial.dup(); | ||
301 | shapeModel.innerRadius = root._innerRadius; | ||
302 | break; | ||
303 | |||
304 | case root.GEOM_TYPE_LINE: | ||
305 | elementModel.selection = "Line"; | ||
306 | elementModel.pi = "LinePi"; | ||
307 | shapeModel.slope = root._slope; | ||
308 | break; | ||
309 | |||
310 | default: | ||
311 | console.log( "geometry type not supported for file I/O, " + root.geomType()); | ||
312 | break; | ||
313 | } | ||
314 | } | ||
315 | } | ||
316 | }, | ||
317 | |||
216 | zoomFactor: { | 318 | zoomFactor: { |
217 | get: function() { return this._zoomFactor; }, | 319 | get: function() { return this._zoomFactor; }, |
218 | set: function(value) { this._zoomFactor = value; } | 320 | set: function(value) { this._zoomFactor = value; } |
@@ -240,6 +342,27 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
240 | } | 342 | } |
241 | } | 343 | } |
242 | }, | 344 | }, |
345 | |||
346 | /** | ||
347 | * search the DOM tree to find a canvas with the given id | ||
348 | */ | ||
349 | findCanvasWithID: { | ||
350 | value: function( id, elt ) { | ||
351 | var cid = elt.getAttribute( "data-RDGE-id" ); | ||
352 | if (cid == id) return elt; | ||
353 | |||
354 | if (elt.children) | ||
355 | { | ||
356 | var nKids = elt.children.length; | ||
357 | for (var i=0; i<nKids; i++) | ||
358 | { | ||
359 | var child = elt.children[i]; | ||
360 | var foundElt = this.findCanvasWithID( id, child ); | ||
361 | if (foundElt) return foundElt; | ||
362 | } | ||
363 | } | ||
364 | } | ||
365 | }, | ||
243 | 366 | ||
244 | 367 | ||
245 | 368 | ||
@@ -788,8 +911,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
788 | } | 911 | } |
789 | } | 912 | } |
790 | } | 913 | } |
791 | //return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; | 914 | 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"){ | 915 | } else if (this.currentView === "code"){ |
794 | //TODO: Would this get call when we are in code of HTML? | 916 | //TODO: Would this get call when we are in code of HTML? |
795 | } else { | 917 | } else { |
@@ -812,8 +934,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
812 | } | 934 | } |
813 | } | 935 | } |
814 | } | 936 | } |
815 | //return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; | 937 | return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; |
816 | return {mode: 'html', document: this._userDocument, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; | ||
817 | } else if (this.currentView === "code"){ | 938 | } else if (this.currentView === "code"){ |
818 | //TODO: Would this get call when we are in code of HTML? | 939 | //TODO: Would this get call when we are in code of HTML? |
819 | } else { | 940 | } else { |