2019-03-27 02:20:54 +03:00
|
|
|
//init variables
|
|
|
|
var canvasSize,zoom;
|
|
|
|
var dragging = false;
|
|
|
|
var lastPos = [0,0];
|
|
|
|
var currentTool = 'pencil';
|
|
|
|
var currentToolTemp = 'pencil';
|
2020-03-07 18:49:01 +03:00
|
|
|
var pencilSize = 1;
|
2019-03-31 13:17:32 +03:00
|
|
|
var eraserSize = 1;
|
2019-03-27 02:20:54 +03:00
|
|
|
var prevBrushSize = 1;
|
2019-04-02 20:42:28 +03:00
|
|
|
var prevEraserSize = 1;
|
2019-03-27 02:20:54 +03:00
|
|
|
var dialogueOpen = false;
|
|
|
|
var documentCreated = false;
|
2019-03-31 16:55:08 +03:00
|
|
|
|
|
|
|
// Checkerboard management
|
2019-04-01 22:37:53 +03:00
|
|
|
// Checkerboard color 1
|
2019-04-02 23:35:10 +03:00
|
|
|
var firstCheckerBoardColor = 'rgba(179, 173, 182, 1)';
|
2019-04-01 22:37:53 +03:00
|
|
|
// Checkerboard color 2
|
2019-04-02 23:35:10 +03:00
|
|
|
var secondCheckerBoardColor = 'rgba(204, 200, 206, 1)';
|
2019-04-01 22:37:53 +03:00
|
|
|
// Square size for the checkerboard
|
2019-03-31 14:28:46 +03:00
|
|
|
var checkerBoardSquareSize = 16;
|
2019-04-01 22:37:53 +03:00
|
|
|
// Checkerboard canvas
|
2020-04-04 10:41:56 +03:00
|
|
|
var checkerBoardCanvas = document.getElementById('checkerboard');
|
2019-03-27 02:20:54 +03:00
|
|
|
|
|
|
|
//common elements
|
2020-04-04 10:41:56 +03:00
|
|
|
var brushPreview = document.getElementById('brush-preview');
|
|
|
|
var eyedropperPreview = document.getElementById('eyedropper-preview');
|
|
|
|
var canvasView = document.getElementById('canvas-view');
|
|
|
|
var colors = document.getElementsByClassName('color-button');
|
|
|
|
var colorsMenu = document.getElementById('colors-menu');
|
|
|
|
var popUpContainer = document.getElementById('pop-up-container');
|
2019-03-27 02:20:54 +03:00
|
|
|
|
2019-04-01 22:37:53 +03:00
|
|
|
// main canvas
|
2020-04-04 10:41:56 +03:00
|
|
|
var canvas = document.getElementById('pixel-canvas');
|
|
|
|
var context = canvas.getContext('2d');
|
2020-03-07 01:21:42 +03:00
|
|
|
var currentGlobalColor;
|
2019-03-27 02:20:54 +03:00
|
|
|
|
2019-03-31 17:32:49 +03:00
|
|
|
// Layers
|
|
|
|
var layers = [];
|
2019-04-01 22:37:53 +03:00
|
|
|
// Currently selected layer
|
2019-03-31 17:32:49 +03:00
|
|
|
var currentLayer;
|
|
|
|
|
2020-03-04 16:36:40 +03:00
|
|
|
// VFX layer used to draw previews of the selection and things like that
|
|
|
|
var VFXLayer;
|
|
|
|
// VFX canvas
|
2020-04-04 10:41:56 +03:00
|
|
|
var VFXCanvas = document.getElementById('vfx-canvas');
|
2020-03-04 21:46:19 +03:00
|
|
|
|
|
|
|
// TMP layer
|
|
|
|
var TMPLayer;
|
|
|
|
// TMP canvas
|
2020-04-04 10:41:56 +03:00
|
|
|
var TMPCanvas = document.getElementById('tmp-canvas');
|