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

Extract resize anchor code to dedicated widget file

Browse Source
This commit is contained in:
jdescottes
2015-02-20 01:40:34 +01:00
parent d310a77893
commit 61fb6c5e6f
4 changed files with 89 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/js/controller/settings/resize/AnchorWidget.js Normal file
View File

@ -0,0 +1,68 @@
(function () {
var ns = $.namespace('pskl.controller.settings.resize');
var OPTION_CLASSNAME = 'resize-origin-option';
ns.AnchorWidget = function (container) {
container.addEventListener('click', this.onResizeOriginClick_.bind(this));
};
ns.AnchorWidget.ORIGIN = {
TOPLEFT : 'TOPLEFT',
TOP : 'TOP',
TOPRIGHT : 'TOPRIGHT',
MIDDLELEFT : 'MIDDLELEFT',
MIDDLE : 'MIDDLE',
MIDDLERIGHT : 'MIDDLERIGHT',
BOTTOMLEFT : 'BOTTOMLEFT',
BOTTOM : 'BOTTOM',
BOTTOMRIGHT : 'BOTTOMRIGHT'
};
ns.AnchorWidget.prototype.onResizeOriginClick_ = function (evt) {
var origin = evt.target.dataset.origin;
if (origin && ns.AnchorWidget.ORIGIN[origin]) {
this.setOrigin(origin);
}
};
ns.AnchorWidget.prototype.setOrigin = function (origin) {
this.origin = origin;
var previous = document.querySelector('.'+OPTION_CLASSNAME+'.selected');
if (previous) {
previous.classList.remove('selected');
}
var selected = document.querySelector('.'+OPTION_CLASSNAME+'[data-origin="' + origin + '"]');
if (selected) {
selected.classList.add('selected');
this.refreshNeighbors_(selected);
}
};
ns.AnchorWidget.prototype.getOrigin = function () {
return this.origin;
};
ns.AnchorWidget.prototype.refreshNeighbors_ = function (selected) {
var options = document.querySelectorAll('.'+OPTION_CLASSNAME);
for (var i = 0 ; i < options.length ; i++) {
options[i].removeAttribute('data-neighbor');
}
var selectedIndex = Array.prototype.indexOf.call(options, selected);
this.setNeighborhood_(options[selectedIndex - 1], 'left');
this.setNeighborhood_(options[selectedIndex + 1], 'right');
this.setNeighborhood_(options[selectedIndex - 3], 'top');
this.setNeighborhood_(options[selectedIndex + 3], 'bottom');
};
ns.AnchorWidget.prototype.setNeighborhood_ = function (el, neighborhood) {
var origin = this.origin.toLowerCase();
var isNeighborhoodValid = origin.indexOf(neighborhood) === -1;
if (isNeighborhoodValid) {
el.setAttribute('data-neighbor', neighborhood);
}
};
})();

75
src/js/controller/settings/resize/ResizeCanvasController.js
View File

@ -1,32 +1,18 @@
(function () {
var ns = $.namespace('pskl.controller.settings.resize');
var ORIGIN = {
TOPLEFT : 'TOPLEFT',
TOP : 'TOP',
TOPRIGHT : 'TOPRIGHT',
MIDDLELEFT : 'MIDDLELEFT',
MIDDLE : 'MIDDLE',
MIDDLERIGHT : 'MIDDLERIGHT',
BOTTOMLEFT : 'BOTTOMLEFT',
BOTTOM : 'BOTTOM',
BOTTOMRIGHT : 'BOTTOMRIGHT'
};
ns.ResizeCanvasController = function (piskelController, container) {
this.superclass.constructor.call(this, piskelController, container);
this.origin = ORIGIN.TOPLEFT;
var anchorWidgetContainer = document.querySelector('.resize-origin-container');
this.anchorWidget = new ns.AnchorWidget(anchorWidgetContainer);
};
pskl.utils.inherit(ns.ResizeCanvasController, ns.AbstractResizeController);
ns.ResizeCanvasController.prototype.init = function () {
this.superclass.init.call(this);
this.resizeOrigin = document.querySelector('.resize-origin-container');
this.resizeOrigin.addEventListener('click', this.onResizeOriginClick_.bind(this));
this.setOrigin_(ORIGIN.TOPLEFT);
this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
};
/****************/
@ -56,9 +42,10 @@
};
ns.ResizeCanvasController.prototype.translateX_ = function (x, width, resizedWidth) {
if (this.origin.indexOf('LEFT') != -1) {
var origin = this.anchorWidget.getOrigin();
if (origin.indexOf('LEFT') != -1) {
return x;
} else if (this.origin.indexOf('RIGHT') != -1) {
} else if (origin.indexOf('RIGHT') != -1) {
return x - (width - resizedWidth);
} else {
return x - Math.round((width - resizedWidth)/2);
@ -66,9 +53,10 @@
};
ns.ResizeCanvasController.prototype.translateY_ = function (y, height, resizedHeight) {
if (this.origin.indexOf('TOP') != -1) {
var origin = this.anchorWidget.getOrigin();
if (origin.indexOf('TOP') != -1) {
return y;
} else if (this.origin.indexOf('BOTTOM') != -1) {
} else if (origin.indexOf('BOTTOM') != -1) {
return y - (height - resizedHeight);
} else {
return y - Math.round((height - resizedHeight)/2);
@ -78,47 +66,4 @@
/*****************/
/* ANCHOR WIDGET */
/*****************/
ns.ResizeCanvasController.prototype.onResizeOriginClick_ = function (evt) {
var origin = evt.target.dataset.origin;
if (origin && ORIGIN[origin]) {
this.setOrigin_(origin);
}
};
ns.ResizeCanvasController.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');
this.refreshNeighbors_(selected);
}
};
ns.ResizeCanvasController.prototype.refreshNeighbors_ = function (selected) {
var options = document.querySelectorAll('.resize-origin-option');
for (var i = 0 ; i < options.length ; i++) {
options[i].removeAttribute('data-neighbor');
}
var selectedIndex = Array.prototype.indexOf.call(options, selected);
this.setNeighborhood_(options[selectedIndex - 1], 'left');
this.setNeighborhood_(options[selectedIndex + 1], 'right');
this.setNeighborhood_(options[selectedIndex - 3], 'top');
this.setNeighborhood_(options[selectedIndex + 3], 'bottom');
};
ns.ResizeCanvasController.prototype.setNeighborhood_ = function (el, neighborhood) {
var origin = this.origin.toLowerCase();
var isNeighborhoodValid = origin.indexOf(neighborhood) === -1;
if (isNeighborhoodValid) {
el.setAttribute('data-neighbor', neighborhood);
}
};
})();

1
src/piskel-script-list.js
View File

@ -101,6 +101,7 @@
"js/controller/settings/exportimage/PngExportController.js",
"js/controller/settings/resize/ResizeController.js",
"js/controller/settings/resize/AbstractResizeController.js",
"js/controller/settings/resize/AnchorWidget.js",
"js/controller/settings/resize/ResizeCanvasController.js",
"js/controller/settings/resize/ResizeContentController.js",
"js/controller/settings/SaveController.js",

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

@ -17,22 +17,22 @@
</div>
<div class="resize-section">
<label>
<input type="checkbox" class="resize-ratio-checkbox" value="true"/>
<input type="checkbox" class="resize-ratio-checkbox" value="true" checked="true"/>
<span>Maintain aspect ratio</span>
</label>
</div>
<div class="resize-section">
<span class="resize-section-title">Anchor</span>
<div class="resize-origin-container">
<div class="resize-origin-option" title="top left" rel="tooltip" data-placement="top" data-origin="TOPLEFT"></div>
<div class="resize-origin-option" title="top" rel="tooltip" data-placement="top" data-origin="TOP"></div>
<div class="resize-origin-option" title="top right" rel="tooltip" data-placement="top" data-origin="TOPRIGHT"></div>
<div class="resize-origin-option" title="middle left" rel="tooltip" data-placement="left" data-origin="MIDDLELEFT"></div>
<div class="resize-origin-option" title="middle" data-origin="MIDDLE" data-neighbor="bottom"></div>
<div class="resize-origin-option" title="middle right" rel="tooltip" data-placement="right" data-origin="MIDDLERIGHT"></div>
<div class="resize-origin-option" title="bottom left" rel="tooltip" data-placement="bottom" data-origin="BOTTOMLEFT"></div>
<div class="resize-origin-option" title="bottom" rel="tooltip" data-placement="bottom" data-origin="BOTTOM"></div>
<div class="resize-origin-option" title="bottom right" rel="tooltip" data-placement="bottom" data-origin="BOTTOMRIGHT"></div>
<div class="resize-origin-option" title="top left" data-origin="TOPLEFT"></div>
<div class="resize-origin-option" title="top" data-origin="TOP"></div>
<div class="resize-origin-option" title="top right" data-origin="TOPRIGHT"></div>
<div class="resize-origin-option" title="middle left" data-origin="MIDDLELEFT"></div>
<div class="resize-origin-option" title="middle" data-origin="MIDDLE"></div>
<div class="resize-origin-option" title="middle right" data-origin="MIDDLERIGHT"></div>
<div class="resize-origin-option" title="bottom left" data-origin="BOTTOMLEFT"></div>
<div class="resize-origin-option" title="bottom" data-origin="BOTTOM"></div>
<div class="resize-origin-option" title="bottom right" data-origin="BOTTOMRIGHT"></div>
</div>
</div>
<input type="submit" class="button button-primary resize-button" value="Resize" />