diff --git a/css/settings.css b/css/settings.css index 171579c9..41bf99ce 100644 --- a/css/settings.css +++ b/css/settings.css @@ -21,6 +21,59 @@ margin-right: 0; } +/* + * Settings icons + */ + +.tool-icon.gallery-icon { + background-image: url(../img/gallery.png); + background-position: 3px 3px; + background-size: 39px 39px; +} + +.tool-icon.resize-icon { + background-image: url(../img/resize-icon.png); + background-position: 10px 10px; + background-size: 26px 26px; +} + +.tool-icon.save-icon { + background-image: url(../img/save.png); + background-position: 6px 6px; + background-size: 36px 36px; +} + +.tool-icon.gear-icon { + background-image: url(../img/gear.png); + background-position: 6px 7px; + background-size: 32px 32px; +} + +.tool-icon.upload-cloud-icon { + background-image: url(../img/cloud_export.png); + background-position: 4px 0px; + background-size: 36px 36px; + position: relative; +} + +.tool-icon.import-icon { + background-image: url(../img/import-icon.png); + background-position: 10px 5px; + background-size: 26px; + position: relative; +} + +.upload-cloud-icon .label { + position: absolute; + left: 0; + bottom: 4px; + right: 0; + font-size: 11px; + text-transform: uppercase; + color: #fff; + text-align: center; +} + .drawer-content { overflow: hidden; background-color: #444; @@ -134,7 +187,8 @@ } /* Import panel */ -.import-section { +.import-section, +.resize-section { margin: 15px 0; } @@ -158,13 +212,15 @@ border-radius: 3px; } -.import-resize-field { +.import-size-field, +.resize-size-field { width: 50px; margin-right: 8px; text-align: right; } -.import-resize-field:nth-of-type(2) { +.import-size-field:nth-of-type(2), +.resize-size-field:nth-of-type(2) { margin-left: 5px; } diff --git a/css/tools.css b/css/tools.css index fee6ca36..28242a37 100644 --- a/css/tools.css +++ b/css/tools.css @@ -187,50 +187,4 @@ ); } -/* - * Framesheet level actions: - */ - -.tool-icon.gallery-icon { - background-image: url(../img/gallery.png); - background-position: 3px 3px; - background-size: 39px 39px; -} - -.tool-icon.save-icon { - background-image: url(../img/save.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.gear-icon { - background-image: url(../img/gear.png); - background-position: 6px 7px; - background-size: 32px 32px; -} - -.tool-icon.upload-cloud-icon { - background-image: url(../img/cloud_export.png); - background-position: 4px 0px; - background-size: 36px 36px; - position: relative; -} - -.tool-icon.import-icon { - background-image: url(../img/import-icon.png); - background-position: 10px 5px; - background-size: 26px; - position: relative; -} - -.upload-cloud-icon .label { - position: absolute; - left: 0; - bottom: 4px; - right: 0; - font-size: 11px; - text-transform: uppercase; - color: #fff; - text-align: center; -} diff --git a/img/resize-icon.png b/img/resize-icon.png new file mode 100644 index 00000000..dcfb6520 Binary files /dev/null and b/img/resize-icon.png differ diff --git a/index.html b/index.html index 9550a6b8..08bbd11b 100644 --- a/index.html +++ b/index.html @@ -52,6 +52,7 @@
+ diff --git a/js/controller/PiskelController.js b/js/controller/PiskelController.js index 25028ce7..ab44d197 100644 --- a/js/controller/PiskelController.js +++ b/js/controller/PiskelController.js @@ -98,7 +98,7 @@ l.removeFrameAt(index); }); // Current frame index is impacted if the removed frame was before the current frame - if (this.currentFrameIndex >= index) { + if (this.currentFrameIndex >= index && this.currentFrameIndex > 0) { this.setCurrentFrameIndex(this.currentFrameIndex - 1); } diff --git a/js/controller/settings/ResizeController.js b/js/controller/settings/ResizeController.js new file mode 100644 index 00000000..7ed4cec9 --- /dev/null +++ b/js/controller/settings/ResizeController.js @@ -0,0 +1,58 @@ +(function () { + var ns = $.namespace('pskl.controller.settings'); + + ns.ResizeController = function (piskelController) { + this.piskelController = piskelController; + }; + + ns.ResizeController.prototype.init = function () { + this.resizeWidth = $('[name=resize-width]'); + this.resizeHeight = $('[name=resize-height]'); + + this.resizeWidth.val(this.piskelController.getWidth()); + this.resizeHeight.val(this.piskelController.getHeight()); + + this.cancelButton = $('.resize-cancel-button'); + this.cancelButton.click(this.onCancelButtonClicked_.bind(this)); + + this.resizeForm = $("[name=resize-form]"); + this.resizeForm.submit(this.onResizeFormSubmit_.bind(this)); + }; + + ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) { + evt.originalEvent.preventDefault(); + + var width = parseInt(this.resizeWidth.val(), 10); + var height = parseInt(this.resizeHeight.val(), 10); + + var layers = []; + var fromLayers = this.piskelController.getLayers(); + for (var i = 0 ; i < fromLayers.length ; i++) { + var frames = []; + var fromFrames = fromLayers[i].getFrames(); + for (var j = 0 ; j < fromFrames.length ; j++) { + var frame = new pskl.model.Frame(width, height); + this.copyFromFrameToFrame(fromFrames[j], frame); + frames.push(frame); + } + var layer = pskl.model.Layer.fromFrames(fromLayers[i].getName(), frames); + layers.push(layer); + } + + var piskel = pskl.model.Piskel.fromLayers(layers, this.piskelController.piskel.getDescriptor()); + pskl.app.piskelController.setPiskel(piskel); + $.publish(Events.CLOSE_SETTINGS_DRAWER); + }; + + ns.ResizeController.prototype.copyFromFrameToFrame = function (from, to) { + from.forEachPixel(function (color, x, y) { + if (x < to.getWidth() && y < to.getHeight()) { + to.setPixel(x, y, color); + } + }); + }; + + ns.ResizeController.prototype.onCancelButtonClicked_ = function (evt) { + $.publish(Events.CLOSE_SETTINGS_DRAWER); + }; +})(); \ No newline at end of file diff --git a/js/controller/settings/SettingsController.js b/js/controller/settings/SettingsController.js index 10db6890..1f0fe70d 100644 --- a/js/controller/settings/SettingsController.js +++ b/js/controller/settings/SettingsController.js @@ -6,6 +6,10 @@ template : 'templates/settings/application.html', controller : ns.ApplicationSettingsController }, + 'resize' : { + template : 'templates/settings/resize.html', + controller : ns.ResizeController + }, 'gif' : { template : 'templates/settings/export-gif.html', controller : ns.GifExportController diff --git a/js/drawingtools/selectiontools/BaseSelect.js b/js/drawingtools/selectiontools/BaseSelect.js index f6475699..b5ca0da1 100644 --- a/js/drawingtools/selectiontools/BaseSelect.js +++ b/js/drawingtools/selectiontools/BaseSelect.js @@ -92,6 +92,10 @@ } }; + ns.BaseSelect.prototype.hideHighlightedPixel = function() { + // there is no highlighted pixel for selection tools, do nothing + }; + /** * For each pixel in the selection draw it in white transparent on the tool overlay * @protected diff --git a/piskel-script-list.js b/piskel-script-list.js index 4dbd1bfb..468b7d77 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -69,6 +69,7 @@ exports.scripts = [ // Settings sub-controllers "js/controller/settings/ApplicationSettingsController.js", + "js/controller/settings/ResizeController.js", "js/controller/settings/GifExportController.js", "js/controller/settings/SaveController.js", "js/controller/settings/ImportController.js", diff --git a/templates/settings.html b/templates/settings.html index 72c80ccd..80ac056c 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -13,6 +13,13 @@ rel="tooltip" data-placement="left">
+
+
+
Size : - x - + x +
Smooth resize : diff --git a/templates/settings/resize.html b/templates/settings/resize.html new file mode 100644 index 00000000..008c3875 --- /dev/null +++ b/templates/settings/resize.html @@ -0,0 +1,17 @@ +
+
+ Resize drawing area +
+
+
+ Existing frames will be cropped ! +
+ Size : + x + +
+ + +
+
+
\ No newline at end of file