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

Merge branch 'master' into gh-pages

Browse source
This commit is contained in:
juliandescottes 2012-09-03 21:48:26 +02:00
commit dbfe7cd1a7
9 changed files with 45 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
js/Constants.js
View file

@ -1,6 +1,16 @@
var Constants = {
DEFAULT_PEN_COLOR : '#000000',
TRANSPARENT_COLOR : "TRANSPARENT",
DEFAULT_PEN_COLOR : '#000000',
TRANSPARENT_COLOR : 'TRANSPARENT',
/*
* Fake semi-transparent color used to highlight transparent
* strokes and rectangles:
*/
SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)',
/*
* Default entry point for piskel web service:
*/
PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com'
};

13
js/FrameSheetModel.js
View file

@ -9,14 +9,21 @@ pskl.FrameSheetModel = (function() {
var height;
/**
* Create empty frame of dimension [width * height] with Constants.TRANSPARENT_COLOR
* as a default value.
*
* @private
*/
var createEmptyFrame_ = function() {
var emptyFrame = new Array(width);
var emptyFrame = []; //new Array(width);
for (var columnIndex=0; columnIndex < width; columnIndex++) {
emptyFrame[columnIndex] = new Array(height);
var columnArray = [];
for(var heightIndex = 0; heightIndex < height; heightIndex++) {
columnArray.push(Constants.TRANSPARENT_COLOR);
}
emptyFrame[columnIndex] = columnArray;
}
return emptyFrame;
return emptyFrame;
};
/**

6
js/drawingtools/BaseTool.js
View file

@ -21,8 +21,10 @@
context.clearRect(col * dpi, row * dpi, dpi, dpi);
}
else {
// TODO(vincz): Found a better design to update the palette, it's called too frequently.
$.publish(Events.COLOR_USED, [color]);
if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
// TODO(vincz): Found a better design to update the palette, it's called too frequently.
$.publish(Events.COLOR_USED, [color]);
}
context.fillStyle = color;
context.fillRect(col * dpi, row * dpi, dpi, dpi);
}

6
js/drawingtools/Eraser.js
View file

@ -32,10 +32,4 @@
ns.Eraser.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.applyToolAt(col, row, frame, color, canvas, dpi);
};
ns.Eraser.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
// TODO: Create a afterRelease event hook or put that deep in the model
$.publish(Events.FRAMESHEET_UPDATED);
};
})();

8
js/drawingtools/PaintBucket.js
View file

@ -21,18 +21,12 @@
var targetColor = pskl.utils.normalizeColor(frame[col][row]);
//this.recursiveFloodFill_(frame, col, row, targetColor, color);
this.queueLinearFloodFill_(frame, col, row, targetColor, color);
$.publish(Events.FRAMESHEET_UPDATED);
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawFrameInCanvas(frame, canvas, dpi);
};
ns.PaintBucket.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
// TODO: Create a afterRelease event hook or put that deep in the model
$.publish(Events.FRAMESHEET_UPDATED);
};
/**
* Flood-fill (node, target-color, replacement-color):
* 1. Set Q to the empty queue.

5
js/drawingtools/Rectangle.js
View file

@ -49,7 +49,7 @@
for(var i = 0; i< strokePoints.length; i++) {
if(color == Constants.TRANSPARENT_COLOR) {
color = "rgba(255, 255, 255, 0.6)";
color = Constants.SELECTION_TRANSPARENT_COLOR;
}
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
}
@ -84,9 +84,6 @@
// For now, we are done with the stroke tool and don't need an overlay anymore:
this.removeCanvasOverlays();
// TODO: Create a afterRelease event hook or put that deep in the model
$.publish(Events.FRAMESHEET_UPDATED);
};
/**

5
js/drawingtools/SimplePen.js
View file

@ -52,9 +52,4 @@
this.previousCol = col;
this.previousRow = row;
};
ns.SimplePen.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
// TODO: Create a afterRelease event hook or out that deep in the model
$.publish(Events.FRAMESHEET_UPDATED);
};
})();

7
js/drawingtools/Stroke.js
View file

@ -62,7 +62,7 @@
// We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke.
// When the stroke tool will be released, It will draw a transparent stroke,
// eg deleting the equivalent of a stroke.
color = "rgba(255, 255, 255, 0.6)";
color = Constants.SELECTION_TRANSPARENT_COLOR;
}
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
}
@ -96,10 +96,7 @@
}
// For now, we are done with the stroke tool and don't need an overlay anymore:
this.removeCanvasOverlays();
// TODO: Create a afterRelease event hook or out that deep in the model
$.publish(Events.FRAMESHEET_UPDATED);
this.removeCanvasOverlays();
};
})();

24
js/piskel.js
View file

@ -62,15 +62,15 @@ $.namespace("pskl");
frameSheet = pskl.FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
frameSheet.addEmptyFrame();
this.setActiveFrame(0);
pskl.NotificationService.init();
pskl.LocalStorageService.init(frameSheet);
// TODO: Add comments
var frameId = this.getFrameIdFromUrl();
if (frameId) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + frameId + "]"}]);
this.loadFramesheetFromService(frameId);
var framesheetId = this.getFramesheetIdFromUrl();
if (framesheetId) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
this.loadFramesheetFromService(framesheetId);
} else {
this.finishInit();
pskl.LocalStorageService.displayRestoreNotification();
@ -102,8 +102,9 @@ $.namespace("pskl");
pskl.ToolSelector.init();
},
getFrameIdFromUrl : function() {
getFramesheetIdFromUrl : function() {
var href = window.location.href;
// TODO: Change frameId to framesheetId on the backend
if (href.indexOf('frameId=') != -1) {
return href.substring(href.indexOf('frameId=')+8);
}
@ -111,18 +112,22 @@ $.namespace("pskl");
loadFramesheetFromService : function (frameId) {
var xhr = new XMLHttpRequest();
// TODO: Change frameId to framesheetId on the backend
xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
xhr.responseType = 'text';
xhr.onload = function(e) {
frameSheet.deserialize(this.responseText);
piskel.setActiveFrame(0);
$.publish(Events.HIDE_NOTIFICATION);
piskel.finishInit();
piskel.setActiveFrameAndRedraw(0);
};
xhr.onerror = function () {
$.publish(Events.HIDE_NOTIFICATION);
piskel.finishInit();
piskel.setActiveFrameAndRedraw(0);
};
xhr.send();
@ -136,12 +141,13 @@ $.namespace("pskl");
setActiveFrameAndRedraw: function(index) {
this.setActiveFrame(index);
// When redraw engine is refactored, remove the following crap and
// trigger an event instead:
// Update drawing canvas:
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
// Update slideshow:
this.createPreviews();
// Update animation preview:
animIndex = 0;
},