I am writting a online diagram editing tool and i created a function to set up the event listener which i call in my init function. I try to add many breakpoint to see where the problem comes from and it seems like the addactionlistener function call the function which is in parameter without the action event happened.
init(){
console.log("Website started");
myObj = new Draw();
setUpEventListener();
}
gates = {
or_gate: '#or_gate',
and_gate: '#and_gate',
not_gate: '#not_gate'
}
shapes = {
or_gate: '#or_gate_shape',
and_gate: '#and_gate_shape',
not_gate: '#not_gate_shape'
}
setUpEventListener(){
document.querySelector('#OrCloneBtn').addEventListener('click', this.ctrlGateSVG(this.gates.or_gate, this.shapes.or_gate));
document.querySelector('#AndCloneBtn').addEventListener('click', this.ctrlGateSVG(this.gates.and_gate, this.shapes.and_gate));
document.querySelector('#NotCloneBtn').addEventListener('click', console.log("mathieu"));
}
basicAttr = {
"fill" : "#FFF",
"stroke" : "black",
"strokeWidth" : 1
}
ctrlGateSVG(gate, shape){
var to = Snap('#gates');
var from = Snap(gate);
var shape = from.select(shape);
var clone = shape.clone();
clone.attr(this.basicAttr);
to.append(clone);
console.log("clicked")
}
drawCanvas() {
var lines = Snap("#lineBackground");
var height = document.querySelector('.drawPart').clientHeight;
var width = document.querySelector('.drawPart').clientWidth;
for(var i=0; i < height; i = i+2){
lines.line(i, 0, i, height).attr({
stroke:'black',
strokeWidth:.2,
});
}
for(i=0; i<width; i=i+2){
lines.line(0, i, width, i).attr({
stroke:'black',
strokeWidth:.2
});
}
}
init(){
console.log("Website started");
var myObj = new Draw();
this.drawCanvas();
this.setUpEventListener();
}
}
myApp = new DrawingCanvas();
myApp.init();
please can you explain me what is the problem here because i am really confused.