2012-09-04 16:10:16 +04:00
|
|
|
(function () {
|
2012-09-14 02:33:46 +04:00
|
|
|
var ns = $.namespace("pskl.controller");
|
2012-09-16 20:48:32 +04:00
|
|
|
ns.DrawingController = function (framesheet, container) {
|
2012-09-14 02:33:46 +04:00
|
|
|
/**
|
|
|
|
* @public
|
|
|
|
*/
|
|
|
|
this.framesheet = framesheet;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @public
|
|
|
|
*/
|
|
|
|
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
this.container = container;
|
2012-09-16 20:48:32 +04:00
|
|
|
|
|
|
|
// TODO(vincz): Store user prefs in a localstorage string ?
|
|
|
|
var renderingOptions = {
|
|
|
|
"dpi": this.calculateDPI_(),
|
|
|
|
"hasGrid" : true
|
|
|
|
};
|
2012-09-14 02:33:46 +04:00
|
|
|
|
|
|
|
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
|
|
|
|
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
|
|
|
|
|
|
|
|
this.renderer.init(framesheet.getCurrentFrame());
|
|
|
|
this.overlayRenderer.init(this.overlayFrame);
|
|
|
|
|
|
|
|
// State of drawing controller:
|
|
|
|
this.isClicked = false;
|
|
|
|
this.isRightClicked = false;
|
|
|
|
this.previousMousemoveTime = 0;
|
|
|
|
this.currentToolBehavior = null;
|
|
|
|
this.primaryColor = Constants.DEFAULT_PEN_COLOR;
|
|
|
|
this.secondaryColor = Constants.TRANSPARENT_COLOR;
|
|
|
|
|
|
|
|
this.initMouseBehavior();
|
|
|
|
|
|
|
|
$.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
|
2012-09-11 01:26:12 +04:00
|
|
|
console.log("Tool selected: ", toolBehavior);
|
|
|
|
this.currentToolBehavior = toolBehavior;
|
|
|
|
}, this));
|
|
|
|
|
|
|
|
$.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color, isPrimary) {
|
|
|
|
console.log("Color selected: ", color);
|
|
|
|
if (isPrimary) {
|
|
|
|
this.primaryColor = color;
|
|
|
|
} else {
|
|
|
|
this.secondaryColor = color;
|
|
|
|
}
|
|
|
|
}, this));
|
2012-09-16 20:48:32 +04:00
|
|
|
|
|
|
|
$(window).resize($.proxy(this.startDPIUpdateTimer_, this));
|
|
|
|
|
|
|
|
$.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateDPI_, this));
|
|
|
|
$.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.forceRendering_, this));
|
2012-09-14 02:33:46 +04:00
|
|
|
};
|
2012-09-08 17:08:00 +04:00
|
|
|
|
2012-09-14 02:33:46 +04:00
|
|
|
ns.DrawingController.prototype.initMouseBehavior = function() {
|
|
|
|
var body = $('body');
|
2012-09-08 20:44:06 +04:00
|
|
|
this.container.mousedown($.proxy(this.onMousedown_, this));
|
|
|
|
this.container.mousemove($.proxy(this.onMousemove_, this));
|
|
|
|
body.mouseup($.proxy(this.onMouseup_, this));
|
|
|
|
|
|
|
|
// Deactivate right click:
|
2012-09-16 01:44:28 +04:00
|
|
|
body.contextmenu(this.onCanvasContextMenu_);
|
2012-09-14 02:33:46 +04:00
|
|
|
};
|
2012-09-08 20:44:06 +04:00
|
|
|
|
2012-09-16 20:48:32 +04:00
|
|
|
|
|
|
|
|
|
|
|
ns.DrawingController.prototype.startDPIUpdateTimer_ = function () {
|
|
|
|
if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
|
|
|
|
this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
|
|
|
|
},
|
|
|
|
|
2012-09-14 02:33:46 +04:00
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
ns.DrawingController.prototype.onMousedown_ = function (event) {
|
2012-09-08 20:44:06 +04:00
|
|
|
this.isClicked = true;
|
|
|
|
|
|
|
|
if(event.button == 2) { // right click
|
|
|
|
this.isRightClicked = true;
|
|
|
|
$.publish(Events.CANVAS_RIGHT_CLICKED);
|
|
|
|
}
|
|
|
|
|
2012-09-11 01:26:12 +04:00
|
|
|
var coords = this.getSpriteCoordinates(event);
|
2012-09-08 20:44:06 +04:00
|
|
|
|
|
|
|
this.currentToolBehavior.applyToolAt(
|
2012-09-11 01:26:12 +04:00
|
|
|
coords.col, coords.row,
|
2012-09-08 20:44:06 +04:00
|
|
|
this.getCurrentColor_(),
|
2012-09-11 01:26:12 +04:00
|
|
|
this.framesheet.getCurrentFrame(),
|
|
|
|
this.overlayFrame
|
2012-09-08 20:44:06 +04:00
|
|
|
);
|
|
|
|
|
|
|
|
$.publish(Events.LOCALSTORAGE_REQUEST);
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2012-09-14 02:33:46 +04:00
|
|
|
* @private
|
|
|
|
*/
|
2012-09-08 20:44:06 +04:00
|
|
|
ns.DrawingController.prototype.onMousemove_ = function (event) {
|
|
|
|
var currentTime = new Date().getTime();
|
|
|
|
// Throttling of the mousemove event:
|
|
|
|
if ((currentTime - this.previousMousemoveTime) > 40 ) {
|
2012-09-11 01:26:12 +04:00
|
|
|
var coords = this.getSpriteCoordinates(event);
|
2012-09-08 20:44:06 +04:00
|
|
|
if (this.isClicked) {
|
|
|
|
|
|
|
|
this.currentToolBehavior.moveToolAt(
|
2012-09-11 01:26:12 +04:00
|
|
|
coords.col, coords.row,
|
2012-09-08 20:44:06 +04:00
|
|
|
this.getCurrentColor_(),
|
2012-09-11 01:26:12 +04:00
|
|
|
this.framesheet.getCurrentFrame(),
|
|
|
|
this.overlayFrame
|
2012-09-08 20:44:06 +04:00
|
|
|
);
|
2012-09-14 02:33:46 +04:00
|
|
|
|
2012-09-08 20:44:06 +04:00
|
|
|
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
|
|
|
|
// Eg when drawing, it may make sense to have it here. However for a non drawing tool,
|
|
|
|
// you don't need to draw anything when mousemoving and you request useless localStorage.
|
|
|
|
$.publish(Events.LOCALSTORAGE_REQUEST);
|
2012-09-14 00:57:32 +04:00
|
|
|
} else {
|
|
|
|
|
|
|
|
this.currentToolBehavior.moveUnactiveToolAt(
|
|
|
|
coords.col, coords.row,
|
|
|
|
this.getCurrentColor_(),
|
|
|
|
this.framesheet.getCurrentFrame(),
|
|
|
|
this.overlayFrame
|
|
|
|
);
|
2012-09-08 20:44:06 +04:00
|
|
|
}
|
|
|
|
this.previousMousemoveTime = currentTime;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2012-09-14 02:33:46 +04:00
|
|
|
* @private
|
|
|
|
*/
|
2012-09-08 20:44:06 +04:00
|
|
|
ns.DrawingController.prototype.onMouseup_ = function (event) {
|
|
|
|
if(this.isClicked || this.isRightClicked) {
|
|
|
|
// A mouse button was clicked on the drawing canvas before this mouseup event,
|
|
|
|
// the user was probably drawing on the canvas.
|
|
|
|
// Note: The mousemove movement (and the mouseup) may end up outside
|
|
|
|
// of the drawing canvas.
|
|
|
|
|
|
|
|
this.isClicked = false;
|
|
|
|
this.isRightClicked = false;
|
2012-09-11 01:26:12 +04:00
|
|
|
|
|
|
|
var coords = this.getSpriteCoordinates(event);
|
2012-09-09 01:53:59 +04:00
|
|
|
//console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
|
2012-09-08 20:44:06 +04:00
|
|
|
this.currentToolBehavior.releaseToolAt(
|
2012-09-11 01:26:12 +04:00
|
|
|
coords.col, coords.row,
|
2012-09-08 20:44:06 +04:00
|
|
|
this.getCurrentColor_(),
|
2012-09-11 01:26:12 +04:00
|
|
|
this.framesheet.getCurrentFrame(),
|
|
|
|
this.overlayFrame
|
2012-09-08 20:44:06 +04:00
|
|
|
);
|
|
|
|
|
|
|
|
$.publish(Events.TOOL_RELEASED);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2012-09-14 02:33:46 +04:00
|
|
|
* @private
|
|
|
|
*/
|
2012-09-08 20:44:06 +04:00
|
|
|
ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
|
|
|
|
var canvasPageOffset = this.container.offset();
|
|
|
|
return {
|
|
|
|
x : clientX - canvasPageOffset.left,
|
|
|
|
y : clientY - canvasPageOffset.top
|
2012-09-09 00:26:27 +04:00
|
|
|
};
|
2012-09-08 20:44:06 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2012-09-14 02:33:46 +04:00
|
|
|
* @private
|
|
|
|
*/
|
2012-09-11 01:26:12 +04:00
|
|
|
ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
|
2012-09-08 20:44:06 +04:00
|
|
|
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
|
2012-09-09 00:26:27 +04:00
|
|
|
return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
|
2012-09-08 20:44:06 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2012-09-14 02:33:46 +04:00
|
|
|
* @private
|
|
|
|
*/
|
2012-09-08 20:44:06 +04:00
|
|
|
ns.DrawingController.prototype.getCurrentColor_ = function () {
|
|
|
|
if(this.isRightClicked) {
|
|
|
|
return this.secondaryColor;
|
|
|
|
} else {
|
|
|
|
return this.primaryColor;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2012-09-14 02:33:46 +04:00
|
|
|
* @private
|
|
|
|
*/
|
2012-09-08 20:44:06 +04:00
|
|
|
ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
event.cancelBubble = true;
|
|
|
|
return false;
|
|
|
|
};
|
2012-09-04 16:10:16 +04:00
|
|
|
|
2012-09-09 02:40:05 +04:00
|
|
|
ns.DrawingController.prototype.render = function () {
|
2012-09-14 02:33:46 +04:00
|
|
|
this.renderFrame();
|
|
|
|
this.renderOverlay();
|
2012-09-09 02:40:05 +04:00
|
|
|
};
|
|
|
|
|
2012-09-14 02:33:46 +04:00
|
|
|
ns.DrawingController.prototype.renderFrame = function () {
|
2012-09-11 01:26:12 +04:00
|
|
|
var frame = this.framesheet.getCurrentFrame();
|
2012-09-16 20:48:32 +04:00
|
|
|
console.log("render", frame.getHeight());
|
|
|
|
if (frame.getHeight() == 32) debugger;
|
2012-09-11 01:26:12 +04:00
|
|
|
var serializedFrame = frame.serialize();
|
2012-09-09 03:12:54 +04:00
|
|
|
if (this.serializedFrame != serializedFrame) {
|
2012-09-14 02:33:46 +04:00
|
|
|
this.serializedFrame = serializedFrame;
|
|
|
|
this.renderer.render(frame);
|
2012-09-09 03:12:54 +04:00
|
|
|
}
|
2012-09-14 02:33:46 +04:00
|
|
|
};
|
2012-09-04 16:10:16 +04:00
|
|
|
|
2012-09-14 02:33:46 +04:00
|
|
|
ns.DrawingController.prototype.renderOverlay = function () {
|
2012-09-09 03:12:54 +04:00
|
|
|
var serializedOverlay = this.overlayFrame.serialize();
|
|
|
|
if (this.serializedOverlay != serializedOverlay) {
|
2012-09-14 02:33:46 +04:00
|
|
|
this.serializedOverlay = serializedOverlay;
|
2012-09-09 04:34:54 +04:00
|
|
|
this.overlayRenderer.render(this.overlayFrame);
|
2012-09-09 03:12:54 +04:00
|
|
|
}
|
2012-09-14 02:33:46 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.DrawingController.prototype.forceRendering_ = function () {
|
|
|
|
this.serializedFrame = this.serializedOverlay = null;
|
2012-09-16 20:48:32 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
ns.DrawingController.prototype.calculateDPI_ = function() {
|
|
|
|
var userMessageGap = 80; // Reserve some height to show the user message at the bottom
|
|
|
|
|
|
|
|
var availableViewportHeight = $('.main-panel').height() - userMessageGap,
|
|
|
|
availableViewportWidth = $('.main-panel').width(),
|
|
|
|
previewHeight = $(".preview-container").height(),
|
|
|
|
previewWidth = $(".preview-container").width(),
|
|
|
|
framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
|
|
|
|
framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
|
|
|
|
var dpi = pskl.PixelUtils.calculateDPI(availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth);
|
|
|
|
|
|
|
|
var drawingCanvasHeight = dpi * framePixelHeight;
|
|
|
|
var drawingCanvasWidth = dpi * framePixelWidth;
|
|
|
|
|
|
|
|
// Check if preview and drawing canvas overlap
|
|
|
|
var heightGap = drawingCanvasHeight + previewHeight - availableViewportHeight,
|
|
|
|
widthGap = drawingCanvasWidth + previewWidth - availableViewportWidth;
|
|
|
|
if (heightGap > 0 && widthGap > 0) {
|
|
|
|
// Calculate the DPI change needed to bridge height and width gap
|
|
|
|
var gapDPI = pskl.PixelUtils.calculateDPI(heightGap, widthGap, framePixelHeight, framePixelWidth);
|
|
|
|
// substract gap dpi to initial dpi
|
|
|
|
dpi -= (gapDPI - 1);
|
|
|
|
}
|
|
|
|
return dpi;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
ns.DrawingController.prototype.updateDPI_ = function() {
|
|
|
|
var dpi = this.calculateDPI_();
|
|
|
|
console.log("dpi", dpi);
|
|
|
|
this.renderer.updateDPI(dpi);
|
|
|
|
this.overlayRenderer.updateDPI(dpi);
|
|
|
|
this.forceRendering_();
|
|
|
|
};
|
2012-09-04 16:10:16 +04:00
|
|
|
})();
|