Merge pull request #354 from juliandescottes/add-brush-size

Add brush size

src/css/pensize.css

@@ -0,0 +1,49 @@
+.pen-size-container {
+  overflow: hidden;
+  padding: 5px 5px;
+}
+
+.pen-size-option {
+  float: left;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  margin-right: 2px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: #444;
+  cursor: pointer;
+}
+
+.pen-size-option[data-size='1'] {
+  padding: 6px;
+}
+.pen-size-option[data-size='2'] {
+  padding: 5px;
+}
+.pen-size-option[data-size='3'] {
+  padding: 4px;
+}
+.pen-size-option[data-size='4'] {
+  padding: 3px;
+}
+
+.pen-size-option:before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  display: block;
+}
+
+.pen-size-option:hover {
+  border-color: #888;
+}
+
+.pen-size-option.selected:before {
+  background-color: gold;
+}
+
+.pen-size-option.selected {
+  border-color: gold;
+}

src/js/Events.js

@@ -43,6 +43,8 @@ var Events = {
   HISTORY_STATE_SAVED: 'HISTORY_STATE_SAVED',
   HISTORY_STATE_LOADED: 'HISTORY_STATE_LOADED',
 
+  PEN_SIZE_CHANGED : 'PEN_SIZE_CHANGED',
+
   /**
    * Fired when a Piskel is successfully saved
    */

src/js/app.js

@@ -139,6 +139,12 @@
       this.headerController = new pskl.controller.HeaderController(this.piskelController, this.savedStatusService);
       this.headerController.init();
 
+      this.penSizeService = new pskl.service.pensize.PenSizeService();
+      this.penSizeService.init();
+
+      this.penSizeController = new pskl.controller.PenSizeController();
+      this.penSizeController.init();
+
       this.fileDropperService = new pskl.service.FileDropperService(
         this.piskelController,
         document.querySelector('#drawing-canvas-container'));

src/js/controller/PenSizeController.js

@@ -0,0 +1,35 @@
+(function () {
+  var ns = $.namespace('pskl.controller');
+
+  ns.PenSizeController = function () {};
+
+  ns.PenSizeController.prototype.init = function () {
+    this.container = document.querySelector('.pen-size-container');
+    pskl.utils.Event.addEventListener(this.container, 'click', this.onPenSizeOptionClick_, this);
+
+    $.subscribe(Events.PEN_SIZE_CHANGED, this.onPenSizeChanged_.bind(this));
+
+    this.updateSelectedOption_();
+  };
+
+  ns.PenSizeController.prototype.onPenSizeOptionClick_ = function (e) {
+    var size = e.target.dataset.size;
+    if (!isNaN(size)) {
+      size = parseInt(size, 10);
+      pskl.app.penSizeService.setPenSize(size);
+    }
+  };
+
+  ns.PenSizeController.prototype.onPenSizeChanged_ = function (e) {
+    this.updateSelectedOption_();
+  };
+
+  ns.PenSizeController.prototype.updateSelectedOption_ = function () {
+    pskl.utils.Dom.removeClass('selected', this.container);
+    var size = pskl.app.penSizeService.getPenSize();
+    var selectedOption = this.container.querySelector('[data-size="' + size + '"]');
+    if (selectedOption) {
+      selectedOption.classList.add('selected');
+    }
+  };
+})();

src/js/controller/dialogs/CheatsheetController.js

@@ -50,9 +50,10 @@
     var shortcut = pskl.app.shortcutService.getShortcutById(shortcutId);
 
     if (shortcutEl.classList.contains(SHORTCUT_EDITING_CLASSNAME)) {
-      shortcutEl.classList.remove(SHORTCUT_EDITING_CLASSNAME);
+      pskl.utils.Dom.removeClass(SHORTCUT_EDITING_CLASSNAME);
       this.eventTrapInput.blur();
     } else if (shortcut.isEditable()) {
+      pskl.utils.Dom.removeClass(SHORTCUT_EDITING_CLASSNAME);
       shortcutEl.classList.add(SHORTCUT_EDITING_CLASSNAME);
       this.eventTrapInput.focus();
     }
@@ -64,11 +65,14 @@
       return;
     }
 
+    var shortcutKeyObject = pskl.service.keyboard.KeyUtils.createKeyFromEvent(evt);
+    if (!shortcutKeyObject) {
+      return;
+    }
+
+    var shortcutKeyString = pskl.service.keyboard.KeyUtils.stringify(shortcutKeyObject);
     var shortcutId = shortcutEl.dataset.shortcutId;
     var shortcut = pskl.app.shortcutService.getShortcutById(shortcutId);
-    var shortcutKeyObject = pskl.service.keyboard.KeyUtils.createKeyFromEvent(evt);
-    var shortcutKeyString = pskl.service.keyboard.KeyUtils.stringify(shortcutKeyObject);
-
     pskl.app.shortcutService.updateShortcut(shortcut, shortcutKeyString);
 
     shortcutEl.classList.remove(SHORTCUT_EDITING_CLASSNAME);
@@ -147,7 +151,9 @@
     if (pskl.utils.UserAgent.isMac) {
       key = key.replace('ctrl', 'cmd');
     }
+    key = key.replace(/left/i, '￩');
     key = key.replace(/up/i, '￪');
+    key = key.replace(/right/i, '￫');
     key = key.replace(/down/i, '￬');
     key = key.replace(/>/g, '>');
     key = key.replace(/</g, '&lt;');

src/js/devtools/DrawingTestPlayer.js

@@ -28,6 +28,9 @@
     $.publish(Events.SELECT_PRIMARY_COLOR, [this.initialState.primaryColor]);
     $.publish(Events.SELECT_SECONDARY_COLOR, [this.initialState.secondaryColor]);
     $.publish(Events.SELECT_TOOL, [this.initialState.selectedTool]);
+    if (this.initialState.penSize) {
+      pskl.app.penSizeService.setPenSize(this.initialState.penSize);
+    }
   };
 
   ns.DrawingTestPlayer.prototype.createPiskel_ = function (width, height) {
@@ -94,6 +97,8 @@
         this.playColorEvent_(recordEvent);
       } else if (recordEvent.type === 'tool-event') {
         this.playToolEvent_(recordEvent);
+      } else if (recordEvent.type === 'pensize-event') {
+        this.playPenSizeEvent_(recordEvent);
       } else if (recordEvent.type === 'transformtool-event') {
         this.playTransformToolEvent_(recordEvent);
       } else if (recordEvent.type === 'instrumented-event') {
@@ -144,6 +149,10 @@
     $.publish(Events.SELECT_TOOL, [recordEvent.toolId]);
   };
 
+  ns.DrawingTestPlayer.prototype.playPenSizeEvent_ = function (recordEvent) {
+    pskl.app.penSizeService.setPenSize(recordEvent.penSize);
+  };
+
   ns.DrawingTestPlayer.prototype.playTransformToolEvent_ = function (recordEvent) {
     pskl.app.transformationsController.applyTool(recordEvent.toolId, recordEvent.event);
   };

src/js/devtools/DrawingTestRecorder.js

@@ -11,6 +11,7 @@
     $.subscribe(Events.MOUSE_EVENT, this.onMouseEvent_.bind(this));
     $.subscribe(Events.KEYBOARD_EVENT, this.onKeyboardEvent_.bind(this));
     $.subscribe(Events.TOOL_SELECTED, this.onToolEvent_.bind(this));
+    $.subscribe(Events.PEN_SIZE_CHANGED, this.onPenSizeChanged_.bind(this));
     $.subscribe(Events.TRANSFORMATION_EVENT, this.onTransformationEvent_.bind(this));
     $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onColorEvent_.bind(this, true));
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorEvent_.bind(this, false));
@@ -48,7 +49,8 @@
       },
       primaryColor : pskl.app.selectedColorsService.getPrimaryColor(),
       secondaryColor : pskl.app.selectedColorsService.getSecondaryColor(),
-      selectedTool : pskl.app.toolController.currentSelectedTool.instance.toolId
+      selectedTool : pskl.app.toolController.currentSelectedTool.toolId,
+      penSize : pskl.app.penSizeService.getPenSize()
     };
   };
 
@@ -111,6 +113,15 @@
     }
   };
 
+  ns.DrawingTestRecorder.prototype.onPenSizeChanged_ = function (evt) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'pensize-event';
+      recordEvent.penSize = pskl.app.penSizeService.getPenSize();
+      this.events.push(recordEvent);
+    }
+  };
+
   ns.DrawingTestRecorder.prototype.onTransformationEvent_ = function (evt, toolId, domEvent) {
     if (this.isRecording) {
       var recordEvent = {};

src/js/service/keyboard/KeycodeTranslator.js

@@ -3,7 +3,9 @@
     191 : '?',
     8 : 'back',
     27 : 'esc',
+    37 : 'left',
     38 : 'up',
+    39 : 'right',
     40 : 'down',
     46 : 'del',
     189 : '-',

src/js/service/keyboard/Shortcuts.js

@@ -45,6 +45,8 @@
       RESET_ZOOM : createShortcut('reset-zoom', 'Reset zoom level', '0'),
       INCREASE_ZOOM : createShortcut('increase-zoom', 'Increase zoom level', '+'),
       DECREASE_ZOOM : createShortcut('decrease-zoom', 'Decrease zoom level', '-'),
+      INCREASE_PENSIZE : createShortcut('increase-pensize', 'Increase pen size', ']'),
+      DECREASE_PENSIZE : createShortcut('decrease-pensize', 'Decrease pen size', '['),
       UNDO : createShortcut('undo', 'Undo', 'ctrl+Z'),
       REDO : createShortcut('redo', 'Redo', ['ctrl+Y', 'ctrl+shift+Z']),
       PREVIOUS_FRAME : createShortcut('previous-frame', 'Select previous frame', 'up'),

src/js/service/pensize/PenSizeService.js

@@ -0,0 +1,50 @@
+(function () {
+  var ns = $.namespace('pskl.service.pensize');
+
+  var MIN_PENSIZE = 1;
+  var MAX_PENSIZE = 4;
+
+  /**
+   * Service to retrieve and modify the current pen size.
+   */
+  ns.PenSizeService = function () {
+    this.size = MIN_PENSIZE;
+  };
+
+  ns.PenSizeService.prototype.init = function () {
+    this.size = pskl.UserSettings.get(pskl.UserSettings.PEN_SIZE);
+
+    var shortcuts = pskl.service.keyboard.Shortcuts;
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.INCREASE_PENSIZE, this.increasePenSize_.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.DECREASE_PENSIZE, this.decreasePenSize_.bind(this));
+  };
+
+  ns.PenSizeService.prototype.increasePenSize_ = function () {
+    this.setPenSize(this.size + 1);
+  };
+
+  ns.PenSizeService.prototype.decreasePenSize_ = function () {
+    this.setPenSize(this.size - 1);
+  };
+
+  ns.PenSizeService.prototype.getPenSize = function () {
+    return this.size;
+  };
+
+  ns.PenSizeService.prototype.setPenSize = function (size) {
+    if (this.isPenSizeValid_(size) && size != this.size) {
+      this.size = size;
+      pskl.UserSettings.set(pskl.UserSettings.PEN_SIZE, size);
+      $.publish(Events.PEN_SIZE_CHANGED);
+    }
+  };
+
+  ns.PenSizeService.prototype.isPenSizeValid_ = function (size) {
+    if (isNaN(size)) {
+      return false;
+    }
+
+    return size >= MIN_PENSIZE && size <= MAX_PENSIZE;
+  };
+
+})();

src/js/tools/drawing/BaseTool.js

@@ -19,6 +19,10 @@
 
   ns.BaseTool.prototype.replay = Constants.ABSTRACT_FUNCTION;
 
+  ns.BaseTool.prototype.supportsDynamicPenSize = function() {
+    return false;
+  };
+
   ns.BaseTool.prototype.getToolColor = function() {
     if (pskl.app.mouseStateService.isRightButtonPressed()) {
       return pskl.app.selectedColorsService.getSecondaryColor();
@@ -45,7 +49,11 @@
     }
 
     var frameColor = frame.getPixel(col, row);
-    overlay.setPixel(col, row, this.getHighlightColor_(frameColor));
+    var highlightColor = this.getHighlightColor_(frameColor);
+    var size = this.supportsDynamicPenSize() ? pskl.app.penSizeService.getPenSize() : 1;
+    pskl.PixelUtils.resizePixel(col, row, size).forEach(function (point) {
+      overlay.setPixel(point[0], point[1], highlightColor);
+    });
 
     this.highlightedPixelCol = col;
     this.highlightedPixelRow = row;
@@ -66,11 +74,7 @@
 
   ns.BaseTool.prototype.hideHighlightedPixel = function (overlay) {
     if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) {
-      try {
-        overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
-      } catch (e) {
-        window.console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
-      }
+      overlay.clear();
       this.highlightedPixelRow = null;
       this.highlightedPixelCol = null;
     }

src/js/tools/drawing/Circle.js

@@ -19,12 +19,11 @@
   /**
    * @override
    */
-  ns.Circle.prototype.draw = function (col, row, color, targetFrame) {
-    var circlePoints = this.getCirclePixels_(this.startCol, this.startRow, col, row);
-    for (var i = 0 ; i < circlePoints.length ; i++) {
-      // Change model:
-      targetFrame.setPixel(circlePoints[i].col, circlePoints[i].row, color);
-    }
+  ns.Circle.prototype.draw = function (col, row, color, targetFrame, penSize) {
+    var circlePixels = this.getCirclePixels_(this.startCol, this.startRow, col, row);
+    pskl.PixelUtils.resizePixels(circlePixels, penSize).forEach(function (point) {
+      targetFrame.setPixel(point[0], point[1], color);
+    });
   };
 
   ns.Circle.prototype.getCirclePixels_ = function (x0, y0, x1, y1) {

src/js/tools/drawing/DitheringTool.js

@@ -12,19 +12,39 @@
     this.helpText = 'Dithering tool';
     this.shortcut = pskl.service.keyboard.Shortcuts.TOOL.DITHERING;
   };
+
   pskl.utils.inherit(ns.DitheringTool, ns.SimplePen);
 
+  ns.DitheringTool.prototype.supportsDynamicPenSize = function() {
+    return true;
+  };
+
   /**
    * @override
    */
   ns.DitheringTool.prototype.applyToolAt = function(col, row, frame, overlay, event) {
+    this.previousCol = col;
+    this.previousRow = row;
+
+    var penSize = pskl.app.penSizeService.getPenSize();
+    var points = pskl.PixelUtils.resizePixel(col, row, penSize);
+    points.forEach(function (point) {
+      this.applyToolOnPixel(point[0], point[1], frame, overlay, event);
+    }.bind(this));
+  };
+
+  ns.DitheringTool.prototype.applyToolOnPixel = function(col, row, frame, overlay, event) {
     var usePrimaryColor = (col + row) % 2;
-    usePrimaryColor =
-      pskl.app.mouseStateService.isRightButtonPressed() ? !usePrimaryColor : usePrimaryColor;
+
+    if (pskl.app.mouseStateService.isRightButtonPressed()) {
+      usePrimaryColor = !usePrimaryColor;
+    }
+
     var ditheringColor = usePrimaryColor ?
       pskl.app.selectedColorsService.getPrimaryColor() :
       pskl.app.selectedColorsService.getSecondaryColor();
 
     this.draw(ditheringColor, col, row, frame, overlay);
   };
+
 })();

src/js/tools/drawing/Lighten.js

@@ -19,58 +19,52 @@
       {key : 'ctrl', description : 'Darken'},
       {key : 'shift', description : 'Apply only once per pixel'}
     ];
-
-    this.usedPixels_ = {
-      darken : {},
-      lighten : {}
-    };
   };
 
   pskl.utils.inherit(ns.Lighten, ns.SimplePen);
 
-  /**
-   * @Override
-   */
-  ns.Lighten.prototype.resetUsedPixels_ = function() {
-    this.usedPixels_ = {
-      darken : {},
-      lighten : {}
-    };
-    this.superclass.resetUsedPixels_.call(this);
-  };
-
   /**
    * @Override
    */
   ns.Lighten.prototype.applyToolAt = function(col, row, frame, overlay, event) {
-    var modifiedColor = this.getModifiedColor_(col, row, frame, overlay, event);
-    this.draw(modifiedColor, col, row, frame, overlay);
+    this.previousCol = col;
+    this.previousRow = row;
+
+    var penSize = pskl.app.penSizeService.getPenSize();
+    var points = pskl.PixelUtils.resizePixel(col, row, penSize);
+    points.forEach(function (point) {
+      var modifiedColor = this.getModifiedColor_(point[0], point[1], frame, overlay, event);
+      this.draw(modifiedColor, point[0], point[1], frame, overlay);
+    }.bind(this));
   };
 
   ns.Lighten.prototype.getModifiedColor_ = function(col, row, frame, overlay, event) {
+    // get colors in overlay and in frame
     var overlayColor = overlay.getPixel(col, row);
     var frameColor = frame.getPixel(col, row);
-    var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
-    var isDarken = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
-    var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;
-    var isSinglePass = event.shiftKey;
 
-    var usedPixels = isDarken ? this.usedPixels_.darken : this.usedPixels_.lighten;
-    var key = col + '-' + row;
-    var doNotModify = isTransparent || (isSinglePass && usedPixels[key]);
+    var isPixelModified = overlayColor !== Constants.TRANSPARENT_COLOR;
+    var pixelColor = isPixelModified ? overlayColor : frameColor;
+
+    var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;
+    if (isTransparent) {
+      return Constants.TRANSPARENT_COLOR;
+    }
+
+    var oncePerPixel = event.shiftKey;
+    if (oncePerPixel && isPixelModified) {
+      return pixelColor;
+    }
+
+    var step = oncePerPixel ? DEFAULT_STEP * 2 : DEFAULT_STEP;
+    var isDarken = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
 
     var color;
-    if (doNotModify) {
-      color = window.tinycolor(pixelColor);
+    if (isDarken) {
+      color = window.tinycolor.darken(pixelColor, step);
     } else {
-      var step = isSinglePass ? DEFAULT_STEP * 2 : DEFAULT_STEP;
-      if (isDarken) {
-        color = window.tinycolor.darken(pixelColor, step);
-      } else {
-        color = window.tinycolor.lighten(pixelColor, step);
-      }
+      color = window.tinycolor.lighten(pixelColor, step);
     }
-    usedPixels[key] = true;
 
     // Convert tinycolor color to string format.
     return color.toHexString();

src/js/tools/drawing/Rectangle.js

@@ -19,11 +19,11 @@
   /**
    * @override
    */
-  ns.Rectangle.prototype.draw = function (col, row, color, targetFrame) {
-    var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
-    for (var i = 0 ; i < strokePoints.length ; i++) {
-      // Change model:
-      targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
-    }
+  ns.Rectangle.prototype.draw = function (col, row, color, targetFrame, penSize) {
+    var rectanglePixels = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
+
+    pskl.PixelUtils.resizePixels(rectanglePixels, penSize).forEach(function (point) {
+      targetFrame.setPixel(point[0], point[1], color);
+    });
   };
 })();

src/js/tools/drawing/ShapeTool.js

@@ -16,6 +16,10 @@
 
   pskl.utils.inherit(ns.ShapeTool, ns.BaseTool);
 
+  ns.ShapeTool.prototype.supportsDynamicPenSize = function() {
+    return true;
+  };
+
   /**
    * @override
    */
@@ -25,7 +29,8 @@
     this.startRow = row;
 
     // Drawing the first point of the rectangle in the fake overlay canvas:
-    overlay.setPixel(col, row, this.getToolColor());
+    var penSize = pskl.app.penSizeService.getPenSize();
+    this.draw(col, row, this.getToolColor(), overlay, penSize);
   };
 
   ns.ShapeTool.prototype.moveToolAt = function(col, row, frame, overlay, event) {
@@ -39,7 +44,8 @@
     }
 
     // draw in overlay
-    this.draw(coords.col, coords.row, color, overlay);
+    var penSize = pskl.app.penSizeService.getPenSize();
+    this.draw(coords.col, coords.row, color, overlay, penSize);
   };
 
   /**
@@ -49,7 +55,8 @@
     overlay.clear();
     var coords = this.getCoordinates_(col, row, event);
     var color = this.getToolColor();
-    this.draw(coords.col, coords.row, color, frame);
+    var penSize = pskl.app.penSizeService.getPenSize();
+    this.draw(coords.col, coords.row, color, frame, penSize);
 
     $.publish(Events.DRAG_END);
     this.raiseSaveStateEvent({
@@ -57,7 +64,8 @@
       row : coords.row,
       startCol : this.startCol,
       startRow : this.startRow,
-      color : color
+      color : color,
+      penSize : penSize
     });
   };
 
@@ -67,7 +75,7 @@
   ns.ShapeTool.prototype.replay = function(frame, replayData) {
     this.startCol = replayData.startCol;
     this.startRow = replayData.startRow;
-    this.draw(replayData.col, replayData.row, replayData.color, frame);
+    this.draw(replayData.col, replayData.row, replayData.color, frame, replayData.penSize);
   };
 
   /**

src/js/tools/drawing/SimplePen.js

@@ -19,18 +19,31 @@
 
   pskl.utils.inherit(ns.SimplePen, ns.BaseTool);
 
+  ns.SimplePen.prototype.supportsDynamicPenSize = function() {
+    return true;
+  };
+
   /**
    * @override
    */
   ns.SimplePen.prototype.applyToolAt = function(col, row, frame, overlay, event) {
-    var color = this.getToolColor();
-    this.draw(color, col, row, frame, overlay);
-  };
-
-  ns.SimplePen.prototype.draw = function(color, col, row, frame, overlay) {
     this.previousCol = col;
     this.previousRow = row;
 
+    var color = this.getToolColor();
+
+    this.drawUsingPenSize(color, col, row, frame, overlay);
+  };
+
+  ns.SimplePen.prototype.drawUsingPenSize = function(color, col, row, frame, overlay) {
+    var penSize = pskl.app.penSizeService.getPenSize();
+    var points = pskl.PixelUtils.resizePixel(col, row, penSize);
+    points.forEach(function (point) {
+      this.draw(color, point[0], point[1], frame, overlay);
+    }.bind(this));
+  };
+
+  ns.SimplePen.prototype.draw = function(color, col, row, frame, overlay) {
     overlay.setPixel(col, row, color);
     if (color === Constants.TRANSPARENT_COLOR) {
       frame.setPixel(col, row, color);

src/js/tools/drawing/Stroke.js

@@ -21,6 +21,10 @@
 
   pskl.utils.inherit(ns.Stroke, ns.BaseTool);
 
+  ns.Stroke.prototype.supportsDynamicPenSize = function() {
+    return true;
+  };
+
   /**
    * @override
    */
@@ -43,65 +47,65 @@
   ns.Stroke.prototype.moveToolAt = function(col, row, frame, overlay, event) {
     overlay.clear();
 
-    if (event.shiftKey) {
-      var coords = this.getStraightLineCoordinates_(col, row);
-      col = coords.col;
-      row = coords.row;
-    }
-
-    // When the user moussemove (before releasing), we dynamically compute the
-    // pixel to draw the line and draw this line in the overlay canvas:
-    var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
-
-    // Drawing current stroke:
+    var penSize = pskl.app.penSizeService.getPenSize();
+    var isStraight = event.shiftKey;
     var color = this.getToolColor();
-    for (var i = 0; i < strokePoints.length; i++) {
-
-      if (color == Constants.TRANSPARENT_COLOR) {
-        // When mousemoving the stroke tool, we draw in the canvas overlay above the drawing canvas.
-        // If the stroke color is transparent, we won't be
-        // able to see it during the movement.
-        // We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke.
-        // When the stroke tool will be released, It will draw a transparent stroke,
-        // eg deleting the equivalent of a stroke.
-        color = Constants.SELECTION_TRANSPARENT_COLOR;
-      }
-      overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+    if (color == Constants.TRANSPARENT_COLOR) {
+      // When mousemoving the stroke tool, we draw in the canvas overlay above the drawing canvas.
+      // If the stroke color is transparent, we won't be
+      // able to see it during the movement.
+      // We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke.
+      // When the stroke tool will be released, It will draw a transparent stroke,
+      // eg deleting the equivalent of a stroke.
+      color = Constants.SELECTION_TRANSPARENT_COLOR;
     }
+
+    this.draw_(col, row, color, overlay, penSize, isStraight);
   };
 
   /**
    * @override
    */
   ns.Stroke.prototype.releaseToolAt = function(col, row, frame, overlay, event) {
+    var penSize = pskl.app.penSizeService.getPenSize();
+    var isStraight = event.shiftKey;
     var color = this.getToolColor();
 
-    if (event.shiftKey) {
+    // The user released the tool to draw a line. We will compute the pixel coordinate, impact
+    // the model and draw them in the drawing canvas (not the fake overlay anymore)
+    this.draw_(col, row, color, frame, penSize, isStraight);
+
+    // For now, we are done with the stroke tool and don't need an overlay anymore:
+    overlay.clear();
+
+    this.raiseSaveStateEvent({
+      col : col,
+      row : row,
+      startCol : this.startCol,
+      startRow : this.startRow,
+      color : color,
+      penSize : penSize,
+      isStraight : isStraight
+    });
+  };
+
+  ns.Stroke.prototype.draw_ = function (col, row, color, targetFrame, penSize, isStraight) {
+    if (isStraight) {
       var coords = this.getStraightLineCoordinates_(col, row);
       col = coords.col;
       row = coords.row;
     }
 
-    // The user released the tool to draw a line. We will compute the pixel coordinate, impact
-    // the model and draw them in the drawing canvas (not the fake overlay anymore)
-    var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
-    for (var i = 0; i < strokePoints.length; i++) {
-      // Change model:
-      frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
-    }
-    // For now, we are done with the stroke tool and don't need an overlay anymore:
-    overlay.clear();
-
-    this.raiseSaveStateEvent({
-      pixels : strokePoints,
-      color : color
+    var linePixels = this.getLinePixels_(this.startCol, col, this.startRow, row);
+    pskl.PixelUtils.resizePixels(linePixels, penSize).forEach(function (point) {
+      targetFrame.setPixel(point[0], point[1], color);
     });
   };
 
   ns.Stroke.prototype.replay = function(frame, replayData) {
-    replayData.pixels.forEach(function (pixel) {
-      frame.setPixel(pixel.col, pixel.row, replayData.color);
-    });
+    this.startCol = replayData.startCol;
+    this.startRow = replayData.startRow;
+    this.draw_(replayData.col, replayData.row, replayData.color, frame, replayData.penSize, replayData.isStraight);
   };
 
   /**
@@ -115,7 +119,7 @@
     var dist = Math.sqrt(Math.pow(tCol, 2) + Math.pow(tRow, 2));
 
     var axisDistance = Math.round(dist);
-    var diagDistance = Math.round(Math.sqrt(Math.pow(dist, 2) / 2));
+    var diagDistance = Math.round(dist / Math.sqrt(2));
 
     var PI8 = Math.PI / 8;
     var angle = Math.atan2(tRow, tCol);

src/js/tools/drawing/VerticalMirrorPen.js

@@ -16,42 +16,31 @@
 
   pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
 
-  ns.VerticalMirrorPen.prototype.backupPreviousPositions_ = function () {
-    this.backupPreviousCol = this.previousCol;
-    this.backupPreviousRow = this.previousRow;
-  };
-
-  ns.VerticalMirrorPen.prototype.restorePreviousPositions_ = function () {
-    this.previousCol = this.backupPreviousCol;
-    this.previousRow = this.backupPreviousRow;
-  };
-
   /**
    * @override
    */
   ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     var color = this.getToolColor();
-    this.draw(color, col, row, frame, overlay);
-
-    this.backupPreviousPositions_();
+    this.drawUsingPenSize(color, col, row, frame, overlay);
 
     var mirroredCol = this.getSymmetricCol_(col, frame);
     var mirroredRow = this.getSymmetricRow_(row, frame);
 
     var hasCtrlKey = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
     if (!hasCtrlKey) {
-      this.draw(color, mirroredCol, row, frame, overlay);
+      this.drawUsingPenSize(color, mirroredCol, row, frame, overlay);
     }
 
     if (event.shiftKey || hasCtrlKey) {
-      this.draw(color, col, mirroredRow, frame, overlay);
+      this.drawUsingPenSize(color, col, mirroredRow, frame, overlay);
     }
 
     if (event.shiftKey) {
-      this.draw(color, mirroredCol, mirroredRow, frame, overlay);
+      this.drawUsingPenSize(color, mirroredCol, mirroredRow, frame, overlay);
     }
 
-    this.restorePreviousPositions_();
+    this.previousCol = col;
+    this.previousRow = row;
   };
 
   ns.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) {

src/js/utils/PixelUtils.js

@@ -70,6 +70,53 @@
       return paintedPixels;
     },
 
+    /**
+     * Resize the pixel at {col, row} for the provided size. Will return the array of pixels centered
+     * around the original pixel, forming a pixel square of side=size
+     *
+     * @param  {Number} row  x-coordinate of the original pixel
+     * @param  {Number} col  y-coordinate of the original pixel
+     * @param  {Number} size >= 1 && <= 4
+     * @return {Array}  array of arrays of 2 Numbers (eg. [[0,0], [0,1], [1,0], [1,1]])
+     */
+    resizePixel : function (col, row, size) {
+      if (size == 1) {
+        return [[col, row]];
+      } else if (size == 2) {
+        return [
+          [col, row], [col + 1, row],
+          [col, row + 1], [col + 1, row + 1]
+        ];
+      } else if (size == 3) {
+        return [
+          [col - 1, row - 1], [col, row - 1], [col + 1, row - 1],
+          [col - 1, row + 0], [col, row + 0], [col + 1, row + 0],
+          [col - 1, row + 1], [col, row + 1], [col + 1, row + 1],
+        ];
+      } else if (size == 4) {
+        return [
+          [col - 1, row - 1], [col, row - 1], [col + 1, row - 1], [col + 2, row - 1],
+          [col - 1, row + 0], [col, row + 0], [col + 1, row + 0], [col + 2, row + 0],
+          [col - 1, row + 1], [col, row + 1], [col + 1, row + 1], [col + 2, row + 1],
+          [col - 1, row + 2], [col, row + 2], [col + 1, row + 2], [col + 2, row + 2],
+        ];
+      } else {
+        console.error('Unsupported size : ' + size);
+      }
+    },
+
+    /**
+     * Shortcut to reduce the output of pskl.PixelUtils.resizePixel for several pixels
+     * @param  {Array}  pixels Array of pixels (objects {col:Number, row:Number})
+     * @param  {Number} >= 1 && <= 4
+     * @return {Array}  array of arrays of 2 Numbers (eg. [[0,0], [0,1], [1,0], [1,1]])
+     */
+    resizePixels : function (pixels, size) {
+      return pixels.reduce(function (p, pixel) {
+        return p.concat(pskl.PixelUtils.resizePixel(pixel.col, pixel.row, size));
+      }, []);
+    },
+
     /**
      * Apply the paintbucket tool in a frame at the (col, row) initial position
      * with the replacement color.

src/js/utils/UserSettings.js

@@ -13,8 +13,8 @@
     LAYER_PREVIEW : 'LAYER_PREVIEW',
     LAYER_OPACITY : 'LAYER_OPACITY',
     EXPORT_SCALING: 'EXPORT_SCALING',
+    PEN_SIZE : 'PEN_SIZE',
     RESIZE_SETTINGS: 'RESIZE_SETTINGS',
-
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
       'MAX_FPS' : 24,
@@ -30,6 +30,7 @@
       'LAYER_OPACITY' : 0.2,
       'LAYER_PREVIEW' : true,
       'EXPORT_SCALING' : 1,
+      'PEN_SIZE' : 1,
       'RESIZE_SETTINGS': {
         maintainRatio : true,
         resizeContent : false,

src/piskel-script-list.js

@@ -103,6 +103,7 @@
   "js/controller/ToolController.js",
   "js/controller/PaletteController.js",
   "js/controller/PalettesListController.js",
+  "js/controller/PenSizeController.js",
   "js/controller/ProgressBarController.js",
   "js/controller/NotificationController.js",
   "js/controller/TransformationsController.js",
@@ -157,6 +158,7 @@
   "js/service/palette/reader/PalettePalReader.js",
   "js/service/palette/reader/PaletteTxtReader.js",
   "js/service/palette/PaletteImportService.js",
+  "js/service/pensize/PenSizeService.js",
   "js/service/SavedStatusService.js",
   "js/service/keyboard/KeycodeTranslator.js",
   "js/service/keyboard/KeyUtils.js",

src/piskel-style-list.js

@@ -14,6 +14,7 @@
   "css/settings-resize.css",
   "css/settings-save.css",
   "css/tools.css",
+  "css/pensize.css",
   "css/icons.css",
   "css/color-picker-slider.css",
   "css/dialogs.css",

src/templates/drawing-tools.html

@@ -1,6 +1,12 @@
 <div class="sticky-section left-sticky-section" id="tool-section">
   <div class="sticky-section-wrap">
     <div class="vertical-centerer">
+      <div class="pen-size-container" title="Pen size<br/>from 1 to 4 pixels" rel="tooltip" data-placement="top">
+        <div class="pen-size-option" data-size="1"></div>
+        <div class="pen-size-option" data-size="2"></div>
+        <div class="pen-size-option" data-size="3"></div>
+        <div class="pen-size-option" data-size="4"></div>
+      </div>
       <ul id="tools-container" class="tools-wrapper">
         <!-- Drawing tools will be inserted here -->
       </ul>

test/drawing/DrawingTests.pensize.js

@@ -0,0 +1,12 @@
+{"tests" : [
+  "pensize.circle.basic.json",
+  "pensize.circle.undo.json",
+  "pensize.eraser.basic.json",
+  "pensize.eraser.undo.json",
+  "pensize.pen.basic.json",
+  "pensize.pen.undo.json",
+  "pensize.rectangle.basic.json",
+  "pensize.rectangle.undo.json",
+  "pensize.stroke.basic.json",
+  "pensize.stroke.undo.json"
+]}

test/drawing/tests/pensize.eraser.basic.json

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

test/drawing/tests/pensize.eraser.undo.json

@@ -0,0 +1 @@
+{"events":[{"type":"tool-event","toolId":"tool-paint-bucket"},{"type":"keyboard-event","event":{"which":66,"shiftKey":false,"altKey":false,"ctrlKey":false,"target":{"nodeName":"BODY"}}},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"type":"tool-event","toolId":"tool-eraser"},{"type":"pensize-event","penSize":1},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"type":"pensize-event","penSize":2},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":1},"type":"mouse-event"},{"type":"pensize-event","penSize":4},{"event":{"type":"mousedown","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":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"keyboard-event","event":{"which":89,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}},{"type":"tool-event","toolId":"tool-pen"}],"initialState":{"size":{"width":8,"height":8},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen","penSize":4},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAKUlEQVQYV2NkgID/DAwMjFjYYEGQJAgQVABVh6IYxQRkBXA2shUDpQAASwMKBCPYrL8AAAAASUVORK5CYII="}

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

@@ -0,0 +1,140 @@
+{
+    "events": [{
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 0,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "type": "pensize-event",
+        "penSize": 2
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 1,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 1,
+            "y": 0
+        },
+        "type": "mouse-event"
+    }, {
+        "type": "pensize-event",
+        "penSize": 3
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 4,
+            "y": 1
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 4,
+            "y": 1
+        },
+        "type": "mouse-event"
+    }, {
+        "type": "pensize-event",
+        "penSize": 4
+    }, {
+        "event": {
+            "type": "mousedown",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 5,
+            "y": 4
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mousemove",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 5,
+            "y": 4
+        },
+        "type": "mouse-event"
+    }, {
+        "event": {
+            "type": "mouseup",
+            "button": 0,
+            "shiftKey": false,
+            "altKey": false,
+            "ctrlKey": false
+        },
+        "coords": {
+            "x": 5,
+            "y": 4
+        },
+        "type": "mouse-event"
+    }],
+    "initialState": {
+        "size": {
+            "width": 8,
+            "height": 8
+        },
+        "primaryColor": "#000000",
+        "secondaryColor": "rgba(0, 0, 0, 0)",
+        "selectedTool": "tool-pen",
+        "penSize": 1
+    },
+    "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALUlEQVQYV2NkYGD4z4AdMIKEwQQORSgKYGYgm4ZVAYZpMCuQXYHiJtooQPE0ABsyBwXCqrdKAAAAAElFTkSuQmCC"
+}

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

@@ -0,0 +1 @@
+{"events":[{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"type":"pensize-event","penSize":2},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":1},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":1},"type":"mouse-event"},{"type":"pensize-event","penSize":4},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":5},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":5},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}}],"initialState":{"size":{"width":8,"height":8},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen","penSize":1},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAK0lEQVQYV2NkYGD4z4AdMIKEwQQORSgKYGYgm4ZVAYZlMCtwOAPhBhoqAACekgMJrfUpnQAAAABJRU5ErkJggg=="}

test/drawing/tests/pensize.stroke.undo.json

@@ -0,0 +1 @@
+{"events":[{"type":"tool-event","toolId":"tool-stroke"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":5,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":7,"y":0},"type":"mouse-event"},{"type":"pensize-event","penSize":2},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":3},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":3},"type":"mouse-event"},{"type":"pensize-event","penSize":3},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":5},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":6,"y":3},"type":"mouse-event"},{"type":"color-event","color":"#b8ff00","isPrimary":true},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":6},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":5},"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":3},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":3},"type":"mouse-event"},{"type":"keyboard-event","event":{"which":90,"shiftKey":false,"altKey":false,"ctrlKey":true,"target":{"nodeName":"BODY"}}}],"initialState":{"size":{"width":8,"height":8},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen","penSize":1},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NkYGD4z4AHMCIpALExAC4FcFOpowCb1ShWUKYAAPGuCwKQGbMQAAAAAElFTkSuQmCC"}

test/js/service/pensize/PenSizeServiceTest.js

@@ -0,0 +1,73 @@
+describe("PenSize test suite", function() {
+  var penSizeService;
+  var userSettingsBackup;
+  var userSettingsPenSize;
+
+  beforeEach(function() {
+    userSettingsBackup = pskl.UserSettings;
+
+    pskl.UserSettings = {
+      PEN_SIZE : 'PEN_SIZE_TEST_KEY',
+      get : function () {
+        return userSettingsPenSize;
+      },
+
+      set : function (size) {
+        userSettingsPenSize = size;
+      }
+    };
+
+    spyOn(pskl.UserSettings, 'get').and.callThrough();
+    spyOn(pskl.UserSettings, 'set').and.callThrough();
+    spyOn($, 'publish').and.callThrough();
+
+
+    penSizeService = new pskl.service.pensize.PenSizeService();
+  });
+
+  afterEach(function () {
+    pskl.UserSettings = userSettingsBackup;
+  });
+
+  it("gets initial value from user settings", function() {
+    console.log('[PenSizeService] gets initial value from user settings');
+    userSettingsPenSize = 2;
+
+    penSizeService.init();
+    expect(penSizeService.getPenSize()).toBe(2);
+    expect(pskl.UserSettings.get).toHaveBeenCalledWith('PEN_SIZE_TEST_KEY');
+  });
+
+  it("saves valid value to user settings", function() {
+    console.log('[PenSizeService] saves valid value to user settings');
+    userSettingsPenSize = 1;
+
+    penSizeService.init();
+    penSizeService.setPenSize(3);
+    expect(penSizeService.getPenSize()).toBe(3);
+
+    expect(pskl.UserSettings.set).toHaveBeenCalledWith('PEN_SIZE_TEST_KEY', 3);
+    expect($.publish).toHaveBeenCalledWith(Events.PEN_SIZE_CHANGED);
+  });
+
+  it("skips invalid value (outside of [1, 4])", function() {
+    console.log('[PenSizeService] skips invalid value (outside of [1, 4])');
+    userSettingsPenSize = 1;
+
+    penSizeService.init();
+    // MAX_VALUE is 4
+    penSizeService.setPenSize(5);
+    expect(penSizeService.getPenSize()).toBe(1);
+    // MIN_VALUE is 1
+    penSizeService.setPenSize(0);
+    expect(penSizeService.getPenSize()).toBe(1);
+    // value should be a number
+    penSizeService.setPenSize("test");
+    expect(penSizeService.getPenSize()).toBe(1);
+
+    // nothing set in usersettings
+    expect(pskl.UserSettings.set.calls.any()).toBe(false);
+    // no event fired
+    expect($.publish.calls.any()).toBe(false);
+  });
+});