[PLAT-1279] Feature/size mode

CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented here.
 ## [unreleased]
 
 Nothing yet.
+## [0.17.0] - May 30th, 2025
+- Add `anno_scaling_mode` argument to the `ULabel` constructor, which allows users to specify how the size of annotations should be scaled when the zoom level is changed.
+  - Options are `fixed`, `match-zoom`, and `inverse-zoom`.
+  - When set to `fixed`, the line size of annotations will remain constant regardless of zoom level.
+  - When set to `match-zoom`, the line size of annotations will increase with increased zoom level.
+  - When set to `inverse-zoom`, the line size of annotations will decrease with increased zoom level.
+- Prior behavior is equivalent to `anno_scaling_mode = "fixed"`.
+- Fix bug where fully erased polygon annotations would cause the an error upon submit.
 
 ## [0.16.4] - May 2nd, 2025
 - Fix bug where empty polygon layers could be included in a `submit_button` hook payload.

README.md

@@ -14,7 +14,7 @@ ULabel is an entirely "frontend" tool. It can be incorporated into any HTML page
 <script src="https://unpkg.com/ulabel/dist/ulabel.js"></script>
 ```
 
-Or you can use npm to install it and serve the `dist/ulabel.js` file from `node_modules` locally.
+ULabel is also published on [npm](https://www.npmjs.com/package/ulabel). You can use npm to install it and serve the `dist/ulabel.js` file from `node_modules` locally.
 
 ```bash
 npm install ulabel
@@ -24,6 +24,12 @@ npm install ulabel
 <script src="/node_modules/ulabel/dist/ulabel.js"></script>
 ```
 
+Or you can import it directly in your JavaScript code:
+
+```javascript
+import ULabel from 'ulabel';
+```
+
 An API spec can be found [here](https://github.com/SenteraLLC/ulabel/blob/main/api_spec.md), but as a brief overview: Once the script is included in your HTML doc, you can create a ULabel annotation session as follows.
 
 ```html

api_spec.md

@@ -305,7 +305,15 @@ In some cases, you may want the annotations to render at a higher or lower resol
 
 ### `initial_line_size`
 
-The line width with which new annotations are drawn initially. Units are pixels in the underlying image. When this value is not included, the default value of `4` is used and scaled by the current zoom value when a new annotation is drawn. When an `initial_line_size` is included, it is used as the line width for new annotations regardless of the current zoom value.
+The line width with which new annotations are drawn initially. Units are pixels in the underlying image. When this value is not included, the default value of `4` is used.
+
+### `anno_scaling_mode`
+
+Defines how annotation line size is adjusted based on the zoom level. The following modes are supported:
+
+- `"fixed"`: Line size remains constant regardless of zoom level. (Default. Use for best performance)
+- `"match-zoom"`: Line size increases with increased zoom level.
+- `"inverse-zoom"`: Line size decreases with increased zoom level.
 
 ### `instructions_url`
 

demo/multi-class.html

@@ -131,6 +131,7 @@
                 "toggle_brush_mode_keybind": "f",
                 "create_bbox_on_initial_crop": "|",
                 "click_and_drag_poly_annotations": false,
+                "anno_scaling_mode": "match-zoom",
             });
             // Wait for ULabel instance to finish initialization
             ulabel.init(function () {

demo/resume-from.html

@@ -246,7 +246,8 @@
                     "image_data": "https://ulabel.s3.us-east-2.amazonaws.com/cs-demo-0.png",
                     "username": "DemoUser",
                     "submit_buttons": on_submit,
-                    "subtasks": subtasks
+                    "subtasks": subtasks,
+                    "anno_scaling_mode": "inverse-zoom",
                 });
                 // Wait for ULabel instance to finish initialization
                 ulabel.init(function() {

index.d.ts

@@ -166,6 +166,8 @@ export type ImageData = {
     frames: string[];
 };
 
+export type AnnoScalingMode = "fixed" | "inverse-zoom" | "match-zoom";
+
 export type ULabelSubtasks = { [key: string]: ULabelSubtask };
 
 export class ULabel {
@@ -182,7 +184,7 @@ export class ULabel {
         current_subtask: string;
         last_brush_stroke: [number, number];
         line_size: number;
-        size_mode: string; // TODO (joshua-dean): use enum
+        anno_scaling_mode: AnnoScalingMode;
         // Render state
         // TODO (joshua-dean): this is never assigned, is it used?
         demo_canvas_context: CanvasRenderingContext2D;

package.json

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

src/configuration.ts

@@ -4,6 +4,7 @@ import {
     ImageData,
     RecolorActiveConfig,
     ULabelSubmitButton,
+    AnnoScalingMode,
 } from "..";
 import {
     ModeSelectionToolboxItem,
@@ -57,6 +58,7 @@ export class Configuration {
     // Values useful for generating HTML for tool
     public container_id: string = "container";
     public px_per_px: number = 1;
+    public anno_scaling_mode: AnnoScalingMode = "fixed";
     public initial_crop: InitialCrop = null;
     public annbox_id: string = "annbox";
     public imwrap_id: string = "imwrap";
@@ -82,7 +84,7 @@ export class Configuration {
     public allow_soft_id: boolean = false;
     public default_annotation_color: string = "#fa9d2a";
     public username: string = "ULabelUser";
-    public initial_line_size: number = null;
+    public initial_line_size: number = 4;
 
     // ID Dialog config
     public cl_opacity: number = 0.4;