From c14eae56c87d7e52facd65680ac7bb8d08b2b53a Mon Sep 17 00:00:00 2001 From: MathuraMG Date: Fri, 12 Aug 2016 00:11:31 -0400 Subject: [PATCH] add files --- client/modules/IDE/components/PreviewFrame.js | 8 + static/intercept-p5.js | 70 +++++ static/interceptor-functions.js | 291 ++++++++++++++++++ 3 files changed, 369 insertions(+) create mode 100644 static/intercept-p5.js create mode 100644 static/interceptor-functions.js diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index 1ae55a14..8c2a3cb7 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -127,6 +127,14 @@ class PreviewFrame extends React.Component { htmlFile = htmlFile.replace(fileRegex, ``); }); + const htmlHead = htmlFile.match(/(?:)([\s\S]*?)(?:<\/head>)/gmi); + const headRegex = new RegExp('head', 'i'); + let htmlHeadContents = htmlHead[0].split(headRegex)[1]; + htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2); + htmlHeadContents += '\n'; + htmlHeadContents += '\n'; + htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`); + // const htmlHead = htmlFile.match(/(?:)([\s\S]*?)(?:<\/head>)/gmi); // const headRegex = new RegExp('head', 'i'); // let htmlHeadContents = htmlHead[0].split(headRegex)[1]; diff --git a/static/intercept-p5.js b/static/intercept-p5.js new file mode 100644 index 00000000..0adc542b --- /dev/null +++ b/static/intercept-p5.js @@ -0,0 +1,70 @@ +var shadowDOMElement; +var canvasLocation =''; + +//for object in setpu (??) + + +funcNames = refData["classitems"].map(function(x){ + return { + name: x["name"], + params: x["params"], + class: x["class"], + module: x["module"], + submodule: x["submodule"] + }; +}); + +funcNames = funcNames.filter(function(x) { + let className = x["class"]; + return (x["name"] && x["params"] && (className==='p5')); +}) + + +funcNames.forEach(function(x){ + var originalFunc = p5.prototype[x.name]; + p5.prototype[x.name] = function(){ + orgArg = arguments; + if(!shadowDOMElement){ + Interceptor.createShadowDOMElement(); + } + if(frameCount == 0) { //for setup + Interceptor.setupObject = Interceptor.populateObject(x,arguments, Interceptor.setupObject, document.getElementById('shadowDOM-content-details'),false); + Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('shadowDOM-content-summary')); + var table = document.getElementById('shadowDOM-content-details'); + table.innerHTML = ''; + Interceptor.populateTable(table,Interceptor.setupObject); + } + + else if(frameCount%100 == 0 ) { + Interceptor.drawObject = Interceptor.populateObject(x,arguments, Interceptor.drawObject, document.getElementById('shadowDOM-content-details'),true); + Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('shadowDOM-content-summary')); + Interceptor.isCleared = false; + } + //reset some of the variables + else if(frameCount%100 == 1 ) { + if(!Interceptor.isCleared){ + var table = document.getElementById('shadowDOM-content-details'); + table.innerHTML = ''; + Interceptor.populateTable(table,Interceptor.setupObject); + Interceptor.populateTable(table,Interceptor.drawObject); + } + Interceptor.drawObject = Interceptor.clearVariables(Interceptor.drawObject); + } + return originalFunc.apply(this,arguments); + } +}); + +/*** PSUEDO CODE + +* Run @fc = 0 +* make a list of all the objects/shapes that are present - make a list of the objects using data.json +* check if the same ones are present in fc=1 ?? +* and update the content + +*Caveats +- if there is already a circle, we can actually update the values on the same one if there is the SAME number of circles. +-else we can update the SAME ones and add the rest + +links +- Color converter - http://chir.ag/projects/ntc/ +***/ diff --git a/static/interceptor-functions.js b/static/interceptor-functions.js new file mode 100644 index 00000000..16cd2a3b --- /dev/null +++ b/static/interceptor-functions.js @@ -0,0 +1,291 @@ +String.prototype.paddingLeft = function (paddingValue) { + return String(paddingValue + this).slice(-paddingValue.length); +}; + +function MergeObjRecursive(obj1, obj2) { + var obj3 = {}; + for(p in obj1) { + obj3[p] = obj1[p]; + } + for(p in obj2) { + if(Object.keys(obj3).indexOf(p)<0){ + obj3[p] = obj2[p]; + } + else { + obj3[p] = obj3[p] + obj2[p]; + } + } + return obj3; +} + +if(Array.prototype.equals) +// attach the .equals method to Array's prototype to call it on any array +Array.prototype.equals = function (array) { + // if the other array is a falsy value, return + if (!array) + return false; + + // compare lengths - can save a lot of time + if (this.length != array.length) + return false; + + for (var i = 0, l=this.length; i < l; i++) { + // Check if we have nested arrays + if (this[i] instanceof Array && array[i] instanceof Array) { + // recurse into the nested arrays + if (!this[i].equals(array[i])) + return false; + } + else if (this[i] != array[i]) { + // Warning - two different object instances will never be equal: {x:20} != {x:20} + return false; + } + } + return true; +} +// Hide method from for-in loops +Object.defineProperty(Array.prototype, "equals", {enumerable: false}); + + +var Interceptor = { + currentColor : 'white', + bgColor : 'white', + canvasDetails : { + width : 0, + height: 0 + }, + setupObject : { + objectArray : [], + objectCount : 0, + objectTypeCount : {} + }, + drawObject : { + objectArray : [], + objectCount : 0, + objectTypeCount : {} + }, + isCleared : false, + createShadowDOMElement : function() { + + // var c = document.getElementsByTagName('canvas')[0]; + var c = document.getElementById('canvas-sub'); + c.setAttribute("tabIndex","0"); + c.setAttribute("role","region"); + + var section = document.createElement('section'); + section.id = "shadowDOM-content"; + section.className = "shadowDOM-content"; + c.appendChild(section); + + var summary = document.createElement('div'); + summary.setAttribute("tabIndex","0"); + summary.setAttribute("role","region"); + summary.id = "shadowDOM-content-summary"; + summary.className = "shadowDOM-content-summary"; + section.appendChild(summary); + + var details = document.createElement('div'); + details.setAttribute("tabIndex","0"); + details.setAttribute("role","region"); + details.id = "shadowDOM-content-details"; + details.className = "shadowDOM-content-details"; + section.appendChild(details); + + var contentTable = document.createElement('table'); + contentTable.id="shadowDOM-content-table"; + contentTable.className ="shadowDOM-content-table"; + contentTable.setAttribute('summary','details of object in the canvas'); + + details.appendChild(contentTable); + shadowDOMElement = document.getElementById('shadowDOM-content'); + }, + getColorName : function(arguments) { + if(arguments.length==3) { + //assuming that we are doing RGB - convert RGB values to a name + var color = '#' + arguments[0].toString(16).paddingLeft("00") + arguments[1].toString(16).paddingLeft("00") + arguments[2].toString(16).paddingLeft("00"); + var n_match = ntc.name(color); + return n_match[1]; + } + else if(arguments.length==1) { + if(!(typeof(arguments[0])).localeCompare("number")) { + //assuming that we are doing RGB - this would be a grayscale number + if(arguments[0]<10) { + return 'black'; + } + else if(arguments[0]>240) { + return 'white'; + } + else { + return 'grey'; + } + } + else if(!(typeof(arguments[0])).localeCompare("string")) { + if(!arguments[0].charAt(0).localeCompare('#')) { + //if user has entered a hex color + var n_match = ntc.name(arguments[0]); + return n_match[1]; + } + else { + return arguments[0]; + } + } + } + }, + + canvasLocator : function(arguments,canvasX,canvasY){ + var x,y; + var isNum1 = false; + var isNum2 = false; + for(var i=0;i0.6*canvasY) { + return 'bottom left'; + } + else { + return 'mid left'; + } + } + else if(x>0.6*canvasX) { + if(y<0.4*canvasY) { + return 'top right'; + } + else if(y>0.6*canvasY) { + return 'bottom right'; + } + else { + return 'mid right'; + } + } + else { + if(y<0.4*canvasY) { + return 'top middle'; + } + else if(y>0.6*canvasY) { + return 'bottom middle'; + } + else { + return 'middle'; + } + } + }, + clearVariables : function(object) { + object.objectTypeCount = {}; + object.objectCount = 0; + this.isCleared = true; + return object; + }, + + populateObject : function(x,arguments, object ,table, isDraw) { + objectCount = object.objectCount; + objectArray = object.objectArray; + objectTypeCount = object.objectTypeCount; + if(!isDraw) { + //check for special function in setup -> createCanvas + if(!x.name.localeCompare('createCanvas')) { + this.canvasDetails.width = arguments[0]; + this.canvasDetails.height = arguments[1]; + } + } + //check for speacial functions in general -> background/fill + if(!x.name.localeCompare('fill')) { + this.currentColor = this.getColorName(arguments); + } + else if(!x.name.localeCompare('background')) { + this.bgColor = this.getColorName(arguments); + } + else if(!x.module.localeCompare('Shape') || !x.module.localeCompare('Typography') &&((!x.submodule)||(x.submodule.localeCompare('Attributes')!=0)) ){ + + var canvasLocation = this.canvasLocator(arguments ,width,height); + + objectArray[objectCount] = { + 'type' : x.name, + 'location': canvasLocation, + 'colour': this.currentColor + }; + //add the object(shape/text) parameters in objectArray + for(var i=0;i 1 ) { + element.innerHTML += ' objects. The objects are '; + } + else { + element.innerHTML += ' object. The object is '; + } + + if(object2.objectCount>0 || object1.objectCount>0 ) { + + totObjectTypeCount = MergeObjRecursive(object1.objectTypeCount, object2.objectTypeCount); + var keys = Object.keys(totObjectTypeCount); + for(var i=0;i