Skip to content

Commit

Permalink
Added resize canvas panel
Browse files Browse the repository at this point in the history
  • Loading branch information
juliandescottes committed Dec 24, 2013
1 parent 0d23372 commit 9fc971f
Show file tree
Hide file tree
Showing 10 changed files with 149 additions and 51 deletions.
62 changes: 59 additions & 3 deletions css/settings.css
Expand Up @@ -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;
Expand Down Expand Up @@ -134,7 +187,8 @@
}

/* Import panel */
.import-section {
.import-section,
.resize-section {
margin: 15px 0;
}

Expand All @@ -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;
}

Expand Down
46 changes: 0 additions & 46 deletions css/tools.css
Expand Up @@ -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;
}

Binary file added img/resize-icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions index.html
Expand Up @@ -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>
Expand Down
58 changes: 58 additions & 0 deletions 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);
};
})();
4 changes: 4 additions & 0 deletions js/controller/settings/SettingsController.js
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions piskel-script-list.js
Expand Up @@ -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",
Expand Down
7 changes: 7 additions & 0 deletions templates/settings.html
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions templates/settings/import.html
Expand Up @@ -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>
Expand Down
17 changes: 17 additions & 0 deletions 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>

0 comments on commit 9fc971f

Please sign in to comment.