mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Added DrawingLoop.js and plugged basic rendering on each controller

Browse Source
This commit is contained in:
juliandescottes
2012-09-09 00:40:05 +02:00
parent 6e7545a1d2 d799221c24
commit 2fa95fa1bc
12 changed files with 449 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
js/controller/AnimatedPreviewController.js
View File

@ -16,10 +16,7 @@
ns.AnimatedPreviewController.prototype.init = function () {
this.initDom();
this.renderer.init(this.framesheet.getFrameByIndex(this.animIndex));
this.startAnimationTimer();
};
ns.AnimatedPreviewController.prototype.initDom = function () {

204
js/controller/DrawingController.js
View File

@ -3,24 +3,205 @@
ns.DrawingController = function (frame, container, dpi) {
this.dpi = dpi;
// TODO(vincz): Store user prefs in a localstorage string ?
var renderingOptions = {
"dpi": dpi,
"displayGrid": true // Retrieve from localsotrage config
}
"hasGrid" : true
};
// Public
/**
* @public
*/
this.frame = frame;
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame); // Type is frame
/**
* @public
*/
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame);
// Private
/**
* @private
*/
this.container = container;
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
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(this.frame);
this.overlayRenderer.init(this.frame);
// 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));
$.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color, isPrimary) {
console.log("Color selected: ", color);
if (isPrimary) {
this.primaryColor = color;
} else {
this.secondaryColor = color;
}
}, 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:
this.container.contextmenu(this.onCanvasContextMenu_);
};
/**
* @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 spriteCoordinate = this.getSpriteCoordinate(event);
//console.log("mousedown: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
this.currentToolBehavior.applyToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
this.getCurrentColor_(),
this
);
$.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 spriteCoordinate = this.getSpriteCoordinate(event);
if (this.isClicked) {
this.currentToolBehavior.moveToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
this.getCurrentColor_(),
this
);
//console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
// 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 {
// debug mode to see the selected pixel
// this.clearOverlay();
// this.overlayFrame.setPixel( spriteCoordinate.col,spriteCoordinate.row, "#ff0000");
// this.renderOverlay();
}
this.previousMousemoveTime = currentTime;
}
};
/**
* @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.
if(this.isRightClicked) {
$.publish(Events.CANVAS_RIGHT_CLICK_RELEASED);
}
this.isClicked = false;
this.isRightClicked = false;
var spriteCoordinate = this.getSpriteCoordinate(event);
//console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
this.currentToolBehavior.releaseToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
this.getCurrentColor_(),
this
);
$.publish(Events.TOOL_RELEASED);
// TODO: Remove that when we have the centralized redraw loop
$.publish(Events.REDRAW_PREVIEWFILM);
}
},
/**
* @private
*/
ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
var canvasPageOffset = this.container.offset();
return {
x : clientX - canvasPageOffset.left,
y : clientY - canvasPageOffset.top
};
};
/**
* @private
*/
ns.DrawingController.prototype.getSpriteCoordinate = function(event) {
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
};
/**
* @private
*/
ns.DrawingController.prototype.getCurrentColor_ = function () {
if(this.isRightClicked) {
return this.secondaryColor;
} else {
return this.primaryColor;
}
};
/**
* @private
*/
ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
event.preventDefault();
event.stopPropagation();
event.cancelBubble = true;
return false;
};
ns.DrawingController.prototype.updateDPI = function (newDPI) {
this.renderer.updateDPI(newDPI);
this.overlayRenderer.updateDPI(newDPI);
@ -29,6 +210,15 @@
this.overlayRenderer.render(this.overlayFrame);
};
ns.DrawingController.prototype.render = function () {
try {
this.renderFrame();
this.renderOverlay();
} catch (e) {
// TODO : temporary t/c for integration
}
};
ns.DrawingController.prototype.renderFrame = function () {
this.renderer.render(this.frame);
};

37
js/controller/PreviewFilmController.js
View File

@ -5,14 +5,15 @@
this.dpi = dpi;
this.framesheet = framesheet;
this.container = container;
$.subscribe(Events.REDRAW_PREVIEWFILM, $.proxy(function(evt) {
// this.render();
}, this));
};
ns.PreviewFilmController.prototype.init = function() {
var addFrameButton = $('#add-frame-button')[0];
addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
this.createPreviews();
};
ns.PreviewFilmController.prototype.addFrame = function () {
@ -20,7 +21,7 @@
piskel.setActiveFrameAndRedraw(this.framesheet.getFrameCount() - 1);
};
ns.PreviewFilmController.prototype.createPreviews = function () {
ns.PreviewFilmController.prototype.render = function () {
// TODO(vincz): Full redraw on any drawing modification, optimize.
this.container.html("");
@ -28,7 +29,7 @@
for (var i = 0, l = frameCount; i < l ; i++) {
this.container.append(this.createInterstitialTile_(i));
this.container.append(this.createPreviewTile_(i));
this.container.append(this.createPreviewTile_(i, this.framesheet));
}
this.container.append(this.createInterstitialTile_(frameCount));
@ -142,11 +143,9 @@
* @private
* TODO(vincz): clean this giant rendering function & remove listeners.
*/
ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber, framesheet) {
var currentFrame = this.framesheet.getFrameByIndex(tileNumber);
//var width = frame.getWidth() * this.dpi,
// height = frame.getHeight() * this.dpi;
var previewTileRoot = document.createElement("li");
var classname = "preview-tile";
previewTileRoot.setAttribute("data-tile-number", tileNumber);
@ -158,18 +157,10 @@
var canvasContainer = document.createElement("div");
canvasContainer.className = "canvas-container";
//canvasContainer.setAttribute('style', 'width:' + width + 'px; height:' + height + 'px;');
var canvasBackground = document.createElement("div");
canvasBackground.className = "canvas-background";
canvasContainer.appendChild(canvasBackground);
/*
var canvasPreview = document.createElement("canvas");
canvasPreview.className = "canvas tile-view"
canvasPreview.setAttribute('width', width);
canvasPreview.setAttribute('height', height);
*/
previewTileRoot.addEventListener('click', function(evt) {
// has not class tile-action:
@ -183,7 +174,9 @@
canvasPreviewDuplicateAction.innerHTML = "dup"
canvasPreviewDuplicateAction.addEventListener('click', function(evt) {
piskel.duplicateFrame(tileNumber);
framesheet.duplicateFrameByIndex(tileNumber);
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
$.publish('SET_ACTIVE_FRAME', [tileNumber + 1]);
});
//this.renderer.render(this.framesheet.getFrameByIndex(tileNumber), canvasPreview);
@ -191,7 +184,7 @@
// TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
// is to make this update function (#createPreviewTile) less aggressive.
var renderingOptions = {"dpi": this.dpi };
var currentFrameRenderer = new pskl.rendering.FrameRenderer(canvasContainer, renderingOptions, "tile-view");
var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, "tile-view");
currentFrameRenderer.init(currentFrame);
previewTileRoot.appendChild(canvasContainer);
@ -202,7 +195,9 @@
canvasPreviewDeleteAction.className = "tile-action"
canvasPreviewDeleteAction.innerHTML = "del"
canvasPreviewDeleteAction.addEventListener('click', function(evt) {
piskel.removeFrame(tileNumber);
framesheet.removeFrameByIndex(tileNumber);
$.publish(Events.FRAMESHEET_RESET);
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
});
previewTileRoot.appendChild(canvasPreviewDeleteAction);
}