Skip to content

Commit

Permalink
scoping issue when renaming el
Browse files Browse the repository at this point in the history
  • Loading branch information
@ldeeZ
ldeeZ committed Aug 28, 2019
1 parent 856f6d6 commit 7d79d87
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 109 deletions.
8 changes: 4 additions & 4 deletions _examples/0_setup/setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ function setup(){
//declare where the canvas goes
var canvas_container = document.getElementById('elCanvas');
// create an instance
this.el = new elCanvas(canvas_container,{AlignToCenter:true});
my_el = new elCanvas(canvas_container,{AlignToCenter:true});

console.log(this.el);
console.log(my_el);
// create an object
var myCoolRectangle = el.rect()
var myCoolRectangle = my_el.rect()
// create a timeline, have the canvas update on update
el.update()
my_el.update()
// var tl = new TimelineMax({onUpdate: el.update})

// link for interactive animation
Expand Down
2 changes: 1 addition & 1 deletion _tests/SoloBot_intro/js/el_animation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ function el_animation(el, params){
.to(bodyNull,1.8,{rotation:0,ease:Expo.easeInOut},'headnod_right')
.to(arm_upper_l,1,{rotation:0,ease:Expo.easeInOut},'headnod_right')
.to(arm_lower_l,1.4,{rotation:0,ease:Expo.easeInOut},'headnod_right+=0.3')

var bot_message_tl= new TimelineMax({onUpdate:el.update,paused:true})

.add(bot_message_enter,0.1)
Expand Down
209 changes: 105 additions & 104 deletions lib/elCanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,16 +234,16 @@ elCanvas = (function () {
roundRect: function(el, x, y, w, h, r) {
var cr= typeof r == 'object' ? r : { tl: r, tr: r, bl: r, br: r }; //Corner Radius
return el.ctx.beginPath()
.moveTo(x + cr.tl, y)
.lineTo(x + w - cr.tr, y)
.quadraticCurveTo(x + w, y, x + w, y + cr.tr)
.lineTo(x + w, y + h - cr.br)
.quadraticCurveTo(x + w, y + h, x + w - cr.br, y + h)
.lineTo(x + cr.bl, y + h)
.quadraticCurveTo(x, y + h, x, y + h - cr.bl)
.lineTo(x, y + cr.tl)
.quadraticCurveTo(x, y, x + cr.tl, y)
.closePath();
.moveTo(x + cr.tl, y)
.lineTo(x + w - cr.tr, y)
.quadraticCurveTo(x + w, y, x + w, y + cr.tr)
.lineTo(x + w, y + h - cr.br)
.quadraticCurveTo(x + w, y + h, x + w - cr.br, y + h)
.lineTo(x + cr.bl, y + h)
.quadraticCurveTo(x, y + h, x, y + h - cr.bl)
.lineTo(x, y + cr.tl)
.quadraticCurveTo(x, y, x + cr.tl, y)
.closePath();
}
},
missingLetterProps: function (map) {
Expand Down Expand Up @@ -298,10 +298,7 @@ elCanvas = (function () {
_util.setIfUndefined(props, defaultProps.fallback);
_util.setIfUndefined(props.style, defaultStyles[type] || defaultStyles.fallback);

if(props.interactable || props.debug){
el.interactableObjects.push(props)
}
el.objectsCount = el.objects.length;

return props;
},
setIfUndefined: function (providedObject, newObject) {
Expand All @@ -314,7 +311,7 @@ elCanvas = (function () {
props.scaleY = props.scale;
}
},
//generic shuffle function
//generic shuffle function
shuffleArray: function (array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
Expand All @@ -323,6 +320,8 @@ elCanvas = (function () {
array[j] = temp;
}
},
objectsCount:0,
objects:0,
// go through every object searching for objects that have parents
addParents: function (objects) {
objects.forEach(function (object) {
Expand Down Expand Up @@ -359,7 +358,7 @@ elCanvas = (function () {
width = size << 1;
buffer.width = buffer.height = width;
var ctx = buffer.getContext('2d'),
radgrad = ctx.createRadialGradient(size, size, size >> 1, size, size, size);
radgrad = ctx.createRadialGradient(size, size, size >> 1, size, size, size);
radgrad.addColorStop(0, innerColour);
radgrad.addColorStop(1, outerColour);
ctx.fillStyle = radgrad;
Expand All @@ -373,9 +372,9 @@ elCanvas = (function () {
*/
fullyInside: function(innerRect, outerRect) {
return innerRect.x < outerRect.x + outerRect.width &&
innerRect.x + innerRect.width > outerRect.x &&
innerRect.y < outerRect.y + outerRect.height &&
innerRect.y + innerRect.height > outerRect.y;
innerRect.x + innerRect.width > outerRect.x &&
innerRect.y < outerRect.y + outerRect.height &&
innerRect.y + innerRect.height > outerRect.y;
},
// Debounce function for resizing
debounce:function (fn) {
Expand Down Expand Up @@ -409,28 +408,28 @@ elCanvas = (function () {
calls.push([ctx.beginPath, []]);
},
A : function(rx, ry, rot, fA, fS, x, y) {
var x12 = x - this.x, y12 = y - this.y,
phi = rot / 180 * Math.PI,
cp = phi ? Math.cos(phi) : 1, sp = phi ? Math.sin(phi) : 0,
k = ry / rx,
dth_sgn = fS ? 1 : -1,
Nx = dth_sgn * (-x12 * cp - y12 * sp), Ny = dth_sgn * (-x12 * sp + y12 * cp),
NN = Math.hypot(Nx, Ny / k),
R = 2 * rx > NN ? rx : NN / 2, // scale R to a valid value...
dth = 2 * dth_sgn * Math.asin(NN / 2 / R),
th1, ct, st;

if (fA) {
dth = dth > 0 ? 2 * Math.PI - dth : -2 * Math.PI - dth;
}
th1 = Math.atan2(k * Nx, Ny) - dth / 2;
ct = Math.cos(th1); st = Math.sin(th1);
calls.push([ctx.ellipse, [this.x - R * (cp * ct - sp * k * st),
this.y - R * (sp * ct + cp * k * st),
R, R*k, phi, th1, th1 + dth, dth_sgn === -1]]);
this.x = x; this.y = y;
positions.x.push(x);
positions.y.push(y);
var x12 = x - this.x, y12 = y - this.y,
phi = rot / 180 * Math.PI,
cp = phi ? Math.cos(phi) : 1, sp = phi ? Math.sin(phi) : 0,
k = ry / rx,
dth_sgn = fS ? 1 : -1,
Nx = dth_sgn * (-x12 * cp - y12 * sp), Ny = dth_sgn * (-x12 * sp + y12 * cp),
NN = Math.hypot(Nx, Ny / k),
R = 2 * rx > NN ? rx : NN / 2, // scale R to a valid value...
dth = 2 * dth_sgn * Math.asin(NN / 2 / R),
th1, ct, st;

if (fA) {
dth = dth > 0 ? 2 * Math.PI - dth : -2 * Math.PI - dth;
}
th1 = Math.atan2(k * Nx, Ny) - dth / 2;
ct = Math.cos(th1); st = Math.sin(th1);
calls.push([ctx.ellipse, [this.x - R * (cp * ct - sp * k * st),
this.y - R * (sp * ct + cp * k * st),
R, R*k, phi, th1, th1 + dth, dth_sgn === -1]]);
this.x = x; this.y = y;
positions.x.push(x);
positions.y.push(y);
},
M : function(x,y) {
positions.x.push(x);
Expand Down Expand Up @@ -459,7 +458,7 @@ elCanvas = (function () {
positions.x.push(x);
positions.y.push(y);
calls.push([ctx.bezierCurveTo, [this.x1=2*this.x-this.x2,this.y1=2*this.y-this.y2,
this.x2=x2,this.y2=y2,this.x=x,this.y=y]]);
this.x2=x2,this.y2=y2,this.x=x,this.y=y]]);
},
Q : function(x1,y1,x,y) {
positions.x.push(x);
Expand All @@ -469,11 +468,11 @@ elCanvas = (function () {
T : function(x,y) {
positions.x.push(x);
positions.y.push(y);
calls.quadraticCurveTo([ctx.quadraticCurveTo, [this.x1+=2*(this.x-this.x1),this.y1+=2*(this.y-this.y1),
this.x=x,this.y=y]]);
calls.quadraticCurveTo([ctx.quadraticCurveTo, [this.x1+=2*(this.x-this.x1),this.y1+=2*(this.y-this.y1),
this.x=x,this.y=y]]);
},
Z : function() {
calls.push([ctx.closePath, []])
calls.push([ctx.closePath, []])
},
a : function(rx,ry,rot,fA,fS,x,y) { this.A(rx,ry,rot,fA,fS,this.x+x,this.y+y) },
m : function(x,y) { this.M(this.x+x,this.y+y) },
Expand All @@ -498,13 +497,13 @@ elCanvas = (function () {

var rex = /([achlmqstvz])([^achlmqstvz]*)/ig;
var seg = { A:{n:7,f:'A'}, C:{n:6,f:'C'}, H:{n:1,f:'H'},
L:{n:2,f:'L'}, M:{n:2,f:'L'}, Q:{n:4,f:'Q'},
S:{n:4,f:'S'}, T:{n:2,f:'T'}, V:{n:1,f:'V'},
Z:{n:0},
a:{n:7,f:'a'}, c:{n:6,f:'c'}, h:{n:1,f:'h'},
l:{n:2,f:'l'}, m:{n:2,f:'l'}, q:{n:4,f:'q'},
s:{n:4,f:'s'}, t:{n:2,f:'t'}, v:{n:1,f:'v'},
z:{n:0} };
L:{n:2,f:'L'}, M:{n:2,f:'L'}, Q:{n:4,f:'Q'},
S:{n:4,f:'S'}, T:{n:2,f:'T'}, V:{n:1,f:'V'},
Z:{n:0},
a:{n:7,f:'a'}, c:{n:6,f:'c'}, h:{n:1,f:'h'},
l:{n:2,f:'l'}, m:{n:2,f:'l'}, q:{n:4,f:'q'},
s:{n:4,f:'s'}, t:{n:2,f:'t'}, v:{n:1,f:'v'},
z:{n:0} };
var segment = function (ifc, type, args) {
if (type in seg) {
if (args.length === seg[type].n) {
Expand All @@ -524,39 +523,39 @@ elCanvas = (function () {
// for each explicit named segment ...
while (match = rex.exec(data)) {
segment(ifc, match[1], match[2].replace(/^\s+|\s+$/g,'') // trim whitespace at both ends (str.trim .. !)
.replace(/(\d)\-/g,'$1 -') // insert blank between digit and '-'
.split(/[, \t\n\r]+/g) // as array
.map(Number));
.replace(/(\d)\-/g,'$1 -') // insert blank between digit and '-'
.split(/[, \t\n\r]+/g) // as array
.map(Number));
}
var minX = Math.min.apply(null, positions.x),
maxX = Math.max.apply(null, positions.x),
minY = Math.min.apply(null, positions.y),
maxY = Math.max.apply(null, positions.y);
maxX = Math.max.apply(null, positions.x),
minY = Math.min.apply(null, positions.y),
maxY = Math.max.apply(null, positions.y);
object.width = (minX + (maxX - minX) / 2) * 2;
object.height = (minY + (maxY - minY) / 2) * 2;
var drawSVGShape = function() {
calls.forEach(function (a) { a[0].apply(ctx, a[1]); });
};
return drawSVGShape;
},
// },
hitTest: function (el,mousePosition, callback) {
for(var i=0;i<el.interactableObjects.length;i++){
var hit = el._util.fullyInside(mousePosition,el.interactableObjects[i])
if(hit){
callback(el.interactableObjects[i]);
break;
}
}
},
/**
// },
hitTest: function (el,mousePosition, callback) {
for(var i=0;i<el.interactableObjects.length;i++){
var hit = el._util.fullyInside(mousePosition,el.interactableObjects[i])
if(hit){
callback(el.interactableObjects[i]);
break;
}
}
},
/**
* return true if the innerRect lives fully inside the outerRect
*/
fullyInside: function(innerRect, outerRect) {
return innerRect.x < outerRect.x + outerRect.width &&
innerRect.x + innerRect.width > outerRect.x &&
innerRect.y < outerRect.y + outerRect.height &&
innerRect.y + innerRect.height > outerRect.y;
innerRect.x + innerRect.width > outerRect.x &&
innerRect.y < outerRect.y + outerRect.height &&
innerRect.y + innerRect.height > outerRect.y;
}
};

Expand Down Expand Up @@ -598,7 +597,6 @@ elCanvas = (function () {

// container for keeping objects which will loop
this.objects = [];
this.objectsCount = 0;
this.interactableObjects = [];
this.firstFrame = true;

Expand Down Expand Up @@ -655,9 +653,9 @@ elCanvas = (function () {
// this.ctx.setTransform(matrix.data[0], matrix.data[1], matrix.data[2], matrix.data[3], matrix.data[4], matrix.data[5]);
},
importImages: function (props) {
for(k in props){
_util.loadImageFromUrl(this.images, k, props[k]);
}
for(k in props){
_util.loadImageFromUrl(this.images, k, props[k]);
}
},
prepareShape: function (props) {
_util.setObjectScale(props);
Expand Down Expand Up @@ -685,9 +683,9 @@ elCanvas = (function () {
},
debugObject: function (props) {
if (props.debug) {
// console.log(this.ctx);
// console.log(this.ctx);
_util.shapes.circle(this, props.centerX, props.centerY, 10);
el.ctx.set("globalCompositeOperation", 'difference');
el.ctx.set("globalCompositeOperation", 'difference');
this.ctx.fill();
}
},
Expand Down Expand Up @@ -898,7 +896,10 @@ elCanvas = (function () {
props = _util.mergeDefaultProperties(props, objectType);
this.initFuncs[props.type] && this.initFuncs[props.type].bind(this)(props);
this.objects.push(props);
this.objectsCount = this.objects.length;
this.objectsCount = this.objects.length;
if(props.interactable || props.debug){
this.interactableObjects.push(props)
}
return props;
},
/**
Expand All @@ -911,16 +912,16 @@ elCanvas = (function () {
this.sortByZIndex();

}
this.ctx.clearRect(0, 0, 9999, 9999);
/**
* For loops with a fixed limit is the fastest method for looping
* based off all research I've found and for the amount of data to go trough
* this should be the most optimal way
*/
for (var i = 0; i < this.objectsCount; i++) {
this.draw(this.objects[i])
}
this.firstFrame = false;
this.ctx.clearRect(0, 0, 9999, 9999);
/**
* For loops with a fixed limit is the fastest method for looping
* based off all research I've found and for the amount of data to go trough
* this should be the most optimal way
*/
for (var i = 0; i < this.objectsCount; i++) {
this.draw(this.objects[i])
}
this.firstFrame = false;

},
/**
Expand All @@ -941,33 +942,33 @@ elCanvas = (function () {
return;
}
var obj = objOrArray;
// remove children
// remove children
if (obj.childNodes) {
this.remove(obj.childNodes);
obj.childNodes = null;
this.objectsCount--;
this.objectsCount--;
}
var idx = this.objects.indexOf(obj);
if (idx > -1) {
// then parent
// then parent
this.objects.splice(idx, 1);
this.objectsCount--;
this.objectsCount--;
}
},
addEventListener: function (event, callback) {
var target = this.container;
var el = this;
target.addEventListener(event, function (e) {
var style = target.currentStyle || window.getComputedStyle(target, null),
borderLeftWidth = parseInt(style['borderLeftWidth'], 10),
borderTopWidth = parseInt(style['borderTopWidth'], 10),
rect = target.getBoundingClientRect(),
scaleX = rect.width / el.width, scaleY = rect.height / el.height,
offsetX = (e.clientX - borderLeftWidth - rect.left) / scaleX,
offsetY = (e.clientY - borderTopWidth - rect.top) / scaleY;
e.canvasX = offsetX, e.canvasY = offsetY;
// the benefit of canvasX, canvasY is they're accurate to position with taking account canvas scaling
callback(e);
var style = target.currentStyle || window.getComputedStyle(target, null),
borderLeftWidth = parseInt(style['borderLeftWidth'], 10),
borderTopWidth = parseInt(style['borderTopWidth'], 10),
rect = target.getBoundingClientRect(),
scaleX = rect.width / el.width, scaleY = rect.height / el.height,
offsetX = (e.clientX - borderLeftWidth - rect.left) / scaleX,
offsetY = (e.clientY - borderTopWidth - rect.top) / scaleY;
e.canvasX = offsetX, e.canvasY = offsetY;
// the benefit of canvasX, canvasY is they're accurate to position with taking account canvas scaling
callback(e);
});
},
addResizeListener: function (callback) {
Expand All @@ -976,7 +977,7 @@ elCanvas = (function () {
window.addEventListener('resize', function () {
// update canvas sizing
el.container.width = el.container.parentNode.offsetWidth;
el.container.height = el.container.parentNode.offsetHeight
el.container.height = el.container.parentNode.offsetHeight;
el.width = el.container.width
el.height = el.container.height
resizeListen('debounced');
Expand Down

0 comments on commit 7d79d87

Please sign in to comment.