Added resize canvas panel

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;
 }
 

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;
-}
 

index.html

@@ -52,6 +52,7 @@
         <div class="drawer vertical-centerer">
           <div class="drawer-content" id="drawer-container">
             <iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>

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);
+  };
+})();

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

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",

templates/settings.html

@@ -13,6 +13,13 @@
     rel="tooltip" data-placement="left">
   </div>
 
+  <div
+    data-setting="resize"
+    class="tool-icon resize-icon"
+    title="Resize"
+    rel="tooltip" data-placement="left">
+  </div>
+
   <div
     data-setting="import"
     class="tool-icon import-icon"

templates/settings/import.html

@@ -18,8 +18,8 @@
       </div>
       <div class="import-section import-section-disabled">
         <span class="import-section-title  import-section-title-small">Size :</span>
-        <input type="text" disabled="disabled" class="textfield import-resize-field" name="resize-width"/>x
+        <input type="text" disabled="disabled" class="textfield import-size-field" name="resize-width"/>x
-        <input type="text" disabled="disabled" class="textfield import-resize-field" name="resize-height"/>
+        <input type="text" disabled="disabled" class="textfield import-size-field" name="resize-height"/>
       </div>
       <div class="import-section import-section-disabled">
         <span class="import-section-title">Smooth resize :</span>

templates/settings/resize.html

@@ -0,0 +1,17 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Resize drawing area
+  </div>
+  <div class="settings-item">
+    <form action="" method="POST" name="resize-form">
+      <span class="resize-warning-message">Existing frames will be cropped !</span>
+      <div class="resize-section">
+        <span class="resize-section-title  resize-section-title-small">Size :</span>
+        <input type="text" class="textfield resize-size-field" name="resize-width"/>x
+        <input type="text" class="textfield resize-size-field" name="resize-height"/>
+      </div>
+      <input type="submit" class="button button-primary resize-button" value="Resize" />
+      <input type="button" class="button resize-cancel-button" value="Cancel" />
+    </form>
+  </div>
+</div>