diff --git a/css/forms.css b/css/forms.css index 8cc1dd53..96873c88 100644 --- a/css/forms.css +++ b/css/forms.css @@ -1,3 +1,7 @@ +.row { + display: block; +} + .textfield { background : black; border : 1px solid #888; diff --git a/css/settings.css b/css/settings.css index 9d147179..648cce73 100644 --- a/css/settings.css +++ b/css/settings.css @@ -51,6 +51,10 @@ text-shadow: 1px 1px #000; } +.settings-section .button { + margin: 0; +} + .settings-title { margin-top: 20px; margin-bottom: 10px; @@ -61,6 +65,10 @@ .settings-item {} +.settings-form-section { + margin-bottom: 10px; +} + .background-picker-wrapper { overflow: hidden; padding: 10px 5px 20px 5px; diff --git a/js/app.js b/js/app.js index f9d43a46..ea3c3ea0 100644 --- a/js/app.js +++ b/js/app.js @@ -14,8 +14,9 @@ this.shortcutService.init(); var size = this.readSizeFromURL_(); - var piskel = new pskl.model.Piskel(size.width, size.height); - piskel.setDescriptor("New Piskel", "Some text ..."); + + var descriptor = new pskl.model.piskel.Descriptor('New Piskel', ''); + var piskel = new pskl.model.Piskel(size.width, size.height, descriptor); var layer = new pskl.model.Layer("Layer 1"); var frame = new pskl.model.Frame(size.width, size.height); @@ -65,7 +66,6 @@ this.imageUploadService = new pskl.service.ImageUploadService(); this.imageUploadService.init(); - this.cheatsheetService = new pskl.service.keyboard.CheatsheetService(); this.cheatsheetService.init(); @@ -74,7 +74,7 @@ drawingLoop.addCallback(this.render, this); drawingLoop.start(); - this.initBootstrapTooltips_(); + this.initTooltips_(); /** * True when piskel is running in static mode (no back end needed). @@ -110,7 +110,7 @@ } }, - initBootstrapTooltips_ : function () { + initTooltips_ : function () { $('body').tooltip({ selector: '[rel=tooltip]' }); @@ -123,8 +123,8 @@ }, readSizeFromURL_ : function () { - var sizeParam = this.readUrlParameter_("size"), - size; + var sizeParam = this.readUrlParameter_("size"); + var size; // parameter expected as size=64x48 => size=widthxheight var parts = sizeParam.split("x"); if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) { @@ -149,13 +149,12 @@ }, readUrlParameter_ : function (paramName) { - var searchString = window.location.search.substring(1), - i, val, params = searchString.split("&"); - - for (i = 0; i < params.length; i++) { - val = params[i].split("="); - if (val[0] == paramName) { - return window.unescape(val[1]); + var searchString = window.location.search.substring(1); + var params = searchString.split("&"); + for (var i = 0; i < params.length; i++) { + var param = params[i].split("="); + if (param[0] == paramName) { + return window.unescape(param[1]); } } return ""; diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js index 3c94eaa5..0186adfe 100644 --- a/js/controller/settings/ImportController.js +++ b/js/controller/settings/ImportController.js @@ -154,7 +154,9 @@ var frame = pskl.utils.FrameUtils.createFromImage(image); var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]); - var piskel = pskl.model.Piskel.fromLayers([layer]); + + var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', ''); + var piskel = pskl.model.Piskel.fromLayers([layer], descriptor); pskl.app.piskelController.setPiskel(piskel); pskl.app.animationController.setFPS(Constants.DEFAULT.FPS); diff --git a/js/controller/settings/SaveController.js b/js/controller/settings/SaveController.js index 11b330cb..17ba844d 100644 --- a/js/controller/settings/SaveController.js +++ b/js/controller/settings/SaveController.js @@ -1,5 +1,5 @@ (function () { - var ns = $.namespace("pskl.controller.settings"); + var ns = $.namespace('pskl.controller.settings'); ns.SaveController = function (piskelController) { this.piskelController = piskelController; @@ -9,10 +9,12 @@ * @public */ ns.SaveController.prototype.init = function () { - this.titleInput = document.getElementById("save-title"); - this.descriptionInput = document.getElementById("save-description"); + this.titleInput = $('#save-title'); + this.descriptionInput = $('#save-description'); + this.saveForm = $('form[name=save-form]'); - this.titleInput.value = this.piskelController.piskel.getDescriptor().name; - this.descriptionInput.value = this.piskelController.piskel.getDescriptor().description; + var descriptor = this.piskelController.piskel.getDescriptor(); + this.titleInput.val(descriptor.name); + this.descriptionInput.val(descriptor.description); }; })(); \ No newline at end of file diff --git a/js/model/Piskel.js b/js/model/Piskel.js index 11f520d7..d87d05fe 100644 --- a/js/model/Piskel.js +++ b/js/model/Piskel.js @@ -8,8 +8,8 @@ * @param {String} name * @param {String} description */ - ns.Piskel = function (width, height) { - if (width && height) { + ns.Piskel = function (width, height, descriptor) { + if (width && height && descriptor) { /** @type {Array} */ this.layers = []; @@ -19,7 +19,7 @@ /** @type {Number} */ this.height = height; - this.descriptor = null; + this.descriptor = descriptor; } else { throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ","); } @@ -31,11 +31,11 @@ * @param {Array} layers * @return {pskl.model.Piskel} */ - ns.Piskel.fromLayers = function (layers) { + ns.Piskel.fromLayers = function (layers, descriptor) { var piskel = null; if (layers.length > 0 && layers[0].length() > 0) { var sampleFrame = layers[0].getFrameAt(0); - piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight()); + piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), descriptor); layers.forEach(piskel.addLayer.bind(piskel)); } else { throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument'; @@ -104,11 +104,8 @@ return this.descriptor; }; - ns.Piskel.prototype.setDescriptor = function (name, desc) { - this.descriptor = { - name : name, - description : desc - }; + ns.Piskel.prototype.setDescriptor = function (name, description) { + this.descriptor = new pskl.model.piskel.Descriptor(name, description); }; })(); \ No newline at end of file diff --git a/js/model/PiskelDescriptor.js b/js/model/PiskelDescriptor.js deleted file mode 100644 index e69de29b..00000000 diff --git a/js/model/piskel/Descriptor.js b/js/model/piskel/Descriptor.js new file mode 100644 index 00000000..07ed40d4 --- /dev/null +++ b/js/model/piskel/Descriptor.js @@ -0,0 +1,8 @@ +(function () { + var ns = $.namespace('pskl.model.piskel'); + + ns.Descriptor = function (name, description) { + this.name = name; + this.description = description; + }; +})(); \ No newline at end of file diff --git a/js/rendering/DrawingLoop.js b/js/rendering/DrawingLoop.js index e1816011..d746f684 100644 --- a/js/rendering/DrawingLoop.js +++ b/js/rendering/DrawingLoop.js @@ -6,6 +6,7 @@ this.isRunning = false; this.previousTime = 0; this.callbacks = []; + this.i = 0; }; ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) { @@ -33,7 +34,10 @@ ns.DrawingLoop.prototype.loop_ = function () { var currentTime = Date.now(); var delta = currentTime - this.previousTime; - this.executeCallbacks_(delta); + this.i++; + if(this.i%2 === 0) { + this.executeCallbacks_(delta); + } this.previousTime = currentTime; this.requestAnimationFrame.call(window, this.loop_.bind(this)); }; diff --git a/js/service/HistoryService.js b/js/service/HistoryService.js index bfc6d03b..a9067ac5 100644 --- a/js/service/HistoryService.js +++ b/js/service/HistoryService.js @@ -2,11 +2,13 @@ var ns = $.namespace("pskl.service"); ns.HistoryService = function (piskelController) { this.piskelController = piskelController; + this.saveState__b = this.saveState.bind(this); }; ns.HistoryService.prototype.init = function () { - $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this)); + $.subscribe(Events.PISKEL_RESET, this.saveState__b); + $.subscribe(Events.TOOL_RELEASED, this.saveState__b); pskl.app.shortcutService.addShortcut('ctrl+Z', this.undo.bind(this)); pskl.app.shortcutService.addShortcut('ctrl+Y', this.redo.bind(this)); @@ -18,12 +20,16 @@ ns.HistoryService.prototype.undo = function () { this.piskelController.getCurrentFrame().loadPreviousState(); + $.unsubscribe(Events.PISKEL_RESET, this.saveState__b); $.publish(Events.PISKEL_RESET); + $.subscribe(Events.PISKEL_RESET, this.saveState__b); }; ns.HistoryService.prototype.redo = function () { this.piskelController.getCurrentFrame().loadNextState(); + $.unsubscribe(Events.PISKEL_RESET, this.saveState__b); $.publish(Events.PISKEL_RESET); + $.subscribe(Events.PISKEL_RESET, this.saveState__b); }; })(); \ No newline at end of file diff --git a/js/service/LocalStorageService.js b/js/service/LocalStorageService.js index 783211c3..c68cee38 100644 --- a/js/service/LocalStorageService.js +++ b/js/service/LocalStorageService.js @@ -45,6 +45,7 @@ */ ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() { var framesheet = JSON.parse(window.localStorage.snapShot); + pskl.utils.serialization.Deserializer.deserialize(framesheet, function (piskel) { pskl.app.piskelController.setPiskel(piskel); }); diff --git a/js/service/keyboard/ShortcutService.js b/js/service/keyboard/ShortcutService.js index 07419af7..648abc6c 100644 --- a/js/service/keyboard/ShortcutService.js +++ b/js/service/keyboard/ShortcutService.js @@ -54,28 +54,36 @@ * @private */ ns.ShortcutService.prototype.onKeyUp_ = function(evt) { - // jquery names FTW ... - var keycode = evt.which; - var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode); + if (!this.isInInput_(evt)) { + // jquery names FTW ... + var keycode = evt.which; + var targetTagName = evt.target.nodeName.toUpperCase(); + var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode); - var keyShortcuts = this.shortcuts_[charkey]; - if(keyShortcuts) { - var cb; - if (this.isCtrlKeyPressed_(evt)) { - cb = keyShortcuts.ctrl; - } else if (this.isShiftKeyPressed_(evt)) { - cb = keyShortcuts.shift; - } else { - cb = keyShortcuts.normal; - } + var keyShortcuts = this.shortcuts_[charkey]; + if(keyShortcuts) { + var cb; + if (this.isCtrlKeyPressed_(evt)) { + cb = keyShortcuts.ctrl; + } else if (this.isShiftKeyPressed_(evt)) { + cb = keyShortcuts.shift; + } else { + cb = keyShortcuts.normal; + } - if(cb) { - cb(charkey); - evt.preventDefault(); + if(cb) { + cb(charkey); + evt.preventDefault(); + } } } }; + ns.ShortcutService.prototype.isInInput_ = function (evt) { + var targetTagName = evt.target.nodeName.toUpperCase(); + return targetTagName === 'INPUT' || targetTagName === 'TEXTAREA'; + }; + ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) { return this.isMac_() ? evt.metaKey : evt.ctrlKey; }; diff --git a/js/utils/serialization/Deserializer.js b/js/utils/serialization/Deserializer.js index 118538c6..799b1f09 100644 --- a/js/utils/serialization/Deserializer.js +++ b/js/utils/serialization/Deserializer.js @@ -23,7 +23,9 @@ ns.Deserializer.prototype.deserialize = function () { var data = this.data_; var piskelData = data.piskel; - this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height); + + var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', ''); + this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor); this.layersToLoad_ = piskelData.layers.length; diff --git a/piskel-script-list.js b/piskel-script-list.js index cd7651f5..aa986e27 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -37,6 +37,7 @@ exports.scripts = [ // Models "js/model/Frame.js", "js/model/Layer.js", + "js/model/piskel/Descriptor.js", "js/model/Piskel.js", // Selection diff --git a/templates/settings/save.html b/templates/settings/save.html index 1e979ff7..6f933314 100644 --- a/templates/settings/save.html +++ b/templates/settings/save.html @@ -2,15 +2,20 @@
Save
-
- +
+ +
- -
- +
+ +
- - +
+ +
+
\ No newline at end of file