mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Added resize canvas panel
This commit is contained in:
juliandescottes
parent
0d2337221c
commit
9fc971f40b
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
BIN
img/resize-icon.png
Normal file
BIN
img/resize-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 506 B |
@ -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>
|
||||
|
||||
58
js/controller/settings/ResizeController.js
Normal file
58
js/controller/settings/ResizeController.js
Normal file
@ -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
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
17
templates/settings/resize.html
Normal file
17
templates/settings/resize.html
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user