Make stroke width configurable.

css/pdfdraw.css

@@ -100,17 +100,28 @@
   float: left;
 }
 
-#colorPicker {
+#settingsDialog {
   display: none;
   position: absolute;
   background: rgba(0, 0, 0, 0.5);
-  left: 50%;
-  top: 50%;
+  top: 48px;
+  right: 16px;
   z-index: 10000;
   padding: 20px;
   border-radius: 20px;
-  margin-left: -160px;
-  margin-top: -160px;
+}
+
+#settingsDialog label {
+  display: block;
+  color: white;
+}
+
+.settings-field {
+  margin-top: 1em;
+}
+
+.settings-field input {
+  width: 100%;
 }
 
 .toolbarButton.close::before {

src/pdfdraw.js

@@ -49,6 +49,8 @@ var INITAL_COLORS  = [
   "#800080",
 ];
 
+var DEFAULT_STROKE_WIDTH = 5;
+
 var PERMISSION_CREATE = 4;
 var PERMISSION_READ = 1;
 var PERMISSION_UPDATE = 2;
@@ -170,7 +172,7 @@ FreehandDrawer.prototype.onMouseDown = function(page_annotator, event) {
   this.path = page_annotator.createPath({
     name: getObjectId(),
     strokeColor: this.annotator.color,
-    strokeWidth: 5
+    strokeWidth: this.annotator.strokeWidth,
   });
 };
 
@@ -220,7 +222,7 @@ RectangleDrawer.prototype.onMouseDown = function(page_annotator, event) {
   this.options = {
     name: getObjectId(),
     strokeColor: this.annotator.color,
-    strokeWidth: 5,
+    strokeWidth: this.annotator.strokeWidth,
     from: [event.point.x, event.point.y],
     to: [event.point.x, event.point.y],
   };
@@ -269,7 +271,7 @@ EllipseDrawer.prototype.onMouseDown = function(page_annotator, event) {
   this.options = {
     name: getObjectId(),
     strokeColor: this.annotator.color,
-    strokeWidth: 5,
+    strokeWidth: this.annotator.strokeWidth,
     from: [event.point.x, event.point.y],
     to: [event.point.x, event.point.y],
   };
@@ -440,12 +442,12 @@ SelectDrawer.prototype.onItemMoved = function(page_annotator, name, item, event)
 
 var ColorPickerDrawer = function(annotator, previous_mode) {
   BaseDrawer.apply(this, arguments);
-  this.annotator.showColorPicker();
+  this.annotator.showSettings();
 };
 ColorPickerDrawer.prototype = Object.create(BaseDrawer.prototype);
 
 ColorPickerDrawer.prototype.destroy = function() {
-  this.annotator.hideColorPicker();
+  this.annotator.hideSettings();
 };
 
 ColorPickerDrawer.prototype.onClick = function(page_annotator, event) {
@@ -724,6 +726,17 @@ PageAnnotator.prototype.deleteItem = function(name) {
   path.remove();
 };
 
+function parseStrokeWidth(value) {
+  if (typeof(value) !== "number") {
+    value = parseInt(value, 10);
+  }
+  if (value <= 0 || isNaN(value)) {
+    return DEFAULT_STROKE_WIDTH;
+  }
+
+  return value;
+}
+
 function Annotator(socketurl, id, userid, displayname, token) {
   this.annotators = {};
   this.cursors = {};
@@ -740,6 +753,14 @@ function Annotator(socketurl, id, userid, displayname, token) {
     this.storage.set('color', color);
   }
   this.color = color;
+  var strokeWidth = this.storage.get('strokeWidth');
+  if (!strokeWidth) {
+    strokeWidth = DEFAULT_STROKE_WIDTH;
+    this.storage.set('strokeWidth', strokeWidth);
+  } else {
+    strokeWidth = parseStrokeWidth(strokeWidth);
+  }
+  this.strokeWidth = strokeWidth;
   this.pageCount = -1;
   this.currentPage = null;
   this.users = {};
@@ -780,18 +801,31 @@ function Annotator(socketurl, id, userid, displayname, token) {
   this.colorPicker.on("color:init", setColor);
   this.colorPicker.on("color:change", setColor);
 
+  $('#inputStrokeWidth').val(this.strokeWidth);
+  $('#strokeWidthValue').text(this.strokeWidth);
+  $('#inputStrokeWidth').on('input', function(e) {
+    var strokeWidth = parseStrokeWidth(e.target.value);
+    this.storage.set('strokeWidth', strokeWidth);
+    this.strokeWidth = strokeWidth;
+  }.bind(this));
+
+  $('#inputStrokeWidth').on('change', function(e) {
+    var strokeWidth = parseStrokeWidth(e.target.value);
+    $('#strokeWidthValue').text(strokeWidth);
+  }.bind(this));
+
   this.userlist = $("<div class='userlist'></div>");
   $("#mainContainer").append(this.userlist);
   this.connectionError = $("#connectionError");
   this.connectingMessage = $("#connectingMessage");
 }
 
-Annotator.prototype.showColorPicker = function() {
-  $("#colorPicker").show();
+Annotator.prototype.showSettings = function() {
+  $("#settingsDialog").show();
 };
 
-Annotator.prototype.hideColorPicker = function() {
-  $("#colorPicker").hide();
+Annotator.prototype.hideSettings = function() {
+  $("#settingsDialog").hide();
 };
 
 Annotator.prototype.onDisconnect = function() {

templates/viewer.php

@@ -47,7 +47,15 @@ See https://github.com/adobe-type-tools/cmap-resources
   </head>
 
   <body tabindex="1" class="loadingInProgress">
-    <div id="colorPicker">
+    <div id="settingsDialog">
+      <div id="colorPicker"></div>
+      <div class="settings-field">
+        <label for="inputStrokeWidth">
+          <?php p($l->t('Stroke width')) ?>
+          <span id="strokeWidthValue"></span>
+        </label>
+        <input type="range" min="1" max="10" id="inputStrokeWidth" value="5"/>
+      </div>
     </div>
     <div id="connectingMessage">
       <?php p($l->t('Establishing connection, please wait...')) ?>

translationfiles/templates/pdfdraw.pot

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Nextcloud 3.14159\n"
 "Report-Msgid-Bugs-To: translations\\@example.com\n"
-"POT-Creation-Date: 2021-12-07 16:43+0100\n"
+"POT-Creation-Date: 2021-12-08 14:42+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -106,73 +106,77 @@ msgstr ""
 msgid "Shared secret"
 msgstr ""
 
-#: templates/viewer.php:53
+#: templates/viewer.php:54
+msgid "Stroke width"
+msgstr ""
+
+#: templates/viewer.php:61
 msgid "Establishing connection, please wait..."
 msgstr ""
 
-#: templates/viewer.php:56
+#: templates/viewer.php:64
 msgid "The connection is interrupted, reconnecting..."
 msgstr ""
 
-#: templates/viewer.php:59
+#: templates/viewer.php:67
 msgid "Generating combined PDF, please wait..."
 msgstr ""
 
-#: templates/viewer.php:62
+#: templates/viewer.php:70
 msgid "PDF generation failed, please try again later."
 msgstr ""
 
-#: templates/viewer.php:222
-#: templates/viewer.php:224
+#: templates/viewer.php:230
+#: templates/viewer.php:232
 msgid "Freehand"
 msgstr ""
 
-#: templates/viewer.php:227
-#: templates/viewer.php:229
+#: templates/viewer.php:235
+#: templates/viewer.php:237
 msgid "Rectangle"
 msgstr ""
 
-#: templates/viewer.php:232
-#: templates/viewer.php:234
+#: templates/viewer.php:240
+#: templates/viewer.php:242
 msgid "Ellipse"
 msgstr ""
 
-#: templates/viewer.php:237
-#: templates/viewer.php:239
+#: templates/viewer.php:245
+#: templates/viewer.php:247
 msgid "Line"
 msgstr ""
 
-#: templates/viewer.php:289
-#: templates/viewer.php:291
+#: templates/viewer.php:297
+#: templates/viewer.php:299
 msgid "No tool"
 msgstr ""
 
-#: templates/viewer.php:294
-#: templates/viewer.php:296
+#: templates/viewer.php:302
+#: templates/viewer.php:304
 msgid "Select"
 msgstr ""
 
-#: templates/viewer.php:299
-#: templates/viewer.php:301
+#: templates/viewer.php:307
+#: templates/viewer.php:309
 msgid "Pointer"
 msgstr ""
 
-#: templates/viewer.php:305
-#: templates/viewer.php:307
+#: templates/viewer.php:313
+#: templates/viewer.php:315
 msgid "Draw mode"
 msgstr ""
 
-#: templates/viewer.php:312
-#: templates/viewer.php:314
+#: templates/viewer.php:320
+#: templates/viewer.php:322
 msgid "Select color"
 msgstr ""
 
-#: templates/viewer.php:317
-#: templates/viewer.php:319
+#: templates/viewer.php:325
+#: templates/viewer.php:327
 msgid "Download"
 msgstr ""
 
-#: templates/viewer.php:322
-#: templates/viewer.php:324
+#: templates/viewer.php:330
+#: templates/viewer.php:332
 msgid "Close"
 msgstr ""