From d87cded11dcc0faf41a4a3e6b587e5549c0da6df 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 ++++---------------------------------------- js/mediators/io-mediator.js | 56 +++++++++++++++++++++++++++++++++++--- 2 files changed, 57 insertions(+), 64 deletions(-) (limited to 'js') diff --git a/js/document/html-document.js b/js/document/html-document.js index d4db6e2f..ed1569d4 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) { diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js index d81f4543..df0a41df 100644 --- a/js/mediators/io-mediator.js +++ b/js/mediators/io-mediator.js @@ -470,8 +470,6 @@ function loadWebGL (e) {\n\ getUrlfromNinjaUrl: { enumerable: false, value: function (url, fileRootUrl, fileUrl) { - //console.log("Params: ", url, fileRootUrl, fileUrl); - //console.log("Getting: " + url); // if (url.indexOf(fileRootUrl) !== -1) { url = url.replace(new RegExp(fileRootUrl.replace(/\//gi, '\\\/'), 'gi'), ''); @@ -499,13 +497,63 @@ function loadWebGL (e) {\n\ // url = (path+newURL).replace(/\/\//gi, '/'); } - //console.log("Returning: " + url); - //console.log("-----"); // return url; } }, //////////////////////////////////////////////////////////////////// + // + getDocRootUrl: { + value: function () { + return this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); + } + }, + //////////////////////////////////////////////////////////////////// + // + getNinjaPropUrlRedirect: { + enumerable: false, + value: function (prop/* , root */) { + //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 + //if (root) { + //prop = (root+prop).replace(/"([^"]*)"/gi, this.getNinjaUrlPrepend.bind(this)); + //} else { + prop = prop.replace(/"([^"]*)"/gi, this.getNinjaUrlPrepend.bind(this)); + //} + } else if (prop.indexOf('url') !== -1) { + //From CSS property + //if (root) { + //prop = (root+prop).replace(/[^()\\""\\'']+/g, cssUrlToNinjaUrl.bind(this)); + //} else { + prop = prop.replace(/[^()\\""\\'']+/g, cssUrlToNinjaUrl.bind(this)); + //} + function cssUrlToNinjaUrl (s) { + if (s !== 'url') { + s = this.getDocRootUrl() + s; + } + return s; + } + } + } + return prop; + } + }, + //////////////////////////////////////////////////////////////////// + // + getNinjaUrlPrepend: { + enumerable: false, + value: function (url) { + if (url.indexOf('data:') !== -1) { + return url; + } else { + return '"'+this.getDocRootUrl()+url.replace(/\"/gi, '')+'"'; + } + } + }, + //////////////////////////////////////////////////////////////////// //Method to return a string from CSS rules (to be saved to a file) getCssFromRules: { enumerable: false, -- cgit v1.2.3 From 60d6346a78fb5257eaf36f17a5fcb764a342c012 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 16 Apr 2012 15:07:16 -0700 Subject: Fixed materials editor popup not refreshing correctly. Signed-off-by: Nivesh Rajbhandari --- .../materials-popup.reel/materials-popup.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) (limited to 'js') diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index bbccf45d..bd10f7a5 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -214,10 +214,9 @@ exports.MaterialsPopup = Montage.create(Component, { enumerable: true, value: function(materialID) { - // Note that setting Array.length = 0 will empty arrays, - // which is fine if you use getMaterialData to get a new array, but not for the - // dummyData arrays. - this._materialsData.length = 0; + //TODO - Hack to force repetition to draw. Setting .length = 0 did not work. + this.materialsData = []; + this._materialName = materialID; if( (materialID === "UberMaterial") || @@ -231,16 +230,14 @@ exports.MaterialsPopup = Montage.create(Component, { if (material) { this._material = material; - var matData = this.getMaterialData( material ); - this.materialsData = matData; + this.materialsData = this.getMaterialData( material ); } } else { - this.materialsData = this._dummyData1.slice(0); + this.materialsData = this[materialID]; } - - this.needsDraw = true; + this.needsDraw = true; } }, @@ -445,7 +442,8 @@ exports.MaterialsPopup = Montage.create(Component, { } }, - _dummyData1: { + // _dummyData1 + CheckerBoard: { value: [ { "label": "Texture1", @@ -588,7 +586,8 @@ exports.MaterialsPopup = Montage.create(Component, { ] }, - _dummyData2: { + // _dummyData2 + ShinyMetal: { value: [ { "label": "Diffuse", -- cgit v1.2.3 From b183dbb1d5efef5db0ba3f8004b674b63b66b76a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 25 Apr 2012 13:36:41 -0700 Subject: Changing canvas-2d gradient drawing to more closely match div's background-image gradient support. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/circle.js | 4 ++-- js/lib/geom/rectangle.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'js') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 1073c2db..218dcfa6 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -457,9 +457,9 @@ var Circle = function GLCircle() { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, Math.max(yScale, xScale)); + xCtr, yCtr, Math.max(this._width, this._height)/2); } else { - gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); + gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); } colors = this._fillColor.color; diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 91b1d426..8278f1a3 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -452,13 +452,13 @@ var Rectangle = function GLRectangle() { // render the fill ctx.beginPath(); if (this._fillColor) { - inset = Math.ceil( lw ) + 0.5; + inset = Math.ceil( lw ); if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); } else { - gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); + gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); } colors = this._fillColor.color; @@ -486,11 +486,11 @@ var Rectangle = function GLRectangle() { // render the stroke ctx.beginPath(); if (this._strokeColor) { - inset = Math.ceil( 0.5*lw ) + 0.5; + inset = Math.ceil( 0.5*lw ); if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); + gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); } else { gradient = ctx.createLinearGradient(0, h/2, w, h/2); } -- cgit v1.2.3 From 5e029d148e267b7ec8662f31ccdae2a0916de329 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 25 Apr 2012 13:37:02 -0700 Subject: IKNinja-406 - Strange behavior when changing the corner radius to the maximum value. IKNinja-1236 - Corner radius is not applied if stroke size is >= 2 times the corner radius. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/rectangle.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 8278f1a3..fcd1c1bd 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -356,7 +356,9 @@ var Rectangle = function GLRectangle() { // various declarations var pt, rad, ctr, startPt, bPts; var width = Math.round(this.getWidth()), - height = Math.round(this.getHeight()); + height = Math.round(this.getHeight()), + hw = 0.5*width, + hh = 0.5*height; pt = [inset, inset]; // top left corner @@ -364,6 +366,12 @@ var Rectangle = function GLRectangle() { var trRad = this._trRadius; var blRad = this._blRadius; var brRad = this._brRadius; + // limit the radii to half the rectangle dimension + var minDimen = hw < hh ? hw : hh; + if (tlRad > minDimen) tlRad = minDimen; + if (blRad > minDimen) blRad = minDimen; + if (brRad > minDimen) brRad = minDimen; + if (trRad > minDimen) trRad = minDimen; if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) { ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); @@ -452,7 +460,7 @@ var Rectangle = function GLRectangle() { // render the fill ctx.beginPath(); if (this._fillColor) { - inset = Math.ceil( lw ); + inset = Math.ceil( lw ) - 0.5; if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { @@ -486,7 +494,7 @@ var Rectangle = function GLRectangle() { // render the stroke ctx.beginPath(); if (this._strokeColor) { - inset = Math.ceil( 0.5*lw ); + inset = Math.ceil( 0.5*lw ) - 0.5; if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { -- cgit v1.2.3 From 7a03f8393b2a8fe4ada75757d967a0af8b649553 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 25 Apr 2012 14:33:34 -0700 Subject: Updating the canvas runtime files for gradient and rectangle radius fixes. Signed-off-by: Nivesh Rajbhandari --- js/io/system/ninjalibrary.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/io/system/ninjalibrary.json b/js/io/system/ninjalibrary.json index 285444b5..e236f2e0 100644 --- a/js/io/system/ninjalibrary.json +++ b/js/io/system/ninjalibrary.json @@ -1,6 +1,6 @@ { "libraries": [ {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.7.0.0"}, - {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.4.0"} + {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.5.0"} ] } \ No newline at end of file -- cgit v1.2.3 From 6c61c52bd86c90ce16107a6381ff242de9032211 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 26 Apr 2012 10:12:58 -0700 Subject: Fixing duplicate layer bug --- js/mediators/drag-drop-mediator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index eedab8fc..12f8dc70 100755 --- a/js/mediators/drag-drop-mediator.js +++ b/js/mediators/drag-drop-mediator.js @@ -133,7 +133,7 @@ exports.DragDropMediator = Montage.create(Component, { 'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px' }; // - self.application.ninja.elementMediator.addElements(element, rules); + //self.application.ninja.elementMediator.addElements(element, rules); } else { //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT } -- cgit v1.2.3 From 7f5eb2105c2e5e0970072af88fa90baded7e55d6 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 26 Apr 2012 11:05:24 -0700 Subject: Fixing duplicate layer error --- js/mediators/drag-drop-mediator.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'js') diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index 12f8dc70..b0aba5b6 100755 --- a/js/mediators/drag-drop-mediator.js +++ b/js/mediators/drag-drop-mediator.js @@ -115,25 +115,25 @@ exports.DragDropMediator = Montage.create(Component, { // if (e.currentTarget.fileType.indexOf('svg') !== -1) { element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper + element.type = 'image/svg+xml'; element.src = url+'/'+fileName; - element.type = 'image/svg+xml'; } else { element = NJUtils.makeNJElement('image', 'image', 'image'); element.src = url+'/'+fileName; } - //TODO: Remove temp fix for elements to redraw on drop - + //Adding element once it is loaded element.onload = function () { - self.application.ninja.elementMediator.addElements(element, rules); + element.onload = null; + self.application.ninja.elementMediator.addElements(element, rules, true); }; - // + //Setting rules of element rules = { 'position': 'absolute', 'top' : (parseInt(e.currentTarget.filePosition.y) - parseInt(this.application.ninja.stage.userContentTop)) + 'px', 'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px' }; - // - //self.application.ninja.elementMediator.addElements(element, rules); + // + self.application.ninja.elementMediator.addElements(element, rules, false); } else { //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT } -- cgit v1.2.3