diff --git a/css/tools.css b/css/tools.css
index d5fdcfff..48abd183 100644
--- a/css/tools.css
+++ b/css/tools.css
@@ -34,6 +34,10 @@
background-image: url(../img/tools/icons/pen.png);
}
+.tool-icon.tool-vertical-mirror-pen {
+ background-image: url(../img/tools/icons/vertical-mirror-pen.png);
+}
+
.tool-icon.tool-paint-bucket {
background-image: url(../img/tools/icons/paint-bucket.png);
}
@@ -78,6 +82,10 @@
cursor: url(../img/tools/cursors/paint-bucket.png) 14 12, pointer;
}
+.tool-vertical-mirror-pen .drawing-canvas-container:hover {
+ cursor: url(../img/tools/cursors/vertical-mirror-pen.png) 14 12, pointer;
+}
+
.tool-pen .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/pen.png) 2 21, pointer;
}
diff --git a/img/tools/cursors/vertical-mirror-pen.png b/img/tools/cursors/vertical-mirror-pen.png
new file mode 100644
index 00000000..cf2157d8
Binary files /dev/null and b/img/tools/cursors/vertical-mirror-pen.png differ
diff --git a/img/tools/icons/mirror-pen.png b/img/tools/icons/mirror-pen.png
new file mode 100644
index 00000000..f5148946
Binary files /dev/null and b/img/tools/icons/mirror-pen.png differ
diff --git a/img/tools/icons/vertical-mirror-pen.png b/img/tools/icons/vertical-mirror-pen.png
new file mode 100644
index 00000000..cf2157d8
Binary files /dev/null and b/img/tools/icons/vertical-mirror-pen.png differ
diff --git a/index.html b/index.html
index 3d126080..10fb0f5a 100644
--- a/index.html
+++ b/index.html
@@ -110,10 +110,10 @@
-
+
diff --git a/js/drawingtools/MirrorPen.js b/js/drawingtools/MirrorPen.js
new file mode 100644
index 00000000..c7fe0ecc
--- /dev/null
+++ b/js/drawingtools/MirrorPen.js
@@ -0,0 +1,46 @@
+(function() {
+ var ns = $.namespace("pskl.drawingtools");
+
+ ns.MirrorPen = function() {
+ this.toolId = "tool-vertical-mirror-pen";
+ this.helpText = "Mirror pen tool";
+
+ this.swap = null
+ this.mirroredPreviousCol = null;
+ this.mirroredPreviousRow = null;
+ };
+
+ pskl.utils.inherit(ns.MirrorPen, ns.SimplePen);
+
+
+ ns.MirrorPen.prototype.setMirrorContext = function() {
+ this.swap = this.previousCol;
+ this.previousCol = this.mirroredPreviousCol;
+ };
+
+ ns.MirrorPen.prototype.unsetMirrorContext = function() {
+ this.mirroredPreviousCol = this.previousCol;
+ this.previousCol = this.swap;
+ };
+
+ /**
+ * @override
+ */
+ ns.MirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+ this.superclass.applyToolAt.call(this, col, row, color, frame, overlay);
+
+ var mirroredCol = this.getSymmetricCol_(col, frame);
+ this.mirroredPreviousCol = mirroredCol;
+
+ this.setMirrorContext();
+ this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
+ this.unsetMirrorContext();
+ };
+
+ /**
+ * @private
+ */
+ ns.MirrorPen.prototype.getSymmetricCol_ = function(col, frame) {
+ return frame.getWidth() - col - 1;
+ };
+})();