mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
313 lines
9.7 KiB
JavaScript
313 lines
9.7 KiB
JavaScript
(function () {
|
|
var ns = $.namespace("pskl.controller");
|
|
ns.DrawingController = function (piskelController, paletteController,container) {
|
|
/**
|
|
* @public
|
|
*/
|
|
this.piskelController = piskelController;
|
|
|
|
this.paletteController = paletteController;
|
|
|
|
/**
|
|
* @public
|
|
*/
|
|
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(piskelController.getCurrentFrame());
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
this.container = container;
|
|
|
|
// TODO(vincz): Store user prefs in a localstorage string ?
|
|
var renderingOptions = {
|
|
"zoom": this.calculateZoom_(),
|
|
"supportGridRendering" : true,
|
|
"height" : this.getContainerHeight_(),
|
|
"width" : this.getContainerWidth_(),
|
|
"xOffset" : 0,
|
|
"yOffset" : 0
|
|
};
|
|
|
|
this.overlayRenderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, renderingOptions, ["canvas-overlay"]);
|
|
this.renderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, renderingOptions, ["drawing-canvas"]);
|
|
this.layersRenderer = new pskl.rendering.layer.LayersRenderer(this.container, renderingOptions, piskelController);
|
|
|
|
this.compositeRenderer = new pskl.rendering.CompositeRenderer();
|
|
this.compositeRenderer
|
|
.add(this.overlayRenderer)
|
|
.add(this.renderer)
|
|
.add(this.layersRenderer);
|
|
|
|
// State of drawing controller:
|
|
this.isClicked = false;
|
|
this.isRightClicked = false;
|
|
this.previousMousemoveTime = 0;
|
|
this.currentToolBehavior = null;
|
|
};
|
|
|
|
ns.DrawingController.prototype.init = function () {
|
|
this.initMouseBehavior();
|
|
|
|
$.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
|
|
this.currentToolBehavior = toolBehavior;
|
|
this.overlayFrame.clear();
|
|
}, this));
|
|
|
|
$(window).resize($.proxy(this.startResizeTimer_, this));
|
|
|
|
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
|
|
$.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.onFrameSizeChanged_, this));
|
|
|
|
this.centerColumnWrapperHorizontally_();
|
|
};
|
|
|
|
ns.DrawingController.prototype.initMouseBehavior = function() {
|
|
var body = $('body');
|
|
this.container.mousedown($.proxy(this.onMousedown_, this));
|
|
this.container.mousemove($.proxy(this.onMousemove_, this));
|
|
|
|
if (pskl.utils.UserAgent.isChrome) {
|
|
this.container.on('mousewheel', $.proxy(this.onMousewheel_, this));
|
|
} else {
|
|
this.container.on('wheel', $.proxy(this.onMousewheel_, this));
|
|
}
|
|
|
|
body.mouseup($.proxy(this.onMouseup_, this));
|
|
|
|
// Deactivate right click:
|
|
body.contextmenu(this.onCanvasContextMenu_);
|
|
};
|
|
|
|
ns.DrawingController.prototype.startResizeTimer_ = function () {
|
|
if (this.resizeTimer) {
|
|
window.clearInterval(this.resizeTimer);
|
|
}
|
|
this.resizeTimer = window.setTimeout($.proxy(this.afterWindowResize_, this), 200);
|
|
},
|
|
|
|
ns.DrawingController.prototype.afterWindowResize_ = function () {
|
|
this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
|
|
if(settingsName == pskl.UserSettings.SHOW_GRID) {
|
|
console.warn('DrawingController:onUserSettingsChange_ not implemented !');
|
|
}
|
|
},
|
|
|
|
ns.DrawingController.prototype.onFrameSizeChanged_ = function () {
|
|
this.compositeRenderer.setZoom(this.calculateZoom_());
|
|
this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.DrawingController.prototype.onMousedown_ = function (event) {
|
|
this.isClicked = true;
|
|
|
|
if(event.button == 2) { // right click
|
|
this.isRightClicked = true;
|
|
}
|
|
|
|
var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
|
|
|
|
this.currentToolBehavior.applyToolAt(
|
|
coords.x,
|
|
coords.y,
|
|
this.getCurrentColor_(),
|
|
this.piskelController.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) > Constants.MOUSEMOVE_THROTTLING ) {
|
|
var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
|
|
|
|
if (this.isClicked) {
|
|
|
|
this.currentToolBehavior.moveToolAt(
|
|
coords.x,
|
|
coords.y,
|
|
this.getCurrentColor_(),
|
|
this.piskelController.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);
|
|
} else {
|
|
|
|
this.currentToolBehavior.moveUnactiveToolAt(
|
|
coords.x,
|
|
coords.y,
|
|
this.getCurrentColor_(),
|
|
this.piskelController.getCurrentFrame(),
|
|
this.overlayFrame,
|
|
this.wrapEvtInfo_(event)
|
|
);
|
|
}
|
|
this.previousMousemoveTime = currentTime;
|
|
}
|
|
};
|
|
|
|
ns.DrawingController.prototype.onMousewheel_ = function (jQueryEvent) {
|
|
var event = jQueryEvent.originalEvent;
|
|
var delta = event.wheelDeltaY || (-2 * event.deltaY);
|
|
var currentZoom = this.renderer.getZoom();
|
|
if (delta > 0) {
|
|
this.compositeRenderer.setZoom(currentZoom + 1);
|
|
} else if (delta < 0) {
|
|
this.compositeRenderer.setZoom(currentZoom - 1);
|
|
}
|
|
pskl.app.minimapController.onDrawingControllerMove_();
|
|
};
|
|
|
|
/**
|
|
* @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.renderer.getCoordinates(event.clientX, event.clientY);
|
|
//console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
|
|
this.currentToolBehavior.releaseToolAt(
|
|
coords.x,
|
|
coords.y,
|
|
this.getCurrentColor_(),
|
|
this.piskelController.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;
|
|
};
|
|
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
|
|
return this.renderer.getCoordinates(event.clientX, event.clientY);
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.DrawingController.prototype.getCurrentColor_ = function () {
|
|
if(this.isRightClicked) {
|
|
return this.paletteController.getSecondaryColor();
|
|
} else {
|
|
return this.paletteController.getPrimaryColor();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
|
|
if ($(event.target).closest('#drawing-canvas-container').length) {
|
|
// Deactivate right click on drawing canvas only.
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
event.cancelBubble = true;
|
|
return false;
|
|
}
|
|
};
|
|
|
|
ns.DrawingController.prototype.render = function () {
|
|
var currentFrame = this.piskelController.getCurrentFrame();
|
|
if (!currentFrame.isSameSize(this.overlayFrame)) {
|
|
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(currentFrame);
|
|
}
|
|
|
|
this.layersRenderer.render();
|
|
this.renderer.render(currentFrame);
|
|
this.overlayRenderer.render(this.overlayFrame);
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.DrawingController.prototype.calculateZoom_ = function() {
|
|
var frameHeight = this.piskelController.getCurrentFrame().getHeight(),
|
|
frameWidth = this.piskelController.getCurrentFrame().getWidth();
|
|
|
|
return Math.min(this.getAvailableWidth_()/frameWidth, this.getAvailableHeight_()/frameHeight);
|
|
};
|
|
|
|
ns.DrawingController.prototype.getAvailableHeight_ = function () {
|
|
return $('#main-wrapper').height();
|
|
};
|
|
|
|
ns.DrawingController.prototype.getAvailableWidth_ = function () {
|
|
var leftSectionWidth = $('.left-column').outerWidth(true),
|
|
rightSectionWidth = $('.right-column').outerWidth(true),
|
|
availableWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth;
|
|
return availableWidth;
|
|
};
|
|
|
|
ns.DrawingController.prototype.getContainerHeight_ = function () {
|
|
return this.calculateZoom_() * this.piskelController.getCurrentFrame().getHeight();
|
|
};
|
|
|
|
ns.DrawingController.prototype.getContainerWidth_ = function () {
|
|
return this.calculateZoom_() * this.piskelController.getCurrentFrame().getWidth();
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.DrawingController.prototype.centerColumnWrapperHorizontally_ = function() {
|
|
var containerHeight = this.getContainerHeight_();
|
|
var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - containerHeight) / 2);
|
|
$('#column-wrapper').css({
|
|
'top': verticalGapInPixel + 'px'
|
|
});
|
|
};
|
|
|
|
ns.DrawingController.prototype.getRenderer = function () {
|
|
return this.compositeRenderer;
|
|
};
|
|
|
|
ns.DrawingController.prototype.setOffset = function (x, y) {
|
|
this.compositeRenderer.setOffset(x, y);
|
|
pskl.app.minimapController.onDrawingControllerMove_();
|
|
};
|
|
})(); |