fix: BROS-464: Vector region selection #8636

nick-skriabin · 2025-10-13T12:12:39Z

This PR introduces new selection and transformation behavior to Vector tag.

Previously:

Users weren't able to transform multiple Vectors at the same time
UX for Vector selection was confusing -- users had to cmd or ctrl-click on the shape to select all the points and be able to transform the vector

Now:

Users can select multiple shapes and transform them together
Users enter the "transform" state by default when selecting Vector and can double-click on the shape to start interacting with individual points

A little demo showcasing the changes:

vector-selection.mp4

netlify · 2025-10-13T12:13:39Z

✅ Deploy Preview for heartex-docs ready!

Name	Link
🔨 Latest commit	`0cb1a04`
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/6908d95fba04990008bc554d
😎 Deploy Preview	https://deploy-preview-8636--heartex-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-10-13T12:14:09Z

✅ Deploy Preview for label-studio-playground ready!

Name	Link
🔨 Latest commit	`0cb1a04`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/6908d95fe845850008aae805
😎 Deploy Preview	https://deploy-preview-8636--label-studio-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-10-13T12:15:52Z

✅ Deploy Preview for label-studio-docs-new-theme ready!

Name	Link
🔨 Latest commit	`0cb1a04`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/6908d95f22c8270008666536
😎 Deploy Preview	https://deploy-preview-8636--label-studio-docs-new-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-10-13T12:16:15Z

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	`0cb1a04`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/6908d95f0c22e7000825b8ae
😎 Deploy Preview	https://deploy-preview-8636--label-studio-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

codecov · 2025-10-13T12:16:44Z

Codecov Report

❌ Patch coverage is 2.42588% with 362 lines in your changes missing coverage. Please review.
✅ Project coverage is 59.54%. Comparing base (bc2b0d6) to head (0cb1a04).
⚠️ Report is 1 commits behind head on develop.

Files with missing lines	Patch %	Lines
.../editor/src/components/KonvaVector/KonvaVector.tsx	0.00%	298 Missing ⚠️
web/libs/editor/src/regions/VectorRegion.jsx	1.63%	60 Missing ⚠️
...c/components/ImageTransformer/ImageTransformer.jsx	80.00%	2 Missing ⚠️
...c/components/KonvaVector/VectorSelectionTracker.ts	0.00%	1 Missing ⚠️
...nents/KonvaVector/components/VectorTransformer.tsx	0.00%	1 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (bc2b0d6) and HEAD (0cb1a04). Click for more details.

HEAD has 1 upload less than BASE

Flag BASE (bc2b0d6) HEAD (0cb1a04)

pytests 1 0

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #8636      +/-   ##
===========================================
- Coverage    67.03%   59.54%   -7.49%     
===========================================
  Files          791      552     -239     
  Lines        60701    39298   -21403     
  Branches     10315    10390      +75     
===========================================
- Hits         40689    23400   -17289     
+ Misses       20009    15895    -4114     
  Partials         3        3

Flag	Coverage Δ
lsf-e2e	`53.82% <2.16%> (-0.40%)`	⬇️
lsf-integration	`50.31% <0.27%> (-0.36%)`	⬇️
lsf-unit	`8.27% <0.26%> (-0.08%)`	⬇️
pytests	`?`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/18837605005

hlomzik · 2025-10-27T12:06:28Z

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/ui/src/assets/icons/webhook.svg

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/18840357028

hlomzik · 2025-11-03T12:49:07Z

web/libs/core/src/lib/utils/schema/tags.json

  "VectorLabels": {
    "name": "VectorLabels",
-    "description": "The `VectorLabels` tag is used to create labeled vectors. Use to apply labels to vectors in semantic segmentation tasks.\n\nUse with the following data types: image.\n\n## Key Features\n\n### Point Management\n- **Add Points**: Click on empty space, Shift+click on path segments\n- **Edit Points**: Drag to reposition, Shift+click to convert regular ↔ bezier\n- **Delete Points**: Alt+click on existing points\n- **Multi-Selection**: Select multiple points for batch transformations\n- **Break Closed Path**: Alt+click on any segment of a closed path to break it at that specific segment\n\n### Bezier Curves\n- **Create**: Drag while adding points or convert existing points\n- **Edit**: Drag control points, disconnect/reconnect control handles\n- **Control**: `curves` prop to enable/disable bezier functionality\n\n## Keyboard Shortcuts & Hotkeys\n\n### Point Creation & Editing\n- **Click**: Add new point in drawing mode\n- **Shift + Click** on a segment: Add point on path segment (insert between existing points)\n- **Shift + Drag**: Create bezier point with control handles\n- **Shift + Click** on a point: Convert point between regular ↔ bezier\n- **Alt + Click** on a segment: Break closed path at segment (when path is closed)\n\n### Point Selection\n- **Click**: Select single point\n- **Cmd/Ctrl + Click**: Add point to multi-selection\n- **Cmd/Ctrl + Click on shape**: Select all points in the path\n- **Cmd/Ctrl + Click on point**: Toggle point selection in multi-selection\n\n### Path Management\n- **Click on first/last point**: Close path bidirectionally (first→last or last→first)\n- **Shift + Click**: Add point on path segment without closing\n\n### Bezier Curve Control\n- **Drag control points**: Adjust curve shape\n- **Alt + Drag control point**: Disconnect control handles (make asymmetric)\n- **Shift + Drag**: Create new bezier point with control handles\n\n### Multi-Selection & Transformation\n- **Select multiple points**: Use Cmd/Ctrl + Click to build selection\n- **Transform selection**: Use transformer handles for rotation, scaling, and translation\n- **Clear selection**: Click on any point\n\n## Usage Examples\n\n### Basic Vector Path\n```jsx\n<View>\n  <Image name=\"image\" value=\"$image\" />\n  <VectorLabels name=\"labels\" toName=\"image\">\n    <Label value=\"Road\" />\n    <Label value=\"Boundary\" />\n  </VectorLabels>\n</View>\n```\n\n### Polygon with Bezier Support\n```jsx\n<View>\n  <Image name=\"image\" value=\"$image\" />\n  <VectorLabels\n    name=\"polygons\"\n    toName=\"image\"\n    closable={true}\n    curves={true}\n    minPoints=\"3\"\n    maxPoints=\"20\"\n  >\n    <Label value=\"Building\" />\n    <Label value=\"Park\" />\n  </VectorLabels>\n</View>\n```\n\n### Skeleton Mode for Branching Paths\n```jsx\n<View>\n  <Image name=\"image\" value=\"$image\" />\n  <VectorLabels\n    name=\"skeleton\"\n    toName=\"image\"\n    skeleton={true}\n    closable={false}\n    curves={true}\n  >\n    <Label value=\"Tree\" />\n    <Label value=\"Branch\" />\n  </VectorLabels>\n</View>\n```\n\n### Keypoint Annotation Tool\n```jsx\n<View>\n  <Image name=\"image\" value=\"$image\" />\n  <VectorLabels\n    name=\"keypoints\"\n    toName=\"image\"\n    closable={false}\n    curves={false}\n    minPoints=\"1\"\n    maxPoints=\"1\"\n  >\n    <Label value=\"Eye\" />\n    <Label value=\"Nose\" />\n    <Label value=\"Mouth\" />\n  </VectorLabels>\n</View>\n```\n\n### Constrained Drawing\n```jsx\n<View>\n  <Image name=\"image\" value=\"$image\" />\n  <VectorLabels\n    name=\"constrained\"\n    toName=\"image\"\n    closable={true}\n    curves={true}\n    constraintoBounds={true}\n    snap=\"pixel\"\n    minPoints=\"4\"\n    maxPoints=\"12\"\n  >\n    <Label value=\"Region\" />\n  </VectorLabels>\n</View>\n```\n\n## Advanced Features\n\n### Path Breaking\nWhen a path is closed, you can break it at any segment:\n- **Alt + Click** on any segment of a closed path\n- The path breaks at that segment\n- The breaking point becomes the first element\n- The point before breaking becomes active\n\n### Skeleton Mode\n- **Purpose**: Create branching paths instead of linear sequences\n- **Behavior**: New points connect to the active point, not the last added point\n- **Use Case**: Tree structures, network diagrams, anatomical features\n\n### Bezier Curve Management\n- **Symmetric Control**: By default, control points move symmetrically\n- **Asymmetric Control**: Hold Alt while dragging to disconnect handles\n- **Control Point Visibility**: Control points are shown when editing bezier points\n\n### Multi-Selection Workflow\n1. **Build Selection**: Use Cmd/Ctrl + Click to add points\n2. **Transform**: Use transformer handles for rotation, scaling, translation\n3. **Batch Operations**: Apply transformations to all selected points\n4. **Clear**: Click outside or use programmatic methods\n\n## Props Reference",
+    "description": "The `VectorLabels` tag is used to create labeled vectors. Use to apply labels to vectors in semantic segmentation tasks.\n\nUse with the following data types: image.\n\n## Key Features\n\n### Point Management\n- **Add Points**: Click on empty space, Shift+click on path segments\n- **Edit Points**: Drag to reposition, Shift+click to convert regular ↔ bezier\n- **Delete Points**: Alt+click on existing points\n- **Multi-Selection**: Select multiple points for batch transformations\n- **Break Closed Path**: Alt+click on any segment of a closed path to break it at that specific segment\n\n### Bezier Curves\n- **Create**: Drag while adding points or convert existing points\n- **Edit**: Drag control points, disconnect/reconnect control handles\n- **Control**: `curves` prop to enable/disable bezier functionality\n\n## Keyboard Shortcuts & Hotkeys\n\n### Point Creation & Editing\n- **Click**: Add new point in drawing mode\n- **Shift + Click** on a segment: Add point on path segment (insert between existing points)\n- **Shift + Drag**: Create bezier point with control handles\n- **Shift + Click** on a point: Convert point between regular ↔ bezier\n- **Alt + Click** on a segment: Break closed path at segment (when path is closed)\n\n### Point Selection\n- **Click**: Select single point\n- **Cmd/Ctrl + Click**: Add point to multi-selection\n- **Cmd/Ctrl + Click on shape**: Select all points in the path\n- **Cmd/Ctrl + Click on point**: Toggle point selection in multi-selection\n\n### Path Management\n- **Click on first/last point**: Close path bidirectionally (first→last or last→first)\n- **Shift + Click**: Add point on path segment without closing\n\n### Bezier Curve Control\n- **Drag control points**: Adjust curve shape\n- **Alt + Drag control point**: Disconnect control handles (make asymmetric)\n- **Shift + Drag**: Create new bezier point with control handles\n\n### Multi-Selection & Transformation\n- **Select multiple points**: Use Cmd/Ctrl + Click to build selection\n- **Transform selection**: Use transformer handles for rotation, scaling, and translation\n- **Clear selection**: Click on any point\n\n## Usage Examples\n\n### Basic Vector Path\n```jsx\n<View>\n  <Image name=\"image\" value=\"$image\" />\n  <VectorLabels name=\"labels\" toName=\"image\">\n    <Label value=\"Road\" />\n    <Label value=\"Boundary\" />\n  </VectorLabels>\n</View>\n```\n\n### Polygon with Bezier Support\n```jsx\n<View>\n  <Image name=\"image\" value=\"$image\" />\n  <VectorLabels\n    name=\"polygons\"\n    toName=\"image\"\n    closable={true}\n    curves={true}\n    minPoints=\"3\"\n    maxPoints=\"20\"\n  >\n    <Label value=\"Building\" />\n    <Label value=\"Park\" />\n  </VectorLabels>\n</View>\n```\n\n### Skeleton Mode for Branching Paths\n```jsx\n<View>\n  <Image name=\"image\" value=\"$image\" />\n  <VectorLabels\n    name=\"skeleton\"\n    toName=\"image\"\n    skeleton={true}\n    closable={false}\n    curves={true}\n  >\n    <Label value=\"Tree\" />\n    <Label value=\"Branch\" />\n  </VectorLabels>\n</View>\n```\n\n### Keypoint Annotation Tool\n```jsx\n<View>\n  <Image name=\"image\" value=\"$image\" />\n  <VectorLabels\n    name=\"keypoints\"\n    toName=\"image\"\n    closable={false}\n    curves={false}\n    minPoints=\"1\"\n    maxPoints=\"1\"\n  >\n    <Label value=\"Eye\" />\n    <Label value=\"Nose\" />\n    <Label value=\"Mouth\" />\n  </VectorLabels>\n</View>\n```\n\n## Advanced Features\n\n### Path Breaking\nWhen a path is closed, you can break it at any segment:\n- **Alt + Click** on any segment of a closed path\n- The path breaks at that segment\n- The breaking point becomes the first element\n- The point before breaking becomes active\n\n### Skeleton Mode\n- **Purpose**: Create branching paths instead of linear sequences\n- **Behavior**: New points connect to the active point, not the last added point\n- **Use Case**: Tree structures, network diagrams, anatomical features\n\n### Bezier Curve Management\n- **Symmetric Control**: By default, control points move symmetrically\n- **Asymmetric Control**: Hold Alt while dragging to disconnect handles\n- **Control Point Visibility**: Control points are shown when editing bezier points\n\n### Multi-Selection Workflow\n1. **Build Selection**: Use Cmd/Ctrl + Click to add points\n2. **Transform**: Use transformer handles for rotation, scaling, translation\n3. **Batch Operations**: Apply transformations to all selected points\n4. **Clear**: Click outside or use programmatic methods\n\n## Props Reference",


That's the full-scaled doc, not description. Move this text to other place (jsdoc, .md file, etc) and make description short and without markdown

hlomzik · 2025-11-03T12:51:32Z

web/libs/editor/src/components/ImageTransformer/ImageTransformer.jsx

          }}
          dragBoundFunc={this.dragBoundFunc}
          onDragEnd={() => {
+            // Call applyTransform for VectorRegion instances


Move this comment to the method itself. Why? Here it reads naturally and feels a good fit, you don't need to describe it using one specific tag. But the method itself could use a description saying that it's applied just to one specific tag and also with explanation why only for this one tag.

hlomzik

Too many parts with changed transformation logic, but it works well and smooth, approving!
There are issues with hover over unselected regions, but this can be solved later.
Also added small comments about comments :)

nick-skriabin · 2025-11-03T16:32:57Z

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/ui/src/assets/icons/arrow-up-circle-filled.svg

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/19041793694

Co-authored-by: robot-ci-heartex <robot-ci-heartex@users.noreply.github.com> Co-authored-by: hlomzik <hlomzik@users.noreply.github.com> Co-authored-by: nick-skriabin <nick-skriabin@users.noreply.github.com>

nick-skriabin added 10 commits October 9, 2025 18:37

Remove cmd-click on a shape to select everything

65b2aa4

Support double click

34f2f87

Toggle transformation mode

6327bc8

Allow selecting multiple shapes

404fa3f

Multi-selection

2d9761d

Selection

f9a146b

Transformation

6707960

Translation

907d954

Applying transformation from global transformer

3abb78d

Merge branch 'develop' into fb-bros-464/vector-selection

8029b1d

nick-skriabin requested a review from hlomzik as a code owner October 13, 2025 12:12

github-actions bot added the fix label Oct 13, 2025

nick-skriabin added 13 commits October 14, 2025 14:55

Merge branch 'develop' into fb-bros-464/vector-selection

8a5da16

Reset everything

534c70b

Remove cmd-click, add double click functionality

9d3fd64

Transform mode

4988900

Remove selection tracker

0b27edc

Multi-selection WIP

64c6e63

Merge branch 'develop' into fb-bros-464/vector-selection

859fea5

Biome

740f58d

Merge branch 'develop' into fb-bros-464/vector-selection

6dbb498

Multi-selection

df204ab

Apply transformations to points

c61d17e

Transformation wip

f7a3fd0

Transformation WIP

06ba828

nick-skriabin and others added 8 commits October 23, 2025 11:37

Transformation WIP

7def038

Merge branch 'develop' into fb-bros-464/vector-selection

6b3b526

Transform multiple shapes

49c7d84

Merge branch 'develop' into fb-bros-464/vector-selection

774a75d

Various tiny fixes

a1b6706

Restore double click

e319cbc

Fix alt-click to delete points

9388c02

ci: Build tag docs

df5814e

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/18837605005

hlomzik and others added 9 commits October 27, 2025 12:07

Merge branch 'develop' into 'fb-bros-464/vector-selection'

5b68d5d

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/18840357028

Transform bounds

9e2a991

Proper bounds

65b5279

Proper bounds constraints

cf3b233

Fix regions coordinates reset (regression)

76f229d

Double click handling

3a799cd

Remove logs

3033a21

Merge branch 'develop' into fb-bros-464/vector-selection

4784cf1

Formatting

78c0249

hlomzik reviewed Nov 3, 2025

View reviewed changes

hlomzik approved these changes Nov 3, 2025

View reviewed changes

Merge branch 'develop' into 'fb-bros-464/vector-selection'

0cb1a04

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/19041793694

robot-ci-heartex merged commit 0c9b9eb into develop Nov 3, 2025
45 of 48 checks passed

robot-ci-heartex deleted the fb-bros-464/vector-selection branch November 3, 2025 17:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: BROS-464: Vector region selection #8636

fix: BROS-464: Vector region selection #8636

Uh oh!

nick-skriabin commented Oct 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 13, 2025 •

edited

Loading

Uh oh!

codecov bot commented Oct 13, 2025 •

edited

Loading

Uh oh!

hlomzik commented Oct 27, 2025 •

edited by robot-ci-heartex

Loading

Uh oh!

hlomzik Nov 3, 2025

Uh oh!

hlomzik Nov 3, 2025

Uh oh!

hlomzik left a comment

Uh oh!

nick-skriabin commented Nov 3, 2025 •

edited by robot-ci-heartex

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fix: BROS-464: Vector region selection #8636

fix: BROS-464: Vector region selection #8636

Uh oh!

Conversation

nick-skriabin commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for heartex-docs ready!

Uh oh!

netlify bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-playground ready!

Uh oh!

netlify bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-docs-new-theme ready!

Uh oh!

netlify bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-storybook ready!

Uh oh!

codecov bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

hlomzik commented Oct 27, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hlomzik Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

hlomzik Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

hlomzik left a comment

Choose a reason for hiding this comment

Uh oh!

nick-skriabin commented Nov 3, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nick-skriabin commented Oct 13, 2025 •

edited

Loading

netlify bot commented Oct 13, 2025 •

edited

Loading

netlify bot commented Oct 13, 2025 •

edited

Loading

netlify bot commented Oct 13, 2025 •

edited

Loading

netlify bot commented Oct 13, 2025 •

edited

Loading

codecov bot commented Oct 13, 2025 •

edited

Loading

hlomzik commented Oct 27, 2025 •

edited by robot-ci-heartex

Loading

nick-skriabin commented Nov 3, 2025 •

edited by robot-ci-heartex

Loading