Merge pull request #105 from joseeight/FileIO-Build-Candidate

File I/O adding webGL/canvas data functionality

1 files changed, 127 insertions, 22 deletions

diff --git a/js/document/html-document.js b/js/document/html-document.js
index 23b55e92..051490f5 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
 //
 var Montage =           require("montage/core/core").Montage,
     TextDocument =      require("js/document/text-document").TextDocument,
-    NJUtils =           require("js/lib/NJUtils").NJUtils;
+    NJUtils =           require("js/lib/NJUtils").NJUtils,
+        GLWorld =                       require("js/lib/drawing/world").World;
 ////////////////////////////////////////////////////////////////////////
 //
 exports.HTMLDocument = Montage.create(TextDocument, {
@@ -187,31 +188,112 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 //    },
     
     glData: {
-        get: function()
-                {
+        get: function() {
+                        //
                         var elt = this.iframe.contentWindow.document.getElementById("UserContent");
-                        this._glData = null;
-                        if (elt)
-                        {
-                                var cdm = new CanvasDataManager();
+                        //
+                        if (elt) {
                                 this._glData = [];
-                                cdm.collectGLData( elt,  this._glData );
+                                //if (path) {
+                                        //this.collectGLData(elt, this._glData, path);
+                                //} else {
+                                        this.collectGLData(elt, this._glData );
+                                //}
+                        } else {
+                                this._glData = null
                         }
-                                
+                        //      
                         return this._glData;
                 },
+        set: function(value) {
+                        var elt = this.documentRoot;
+                        if (elt) {
+                                var nWorlds= value.length;
+                                for (var i=0;  i<nWorlds;  i++) {
+                                        var importStr = value[i];
+                                        var startIndex = importStr.indexOf( "id: " );
+                                        if (startIndex >= 0) {
+                                                var endIndex = importStr.indexOf( "\n", startIndex );
+                                                if (endIndex > 0) {
+                                                        var id = importStr.substring( startIndex+4, endIndex );
+                                                        if (id) {
+                                                                var canvas = this.findCanvasWithID( id, elt );
+                                                                if (canvas) {
+                                                                        if (!canvas.elementModel) {
+                                                                                NJUtils.makeElementModel(canvas, "Canvas", "shape", true);
+                                                                        }
+                                                                        if (canvas.elementModel) {
+                                                                                if (canvas.elementModel.shapeModel.GLWorld) {
+                                                                                        canvas.elementModel.shapeModel.GLWorld.clearTree();
+                                                                                }
+                                                                                var index = importStr.indexOf( "webGL: " );
+                                                                                var useWebGL = (index >= 0)
+                                                                                var world = new GLWorld( canvas, useWebGL );
+                                                                                world.import( importStr );
+                                                                                this.buildShapeModel( canvas.elementModel, world );
+                                                                        }
+                                                                }
+                                                        }
+                                                }
+                                        }
+                                }
+                        }
+                }
+    },
 
-        set: function(value)
+        buildShapeModel:
+        {
+                value: function( elementModel, world )
                 {
-                        var elt = this.documentRoot;
-                        if (elt)
+            var shapeModel = elementModel.shapeModel;
+                        shapeModel.shapeCount   = 1;    // for now...
+                        shapeModel.useWebGl             = world._useWebGL;
+                        shapeModel.GLWorld              = world;
+                        var root = world.getGeomRoot();
+                        if (root)
                         {
-                                console.log( "load canvas data: " , value );
-                                var cdm = new CanvasDataManager();
-                                cdm.loadGLData(elt,  value);
+                                shapeModel.GLGeomObj                    = root;
+                                shapeModel.strokeSize                   = root._strokeWidth;
+                                shapeModel.stroke                               = root._strokeColor.slice();
+                                shapeModel.strokeMaterial               = root._strokeMaterial.dup();
+                                shapeModel.strokeStyle                  = "solid";
+                                //shapeModel.strokeStyleIndex
+                                //shapeModel.border
+                                //shapeModel.background
+                                switch (root.geomType())
+                                {
+                                        case root.GEOM_TYPE_RECTANGLE:
+                        elementModel.selection = "Rectangle";
+                        elementModel.pi = "RectanglePi";
+                        shapeModel.fill                                 = root._fillColor.slice();
+                        shapeModel.fillMaterial                 = root._fillMaterial.dup();
+                                                shapeModel.tlRadius = root._tlRadius;
+                                                shapeModel.trRadius = root._trRadius;
+                                                shapeModel.blRadius = root._blRadius;
+                                                shapeModel.brRadius = root._brRadius;
+                                                break;
+
+                                        case root.GEOM_TYPE_CIRCLE:
+                        elementModel.selection = "Oval";
+                        elementModel.pi = "OvalPi";
+                        shapeModel.fill                                 = root._fillColor.slice();
+                        shapeModel.fillMaterial                 = root._fillMaterial.dup();
+                                                shapeModel.innerRadius = root._innerRadius;
+                                                break;
+
+                                        case root.GEOM_TYPE_LINE:
+                        elementModel.selection = "Line";
+                        elementModel.pi = "LinePi";
+                                                shapeModel.slope = root._slope;
+                                                break;
+
+                                        default:
+                                                console.log( "geometry type not supported for file I/O, " + root.geomType());
+                                                break;
+                                }
                         }
                 }
-    },
+        },
 
     zoomFactor: {
         get: function() { return this._zoomFactor; },
@@ -240,6 +322,27 @@ exports.HTMLDocument = Montage.create(TextDocument, {
             }
         }
     },
+
+    /**
+     * search the DOM tree to find a canvas with the given id
+     */
+        findCanvasWithID:  {
+                value: function( id,  elt )  {
+                        var cid = elt.getAttribute( "data-RDGE-id" );
+                        if (cid == id)  return elt;
+
+                        if (elt.children)
+                        {
+                                var nKids = elt.children.length;
+                                for (var i=0;  i<nKids;  i++)
+                                {
+                                        var child = elt.children[i];
+                                        var foundElt = this.findCanvasWithID( id, child );
+                                        if (foundElt)  return foundElt;
+                                }
+                        }
+                }
+        },
     
     
     
@@ -768,8 +871,12 @@ exports.HTMLDocument = Montage.create(TextDocument, {
         value: function () {
                 //TODO: Add logic to handle save before preview
                 this.application.ninja.documentController.handleExecuteSaveAll(null);
-                //Launching 'blank' tab for testing movie
-                window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);
+                //Temp check for webGL Hack
+                if (this.application.ninja.documentController.activeDocument.glData.length && this.application.ninja.documentController.activeDocument.glData.length > 0) {
+                        setTimeout(function () {window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);}.bind(this), 3500);
+                } else {
+                        window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);
+                }
                 //chrome.tabs.create({url: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]});          
         }
     },
@@ -788,8 +895,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                 }
                         }
                 }
-                        //return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
-                        return {mode: 'html', document: this._userDocument, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
+                        return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
                 } else if (this.currentView === "code"){
                         //TODO: Would this get call when we are in code of HTML?
                 } else {
@@ -812,8 +918,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                 }
                         }
                 }
-                        //return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
-                        return {mode: 'html', document: this._userDocument, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
+                        return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};