drh-wip-stroke-width.diff

diff --git a/js/src/annotations/osd-svg-ellipse.js b/js/src/annotations/osd-svg-ellipse.js
index 98a3c41..c568d62 100644
--- a/js/src/annotations/osd-svg-ellipse.js
+++ b/js/src/annotations/osd-svg-ellipse.js
@@ -43,8 +43,8 @@
         name: overlay.getName(_this)
       });
       shape.dashArray = overlay.dashArray;
-      shape.data.defaultStrokeValue = 1;
-      shape.data.editStrokeValue = 5;
+      shape.data.defaultStrokeValue = overlay.strokeWidth;
+      shape.data.editStrokeValue = 5 + shape.data.defaultStrokeValue;
       shape.data.currentStrokeValue = shape.data.defaultStrokeValue;
       shape.strokeWidth = shape.data.currentStrokeValue / overlay.paperScope.view.zoom;
       shape.strokeColor = overlay.strokeColor;
diff --git a/js/src/annotations/osd-svg-overlay.js b/js/src/annotations/osd-svg-overlay.js
index 0103a5a..ca84824 100644
--- a/js/src/annotations/osd-svg-overlay.js
+++ b/js/src/annotations/osd-svg-overlay.js
@@ -35,6 +35,7 @@
       doubleClickReactionTime: drawingToolsSettings.doubleClickReactionTime,
       availableAnnotationDrawingTools: availableAnnotationDrawingTools,
       availableExternalCommentsPanel: availableExternalCommentsPanel,
+      strokeWidth: 5,
       dashArray: [],
       fixedShapeSize: drawingToolsSettings.fixedShapeSize,
       selectedColor: drawingToolsSettings.selectedColor || '#004c66',
@@ -253,6 +254,20 @@
         }
       }));
 
+      this.eventsSubscriptions.push(_this.eventEmitter.subscribe('toggleBorderWidth.' + _this.windowId, function (event, type) {
+        if (type == 'thin') {
+          _this.strokeWidth = 1;
+        } else if (type == 'normal') {
+          _this.strokeWidth = 5;
+        } else if (type == 'thick') {
+          _this.strokeWidth = 15;
+        }
+        if (_this.hoveredPath) {
+          _this.hoveredPath.strokeWidth = _this.strokeWidth;
+          _this.paperScope.view.draw();
+        }
+      }));
+
       this.eventsSubscriptions.push(_this.eventEmitter.subscribe('annotationEditSave.'+_this.windowId,function(event,oaAnno){
         var onAnnotationSaved = jQuery.Deferred();
         if (!_this.draftPaths.length) {
diff --git a/js/src/settings.js b/js/src/settings.js
index 2aa4a20..c57bb8c 100644
--- a/js/src/settings.js
+++ b/js/src/settings.js
@@ -115,7 +115,7 @@
        'Rectangle', 'Ellipse', 'Freehand', 'Polygon', 'Pin'
     ],
     'availableAnnotationStylePickers':[
-        'StrokeColor','FillColor','StrokeType'
+        'StrokeColor','FillColor','StrokeType','StrokeWidth'
     ],
     'drawingToolsSettings': {
       // Additional tool settings.
diff --git a/js/src/widgets/contextControls.js b/js/src/widgets/contextControls.js
index 2ebf4b6..a8b1be9 100644
--- a/js/src/widgets/contextControls.js
+++ b/js/src/widgets/contextControls.js
@@ -19,12 +19,16 @@
     init: function() {
       var _this = this;
       var showStrokeStyle = false,
+      showStrokeWidth = false,
       showStrokeColor = false,
       showFillColor = false;
       this.availableAnnotationStylePickers.forEach(function(picker) {
         if (picker === 'StrokeType') {
           showStrokeStyle = true;
         }
+        if (picker === 'StrokeWidth') {
+          showStrokeWidth = true;
+        }
         if (picker === 'FillColor') {
           showFillColor = true;
         }
@@ -41,7 +45,17 @@
         },
         'dotdashed':function(el){
           _this.setBackgroundImage(el,  'border_type_3.png');
-        }
+        },
+        'thin':function(el){
+          _this.setBackgroundImage(el,'border_type_1.png');
+        },
+        'normal':function(el){
+          _this.setBackgroundImage(el,'border_type_1.png');
+        },
+        'thick':function(el){
+          _this.setBackgroundImage(el,'border_type_1.png');
+        },
+
       };
       var annotationProperties = this.canvasControls.annotations;
 
@@ -50,6 +64,7 @@
           tools : _this.availableAnnotationTools,
           showEdit : annotationProperties.annotationCreation,
           showStrokeStyle: showStrokeStyle,
+          showStrokeWidth: showStrokeWidth,
           showStrokeColor: showStrokeColor,
           showFillColor: showFillColor,
           showRefresh : annotationProperties.annotationRefresh
@@ -63,6 +78,10 @@
         this.addStrokeStylePicker();
       }
 
+      if(showStrokeWidth){
+        this.addStrokeWidthPicker();
+      }
+
       if (this.canvasControls.imageManipulation.manipulationLayer) {
         this.manipulationElement = jQuery(this.manipulationTemplate({
           filtersSupported: Modernizr.cssfilters,
@@ -122,6 +141,12 @@
       this.setBackground.dotdashed(this.container.find('.mirador-line-type .dotdashed'));
     },
 
+    addStrokeWidthPicker:function(){
+      this.setBackground.thin(this.container.find('.mirador-line-width .thin'));
+      this.setBackground.normal(this.container.find('.mirador-line-width .normal'));
+      this.setBackground.thick(this.container.find('.mirador-line-width .thick'));
+    },
+
     setBorderFillColorPickers: function() {
       var _this = this;
       var defaultBorderColor = _this.state.getStateProperty('drawingToolsSettings').strokeColor,
@@ -248,6 +273,29 @@
         _this.setBackground[className](_this.container.find('.mirador-line-type .border-type-image'));
         _this.eventEmitter.publish('toggleBorderType.' + _this.windowId, className);
       });
+
+      // width
+      this.container.find('.mirador-line-width').on('mouseenter', function() {
+        if (jQuery(this).hasClass('hud-disabled')) {
+          return false;
+        }
+        _this.container.find('.width-list').stop().slideFadeToggle(300);
+      });
+      this.container.find('.mirador-line-width').on('mouseleave', function() {
+        if (jQuery(this).hasClass('hud-disabled')) {
+          return false;
+        }
+        _this.container.find('.width-list').stop().slideFadeToggle(300);
+      });
+      this.container.find('.mirador-line-with').find('ul li').on('click', function() {
+        if (jQuery(this).hasClass('hud-disabled')) {
+          return false;
+        }
+        var className = jQuery(this).find('i').attr('class').replace(/fa/, '').replace(/ /, '');
+        _this.removeBackgroundImage(_this.container.find('.mirador-line-width .border-width-image'));
+        _this.setBackground[className](_this.container.find('.mirador-line-width .border-width-image'));
+        _this.eventEmitter.publish('toggleBorderWidth.' + _this.windowId, className);
+      });
     },
 
     annotationTemplate: Handlebars.compile([
@@ -272,6 +320,18 @@
                                    '</ul>',
                                    '</a>',
                                    '{{/if}}',
+                                   '{{#if showStrokeWidth}}',
+                                   '<a class="hud-control hud-dropdown hud-disabled mirador-line-width" aria-label="{{t "borderWidthTooltip"}}" title="{{t "borderWidthTooltip"}}">',
+                                   '<i class="material-icons mirador-border-icon">create</i>',
+                                   '<i class="border-width-image solid"></i>',
+                                   '<i class="fa fa-caret-down dropdown-icon"></i>',
+                                   '<ul class="dropdown width-list">',
+                                   '<li><i class="fa thin"></i> {{t "thin"}}</li>',
+                                   '<li><i class="fa normal"></i> {{t "normal"}}</li>',
+                                   '<li><i class="fa thick"></i> {{t "thick"}}</li>',
+                                   '</ul>',
+                                   '</a>',
+                                   '{{/if}}',
                                    '{{#if showStrokeColor}}',
                                    '<a class="hud-control hud-dropdown hud-disabled mirador-osd-color-picker" title="{{t "borderColorTooltip"}}">',
                                    '<input type="text" class="borderColorPicker"/>',
diff --git a/locales/en/translation.json b/locales/en/translation.json
index 84fb5d8..798a07f 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -14,6 +14,7 @@
     "bookView": "Book View",
     "borderColorTooltip": "Choose border color",
     "borderTypeTooltip": "Choose border style",
+    "borderWidthTooltip": "Choose border width",
     "brightnessTooltip": "Adjust brightness",
     "cancel": "Cancel",
     "cancelAnnotation": "Do you want to cancel this annotation?",