docs: DOC-239: Add information about rectangle rotation (HumanSignal#…

…6248)

Co-authored-by: caitlinwheeless <[email protected]>
Co-authored-by: caitlinwheeless <[email protected]>
Co-authored-by: robot-ci-heartex <[email protected]>

docs/source/tags/rectangle.md

@@ -20,7 +20,7 @@ Use with the following data types: image.
 | [fillColor] | <code>string</code> |  | Rectangle fill color in hexadecimal |
 | [strokeColor] | <code>string</code> | <code>&quot;#f48a42&quot;</code> | Stroke color in hexadecimal |
 | [strokeWidth] | <code>number</code> | <code>1</code> | Width of the stroke |
-| [canRotate] | <code>boolean</code> | <code>true</code> | Whether to show or hide rotation control |
+| [canRotate] | <code>boolean</code> | <code>true</code> | Whether to show or hide rotation control. Note that the anchor point in the results is different than the anchor point used when rotating with the rotation tool. For more information, see [Rotation](/templates/image_bbox#Rotation). |
 | [smart] | <code>boolean</code> |  | Show smart tool for interactive pre-annotations |
 | [smartOnly] | <code>boolean</code> |  | Only show smart tool for interactive pre-annotations |
 

docs/source/tags/rectanglelabels.md

@@ -23,7 +23,7 @@ Use with the following data types: image.
 | [fillColor] | <code>string</code> |  | Rectangle fill color in hexadecimal |
 | [strokeColor] | <code>string</code> |  | Stroke color in hexadecimal |
 | [strokeWidth] | <code>number</code> | <code>1</code> | Width of stroke |
-| [canRotate] | <code>boolean</code> | <code>true</code> | Show or hide rotation control |
+| [canRotate] | <code>boolean</code> | <code>true</code> | Show or hide rotation control. Note that the anchor point in the results is different than the anchor point used when rotating with the rotation tool. For more information, see [Rotation](/templates/image_bbox#Rotation). |
 
 ### Sample Results JSON
 

docs/source/templates/image_bbox.md

@@ -16,9 +16,25 @@ If you want to perform object detection, you need to create a labeled dataset. U
 
 <i>Figure 1: Object detection with bounding boxes.</i>
 
+## Rotation
+
+Note that when you rotate rectangles (bounding boxes), the anchor point is different depending on how you perform the rotation.
+
+**Bounding box rotation in Label Studio UI**
+
+If you rotate a bounding box using your mouse in the labeling interface, the rotation anchor point is the center of the rectangle.
+
+![Diagram showing mouse rotation](../images/rectangle_ui_rotation.jpg)
+
+**Bounding box rotation in the Label Studio results**
+
+If you rotate by directly editing the rotation angle under the **Info** panel of the labeling interface, the rotation anchor point is the top left. This is also how it is saved in the Label Studio results (regardless of how you performed the rotation).
+
+![Diagram showing result rotation](../images/rectangle_db_rotation.jpg)
+
 ## Create a rotated bounding box
 
-As an annotator, you can also create a rotated bounding box with the "three point click" or "two point click" feature to annotate images.  
+As an annotator, you can create a rotated bounding box with the "three point click" or "two point click" feature to annotate images.  
 
   - First point click - Starting point of the location to draw the bounding box.
   - Second point click - Define the rotation and width of the bounding box.
@@ -61,7 +77,6 @@ After the box has been completed it will remain in selected state, unless determ
     - Determine that the orientation of the bounding box is effected.
     - See the orientation of the bounding box and determine the direction during the creation process.
 
-
 ## Interactive Template Preview
 
 <div id="main-preview"></div>

web/libs/editor/src/tags/control/Rectangle.js

@@ -11,6 +11,7 @@ import { ToolManagerMixin } from "../../mixins/ToolManagerMixin";
  * The `Rectangle` tag is used to add a rectangle (Bounding Box) to an image without selecting a label. This can be useful when you have only one label to assign to a rectangle.
  *
  * Use with the following data types: image.
+ *
  * @example
  * <!--Basic labeling configuration for adding rectangular bounding box regions to an image -->
  * <View>
@@ -26,7 +27,7 @@ import { ToolManagerMixin } from "../../mixins/ToolManagerMixin";
  * @param {string=} [fillColor]           - Rectangle fill color in hexadecimal
  * @param {string=} [strokeColor=#f48a42] - Stroke color in hexadecimal
  * @param {number=} [strokeWidth=1]       - Width of the stroke
- * @param {boolean=} [canRotate=true]     - Whether to show or hide rotation control
+ * @param {boolean=} [canRotate=true]     - Whether to show or hide rotation control. Note that the anchor point in the results is different than the anchor point used when rotating with the rotation tool. For more information, see [Rotation](/templates/image_bbox#Rotation).
  * @param {boolean} [smart]               - Show smart tool for interactive pre-annotations
  * @param {boolean} [smartOnly]           - Only show smart tool for interactive pre-annotations
  */

web/libs/editor/src/tags/control/RectangleLabels.jsx

@@ -15,6 +15,7 @@ import ControlBase from "./Base";
  * The `RectangleLabels` tag creates labeled rectangles. Use to apply labels to bounding box semantic segmentation tasks.
  *
  * Use with the following data types: image.
+ *
  * @example
  * <!--Basic labeling configuration for applying labels to rectangular bounding boxes on an image -->
  * <View>
@@ -37,7 +38,7 @@ import ControlBase from "./Base";
  * @param {string} [fillColor]       - Rectangle fill color in hexadecimal
  * @param {string} [strokeColor]     - Stroke color in hexadecimal
  * @param {number} [strokeWidth=1]   - Width of stroke
- * @param {boolean} [canRotate=true] - Show or hide rotation control
+ * @param {boolean} [canRotate=true] - Show or hide rotation control. Note that the anchor point in the results is different than the anchor point used when rotating with the rotation tool. For more information, see [Rotation](/templates/image_bbox#Rotation).
  */
 
 const Validation = types.model({