[WS-470] Fix/submit buttons

api_spec.md

@@ -81,7 +81,7 @@ If either more than one submit button or more button customization is desired, t
 
 ```javascript
 {
-    name: "<Arbitrary Button Name>",
+    name: "<Arbitrary Button Name>", // The button has a set height and width, so the name should be short
     hook: async function (annotations) {
         // Define submit behavior here
 
@@ -92,6 +92,7 @@ If either more than one submit button or more button customization is desired, t
         // If submit is unsuccessful and annotations edits should not be treated as "saved", return false
     },
     color?: "Arbitrary Color" // e.g. "#639", "#3AB890", "rgb(200, 0, 170)", "hsl(0, 100%, 50%)"
+    set_saved?: boolean // If true, will call ulabel.set_saved(true) before the hook is called, thus avoiding the "unsaved changes" warning
 }
 ```
 

changelog.md

@@ -6,6 +6,11 @@ All notable changes to this project will be documented here.
 
 Nothing yet.
 
+## [0.9.2] - March 21th, 2024
+- Small fixes to `submit_buttons` in the toolbox. 
+  - Added optional `set_saved` argument for each `submit_button` to allow for the page to unload without warning if the button is clicked.
+  - Changed default button css to better center the text.
+
 ## [0.9.1] - March 12th, 2024
 
 - Refactor of how annotations are drawn on the canvas. This change should make the drawing of annotations more efficient and less prone to lagging, especially when working with a large number of annotations or annotations with many vertices.

demo/multi-class.html

@@ -82,7 +82,10 @@
                 "container_id": "container",
                 "image_data": "https://ulabel.s3.us-east-2.amazonaws.com/cs-demo-0.png",
                 "username": "DemoUser",
-                "submit_buttons": on_submit,
+                "submit_buttons": [{
+                    "name": "Submit",
+                    "hook": on_submit,
+                }],
                 "subtasks": subtasks
             });
             // Wait for ULabel instance to finish initialization

package.json

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

src/toolbox.ts

@@ -2353,7 +2353,7 @@ export class FilterPointDistanceFromRow extends ToolboxItem {
 }
 
 export class SubmitButtons extends ToolboxItem {
-    private submit_buttons: {name: string, hook: Function, color?: string}[] | Function;
+    private submit_buttons: {name: string, hook: Function, color?: string, set_saved?: boolean}[] | Function;
 
     constructor(ulabel: ULabel) {
         super();
@@ -2414,6 +2414,11 @@ export class SubmitButtons extends ToolboxItem {
                         );
                     }
                 }
+
+                // set set_saved if it was provided
+                if (this.submit_buttons[idx].set_saved !== undefined) {
+                    ulabel.set_saved(this.submit_buttons[idx].set_saved);
+                }
 
                 await this.submit_buttons[idx].hook(submit_payload);
 
@@ -2494,7 +2499,9 @@ export class SubmitButtons extends ToolboxItem {
             id="${this.submit_buttons[idx].name.replaceLowerConcat(" ", "-")}" 
             class="submit-button" 
             style="
-                display: block;
+                display: flex;
+                justify-content: center;
+                align-items: center;
                 height: 1.2em;
                 width: 6em;
                 font-size: 1.5em;

src/version.js

@@ -1 +1 @@
-export const ULABEL_VERSION = "0.9.1";
+export const ULABEL_VERSION = "0.9.2";