Merge pull request #188 from SenteraLLC/fix/brush-state

Added brush button active class and toggles

changelog.md

@@ -6,6 +6,10 @@ All notable changes to this project will be documented here.
 
 Nothing yet.
 
+## [0.14.1] - Oct 2nd, 2024
+- Add a `brush-button-active` CSS class to the "brush" and "erase" buttons
+that visually depicts when the brush or erase tool is active
+
 ## [0.14.0] - Oct 1st, 2024
 - Add `.get_current_subtask_key()` and `.get_current_subtask()` utility methods
     - Updated almost all internal methods to use these utility methods

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ulabel",
   "description": "An image annotation tool.",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "main": "dist/ulabel.js",
   "module": "dist/ulabel.js",
   "scripts": {

src/index.js

@@ -49,6 +49,7 @@ import {
     BACK_Z_INDEX,
 } from './blobs';
 import { ULABEL_VERSION } from './version';
+import { BrushToolboxItem } from '../build/toolbox';
 
 jQuery.fn.outer_html = function () {
     return jQuery('<div />').append(this.eq(0).clone()).html();
@@ -1362,7 +1363,6 @@ export class ULabel {
      */
     get_current_subtask() {
         return this.subtasks[this.get_current_subtask_key()];
-
     }
 
     readjust_subtask_opacities() {
@@ -2783,6 +2783,8 @@ export class ULabel {
         // Try and switch to polygon mode if not already in it
         if (!is_in_polygon_mode) {
             is_in_polygon_mode = this.set_and_update_annotation_mode("polygon");
+            $("#brush-mode").removeClass(BrushToolboxItem.BRUSH_BTN_ACTIVE_CLS);
+            $("#erase-mode").removeClass(BrushToolboxItem.BRUSH_BTN_ACTIVE_CLS);
         }
         // If we're in polygon mode, toggle brush mode
         if (is_in_polygon_mode) {
@@ -2807,30 +2809,45 @@ export class ULabel {
                 let gmx = this.get_global_mouse_x(mouse_event);
                 let gmy = this.get_global_mouse_y(mouse_event);
                 this.create_brush_circle(gmx, gmy);
+                $("#brush-mode").addClass(BrushToolboxItem.BRUSH_BTN_ACTIVE_CLS);
             } else {
                 this.destroy_brush_circle();
+                $("#brush-mode").removeClass(BrushToolboxItem.BRUSH_BTN_ACTIVE_CLS);
             }
         }
     }
 
     toggle_erase_mode(mouse_event) {
-        const current_subtask = this.get_current_subtask_key();
+        const current_subtask = this.get_current_subtask();
         // If not in brush mode, turn it on
-        if (!this.subtasks[current_subtask]["state"]["is_in_brush_mode"]) {
+        if (!current_subtask["state"]["is_in_brush_mode"]) {
             this.toggle_brush_mode(mouse_event);
         }
 
         // Toggle erase mode
-        this.subtasks[current_subtask]["state"]["is_in_erase_mode"] = !this.subtasks[current_subtask]["state"]["is_in_erase_mode"];
+        if (current_subtask["state"]["is_in_erase_mode"]) {
+            $("#erase-mode").removeClass(BrushToolboxItem.BRUSH_BTN_ACTIVE_CLS);
+            // "Erase mode" is a subset of "brush mode"
+            if (current_subtask["state"]["is_in_brush_mode"]) {
+                $("#brush-mode").addClass(BrushToolboxItem.BRUSH_BTN_ACTIVE_CLS);
+            }
+        } else {
+            $("#erase-mode").addClass(BrushToolboxItem.BRUSH_BTN_ACTIVE_CLS);
+            $("#brush-mode").removeClass(BrushToolboxItem.BRUSH_BTN_ACTIVE_CLS);
+        }
+        current_subtask["state"]["is_in_erase_mode"] = !current_subtask["state"]["is_in_erase_mode"];
 
         // Update brush circle color
         const brush_circle_id = "brush_circle";
         $("#" + brush_circle_id).css({
-            "background-color": this.subtasks[current_subtask]["state"]["is_in_erase_mode"] ? "red" : "white",
+            "background-color": current_subtask["state"]["is_in_erase_mode"] ? "red" : "white",
         });
 
         // When turning off erase mode, also turn off brush mode
-        if (this.subtasks[current_subtask]["state"]["is_in_brush_mode"] && !this.subtasks[current_subtask]["state"]["is_in_erase_mode"]) {
+        if (
+            current_subtask["state"]["is_in_brush_mode"] &&
+            !current_subtask["state"]["is_in_erase_mode"]
+        ) {
             this.toggle_brush_mode();
         }
     }

src/toolbox.ts

@@ -519,6 +519,10 @@ export class ModeSelectionToolboxItem extends ToolboxItem {
 export class BrushToolboxItem extends ToolboxItem {
     public html: string;
     private ulabel: ULabel
+    /**
+     * CSS class indicating the brush button is active
+     */
+    public static BRUSH_BTN_ACTIVE_CLS: string = "brush-button-active";
 
     constructor(ulabel: ULabel) {
         super();
@@ -534,7 +538,6 @@ export class BrushToolboxItem extends ToolboxItem {
      * Create the css for this ToolboxItem and append it to the page.
      */
     protected add_styles() {
-        // Define the css
         // Define the css
         const css = `
         #toolbox div.brush button:not(.circle) {
@@ -554,6 +557,10 @@ export class BrushToolboxItem extends ToolboxItem {
         #toolbox div.brush span.brush-mode {
             display: flex;
         }        
+        
+        #toolbox div.brush button.brush-button.${BrushToolboxItem.BRUSH_BTN_ACTIVE_CLS} {
+            background-color: #1c2d4d;
+        }
         `
         // Create an id so this specific style tag can be referenced
         const style_id = "brush-toolbox-item-styles"
@@ -594,7 +601,7 @@ export class BrushToolboxItem extends ToolboxItem {
                 case "brush-dec":
                     this.ulabel.change_brush_size(1/1.1);
                     break
-            }
+            };
         })
     }
 
@@ -628,7 +635,7 @@ export class BrushToolboxItem extends ToolboxItem {
 
     public after_init() {
         // Only show BrushToolboxItem if the current mode is polygon
-        if (this.ulabel.get_current_subtask().state["annotation_mode"] === "polygon") {
+        if (this.ulabel.get_current_subtask().state["annotation_mode"] !== "polygon") {
             BrushToolboxItem.hide_brush_toolbox_item()
         }
     }

src/version.js

@@ -1 +1 @@
-export const ULABEL_VERSION = "0.14.0";
+export const ULABEL_VERSION = "0.14.1";