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