diff --git a/src/css/pensize.css b/src/css/pensize.css index 231041a3..d00779e5 100644 --- a/src/css/pensize.css +++ b/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; -} \ No newline at end of file +} + +.pen-size-option.labeled:before { + content: attr(real-pen-size); +} diff --git a/src/js/controller/PenSizeController.js b/src/js/controller/PenSizeController.js index 0e8bc1fa..324e4cf6 100644 --- a/src/js/controller/PenSizeController.js +++ b/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'); } diff --git a/src/js/service/pensize/PenSizeService.js b/src/js/service/pensize/PenSizeService.js index 5866cff2..9a3f7b2f 100644 --- a/src/js/service/pensize/PenSizeService.js +++ b/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. diff --git a/src/js/utils/PixelUtils.js b/src/js/utils/PixelUtils.js index 667d7a48..b6d2d3a0 100644 --- a/src/js/utils/PixelUtils.js +++ b/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; }, /** diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html index 003ab3a4..62c174b8 100644 --- a/src/templates/drawing-tools.html +++ b/src/templates/drawing-tools.html @@ -43,4 +43,4 @@ - \ No newline at end of file + diff --git a/test/js/service/pensize/PenSizeServiceTest.js b/test/js/service/pensize/PenSizeServiceTest.js index 3fd48c13..b966c1bf 100644 --- a/test/js/service/pensize/PenSizeServiceTest.js +++ b/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); }); -}); \ No newline at end of file +});