mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge branch 'master' into enhancement-palette-sorting
Conflicts: src/js/utils/FrameUtils.js
This commit is contained in:
commit
8a29b78af8
@ -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;
|
||||
};
|
||||
|
@ -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();
|
||||
|
@ -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) {
|
||||
|
@ -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';
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
};
|
||||
|
||||
|
@ -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));
|
||||
|
@ -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);
|
||||
};
|
||||
})();
|
@ -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);
|
||||
};
|
||||
|
||||
})();
|
@ -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');
|
||||
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
@ -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();
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
|
145
test/js/utils/FrameUtilsTest.js
Normal file
145
test/js/utils/FrameUtilsTest.js
Normal 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;
|
||||
|
||||
// })
|
||||
});
|
Loading…
Reference in New Issue
Block a user