mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

cleanup of performance improvement

Browse Source
This commit is contained in:
jdescottes 2014-07-03 00:48:49 +02:00
parent a2e2459169
commit fa626532ba
5 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/Constants.js
View File

@ -11,6 +11,8 @@ var Constants = {
MAX_HEIGHT : 1024,
MAX_WIDTH : 1024,
MAX_CURRENT_COLORS_DISPLAYED : 100,
MINIMUM_ZOOM : 1,
PREVIEW_FILM_SIZE : 96,

5
src/js/controller/PalettesListController.js
View File

@ -10,7 +10,6 @@
// I apologize to my future self for this one.
var NO_SCROLL_MAX_COLORS = 20;
var MAX_COLORS = 100;
ns.PalettesListController = function (paletteController, usedColorService) {
this.usedColorService = usedColorService;
@ -80,8 +79,8 @@
}
}
if (colors.length > MAX_COLORS) {
colors = colors.slice(0, MAX_COLORS);
if (colors.length > Constants.MAX_CURRENT_COLORS_DISPLAYED) {
colors = colors.slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
}
return colors;

8
src/js/controller/PreviewFilmController.js
View File

@ -16,9 +16,9 @@
this.redrawFlag = true;
this.cachedImageProcessor = new pskl.model.frame.CachedFrameProcessor();
this.cachedImageProcessor.setFrameProcessor(this.frameToPreviewCanvas_.bind(this));
this.cachedImageProcessor.setOutputCloner(this.clonePreviewCanvas_.bind(this));
this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
this.cachedFrameProcessor.setFrameProcessor(this.frameToPreviewCanvas_.bind(this));
this.cachedFrameProcessor.setOutputCloner(this.clonePreviewCanvas_.bind(this));
};
ns.PreviewFilmController.prototype.init = function() {
@ -207,7 +207,7 @@
};
ns.PreviewFilmController.prototype.getCanvasForFrame = function (frame) {
var canvas = this.cachedImageProcessor.get(frame, this.zoom);
var canvas = this.cachedFrameProcessor.get(frame, this.zoom);
canvas.classList.add('tile-view', 'canvas');
return canvas;
};

6
src/js/rendering/frame/TiledFrameRenderer.js
View File

@ -9,8 +9,8 @@
this.displayContainer.classList.add('tiled-frame-container');
container.get(0).appendChild(this.displayContainer);
this.cachedImageProcessor = new pskl.model.frame.CachedFrameProcessor();
this.cachedImageProcessor.setFrameProcessor(this.frameToDataUrl_.bind(this));
this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
this.cachedFrameProcessor.setFrameProcessor(this.frameToDataUrl_.bind(this));
};
ns.TiledFrameRenderer.prototype.frameToDataUrl_ = function (frame) {
@ -19,7 +19,7 @@
};
ns.TiledFrameRenderer.prototype.render = function (frame) {
var imageSrc = this.cachedImageProcessor.get(frame, this.zoom);
var imageSrc = this.cachedFrameProcessor.get(frame, this.zoom);
this.displayContainer.style.backgroundImage = 'url(' + imageSrc + ')';
};

41
src/js/service/CurrentColorsService.js
View File

@ -4,6 +4,9 @@
ns.CurrentColorsService = function (piskelController) {
this.piskelController = piskelController;
this.currentColors = [];
this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
this.cachedFrameProcessor.setFrameProcessor(this.frameToColors_.bind(this));
this.framesColorsCache_ = {};
};
@ -16,33 +19,35 @@
return this.currentColors;
};
ns.CurrentColorsService.prototype.frameToColors_ = function (frame) {
var frameColors = {};
frame.forEachPixel(function (color, x, y) {
frameColors[color] = (frameColors[color] || 0) + 1;
});
return frameColors;
};
ns.CurrentColorsService.prototype.onPiskelUpdated_ = function (evt) {
var layers = this.piskelController.getLayers();
var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);});
var colors = {};
frames.forEach(function (f) {
var frameHash = f.getHash();
if (!this.framesColorsCache_[frameHash]) {
var frameColors = {};
f.forEachPixel(function (color, x, y) {
frameColors[color] = true;
});
this.framesColorsCache_[frameHash] = frameColors;
}
Object.keys(this.framesColorsCache_[frameHash]).forEach(function (color) {
colors[color] = true;
var frameColors = this.cachedFrameProcessor.get(f);
Object.keys(frameColors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED).forEach(function (color) {
colors[color] = (colors[color] || 0) + frameColors[color];
});
}.bind(this));
// Remove transparent color from used colors
delete colors[Constants.TRANSPARENT_COLOR];
this.currentColors = Object.keys(colors);
// limit the array to the max colors to display
this.currentColors = Object.keys(colors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
// sort by most frequent color
this.currentColors = this.currentColors.sort(function (c1, c2) {
if (c1 < c2) {
return -1;
} else if (c1 > c2) {
return 1;
} else {
return 0;
}
return colors[c2] - colors[c1];
});
// TODO : only fire if there was a change