p5.js-web-editor/static/interceptor/gridInterceptor/interceptor-functions.js

350 lines
11 KiB
JavaScript
Raw Normal View History

2016-08-12 04:11:31 +00:00
var Interceptor = {
2016-08-16 00:28:18 +00:00
prevTotalCount :0,
totalCount : 0,
2016-08-12 04:11:31 +00:00
currentColor : 'white',
objectArea : 0,
objectDescription : '',
bgColor : 'white',
coordinates : [],
2016-08-12 04:11:31 +00:00
canvasDetails : {
width : 0,
height: 0
},
setupObject : {
objectArray : [],
objectCount : 0,
objectTypeCount : {}
},
drawObject : {
objectArray : [],
objectCount : 0,
objectTypeCount : {}
},
isCleared : false,
noRows: 10,
noCols: 10,
coordLoc : {},
2016-08-12 04:11:31 +00:00
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];
}
}
}
},
/* return which part of the canvas an object os present */
canvasAreaLocation : function(x,arguments,canvasX,canvasY){
var x_loc,y_loc;
2016-08-12 04:11:31 +00:00
for(var i=0;i<arguments.length;i++) {
a = arguments[i];
if(x.params[i].description.indexOf("x-coordinate")>-1) {
x_loc = a;
}
else if(x.params[i].description.indexOf("y-coordinate")>-1) {
y_loc = a;
2016-08-12 04:11:31 +00:00
}
}
if(x_loc<0.4*canvasX) {
if(y_loc<0.4*canvasY) {
2016-08-12 04:11:31 +00:00
return 'top left';
}
else if(y_loc>0.6*canvasY) {
2016-08-12 04:11:31 +00:00
return 'bottom left';
}
else {
return 'mid left';
}
}
else if(x_loc>0.6*canvasX) {
if(y_loc<0.4*canvasY) {
2016-08-12 04:11:31 +00:00
return 'top right';
}
else if(y_loc>0.6*canvasY) {
2016-08-12 04:11:31 +00:00
return 'bottom right';
}
else {
return 'mid right';
}
}
else {
if(y_loc<0.4*canvasY) {
2016-08-12 04:11:31 +00:00
return 'top middle';
}
else if(y_loc>0.6*canvasY) {
2016-08-12 04:11:31 +00:00
return 'bottom middle';
}
else {
return 'middle';
}
}
},
/* return which part of the canvas an object os present */
canvasLocator : function(x,arguments,canvasX,canvasY){
var x_loc, y_loc;
var locX, locY;
for(var i=0;i<arguments.length;i++) {
a = arguments[i];
if(x.params[i].description.indexOf("x-coordinate")>-1) {
x_loc = a;
}
else if(x.params[i].description.indexOf("y-coordinate")>-1) {
y_loc = a;
}
}
locX = Math.floor((x_loc/canvasX)*this.noRows);
locY = Math.floor((y_loc/canvasY)*this.noCols);
if( locX == this.noRows) {
locX = locX - 1;
}
if( locY == this.noCols) {
locY = locY - 1;
}
return({
locX: locX,
locY: locY
})
},
2016-08-12 04:11:31 +00:00
clearVariables : function(object) {
object.objectTypeCount = {};
object.objectCount = 0;
this.isCleared = true;
return object;
},
createShadowDOMElement : function(document) {
var contentTable = document.getElementById('textOutput-content-table');
for(var i=0; i<this.noRows; i++) {
var row = document.createElement('tr');
for(var j=0; j<this.noCols; j++) {
var col = document.createElement('td');
col.className = "textOutput-cell-content";
col.innerHTML = 'test';
row.appendChild(col);
}
contentTable.appendChild(row);
}
shadowDOMElement = document.getElementById('textOutput-content');
},
2016-08-12 04:11:31 +00:00
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];
}
}
/* Here - most of the functions are generalised, but some need specific outputs */
/* for `fill` function */
2016-08-12 04:11:31 +00:00
if(!x.name.localeCompare('fill')) {
this.currentColor = this.getColorName(arguments);
}
/* for `background` function */
2016-08-12 04:11:31 +00:00
else if(!x.name.localeCompare('background')) {
this.bgColor = this.getColorName(arguments);
}
/* for 2D functions and text function */
2016-08-12 04:11:31 +00:00
else if(!x.module.localeCompare('Shape') || !x.module.localeCompare('Typography') &&((!x.submodule)||(x.submodule.localeCompare('Attributes')!=0)) ){
this.objectArea = this.getObjectArea(x.name, arguments);
var canvasLocation = this.canvasAreaLocation(x, arguments ,width,height);
this.coordLoc = this.canvasLocator(x,arguments,width,height);
/* in case of text, the description should be what is in the content */
if(x.name.localeCompare('text')){
this.objectDescription = x.name;
}
else {
this.objectDescription = arguments[0].substring(0,20);
}
objectArray[objectCount] = {
'type' : this.currentColor + ' - ' + this.objectDescription ,
'location': canvasLocation, //top left vs top right etc
'coordLoc': this.coordLoc, // 3,3 vs 5,3 etc
'area': this.objectArea,
'co-ordinates': this.coordinates // coordinates of where the objects are drawn
2016-08-12 04:11:31 +00:00
};
this.coordinates = [];
/*add the object(shape/text) parameters in objectArray */
2016-08-12 04:11:31 +00:00
for(var i=0;i<arguments.length;i++) {
if(!(typeof(arguments[i])).localeCompare('number')){
arguments[i] = round(arguments[i]);
}
if(x.params[i].description.indexOf("x-coordinate")>-1) {
objectArray[objectCount]['co-ordinates'].push(arguments[i]+'x')
}
else if(x.params[i].description.indexOf("y-coordinate")>-1) {
objectArray[objectCount]['co-ordinates'].push(arguments[i]+'y')
}
else{
objectArray[objectCount][x.params[i].description]=arguments[i];
}
2016-08-12 04:11:31 +00:00
}
if(objectTypeCount[x.name]) {
objectTypeCount[x.name]++;
}
else {
objectTypeCount[x.name]=1;
}
objectCount++;
}
return ({
objectCount : objectCount,
objectArray : objectArray,
objectTypeCount : objectTypeCount
});
},
populateTable : function(objectArray,document_passed) {
if(this.totalCount<100) {
for(var i=0;i<objectArray.length;i++) {
var cellLoc = objectArray[i].coordLoc.locY*this.noRows + objectArray[i].coordLoc.locX;
//add link in table
var cellLink = document_passed.createElement('a');
cellLink.innerHTML += objectArray[i].type;
var objectId = '#object'+i;
cellLink.setAttribute('href',objectId);
document_passed.getElementsByClassName('textOutput-cell-content')[cellLoc].appendChild(cellLink);
2016-08-12 04:11:31 +00:00
}
}
},
2016-08-16 00:28:18 +00:00
getObjectArea : function(objectType,arguments){
var objectArea = 0;
if(!objectType.localeCompare('arc')) {
objectArea = 0;
}
else if(!objectType.localeCompare('ellipse')) {
objectArea = 3.14 * arguments[2]*arguments[3]/4;
}
else if(!objectType.localeCompare('line')) {
objectArea = 0;
}
else if(!objectType.localeCompare('point')) {
objectArea = 0;
}
else if(!objectType.localeCompare('quad')) {
//x1y2+x2y3+x3y4+x4y1x2y1x3y2x4y3x1y4
objectArea = (arguments[0]*arguments[1]+arguments[2]*arguments[3]+arguments[4]*arguments[5]+arguments[6]*arguments[7]) - (arguments[2]*arguments[1]+arguments[4]*arguments[3]+arguments[6]*arguments[5]+arguments[0]*arguments[7]);
2016-08-12 04:11:31 +00:00
}
else if(!objectType.localeCompare('rect')) {
objectArea = arguments[2]*arguments[3];
}
else if(!objectType.localeCompare('triangle')) {
objectArea = abs( arguments[0]*(arguments[3] - arguments[5]) + arguments[2]*(arguments[5] - arguments[1]) + arguments[4]*(arguments[1] - arguments[3]));
//A x ( B y C y ) + B x ( C y A y ) + C x ( A y B y )
}
return objectArea;
2016-08-12 04:11:31 +00:00
},
/* helper function to populate object Details */
populateObjectDetails : function(object1, object2, elementSummary, elementDetail) {
2016-08-16 00:28:18 +00:00
this.prevTotalCount = this.totalCount;
this.totalCount = object1.objectCount + object2.objectCount;
elementSummary.innerHTML = '';
elementDetail.innerHTML = '';
elementSummary.innerHTML += this.bgColor + ' canvas is ' + this.canvasDetails.width + ' by ' + this.canvasDetails.height + ' of area ' + this.canvasDetails.width*this.canvasDetails.height;
2016-08-16 00:28:18 +00:00
if(this.totalCount > 1 ) {
elementSummary.innerHTML += ' Contains ' + this.totalCount + ' objects - ';
2016-08-12 04:11:31 +00:00
}
else {
elementSummary.innerHTML += ' Contains ' + this.totalCount + ' object - ';
2016-08-12 04:11:31 +00:00
}
2016-08-12 04:11:31 +00:00
if(object2.objectCount>0 || object1.objectCount>0 ) {
totObjectTypeCount = MergeObjRecursive(object1.objectTypeCount, object2.objectTypeCount);
var keys = Object.keys(totObjectTypeCount);
for(var i=0;i<keys.length;i++) {
elementSummary.innerHTML += totObjectTypeCount[keys[i]] + ' ' + keys[i] + ' ';
2016-08-12 04:11:31 +00:00
}
2016-08-16 00:28:18 +00:00
var objectList = document.createElement('ul');
if(this.totalCount<100){
2016-08-16 00:28:18 +00:00
for(var i=0; i <object1.objectArray.length; i++) {
var objectListItem = document.createElement('li');
objectListItem.id = 'object' + i;
objectList.appendChild(objectListItem);
2016-08-16 00:28:18 +00:00
var objKeys = Object.keys(object1.objectArray[i]);
for(var j=0;j<objKeys.length;j++) {
if(objKeys[j].localeCompare('coordLoc'))
{
if(objKeys[j].localeCompare('type')){
objectListItem.innerHTML += objKeys[j] + ' = ' + object1.objectArray[i][objKeys[j]] + ' ';
}
else {
objectListItem.innerHTML += object1.objectArray[i][objKeys[j]] + ' ';
}
}
}
2016-08-12 04:11:31 +00:00
}
2016-08-16 00:28:18 +00:00
for(var i=0; i <object2.objectArray.length; i++) {
var objectListItem = document.createElement('li');
objectListItem.id = 'object' + (object1.objectArray.length + i);
objectList.appendChild(objectListItem);
2016-08-16 00:28:18 +00:00
var objKeys = Object.keys(object2.objectArray[i]);
for(var j=0;j<objKeys.length;j++) {
if(objKeys[j].localeCompare('coordLoc'))
{
if(objKeys[j].localeCompare('type')){
objectListItem.innerHTML += objKeys[j] + ' = ' + object2.objectArray[i][objKeys[j]] + ' ';
}
else {
objectListItem.innerHTML += object2.objectArray[i][objKeys[j]] + ' ';
}
}
}
2016-08-12 04:11:31 +00:00
}
elementDetail.appendChild(objectList);
2016-08-12 04:11:31 +00:00
}
2016-08-16 00:28:18 +00:00
2016-08-12 04:11:31 +00:00
}
}
};