Merge pull request #560 from smiegrin/master

Allows square brush size of up to 32 pixels using keyboard...

src/css/pensize.css

@@ -16,17 +16,17 @@
 }
 
 .pen-size-option[data-size='1'] {
-  padding: 6px;
-}
-.pen-size-option[data-size='2'] {
   padding: 5px;
 }
-.pen-size-option[data-size='3'] {
+.pen-size-option[data-size='2'] {
   padding: 4px;
 }
-.pen-size-option[data-size='4'] {
+.pen-size-option[data-size='3'] {
   padding: 3px;
 }
+.pen-size-option[data-size='4'] {
+  padding: 2px;
+}
 
 .pen-size-option:before {
   content: '';
@@ -34,6 +34,9 @@
   height: 100%;
   background-color: white;
   display: block;
+  text-align: center;
+  line-height: 12px;
+  font-size: 90%;
 }
 
 .pen-size-option:hover {
@@ -46,4 +49,8 @@
 
 .pen-size-option.selected {
   border-color: gold;
-}
+}
+
+.pen-size-option.labeled:before {
+  content: attr(real-pen-size);
+}

src/js/controller/PenSizeController.js

@@ -25,9 +25,17 @@
   };
 
   ns.PenSizeController.prototype.updateSelectedOption_ = function () {
+    pskl.utils.Dom.removeClass('labeled', this.container);
     pskl.utils.Dom.removeClass('selected', this.container);
     var size = pskl.app.penSizeService.getPenSize();
-    var selectedOption = this.container.querySelector('[data-size="' + size + '"]');
+    var selectedOption;
+    if (size <= 4) {
+      selectedOption = this.container.querySelector('[data-size="' + size + '"]');
+    } else {
+      selectedOption = this.container.querySelector('[data-size="4"]');
+      selectedOption.classList.add('labeled');
+      selectedOption.setAttribute('real-pen-size', size);
+    }
     if (selectedOption) {
       selectedOption.classList.add('selected');
     }

src/js/service/pensize/PenSizeService.js

@@ -2,7 +2,7 @@
   var ns = $.namespace('pskl.service.pensize');
 
   var MIN_PENSIZE = 1;
-  var MAX_PENSIZE = 4;
+  var MAX_PENSIZE = 32;
 
   /**
    * Service to retrieve and modify the current pen size.

src/js/utils/PixelUtils.js

@@ -76,33 +76,19 @@
      *
      * @param  {Number} row  x-coordinate of the original pixel
      * @param  {Number} col  y-coordinate of the original pixel
-     * @param  {Number} size >= 1 && <= 4
+     * @param  {Number} size >= 1 && <= 32
      * @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);
+      var pixels = [];
+
+      for (var j = 0; j < size; j++) {
+        for (var i = 0; i < size; i++) {
+          pixels.push([col - Math.floor(size / 2) + i, row - Math.floor(size / 2) + j]);
+        }
       }
+
+      return pixels;
     },
 
     /**

src/templates/drawing-tools.html

@@ -43,4 +43,4 @@
   <script type="text/template" id="drawingTool-item-template">
     <li rel="tooltip" data-placement="{{tooltipposition}}" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
   </script>
-</div>
+</div>

test/js/service/pensize/PenSizeServiceTest.js

@@ -51,12 +51,12 @@ describe("PenSize test suite", function() {
   });
 
   it("skips invalid value (outside of [1, 4])", function() {
-    console.log('[PenSizeService] skips invalid value (outside of [1, 4])');
+    console.log('[PenSizeService] skips invalid value (outside of [1, 32])');
     userSettingsPenSize = 1;
 
     penSizeService.init();
-    // MAX_VALUE is 4
-    penSizeService.setPenSize(5);
+    // MAX_VALUE is 32
+    penSizeService.setPenSize(33);
     expect(penSizeService.getPenSize()).toBe(1);
     // MIN_VALUE is 1
     penSizeService.setPenSize(0);
@@ -70,4 +70,4 @@ describe("PenSize test suite", function() {
     // no event fired
     expect($.publish.calls.any()).toBe(false);
   });
-});
+});