diff options
Diffstat (limited to 'js/document/html-document.js')
-rwxr-xr-x | js/document/html-document.js | 149 |
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 | |||
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 | GLWorld = require("js/lib/drawing/world").World; | ||
12 | //////////////////////////////////////////////////////////////////////// | 13 | //////////////////////////////////////////////////////////////////////// |
13 | // | 14 | // |
14 | exports.HTMLDocument = Montage.create(TextDocument, { | 15 | exports.HTMLDocument = Montage.create(TextDocument, { |
@@ -187,31 +188,112 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
187 | // }, | 188 | // }, |
188 | 189 | ||
189 | glData: { | 190 | glData: { |
190 | get: function() | 191 | get: function() { |
191 | { | 192 | // |
192 | var elt = this.iframe.contentWindow.document.getElementById("UserContent"); | 193 | var elt = this.iframe.contentWindow.document.getElementById("UserContent"); |
193 | this._glData = null; | 194 | // |
194 | if (elt) | 195 | if (elt) { |
195 | { | ||
196 | var cdm = new CanvasDataManager(); | ||
197 | this._glData = []; | 196 | this._glData = []; |
198 | cdm.collectGLData( elt, this._glData ); | 197 | //if (path) { |
198 | //this.collectGLData(elt, this._glData, path); | ||
199 | //} else { | ||
200 | this.collectGLData(elt, this._glData ); | ||
201 | //} | ||
202 | } else { | ||
203 | this._glData = null | ||
199 | } | 204 | } |
200 | 205 | // | |
201 | return this._glData; | 206 | return this._glData; |
202 | }, | 207 | }, |
208 | set: function(value) { | ||
209 | var elt = this.documentRoot; | ||
210 | if (elt) { | ||
211 | var nWorlds= value.length; | ||
212 | for (var i=0; i<nWorlds; i++) { | ||
213 | var importStr = value[i]; | ||
214 | var startIndex = importStr.indexOf( "id: " ); | ||
215 | if (startIndex >= 0) { | ||
216 | var endIndex = importStr.indexOf( "\n", startIndex ); | ||
217 | if (endIndex > 0) { | ||
218 | var id = importStr.substring( startIndex+4, endIndex ); | ||
219 | if (id) { | ||
220 | var canvas = this.findCanvasWithID( id, elt ); | ||
221 | if (canvas) { | ||
222 | if (!canvas.elementModel) { | ||
223 | NJUtils.makeElementModel(canvas, "Canvas", "shape", true); | ||
224 | } | ||
225 | if (canvas.elementModel) { | ||
226 | if (canvas.elementModel.shapeModel.GLWorld) { | ||
227 | canvas.elementModel.shapeModel.GLWorld.clearTree(); | ||
228 | } | ||
229 | var index = importStr.indexOf( "webGL: " ); | ||
230 | var useWebGL = (index >= 0) | ||
231 | var world = new GLWorld( canvas, useWebGL ); | ||
232 | world.import( importStr ); | ||
233 | this.buildShapeModel( canvas.elementModel, world ); | ||
234 | } | ||
235 | } | ||
236 | } | ||
237 | } | ||
238 | } | ||
239 | } | ||
240 | } | ||
241 | } | ||
242 | }, | ||
203 | 243 | ||
204 | set: function(value) | 244 | buildShapeModel: |
245 | { | ||
246 | value: function( elementModel, world ) | ||
205 | { | 247 | { |
206 | var elt = this.documentRoot; | 248 | var shapeModel = elementModel.shapeModel; |
207 | if (elt) | 249 | shapeModel.shapeCount = 1; // for now... |
250 | shapeModel.useWebGl = world._useWebGL; | ||
251 | shapeModel.GLWorld = world; | ||
252 | var root = world.getGeomRoot(); | ||
253 | if (root) | ||
208 | { | 254 | { |
209 | console.log( "load canvas data: " , value ); | 255 | shapeModel.GLGeomObj = root; |
210 | var cdm = new CanvasDataManager(); | 256 | shapeModel.strokeSize = root._strokeWidth; |
211 | cdm.loadGLData(elt, value); | 257 | shapeModel.stroke = root._strokeColor.slice(); |
258 | shapeModel.strokeMaterial = root._strokeMaterial.dup(); | ||
259 | shapeModel.strokeStyle = "solid"; | ||
260 | //shapeModel.strokeStyleIndex | ||
261 | //shapeModel.border | ||
262 | //shapeModel.background | ||
263 | switch (root.geomType()) | ||
264 | { | ||
265 | case root.GEOM_TYPE_RECTANGLE: | ||
266 | elementModel.selection = "Rectangle"; | ||
267 | elementModel.pi = "RectanglePi"; | ||
268 | shapeModel.fill = root._fillColor.slice(); | ||
269 | shapeModel.fillMaterial = root._fillMaterial.dup(); | ||
270 | shapeModel.tlRadius = root._tlRadius; | ||
271 | shapeModel.trRadius = root._trRadius; | ||
272 | shapeModel.blRadius = root._blRadius; | ||
273 | shapeModel.brRadius = root._brRadius; | ||
274 | break; | ||
275 | |||
276 | case root.GEOM_TYPE_CIRCLE: | ||
277 | elementModel.selection = "Oval"; | ||
278 | elementModel.pi = "OvalPi"; | ||
279 | shapeModel.fill = root._fillColor.slice(); | ||
280 | shapeModel.fillMaterial = root._fillMaterial.dup(); | ||
281 | shapeModel.innerRadius = root._innerRadius; | ||
282 | break; | ||
283 | |||
284 | case root.GEOM_TYPE_LINE: | ||
285 | elementModel.selection = "Line"; | ||
286 | elementModel.pi = "LinePi"; | ||
287 | shapeModel.slope = root._slope; | ||
288 | break; | ||
289 | |||
290 | default: | ||
291 | console.log( "geometry type not supported for file I/O, " + root.geomType()); | ||
292 | break; | ||
293 | } | ||
212 | } | 294 | } |
213 | } | 295 | } |
214 | }, | 296 | }, |
215 | 297 | ||
216 | zoomFactor: { | 298 | zoomFactor: { |
217 | get: function() { return this._zoomFactor; }, | 299 | get: function() { return this._zoomFactor; }, |
@@ -240,6 +322,27 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
240 | } | 322 | } |
241 | } | 323 | } |
242 | }, | 324 | }, |
325 | |||
326 | /** | ||
327 | * search the DOM tree to find a canvas with the given id | ||
328 | */ | ||
329 | findCanvasWithID: { | ||
330 | value: function( id, elt ) { | ||
331 | var cid = elt.getAttribute( "data-RDGE-id" ); | ||
332 | if (cid == id) return elt; | ||
333 | |||
334 | if (elt.children) | ||
335 | { | ||
336 | var nKids = elt.children.length; | ||
337 | for (var i=0; i<nKids; i++) | ||
338 | { | ||
339 | var child = elt.children[i]; | ||
340 | var foundElt = this.findCanvasWithID( id, child ); | ||
341 | if (foundElt) return foundElt; | ||
342 | } | ||
343 | } | ||
344 | } | ||
345 | }, | ||
243 | 346 | ||
244 | 347 | ||
245 | 348 | ||
@@ -768,8 +871,12 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
768 | value: function () { | 871 | value: function () { |
769 | //TODO: Add logic to handle save before preview | 872 | //TODO: Add logic to handle save before preview |
770 | this.application.ninja.documentController.handleExecuteSaveAll(null); | 873 | this.application.ninja.documentController.handleExecuteSaveAll(null); |
771 | //Launching 'blank' tab for testing movie | 874 | //Temp check for webGL Hack |
772 | window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]); | 875 | if (this.application.ninja.documentController.activeDocument.glData.length && this.application.ninja.documentController.activeDocument.glData.length > 0) { |
876 | 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); | ||
877 | } else { | ||
878 | window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]); | ||
879 | } | ||
773 | //chrome.tabs.create({url: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]}); | 880 | //chrome.tabs.create({url: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]}); |
774 | } | 881 | } |
775 | }, | 882 | }, |
@@ -788,8 +895,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
788 | } | 895 | } |
789 | } | 896 | } |
790 | } | 897 | } |
791 | //return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; | 898 | 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"){ | 899 | } else if (this.currentView === "code"){ |
794 | //TODO: Would this get call when we are in code of HTML? | 900 | //TODO: Would this get call when we are in code of HTML? |
795 | } else { | 901 | } else { |
@@ -812,8 +918,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
812 | } | 918 | } |
813 | } | 919 | } |
814 | } | 920 | } |
815 | //return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; | 921 | 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"){ | 922 | } else if (this.currentView === "code"){ |
818 | //TODO: Would this get call when we are in code of HTML? | 923 | //TODO: Would this get call when we are in code of HTML? |
819 | } else { | 924 | } else { |