Merge branch 'master' into enhancement-palette-sorting

Conflicts:
	src/js/utils/FrameUtils.js
This commit is contained in:
jdescottes 2014-09-21 21:56:22 +02:00
commit 8a29b78af8
17 changed files with 289 additions and 149 deletions

View File

@ -218,7 +218,7 @@
};
ns.PreviewFilmController.prototype.clonePreviewCanvas_ = function (canvas) {
var clone = pskl.CanvasUtils.clone(canvas);
var clone = pskl.utils.CanvasUtils.clone(canvas);
clone.classList.add('tile-view', 'canvas');
return clone;
};

View File

@ -106,7 +106,7 @@
gifLoader.load({
success : function(){
var images = gifLoader.getFrames().map(function (frame) {
return pskl.CanvasUtils.createFromImageData(frame.data);
return pskl.utils.CanvasUtils.createFromImageData(frame.data);
});
this.createPiskelFromImages_(images);
this.closeDialog();

View File

@ -158,7 +158,7 @@
ns.PiskelController.prototype.getFrameCount = function () {
var layer = this.piskel.getLayerAt(0);
return layer.length();
return layer.size();
};
ns.PiskelController.prototype.setCurrentFrameIndex = function (index) {

View File

@ -34,7 +34,7 @@
var canvas = this.getFrameAsCanvas_(frame);
var basename = this.pngFilePrefixInput.value;
var filename = basename + (i+1) + ".png";
zip.file(filename, pskl.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
}
var fileName = this.getPiskelName_() + '.zip';

View File

@ -47,7 +47,7 @@
var then = function () {};
image.onload = function () {
this.referencePng = pskl.CanvasUtils.createFromImage(image).toDataURL();
this.referencePng = pskl.utils.CanvasUtils.createFromImage(image).toDataURL();
then();
}.bind(this);
image.src = this.referencePng;

View File

@ -56,7 +56,7 @@
if (this.frames[index]) {
this.frames.splice(index, 1);
} else {
throw 'Invalid index in removeFrameAt : ' + index + ' (size : ' + this.length() + ')';
throw 'Invalid index in removeFrameAt : ' + index + ' (size : ' + this.size() + ')';
}
};
@ -93,7 +93,7 @@
}
};
ns.Layer.prototype.length = function () {
ns.Layer.prototype.size = function () {
return this.frames.length;
};

View File

@ -33,7 +33,7 @@
*/
ns.Piskel.fromLayers = function (layers, descriptor) {
var piskel = null;
if (layers.length > 0 && layers[0].length() > 0) {
if (layers.length > 0 && layers[0].size() > 0) {
var sampleFrame = layers[0].getFrameAt(0);
piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), descriptor);
layers.forEach(piskel.addLayer.bind(piskel));

View File

@ -25,7 +25,7 @@
var scaledCanvas = this.createCanvas_(this.zoom);
var scaledContext = scaledCanvas.getContext('2d');
pskl.CanvasUtils.disableImageSmoothing(scaledCanvas);
pskl.utils.CanvasUtils.disableImageSmoothing(scaledCanvas);
scaledContext.scale(this.zoom, this.zoom);
scaledContext.drawImage(canvas, 0, 0);
@ -44,6 +44,6 @@
zoom = zoom || 1;
var width = this.frame.getWidth() * zoom;
var height = this.frame.getHeight() * zoom;
return pskl.CanvasUtils.createCanvas(width, height);
return pskl.utils.CanvasUtils.createCanvas(width, height);
};
})();

View File

@ -37,7 +37,7 @@
var count = this.frames.length;
var width = count * sampleFrame.getWidth();
var height = sampleFrame.getHeight();
return pskl.CanvasUtils.createCanvas(width, height);
return pskl.utils.CanvasUtils.createCanvas(width, height);
};
})();

View File

@ -70,8 +70,8 @@
};
ns.FrameRenderer.prototype.clear = function () {
pskl.CanvasUtils.clear(this.canvas);
pskl.CanvasUtils.clear(this.displayCanvas);
pskl.utils.CanvasUtils.clear(this.canvas);
pskl.utils.CanvasUtils.clear(this.displayCanvas);
};
ns.FrameRenderer.prototype.setZoom = function (zoom) {
@ -153,8 +153,8 @@
var height = this.displayHeight;
var width = this.displayWidth;
this.displayCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
this.displayCanvas = pskl.utils.CanvasUtils.createCanvas(width, height, this.classes);
pskl.utils.CanvasUtils.disableImageSmoothing(this.displayCanvas);
this.container.append(this.displayCanvas);
};
@ -223,7 +223,7 @@
*/
ns.FrameRenderer.prototype.renderFrame_ = function (frame) {
if (!this.canvas || frame.getWidth() != this.canvas.width || frame.getHeight() != this.canvas.height) {
this.canvas = pskl.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight());
this.canvas = pskl.utils.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight());
}
var context = this.canvas.getContext('2d');

View File

@ -1,13 +1,13 @@
(function () {
var ns = $.namespace("pskl");
var ns = $.namespace('pskl.utils');
ns.CanvasUtils = {
createCanvas : function (width, height, classList) {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
var canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
if (typeof classList == "string") {
if (typeof classList == 'string') {
classList = [classList];
}
if (Array.isArray(classList)) {
@ -20,14 +20,14 @@
},
createFromImageData : function (imageData) {
var canvas = pskl.CanvasUtils.createCanvas(imageData.width, imageData.height);
var canvas = pskl.utils.CanvasUtils.createCanvas(imageData.width, imageData.height);
var context = canvas.getContext('2d');
context.putImageData(imageData, 0, 0);
return canvas;
},
createFromImage : function (image) {
var canvas = pskl.CanvasUtils.createCanvas(image.width, image.height);
var canvas = pskl.utils.CanvasUtils.createCanvas(image.width, image.height);
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
return canvas;
@ -51,12 +51,12 @@
clear : function (canvas) {
if (canvas) {
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
}
},
clone : function (canvas) {
var clone = pskl.CanvasUtils.createCanvas(canvas.width, canvas.height);
var clone = pskl.utils.CanvasUtils.createCanvas(canvas.width, canvas.height);
//apply the old canvas to the new one
clone.getContext('2d').drawImage(canvas, 0, 0);
@ -71,8 +71,8 @@
},
getBase64FromCanvas : function (canvas, format) {
format = format || "png";
var data = canvas.toDataURL("image/" + format);
format = format || 'png';
var data = canvas.toDataURL('image/' + format);
return data.substr(data.indexOf(',')+1);
}
};

View File

@ -2,6 +2,14 @@
var ns = $.namespace('pskl.utils');
var colorCache = {};
ns.FrameUtils = {
toImage : function (frame, zoom, bgColor) {
zoom = zoom || 1;
bgColor = bgColor || Constants.TRANSPARENT_COLOR;
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
canvasRenderer.drawTransparentAs(bgColor);
return canvasRenderer.render();
},
merge : function (frames) {
var merged = null;
if (frames.length) {
@ -28,6 +36,66 @@
return pskl.utils.FrameUtils.createFromImage(resizedImage);
},
/*
* Create a pskl.model.Frame from an Image object.
* Transparent pixels will either be converted to completely opaque or completely transparent pixels.
* @param {Image} image source image
* @return {pskl.model.Frame} corresponding frame
*/
createFromImage : function (image) {
var w = image.width,
h = image.height;
var canvas = pskl.utils.CanvasUtils.createCanvas(w, h);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
var imgData = context.getImageData(0,0,w,h).data;
return pskl.utils.FrameUtils.createFromImageData_(imgData, w, h);
},
createFromImageData_ : function (imageData, width, height) {
// Draw the zoomed-up pixels to a different canvas context
var grid = [];
for (var x = 0 ; x < width ; x++){
grid[x] = [];
for (var y = 0 ; y < height ; y++){
// Find the starting index in the one-dimensional image data
var i = (y * width + x)*4;
var r = imageData[i ];
var g = imageData[i+1];
var b = imageData[i+2];
var a = imageData[i+3];
if (a < 125) {
grid[x][y] = Constants.TRANSPARENT_COLOR;
} else {
grid[x][y] = pskl.utils.FrameUtils.rgbToHex_(r,g,b);
}
}
}
return pskl.model.Frame.fromPixelGrid(grid);
},
/**
* Convert a rgb(Number, Number, Number) color to hexadecimal representation
* @param {Number} r red value, between 0 and 255
* @param {Number} g green value, between 0 and 255
* @param {Number} b blue value, between 0 and 255
* @return {String} hex representation of the color '#ABCDEF'
*/
rgbToHex_ : function (r, g, b) {
return "#" + this.componentToHex_(r) + this.componentToHex_(g) + this.componentToHex_(b);
},
/**
* Convert a color component (as a Number between 0 and 255) to its string hexa representation
* @param {Number} c component value, between 0 and 255
* @return {String} eg. '0A'
*/
componentToHex_ : function (c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
},
/**
* Alpha compositing using porter duff algorithm :
* http://en.wikipedia.org/wiki/Alpha_compositing
@ -36,9 +104,9 @@
* @param {String} strColor2 color under
* @return {String} the composite color
*/
mergePixels : function (strColor1, strColor2, globalOpacity1) {
var col1 = pskl.utils.FrameUtils.toRgba(strColor1);
var col2 = pskl.utils.FrameUtils.toRgba(strColor2);
mergePixels_ : function (strColor1, strColor2, globalOpacity1) {
var col1 = pskl.utils.FrameUtils.toRgba_(strColor1);
var col2 = pskl.utils.FrameUtils.toRgba_(strColor2);
if (typeof globalOpacity1 == 'number') {
col1 = JSON.parse(JSON.stringify(col1));
col1.a = globalOpacity1 * col1.a;
@ -58,7 +126,7 @@
* @param {String} c color as a string
* @return {Object} {r:Number,g:Number,b:Number,a:Number}
*/
toRgba : function (c) {
toRgba_ : function (c) {
if (colorCache[c]) {
return colorCache[c];
}
@ -97,81 +165,6 @@
}
colorCache[c] = color;
return color;
},
/*
* Create a pskl.model.Frame from an Image object.
* Transparent pixels will either be converted to completely opaque or completely transparent pixels.
* @param {Image} image source image
* @return {pskl.model.Frame} corresponding frame
*/
createFromImage : function (image) {
var w = image.width,
h = image.height;
var imgData = pskl.utils.FrameUtils.imageToImageData(image);
var grid = pskl.utils.FrameUtils.imageDataToGrid(imgData,w, h, Constants.TRANSPARENT_COLOR);
return pskl.model.Frame.fromGrid(grid);
},
imageToImageData : function (image) {
var w = image.width,
h = image.height;
var canvas = pskl.CanvasUtils.createCanvas(w, h);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
return context.getImageData(0,0,w,h).data;
},
imageDataToGrid : function (imageData, width, height, transparent) {
// Draw the zoomed-up pixels to a different canvas context
var grid = [];
for (var x = 0 ; x < width ; x++){
grid[x] = [];
for (var y = 0 ; y < height ; y++){
// Find the starting index in the one-dimensional image data
var i = (y * width + x)*4;
var r = imageData[i ];
var g = imageData[i+1];
var b = imageData[i+2];
var a = imageData[i+3];
if (a < 125) {
grid[x][y] = transparent;
} else {
grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
}
}
}
return grid;
},
/**
* Convert a rgb(Number, Number, Number) color to hexadecimal representation
* @param {Number} r red value, between 0 and 255
* @param {Number} g green value, between 0 and 255
* @param {Number} b blue value, between 0 and 255
* @return {String} hex representation of the color '#ABCDEF'
*/
rgbToHex : function (r, g, b) {
return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
},
/**
* Convert a color component (as a Number between 0 and 255) to its string hexa representation
* @param {Number} c component value, between 0 and 255
* @return {String} eg. '0A'
*/
componentToHex : function (c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
},
toImage : function (frame, zoom, bgColor) {
zoom = zoom || 1;
bgColor = bgColor || Constants.TRANSPARENT_COLOR;
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
canvasRenderer.drawTransparentAs(bgColor);
return canvasRenderer.render();
}
};
})();

View File

@ -3,12 +3,12 @@
ns.ImageResizer = {
resize : function (image, targetWidth, targetHeight, smoothingEnabled) {
var canvas = pskl.CanvasUtils.createCanvas(targetWidth, targetHeight);
var canvas = pskl.utils.CanvasUtils.createCanvas(targetWidth, targetHeight);
var context = canvas.getContext('2d');
context.save();
if (!smoothingEnabled) {
pskl.CanvasUtils.disableImageSmoothing(canvas);
pskl.utils.CanvasUtils.disableImageSmoothing(canvas);
}
context.translate(canvas.width / 2, canvas.height / 2);
@ -34,10 +34,10 @@
*/
resizeNearestNeighbour : function (source, zoom, margin, marginColor) {
margin = margin || 0;
var canvas = pskl.CanvasUtils.createCanvas(zoom*source.width, zoom*source.height);
var canvas = pskl.utils.CanvasUtils.createCanvas(zoom*source.width, zoom*source.height);
var context = canvas.getContext('2d');
var imgData = pskl.CanvasUtils.getImageDataFromCanvas(source);
var imgData = pskl.utils.CanvasUtils.getImageDataFromCanvas(source);
var yRanges = {},
xOffset = 0,

View File

@ -8,20 +8,20 @@
* @param {Image} image source image
* @return {pskl.model.Frame} corresponding frame
*/
createFromImage : function (image, frameCount) {
var w = image.width,
h = image.height,
frameWidth = w / frameCount;
createLayerFromSpritesheet : function (image, frameCount) {
var width = image.width,
height = image.height,
frameWidth = width / frameCount;
var canvas = pskl.CanvasUtils.createCanvas(w, h);
var canvas = pskl.utils.CanvasUtils.createCanvas(frameWidth, height);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
// Draw the zoomed-up pixels to a different canvas context
var frames = [];
for (var i = 0 ; i < frameCount ; i++) {
var imgData = context.getImageData(frameWidth*i,0,frameWidth,h).data;
var frame = pskl.utils.FrameUtils.createFromImageData(imgData, frameWidth, h);
context.clearRect(0, 0 , frameWidth, height);
context.drawImage(image, frameWidth * i, 0, frameWidth, height, 0, 0, frameWidth, height);
var frame = pskl.utils.FrameUtils.createFromImage(canvas);
frames.push(frame);
}
return frames;

View File

@ -47,7 +47,7 @@
// 2 - attach the onload callback that will be triggered asynchronously
image.onload = function () {
// 5 - extract the frames from the loaded image
var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount);
var frames = pskl.utils.LayerUtils.createLayerFromSpritesheet(image, layerData.frameCount);
// 6 - add each image to the layer
this.addFramesToLayer(frames, layer);
}.bind(this);

View File

@ -11,6 +11,10 @@
});
};
var rgbToHex = function(r, g, b) {
return '#' + ((r << 16) | (g << 8) | b).toString(16);
};
var imageDataToGrid = function (imageData, width, height, transparent) {
// Draw the zoomed-up pixels to a different canvas context
var grid = [];
@ -27,7 +31,7 @@
if (a < 125) {
grid[x][y] = transparent;
} else {
grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
grid[x][y] = rgbToHex(r,g,b);
}
}
}
@ -94,10 +98,8 @@
};
ns.ImageProcessor.prototype.process = function () {
this.importAll(pskl.utils.FrameUtils, 'pskl.utils.FrameUtils');
this.importAll(pskl.utils.CanvasUtils, 'pskl.utils.CanvasUtils');
var imageData = pskl.utils.FrameUtils.imageToImageData(this.image);
var canvas = pskl.utils.CanvasUtils.createFromImage(this.image);
var imageData = pskl.utils.CanvasUtils.getImageDataFromCanvas(canvas);
this.worker.postMessage({
imageData : imageData,
width : this.image.width,
@ -125,31 +127,6 @@
this.runScript(script);
};
ns.ImageProcessor.prototype.importAll = function (classToImport, classpath) {
this.createNamespace('pskl.utils.FrameUtils');
for (var key in classToImport) {
if (classToImport.hasOwnProperty(key)) {
this.addMethod(classToImport[key], classpath + '.' + key);
}
}
};
ns.ImageProcessor.prototype.addMethod = function (method, name) {
this.runScript(name + "=" + method);
};
ns.ImageProcessor.prototype.runScript = function (script) {
this.worker.postMessage({
type : 'RUN_SCRIPT',
script : this.getScriptAsUrl(script)
});
};
ns.ImageProcessor.prototype.getScriptAsUrl = function (script) {
var blob = new Blob([script], {type: "application/javascript"}); // pass a useful mime type here
return window.URL.createObjectURL(blob);
};
ns.ImageProcessor.prototype.onWorkerMessage = function (event) {
if (event.data.type === 'STEP') {
this.onStep(event);
@ -161,6 +138,31 @@
this.worker.terminate();
}
};
ns.ImageProcessor.prototype.importAll__ = function (classToImport, classpath) {
this.createNamespace(classpath);
for (var key in classToImport) {
if (classToImport.hasOwnProperty(key)) {
this.addMethod(classToImport[key], classpath + '.' + key);
}
}
};
ns.ImageProcessor.prototype.addMethod__ = function (method, name) {
this.runScript(name + "=" + method);
};
ns.ImageProcessor.prototype.runScript__ = function (script) {
this.worker.postMessage({
type : 'RUN_SCRIPT',
script : this.getScriptAsUrl(script)
});
};
ns.ImageProcessor.prototype.getScriptAsUrl__ = function (script) {
var blob = new Blob([script], {type: "application/javascript"}); // pass a useful mime type here
return window.URL.createObjectURL(blob);
};
})();

View File

@ -0,0 +1,145 @@
describe("FrameUtils suite", function() {
var black = '#000000';
var red = '#ff0000';
var transparent = Constants.TRANSPARENT_COLOR;
it("merges 2 frames", function () {
var frame1 = pskl.model.Frame.fromPixelGrid([
[black, transparent],
[transparent, black]
]);
var frame2 = pskl.model.Frame.fromPixelGrid([
[transparent, red],
[red, transparent]
]);
var mergedFrame = pskl.utils.FrameUtils.merge([frame1, frame2]);
expect(mergedFrame.getPixel(0,0)).toBe(black);
expect(mergedFrame.getPixel(0,1)).toBe(red);
expect(mergedFrame.getPixel(1,0)).toBe(red);
expect(mergedFrame.getPixel(1,1)).toBe(black);
});
it("returns same frame when merging single frame", function () {
var frame1 = pskl.model.Frame.fromPixelGrid([
[black, transparent],
[transparent, black]
]);
var mergedFrame = pskl.utils.FrameUtils.merge([frame1]);
expect(mergedFrame.getPixel(0,0)).toBe(black);
expect(mergedFrame.getPixel(0,1)).toBe(transparent);
expect(mergedFrame.getPixel(1,0)).toBe(transparent);
expect(mergedFrame.getPixel(1,1)).toBe(black);
});
var checkPixelsColor = function (frame, pixels, color) {
pixels.forEach(function (pixel) {
var pixelColor = frame.getPixel(pixel[0], pixel[1]);
expect(pixelColor).toBe(color);
});
};
it ("converts an image to a frame", function () {
var frame1 = pskl.model.Frame.fromPixelGrid([
[black, transparent],
[transparent, black]
]);
var image = pskl.utils.FrameUtils.toImage(frame1);
expect(image.width).toBe(2);
expect(image.height).toBe(2);
var biggerImage = pskl.utils.FrameUtils.toImage(frame1, 3);
expect(biggerImage.width).toBe(6);
expect(biggerImage.height).toBe(6);
var biggerFrame = pskl.utils.FrameUtils.createFromImage(biggerImage);
checkPixelsColor(biggerFrame, [
[0,0],[0,1],[0,2],
[1,0],[1,1],[1,2],
[2,0],[2,1],[2,2],
[3,3],[3,4],[3,5],
[4,3],[4,4],[4,5],
[5,3],[5,4],[5,5]
], black);
checkPixelsColor(biggerFrame, [
[0,3],[0,4],[0,5],
[1,3],[1,4],[1,5],
[2,3],[2,4],[2,5],
[3,0],[3,1],[3,2],
[4,0],[4,1],[4,2],
[5,0],[5,1],[5,2]
], transparent);
});
it ("[LayerUtils] creates a layer from a simple spritesheet", function () {
var frame = pskl.model.Frame.fromPixelGrid([
[black, red],
[red, black],
[black, black],
[red, red]
]);
var spritesheet = pskl.utils.FrameUtils.toImage(frame);
var frames = pskl.utils.LayerUtils.createLayerFromSpritesheet(spritesheet, 4);
expect(frames.length).toBe(4);
expect(frames[0].getPixel(0,0)).toBe(black);
expect(frames[0].getPixel(0,1)).toBe(red);
expect(frames[1].getPixel(0,0)).toBe(red);
expect(frames[1].getPixel(0,1)).toBe(black);
expect(frames[2].getPixel(0,0)).toBe(black);
expect(frames[2].getPixel(0,1)).toBe(black);
expect(frames[3].getPixel(0,0)).toBe(red);
expect(frames[3].getPixel(0,1)).toBe(red);
});
// it("starts at -1", function() {
// historyService = createMockHistoryService();
// expect(historyService.currentIndex).toBe(-1);
// });
// it("is at 0 after init", function() {
// historyService = createMockHistoryService();
// historyService.init();
// expect(historyService.currentIndex).toBe(0);
// });
// it("stores a piskel snapshot after 5 SAVE", function () {
// // BEFORE
// var SNAPSHOT_PERIOD_BACKUP = pskl.service.HistoryService.SNAPSHOT_PERIOD;
// pskl.service.HistoryService.SNAPSHOT_PERIOD = 5;
// historyService = createMockHistoryService();
// historyService.init();
// sendSaveEvents(pskl.service.HistoryService.REPLAY).times(5);
// expect(historyService.currentIndex).toBe(5);
// expect(getLastState().piskel).toBe(SERIALIZED_PISKEL);
// sendSaveEvents(pskl.service.HistoryService.REPLAY).times(4);
// sendSaveEvents(pskl.service.HistoryService.REPLAY_NO_SNAPSHOT).once();
// expect(getLastState().piskel).toBeUndefined();
// sendSaveEvents(pskl.service.HistoryService.REPLAY_NO_SNAPSHOT).once();
// expect(getLastState().piskel).toBeUndefined();
// sendSaveEvents(pskl.service.HistoryService.REPLAY).once();
// expect(getLastState().piskel).toBe(SERIALIZED_PISKEL);
// // AFTER
// pskl.service.HistoryService.SNAPSHOT_PERIOD = SNAPSHOT_PERIOD_BACKUP;
// })
});