2019-03-27 02:20:54 +03:00
|
|
|
//pencil
|
|
|
|
on('click',"pencil-button", function(){
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.pencil.switchTo();
|
2019-03-31 13:17:32 +03:00
|
|
|
}, false);
|
2019-03-27 02:20:54 +03:00
|
|
|
|
|
|
|
//pencil bigger
|
|
|
|
on('click',"pencil-bigger-button", function(){
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.pencil.brushSize++;
|
2019-03-31 13:17:32 +03:00
|
|
|
}, false);
|
2019-03-27 02:20:54 +03:00
|
|
|
|
|
|
|
//pencil smaller
|
2019-03-31 13:17:32 +03:00
|
|
|
on('click',"pencil-smaller-button", function(){
|
2020-04-15 03:01:31 +03:00
|
|
|
if(tool.pencil.brushSize > 1)
|
|
|
|
tool.pencil.brushSize--;
|
2019-03-31 13:17:32 +03:00
|
|
|
}, false);
|
|
|
|
|
|
|
|
//eraser
|
|
|
|
on('click',"eraser-button", function(){
|
2020-07-21 15:42:25 +03:00
|
|
|
console.log("selecting eraser");
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.eraser.switchTo();
|
2019-03-31 13:17:32 +03:00
|
|
|
}, false);
|
|
|
|
|
|
|
|
//eraser bigger
|
|
|
|
on('click',"eraser-bigger-button", function(){
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.eraser.brushSize++;
|
2019-03-31 13:17:32 +03:00
|
|
|
}, false);
|
|
|
|
|
|
|
|
//eraser smaller
|
|
|
|
on('click',"eraser-smaller-button", function(e){
|
2020-04-15 03:01:31 +03:00
|
|
|
if(tool.eraser.brushSize > 1)
|
|
|
|
tool.eraser.brushSize--;
|
2019-03-31 13:17:32 +03:00
|
|
|
}, false);
|
2019-03-27 02:20:54 +03:00
|
|
|
|
2020-03-07 01:21:42 +03:00
|
|
|
// rectangle
|
2020-07-21 15:42:25 +03:00
|
|
|
on('click','rectangle-button', function(e){
|
2020-03-07 01:21:42 +03:00
|
|
|
// If the user clicks twice on the button, they change the draw mode
|
2020-04-15 03:01:31 +03:00
|
|
|
if (currentTool.name == 'rectangle') {
|
2020-03-07 01:21:42 +03:00
|
|
|
if (drawMode == 'empty') {
|
2020-03-08 00:34:12 +03:00
|
|
|
drawMode = 'fill';
|
|
|
|
setRectToolSvg();
|
2020-03-07 01:21:42 +03:00
|
|
|
}
|
|
|
|
else {
|
|
|
|
drawMode = 'empty';
|
2020-03-08 00:34:12 +03:00
|
|
|
setRectToolSvg();
|
2020-03-07 01:21:42 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
else {
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.rectangle.switchTo();
|
2020-03-07 01:21:42 +03:00
|
|
|
}
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
// rectangle bigger
|
|
|
|
on('click',"rectangle-bigger-button", function(){
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.rectangle.brushSize++;
|
2020-03-07 01:21:42 +03:00
|
|
|
}, false);
|
|
|
|
|
|
|
|
// rectangle smaller
|
|
|
|
on('click',"rectangle-smaller-button", function(e){
|
2020-04-15 03:01:31 +03:00
|
|
|
if(tool.rectangle.brushSize > 1)
|
|
|
|
tool.rectangle.brushSize--;
|
2020-03-07 01:21:42 +03:00
|
|
|
}, false);
|
|
|
|
|
2019-03-27 02:20:54 +03:00
|
|
|
//fill
|
|
|
|
on('click',"fill-button", function(){
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.fill.switchTo();
|
|
|
|
}, false);
|
2019-03-27 02:20:54 +03:00
|
|
|
|
|
|
|
//pan
|
|
|
|
on('click',"pan-button", function(){
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.pan.switchTo();
|
|
|
|
}, false);
|
2019-03-27 02:20:54 +03:00
|
|
|
|
|
|
|
//eyedropper
|
|
|
|
on('click',"eyedropper-button", function(){
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.eyedropper.switchTo();
|
|
|
|
}, false);
|
2019-03-27 02:20:54 +03:00
|
|
|
|
|
|
|
//zoom tool button
|
|
|
|
on('click',"zoom-button", function(){
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.zoom.switchTo();
|
2019-03-27 02:20:54 +03:00
|
|
|
}, false);
|
|
|
|
|
|
|
|
//zoom in button
|
2020-04-04 10:41:56 +03:00
|
|
|
on('click','zoom-in-button', function(){
|
|
|
|
//changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]);
|
2020-12-31 15:05:51 +03:00
|
|
|
changeZoom('in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
|
2019-03-31 19:41:08 +03:00
|
|
|
|
|
|
|
for (let i=1; i<layers.length; i++) {
|
|
|
|
layers[i].copyData(layers[0]);
|
2019-03-31 18:15:03 +03:00
|
|
|
}
|
2019-03-27 02:20:54 +03:00
|
|
|
}, false);
|
|
|
|
|
|
|
|
//zoom out button
|
2020-04-04 10:41:56 +03:00
|
|
|
on('click','zoom-out-button', function(){
|
2020-12-31 15:05:51 +03:00
|
|
|
changeZoom('out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
|
2019-03-31 19:41:08 +03:00
|
|
|
|
|
|
|
for (let i=1; i<layers.length; i++) {
|
|
|
|
layers[i].copyData(layers[0]);
|
2019-03-31 18:15:03 +03:00
|
|
|
}
|
2020-03-04 14:42:15 +03:00
|
|
|
}, false);
|
|
|
|
|
|
|
|
//rectangular selection button
|
|
|
|
on('click', "rectselect-button", function(){
|
2020-04-15 03:01:31 +03:00
|
|
|
tool.rectselect.switchTo();
|
|
|
|
}, false);
|
|
|
|
|
2020-04-15 03:10:21 +03:00
|
|
|
/*global on */
|