Conversion to JSON based file IO for canvas2D and WebGL rendering

1 files changed, 152 insertions, 236 deletions

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index fd823f35..dd4ad6f9 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -37,18 +37,15 @@ function CanvasDataManager()
                 for (var i=0;  i<nWorlds;  i++)
                 {
                         var importStr = value[i];
-                        var startIndex = importStr.indexOf( "id: " );
-                        if (startIndex >= 0)
+                        var jObj = JSON.parse( importStr );
+
+                        var id = jObj.id;
+                        if (id)
                         {
-                                var endIndex = importStr.indexOf( "\n", startIndex );
-                                if (endIndex > 0)
+                                var canvas = this.findCanvasWithID( id, root );
+                                if (canvas)
                                 {
-                                        var id = importStr.substring( startIndex+4, endIndex );
-                                        var canvas = this.findCanvasWithID( id, root );
-                                        if (canvas)
-                                        {
-                                                var rt = new GLRuntime( canvas, importStr,  assetPath );
-                                        }
+                                        new GLRuntime( canvas, jObj,  assetPath );
                                 }
                         }
                 }
@@ -95,14 +92,15 @@ function CanvasDataManager()
 // Class GLRuntime
 //      Manages runtime fora WebGL canvas
 ///////////////////////////////////////////////////////////////////////
-function GLRuntime( canvas, importStr,  assetPath )
+function GLRuntime( canvas, jObj,  assetPath )
 {
     ///////////////////////////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
         this._canvas            = canvas;
         this._context           = null;
-        this._importStr         = importStr;
+        //this._importStr               = importStr;
+        this._jObj                      = jObj;
 
         this.renderer           = null;
         this.myScene            = null;
@@ -157,21 +155,19 @@ function GLRuntime( canvas, importStr,  assetPath )
     ///////////////////////////////////////////////////////////////////////
         this.loadScene = function()
         {
+                var jObj = this._jObj;
+                if (!jObj.children || (jObj.children.length != 1))
+                        throw new Error( "ill-formed JSON for runtime load: " + jObj );
+                var root = jObj.children[0];
+
                 // parse the data
-                // the GL runtime must start with a "sceneData: "
-                var index = importStr.indexOf( "scenedata: " );
-                if (index >= 0)
+                if (jObj.scenedata)
                 {
                         this._useWebGL = true;
 
-                        var rdgeStr = importStr.substr( index+11 );
-                        var endIndex = rdgeStr.indexOf( "endscene\n" );
-                        if (endIndex < 0)  throw new Error( "ill-formed WebGL data" );
-                        var len = endIndex - index + 11;
-                        rdgeStr = rdgeStr.substr( 0, endIndex );
-
+                        var rdgeStr = jObj.scenedata;
                         this.myScene.importJSON( rdgeStr );
-                        this.importObjects( importStr );
+                        this.importObjects( root );
                         this.linkMaterials( this._geomRoot );
                         this.initMaterials();
                         this.linkLights();
@@ -179,7 +175,7 @@ function GLRuntime( canvas, importStr,  assetPath )
                 else
                 {
                         this._context = this._canvas.getContext( "2d" );
-                        this.importObjects( importStr );
+                        this.importObjects( root );
                         this.render();
                 }
         }
@@ -277,58 +273,42 @@ function GLRuntime( canvas, importStr,  assetPath )
                 }
     }
 
-        this.importObjects = function( importStr,  parent )
+        this.importObjects = function( jObj,  parent )
         {
-                var index = importStr.indexOf( "OBJECT\n", 0 );
-                while (index >= 0)
-                {
-                        // update the string to the current object
-                        importStr = importStr.substr( index+7 );
+                // read the next object
+                var gObj = this.importObject( jObj, parent );
 
-                        // read the next object
-                        var obj = this.importObject( importStr, parent );
-
-                        // determine if we have children
-                        var endIndex = importStr.indexOf( "ENDOBJECT\n" ),
-                                childIndex = importStr.indexOf( "OBJECT\n" );
-                        if (endIndex < 0)  throw new Error( "ill-formed object data" );
-                        if ((childIndex >= 0) && (childIndex < endIndex))
+                // load the children
+                if (jObj.children)
+                {
+                        var nKids = jObj.children.length;
+                        for (var i=0;  i<nKids;  i++)
                         {
-                                importStr = importStr.substr( childIndex + 7 );
-                                importStr = this.importObjects( importStr, obj );
-                                endIndex = importStr.indexOf( "ENDOBJECT\n" )
+                                var child = jObj.children[i];
+                                this.importObjects( child, gObj );
                         }
-
-                        // remove the string for the object(s) just created
-                        importStr = importStr.substr( endIndex );
-
-                        // get the location of the next object
-                        index = importStr.indexOf( "OBJECT\n", endIndex );
                 }
-
-                return importStr;
         }
 
-        this.importObject = function( objStr,  parent )
+        this.importObject = function( jObj,  parent )
         {
-                var type = Number( getPropertyFromString( "type: ", objStr ) );
-
+                var type = jObj.type
                 var obj;
                 switch (type)
                 {
                         case 1:
                                 obj = new RuntimeRectangle();
-                                obj.import( objStr, parent );
+                                obj.import( jObj, parent );
                                 break;
 
                         case 2:         // circle
                                 obj = new RuntimeOval();
-                                obj.import( objStr, parent );
+                                obj.import( jObj, parent );
                                 break;
 
                         case 3:         // line
                                 obj = new RuntimeLine();
-                                obj.import( objStr, parent );
+                                obj.import( jObj, parent );
                                 break;
 
                         default:
@@ -337,7 +317,7 @@ function GLRuntime( canvas, importStr,  assetPath )
                 }
 
                 if (obj)
-                        this.addObject( obj );
+                        this.addObject( obj, parent );
 
                 return obj;
         }
@@ -396,17 +376,16 @@ function GLRuntime( canvas, importStr,  assetPath )
 
         this.remapAssetFolder = function( url )
         {
-                /*
-                var searchStr = "assets/";
-                var index = url.indexOf( searchStr );
-                var rtnPath = url;
-                if (index >= 0)
-                {
-                        rtnPath = url.substr( index + searchStr.length );
-                        rtnPath = this._assetPath + rtnPath;
-                }
-                return rtnPath;
-                */
+//              var searchStr = "assets/";
+//              var index = url.indexOf( searchStr );
+//              var rtnPath = url;
+//              if (index >= 0)
+//              {
+//                      rtnPath = url.substr( index + searchStr.length );
+//                      rtnPath = this._assetPath + rtnPath;
+//              }
+//              return rtnPath;
+                
                 return url;
         }
 
@@ -450,8 +429,7 @@ function GLRuntime( canvas, importStr,  assetPath )
         }
 
         // start RDGE or load Canvas 2D objects
-        var index = importStr.indexOf( "scenedata: " );
-        this._useWebGL = (index >= 0);
+        if (jObj.scenedata)  this._useWebGL = true;
         if (this._useWebGL)
         {
                 var id = canvas.getAttribute( "data-RDGE-id" ); 
@@ -515,16 +493,17 @@ function RuntimeGeomObj()
     {
         }
 
-        this.importMaterials = function(importStr)
+        this.importMaterials = function(jObj)