Issue #315 : custom replay for Swap Color

src/js/tools/Tool.js

@@ -14,4 +14,12 @@
   ns.Tool.prototype.getId = function() {
     return this.toolId;
   };
+
+  ns.Tool.prototype.raiseSaveStateEvent = function (replayData) {
+    $.publish(Events.PISKEL_SAVE_STATE, {
+      type : pskl.service.HistoryService.REPLAY,
+      scope : this,
+      replay : replayData
+    });
+  };
 })();

src/js/tools/drawing/BaseTool.js

@@ -76,14 +76,6 @@
     }
   };
 
-  ns.BaseTool.prototype.raiseSaveStateEvent = function (replayData) {
-    $.publish(Events.PISKEL_SAVE_STATE, {
-      type : pskl.service.HistoryService.REPLAY,
-      scope : this,
-      replay : replayData
-    });
-  };
-
   ns.BaseTool.prototype.releaseToolAt = function (col, row, frame, overlay, event) {};
 
   /**

src/js/tools/drawing/ColorSwap.js

@@ -23,36 +23,44 @@
    */
   ns.ColorSwap.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     if (frame.containsPixel(col, row)) {
-      var sampledColor = frame.getPixel(col, row);
+      var oldColor = frame.getPixel(col, row);
+      var newColor = this.getToolColor();
 
       var allLayers = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
       var allFrames = event.shiftKey;
 
-      this.swapColors(sampledColor, this.getToolColor(), allLayers, allFrames);
+      this.swapColors_(oldColor, newColor, allLayers, allFrames);
 
-      $.publish(Events.PISKEL_SAVE_STATE, {
+      this.raiseSaveStateEvent({
-        type : pskl.service.HistoryService.SNAPSHOT
+        allLayers : allLayers,
+        allFrames : allFrames,
+        oldColor : oldColor,
+        newColor : newColor
       });
     }
   };
 
-  ns.ColorSwap.prototype.swapColors = function(oldColor, newColor, allLayers, allFrames) {
+  ns.ColorSwap.prototype.replay = function (frame, replayData) {
-    var swapPixelColor = function (pixelColor, x, y, frame) {
+    this.swapColors_(replayData.oldColor, replayData.newColor, replayData.allLayers, replayData.allFrames);
-      if (pixelColor == oldColor) {
+  };
-        frame.pixels[x][y] = newColor;
+
-      }
+  ns.ColorSwap.prototype.swapColors_ = function(oldColor, newColor, allLayers, allFrames) {
-    };
-    var currentLayer = pskl.app.piskelController.getCurrentLayer();
     var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
-    pskl.app.piskelController.getPiskel().getLayers().forEach(function (l) {
+    var layers = allLayers ? pskl.app.piskelController.getLayers() : [pskl.app.piskelController.getCurrentLayer()];
-      if (allLayers || l === currentLayer) {
+    layers.forEach(function (layer) {
-        l.getFrames().forEach(function (f, frameIndex) {
+      var frames = allFrames ? layer.getFrames() : [layer.getFrameAt(currentFrameIndex)];
-          if (allFrames || frameIndex === currentFrameIndex) {
+      frames.forEach(function (frame) {
-            f.forEachPixel(swapPixelColor);
+        this.applyToolOnFrame_(frame, oldColor, newColor);
-            f.version++;
+      }.bind(this));
-          }
+    }.bind(this));
-        });
+  };
+
+  ns.ColorSwap.prototype.applyToolOnFrame_ = function (frame, oldColor, newColor) {
+    frame.forEachPixel(function (color, col, row) {
+      if (color == oldColor) {
+        frame.pixels[col][row] = newColor;
       }
     });
+    frame.version++;
   };
 })();

src/js/tools/drawing/Lighten.js

@@ -41,7 +41,7 @@
   /**
    * @Override
    */
-  ns.Lighten.prototype.applyToolAt = function(col, row, frame, overlay, event, mouseButton) {
+  ns.Lighten.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     var modifiedColor = this.getModifiedColor_(col, row, frame, overlay, event);
     this.draw(modifiedColor, col, row, frame, overlay);
   };

src/js/tools/transform/AbstractTransformTool.js

@@ -12,7 +12,8 @@
     this.applyTool_(evt.altKey, allFrames, allLayers);
 
     $.publish(Events.PISKEL_RESET);
-    this.raiseSaveStateEvent_({
+
+    this.raiseSaveStateEvent({
       altKey : evt.altKey,
       allFrames : allFrames,
       allLayers : allLayers
@@ -30,14 +31,6 @@
     }.bind(this));
   };
 
-  ns.AbstractTransformTool.prototype.raiseSaveStateEvent_ = function (replayData) {
-    $.publish(Events.PISKEL_SAVE_STATE, {
-      type : pskl.service.HistoryService.REPLAY,
-      scope : this,
-      replay : replayData
-    });
-  };
-
   ns.AbstractTransformTool.prototype.replay = function (frame, replayData) {
     this.applyTool_(replayData.altKey, replayData.allFrames, replayData.allLayers);
   };

test/drawing/DrawingTests.browser.js

@@ -23,5 +23,7 @@
   "transform.flip.once.alt.json",
   "transform.flip.twice.undo.once.json",
   "transform.flip.thrice.undo.all.redo.all.json",
-  "selection.lasso.json"
+  "selection.lasso.json",
+  "swapcolor.twice.undo.once.json",
+  "swapcolor.alllayers.allframes.twice.undo.once.json"
 ]}

test/drawing/DrawingTests.casper.js

@@ -5,7 +5,6 @@
   "history.basic.json",
   "layers.fun.json",
   "layers.merge.json",
-  "lighten.darken.json",
   "move.json",
   "move-alllayers-allframes.json",
   "pen.secondary.color.json",
@@ -22,5 +21,7 @@
   "transform.flip.once.alt.json",
   "transform.flip.twice.undo.once.json",
   "transform.flip.thrice.undo.all.redo.all.json",
-  "selection.lasso.json"
+  "selection.lasso.json",
+  "swapcolor.twice.undo.once.json",
+  "swapcolor.alllayers.allframes.twice.undo.once.json"
 ];

test/drawing/tests/swapcolor.alllayers.allframes.twice.undo.once.json

@@ -0,0 +1 @@
+{"events":[{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"type":"instrumented-event","methodName":"addFrame","args":[]},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"type":"instrumented-event","methodName":"createLayer","args":[]},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":38,"shiftKey":false,"altKey":false,"ctrlKey":false,"target":{"nodeName":"BODY"}}},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"type":"color-event","color":"#ff0000","isPrimary":true},{"type":"tool-event","toolId":"tool-colorswap"},{"event":{"type":"mousedown","button":0,"shiftKey":true,"altKey":false,"ctrlKey":true},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":true,"altKey":false,"ctrlKey":true},"coords":{"x":0,"y":1},"type":"mouse-event"},{"type":"color-event","color":"#1aff00","isPrimary":true},{"event":{"type":"mousedown","button":0,"shiftKey":true,"altKey":false,"ctrlKey":true},"coords":{"x":1,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":true,"altKey":false,"ctrlKey":true},"coords":{"x":1,"y":1},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}}],"initialState":{"size":{"width":2,"height":2},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen"},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAAGklEQVQIW2P8z8Dwn5GBgRFEMzAgMcAcIAIAiwYGAbu53sQAAAAASUVORK5CYII="}

test/drawing/tests/swapcolor.twice.undo.once.json

@@ -0,0 +1 @@
+{"events":[{"type":"color-event","color":"#000000","isPrimary":true},{"type":"tool-event","toolId":"tool-pen"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"type":"color-event","color":"rgb(255, 0, 0)","isPrimary":true},{"type":"tool-event","toolId":"tool-colorswap"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"type":"color-event","color":"rgb(0, 255, 255)","isPrimary":true},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}}],"initialState":{"size":{"width":2,"height":2},"primaryColor":"#00ffff","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-colorswap"},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGElEQVQIW2P8z8Dwn5GBgZGRgYGBAcQBACQgBAEgNsbbAAAAAElFTkSuQmCC"}