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

master conflict merge

Browse source
This commit is contained in:
Vince 2012-09-15 02:24:06 +02:00
commit 277fd979e9
14 changed files with 239 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
css/tools.css
View file

@ -45,6 +45,10 @@
background-image: url(../img/tools/icons/rectangle.png);
}
.tool-icon.tool-circle {
background-image: url(../img/tools/cursors/circle.png);
}
.tool-icon.tool-move {
background-image: url(../img/tools/icons/hand.png);
}
@ -81,6 +85,10 @@
cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
}
.tool-circle .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/circle.png) 4 21, pointer;
}
.tool-move .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/hand.png) 14 12, pointer;
}

BIN
img/tools/cursors/circle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 761 B

BIN
img/transparent_background.png Normal file → Executable file
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 223 B

5
index.html
View file

@ -31,6 +31,7 @@
<li class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></li>
<li class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></li>
<li class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></li>
<li class="tool-icon tool-circle" data-tool-id="tool-circle" title="Circle tool"></li>
<li class="tool-icon tool-move" data-tool-id="tool-move" title="Move tool"></li>
<li class="tool-icon tool-rectangle-select" data-tool-id="tool-rectangle-select" title="Rectangle selection tool"></li>
<li class="tool-icon tool-shape-select" data-tool-id="tool-shape-select" title="Shape selection tool"></li>
@ -115,12 +116,16 @@
<script src="js/selection/ShapeSelection.js"></script>
<script src="js/Palette.js"></script>
<script src="js/Notification.js"></script>
<!-- Tools-->
<script src="js/drawingtools/BaseTool.js"></script>
<script src="js/drawingtools/SimplePen.js"></script>
<script src="js/drawingtools/Eraser.js"></script>
<script src="js/drawingtools/Stroke.js"></script>
<script src="js/drawingtools/PaintBucket.js"></script>
<script src="js/drawingtools/Rectangle.js"></script>
<script src="js/drawingtools/Circle.js"></script>
<script src="js/drawingtools/Move.js"></script>
<script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
<script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>

8
js/HistoryManager.js
View file

@ -17,16 +17,12 @@
ns.HistoryManager.prototype.undo = function () {
this.framesheet.getCurrentFrame().loadPreviousState();
this.redraw();
$.publish(Events.FRAMESHEET_RESET);
};
ns.HistoryManager.prototype.redo = function () {
this.framesheet.getCurrentFrame().loadNextState();
this.redraw();
$.publish(Events.FRAMESHEET_RESET);
};
ns.HistoryManager.prototype.redraw = function () {
this.framesheet.drawingController.renderFrame();
this.framesheet.previewsController.createPreviews();
};
})();

2
js/KeyManager.js
View file

@ -46,5 +46,5 @@
}
}
};
})();

1
js/ToolSelector.js
View file

@ -15,6 +15,7 @@ pskl.ToolSelector = (function() {
"paintBucket" : new pskl.drawingtools.PaintBucket(),
"stroke" : new pskl.drawingtools.Stroke(),
"rectangle" : new pskl.drawingtools.Rectangle(),
"circle" : new pskl.drawingtools.Circle(),
"move" : new pskl.drawingtools.Move(),
"rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
"shapeSelect" : new pskl.drawingtools.ShapeSelect()

155
js/controller/DrawingController.js
View file

@ -1,44 +1,44 @@
(function () {
var ns = $.namespace("pskl.controller");
ns.DrawingController = function (framesheet, container, dpi) {
// TODO(vincz): Store user prefs in a localstorage string ?
var renderingOptions = {
"dpi": dpi,
"hasGrid" : true
};
var ns = $.namespace("pskl.controller");
ns.DrawingController = function (framesheet, container, dpi) {
// TODO(vincz): Store user prefs in a localstorage string ?
var renderingOptions = {
"dpi": dpi,
"hasGrid" : true
};
/**
* @public
*/
this.framesheet = framesheet;
/**
* @public
*/
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
/**
* @public
*/
this.framesheet = framesheet;
/**
* @public
*/
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
/**
* @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.init(framesheet.getCurrentFrame());
this.overlayRenderer.init(this.overlayFrame);
/**
* @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.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;
// 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();
this.initMouseBehavior();
$.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
$.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
console.log("Tool selected: ", toolBehavior);
this.currentToolBehavior = toolBehavior;
}, this));
@ -51,22 +51,22 @@
this.secondaryColor = color;
}
}, this));
};
};
ns.DrawingController.prototype.initMouseBehavior = function() {
var body = $('body');
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) {
/**
* @private
*/
ns.DrawingController.prototype.onMousedown_ = function (event) {
this.isClicked = true;
if(event.button == 2) { // right click
@ -87,8 +87,8 @@
};
/**
* @private
*/
* @private
*/
ns.DrawingController.prototype.onMousemove_ = function (event) {
var currentTime = new Date().getTime();
// Throttling of the mousemove event:
@ -102,7 +102,7 @@
this.framesheet.getCurrentFrame(),
this.overlayFrame
);
// 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.
@ -121,8 +121,8 @@
};
/**
* @private
*/
* @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,
@ -147,8 +147,8 @@
},
/**
* @private
*/
* @private
*/
ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
var canvasPageOffset = this.container.offset();
return {
@ -158,16 +158,16 @@
};
/**
* @private
*/
* @private
*/
ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
};
/**
* @private
*/
* @private
*/
ns.DrawingController.prototype.getCurrentColor_ = function () {
if(this.isRightClicked) {
return this.secondaryColor;
@ -177,45 +177,44 @@
};
/**
* @private
*/
* @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);
this.render();
};
ns.DrawingController.prototype.render = function () {
try {
this.renderFrame();
this.renderOverlay();
} catch (e) {
// TODO : temporary t/c for integration
}
ns.DrawingController.prototype.updateDPI = function (newDPI) {
this.renderer.updateDPI(newDPI);
this.overlayRenderer.updateDPI(newDPI);
this.forceRendering_();
};
ns.DrawingController.prototype.renderFrame = function () {
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) {
this.serializedFrame = serializedFrame
this.renderer.render(frame);
this.serializedFrame = serializedFrame;
this.renderer.render(frame);
}
};
};
ns.DrawingController.prototype.renderOverlay = function () {
ns.DrawingController.prototype.renderOverlay = function () {
var serializedOverlay = this.overlayFrame.serialize();
if (this.serializedOverlay != serializedOverlay) {
this.serializedOverlay = serializedOverlay
this.serializedOverlay = serializedOverlay;
this.overlayRenderer.render(this.overlayFrame);
}
};
};
ns.DrawingController.prototype.forceRendering_ = function () {
this.serializedFrame = this.serializedOverlay = null;
}
})();

1
js/controller/PreviewFilmController.js
View file

@ -208,7 +208,6 @@
ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
this.framesheet.removeFrameByIndex(index);
$.publish(Events.FRAMESHEET_RESET);
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
};

84
js/drawingtools/Circle.js Normal file
View file

@ -0,0 +1,84 @@
/*
* @provide pskl.drawingtools.Circle
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.Circle = function() {
this.toolId = "tool-circle"
// Circle's first point coordinates (set in applyToolAt)
this.startCol = null;
this.startRow = null;
};
pskl.utils.inherit(ns.Circle, ns.BaseTool);
/**
* @override
*/
ns.Circle.prototype.applyToolAt = function(col, row, color, frame, overlay) {
this.startCol = col;
this.startRow = row;
// Drawing the first point of the rectangle in the fake overlay canvas:
overlay.setPixel(col, row, color);
};
ns.Circle.prototype.moveToolAt = function(col, row, color, frame, overlay) {
overlay.clear();
if(color == Constants.TRANSPARENT_COLOR) {
color = Constants.SELECTION_TRANSPARENT_COLOR;
}
// draw in overlay
this.drawCircle_(col, row, color, overlay);
};
/**
* @override
*/
ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
overlay.clear();
if(frame.containsPixel(col, row)) { // cancel if outside of canvas
// draw in frame to finalize
this.drawCircle_(col, row, color, frame);
}
};
ns.Circle.prototype.drawCircle_ = function (col, row, color, targetFrame) {
var circlePoints = this.getCirclePixels_(this.startCol, this.startRow, col, row);
for(var i = 0; i< circlePoints.length; i++) {
// Change model:
targetFrame.setPixel(circlePoints[i].col, circlePoints[i].row, color);
}
};
ns.Circle.prototype.getCirclePixels_ = function (x0, y0, x1, y1) {
var coords = pskl.PixelUtils.getOrderedRectangleCoordinates(x0, y0, x1, y1);
var xC = (coords.x0 + coords.x1)/2;
var yC = (coords.y0 + coords.y1)/2;
var rX = coords.x1 - xC;
var rY = coords.y1 - yC;
var pixels = [];
var x, y, angle;
for (x = coords.x0 ; x < coords.x1 ; x++) {
angle = Math.acos((x - xC)/rX);
y = Math.round(rY * Math.sin(angle) + yC);
pixels.push({"col": x, "row": y});
pixels.push({"col": 2*xC - x, "row": 2*yC - y});
}
for (y = coords.y0 ; y < coords.y1 ; y++) {
angle = Math.asin((y - yC)/rY);
x = Math.round(rX * Math.cos(angle) + xC);
pixels.push({"col": x, "row": y});
pixels.push({"col": 2*xC - x, "row": 2*yC - y});
}
return pixels;
};
})();

65
js/drawingtools/Rectangle.js
View file

@ -29,20 +29,12 @@
ns.Rectangle.prototype.moveToolAt = function(col, row, color, frame, overlay) {
overlay.clear();
// When the user moussemove (before releasing), we dynamically compute the
// pixel to draw the line and draw this line in the overlay :
var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
if(color == Constants.TRANSPARENT_COLOR) {
color = Constants.SELECTION_TRANSPARENT_COLOR;
}
// Drawing current stroke:
for(var i = 0; i< strokePoints.length; i++) {
overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
}
// draw in overlay
this.drawRectangle_(col, row, color, overlay);
};
/**
@ -50,52 +42,17 @@
*/
ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
overlay.clear();
// If the stroke tool is released outside of the canvas, we cancel the stroke:
if(frame.containsPixel(col, row)) {
var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
for(var i = 0; i< strokePoints.length; i++) {
// Change model:
frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
}
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
// the model and draw them in the drawing canvas (not the fake overlay anymore)
if(frame.containsPixel(col, row)) { // cancel if outside of canvas
// draw in frame to finalize
this.drawRectangle_(col, row, color, frame);
}
};
/**
* Get an array of pixels representing the rectangle.
*
* @private
*/
ns.Rectangle.prototype.getRectanglePixels_ = function(x0, x1, y0, y1) {
var pixels = [];
var swap;
if(x0 > x1) {
swap = x0;
x0 = x1;
x1 = swap;
ns.Rectangle.prototype.drawRectangle_ = function (col, row, color, targetFrame) {
var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
for(var i = 0; i< strokePoints.length; i++) {
// Change model:
targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
}
if(y0 > y1) {
swap = y0;
y0 = y1;
y1 = swap;
}
// Creating horizontal sides of the rectangle:
for(var x = x0; x <= x1; x++) {
pixels.push({"col": x, "row": y0});
pixels.push({"col": x, "row": y1});
}
// Creating vertical sides of the rectangle:
for(var y = y0; y <= y1; y++) {
pixels.push({"col": x0, "row": y});
pixels.push({"col": x1, "row": y});
}
return pixels;
};
};
})();

8
js/model/FrameSheet.js
View file

@ -96,6 +96,14 @@
throw "Out of bound index for frameSheet object.";
}
this.frames.splice(index, 1);
// Current frame index might not be valid anymore
if (!this.hasFrameAtIndex(this.currentFrameIndex)) {
// if not select last frame available
this.setCurrentFrameIndex(this.getFrameCount() - 1);
}
$.publish(Events.FRAMESHEET_RESET);
};
ns.FrameSheet.prototype.duplicateFrameByIndex = function(index) {

43
js/piskel.js
View file

@ -17,8 +17,7 @@ $.namespace("pskl");
framePixelHeight = 32,
// Scaling factors for a given frameSheet rendering:
// Main drawing area:
drawingCanvasDpi = 20,
// Main drawing area dpi is calculated dynamically
// Canvas preview film canvases:
previewTileCanvasDpi = 4,
// Animated canvas preview:
@ -30,15 +29,13 @@ $.namespace("pskl");
var piskel = {
init : function () {
piskel.initDPIs_();
frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
frameSheet.addEmptyFrame();
this.drawingController = new pskl.controller.DrawingController(
frameSheet,
$('#drawing-canvas-container'),
drawingCanvasDpi
this.calculateDPIsForDrawingCanvas_()
);
this.animationController = new pskl.controller.AnimatedPreviewController(
@ -47,7 +44,6 @@ $.namespace("pskl");
previewAnimationCanvasDpi
);
this.previewsController = new pskl.controller.PreviewFilmController(
frameSheet,
$('#preview-list'),
@ -55,18 +51,17 @@ $.namespace("pskl");
);
// To catch the current active frame, the selection manager have to be initialized before
// the 'frameSheet.setCurrentFrameIndex(0);'
// the 'frameSheet.setCurrentFrameIndex(0);' line below.
// TODO(vincz): Slice each constructor to have:
// - an event(s) listening init
// - an event(s) triggering init
// All listerners will be hook in a first step, then all event triggering inits will be called
// All listeners will be hook in a first step, then all event triggering inits will be called
// in a second batch.
this.selectionManager =
new pskl.selection.SelectionManager(frameSheet, this.drawingController.overlayFrame);
frameSheet.setCurrentFrameIndex(0);
// DO NOT MOVE THIS LINE (see comment above)
frameSheet.setCurrentFrameIndex(0);
this.animationController.init();
this.previewsController.init();
@ -92,6 +87,8 @@ $.namespace("pskl");
var drawingLoop = new pskl.rendering.DrawingLoop();
drawingLoop.addCallback(this.render, this);
drawingLoop.start();
this.connectResizeToDpiUpdate_();
},
render : function (delta) {
@ -100,18 +97,18 @@ $.namespace("pskl");
this.previewsController.render(delta);
},
/**
* Override default DPIs.
* @private
*/
initDPIs_ : function() {
drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
// TODO(vincz): Add throttling on window.resize event.
$(window).resize($.proxy(function() {
drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
this.drawingController.updateDPI(drawingCanvasDpi);
}, this));
// TODO(vincz): Check for user settings eventually from localstorage.
connectResizeToDpiUpdate_ : function () {
$(window).resize($.proxy(this.startDPIUpdateTimer_, this));
},
startDPIUpdateTimer_ : function () {
if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPIForViewport, this), 200);
},
updateDPIForViewport : function () {
var dpi = piskel.calculateDPIsForDrawingCanvas_();
this.drawingController.updateDPI(dpi);
},
/**

55
js/utils/pixelUtils.js
View file

@ -4,22 +4,11 @@
ns.PixelUtils = {
getRectanglePixels : function (x0, y0, x1, y1) {
var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1);
var pixels = [];
var swap;
if(x0 > x1) {
swap = x0;
x0 = x1;
x1 = swap;
}
if(y0 > y1) {
swap = y0;
y0 = y1;
y1 = swap;
}
for(var x = x0; x <= x1; x++) {
for(var y = y0; y <= y1; y++) {
for(var x = rectangle.x0; x <= rectangle.x1; x++) {
for(var y = rectangle.y0; y <= rectangle.y1; y++) {
pixels.push({"col": x, "row": y});
}
}
@ -28,35 +17,35 @@
},
getBoundRectanglePixels : function (x0, y0, x1, y1) {
var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1);
var pixels = [];
var swap;
if(x0 > x1) {
swap = x0;
x0 = x1;
x1 = swap;
}
if(y0 > y1) {
swap = y0;
y0 = y1;
y1 = swap;
}
// Creating horizontal sides of the rectangle:
for(var x = x0; x <= x1; x++) {
pixels.push({"col": x, "row": y0});
pixels.push({"col": x, "row": y1});
for(var x = rectangle.x0; x <= rectangle.x1; x++) {
pixels.push({"col": x, "row": rectangle.y0});
pixels.push({"col": x, "row": rectangle.y1});
}
// Creating vertical sides of the rectangle:
for(var y = y0; y <= y1; y++) {
pixels.push({"col": x0, "row": y});
pixels.push({"col": x1, "row": y});
for(var y = rectangle.y0; y <= rectangle.y1; y++) {
pixels.push({"col": rectangle.x0, "row": y});
pixels.push({"col": rectangle.x1, "row": y});
}
return pixels;
},
/**
* Return an object of ordered rectangle coordinate.
* In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner
* @private
*/
getOrderedRectangleCoordinates : function (x0, y0, x1, y1) {
return {
x0 : Math.min(x0, x1), y0 : Math.min(y0, y1),
x1 : Math.max(x0, x1), y1 : Math.max(y0, y1),
};
},
/**
* Return the list of pixels that would have been filled by a paintbucket tool applied
* on pixel at coordinate (x,y).