mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #152 from juliandescottes/feature-resize-panel

Browse Source 
Feature resize panel
This commit is contained in:
Julian Descottes 2014-02-09 21:14:42 +01:00
commit c105619605
12 changed files with 154 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
css/settings.css
View File

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

46
css/tools.css
View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 506 B

1
index.html
View File

@ -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>

2
js/controller/PiskelController.js
View File

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

58
js/controller/settings/ResizeController.js Normal file
View 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);
};
})();

4
js/controller/settings/SettingsController.js
View File

@ -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

4
js/drawingtools/selectiontools/BaseSelect.js
View File

@ -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

1
piskel-script-list.js
View File

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

7
templates/settings.html
View File

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

4
templates/settings/import.html
View File

@ -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
View 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>