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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,17 @@
margin-left: 0;
}
.resize-ratio-checkbox,
.resize-smooth-checkbox {
vertical-align: -2px;
margin-left: 0;
}
/*****************/
/* ANCHOR WIDGET */
/*****************/
.resize-origin-container {
overflow: hidden;
position: relative;
@ -17,19 +28,33 @@
display: inline-block;
}
.transition .resize-origin-option,
.transition .resize-origin-option:before {
transition: background-color 0.2s, border-color 0.2s;
}
.resize-origin-option {
float: left;
box-sizing: border-box;
position: relative;
box-sizing: border-box;
margin: 0 1px 1px 0;
width: 20px;
height: 20px;
background : #888;
font-size: 8px;
text-align: center;
cursor: pointer;
}
.disabled .resize-origin-option {
cursor: default;
background : #555;
border-color: #555 !important;
}
.resize-origin-option.selected {
border : 3px solid gold;
}
@ -50,6 +75,14 @@
background: gold;
}
.disabled .resize-origin-option.selected:before {
background: #555;
}
.disabled .resize-origin-option[data-neighbor]:before {
border-color: #555 !important;
}
.resize-origin-option[data-neighbor]:before {
width: 0;
height: 0;
@ -78,10 +111,4 @@
.resize-origin-option[data-neighbor="right"]:before {
border-left-color: gold;
margin-top: -4px;
}
.resize-ratio-checkbox,
.resize-smooth-checkbox {
vertical-align: -2px;
margin-left: 0;
}

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

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

@ -99,11 +99,8 @@
"js/controller/settings/exportimage/ImageExportController.js",
"js/controller/settings/exportimage/GifExportController.js",
"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/resize/ResizeController.js",
"js/controller/settings/SaveController.js",
"js/controller/settings/ImportController.js",

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

@ -21,6 +21,12 @@
<span>Maintain aspect ratio</span>
</label>
</div>
<div class="resize-section">
<label>
<input type="checkbox" class="resize-content-checkbox" value="true"/>
<span>Resize canvas content</span>
</label>
</div>
<div class="resize-section">
<span class="resize-section-title">Anchor</span>
<div class="resize-origin-container">
@ -39,31 +45,4 @@
<input type="button" class="button resize-cancel-button" value="Cancel" />
</form>
</div>
<!-- RESIZE CONTENT -->
<div class="settings-title">
Image size
</div>
<div class="settings-item resize-content">
<form action="" method="POST" name="resize-content-form">
<div class="resize-section">
<span class="resize-section-title">Width</span>
<input type="text" class="textfield resize-size-field" name="resize-width"/>
<span>px</span>
</div>
<div class="resize-section">
<span class="resize-section-title">Height</span>
<input type="text" class="textfield resize-size-field" name="resize-height"/>
<span>px</span>
</div>
<div class="resize-section">
<label>
<input type="checkbox" class="resize-ratio-checkbox" value="true"/>
<span>Maintain aspect ratio</span>
</label>
</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>