[WS-488] [WS-954] feature/comment

api_spec.md

@@ -245,6 +245,7 @@ The full list of `"allowed_modes"` that are currently supported is:
 - `"point"`: A keypoint within a single frame
 - `"delete_polygon"`: Allows drawing a polygon around an area, and all annotations within that area will be deleted
 - `"delete_bbox"`: Allows drawing a bounding box around an area, and all annotations within that area will be deleted
+- `"comment"`: Allows drawing a bounding box around an area, and a comment can be added to that area
 
 The list of modes currently **under construction** is:
 
@@ -293,21 +294,21 @@ URL to a page that gives annotation instructions.
 {
     default_toolbox_item_order: AllowedToolboxItem[],
 
-    default_keybinds = {
-        "annotation_size_small": string,
-        "annotation_size_large": string,
-        "annotation_size_plus": string,
-        "annotation_size_minus": string,
-        "annotation_vanish": string
-    },
-
     distance_filter_toolbox_item: FilterDistanceConfig,
 
+    annotation_size_small_keybind: string,
+
+    annotation_size_large_keybind: string,
+
+    annotation_size_plus_keybind: string,
+
+    annotation_size_minus_keybind: string,
+
+    annotation_vanish_keybind: string,
+
     change_zoom_keybind: string,
 
     create_point_annotation_keybind: string,
-
-    default_annotation_size: number,
 
     delete_annotation_keybind: string,
 

changelog.md

@@ -6,6 +6,14 @@ All notable changes to this project will be documented here.
 
 Nothing yet.
 
+## [0.11.0] - TODO: DATE
+- Fix bug where typing in text boxes would sometimes trigger keybinds.
+  - This fix included a refactor of some keypress events by combining them into a single event listener.
+- Deprecated the `default_keybinds` argument in the configuration object. Each of the keybinds previously set by `default_keybinds` can now be set individually. See `api_spec.md` for details.
+- Deprecated the `default_annotation_size` argument in the configuration object. Use the `initial_line_size` argument instead. See `api_spec.md` for details.
+- Removed cookie previously used to track subtask line size. New jobs will always default to the `initial_line_size` argument if provided.
+- Rework `vanish` mode to truly vanish annotations rather than just drawing them really really small. Also vanish all dialogs while vanished.
+
 ## [0.10.12] - May 24th, 2024
 - Fix broken undo/redo behavior for polygons.
 - General improvements aimed at reducing memory usage and improving performance.

demo/multi-class.html

@@ -73,7 +73,7 @@
                             "id": 21
                         }
                     ],
-                    "allowed_modes": ["whole-image"],
+                    "allowed_modes": ["whole-image", "comment"],
                     "resume_from": null,
                     "task_meta": null,
                     "annotation_meta": null

index.d.ts

@@ -104,7 +104,7 @@ export type ULabelSubmitHandler = (submitData: ULabelSubmitData) => void;
 /**
  * @link https://github.com/SenteraLLC/ulabel/blob/main/api_spec.md#subtasks
  */
-export type ULabelSpatialType = 'contour' | 'polygon' | 'polyline' | 'bbox' | 'tbar' | 'bbox3' | 'whole-image' | 'global' | 'point';
+export type ULabelSpatialType = 'contour' | 'polygon' | 'polyline' | 'bbox' | 'tbar' | 'bbox3' | 'whole-image' | 'global' | 'point' | 'comment' | 'delete_polygon' | 'delete_bbox';
 
 // A 2D spatial payload is a list of 2D points
 export type ULabelSpatialPayload = [number, number][];
@@ -166,6 +166,7 @@ export class ULabel {
     public set_annotations(annotations: ULabelAnnotation[], subtask: ULabelSubtask);
     public set_saved(saved: boolean);
     public redraw_all_annotations(subtask?: any, offset?: any, spatial_only?: any);
+    public redraw_annotation(annotation_id: string, subtask?: string, offset?: any): void;
     public show_annotation_mode(target_jq: JQuery<any>);
     public raise_error(message: string, level?: number);
     public rezoom(): void;
@@ -176,6 +177,9 @@ export class ULabel {
     public toggle_delete_class_id_in_toolbox(): void;
     public change_brush_size(scale_factor: number): void;
     public remove_listeners(): void;
+    public hide_global_edit_suggestion(): void;
+    public hide_edit_suggestion(): void;
+    public get_global_coords_from_annbox_point(point: Array<number>): Array<number>;
     static process_classes(ulabel_obj: any, arg1: string, subtask_obj: any);
     static build_id_dialogs(ulabel_obj: any);
 

package.json

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

src/annotation.ts

@@ -12,7 +12,9 @@ export const DELETE_MODES = ["delete_polygon", "delete_bbox"]
 export const DELETE_CLASS_ID = -1;
 export const MODES_3D = ["global", "bbox3"];
 export const NONSPATIAL_MODES = ["whole-image", "global"];
+export const TEXT_MODES = ["whole-image", "global", "comment"];
 export const N_ANNOS_PER_CANVAS = 100;
+export const LEGACY_DEFAULT_LINE_SIZE = 4;
 
 export type PolygonSpatialData = {
     spatial_payload: [number[]][],

src/comment.ts

@@ -0,0 +1,86 @@
+// Operations for "comment" annotation type
+import { ULabel } from "..";
+import { ULabelAnnotation } from "./annotation";
+import { FRONT_Z_INDEX } from "../src/blobs";
+import { ULabelSubtask } from "./subtask";
+
+/**
+ * Get the point at the center of the annotation bbox
+ * 
+ * @param {ULabelAnnotation} annotation Comment annotation
+ * @returns {Array<number>} Point at the center of the annotation bbox
+ */
+export function get_comment_center_point(annotation: ULabelAnnotation): Array<number> {
+    return [
+        annotation.spatial_payload[0][0] + (annotation.spatial_payload[1][0] - annotation.spatial_payload[0][0]) / 2,
+        annotation.spatial_payload[0][1] + (annotation.spatial_payload[1][1] - annotation.spatial_payload[0][1]) / 2
+    ];
+}
+
+
+/**
+ * Get the coordinates to place the comment window for a given annotation
+ * 
+ * @param {ULabel} ulabel ULabel instance
+ * @param {ULabelAnnotation} annotation Comment annotation
+ * @returns { { left: number, top: number } } Coordinates (left, top) of the comment window
+ */
+export function get_comment_window_coordinates(ulabel: ULabel, annotation: ULabelAnnotation): { left: number, top: number } {    
+    // The annotation spatial payload is a bbox [[x1, y1], [x2, y2]]
+    // We want to place the comment window at the top right corner of the bbox, so the greatest x and the smallest y
+    const x = Math.max(annotation.spatial_payload[0][0], annotation.spatial_payload[1][0]);
+    const y = Math.min(annotation.spatial_payload[0][1], annotation.spatial_payload[1][1]);
+    const coordinates = ulabel.get_global_coords_from_annbox_point([x, y]);
+    return {
+        left: coordinates[0],
+        top: coordinates[1]
+    };
+}
+
+/**
+ * Show window for a given comment annotation. Only one comment window can be shown at a time.
+ * 
+ * @param {ULabel} ulabel ULabel instance
+ * @param {ULabelAnnotation} annotation Comment annotation
+ */
+export function show_comment_window(ulabel: ULabel, annotation: ULabelAnnotation): void {
+    // Hide any existing comment window
+    hide_comment_window(ulabel);
+
+    // Ensure correct spatial type
+    if (annotation.spatial_type !== "comment") return;
+
+    // Show the comment window
+    // A text area for the comment 
+    const coordinates = get_comment_window_coordinates(ulabel, annotation);
+    // TODO: multiple text payloads in a thread
+    $(`
+        <div id=comment_window_${annotation.id}>
+            <textarea class="nonspatial_note" placeholder="Notes...">${annotation.text_payload}</textarea>
+        </div>
+    `).css({
+        position: "absolute",
+        left: coordinates.left + "px",
+        top: coordinates.top + "px",
+        "z-index": FRONT_Z_INDEX,
+    }).appendTo("#" + ulabel.config["container_id"]);
+
+    // Save the comment window id in the state
+    ulabel.state.active_comment_id = annotation.id;
+    // Redraw annotation
+    ulabel.redraw_annotation(annotation.id);
+}
+
+/**
+ * Hide window for a given comment annotation
+ * 
+ * @param {ULabel} ulabel ULabel instance
+ */
+export function hide_comment_window(ulabel: ULabel): void {
+    if (ulabel.state.active_comment_id !== null) {
+        // Hide the comment window
+        $(`#comment_window_${ulabel.state.active_comment_id}`).remove();
+        // Clear the state
+        ulabel.state.active_comment_id = null;
+    }
+}

src/configuration.ts

@@ -53,14 +53,6 @@ export class Configuration {
         AllowedToolboxItem.SubmitButtons,
     ]
 
-    public default_keybinds = {
-        "annotation_size_small": "s", //The s Key by default
-        "annotation_size_large": "l", //The l Key by default
-        "annotation_size_plus": "=",   //The = Key by default
-        "annotation_size_minus": "-",  //The - Key by default
-        "annotation_vanish": "v"      //The v Key by default
-    }
-
     // Config for RecolorActiveItem
     public recolor_active_toolbox_item: RecolorActiveConfig = {
         gradient_turned_on: false
@@ -81,12 +73,20 @@ export class Configuration {
         "show_overlay_on_load": false
     }
 
+    public annotation_size_small_keybind: string = "s";
+
+    public annotation_size_large_keybind: string = "l";
+
+    public annotation_size_plus_keybind: string = "=";
+
+    public annotation_size_minus_keybind: string = "-";
+
+    public annotation_vanish_keybind: string = "v";
+
     public change_zoom_keybind: string = "r";
 
     public create_point_annotation_keybind: string = "c";
-
-    public default_annotation_size: number = 6;
-
+
     public delete_annotation_keybind: string = "d";
 
     public filter_low_confidence_default_value: number;

src/html_builder.ts

@@ -32,7 +32,7 @@ export function add_style_to_document(ulabel: ULabel) {
 /**
  * Creates a mode button that when clicked switches the current annotation type.
  * 
- * @param md_key Key for which button is being constructed. Valid Keys: bbox, point, polygon, tbar, polyline, contour, bbox3, whole-image, global
+ * @param md_key Key for which button is being constructed. Valid Keys: bbox, point, polygon, tbar, polyline, contour, bbox3, whole-image, global, delete_polygon, delete_bbox, comment
  * @param md_name Mode name which shows when selected.
  * @param svg_blob svg which shows up on the button
  * @param cur_md Current annotation mode
@@ -178,6 +178,8 @@ export function prep_window_html(ulabel: ULabel, toolbox_item_order: unknown[] =
         get_md_button("global", "Global", GLOBAL_SVG, curmd, ulabel.subtasks),
         get_md_button("delete_polygon", "Delete", DELETE_POLYGON_SVG, curmd, ulabel.subtasks),
         get_md_button("delete_bbox", "Delete", DELETE_BBOX_SVG, curmd, ulabel.subtasks),
+        // TODO: uq comment icon
+        get_md_button("comment", "Comment", BBOX_SVG, curmd, ulabel.subtasks),
     ];
 
     // Append but don't wait