62 lines
2.4 KiB
JavaScript
62 lines
2.4 KiB
JavaScript
/** TODO LIST FOR LAYERS
|
|
- move the tmp layer so that it's always right below the active layer
|
|
- when the move tool is selected (to move a selection), the tmp layer must be put right above the
|
|
active layer to show a preview
|
|
- mouse events will always have at least a canvas target, so evey time there's an event, we'll have to check
|
|
the actual element type instead of the current layer and then apply the tool on the currentLayer, not on
|
|
the first one in order of z-index
|
|
*/
|
|
|
|
|
|
/** Handler class for a single canvas (a single layer)
|
|
*
|
|
* @param width Canvas width
|
|
* @param height Canvas height
|
|
* @param canvas HTML canvas element
|
|
*/
|
|
function Layer(width, height, canvas) {
|
|
this.canvasSize = [width, height];
|
|
this.canvas = canvas;
|
|
this.context = this.canvas.getContext('2d');
|
|
// Initializes the canvas
|
|
this.initialize = function() {
|
|
var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
|
|
var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);
|
|
|
|
zoom = Math.min(maxHorizontalZoom,maxVerticalZoom);
|
|
if (zoom < 1) zoom = 1;
|
|
|
|
//resize canvas
|
|
this.canvas.width = this.canvasSize[0];
|
|
this.canvas.height = this.canvasSize[1];
|
|
this.canvas.style.width = (this.canvas.width*zoom)+'px';
|
|
this.canvas.style.height = (this.canvas.height*zoom)+'px';
|
|
|
|
//unhide canvas
|
|
this.canvas.style.display = 'block';
|
|
|
|
//center canvas in window
|
|
this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px';
|
|
this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
|
|
|
|
this.context.imageSmoothingEnabled = false;
|
|
this.context.mozImageSmoothingEnabled = false;
|
|
};
|
|
// Resizes canvas
|
|
this.resize = function() {
|
|
let newWidth = (this.canvas.width * zoom) + 'px';
|
|
let newHeight = (this.canvas.height *zoom)+ 'px';
|
|
|
|
this.canvas.style.width = newWidth;
|
|
this.canvas.style.height = newHeight;
|
|
};
|
|
// Copies the otherCanvas' position and size
|
|
this.copyData = function(otherCanvas) {
|
|
this.canvas.style.width = otherCanvas.canvas.style.width;
|
|
this.canvas.style.height = otherCanvas.canvas.style.height;
|
|
|
|
this.canvas.style.left = otherCanvas.canvas.style.left;
|
|
this.canvas.style.top = otherCanvas.canvas.style.top;
|
|
};
|
|
}
|