diff --git a/dist/p5.accessibility.js b/dist/p5.accessibility.js index 0554000..2159a9e 100644 --- a/dist/p5.accessibility.js +++ b/dist/p5.accessibility.js @@ -871,7 +871,8 @@ if (Array.prototype.equals) // Hide method from for-in loops Object.defineProperty(Array.prototype, `equals`, { enumerable: false -});;function baseInterceptor() { +});;const MAX_OBJECTS = 20; +function baseInterceptor() { this.prevTotalCount = 0, this.totalCount = 0, this.currentColor = `white`, @@ -1059,7 +1060,7 @@ function RGBAString(arguments) { return (getRGBAname(values)); } else if (((arguments[0].match(/%/g)).length) === 3) { // when arguments[0] is 'rgba(10%,100%,30%,0.5)' - // This line creates an array with the values in order the following order ["R","G","B","A"]. The RegEx looks for three values with percentages and one value without percentage. + // This line creates an array with the values in order the following order ["R","G","B","A"]. The RegEx looks for three values with percentages and one value without percentage. const values = (((arguments[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?\))/g))[0]).replace(/%|\(|\)/g, ``)).split(`,`); for (let i = values.length - 2; i >= 0; i--) { if (parseInt(values[i]) < 100) { @@ -1102,7 +1103,7 @@ function RGBString(arguments) { if (arguments[0].match(/%/)) { if (((arguments[0].match(/%/g)).length) === 3) { // when arguments[0] is 'rgb(10%,100%,30%)' - // This line creates an array with the values in order the following order ["R","G","B"]. The RegEx looks for three values with percentages. + // This line creates an array with the values in order the following order ["R","G","B"]. The RegEx looks for three values with percentages. const values = (((arguments[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%\s*?\))/g))[0]).replace(/%|\(|\)/g, ``)).split(`,`); for (let i = values.length - 1; i >= 0; i--) { if (parseInt(values[i]) < 100) { @@ -1118,12 +1119,13 @@ function RGBString(arguments) { } } else { // when arguments[0] is 'rgb(10,100,30)' - // This line creates an array with the values in order the following order ["R","G","B"]. Values must be less than 255. + // This line creates an array with the values in order the following order ["R","G","B"]. Values must be less than 255. let values = (((arguments[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?\))/g))[0]).replace(/(\(|\))/g, ``)).split(`,`); values = [parseInt(values[0]), parseInt(values[1]), parseInt(values[2])]; return (getRGBname(values)); } -};function BaseEntity(Interceptor, object) { +} +;function BaseEntity(Interceptor, object) { this.type = Interceptor.currentColor + ` ` + object.name, this.location = ``, this.coordinates = ``, @@ -1443,7 +1445,7 @@ TextInterceptor.prototype.populateObject = function(x, passedArgs, object, isDra } TextInterceptor.prototype.populateTable = function(table, objectArray) { - if (this.totalCount < 100) { + if (this.totalCount <= MAX_OBJECTS) { if (this.prevTotalCount > this.totalCount) { for (let j = 0; j < this.totalCount; j++) { const row = table.children[j]; @@ -1484,7 +1486,9 @@ TextInterceptor.prototype.populateTable = function(table, objectArray) { } for (let j = this.totalCount; j < this.prevTotalCount; j++) { const tempRow = table.children[this.totalCount]; - table.removeChild(tempRow); + if(tempRow){ + table.removeChild(tempRow); + } } } else if (this.prevTotalCount <= this.totalCount) { for (let j = 0; j < this.prevTotalCount; j++) { @@ -1566,9 +1570,10 @@ TextInterceptor.prototype.getSummary = function(object1, object2, element) { const objectList = document.createElement(`ul`); - if (this.totalCount < 100) { - object1.objectArray.forEach((objArrayItem, i) => { + + object1.objectArray.forEach((objArrayItem, i) => { + if(i { + object2.objectArray.forEach((objArrayItem, i) => { + if(i { + const that = this; + objectArray = [].slice.call(objectArray); + objectArray.forEach((object, i) => { + if(i 0 && object.coordLoc.locX > 0) { documentPassed.getElementsByClassName(`gridOutput-cell-content`)[cellLoc].appendChild(cellLink); } - - }); - } + } + }); } /* helper function to populate object Details */ -GridInterceptor.prototype.populateObjectDetails = function(object1, object2, elementSummary, elementDetail) { +GridInterceptor.prototype.getSummary = function(object1, object2, elementSummary, elementDetail) { this.prevTotalCount = this.totalCount; this.totalCount = object1.objectCount + object2.objectCount; elementSummary.innerHTML = ``; @@ -1780,36 +1787,40 @@ GridInterceptor.prototype.populateObjectDetails = function(object1, object2, ele const objectList = document.createElement(`ul`); - if (this.totalCount < 100) { + if (true){// }(this.totalCount < MAX_OBJECTS) { object1.objectArray.forEach((objArrayItem, i) => { - const objectListItem = document.createElement(`li`); - objectListItem.id = `object` + i; - objectList.appendChild(objectListItem); - const objKeys = Object.keys(objArrayItem.getAttributes()); - objKeys.forEach((objKeyItem) => { - if (objKeyItem.localeCompare(`coordLoc`)) { - if (objKeyItem.localeCompare(`type`)) { - objectListItem.innerHTML += objKeyItem + ` = ` + objArrayItem[objKeyItem] + ` `; - } else { - objectListItem.innerHTML += objArrayItem[objKeyItem] + ` `; + if(i { + if (objKeyItem.localeCompare(`coordLoc`)) { + if (objKeyItem.localeCompare(`type`)) { + objectListItem.innerHTML += objKeyItem + ` = ` + objArrayItem[objKeyItem] + ` `; + } else { + objectListItem.innerHTML += objArrayItem[objKeyItem] + ` `; + } } - } - }); + }); + } }); object2.objectArray.forEach((objArrayItem, i) => { - const objectListItem = document.createElement(`li`); - objectListItem.id = `object` + (object1.objectArray.length + i); - objectList.appendChild(objectListItem); - const objKeys = Object.keys(objArrayItem.getAttributes()); - objKeys.forEach((objKeyItem) => { - if (objKeyItem.localeCompare(`coordLoc`)) { - if (objKeyItem.localeCompare(`type`)) { - objectListItem.innerHTML += objKeyItem + ` = ` + objArrayItem[objKeyItem] + ` `; - } else { - objectListItem.innerHTML += objArrayItem[objKeyItem] + ` `; + if(i { + if (objKeyItem.localeCompare(`coordLoc`)) { + if (objKeyItem.localeCompare(`type`)) { + objectListItem.innerHTML += objKeyItem + ` = ` + objArrayItem[objKeyItem] + ` `; + } else { + objectListItem.innerHTML += objArrayItem[objKeyItem] + ` `; + } } - } - }); + }); + } }); elementDetail.appendChild(objectList); } @@ -1862,9 +1873,9 @@ if (document.getElementById(`tableOutput-content`)) { summary.innerHTML = ``; /* global gridInterceptor */ gridInterceptor.createShadowDOMElement(document); - gridInterceptor.setupObject = - gridInterceptor.populateObject(x, orgArg, gridInterceptor.setupObject, false); + gridInterceptor.setupObject = gridInterceptor.populateObject(x, orgArg, gridInterceptor.setupObject, false); gridInterceptor.populateObjectDetails(gridInterceptor.setupObject, gridInterceptor.drawObject, summary, details); + gridInterceptor.populateTable(details, gridInterceptor.setupObject); } else if (frameCount === 1 || frameCount % 20 === 0) { gridInterceptor.drawObject = @@ -1882,11 +1893,13 @@ if (document.getElementById(`tableOutput-content`)) { // TODO : make this more efficient so that it happens only ONCE per frame count /* global programObjects */ programObjects = gridInterceptor.setupObject.objectArray.concat(gridInterceptor.drawObject.objectArray); - gridInterceptor.populateObjectDetails(gridInterceptor.setupObject, gridInterceptor.drawObject, summary, details); + gridInterceptor.getSummary(gridInterceptor.setupObject, gridInterceptor.drawObject, summary, details); gridInterceptor.populateTable(programObjects, document); } - if (x.name === `redraw`) { // reset some of the variables - gridInterceptor.drawObject = gridInterceptor.clearVariables(gridInterceptor.drawObject); + else if (frameCount % 20 === 19) { + if (x.name === `redraw`) { // reset some of the variables + gridInterceptor.drawObject = gridInterceptor.clearVariables(gridInterceptor.drawObject); + } } return originalFunc.apply(this, orgArg); }; diff --git a/examples/Example/app.js b/examples/Example/app.js index 1355893..4c6a905 100644 --- a/examples/Example/app.js +++ b/examples/Example/app.js @@ -13,7 +13,7 @@ function draw() { ellipse(20,20,20,20); fill(32,255,65); ellipse(50,x,10,10); - fill("#00ffb2"); + fill(`#00ffb2`); ellipse(150,200-x,10,10); fill(150); rect(170,170,25,25); diff --git a/src/baseInterceptor.js b/src/baseInterceptor.js index 42a8387..ba311b1 100644 --- a/src/baseInterceptor.js +++ b/src/baseInterceptor.js @@ -1,3 +1,4 @@ +const MAX_OBJECTS = 20; function baseInterceptor() { this.prevTotalCount = 0, this.totalCount = 0, @@ -186,7 +187,7 @@ function RGBAString(arguments) { return (getRGBAname(values)); } else if (((arguments[0].match(/%/g)).length) === 3) { // when arguments[0] is 'rgba(10%,100%,30%,0.5)' - // This line creates an array with the values in order the following order ["R","G","B","A"]. The RegEx looks for three values with percentages and one value without percentage. + // This line creates an array with the values in order the following order ["R","G","B","A"]. The RegEx looks for three values with percentages and one value without percentage. const values = (((arguments[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?\))/g))[0]).replace(/%|\(|\)/g, ``)).split(`,`); for (let i = values.length - 2; i >= 0; i--) { if (parseInt(values[i]) < 100) { @@ -229,7 +230,7 @@ function RGBString(arguments) { if (arguments[0].match(/%/)) { if (((arguments[0].match(/%/g)).length) === 3) { // when arguments[0] is 'rgb(10%,100%,30%)' - // This line creates an array with the values in order the following order ["R","G","B"]. The RegEx looks for three values with percentages. + // This line creates an array with the values in order the following order ["R","G","B"]. The RegEx looks for three values with percentages. const values = (((arguments[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%\s*?\))/g))[0]).replace(/%|\(|\)/g, ``)).split(`,`); for (let i = values.length - 1; i >= 0; i--) { if (parseInt(values[i]) < 100) { @@ -245,9 +246,9 @@ function RGBString(arguments) { } } else { // when arguments[0] is 'rgb(10,100,30)' - // This line creates an array with the values in order the following order ["R","G","B"]. Values must be less than 255. + // This line creates an array with the values in order the following order ["R","G","B"]. Values must be less than 255. let values = (((arguments[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?\))/g))[0]).replace(/(\(|\))/g, ``)).split(`,`); values = [parseInt(values[0]), parseInt(values[1]), parseInt(values[2])]; return (getRGBname(values)); } -} \ No newline at end of file +} diff --git a/src/gridInterceptor/interceptorFunctions.js b/src/gridInterceptor/interceptorFunctions.js index 2b5c947..cd857ee 100644 --- a/src/gridInterceptor/interceptorFunctions.js +++ b/src/gridInterceptor/interceptorFunctions.js @@ -70,10 +70,10 @@ GridInterceptor.prototype.populateObject = function(x, passedArgs, object, isDra } GridInterceptor.prototype.populateTable = function(objectArray, documentPassed) { - if (this.totalCount < 100) { - const that = this; - objectArray = [].slice.call(objectArray); - objectArray.forEach((object, i) => { + const that = this; + objectArray = [].slice.call(objectArray); + objectArray.forEach((object, i) => { + if(i 0 && object.coordLoc.locX > 0) { documentPassed.getElementsByClassName(`gridOutput-cell-content`)[cellLoc].appendChild(cellLink); } - - }); - } + } + }); } /* helper function to populate object Details */ -GridInterceptor.prototype.populateObjectDetails = function(object1, object2, elementSummary, elementDetail) { +GridInterceptor.prototype.getSummary = function(object1, object2, elementSummary, elementDetail) { this.prevTotalCount = this.totalCount; this.totalCount = object1.objectCount + object2.objectCount; elementSummary.innerHTML = ``; @@ -113,36 +112,40 @@ GridInterceptor.prototype.populateObjectDetails = function(object1, object2, ele const objectList = document.createElement(`ul`); - if (this.totalCount < 100) { + if (true){// }(this.totalCount < MAX_OBJECTS) { object1.objectArray.forEach((objArrayItem, i) => { - const objectListItem = document.createElement(`li`); - objectListItem.id = `object` + i; - objectList.appendChild(objectListItem); - const objKeys = Object.keys(objArrayItem.getAttributes()); - objKeys.forEach((objKeyItem) => { - if (objKeyItem.localeCompare(`coordLoc`)) { - if (objKeyItem.localeCompare(`type`)) { - objectListItem.innerHTML += objKeyItem + ` = ` + objArrayItem[objKeyItem] + ` `; - } else { - objectListItem.innerHTML += objArrayItem[objKeyItem] + ` `; + if(i { + if (objKeyItem.localeCompare(`coordLoc`)) { + if (objKeyItem.localeCompare(`type`)) { + objectListItem.innerHTML += objKeyItem + ` = ` + objArrayItem[objKeyItem] + ` `; + } else { + objectListItem.innerHTML += objArrayItem[objKeyItem] + ` `; + } } - } - }); + }); + } }); object2.objectArray.forEach((objArrayItem, i) => { - const objectListItem = document.createElement(`li`); - objectListItem.id = `object` + (object1.objectArray.length + i); - objectList.appendChild(objectListItem); - const objKeys = Object.keys(objArrayItem.getAttributes()); - objKeys.forEach((objKeyItem) => { - if (objKeyItem.localeCompare(`coordLoc`)) { - if (objKeyItem.localeCompare(`type`)) { - objectListItem.innerHTML += objKeyItem + ` = ` + objArrayItem[objKeyItem] + ` `; - } else { - objectListItem.innerHTML += objArrayItem[objKeyItem] + ` `; + if(i { + if (objKeyItem.localeCompare(`coordLoc`)) { + if (objKeyItem.localeCompare(`type`)) { + objectListItem.innerHTML += objKeyItem + ` = ` + objArrayItem[objKeyItem] + ` `; + } else { + objectListItem.innerHTML += objArrayItem[objKeyItem] + ` `; + } } - } - }); + }); + } }); elementDetail.appendChild(objectList); } diff --git a/src/gridInterceptor/interceptorP5.js b/src/gridInterceptor/interceptorP5.js index 30cd8da..4dec4f5 100644 --- a/src/gridInterceptor/interceptorP5.js +++ b/src/gridInterceptor/interceptorP5.js @@ -42,9 +42,9 @@ if (document.getElementById(`tableOutput-content`)) { summary.innerHTML = ``; /* global gridInterceptor */ gridInterceptor.createShadowDOMElement(document); - gridInterceptor.setupObject = - gridInterceptor.populateObject(x, orgArg, gridInterceptor.setupObject, false); + gridInterceptor.setupObject = gridInterceptor.populateObject(x, orgArg, gridInterceptor.setupObject, false); gridInterceptor.populateObjectDetails(gridInterceptor.setupObject, gridInterceptor.drawObject, summary, details); + gridInterceptor.populateTable(details, gridInterceptor.setupObject); } else if (frameCount === 1 || frameCount % 20 === 0) { gridInterceptor.drawObject = @@ -62,11 +62,13 @@ if (document.getElementById(`tableOutput-content`)) { // TODO : make this more efficient so that it happens only ONCE per frame count /* global programObjects */ programObjects = gridInterceptor.setupObject.objectArray.concat(gridInterceptor.drawObject.objectArray); - gridInterceptor.populateObjectDetails(gridInterceptor.setupObject, gridInterceptor.drawObject, summary, details); + gridInterceptor.getSummary(gridInterceptor.setupObject, gridInterceptor.drawObject, summary, details); gridInterceptor.populateTable(programObjects, document); } - if (x.name === `redraw`) { // reset some of the variables - gridInterceptor.drawObject = gridInterceptor.clearVariables(gridInterceptor.drawObject); + else if (frameCount % 20 === 19) { + if (x.name === `redraw`) { // reset some of the variables + gridInterceptor.drawObject = gridInterceptor.clearVariables(gridInterceptor.drawObject); + } } return originalFunc.apply(this, orgArg); }; diff --git a/src/textInterceptor/interceptorFunctions.js b/src/textInterceptor/interceptorFunctions.js index 80427f4..825f058 100644 --- a/src/textInterceptor/interceptorFunctions.js +++ b/src/textInterceptor/interceptorFunctions.js @@ -50,7 +50,7 @@ TextInterceptor.prototype.populateObject = function(x, passedArgs, object, isDra } TextInterceptor.prototype.populateTable = function(table, objectArray) { - if (this.totalCount < 100) { + if (this.totalCount <= MAX_OBJECTS) { if (this.prevTotalCount > this.totalCount) { for (let j = 0; j < this.totalCount; j++) { const row = table.children[j]; @@ -91,7 +91,9 @@ TextInterceptor.prototype.populateTable = function(table, objectArray) { } for (let j = this.totalCount; j < this.prevTotalCount; j++) { const tempRow = table.children[this.totalCount]; - table.removeChild(tempRow); + if(tempRow){ + table.removeChild(tempRow); + } } } else if (this.prevTotalCount <= this.totalCount) { for (let j = 0; j < this.prevTotalCount; j++) { @@ -173,9 +175,10 @@ TextInterceptor.prototype.getSummary = function(object1, object2, element) { const objectList = document.createElement(`ul`); - if (this.totalCount < 100) { - object1.objectArray.forEach((objArrayItem, i) => { + + object1.objectArray.forEach((objArrayItem, i) => { + if(i { + object2.objectArray.forEach((objArrayItem, i) => { + if(i