update interceptor

client/modules/IDE/components/TextOutput.js

@@ -7,7 +7,7 @@ class TextOutput extends React.Component {
   render() {
     return (
       <section
-        className="textoutput"
+        className="text-output"
         id="canvas-sub"
         tabIndex="0"
         role="main"

client/modules/IDE/components/Toolbar.js

@@ -27,7 +27,7 @@ function Toolbar(props) {
         <InlineSVG src={playUrl} alt="Play Sketch" />
       </button>
       <button
-        className={playButtonClass}
+        className="toolbar__play-sketch-button"
         onClick={() => { props.startTextOutput(); props.startSketch(); }}
         aria-label="play sketch with output text"
       >

client/styles/components/_toolbar.scss

@@ -9,6 +9,10 @@
 	}
 }
 
+.toolbar__play-sketch-button {
+	@extend %hidden-element;
+}
+
 .toolbar__stop-button {
 	@extend %toolbar-button;
 	&--selected {

client/styles/layout/_ide.scss

@@ -33,6 +33,10 @@
   @extend %hidden-element;
 }
 
+.text-output {
+	@extend %hidden-element;
+}
+
 .preview-frame {
   height: 100%;
   width: 100%;

static/intercept-p5.js

@@ -31,21 +31,19 @@ funcNames.forEach(function(x){
       Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
       var table = document.getElementById('textOutput-content-details');
       table.innerHTML = '';
-      Interceptor.populateTable(table,Interceptor.setupObject);
+      Interceptor.populateTable(table,Interceptor.setupObject.objectArray);
     }
 
     else if(frameCount%100 == 0 ) {
       Interceptor.drawObject = Interceptor.populateObject(x,arguments, Interceptor.drawObject, document.getElementById('textOutput-content-details'),true);
-      Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
       Interceptor.isCleared = false;
     }
     //reset some of the variables
     else if(frameCount%100 == 1 ) {
       if(!Interceptor.isCleared){
         var table = document.getElementById('textOutput-content-details');
-        table.innerHTML = '';
+        Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
-        Interceptor.populateTable(table,Interceptor.setupObject);
+        Interceptor.populateTable(table,Interceptor.setupObject.objectArray.concat(Interceptor.drawObject.objectArray));
-        Interceptor.populateTable(table,Interceptor.drawObject);
       }
       Interceptor.drawObject = Interceptor.clearVariables(Interceptor.drawObject);
     }

static/interceptor-functions.js

@@ -48,6 +48,8 @@ Object.defineProperty(Array.prototype, "equals", {enumerable: false});
 
 
 var Interceptor = {
+  prevTotalCount :0,
+  totalCount : 0,
   currentColor : 'white',
   bgColor : 'white',
   canvasDetails : {
@@ -205,26 +207,90 @@ var Interceptor = {
     });
   },
 
-  populateTable : function(table, object) {
+  populateTable : function(table, objectArray) {
-    for(var j =0;j<object.objectArray.length;j++) {
+    if(this.totalCount<20) {
+      if(this.prevTotalCount > this.totalCount) {
+        for(var j =0;j<this.totalCount;j++) {
+          var row = table.children[j];
+          var tempCol = row.children.length;
+          var properties =  Object.keys(objectArray[j]);
+
+          if(tempCol<properties.length){ //ie - there are more cols now
+            for(var i =0;i<tempCol;i++) {
+              row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+            }
+            for(var i=tempCol;i < properties.length;i++) {
+              var col = document.createElement('td');
+              col.innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+              row.appendChild(col);
+            }
+          }
+
+          else{ // ie - there are fewer cols now
+            for(var i =0;i<properties.length;i++) {
+              row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+            }
+            for(var i=properties.length;i<tempCol;i++) {
+              var tempCol = row.children[i];
+              row.removeChild(tempCol);
+            }
+          }
+
+        }
+        for(var j = this.totalCount;j<this.prevTotalCount;j++) {
+          var tempRow = table.children[j];
+          table.removeChild(tempRow);
+        }
+      } else if(this.prevTotalCount <= this.totalCount) {
+        for(var j =0;j<this.prevTotalCount;j++) {
+          var row = table.children[j];
+          var tempCol = row.children.length;
+          var properties =  Object.keys(objectArray[j]);
+
+          if(tempCol<properties.length){ //ie - there are more cols now
+            for(var i =0;i<=tempCol;i++) {
+              row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+            }
+            for(var i=tempCol;i < properties.length;i++) {
+              var col = document.createElement('td');
+              col.innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+              row.appendChild(col);
+            }
+          }
+
+          else{ // ie - there are fewer cols now
+            for(var i =0;i<properties.length;i++) {
+              row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+            }
+            for(var i=properties.length;i<tempCol;i++) {
+              var tempCol = row.children[i];
+              row.removeChild(tempCol);
+            }
+          }
+        }
+        for(var j = this.prevTotalCount;j<this.totalCount;j++) {
           var row = document.createElement('tr');
-      var properties =  Object.keys(object.objectArray[j]);
+          var properties =  Object.keys(objectArray[j]);
           for(var i =0;i<properties.length;i++) {
             var col = document.createElement('td');
-        col.innerHTML = properties[i] + ' : ' + object.objectArray[j][properties[i]];
+            col.innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
             row.appendChild(col);
           }
           table.appendChild(row);
         }
+      }
+
+    }
   },
 
   getSummary : function(object1, object2, element) {
-    var totalCount = object1.objectCount + object2.objectCount;
+    this.prevTotalCount = this.totalCount;
+    this.totalCount = object1.objectCount + object2.objectCount;
     element.innerHTML = '';
     element.innerHTML += 'Canvas size is ' + this.canvasDetails.width + ' by ' + this.canvasDetails.height + ' pixels ';
     element.innerHTML += ' and has a background colour of ' + this.bgColor + '. ';
-    element.innerHTML += 'This canvas contains ' + totalCount;
+    element.innerHTML += 'This canvas contains ' + this.totalCount;
-    if(totalCount > 1 ) {
+    if(this.totalCount > 1 ) {
       element.innerHTML += ' objects. The objects are ';
     }
     else {
@@ -238,7 +304,9 @@ var Interceptor = {
       for(var i=0;i<keys.length;i++) {
         element.innerHTML += totObjectTypeCount[keys[i]] + ' ' + keys[i] + ' ';
       }
+
       element.innerHTML += "<br>";
+      if(this.totalCount<20){
         for(var i=0; i <object1.objectArray.length; i++) {
           var objKeys = Object.keys(object1.objectArray[i]);
           for(var j=0;j<objKeys.length;j++) {
@@ -252,6 +320,8 @@ var Interceptor = {
           }
         }
       }
+
+    }
   }
 
 };

static/loadData.js

@@ -12,6 +12,6 @@ function fetchJSONFile(path, callback) {
     httpRequest.open('GET', path,false);
     httpRequest.send();
 }
-fetchJSONFile('https://rawgit.com/processing/p5.js-website/master/reference/data.json', function(data){
+fetchJSONFile('https://raw.githubusercontent.com/processing/p5.js-website/9f1a4cd299c1330b046373407d42894e274d20e7/reference/data.min.json', function(data){
     allData = data;
 });