- "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",
0 commit comments