Permalink
Browse files

Added resize canvas panel

  • Loading branch information...
1 parent 0d23372 commit 9fc971f40b8c109f6890aed098e822d9d3e3daea @juliandescottes juliandescottes committed Dec 24, 2013
View
@@ -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;
}
View
@@ -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;
-}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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>
@@ -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);
+ };
+})();
@@ -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
View
@@ -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",
View
@@ -14,6 +14,13 @@
</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"
title="Import an existing picture"
@@ -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-resize-field" name="resize-height"/>
+ <input type="text" disabled="disabled" class="textfield import-size-field" name="resize-width"/>x
+ <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>
@@ -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>

0 comments on commit 9fc971f

Please sign in to comment.