diff --git a/app/js/IconBase.js b/app/js/IconBase.js index d18dc5a..70588ba 100644 --- a/app/js/IconBase.js +++ b/app/js/IconBase.js @@ -3,7 +3,8 @@ const SHAPE_CIRCLE = 0, - SHAPE_SQUARE = 1; + SHAPE_SQUARE = 1, + SHAPE_SQUARE_NO_RADIUS = 2; class IconBase { @@ -37,31 +38,52 @@ class IconBase { }); this.squareBasePath.remove(); + this.squareNoRadiusBasePath = new paper.Path.Rectangle({ + point: new paper.Point(center.x - radius, center.y - radius), + size: new paper.Size(radius * 2, radius * 2), + radius: 0, + shadowColor: 0, + shadowBlur: 0, + shadowOffset: 0, + name: IconBase.ID() + }); + this.squareNoRadiusBasePath.remove(); } setSquareShape() { + this.squareNoRadiusBasePath.replaceWith(this.squareBasePath); this.circleBasePath.replaceWith(this.squareBasePath); this.shape = SHAPE_SQUARE; } setCircularShape() { + this.squareNoRadiusBasePath.replaceWith(this.circleBasePath); this.squareBasePath.replaceWith(this.circleBasePath); this.shape = SHAPE_CIRCLE; } + setSquareNoRadiusShape() { + this.squareBasePath.replaceWith(this.squareNoRadiusBasePath); + this.circleBasePath.replaceWith(this.squareNoRadiusBasePath); + this.shape = SHAPE_SQUARE_NO_RADIUS; + } + setColor(color) { this.circleBasePath.fillColor = color; this.squareBasePath.fillColor = color; + this.squareNoRadiusBasePath.fillColor = color; } setCenter(center) { this.circleBasePath.center = center; this.squareBasePath.center = center; + this.squareNoRadiusBasePath.center = center; } getPathWithoutShadows() { if (this.shape === SHAPE_CIRCLE) return this.circleBasePath; else if (this.shape == SHAPE_SQUARE) return this.squareBasePath; + else if (this.shape == SHAPE_SQUARE_NO_RADIUS) return this.squareNoRadiusBasePath; console.warn('unknown base shape type ' + this.shape); } @@ -71,6 +93,7 @@ class IconBase { remove() { this.circleBasePath.remove(); this.squareBasePath.remove(); + this.squareNoRadiusBasePath.remove(); } } diff --git a/app/js/IconManager.js b/app/js/IconManager.js index 6d5d711..9dd5448 100644 --- a/app/js/IconManager.js +++ b/app/js/IconManager.js @@ -167,13 +167,16 @@ class IconManager { let baseShapePicker = this.containerEdit.find('#base-shape input[name="radio-base-shape"]'); this.setIconBaseShapeFunction = function(event, disableDraw) { let setCircularShape = this.containerEdit.find('#base-shape-circle')[0].checked === true; + let setSquareShape = this.containerEdit.find('#base-shape-square')[0].checked === true; if (setCircularShape) { this.iconBase.setCircularShape(); - } else { + } else if (setSquareShape) { this.iconBase.setSquareShape(); + } else { + this.iconBase.setSquareNoRadiusShape(); } if (this.icon) { - ga('send', 'event', gaConstants.CATEGORY_EDITOR, gaConstants.ACTION_CHANGE_BASE_SHAPE, setCircularShape ? 'circular' : 'square'); + ga('send', 'event', gaConstants.CATEGORY_EDITOR, gaConstants.ACTION_CHANGE_BASE_SHAPE, setCircularShape ? 'circular' : (setSquareShape ? 'square' : 'square-no-radius')); this.icon.applyIcon(); this.icon.getIconShadow().applyShadow(); } diff --git a/app/templates/editor.static.jade b/app/templates/editor.static.jade index 798198d..c7987c8 100644 --- a/app/templates/editor.static.jade +++ b/app/templates/editor.static.jade @@ -49,6 +49,11 @@ label(for='base-shape-square') span span Square + .radio-inline + input(type='radio', name='radio-base-shape')#base-shape-square-no-radius + label(for='base-shape-square-no-radius') + span + span Square No Radius .controls-entry .row