Issue #750 - Fix mirror pen with even pensizes

src/js/tools/drawing/VerticalMirrorPen.js

@@ -44,10 +44,17 @@
   };
 
   ns.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) {
-    return frame.getWidth() - col - 1;
+    return frame.getWidth() - col - this.getPenSizeOffset_();
   };
 
   ns.VerticalMirrorPen.prototype.getSymmetricRow_ = function(row, frame) {
-    return frame.getHeight() - row - 1;
+    return frame.getHeight() - row - this.getPenSizeOffset_();
+  };
+
+  /**
+   * Depending on the pen size, the mirrored index need to have an offset of 1 pixel.
+   */
+  ns.VerticalMirrorPen.prototype.getPenSizeOffset_ = function(row, frame) {
+    return pskl.app.penSizeService.getPenSize() % 2;
   };
 })();

test/drawing/DrawingTests.browser.js

@@ -12,6 +12,7 @@
   "lighten.darken.json",
   "move.json",
   "move-alllayers-allframes.json",
+  "pen.mirror.pensize.json",
   "pen.secondary.color.json",
   "selection.rectangular.json",
   "squares.circles.json",

test/drawing/DrawingTests.casper.js

@@ -10,6 +10,7 @@
   "layers.top.bottom.json",
   "move.json",
   "move-alllayers-allframes.json",
+  "pen.mirror.pensize.json",
   "pen.secondary.color.json",
   "selection.rectangular.json",
   "squares.circles.json",

test/drawing/tests/pen.mirror.pensize.json

@@ -0,0 +1,125 @@
+{
+ "events": [
+  {
+   "type": "pensize-event",
+   "penSize": 2
+  },
+  {
+   "type": "tool-event",
+   "toolId": "tool-vertical-mirror-pen"
+  },
+  {
+   "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": "mousemove",
+    "button": 0,
+    "shiftKey": false,
+    "altKey": false,
+    "ctrlKey": false
+   },
+   "coords": {
+    "x": 1,
+    "y": 2
+   },
+   "type": "mouse-event"
+  },
+  {
+   "event": {
+    "type": "mousemove",
+    "button": 0,
+    "shiftKey": false,
+    "altKey": false,
+    "ctrlKey": false
+   },
+   "coords": {
+    "x": 1,
+    "y": 3
+   },
+   "type": "mouse-event"
+  },
+  {
+   "event": {
+    "type": "mousemove",
+    "button": 0,
+    "shiftKey": false,
+    "altKey": false,
+    "ctrlKey": false
+   },
+   "coords": {
+    "x": 1,
+    "y": 4
+   },
+   "type": "mouse-event"
+  },
+  {
+   "event": {
+    "type": "mousemove",
+    "button": 0,
+    "shiftKey": false,
+    "altKey": false,
+    "ctrlKey": false
+   },
+   "coords": {
+    "x": 1,
+    "y": 5
+   },
+   "type": "mouse-event"
+  },
+  {
+   "event": {
+    "type": "mouseup",
+    "button": 0,
+    "shiftKey": false,
+    "altKey": false,
+    "ctrlKey": false
+   },
+   "coords": {
+    "x": 1,
+    "y": 5
+   },
+   "type": "mouse-event"
+  },
+  {
+   "type": "pensize-event",
+   "penSize": 1
+  }
+ ],
+ "initialState": {
+  "size": {
+   "width": 6,
+   "height": 6
+  },
+  "primaryColor": "#000000",
+  "secondaryColor": "rgba(0, 0, 0, 0)",
+  "selectedTool": "tool-pen",
+  "penSize": 1
+ },
+ "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAGElEQVQYV2NkYGD4zwABjFAazAdxBkwCAIsLDAFt5z4tAAAAAElFTkSuQmCC"
+}