Vertical mirror pen - initial implementation

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;
 }

index.html

@@ -110,10 +110,10 @@
   <script src="js/Palette.js"></script>
   <script src="js/Notification.js"></script>
 
-
   <!-- Tools-->
   <script src="js/drawingtools/BaseTool.js"></script>
   <script src="js/drawingtools/SimplePen.js"></script>
+  <script src="js/drawingtools/MirrorPen.js"></script>
   <script src="js/drawingtools/Eraser.js"></script>
   <script src="js/drawingtools/Stroke.js"></script>
   <script src="js/drawingtools/PaintBucket.js"></script>

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; 
+	};
+})();