piskel/js/controller/DrawingController.js

291 lines
9.4 KiB
JavaScript
Raw Normal View History

(function () {
var ns = $.namespace("pskl.controller");
2012-09-16 20:48:32 +04:00
ns.DrawingController = function (framesheet, container) {
/**
* @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
};
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) {
console.log("Tool selected: ", toolBehavior);
this.currentToolBehavior = toolBehavior;
}, this));
/**
* TODO(grosbouddha): Primary/secondary color state are kept in this general controller.
* Find a better place to store that. Perhaps PaletteController?
*/
$.subscribe(Events.PRIMARY_COLOR_SELECTED, $.proxy(function(evt, color) {
console.log("Primary color selected: ", color);
this.primaryColor = color;
$.publish(Events.PRIMARY_COLOR_UPDATED, [color]);
}, this));
$.subscribe(Events.SECONDARY_COLOR_SELECTED, $.proxy(function(evt, color) {
console.log("Secondary color selected: ", color);
this.secondaryColor = color;
$.publish(Events.SECONDARY_COLOR_UPDATED, [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));
2012-09-21 01:57:26 +04:00
$.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.forceRendering_, this));
};
ns.DrawingController.prototype.initMouseBehavior = function() {
var body = $('body');
this.container.mousedown($.proxy(this.onMousedown_, this));
this.container.mousemove($.proxy(this.onMousemove_, this));
body.mouseup($.proxy(this.onMouseup_, this));
// Deactivate right click:
body.contextmenu(this.onCanvasContextMenu_);
};
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);
},
/**
* @private
*/
ns.DrawingController.prototype.onMousedown_ = function (event) {
this.isClicked = true;
if(event.button == 2) { // right click
this.isRightClicked = true;
$.publish(Events.CANVAS_RIGHT_CLICKED);
}
var coords = this.getSpriteCoordinates(event);
this.currentToolBehavior.applyToolAt(
coords.col, coords.row,
this.getCurrentColor_(),
this.framesheet.getCurrentFrame(),
this.overlayFrame,
this.wrapEvtInfo_(event)
);
$.publish(Events.LOCALSTORAGE_REQUEST);
};
/**
* @private
*/
ns.DrawingController.prototype.onMousemove_ = function (event) {
var currentTime = new Date().getTime();
// Throttling of the mousemove event:
if ((currentTime - this.previousMousemoveTime) > 40 ) {
var coords = this.getSpriteCoordinates(event);
if (this.isClicked) {
this.currentToolBehavior.moveToolAt(
coords.col, coords.row,
this.getCurrentColor_(),
this.framesheet.getCurrentFrame(),
this.overlayFrame,
this.wrapEvtInfo_(event)
);
// 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,
this.wrapEvtInfo_(event)
2012-09-14 00:57:32 +04:00
);
}
this.previousMousemoveTime = currentTime;
}
};
/**
2012-09-21 01:57:26 +04:00
* @private
*/
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;
var coords = this.getSpriteCoordinates(event);
//console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
this.currentToolBehavior.releaseToolAt(
coords.col, coords.row,
this.getCurrentColor_(),
this.framesheet.getCurrentFrame(),
this.overlayFrame,
this.wrapEvtInfo_(event)
);
$.publish(Events.TOOL_RELEASED);
}
},
/**
* @private
*/
ns.DrawingController.prototype.wrapEvtInfo_ = function (event) {
var evtInfo = {};
if (event.button == 0) {
evtInfo.button = Constants.LEFT_BUTTON;
} else if (event.button == 2) {
evtInfo.button = Constants.RIGHT_BUTTON;
}
return evtInfo;
},
/**
2012-09-21 01:57:26 +04:00
* @private
*/
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-21 01:57:26 +04:00
* @private
*/
ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
2012-09-09 00:26:27 +04:00
return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
};
/**
2012-09-21 01:57:26 +04:00
* @private
*/
ns.DrawingController.prototype.getCurrentColor_ = function () {
if(this.isRightClicked) {
return this.secondaryColor;
} else {
return this.primaryColor;
}
};
/**
2012-09-21 01:57:26 +04:00
* @private
*/
ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
event.preventDefault();
event.stopPropagation();
event.cancelBubble = true;
return false;
};
ns.DrawingController.prototype.render = function () {
this.renderFrame();
this.renderOverlay();
};
ns.DrawingController.prototype.renderFrame = function () {
var frame = this.framesheet.getCurrentFrame();
var serializedFrame = frame.serialize();
if (this.serializedFrame != serializedFrame) {
2012-09-21 01:57:26 +04:00
if (!frame.isSameSize(this.overlayFrame)) {
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame);
}
this.serializedFrame = serializedFrame;
this.renderer.render(frame);
}
};
ns.DrawingController.prototype.renderOverlay = function () {
var serializedOverlay = this.overlayFrame.serialize();
if (this.serializedOverlay != serializedOverlay) {
this.serializedOverlay = serializedOverlay;
this.overlayRenderer.render(this.overlayFrame);
}
};
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);
2012-09-16 20:48:32 +04:00
}
return dpi;
};
/**
* @private
*/
ns.DrawingController.prototype.updateDPI_ = function() {
var dpi = this.calculateDPI_();
this.renderer.updateDPI(dpi);
this.overlayRenderer.updateDPI(dpi);
this.forceRendering_();
};
})();