2012-09-04 16:10:16 +04:00
|
|
|
(function () {
|
2012-09-05 00:40:54 +04:00
|
|
|
var ns = $.namespace("pskl.controller");
|
2012-09-04 16:10:16 +04:00
|
|
|
ns.DrawingController = function (frame, container, dpi) {
|
|
|
|
this.dpi = dpi;
|
|
|
|
|
|
|
|
// Public
|
|
|
|
this.frame = frame;
|
2012-09-05 00:40:54 +04:00
|
|
|
this.overlay = pskl.model.Frame.createEmptyFromFrame(frame);
|
2012-09-04 16:10:16 +04:00
|
|
|
|
|
|
|
// Private
|
|
|
|
this.container = container;
|
|
|
|
this.mainCanvas = this.createMainCanvas();
|
|
|
|
this.overlayCanvas = this.createOverlayCanvas();
|
2012-09-08 14:24:55 +04:00
|
|
|
this.renderer = new pskl.rendering.FrameRenderer(dpi);
|
2012-09-04 16:10:16 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.DrawingController.prototype.renderFrame = function () {
|
2012-09-08 14:24:55 +04:00
|
|
|
this.renderer.render(this.frame, this.mainCanvas);
|
2012-09-04 16:10:16 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.DrawingController.prototype.renderFramePixel = function (col, row) {
|
2012-09-08 14:24:55 +04:00
|
|
|
this.renderer.drawPixel(col, row, this.frame, this.mainCanvas);
|
2012-09-04 16:10:16 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.DrawingController.prototype.renderOverlay = function () {
|
2012-09-08 14:24:55 +04:00
|
|
|
this.renderer.render(this.overlay, this.overlayCanvas);
|
2012-09-04 16:10:16 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.DrawingController.prototype.clearOverlay = function () {
|
2012-09-05 00:40:54 +04:00
|
|
|
this.overlay = pskl.model.Frame.createEmptyFromFrame(this.frame);
|
2012-09-04 16:10:16 +04:00
|
|
|
this.overlayCanvas.getContext("2d").clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.DrawingController.prototype.createMainCanvas = function () {
|
|
|
|
var mainCanvas = this.createCanvas();
|
2012-09-05 02:13:45 +04:00
|
|
|
mainCanvas.className = "drawing-canvas";
|
2012-09-04 16:10:16 +04:00
|
|
|
this.container.appendChild(mainCanvas);
|
|
|
|
return mainCanvas;
|
|
|
|
};
|
|
|
|
|
|
|
|
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
|
|
|
|
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
|
|
|
|
// will help to visualize the tool interaction (without modifying the canvas).
|
|
|
|
ns.DrawingController.prototype.createOverlayCanvas = function () {
|
|
|
|
var overlayCanvas = this.createCanvas();
|
|
|
|
overlayCanvas.className = "canvas-overlay";
|
|
|
|
this.container.appendChild(overlayCanvas);
|
|
|
|
return overlayCanvas;
|
|
|
|
};
|
|
|
|
|
|
|
|
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
|
|
|
|
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
|
|
|
|
// will help to visualize the tool interaction (without modifying the canvas).
|
|
|
|
ns.DrawingController.prototype.createCanvas = function () {
|
|
|
|
var width = this.frame.getWidth(),
|
|
|
|
height = this.frame.getHeight();
|
|
|
|
|
|
|
|
var canvas = document.createElement("canvas");
|
|
|
|
canvas.setAttribute("width", width * this.dpi);
|
|
|
|
canvas.setAttribute("height", height * this.dpi);
|
|
|
|
|
|
|
|
return canvas;
|
|
|
|
};
|
|
|
|
})();
|