From d4976b9e129f690b3255d5c0347c410234f7cefa Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Mon, 7 May 2012 16:15:35 -0700
Subject: Extracting CSS methods to parsing class.

Need to do the same with webGL.
---
 js/document/document-html.js        |   6 +-
 js/document/helpers/url-parser.js   |  57 ++++++++++++---
 js/document/helpers/webgl-parser.js |  23 +++++++
 js/document/views/design.js         | 134 +++++++++++++-----------------------
 4 files changed, 125 insertions(+), 95 deletions(-)
 create mode 100755 js/document/helpers/webgl-parser.js

(limited to 'js')

diff --git a/js/document/document-html.js b/js/document/document-html.js
index 79fe461b..567e4455 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -81,6 +81,10 @@ exports.HtmlDocument = Montage.create(Component, {
            	}
             //
             if (view === 'design') {
+            	//TODO: Remove reference and use as part of model
+            	this.currentView = 'design';
+            	//Setting current view object to design
+            	this.model.currentView = this.model.views.design;
             	//Showing design iFrame
             	this.model.views.design.show();
             	this.model.views.design.iframe.style.opacity = 0;
@@ -118,8 +122,6 @@ exports.HtmlDocument = Montage.create(Component, {
     	    this.loaded.callback.call(this.loaded.context, this);
     	    //Setting opacity to be viewable after load
 		   	this.model.views.design.iframe.style.opacity = 1;
-			//TODO: Remove, this is a temp hard-coded hack
-            this.application.ninja.appModel.show3dGrid = true;
     	}
     }
     ////////////////////////////////////////////////////////////////////
diff --git a/js/document/helpers/url-parser.js b/js/document/helpers/url-parser.js
index a1a7406a..5e71d148 100755
--- a/js/document/helpers/url-parser.js
+++ b/js/document/helpers/url-parser.js
@@ -18,24 +18,65 @@ exports.UrlParser = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
 	//
-	parseStyles: {
-        value: function (styles) {
+	parseStyleUrls: {
+        value: function (css, href, local) {
         	//
+        	if (local) {
+        		var fileCouldDirUrl = href.split(href.split('/')[href.split('/').length-1])[0];
+        	} else {
+        		//TODO: Add logic for external URLs
+        	}
+        	//TODO: Clean up functions
+        	css = css.replace(/url\(()(.+?)\1\)/g, parseToNinjaUrl.bind(this));
+			//
+			function parseToNinjaUrl (prop) {
+				//
+				return prop.replace(/[^()\\""\\'']+/g, prefixWithNinjaUrl.bind(this));
+			}
+			//
+			function prefixWithNinjaUrl (url) {
+				//
+				if (url !== 'url' && !url.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) {
+					url = fileCouldDirUrl+url;
+				}
+				//
+				return url;
+			}
+			//
+			return css;
         }
     },
     ////////////////////////////////////////////////////////////////////
 	//
 	loadLocalStyleSheet: {
-        value: function (path) {
-        	//
+        value: function (href) {
+        	//Getting file URI (not URL since we must load through I/O API)
+			var css = {}, file;
+			css.cssUrl =  href.split(this.application.ninja.coreIoApi.rootUrl)[1];
+			css.fileUri = this.application.ninja.coreIoApi.cloudData.root + css.cssUrl;
+			//Loading data from CSS file
+			file = this.application.ninja.coreIoApi.readFile({uri: css.fileUri});
+			//Checking for file to be writable on disk
+			css.writable = JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: css.fileUri}).content).readOnly;
+			//Returning loaded file
+			if (file && file.content) {
+				//Getting file contents
+				css.content = this.parseStyleUrls(file.content, href, true);
+				//Returning CSS object
+				return css;
+			} else {
+				return false;
+			}
         }
-    }
-    ,
+    },
     ////////////////////////////////////////////////////////////////////
 	//
 	loadExternalStyleSheet: {
-        value: function (path) {
-        	//
+        value: function (href) {
+        	//Loading external file
+        	var file = this.application.ninja.coreIoApi.readExternalFile({url: href, binary: false});
+        	//Returning file
+        	return file;
         }
     }
 	////////////////////////////////////////////////////////////////////
diff --git a/js/document/helpers/webgl-parser.js b/js/document/helpers/webgl-parser.js
new file mode 100755
index 00000000..b52ea52b
--- /dev/null
+++ b/js/document/helpers/webgl-parser.js
@@ -0,0 +1,23 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = 	require("montage/core/core").Montage,
+	Component = require("montage/ui/component").Component;
+////////////////////////////////////////////////////////////////////////
+//	
+exports.webGlDocumentParser = Montage.create(Component, {
+	////////////////////////////////////////////////////////////////////
+	//
+	hasTemplate: {
+        value: false
+    }
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+});
+////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 8c6ace8e..2b8ccb26 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -131,9 +131,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     		this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]);
    			//Getting style and link tags in document
             var stags = this.document.getElementsByTagName('style'),
-            	ltags = this.document.getElementsByTagName('link'),
-            	scripttags = this.document.getElementsByTagName('script'),
-            	i, n, webgldata;
+            	ltags = this.document.getElementsByTagName('link'), i,
+            	scripttags = this.document.getElementsByTagName('script');
            	//Temporarily checking for disabled special case (we must enabled for Ninja to access styles)
            	this.ninjaDisableAttribute(stags);
            	this.ninjaDisableAttribute(ltags);
@@ -152,28 +151,16 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
 					}
 				}
 			}
-            //Checking for webGL Data
-            for (var w in scripttags) {
-            	//
-            	webgldata = null;
-            	//
-            	if (scripttags[w].getAttribute) {
-            		if (scripttags[w].getAttribute('data-ninja-webgl') !== null) {
-            			//TODO: Add logic to handle more than one data tag
-            			webgldata = JSON.parse((scripttags[w].innerHTML.replace("(", "")).replace(")", ""));
-            		}
-            		//
-            		if (webgldata) {
-            			for (n = 0; webgldata.data[n]; n++) {
-            				webgldata.data[n] = unescape(webgldata.data[n]);
-            			}
-            			//this._templateDocument.webgl = webgldata.data;
-            			this.model.glData = webgldata.data;
-            		}
-            	}
-            }
+            //Checking and initializing webGL
+            if (scripttags.length > 0) {
+            	this.initWebGl(scripttags);
+            } //Else there is not data to parse
+    		
+    		
     		
     		//TODO: Load Montage Components (blocking)
+    		//this.initMontage();
+    		
     		
     		//Makign callback if specified
     		if (this._callback) this._callback();
@@ -195,31 +182,28 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
 		}
 	},
     ////////////////////////////////////////////////////////////////////
-	//
+	//TODO: Move to url-parser helper class
     getStyleTagFromCssFile: {
         value: function (linktag) {
         	//
-        	var tag, cssUrl, fileUri, cssData, docRootUrl;
+        	var tag, cssData,
+	        	//TODO: Remove usage of hack reference of URL
+        		docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
         	//Creating style tag to load CSS content into
 			tag = this.document.createElement('style');
 			tag.setAttribute('type', 'text/css');
-        	//TODO: Remove usage of hack reference of URL
-        	docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
         	//Checking for location of href to load (special case for cross-domain)
 			if (linktag.href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
-				//Getting file URI (not URL since we must load through I/O API)
-				cssUrl =  linktag.href.split(this.application.ninja.coreIoApi.rootUrl)[1];
-				fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl;
-				//Loading data from CSS file
-				cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
+				//Loading data from file
+				cssData = this.urlParser.loadLocalStyleSheet(linktag.href);
 				//Setting properties of locally loaded styles
-				tag.setAttribute('data-ninja-uri', fileUri);
-				tag.setAttribute('data-ninja-file-url', cssUrl);
-				tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly);
-				tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]);
+				tag.setAttribute('data-ninja-uri', cssData.fileUri);
+				tag.setAttribute('data-ninja-file-url', cssData.cssUrl);
+				tag.setAttribute('data-ninja-file-read-only', cssData.writable);
+				tag.setAttribute('data-ninja-file-name', cssData.cssUrl.split('/')[cssData.cssUrl.split('/').length-1]);
 			} else {
 				//Cross-domain content
-				cssData = this.application.ninja.coreIoApi.readExternalFile({url: linktag.href, binary: false});
+				cssData = this.urlParser.loadExternalStyleSheet(linktag.href);
 				//Setting properties of externally loaded styles
 				tag.setAttribute('data-ninja-external-url', linktag.href);
 				tag.setAttribute('data-ninja-file-read-only', "true");
@@ -235,58 +219,38 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
 					}
 				}					
 			}
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			////////////////////////////////////////////////////////
-			////////////////////////////////////////////////////////
-			//TODO: Clean up and make proper method
-			fileCouldDirUrl = linktag.href.split(linktag.href.split('/')[linktag.href.split('/').length-1])[0];
-			//
-			if (cssData && cssData.content) {
-				tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, parseToNinjaUrl.bind(this));
-			} else {
-				//Error: no data was loaded
-			}
-			//
-			function parseToNinjaUrl (prop) {
-				//
-				return prop.replace(/[^()\\""\\'']+/g, prefixWithNinjaUrl.bind(this));
-			}
-			//
-			function prefixWithNinjaUrl (url) {
-				//
-				if (url !== 'url' && !url.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) {
-					url = fileCouldDirUrl+url;
-				}
-				//
-				return url;
-			}
-			////////////////////////////////////////////////////////
-			////////////////////////////////////////////////////////
-			
-			
-			
-			
-			
-			
-			//
+			//Setting content from loaded data
+			if (cssData.content) tag.innerHTML = cssData.content;
+			//Returning <style> with loaded contents
 			return tag;
         }
     },
     ////////////////////////////////////////////////////////////////////
-	//
+	//Method to parse and initialize all webGL data read from file
     initWebGl: {
-        value: function () {
+        value: function (scripttags) {
         	//
+        	var i, n, webgldata;
+        	//Checking for webGL Data
+            for (var w in scripttags) {
+            	//
+            	webgldata = null;
+            	//Checking for tags with webGL data
+            	if (scripttags[w].getAttribute) {
+            		if (scripttags[w].getAttribute('data-ninja-webgl') !== null) {
+            			//TODO: Add logic to handle more than one data tag
+            			webgldata = JSON.parse((scripttags[w].innerHTML.replace("(", "")).replace(")", ""));
+            		}
+            		//Checking for webGL data and building data array
+            		if (webgldata && webgldata.data) {
+            			for (n = 0; webgldata.data[n]; n++) {
+            				webgldata.data[n] = unescape(webgldata.data[n]);
+            			}
+            			//TODO: Improve setter of webGL and reference
+            			this.model.glData = webgldata.data;
+            		}
+            	}
+            }
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -297,12 +261,12 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
         }
     },
     ////////////////////////////////////////////////////////////////////
-	//
+	//Method to get element from point, used by Ninja
     getElementFromPoint: {
         value: function(x, y) {
             return this.iframe.contentWindow.getElement(x,y);
         }
-    },
+    }
 	////////////////////////////////////////////////////////////////////
 	////////////////////////////////////////////////////////////////////
 });
-- 
cgit v1.2.3


From f031c950361251e45f4c2e6795bcb832985e9d25 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Mon, 7 May 2012 16:31:04 -0700
Subject: Moving webGL to own helper class

Cleaning up webGL for better working files.
---
 js/document/helpers/webgl-helper.js | 218 ++++++++++++++++++++++++++++++++++++
 js/document/helpers/webgl-parser.js |  23 ----
 js/document/models/html.js          | 196 +-------------------------------
 js/document/views/design.js         |   4 +-
 4 files changed, 227 insertions(+), 214 deletions(-)
 create mode 100755 js/document/helpers/webgl-helper.js
 delete mode 100755 js/document/helpers/webgl-parser.js

(limited to 'js')

diff --git a/js/document/helpers/webgl-helper.js b/js/document/helpers/webgl-helper.js
new file mode 100755
index 00000000..84ddc547
--- /dev/null
+++ b/js/document/helpers/webgl-helper.js
@@ -0,0 +1,218 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = 			require("montage/core/core").Montage,
+	Component = 		require("montage/ui/component").Component,
+    MaterialsModel = 	require("js/models/materials-model").MaterialsModel,
+    NJUtils = 			require("js/lib/NJUtils").NJUtils,
+	GLWorld =			require("js/lib/drawing/world").World;
+////////////////////////////////////////////////////////////////////////
+//	
+exports.webGlDocumentHelper = Montage.create(Component, {
+	////////////////////////////////////////////////////////////////////
+	//
+	hasTemplate: {
+        value: false
+    },
+    ////////////////////////////////////////////////////////////////////
+	//This is set when the design view is ready, for local reference
+	iframe: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+	//
+    _glData: {
+    	value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+	//
+    glData: {
+    	//
+    	get: function() {
+    		//
+			var elt = this.iframe.contentWindow.document.body;
+			//
+			if (elt) {
+				var matLib = MaterialsModel.exportMaterials();
+				this._glData = [matLib];
+				this.collectGLData(elt, this._glData );
+			} else {
+				this._glData = null
+			}
+			//	
+			return this._glData;
+		},
+		//
+        set: function(value) {
+        	//
+        	var elt = this.iframe.contentWindow.document.body;
+			//
+			if (elt) {
+				/*
+				// Use this code to test the runtime version of WebGL
+				var cdm = new NinjaCvsRt.CanvasDataManager();
+				cdm.loadGLData(elt,  value,  null );
+				*/
+
+				//
+				var i, nWorlds= value.length;
+				//
+				for (i = 0;  i < nWorlds;  i++) {
+					// get the data for the next canvas
+					var importStr = value[i], id, jObj, index = importStr.indexOf(';'), matLibStr, matLibObj, startIndex, endIndex, canvas, useWebGL, world;
+					// determine if it is the new (JSON) or old style format
+					if ((importStr[0] === 'v') && (index < 24)) {
+						// JSON format.  pull off the
+						importStr = importStr.substr(index+1);
+						jObj = JSON.parse(importStr);
+						id = jObj.id;
+					} else {
+                        // at this point the data could be either the materials library or
+                        // an old style world.  We can determine which by converting the string
+                        // to an object via JSON.parse.  That operation will fail if the string
+                        // is an old style world.
+                        matLibStr = 'materialLibrary;';
+                        index = importStr.indexOf(matLibStr);
+                        if (index == 0) {
+                            importStr = importStr.substr(matLibStr.length);
+                            matLibObj = JSON.parse(importStr);
+                            MaterialsModel.importMaterials(matLibObj);
+                        } else {
+						    startIndex = importStr.indexOf("id: ");
+						    if (startIndex >= 0) {
+							    endIndex = importStr.indexOf("\n", startIndex);
+							    if (endIndex > 0) id = importStr.substring(startIndex+4, endIndex);
+						    }
+                        }
+					}
+					//
+					if (id != null) {
+						//
+						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();
+								}
+								//
+								if (jObj) {
+									useWebGL = jObj.webGL;
+									world = new GLWorld(canvas, useWebGL);
+									world.importJSON(jObj);
+								}
+								//
+								this.buildShapeModel(canvas.elementModel, world);
+							}
+						}
+					}
+				}
+			}
+		}
+    },
+    ////////////////////////////////////////////////////////////////////
+	//
+    findCanvasWithID:  {
+		value: function(id, elt)  {
+			//
+			var i, child, nKids, foundElt, cid = elt.getAttribute("data-RDGE-id");
+			//
+			if (cid == id)  return elt;
+			//
+			if (elt.children) {
+				nKids = elt.children.length;
+				for (i=0;  i<nKids;  i++) {
+					child = elt.children[i];
+					foundElt = this.findCanvasWithID( id, child );
+					if (foundElt)  return foundElt;
+				}
+			}
+		}
+	},
+    ////////////////////////////////////////////////////////////////////
+	//
+    buildShapeModel: {
+    	value: function(elementModel, world) {
+    		//
+            var shapeModel = elementModel.shapeModel, root;
+			shapeModel.shapeCount	= 1;	// for now...
+			shapeModel.useWebGl		= world._useWebGL;
+			shapeModel.GLWorld		= world;
+			//
+			root = world.getGeomRoot();
+			//
+			if (root) {
+				shapeModel.GLGeomObj			= root;
+				shapeModel.strokeSize			= root._strokeWidth;
+				shapeModel.strokeStyle			= "solid";
+				//shapeModel.strokeStyleIndex
+				switch (root.geomType()) {
+					case root.GEOM_TYPE_RECTANGLE:
+                        elementModel.selection = "Rectangle";
+                        elementModel.pi = "RectanglePi";
+						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.innerRadius = root._innerRadius;
+						break;
+					case root.GEOM_TYPE_LINE:
+                        elementModel.selection = "Line";
+                        elementModel.pi = "LinePi";
+						shapeModel.slope = root._slope;
+						break;
+                    case root.GEOM_TYPE_BRUSH_STROKE:
+                        elementModel.selection = "BrushStroke";
+                        elementModel.pi = "BrushStrokePi";
+						break;
+                    case root.GEOM_TYPE_CUBIC_BEZIER:
+                        elementModel.selection = "Subpath";
+                        elementModel.pi = "SubpathPi";
+                        break;
+					default:
+						console.log("geometry type not supported for file I/O, " + root.geomType());
+						break;
+				}
+			}
+		}
+	},
+	////////////////////////////////////////////////////////////////////
+	//
+	collectGLData: {
+		value: function( elt,  dataArray ) {
+			//
+			var i, data, nKids, child;
+			//
+			if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) {
+				data = elt.elementModel.shapeModel.GLWorld.exportJSON();
+				dataArray.push(data);
+			}
+			//
+			if (elt.children) {
+				nKids = elt.children.length;
+				for (i=0;  i<nKids;  i++) {
+					child = elt.children[i];
+					this.collectGLData( child, dataArray );
+				}
+			}
+		}
+	}
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+});
+////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/js/document/helpers/webgl-parser.js b/js/document/helpers/webgl-parser.js
deleted file mode 100755
index b52ea52b..00000000
--- a/js/document/helpers/webgl-parser.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
-////////////////////////////////////////////////////////////////////////
-//
-var Montage = 	require("montage/core/core").Montage,
-	Component = require("montage/ui/component").Component;
-////////////////////////////////////////////////////////////////////////
-//	
-exports.webGlDocumentParser = Montage.create(Component, {
-	////////////////////////////////////////////////////////////////////
-	//
-	hasTemplate: {
-        value: false
-    }
-	////////////////////////////////////////////////////////////////////
-	////////////////////////////////////////////////////////////////////
-});
-////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/js/document/models/html.js b/js/document/models/html.js
index e0a18850..1639a8e2 100755
--- a/js/document/models/html.js
+++ b/js/document/models/html.js
@@ -6,11 +6,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 ////////////////////////////////////////////////////////////////////////
 //
-var Montage = 			require("montage/core/core").Montage,
-    BaseDocumentModel = require("js/document/models/base").BaseDocumentModel,
-    MaterialsModel = 	require("js/models/materials-model").MaterialsModel,
-    NJUtils = 			require("js/lib/NJUtils").NJUtils,
-	GLWorld =			require("js/lib/drawing/world").World;
+var Montage = 				require("montage/core/core").Montage,
+    BaseDocumentModel = 	require("js/document/models/base").BaseDocumentModel,
+    webGlDocumentHelper = 	require("js/document/helpers/webgl-helper").webGlDocumentHelper;
 ////////////////////////////////////////////////////////////////////////
 //	
 exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
@@ -26,191 +24,9 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
     },
     ////////////////////////////////////////////////////////////////////
 	//
-    _glData: {
-    	value: null
-    },
-    ////////////////////////////////////////////////////////////////////
-	//
-    glData: {
-    	//
-    	get: function() {
-    		//
-			var elt = this.views.design.iframe.contentWindow.document.body;
-			//
-			if (elt) {
-				var matLib = MaterialsModel.exportMaterials();
-				this._glData = [matLib];
-				this.collectGLData(elt, this._glData );
-			} else {
-				this._glData = null
-			}
-			//	
-			return this._glData;
-		},
-		//
-        set: function(value) {
-        	//
-        	var elt = this.views.design.iframe.contentWindow.document.body;
-			//
-			if (elt) {
-				/*
-				// Use this code to test the runtime version of WebGL
-				var cdm = new NinjaCvsRt.CanvasDataManager();
-				cdm.loadGLData(elt,  value,  null );
-				*/
-
-				//
-				var i, nWorlds= value.length;
-				//
-				for (i = 0;  i < nWorlds;  i++) {
-					// get the data for the next canvas
-					var importStr = value[i], id, jObj, index = importStr.indexOf(';'), matLibStr, matLibObj, startIndex, endIndex, canvas, useWebGL, world;
-					// determine if it is the new (JSON) or old style format
-					if ((importStr[0] === 'v') && (index < 24)) {
-						// JSON format.  pull off the
-						importStr = importStr.substr(index+1);
-						jObj = JSON.parse(importStr);
-						id = jObj.id;
-					} else {
-                        // at this point the data could be either the materials library or
-                        // an old style world.  We can determine which by converting the string
-                        // to an object via JSON.parse.  That operation will fail if the string
-                        // is an old style world.
-                        matLibStr = 'materialLibrary;';
-                        index = importStr.indexOf(matLibStr);
-                        if (index == 0) {
-                            importStr = importStr.substr(matLibStr.length);
-                            matLibObj = JSON.parse(importStr);
-                            MaterialsModel.importMaterials(matLibObj);
-                        } else {
-						    startIndex = importStr.indexOf("id: ");
-						    if (startIndex >= 0) {
-							    endIndex = importStr.indexOf("\n", startIndex);
-							    if (endIndex > 0) id = importStr.substring(startIndex+4, endIndex);
-						    }
-                        }
-					}
-					//
-					if (id != null) {
-						//
-						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();
-								}
-								//
-								if (jObj) {
-									useWebGL = jObj.webGL;
-									world = new GLWorld(canvas, useWebGL);
-									world.importJSON(jObj);
-								}
-								//
-								this.buildShapeModel(canvas.elementModel, world);
-							}
-						}
-					}
-				}
-			}
-		}
-    },
-    ////////////////////////////////////////////////////////////////////
-	//
-    findCanvasWithID:  {
-		value: function(id, elt)  {
-			//
-			var i, child, nKids, foundElt, cid = elt.getAttribute("data-RDGE-id");
-			//
-			if (cid == id)  return elt;
-			//
-			if (elt.children) {
-				nKids = elt.children.length;
-				for (i=0;  i<nKids;  i++) {
-					child = elt.children[i];
-					foundElt = this.findCanvasWithID( id, child );
-					if (foundElt)  return foundElt;
-				}
-			}
-		}
-	},
-    ////////////////////////////////////////////////////////////////////
-	//
-    buildShapeModel: {
-    	value: function(elementModel, world) {
-    		//
-            var shapeModel = elementModel.shapeModel, root;
-			shapeModel.shapeCount	= 1;	// for now...
-			shapeModel.useWebGl		= world._useWebGL;
-			shapeModel.GLWorld		= world;
-			//
-			root = world.getGeomRoot();
-			//
-			if (root) {
-				shapeModel.GLGeomObj			= root;
-				shapeModel.strokeSize			= root._strokeWidth;
-				shapeModel.strokeStyle			= "solid";
-				//shapeModel.strokeStyleIndex
-				switch (root.geomType()) {
-					case root.GEOM_TYPE_RECTANGLE:
-                        elementModel.selection = "Rectangle";
-                        elementModel.pi = "RectanglePi";
-						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.innerRadius = root._innerRadius;
-						break;
-					case root.GEOM_TYPE_LINE:
-                        elementModel.selection = "Line";
-                        elementModel.pi = "LinePi";
-						shapeModel.slope = root._slope;
-						break;
-                    case root.GEOM_TYPE_BRUSH_STROKE:
-                        elementModel.selection = "BrushStroke";
-                        elementModel.pi = "BrushStrokePi";
-						break;
-                    case root.GEOM_TYPE_CUBIC_BEZIER:
-                        elementModel.selection = "Subpath";
-                        elementModel.pi = "SubpathPi";
-                        break;
-					default:
-						console.log("geometry type not supported for file I/O, " + root.geomType());
-						break;
-				}
-			}
-		}
-	},
-	////////////////////////////////////////////////////////////////////
-	//
-	collectGLData: {
-		value: function( elt,  dataArray ) {
-			//
-			var i, data, nKids, child;
-			//
-			if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) {
-				data = elt.elementModel.shapeModel.GLWorld.exportJSON();
-				dataArray.push(data);
-			}
-			//
-			if (elt.children) {
-				nKids = elt.children.length;
-				for (i=0;  i<nKids;  i++) {
-					child = elt.children[i];
-					this.collectGLData( child, dataArray );
-				}
-			}
-		}
-	}
+	webGlHelper: {
+        value: webGlDocumentHelper
+    }
 	////////////////////////////////////////////////////////////////////
 	////////////////////////////////////////////////////////////////////
 });
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 2b8ccb26..b23ebe78 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -231,6 +231,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
         value: function (scripttags) {
         	//
         	var i, n, webgldata;
+        	//Setting the iFrame property for reference in helper class
+        	this.model.webGlHelper.iframe = this.model.views.design.iframe;
         	//Checking for webGL Data
             for (var w in scripttags) {
             	//
@@ -247,7 +249,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
             				webgldata.data[n] = unescape(webgldata.data[n]);
             			}
             			//TODO: Improve setter of webGL and reference
-            			this.model.glData = webgldata.data;
+            			this.model.webGlHelper.glData = webgldata.data;
             		}
             	}
             }
-- 
cgit v1.2.3