mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Added Rotate tool + abstract Transform tool
This commit is contained in:
parent
0f49c884f2
commit
796cd4466e
@ -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;
|
||||
};
|
||||
})();
|
@ -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
|
||||
});
|
||||
};
|
||||
|
||||
})();
|
32
src/js/tools/transform/Rotate.js
Normal file
32
src/js/tools/transform/Rotate.js
Normal 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++;
|
||||
};
|
||||
|
||||
})();
|
33
src/js/tools/transform/Transform.js
Normal file
33
src/js/tools/transform/Transform.js
Normal 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
|
||||
});
|
||||
};
|
||||
|
||||
})();
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user