From b8c27edc106818ff84f93ebe30ce50359a03885b Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 7 May 2012 13:21:31 -0700 Subject: Adding webGL support for opening files Added I/O for loading webGL on open file. I/O support for saving to come. --- js/document/document-html.js | 17 ++-- js/document/models/base.js | 13 +++ js/document/models/html.js | 197 ++++++++++++++++++++++++++++++++++++++++++- js/document/views/design.js | 32 +++++-- 4 files changed, 242 insertions(+), 17 deletions(-) diff --git a/js/document/document-html.js b/js/document/document-html.js index f3c135ed..79fe461b 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -63,7 +63,7 @@ exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // init: { - value:function(file, context, callback, view) { + value:function(file, context, callback, view, template) { //TODO: Add template support logic //Storing callback data for loaded dispatch this.loaded.callback = callback; this.loaded.context = context; @@ -85,16 +85,19 @@ exports.HtmlDocument = Montage.create(Component, { this.model.views.design.show(); this.model.views.design.iframe.style.opacity = 0; this.model.views.design.content = this.model.file.content; + //TODO: Improve reference + this.model.views.design.model = this.model; + // //TODO: Clean up this.model.views.design.render(function () { //TODO: Identify and remove usage of '_document' this._document = this.model.views.design.document; - //TODO: Check for needed + //TODO: Remove usage, seems as not needed this.documentRoot = this.model.views.design.document.body; //TODO: Why is this needed? - this._liveNodeList = this.documentRoot.getElementsByTagName('*'); + this._liveNodeList = this.model.views.design.document.body.getElementsByTagName('*'); //Initiliazing document model - document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); + document.application.njUtils.makeElementModel(this.model.views.design.document.body, "Body", "body"); //Adding observer to know when template is ready this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this)); this._observer.observe(this.model.views.design.document.head, {childList: true}); @@ -115,11 +118,7 @@ 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/models/base.js b/js/document/models/base.js index 3bb69f6b..746922ad 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js @@ -72,6 +72,19 @@ exports.BaseDocumentModel = Montage.create(Component, { // } }, + //////////////////////////////////////////////////////////////////// + // + browserPreview: { + value: function (browser) { + // + switch (browser) { + case 'chrome': + break; + default: + break; + } + } + }, //////////////////////////////////////////////////////////////////// // save: { diff --git a/js/document/models/html.js b/js/document/models/html.js index 5eedb731..e0a18850 100755 --- a/js/document/models/html.js +++ b/js/document/models/html.js @@ -7,7 +7,10 @@ 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; + 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; //////////////////////////////////////////////////////////////////////// // exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, { @@ -16,10 +19,198 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, { hasTemplate: { value: false }, - + //////////////////////////////////////////////////////////////////// + // draw3DGrid: { value: false - } + }, + //////////////////////////////////////////////////////////////////// + // + _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 0) { - for (var i = 0; i < ltags.length; i++) { + for (i = 0; i < ltags.length; i++) { // if (ltags[i].href) { //TODO: Verify this works for tags in body as well (working in head) @@ -148,8 +152,26 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } } } - - //TODO: Load webGL (blocking) + //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; + } + } + } //TODO: Load Montage Components (blocking) -- cgit v1.2.3