Added Rotate tool + abstract Transform tool

This commit is contained in:
jdescottes 2014-11-22 00:07:11 +01:00
parent 0f49c884f2
commit 796cd4466e
5 changed files with 83 additions and 44 deletions

View File

@ -8,7 +8,8 @@
};
this.tools = [
toDescriptor('flip', 'F', new pskl.tools.transform.Flip())
toDescriptor('flip', 'F', new pskl.tools.transform.Flip()),
toDescriptor('rotate', 'V', new pskl.tools.transform.Rotate())
];
this.toolIconRenderer = new pskl.tools.IconMarkupRenderer();
@ -24,23 +25,17 @@
ns.TransformationsController.prototype.onTransformationClick = function (evt) {
var toolId = evt.target.dataset.toolId;
var tool = pskl.utils.Array.find(this.tools, function (tool) {
return tool.id === toolId;
});
if (tool) {
tool.instance.apply(evt);
}
this.tools.forEach(function (tool) {
if (tool.instance.toolId === toolId) {
tool.instance.apply(evt);
}
}.bind(this));
};
/**
* @private
*/
ns.TransformationsController.prototype.createToolsDom_ = function() {
var html = '';
for(var i = 0 ; i < this.tools.length ; i++) {
var tool = this.tools[i];
html += this.toolIconRenderer.render(tool.instance, tool.shortcut);
}
var html = this.tools.reduce(function (p, tool) {
return p + this.toolIconRenderer.render(tool.instance, tool.shortcut);
}.bind(this), '');
this.toolsContainer.innerHTML = html;
};
})();

View File

@ -7,26 +7,18 @@
this.tooltipDescriptors = [];
};
pskl.utils.inherit(ns.Flip, pskl.tools.Tool);
pskl.utils.inherit(ns.Flip, ns.Transform);
ns.Flip.prototype.apply = function (evt) {
var allFrames = evt.shiftKey;
var allLayers = evt.ctrlKey;
if (evt.altKey) {
this.flip('vertical', allFrames, allLayers);
} else {
this.flip('horizontal', allFrames, allLayers);
}
};
ns.Flip.prototype.flipFrame_ = function (frame, axis) {
ns.Flip.prototype.applyToolOnFrame_ = function (frame, altKey) {
var clone = frame.clone();
var w = frame.getWidth();
var h = frame.getHeight();
var isVertical = !altKey;
clone.forEachPixel(function (color, x, y) {
if (axis === 'horizontal') {
if (isVertical) {
x = w-x-1;
} else if (axis === 'vertical') {
} else {
y = h-y-1;
}
frame.pixels[x][y] = color;
@ -34,19 +26,4 @@
frame.version++;
};
ns.Flip.prototype.flip = function (axis, allFrames, allLayers) {
var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
var layers = allLayers ? pskl.app.piskelController.getLayers(): [pskl.app.piskelController.getCurrentLayer()];
layers.forEach(function (layer) {
var frames = allFrames ? layer.getFrames(): [layer.getFrameAt(currentFrameIndex)];
frames.forEach(function (frame) {
this.flipFrame_(frame, axis);
}.bind(this));
}.bind(this));
$.publish(Events.PISKEL_RESET);
$.publish(Events.PISKEL_SAVE_STATE, {
type : pskl.service.HistoryService.SNAPSHOT
});
};
})();

View File

@ -0,0 +1,32 @@
(function () {
var ns = $.namespace('pskl.tools.transform');
ns.Rotate = function () {
this.toolId = "tool-rotate";
this.helpText = "Rotate tool";
this.tooltipDescriptors = [];
};
pskl.utils.inherit(ns.Rotate, ns.Transform);
ns.Rotate.prototype.applyToolOnFrame_ = function (frame, altKey) {
var clone = frame.clone();
var w = frame.getWidth();
var h = frame.getHeight();
var isClockwise = altKey;
clone.forEachPixel(function (color, x, y) {
var _x = x, _y = y;
if (isClockwise) {
y = x;
x = w-_y-1;
} else {
x = y;
y = h-_x-1;
}
frame.pixels[x][y] = color;
});
frame.version++;
};
})();

View File

@ -0,0 +1,33 @@
(function () {
var ns = $.namespace('pskl.tools.transform');
ns.Transform = function () {
this.toolId = "tool-transform";
this.helpText = "Transform tool";
this.tooltipDescriptors = [];
};
pskl.utils.inherit(ns.Transform, pskl.tools.Tool);
ns.Transform.prototype.apply = function (evt) {
var allFrames = evt.shiftKey;
var allLayers = evt.ctrlKey;
this.applyTool_(evt.altKey, allFrames, allLayers);
};
ns.Transform.prototype.applyTool_ = function (altKey, allFrames, allLayers) {
var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
var layers = allLayers ? pskl.app.piskelController.getLayers(): [pskl.app.piskelController.getCurrentLayer()];
layers.forEach(function (layer) {
var frames = allFrames ? layer.getFrames(): [layer.getFrameAt(currentFrameIndex)];
frames.forEach(function (frame) {
this.applyToolOnFrame_(frame, altKey);
}.bind(this));
}.bind(this));
$.publish(Events.PISKEL_RESET);
$.publish(Events.PISKEL_SAVE_STATE, {
type : pskl.service.HistoryService.SNAPSHOT
});
};
})();

View File

@ -162,7 +162,9 @@
"js/tools/drawing/selection/ShapeSelect.js",
"js/tools/drawing/ColorPicker.js",
"js/tools/drawing/ColorSwap.js",
"js/tools/transform/Transform.js",
"js/tools/transform/Flip.js",
"js/tools/transform/Rotate.js",
// Devtools
"js/devtools/DrawingTestPlayer.js",