Merge pull request #210 from ufal/add-select-mode

Add select mode

Author: kasnerz

factgenie/static/css/custom.css

@@ -1036,6 +1036,13 @@ a:hover {
     user-select: none;
 }
 
+.annotatable-paragraph.select-mode-enabled {
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+}
+
 .whitespace {
     display: inline;
 }

factgenie/static/js/annotate.js

@@ -325,6 +325,12 @@ $(".btn-eraser").change(function () {
     }
 });
 
+$(".btn-select").change(function () {
+    if (this.checked) {
+        spanAnnotator.setCurrentAnnotationType(-2);
+    }
+});
+
 $('.btn-check').on('change', function () {
     $('.btn-check').each(function () {
         const label = $(`label[for=${this.id}]`);

factgenie/static/js/span-annotator.js

@@ -27,18 +27,25 @@ class SpanAnnotator {
         // make sure that type is integer
         this.currentType = parseInt(type);
 
-        // Get all annotatable paragraphs
-        const paragraphs = $('.annotate-box');
-
-        if (type === -1) {
+        // Get all annotatable paragraph boxes
+        const paragraphBoxes = $('.annotate-box');
+        const paragraphs = $('.annotatable-paragraph');
+
+        if (type === -2) {
+            // Select mode - use text cursor
+            paragraphs.addClass('select-mode-enabled');
+            paragraphBoxes.css('cursor', 'text');
+        } else if (type === -1) {
+            paragraphs.removeClass('select-mode-enabled');
             // Eraser mode - use eraser cursor
-            paragraphs.css('cursor', 'pointer');
+            paragraphBoxes.css('cursor', 'pointer');
         } else if (type != null) {
+            paragraphs.removeClass('select-mode-enabled');
             // Annotation mode - use colored brush cursor based on category
             const color = this.annotationTypes[type]?.color;
             if (color) {
                 // Create colored cursor style
-                paragraphs.css({
+                paragraphBoxes.css({
                     'cursor': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 328.862 328.862'%3E%3Cg%3E%3Cpath fill='${encodeURIComponent(color)}' d='M251.217,195.25L56.286,69.063c-4.609-2.984-10.48-3.21-15.308-0.591c-4.826,2.62-7.835,7.667-7.844,13.158l-0.375,232.206c-0.01,6.371,4.006,12.054,10.016,14.172c1.633,0.576,3.315,0.854,4.981,0.854c4.464,0,8.802-1.997,11.704-5.617l71.455-89.101l113.645-11.378c6.34-0.635,11.587-5.206,13.085-11.398C259.143,205.176,256.566,198.712,251.217,195.25z'/%3E%3C/g%3E%3C/svg%3E") 7 7, pointer`
                 });
             }
@@ -164,14 +171,22 @@ class SpanAnnotator {
         const $element = $elementPar.parent();
 
         $element.on('selectstart', (e) => {
-            e.preventDefault();
+            // Only prevent selection when not in select mode
+            if (this.currentType !== -2) {
+                e.preventDefault();
+            }
         });
 
         $element.on('contextmenu', (e) => {
             e.preventDefault();
         });
 
         $element.on('mousedown', (e) => {
+            // Skip annotation logic in select mode
+            if (this.currentType === -2) {
+                return;
+            }
+
             if (e.button === 2) { // Right click
                 const span = this._findClosestSpan(objectId, e.clientX, e.clientY);
                 if (span) {

factgenie/templates/crowdsourcing/annotate_body.html

@@ -67,11 +67,18 @@ <h2 class="accordion-header">
                     {{ category.name }}
                   </label>
                   {% endfor %}
-                  <input type="radio" class="btn-check btn-outline-secondary btn-eraser" name="btnradio"
-                    id="btnradioeraser" autocomplete="off" data-cat-idx="-1">
-                  <label class="btn btn-err-cat-label ms-auto" for="btnradioeraser" style="background-color: #FFF; color: #000 !important;">
-                    Erase mode
-                  </label>
+                  <div class="ms-auto">
+                    <input type="radio" class="btn-check btn-outline-secondary btn-select" name="btnradio"
+                      id="btnradioselect" autocomplete="off" data-cat-idx="-2">
+                    <label class="btn btn-err-cat-label" for="btnradioselect" style="background-color: #FFF; color: #000 !important;">
+                      <i class="fa fa-mouse-pointer" aria-hidden="true"></i> Select mode
+                    </label>
+                    <input type="radio" class="btn-check btn-outline-secondary btn-eraser" name="btnradio"
+                      id="btnradioeraser" autocomplete="off" data-cat-idx="-1">
+                    <label class="btn btn-err-cat-label" for="btnradioeraser" style="background-color: #FFF; color: #000 !important;">
+                      <i class="fa fa-eraser" aria-hidden="true"></i> Erase mode
+                    </label>
+                  </div>
                 </div>
               </div>
               <div id='text-type-info' class='mt-3'>Drag your mouse over the text to highlight the span:

factgenie/templates/pages/app_config.html

@@ -39,7 +39,7 @@ <h5>Password protection</h5>
         <div class="form-group mt-3">
           <label for="lock_view_pages">Include view pages in password protection</label>
           <div class="mb-2">
-            <small class="form-text text-muted">If disable, the Browse and Analyze pages will not require login even
+            <small class="form-text text-muted">If disabled, the Browse and Analyze pages will not require login even
               when login is active. Useful for publishing results collected with factgenie.</small>
           </div>
           <div class="form-check form-switch">
@@ -117,7 +117,7 @@ <h5>API Keys</h5>
         <div class="form-group mt-3">
           <label>OpenAI</label>
           <div class="mb-2">
-            <small class="form-text text-muted">API key for OpenAI models (GPT-3, GPT-4, etc.)</small>
+            <small class="form-text text-muted">API key for OpenAI models</small>
           </div>
           <input type="password" class="form-control" id="openai_api_key" name="openai_api_key" 
             value="{{ app_config.api_keys.OPENAI_API_KEY }}">