From 9b8a24a7360416d5750828c9580e33dd336ff882 Mon Sep 17 00:00:00 2001 From: François Frisch Date: Fri, 16 Mar 2012 17:57:18 -0700 Subject: Getting ownerComponent bindings --- .../templates/montage-html/main.reel/main.js | 43 +++++++++++----------- 1 file changed, 22 insertions(+), 21 deletions(-) (limited to 'js/document') diff --git a/js/document/templates/montage-html/main.reel/main.js b/js/document/templates/montage-html/main.reel/main.js index 567f481c..ee23e844 100644 --- a/js/document/templates/montage-html/main.reel/main.js +++ b/js/document/templates/montage-html/main.reel/main.js @@ -17,7 +17,25 @@ exports.Main = Montage.create(Component, { */ templateDidLoad: { value: function(){ - window.addComponent = this.addComponentToUserDocument; + var self = this; + window.addComponent = function(element, data, callback) { + var component; + + component = require.async(data.path) + .then(function(component) { + var componentRequire = component[data.name]; + var componentInstance = componentRequire.create(); + + componentInstance.element = element; + //componentInstance.deserializedFromTemplate(); + componentInstance.needsDraw = true; + componentInstance.ownerComponent = self; + + callback(componentInstance, element); + }) + .end(); + + }; // window.addBinding = this.addBindingToUserDocument; // Dispatch event when this template has loaded. @@ -29,26 +47,9 @@ exports.Main = Montage.create(Component, { } }, - // Adding components to the user document by using a async require. - addComponentToUserDocument:{ - value:function(element, data, callback){ - - var component; - - component = require.async(data.path) - .then(function(component) { - var componentRequire = component[data.name]; - var componentInstance = componentRequire.create(); - - componentInstance.element = element; - //componentInstance.deserializedFromTemplate(); - componentInstance.needsDraw = true; - - callback(componentInstance, element); - }) - .end(); - - } + location: { + value:null, + enumerable:false } }); \ No newline at end of file -- cgit v1.2.3 From 9b53d2dac464cb9217b217e6707dbb97c1d65490 Mon Sep 17 00:00:00 2001 From: François Frisch Date: Sat, 17 Mar 2012 11:25:52 -0700 Subject: Deleting unecessary property --- js/document/templates/montage-html/main.reel/main.js | 6 ------ 1 file changed, 6 deletions(-) (limited to 'js/document') diff --git a/js/document/templates/montage-html/main.reel/main.js b/js/document/templates/montage-html/main.reel/main.js index ee23e844..6c141108 100644 --- a/js/document/templates/montage-html/main.reel/main.js +++ b/js/document/templates/montage-html/main.reel/main.js @@ -45,11 +45,5 @@ exports.Main = Montage.create(Component, { document.body.dispatchEvent( newEvent ); } - }, - - location: { - value:null, - enumerable:false } - }); \ No newline at end of file -- cgit v1.2.3 From fda7b595c96d99177fdd93de8da9030348a3f8fb Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Sun, 18 Mar 2012 12:34:29 -0700 Subject: Temp I/O functionality for M-JS components Added the ability to save montages component serialization from Ninja. Very rough, but functional. --- js/document/html-document.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/document') diff --git a/js/document/html-document.js b/js/document/html-document.js index d4db6e2f..be1f89e2 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -905,7 +905,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, mjs: this._userComponents, 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 { @@ -928,7 +928,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, mjs: this._userComponents, webgl: this.glData, css: css, 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 { -- cgit v1.2.3 From 19aca6ec6f3c10922646f0ca760a375acdffaf56 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 21 Mar 2012 16:35:20 -0700 Subject: Adding 'addComponentFirstDraw' event from the user document main component. Signed-off-by: Valerio Virgillito --- js/document/templates/montage-html/main.reel/main.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'js/document') diff --git a/js/document/templates/montage-html/main.reel/main.js b/js/document/templates/montage-html/main.reel/main.js index 6c141108..2970f37a 100644 --- a/js/document/templates/montage-html/main.reel/main.js +++ b/js/document/templates/montage-html/main.reel/main.js @@ -27,16 +27,17 @@ exports.Main = Montage.create(Component, { var componentInstance = componentRequire.create(); componentInstance.element = element; - //componentInstance.deserializedFromTemplate(); + componentInstance.needsDraw = true; componentInstance.ownerComponent = self; + componentInstance.addEventListener("firstDraw", self, false); + callback(componentInstance, element); }) .end(); }; -// window.addBinding = this.addBindingToUserDocument; // Dispatch event when this template has loaded. var newEvent = document.createEvent( "CustomEvent" ); @@ -45,5 +46,14 @@ exports.Main = Montage.create(Component, { document.body.dispatchEvent( newEvent ); } + }, + + handleFirstDraw: { + value: function() { + var newEvent = document.createEvent( "CustomEvent" ); + newEvent.initCustomEvent( "addComponentFirstDraw", false, true ); + + document.body.dispatchEvent( newEvent ); + } } }); \ No newline at end of file -- cgit v1.2.3 From efcec76362a652033254fc6465dd127e8bebc04c Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 22 Mar 2012 09:57:32 -0700 Subject: Adding firstDraw event to components added This will allow us to re-parse the document for styles added dynamically. --- js/document/templates/montage-html/main.reel/main.js | 11 ----------- 1 file changed, 11 deletions(-) (limited to 'js/document') diff --git a/js/document/templates/montage-html/main.reel/main.js b/js/document/templates/montage-html/main.reel/main.js index 2970f37a..019c675e 100644 --- a/js/document/templates/montage-html/main.reel/main.js +++ b/js/document/templates/montage-html/main.reel/main.js @@ -31,8 +31,6 @@ exports.Main = Montage.create(Component, { componentInstance.needsDraw = true; componentInstance.ownerComponent = self; - componentInstance.addEventListener("firstDraw", self, false); - callback(componentInstance, element); }) .end(); @@ -46,14 +44,5 @@ exports.Main = Montage.create(Component, { document.body.dispatchEvent( newEvent ); } - }, - - handleFirstDraw: { - value: function() { - var newEvent = document.createEvent( "CustomEvent" ); - newEvent.initCustomEvent( "addComponentFirstDraw", false, true ); - - document.body.dispatchEvent( newEvent ); - } } }); \ No newline at end of file -- cgit v1.2.3 From fdeed8051c3af538d28ca3bc599121cea483c22c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 22 Mar 2012 15:47:56 -0700 Subject: Squashed commit of the following GL integration Signed-off-by: Valerio Virgillito --- js/document/html-document.js | 108 ++++++++++++++++++++++++++++++------------- 1 file changed, 76 insertions(+), 32 deletions(-) (limited to 'js/document') diff --git a/js/document/html-document.js b/js/document/html-document.js index be1f89e2..aa57d848 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -9,7 +9,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, - GLWorld = require("js/lib/drawing/world").World; + GLWorld = require("js/lib/drawing/world").World, + MaterialsModel = require("js/models/materials-model").MaterialsModel; //////////////////////////////////////////////////////////////////////// // exports.HTMLDocument = Montage.create(TextDocument, { @@ -193,12 +194,9 @@ exports.HTMLDocument = Montage.create(TextDocument, { var elt = this.iframe.contentWindow.document.getElementById("UserContent"); // if (elt) { - this._glData = []; - //if (path) { - //this.collectGLData(elt, this._glData, path); - //} else { - this.collectGLData(elt, this._glData ); - //} + var matLib = MaterialsModel.exportMaterials(); + this._glData = [matLib]; + this.collectGLData(elt, this._glData ); } else { this._glData = null } @@ -219,29 +217,74 @@ exports.HTMLDocument = Montage.create(TextDocument, { */ // /* + // get the data for the next canvas 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 ); - } + + // determine if it is the new (JSON) or old style format + var id = null; + var jObj = null; + var index = importStr.indexOf( ';' ); + if ((importStr[0] === 'v') && (index < 24)) + { + // JSON format. pull off the + importStr = importStr.substr( index+1 ); + jObj = 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. + var matLibStr = 'materialLibrary;'; + index = importStr.indexOf( matLibStr ); + if (index == 0) + { + importStr = importStr.substr( matLibStr.length ); + var matLibObj = JSON.parse( importStr ); + MaterialsModel.importMaterials( matLibObj ); + } + else + { + var startIndex = importStr.indexOf( "id: " ); + if (startIndex >= 0) { + var endIndex = importStr.indexOf( "\n", startIndex ); + if (endIndex > 0) + id = importStr.substring( startIndex+4, endIndex ); + } + } + } + + if (id != null) + { + 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(); + + if (jObj) + { + var useWebGL = jObj.webGL; + var world = new GLWorld( canvas, useWebGL ); + world.importJSON( jObj ); + } + else + { + var index = importStr.indexOf( "webGL: " ); + var useWebGL = (index >= 0); + var world = new GLWorld( canvas, useWebGL ); + world.import( importStr ); } + + this.buildShapeModel( canvas.elementModel, world ); } } } @@ -265,7 +308,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { shapeModel.GLGeomObj = root; shapeModel.strokeSize = root._strokeWidth; shapeModel.stroke = root._strokeColor.slice(); - shapeModel.strokeMaterial = root._strokeMaterial.dup(); + shapeModel.strokeMaterial = root._strikeMaterial ? root._strokeMaterial.dup() : null; shapeModel.strokeStyle = "solid"; //shapeModel.strokeStyleIndex //shapeModel.border @@ -276,7 +319,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { elementModel.selection = "Rectangle"; elementModel.pi = "RectanglePi"; shapeModel.fill = root._fillColor.slice(); - shapeModel.fillMaterial = root._fillMaterial.dup(); + shapeModel.fillMaterial = root._fillMaterial ? root._fillMaterial.dup() : null; shapeModel.tlRadius = root._tlRadius; shapeModel.trRadius = root._trRadius; shapeModel.blRadius = root._blRadius; @@ -287,7 +330,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { elementModel.selection = "Oval"; elementModel.pi = "OvalPi"; shapeModel.fill = root._fillColor.slice(); - shapeModel.fillMaterial = root._fillMaterial.dup(); + shapeModel.fillMaterial = root._fillMaterial ? root._fillMaterial.dup() : null; shapeModel.innerRadius = root._innerRadius; break; @@ -382,7 +425,8 @@ exports.HTMLDocument = Montage.create(TextDocument, { { if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) { - var data = elt.elementModel.shapeModel.GLWorld.export(); + var data = elt.elementModel.shapeModel.GLWorld.exportJSON(); + //var data = elt.elementModel.shapeModel.GLWorld.export(); dataArray.push( data ); } -- cgit v1.2.3 From 7fbda862c62f37d4c67e4d5a619b7e3cffc309ff Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 22 Mar 2012 16:23:40 -0700 Subject: Adding Ninja URL method to io-mediator --- js/document/html-document.js | 65 ++++---------------------------------------- 1 file changed, 5 insertions(+), 60 deletions(-) (limited to 'js/document') diff --git a/js/document/html-document.js b/js/document/html-document.js index be1f89e2..9de2d8d6 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -520,67 +520,13 @@ exports.HTMLDocument = Montage.create(TextDocument, { } // if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; - //Inserting user's document into template - - - - - - - - - - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - - //TODO: Clean up and make public method to prepend properties with Ninja URL - this._templateDocument.head.innerHTML = (this._userDocument.content.head.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, ninjaUrlRedirect.bind(this))).replace(/url\(([^"]*)(.+?)\1\)/g, ninjaUrlRedirect.bind(this)); - this._templateDocument.body.innerHTML = (this._userDocument.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, ninjaUrlRedirect.bind(this))).replace(/url\(([^"]*)(.+?)\1\)/g, ninjaUrlRedirect.bind(this)); - // - //var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); - // - function ninjaUrlRedirect (prop) { - //Checking for property value to not contain a full direct URL - if (!prop.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) { - //Checking for attributes and type of source - if (prop.indexOf('href') !== -1 || prop.indexOf('src') !== -1) { //From HTML attribute - // - prop = prop.replace(/"([^"]*)"/gi, ninjaUrlPrepend.bind(this)); - } else if (prop.indexOf('url') !== -1) { //From CSS property - //TODO: Add functionality - var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); - prop = prop.replace(/[^()\\""\\'']+/g, cssUrlToNinjaUrl); - function cssUrlToNinjaUrl (s) { - if (s !== 'url') { - s = docRootUrl + s; - } - return s; - } - } - } - return prop; - } - // - function ninjaUrlPrepend (url) { - var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); - if (url.indexOf('data:image') !== -1) { - return url; - } else { - return '"'+docRootUrl+url.replace(/\"/gi, '')+'"'; - } - } - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - - - - - + //TODO: Clean up, using for prototyping + this._templateDocument.head.innerHTML = (this._userDocument.content.head.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator)); + this._templateDocument.body.innerHTML = (this._userDocument.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator)); + var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; //TODO: Use querySelectorAll @@ -603,7 +549,6 @@ exports.HTMLDocument = Montage.create(TextDocument, { - //Temporarily checking for disabled special case var stags = this.iframe.contentWindow.document.getElementsByTagName('style'), ltags = this.iframe.contentWindow.document.getElementsByTagName('link'); @@ -628,7 +573,6 @@ exports.HTMLDocument = Montage.create(TextDocument, { - //Adding a handler for the main user document reel to finish loading this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); @@ -687,6 +631,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { // fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0]; + //TODO: Make public version of this.application.ninja.ioMediator.getNinjaPropUrlRedirect with dynamic ROOT tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, detectUrl); function detectUrl (prop) { -- cgit v1.2.3 From 7e61ce5aba0c8465595804da21e365baf4d8c15d Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 23 Mar 2012 13:22:42 -0700 Subject: Removing m-js components I/O and fix for webGL Removed saving m-js components as new components broke I/O when present. Also made a fix for checking length of webGL array since first item now is non-user data. (That is to be removed) --- js/document/html-document.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'js/document') diff --git a/js/document/html-document.js b/js/document/html-document.js index 7ab4272b..8f9d2870 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -871,7 +871,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { //TODO: Add logic to handle save before preview this.application.ninja.documentController.handleExecuteSaveAll(null); //Temp check for webGL Hack - if (this.application.ninja.documentController.activeDocument.glData.length && this.application.ninja.documentController.activeDocument.glData.length > 0) { + if (this.application.ninja.documentController.activeDocument.glData.length && this.application.ninja.documentController.activeDocument.glData.length > 1) {//TODO: Should be 0, temp hack fix 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]); @@ -894,7 +894,8 @@ exports.HTMLDocument = Montage.create(TextDocument, { } } } - return {mode: 'html', document: this._userDocument, mjs: this._userComponents, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; + //return {mode: 'html', document: this._userDocument, mjs: this._userComponents, webgl: this.glData, 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 { @@ -917,7 +918,8 @@ exports.HTMLDocument = Montage.create(TextDocument, { } } } - return {mode: 'html', document: this._userDocument, mjs: this._userComponents, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; + //return {mode: 'html', document: this._userDocument, mjs: this._userComponents, webgl: this.glData, 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}; } else if (this.currentView === "code"){ //TODO: Would this get call when we are in code of HTML? } else { -- cgit v1.2.3