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

enhancement : resize panel

Browse Source
This commit is contained in:
juliandescottes 2015-02-15 23:41:58 +01:00
parent 561d016a45
commit 84f366e7e4
3 changed files with 108 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/css/settings-resize.css
View File

@ -5,4 +5,29 @@
.resize-content-checkbox {
margin-left: 0;
}
.resize-origin-container {
overflow: hidden;
position: relative;
width: 150px;
margin-top: 5px;
}
.resize-origin-option {
float: left;
box-sizing: border-box;
margin: 0 5px 5px 0;
padding-top:16px;
width: 45px;
height: 45px;
border : 1px solid #888;
text-align: center;
cursor: pointer;
}
.resize-origin-option.selected {
border-color: gold;
padding-top:14px;
border-width: 3px;
}

73
src/js/controller/settings/ResizeController.js
View File

@ -1,8 +1,21 @@
(function () {
var ns = $.namespace('pskl.controller.settings');
var ORIGIN = {
TOPLEFT : 'TOPLEFT',
TOP : 'TOP',
TOPRIGHT : 'TOPRIGHT',
MIDDLELEFT : 'MIDDLELEFT',
MIDDLE : 'MIDDLE',
MIDDLERIGHT : 'MIDDLERIGHT',
BOTTOMLEFT : 'BOTTOMLEFT',
BOTTOM : 'BOTTOM',
BOTTOMRIGHT : 'BOTTOMRIGHT',
};
ns.ResizeController = function (piskelController) {
this.piskelController = piskelController;
this.origin = ORIGIN.TOPLEFT;
};
ns.ResizeController.prototype.init = function () {
@ -15,12 +28,38 @@
this.cancelButton = $('.resize-cancel-button');
this.cancelButton.click(this.onCancelButtonClicked_.bind(this));
this.resizeForm = $("[name=resize-form]");
this.resizeForm = $('[name=resize-form]');
this.resizeForm.submit(this.onResizeFormSubmit_.bind(this));
this.resizeOrigin = document.querySelector('.resize-origin-container');
this.resizeOrigin.addEventListener('click', this.onResizeOriginClick_.bind(this));
this.setOrigin_(ORIGIN.TOPLEFT);
this.resizeContentCheckbox = $(".resize-content-checkbox");
};
ns.ResizeController.prototype.onResizeOriginClick_ = function (evt) {
var target = evt.target;
var origin = target.dataset.origin;
if (origin && ORIGIN[origin]) {
origin = origin.toUpperCase();
this.setOrigin_(origin);
}
};
ns.ResizeController.prototype.setOrigin_ = function (origin) {
this.origin = origin;
var previous = document.querySelector('.resize-origin-option.selected');
if (previous) {
previous.classList.remove('selected');
}
var selected = document.querySelector('.resize-origin-option[data-origin="' + origin + '"]');
if (selected) {
selected.classList.add('selected');
}
};
ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) {
evt.originalEvent.preventDefault();
@ -51,15 +90,41 @@
} else {
resizedFrame = new pskl.model.Frame(width, height);
frame.forEachPixel(function (color, x, y) {
if (x < resizedFrame.getWidth() && y < resizedFrame.getHeight()) {
resizedFrame.setPixel(x, y, color);
var translated = this.translateCoordinates_(x, y, frame, resizedFrame);
if (resizedFrame.containsPixel(translated.x, translated.y)) {
resizedFrame.setPixel(translated.x, translated.y, color);
}
});
}.bind(this));
}
return resizedFrame;
};
ns.ResizeController.prototype.translateCoordinates_ = function (x, y, frame, resizedFrame) {
var translatedX, translatedY;
if (this.origin.indexOf('LEFT') != -1) {
translatedX = x;
} else if (this.origin.indexOf('RIGHT') != -1) {
translatedX = x - (frame.width - resizedFrame.width);
} else {
translatedX = x - Math.round((frame.width - resizedFrame.width)/2);
}
if (this.origin.indexOf('TOP') != -1) {
translatedY = y;
} else if (this.origin.indexOf('BOTTOM') != -1) {
translatedY = y - (frame.height - resizedFrame.height);
} else {
translatedY = y - Math.round((frame.height - resizedFrame.height)/2);
}
return {
x : translatedX,
y : translatedY
};
};
ns.ResizeController.prototype.isResizeContentEnabled_ = function () {
return !!this.resizeContentCheckbox.prop('checked');
};

14
src/templates/settings/resize.html
View File

@ -14,6 +14,20 @@
<input type="text" class="textfield resize-size-field" name="resize-height"/>
<span>px</span>
</div>
<div class="resize-section">
<span class="resize-section-title">Origin</span>
<div class="resize-origin-container">
<div class="resize-origin-option selected" data-origin="TOPLEFT">TOP-L</div>
<div class="resize-origin-option" data-origin="TOP">TOP</div>
<div class="resize-origin-option" data-origin="TOPRIGHT">TOP-R</div>
<div class="resize-origin-option" data-origin="MIDDLELEFT">MID-L</div>
<div class="resize-origin-option" data-origin="MIDDLE">MID</div>
<div class="resize-origin-option" data-origin="MIDDLERIGHT">MID-R</div>
<div class="resize-origin-option" data-origin="BOTTOMLEFT">BOT-L</div>
<div class="resize-origin-option" data-origin="BOTTOM">BOT</div>
<div class="resize-origin-option" data-origin="BOTTOMRIGHT">BOT-R</div>
</div>
</div>
<div class="resize-section">
<input type="checkbox" class="resize-content-checkbox" name="resize-content-checkbox" value="true"/>
<span>Resize content</span>