Merge pull request #86 from grosbouddha/mirror-tool

Vertical mirror tool baby

css/tools.css

@@ -15,6 +15,9 @@
   background-position: 7px 7px;
 }
 
+/*
+ * Framesheet level actions:
+ */
 .tool-icon.tool-save {
   background-image: url(../img/tools/icons/save.png);
 }
@@ -23,10 +26,18 @@
   background-image: url(../img/tools/icons/add-frame.png);
 }
 
+
+/*
+ * Tool icons:
+ */
 .tool-icon.tool-pen {
   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);
 }
@@ -63,10 +74,18 @@
   background-image: url(../img/tools/icons/color-palette.png);
 }*/
 
+/*
+ * Tool cursors:
+ */
+
 .tool-paint-bucket .drawing-canvas-container:hover {
   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/VerticalMirrorPen.js"></script>
   <script src="js/drawingtools/Eraser.js"></script>
   <script src="js/drawingtools/Stroke.js"></script>
   <script src="js/drawingtools/PaintBucket.js"></script>

js/controller/ToolController.js

@@ -6,6 +6,7 @@
 	
         this.toolInstances = {
             "simplePen" : new pskl.drawingtools.SimplePen(),
+            "verticalMirrorPen" : new pskl.drawingtools.VerticalMirrorPen(),
             "eraser" : new pskl.drawingtools.Eraser(),
             "paintBucket" : new pskl.drawingtools.PaintBucket(),
             "stroke" : new pskl.drawingtools.Stroke(),
@@ -68,6 +69,7 @@
      */
     ns.ToolController.prototype.createToolMarkup_ = function() {
         var currentTool, toolMarkup = '';
+        // TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that.
         for (var toolKey in this.toolInstances) {
             currentTool = this.toolInstances[toolKey];
             toolMarkup += '<li class="tool-icon ' + currentTool.toolId + '" data-tool-id="' + currentTool.toolId +

js/drawingtools/SimplePen.js

@@ -8,11 +8,12 @@
 
 	ns.SimplePen = function() {
 		this.toolId = "tool-pen";
-		this.helpText = "Pen tool"
-	};
+		this.helpText = "Pen tool";
 
-	this.previousCol = null;
-	this.previousRow = null;
+		this.previousCol = null;
+		this.previousRow = null;
+
+	};
 
 	pskl.utils.inherit(ns.SimplePen, ns.BaseTool);
 	

js/drawingtools/VerticalMirrorPen.js

@@ -0,0 +1,46 @@
+(function() {
+	var ns = $.namespace("pskl.drawingtools");
+
+	ns.VerticalMirrorPen = function() {
+		this.toolId = "tool-vertical-mirror-pen";
+		this.helpText = "vertical mirror pen tool";
+
+		this.swap = null
+		this.mirroredPreviousCol = null;
+	    this.mirroredPreviousRow = null;
+	};
+
+	pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
+	
+
+	ns.VerticalMirrorPen.prototype.setMirrorContext = function() {
+		this.swap = this.previousCol;
+		this.previousCol = this.mirroredPreviousCol;
+	};
+
+	ns.VerticalMirrorPen.prototype.unsetMirrorContext = function() {
+		this.mirroredPreviousCol = this.previousCol;
+		this.previousCol = this.swap;
+	};
+
+	/**
+	 * @override
+	 */
+	ns.VerticalMirrorPen.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.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) {
+		return frame.getWidth() - col - 1; 
+	};
+})();

js/utils/core.js

@@ -30,9 +30,6 @@ jQuery.namespace = function() {
         extendedObject.prototype = Object.create(inheritFrom.prototype);
         extendedObject.prototype.constructor = extendedObject;
         extendedObject.prototype.superclass = inheritFrom.prototype;
-        
-        //pskl.ToolBehavior.Eraser.prototype = Object.create(pskl.ToolBehavior.BaseTool.prototype);
-        //prototypeskl.ToolBehavior.Eraser.prototype.constructor = pskl.ToolBehavior.Eraser;
     };
 
 })();