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

Merge pull request #589 from juliandescottes/move-fps-to-model

Browse Source 
move fps info from preview controller to piskel model
This commit is contained in:
Julian Descottes 2016-12-13 00:11:47 -10:00 committed by GitHub
commit 27b26fe4f3
20 changed files with 54 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/Events.js
View File

@ -59,6 +59,7 @@ var Events = {
AFTER_SAVING_PISKEL: 'AFTER_SAVING_PISKEL',
FRAME_SIZE_CHANGED : 'FRAME_SIZE_CHANGED',
FPS_CHANGED : 'FPS_CHANGED',
SELECTION_CREATED: 'SELECTION_CREATED',
SELECTION_MOVE_REQUEST: 'SELECTION_MOVE_REQUEST',

10
src/js/app.js
View File

@ -19,8 +19,9 @@
this.shortcutService.init();
var size = pskl.UserSettings.get(pskl.UserSettings.DEFAULT_SIZE);
var fps = Constants.DEFAULT.FPS;
var descriptor = new pskl.model.piskel.Descriptor('New Piskel', '');
var piskel = new pskl.model.Piskel(size.width, size.height, descriptor);
var piskel = new pskl.model.Piskel(size.width, size.height, fps, descriptor);
var layer = new pskl.model.Layer('Layer 1');
var frame = new pskl.model.Frame(size.width, size.height);
@ -124,7 +125,7 @@
this.storageService = new pskl.service.storage.StorageService(this.piskelController);
this.storageService.init();
this.importService = new pskl.service.ImportService(this.piskelController, this.previewController);
this.importService = new pskl.service.ImportService(this.piskelController);
this.imageUploadService = new pskl.service.ImageUploadService();
this.imageUploadService.init();
@ -177,16 +178,13 @@
loadPiskel_ : function (piskelData) {
var serializedPiskel = piskelData.piskel;
pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel, extra) {
pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel) {
pskl.app.piskelController.setPiskel(piskel);
$.publish(Events.PISKEL_SAVED);
var fps = extra.fps;
if (piskelData.descriptor) {
// Backward compatibility for v2 or older
piskel.setDescriptor(piskelData.descriptor);
fps = piskelData.fps;
}
pskl.app.previewController.setFPS(fps);
});
},

17
src/js/controller/piskel/PiskelController.js
View File

@ -35,15 +35,16 @@
return this.piskel.getWidth();
};
/**
* TODO : this should be removed
* FPS should be stored in the Piskel model and not in the
* previewController
* Then piskelController should be able to return this information
* @return {Number} Frames per second for the current animation
*/
ns.PiskelController.prototype.getFPS = function () {
return pskl.app.previewController.getFPS();
return this.piskel.fps;
};
ns.PiskelController.prototype.setFPS = function (fps) {
if (typeof fps !== 'number') {
return;
}
this.piskel.fps = fps;
$.publish(Events.FPS_CHANGED);
};
ns.PiskelController.prototype.getLayers = function () {

29
src/js/controller/preview/PreviewController.js
View File

@ -21,23 +21,12 @@
this.lastRenderTime = 0;
this.renderFlag = true;
/**
* !! WARNING !! ALL THE INITIALISATION BELOW SHOULD BE MOVED TO INIT()
* IT WILL STAY HERE UNTIL WE CAN REMOVE SETFPS (see comment below)
*/
this.fpsRangeInput = document.querySelector('#preview-fps');
this.fpsCounterDisplay = document.querySelector('#display-fps');
this.openPopupPreview = document.querySelector('.open-popup-preview-button');
this.originalSizeButton = document.querySelector('.original-size-button');
this.toggleOnionSkinButton = document.querySelector('.preview-toggle-onion-skin');
/**
* !! WARNING !! THIS SHOULD REMAIN HERE UNTIL, BECAUSE THE PREVIEW CONTROLLER
* IS THE SOURCE OF TRUTH AT THE MOMENT WHEN IT COMES TO FPSs
* IT WILL BE QUERIED BY OTHER OBJECTS SO DEFINE IT AS SOON AS POSSIBLE
*/
this.setFPS(Constants.DEFAULT.FPS);
this.renderer = new pskl.rendering.frame.BackgroundImageFrameRenderer(this.container);
this.popupPreviewController = new ns.PopupPreviewController(piskelController);
};
@ -58,7 +47,10 @@
$.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
$.subscribe(Events.PISKEL_SAVE_STATE, this.setRenderFlag_.bind(this, true));
$.subscribe(Events.FPS_CHANGED, this.updateFPS_.bind(this));
// On PISKEL_RESET, set the render flag and update the FPS input
$.subscribe(Events.PISKEL_RESET, this.setRenderFlag_.bind(this, true));
$.subscribe(Events.PISKEL_RESET, this.updateFPS_.bind(this));
this.initTooltips_();
this.popupPreviewController.init();
@ -66,6 +58,7 @@
this.updateZoom_();
this.updateOnionSkinPreview_();
this.updateOriginalSizeButton_();
this.updateFPS_();
this.updateMaxFPS_();
this.updateContainerDimensions_();
};
@ -113,7 +106,7 @@
ns.PreviewController.prototype.updateMaxFPS_ = function () {
var maxFps = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
this.fpsRangeInput.setAttribute('max', maxFps);
this.setFPS(Math.min(this.fps, maxFps));
this.piskelController.setFPS(Math.min(maxFps, this.piskelController.getFPS()));
};
ns.PreviewController.prototype.updateZoom_ = function () {
@ -145,15 +138,17 @@
* Event handler triggered on 'input' or 'change' events.
*/
ns.PreviewController.prototype.onFpsRangeInputUpdate_ = function (evt) {
this.setFPS(parseInt(this.fpsRangeInput.value, 10));
var fps = parseInt(this.fpsRangeInput.value, 10);
this.piskelController.setFPS(fps);
// blur only on 'change' events, as blurring on 'input' breaks on Firefox
if (evt.type === 'change') {
this.fpsRangeInput.blur();
}
};
ns.PreviewController.prototype.setFPS = function (fps) {
if (typeof fps === 'number') {
ns.PreviewController.prototype.updateFPS_ = function () {
var fps = this.piskelController.getFPS();
if (fps !== this.fps) {
this.fps = fps;
// reset
this.fpsRangeInput.value = 0;
@ -163,10 +158,6 @@
}
};
ns.PreviewController.prototype.getFPS = function () {
return this.fps;
};
ns.PreviewController.prototype.render = function (delta) {
this.elapsedTime += delta;
var index = this.getNextIndex_(delta);

3
src/js/controller/settings/ImportController.js
View File

@ -79,9 +79,8 @@
ns.ImportController.prototype.openPiskelFile_ = function (file) {
if (this.isPiskel_(file)) {
pskl.utils.PiskelFileUtils.loadFromFile(file, function (piskel, extra) {
pskl.utils.PiskelFileUtils.loadFromFile(file, function (piskel) {
pskl.app.piskelController.setPiskel(piskel);
pskl.app.previewController.setFPS(extra.fps);
});
this.closeDrawer_();
}

2
src/js/devtools/DrawingTestPlayer.js
View File

@ -46,7 +46,7 @@
ns.DrawingTestPlayer.prototype.createPiskel_ = function (width, height) {
var descriptor = new pskl.model.piskel.Descriptor('TestPiskel', '');
var piskel = new pskl.model.Piskel(width, height, descriptor);
var piskel = new pskl.model.Piskel(width, height, 12, descriptor);
var layer = new pskl.model.Layer('Layer 1');
var frame = new pskl.model.Frame(width, height);

19
src/js/model/Piskel.js
View File

@ -8,21 +8,14 @@
* @param {String} name
* @param {String} description
*/
ns.Piskel = function (width, height, descriptor) {
ns.Piskel = function (width, height, fps, descriptor) {
if (width && height && descriptor) {
/** @type {Array} */
this.layers = [];
/** @type {Number} */
this.width = width;
/** @type {Number} */
this.height = height;
this.descriptor = descriptor;
/** @type {String} */
this.savePath = null;
this.fps = fps;
} else {
throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ',');
@ -35,11 +28,11 @@
* @param {Array<pskl.model.Layer>} layers
* @return {pskl.model.Piskel}
*/
ns.Piskel.fromLayers = function (layers, descriptor) {
ns.Piskel.fromLayers = function (layers, fps, descriptor) {
var piskel = null;
if (layers.length > 0 && layers[0].size() > 0) {
var sampleFrame = layers[0].getFrameAt(0);
piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), descriptor);
piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), fps, descriptor);
layers.forEach(piskel.addLayer.bind(piskel));
} else {
throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument';
@ -59,6 +52,10 @@
return this.width;
};
ns.Piskel.prototype.getFPS = function () {
return this.fps;
};
ns.Piskel.prototype.getLayers = function () {
return this.layers;
};

6
src/js/service/BackupService.js
View File

@ -26,7 +26,6 @@
var info = {
name : descriptor.name,
description : descriptor.info,
fps : this.piskelController.getFPS(),
date : Date.now(),
hash : hash
};
@ -47,16 +46,11 @@
};
ns.BackupService.prototype.load = function() {
var previousPiskel = window.localStorage.getItem('bkp.prev.piskel');
var previousInfo = window.localStorage.getItem('bkp.prev.info');
previousPiskel = JSON.parse(previousPiskel);
previousInfo = JSON.parse(previousInfo);
pskl.utils.serialization.Deserializer.deserialize(previousPiskel, function (piskel) {
pskl.app.piskelController.setPiskel(piskel);
pskl.app.previewController.setFPS(previousInfo.fps);
});
};

3
src/js/service/FileDropperService.js
View File

@ -52,10 +52,9 @@
pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, palette.id);
};
ns.FileDropperService.prototype.onPiskelFileLoaded_ = function (piskel, extra) {
ns.FileDropperService.prototype.onPiskelFileLoaded_ = function (piskel) {
if (window.confirm('This will replace your current animation')) {
pskl.app.piskelController.setPiskel(piskel);
pskl.app.previewController.setFPS(extra.fps);
}
};

2
src/js/service/HistoryService.js
View File

@ -51,6 +51,7 @@
action : action,
frameIndex : action.state ? action.state.frameIndex : this.piskelController.currentFrameIndex,
layerIndex : action.state ? action.state.layerIndex : this.piskelController.currentLayerIndex,
fps : this.piskelController.getFPS(),
uuid: pskl.utils.Uuid.generate()
};
@ -182,6 +183,7 @@
ns.HistoryService.prototype.setupState = function (state) {
this.piskelController.setCurrentFrameIndex(state.frameIndex);
this.piskelController.setCurrentLayerIndex(state.layerIndex);
this.piskelController.setFPS(state.fps);
};
ns.HistoryService.prototype.replayState = function (state) {

7
src/js/service/ImportService.js
View File

@ -4,13 +4,11 @@
/**
* Image an animation import service supporting the import dialog.
* @param {!PiskelController} piskelController
* @param {!PreviewController} previewController
* @constructor
*/
ns.ImportService =
function (piskelController, previewController) {
function (piskelController) {
this.piskelController_ = piskelController;
this.previewController_ = previewController;
};
/**
@ -101,10 +99,9 @@
var frames = this.createFramesFromImages_(images, frameSizeX, frameSizeY, smoothing);
var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', '');
var piskel = pskl.model.Piskel.fromLayers([layer], descriptor);
var piskel = pskl.model.Piskel.fromLayers([layer], Constants.DEFAULT.FPS, descriptor);
this.piskelController_.setPiskel(piskel);
this.previewController_.setFPS(Constants.DEFAULT.FPS);
};
/**

3
src/js/service/storage/DesktopStorageService.js
View File

@ -37,11 +37,10 @@
ns.DesktopStorageService.prototype.load = function (savePath) {
pskl.utils.FileUtilsDesktop.readFile(savePath).then(function (content) {
pskl.utils.PiskelFileUtils.decodePiskelFile(content, function (piskel, extra) {
pskl.utils.PiskelFileUtils.decodePiskelFile(content, function (piskel) {
// store save path so we can re-save without opening the save dialog
piskel.savePath = savePath;
pskl.app.piskelController.setPiskel(piskel);
pskl.app.previewController.setFPS(extra.fps);
});
});
};

3
src/js/service/storage/LocalStorageService.js
View File

@ -36,9 +36,8 @@
var piskelString = this.getPiskel(name);
var key = this.getKey_(name);
pskl.utils.serialization.Deserializer.deserialize(JSON.parse(piskelString), function (piskel, extra) {
pskl.utils.serialization.Deserializer.deserialize(JSON.parse(piskelString), function (piskel) {
pskl.app.piskelController.setPiskel(piskel);
pskl.app.previewController.setFPS(extra.fps);
});
};

10
src/js/utils/PiskelFileUtils.js
View File

@ -5,7 +5,7 @@
/**
* Load a piskel from a piskel file.
* After deserialization is successful, the provided success callback will be called.
* Success callback is expected to handle 3 arguments : (piskel:Piskel, descriptor:PiskelDescriptor, fps:Number)
* Success callback is expected to receive a single Piskel object argument
* @param {File} file the .piskel file to load
* @param {Function} onSuccess Called if the deserialization of the piskel is successful
* @param {Function} onError NOT USED YET
@ -15,13 +15,13 @@
var rawPiskel = pskl.utils.Base64.toText(content);
ns.PiskelFileUtils.decodePiskelFile(
rawPiskel,
function (piskel, descriptor, fps) {
function (piskel) {
// if using Node-Webkit, store the savePath on load
// Note: the 'path' property is unique to Node-Webkit, and holds the full path
if (pskl.utils.Environment.detectNodeWebkit()) {
piskel.savePath = file.path;
}
onSuccess(piskel, descriptor, fps);
onSuccess(piskel);
},
onError
);
@ -30,11 +30,9 @@
decodePiskelFile : function (rawPiskel, onSuccess, onError) {
var serializedPiskel = JSON.parse(rawPiskel);
var fps = serializedPiskel.piskel.fps;
var piskel = serializedPiskel.piskel;
var descriptor = new pskl.model.piskel.Descriptor(piskel.name, piskel.description, true);
pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel) {
onSuccess(piskel, descriptor, fps);
onSuccess(piskel);
});
}
};

4
src/js/utils/serialization/Deserializer.js
View File

@ -28,7 +28,7 @@
var description = piskelData.description || '';
var descriptor = new pskl.model.piskel.Descriptor(name, description);
this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, piskelData.fps, descriptor);
this.layersToLoad_ = piskelData.layers.length;
if (piskelData.expanded) {
@ -85,7 +85,7 @@
this.layers_.forEach(function (layer) {
this.piskel_.addLayer(layer);
}.bind(this));
this.callback_(this.piskel_, {fps: this.data_.piskel.fps});
this.callback_(this.piskel_);
}
};
})();

4
src/js/utils/serialization/arraybuffer/ArrayBufferDeserializer.js
View File

@ -90,7 +90,7 @@
}
var descriptor = new pskl.model.piskel.Descriptor(descriptorName, descriptorDescription);
var piskel = new pskl.model.Piskel(width, height, descriptor);
var piskel = new pskl.model.Piskel(width, height, fps, descriptor);
var loadedLayers = 0;
var loadLayerImage = function(layer, cb) {
@ -103,7 +103,7 @@
loadedLayers++;
if (loadedLayers == layerCount) {
cb(piskel, {fps: fps});
cb(piskel);
}
};
image.src = layer.dataUri;

2
src/js/utils/serialization/backward/Deserializer_v0.js
View File

@ -14,6 +14,6 @@
var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
this.callback_(pskl.model.Piskel.fromLayers([layer], descriptor), {fps: Constants.DEFAULTS.FPS});
this.callback_(pskl.model.Piskel.fromLayers([layer], Constants.DEFAULTS.FPS, descriptor));
};
})();

4
src/js/utils/serialization/backward/Deserializer_v1.js
View File

@ -9,14 +9,14 @@
ns.Deserializer_v1.prototype.deserialize = function () {
var piskelData = this.data_.piskel;
var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height, Constants.DEFAULTS.FPS, descriptor);
piskelData.layers.forEach(function (serializedLayer) {
var layer = this.deserializeLayer(serializedLayer);
piskel.addLayer(layer);
}.bind(this));
this.callback_(piskel, {fps: Constants.DEFAULTS.FPS});
this.callback_(piskel);
};
ns.Deserializer_v1.prototype.deserializeLayer = function (layerString) {

2
test/js/service/HistoryServiceTest.js
View File

@ -22,7 +22,7 @@ describe("History Service suite", function() {
};
var createMockHistoryService = function () {
var mockPiskelController = { getPiskel : function () {} };
var mockPiskelController = { getPiskel : function () {}, getFPS : function () { return 12; } };
var mockShortcutService = {
registerShortcuts : function () {},
registerShortcut : function () {}

2
test/js/utils/serialization/SerializerTest.js
View File

@ -13,7 +13,7 @@ describe("Serialization/Deserialization test", function() {
it("serializes layer opacity", function(done) {
var descriptor = new pskl.model.piskel.Descriptor('piskelName', 'piskelDesc');
var piskel = new pskl.model.Piskel(1, 1, descriptor);
var piskel = new pskl.model.Piskel(1, 1, 1, descriptor);
piskel.addLayer(new pskl.model.Layer('layer1'));
piskel.addLayer(new pskl.model.Layer('layer2'));