From 796cd4466e2d26b31edf9b07bf366d982bd11abc Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sat, 22 Nov 2014 00:07:11 +0100 Subject: [PATCH] Added Rotate tool + abstract Transform tool --- .../controller/TransformationsController.js | 25 ++++++------- src/js/tools/transform/Flip.js | 35 ++++--------------- src/js/tools/transform/Rotate.js | 32 +++++++++++++++++ src/js/tools/transform/Transform.js | 33 +++++++++++++++++ src/piskel-script-list.js | 2 ++ 5 files changed, 83 insertions(+), 44 deletions(-) create mode 100644 src/js/tools/transform/Rotate.js create mode 100644 src/js/tools/transform/Transform.js diff --git a/src/js/controller/TransformationsController.js b/src/js/controller/TransformationsController.js index 14969cdc..8ce5e665 100644 --- a/src/js/controller/TransformationsController.js +++ b/src/js/controller/TransformationsController.js @@ -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; }; })(); \ No newline at end of file diff --git a/src/js/tools/transform/Flip.js b/src/js/tools/transform/Flip.js index bb3f188a..9739c50c 100644 --- a/src/js/tools/transform/Flip.js +++ b/src/js/tools/transform/Flip.js @@ -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 - }); - }; - })(); \ No newline at end of file diff --git a/src/js/tools/transform/Rotate.js b/src/js/tools/transform/Rotate.js new file mode 100644 index 00000000..b5cf6449 --- /dev/null +++ b/src/js/tools/transform/Rotate.js @@ -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++; + }; + +})(); \ No newline at end of file diff --git a/src/js/tools/transform/Transform.js b/src/js/tools/transform/Transform.js new file mode 100644 index 00000000..7cd19f3d --- /dev/null +++ b/src/js/tools/transform/Transform.js @@ -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 + }); + }; + +})(); \ No newline at end of file diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 0993fb9b..b5b5bfc9 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -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",