wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Moving drawing canvas code from piskel.js to drawingController.js

Browse source
This commit is contained in:
Vince 2012-09-08 18:44:06 +02:00
parent bcd8cf07e6
commit 9dc7afee61
5 changed files with 192 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
js/Events.js
View file

@ -22,6 +22,13 @@ Events = {
*/
REFRESH: "REFRESH",
/**
* Temporary event to bind the redraw of right preview film to the canvas.
* This redraw should be driven by model updates.
* TODO(vincz): Remove.
*/
REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
/**
* The framesheet was reseted and is now probably drastically different.
* Number of frames, content of frames, color used for the palette may have changed.

167
js/controller/DrawingController.js
View file

@ -19,8 +19,175 @@
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 {
"col" : (coords.x - coords.x % this.dpi) / this.dpi,
"row" : (coords.y - coords.y % this.dpi) / this.dpi
}
};
/**
* @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);

13
js/controller/PreviewFilmController.js
View file

@ -5,6 +5,10 @@
this.dpi = dpi;
this.framesheet = framesheet;
this.container = container;
$.subscribe(Events.REDRAW_PREVIEWFILM, $.proxy(function(evt) {
this.createPreviews()
}, this));
};
ns.PreviewFilmController.prototype.init = function() {
@ -28,7 +32,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,7 +146,7 @@
* @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;
@ -183,7 +187,8 @@
canvasPreviewDuplicateAction.innerHTML = "dup"
canvasPreviewDuplicateAction.addEventListener('click', function(evt) {
piskel.duplicateFrame(tileNumber);
framesheet.duplicateFrameByIndex(tileNumber);
$.publish('SET_ACTIVE_FRAME', [tileNumber + 1]);
});
//this.renderer.render(this.framesheet.getFrameByIndex(tileNumber), canvasPreview);
@ -191,7 +196,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);

168
js/piskel.js
View file

@ -24,23 +24,8 @@ $.namespace("pskl");
// Animated canvas preview:
previewAnimationCanvasDpi = 8,
// DOM references:
drawingAreaContainer,
drawingAreaCanvas,
previewCanvas,
// States:
isClicked = false,
isRightClicked = false,
activeFrameIndex = -1,
animIndex = 0,
primaryColor = Constants.DEFAULT_PEN_COLOR,
secondaryColor = Constants.TRANSPARENT_COLOR,
activeFrameIndex = -1,
currentFrame = null;
currentToolBehavior = null,
previousMousemoveTime = 0;
/**
* Main application controller
@ -56,7 +41,7 @@ $.namespace("pskl");
this.drawingController = new pskl.controller.DrawingController(
frameSheet.getFrameByIndex(0),
$('#drawing-canvas-container')[0],
$('#drawing-canvas-container'),
drawingCanvasDpi
);
@ -64,7 +49,7 @@ $.namespace("pskl");
this.animationController = new pskl.controller.AnimatedPreviewController(
frameSheet,
$('#preview-canvas-container')[0],
$('#preview-canvas-container'),
previewAnimationCanvasDpi
);
@ -91,6 +76,10 @@ $.namespace("pskl");
this.finishInit();
pskl.LocalStorageService.displayRestoreNotification();
}
$.subscribe('SET_ACTIVE_FRAME', function(evt, frameId) {
piskel.setActiveFrameAndRedraw(frameId);
});
},
/**
@ -118,27 +107,12 @@ $.namespace("pskl");
finishInit : function () {
$.subscribe(Events.TOOL_SELECTED, function(evt, toolBehavior) {
console.log("Tool selected: ", toolBehavior);
currentToolBehavior = toolBehavior;
});
$.subscribe(Events.COLOR_SELECTED, function(evt, color, isPrimary) {
console.log("Color selected: ", color);
if (isPrimary) {
primaryColor = color;
} else {
secondaryColor = color;
}
});
$.subscribe(Events.REFRESH, function() {
piskel.setActiveFrameAndRedraw(0);
});
// TODO: Move this into their service or behavior files:
this.initDrawingArea();
pskl.ToolSelector.init();
pskl.Palette.init(frameSheet);
},
@ -202,132 +176,6 @@ $.namespace("pskl");
return frameSheet.getFrameByIndex(activeFrameIndex);
},
initDrawingArea : function() {
drawingAreaContainer = $('#drawing-canvas-container')[0];
document.body.addEventListener('mouseup', this.onMouseup.bind(this));
drawingAreaContainer.addEventListener('mousedown', this.onMousedown.bind(this));
drawingAreaContainer.addEventListener('mousemove', this.onMousemove.bind(this));
document.body.addEventListener('contextmenu', this.onCanvasContextMenu);
},
removeFrame: function(frameIndex) {
frameSheet.removeFrameByIndex(frameIndex);
var activeFrameIndex = frameIndex ? frameIndex - 1 : 0;
this.setActiveFrameAndRedraw(activeFrameIndex);
},
duplicateFrame: function(frameIndex) {
frameSheet.duplicateFrameByIndex(frameIndex);
this.setActiveFrameAndRedraw(frameIndex + 1);
},
getCurrentColor : function () {
if(isRightClicked) {
return secondaryColor;
} else {
return primaryColor;
}
},
onMousedown : function (event) {
isClicked = true;
if(event.button == 2) { // right click
isRightClicked = true;
$.publish(Events.CANVAS_RIGHT_CLICKED);
}
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.applyToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
this.getCurrentColor(),
this.drawingController
);
$.publish(Events.LOCALSTORAGE_REQUEST);
},
onMousemove : function (event) {
var currentTime = new Date().getTime();
// Throttling of the mousemove event:
if ((currentTime - previousMousemoveTime) > 40 ) {
var spriteCoordinate = this.getSpriteCoordinate(event);
if (isClicked) {
currentToolBehavior.moveToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
this.getCurrentColor(),
this.drawingController
);
// 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.drawingController.clearOverlay();
// this.drawingController.overlay.setPixel( spriteCoordinate.col,spriteCoordinate.row, "#ff0000");
// this.drawingController.renderOverlay();
}
previousMousemoveTime = currentTime;
}
},
onMouseup : function (event) {
if(isClicked || 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(isRightClicked) {
$.publish(Events.CANVAS_RIGHT_CLICK_RELEASED);
}
isClicked = false;
isRightClicked = false;
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.releaseToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
this.getCurrentColor(),
this.drawingController
);
$.publish(Events.TOOL_RELEASED);
// TODO: Remove that when we have the centralized redraw loop
this.previewsController.createPreviews();
}
},
onCanvasContextMenu : function (event) {
event.preventDefault();
event.stopPropagation();
event.cancelBubble = true;
return false;
},
getRelativeCoordinates : function (x, y) {
var canvasRect = $(".drawing-canvas")[0].getBoundingClientRect();
return {
x : x - canvasRect.left,
y : y - canvasRect.top
}
},
getSpriteCoordinate : function(event) {
var coord = this.getRelativeCoordinates(event.x, event.y);
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
return {
"col" : (coords.x - coords.x%drawingCanvasDpi) / drawingCanvasDpi,
"row" : (coords.y - coords.y%drawingCanvasDpi) / drawingCanvasDpi
}
},
// TODO(julz): Create package ?
storeSheet : function (event) {
// TODO Refactor using jquery ?

2
js/rendering/FrameRenderer.js
View file

@ -80,7 +80,7 @@
canvas.setAttribute("class", canvasClassname);
this.canvas = canvas;
this.container.appendChild(this.canvas);
this.container.append(this.canvas);
this.canvasConfigDirty = false;
}