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 resize content and resize canvas in single form

Browse Source
This commit is contained in:
jdescottes
2015-02-22 23:01:43 +01:00
parent 61fb6c5e6f
commit 3585a6f96e
8 changed files with 200 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/js/controller/settings/resize/AbstractResizeController.js
View File

@@ -1,89 +0,0 @@
(function () {
var ns = $.namespace('pskl.controller.settings.resize');
ns.AbstractResizeController = function (piskelController, container) {
this.piskelController = piskelController;
this.container = container;
};
ns.AbstractResizeController.prototype.init = function () {
this.widthInput = this.container.querySelector('[name="resize-width"]');
this.heightInput = this.container.querySelector('[name="resize-height"]');
this.widthInput.value = this.piskelController.getWidth();
this.heightInput.value = this.piskelController.getHeight();
this.widthInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
this.heightInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
this.cancelButton = this.container.querySelector('.resize-cancel-button');
this.cancelButton.addEventListener('click', this.onCancelButtonClicked_.bind(this));
this.resizeForm = this.container.querySelector('form');
this.resizeForm.addEventListener('submit', this.onResizeFormSubmit_.bind(this));
this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
this.maintainRatioCheckbox.addEventListener('change', this.onMaintainRatioChange_.bind(this));
this.lastInput = this.widthInput;
};
ns.AbstractResizeController.prototype.onResizeFormSubmit_ = function (evt) {
evt.preventDefault();
var resizedLayers = this.piskelController.getLayers().map(this.resizeLayer_.bind(this));
var piskel = pskl.model.Piskel.fromLayers(resizedLayers, this.piskelController.getPiskel().getDescriptor());
pskl.app.piskelController.setPiskel(piskel, true);
$.publish(Events.CLOSE_SETTINGS_DRAWER);
};
ns.AbstractResizeController.prototype.resizeLayer_ = function (layer) {
var resizedFrames = layer.getFrames().map(this.resizeFrame_.bind(this));
return pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
};
ns.AbstractResizeController.prototype.resizeFrame_ = Constants.ABSTRACT_FUNCTION;
ns.AbstractResizeController.prototype.onCancelButtonClicked_ = function () {
$.publish(Events.CLOSE_SETTINGS_DRAWER);
};
ns.AbstractResizeController.prototype.onMaintainRatioChange_ = function (evt) {
var target = evt.target;
if (target.checked) {
this.synchronizeSizeInputs_(this.lastInput);
}
};
ns.AbstractResizeController.prototype.onSizeInputKeyUp_ = function (evt) {
var target = evt.target;
if (this.maintainRatioCheckbox.checked) {
this.synchronizeSizeInputs_(target);
}
this.lastInput = target;
};
/**
* Based on the value of the provided sizeInput (considered as emitter)
* update the value of the other sizeInput to match the current width/height ratio
* @param {HTMLElement} origin either widthInput or heightInput
*/
ns.AbstractResizeController.prototype.synchronizeSizeInputs_ = function (sizeInput) {
var value = parseInt(sizeInput.value, 10);
if (isNaN(value)) {
value = 0;
}
var height = this.piskelController.getHeight(),
width = this.piskelController.getWidth();
if (sizeInput === this.widthInput) {
this.heightInput.value = Math.round(value * height/width);
} else if (sizeInput === this.heightInput) {
this.widthInput.value = Math.round(value * width/height);
}
};
})();

15
src/js/controller/settings/resize/AnchorWidget.js
View File

@@ -4,7 +4,8 @@
var OPTION_CLASSNAME = 'resize-origin-option';
ns.AnchorWidget = function (container) {
container.addEventListener('click', this.onResizeOriginClick_.bind(this));
this.container = container;
this.container.addEventListener('click', this.onResizeOriginClick_.bind(this));
};
ns.AnchorWidget.ORIGIN = {
@@ -44,6 +45,18 @@
return this.origin;
};
ns.AnchorWidget.prototype.disable = function () {
this.disabled = true;
this.container.classList.add('transition');
this.container.classList.add('disabled');
};
ns.AnchorWidget.prototype.enable = function () {
this.disabled = false;
this.container.classList.remove('disabled');
window.setTimeout(this.container.classList.remove.bind(this.container.classList, 'transition'), 250);
};
ns.AnchorWidget.prototype.refreshNeighbors_ = function (selected) {
var options = document.querySelectorAll('.'+OPTION_CLASSNAME);
for (var i = 0 ; i < options.length ; i++) {

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

@@ -1,69 +0,0 @@
(function () {
var ns = $.namespace('pskl.controller.settings.resize');
ns.ResizeCanvasController = function (piskelController, container) {
this.superclass.constructor.call(this, piskelController, container);
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.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
};
/****************/
/* RESIZE LOGIC */
/****************/
ns.ResizeCanvasController.prototype.resizeFrame_ = function (frame) {
var width = parseInt(this.widthInput.value, 10);
var height = parseInt(this.heightInput.value, 10);
var resizedFrame = new pskl.model.Frame(width, height);
frame.forEachPixel(function (color, x, y) {
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.ResizeCanvasController.prototype.translateCoordinates_ = function (x, y, frame, resizedFrame) {
return {
x : this.translateX_(x, frame.width, resizedFrame.width),
y : this.translateY_(y, frame.height, resizedFrame.height)
};
};
ns.ResizeCanvasController.prototype.translateX_ = function (x, width, resizedWidth) {
var origin = this.anchorWidget.getOrigin();
if (origin.indexOf('LEFT') != -1) {
return x;
} else if (origin.indexOf('RIGHT') != -1) {
return x - (width - resizedWidth);
} else {
return x - Math.round((width - resizedWidth)/2);
}
};
ns.ResizeCanvasController.prototype.translateY_ = function (y, height, resizedHeight) {
var origin = this.anchorWidget.getOrigin();
if (origin.indexOf('TOP') != -1) {
return y;
} else if (origin.indexOf('BOTTOM') != -1) {
return y - (height - resizedHeight);
} else {
return y - Math.round((height - resizedHeight)/2);
}
};
/*****************/
/* ANCHOR WIDGET */
/*****************/
})();

19
src/js/controller/settings/resize/ResizeContentController.js
View File

@@ -1,19 +0,0 @@
(function () {
var ns = $.namespace('pskl.controller.settings.resize');
ns.ResizeContentController = function (piskelController, container) {
this.superclass.constructor.call(this, piskelController, container);
};
pskl.utils.inherit(ns.ResizeContentController, ns.AbstractResizeController);
ns.ResizeContentController.prototype.init = function () {
this.superclass.init.call(this);
};
ns.ResizeContentController.prototype.resizeFrame_ = function (frame) {
var width = parseInt(this.widthInput.value, 10);
var height = parseInt(this.heightInput.value, 10);
return pskl.utils.FrameUtils.resize(frame, width, height, false);
};
})();

151
src/js/controller/settings/resize/ResizeController.js
View File

@@ -2,15 +2,154 @@
var ns = $.namespace('pskl.controller.settings.resize');
ns.ResizeController = function (piskelController) {
var resizeCanvasContainer = document.querySelector('.resize-canvas');
this.resizeCanvasController = new ns.ResizeCanvasController(piskelController, resizeCanvasContainer);
this.piskelController = piskelController;
var resizeContentContainer = document.querySelector('.resize-content');
this.resizeContentController = new ns.ResizeContentController(piskelController, resizeContentContainer);
this.container = document.querySelector('.resize-canvas');
var anchorWidgetContainer = this.container.querySelector('.resize-origin-container');
this.anchorWidget = new ns.AnchorWidget(anchorWidgetContainer);
};
ns.ResizeController.prototype.init = function () {
this.resizeCanvasController.init();
this.resizeContentController.init();
this.widthInput = this.container.querySelector('[name="resize-width"]');
this.heightInput = this.container.querySelector('[name="resize-height"]');
this.widthInput.value = this.piskelController.getWidth();
this.heightInput.value = this.piskelController.getHeight();
this.widthInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
this.heightInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
this.cancelButton = this.container.querySelector('.resize-cancel-button');
this.cancelButton.addEventListener('click', this.onCancelButtonClicked_.bind(this));
this.resizeForm = this.container.querySelector('form');
this.resizeForm.addEventListener('submit', this.onResizeFormSubmit_.bind(this));
this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox');
this.resizeContentCheckbox.addEventListener('change', this.onResizeContentChange_.bind(this));
this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
this.maintainRatioCheckbox.addEventListener('change', this.onMaintainRatioChange_.bind(this));
this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
this.lastInput = this.widthInput;
};
ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) {
evt.preventDefault();
var resizedLayers = this.piskelController.getLayers().map(this.resizeLayer_.bind(this));
var piskel = pskl.model.Piskel.fromLayers(resizedLayers, this.piskelController.getPiskel().getDescriptor());
pskl.app.piskelController.setPiskel(piskel, true);
$.publish(Events.CLOSE_SETTINGS_DRAWER);
};
ns.ResizeController.prototype.resizeLayer_ = function (layer) {
var resizedFrames = layer.getFrames().map(this.resizeFrame_.bind(this));
return pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
};
ns.ResizeController.prototype.onCancelButtonClicked_ = function () {
$.publish(Events.CLOSE_SETTINGS_DRAWER);
};
ns.ResizeController.prototype.onResizeContentChange_ = function (evt) {
var target = evt.target;
if (target.checked) {
this.anchorWidget.disable();
} else {
this.anchorWidget.enable();
}
};
ns.ResizeController.prototype.onMaintainRatioChange_ = function (evt) {
var target = evt.target;
if (target.checked) {
this.synchronizeSizeInputs_(this.lastInput);
}
};
ns.ResizeController.prototype.onSizeInputKeyUp_ = function (evt) {
var target = evt.target;
if (this.maintainRatioCheckbox.checked) {
this.synchronizeSizeInputs_(target);
}
this.lastInput = target;
};
/**
* Based on the value of the provided sizeInput (considered as emitter)
* update the value of the other sizeInput to match the current width/height ratio
* @param {HTMLElement} origin either widthInput or heightInput
*/
ns.ResizeController.prototype.synchronizeSizeInputs_ = function (sizeInput) {
var value = parseInt(sizeInput.value, 10);
if (isNaN(value)) {
value = 0;
}
var height = this.piskelController.getHeight(),
width = this.piskelController.getWidth();
if (sizeInput === this.widthInput) {
this.heightInput.value = Math.round(value * height/width);
} else if (sizeInput === this.heightInput) {
this.widthInput.value = Math.round(value * width/height);
}
};
/***********************/
/* RESIZE CANVAS LOGIC */
/***********************/
ns.ResizeController.prototype.resizeFrame_ = function (frame) {
var width = parseInt(this.widthInput.value, 10);
var height = parseInt(this.heightInput.value, 10);
if (this.resizeContentCheckbox.checked) {
return pskl.utils.FrameUtils.resize(frame, width, height, false);
} else {
var resizedFrame = new pskl.model.Frame(width, height);
frame.forEachPixel(function (color, x, y) {
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) {
return {
x : this.translateX_(x, frame.width, resizedFrame.width),
y : this.translateY_(y, frame.height, resizedFrame.height)
};
};
ns.ResizeController.prototype.translateX_ = function (x, width, resizedWidth) {
var origin = this.anchorWidget.getOrigin();
if (origin.indexOf('LEFT') != -1) {
return x;
} else if (origin.indexOf('RIGHT') != -1) {
return x - (width - resizedWidth);
} else {
return x - Math.round((width - resizedWidth)/2);
}
};
ns.ResizeController.prototype.translateY_ = function (y, height, resizedHeight) {
var origin = this.anchorWidget.getOrigin();
if (origin.indexOf('TOP') != -1) {
return y;
} else if (origin.indexOf('BOTTOM') != -1) {
return y - (height - resizedHeight);
} else {
return y - Math.round((height - resizedHeight)/2);
}
};
})();