init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { types } from "mobx-state-tree";
 
import Registry from "../../core/Registry";
import ControlBase from "./Base";
import { customTypes } from "../../core/CustomTypes";
import { AnnotationMixin } from "../../mixins/AnnotationMixin";
import SeparatedControlMixin from "../../mixins/SeparatedControlMixin";
import { ToolManagerMixin } from "../../mixins/ToolManagerMixin";
import { SNAP_TO_PIXEL_MODE } from "../../components/ImageView/Image";
 
/**
 * The `KeyPoint` tag is used to add a key point to an image without selecting a label. This can be useful when you have only one label to assign to the key point.
 *
 * Use with the following data types: image.
 * @example
 * <!--Basic keypoint image labeling configuration-->
 * <View>
 *   <KeyPoint name="kp-1" toName="img-1" />
 *   <Image name="img-1" value="$img" />
 * </View>
 * @name KeyPoint
 * @meta_title Keypoint Tag for Adding Keypoints to Images
 * @meta_description Customize Label Studio with the KeyPoint tag to add key points to images for computer vision machine learning and data science projects.
 * @param {string} name                  - Name of the element
 * @param {string} toName                - Name of the image to label
 * @param {float=} [opacity=0.9]         - Opacity of keypoint
 * @param {string=} [fillColor=#8bad00]  - Keypoint fill color in hexadecimal
 * @param {number=} [strokeWidth=1]      - Width of the stroke
 * @param {string=} [strokeColor=#8bad00] - Keypoint stroke color in hexadecimal
 * @param {boolean} [smart]              - Show smart tool for interactive pre-annotations
 * @param {boolean} [smartOnly]          - Only show smart tool for interactive pre-annotations
 * @param {pixel|none} [snap=none]       - Snap keypoint to image pixels
 */
const TagAttrs = types.model({
  toname: types.maybeNull(types.string),
 
  opacity: types.optional(customTypes.range(), "0.9"),
  fillcolor: types.optional(customTypes.color, "#8bad00"),
 
  snap: types.optional(types.string, "none"),
 
  strokecolor: types.optional(customTypes.color, "#8bad00"),
  strokewidth: types.optional(types.string, "2"),
});
 
const Model = types
  .model({
    type: "keypoint",
    // tools: types.array(BaseTool)
  })
  .views((self) => ({
    get hasStates() {
      const states = self.states();
 
      return states && states.length > 0;
    },
  }))
  .volatile(() => ({
    toolNames: ["KeyPoint"],
    snapMode: SNAP_TO_PIXEL_MODE.CENTER,
  }));
 
const KeyPointModel = types.compose(
  "KeyPointModel",
  ControlBase,
  AnnotationMixin,
  SeparatedControlMixin,
  TagAttrs,
  Model,
  ToolManagerMixin,
);
 
const HtxView = () => {
  return null;
};
 
Registry.addTag("keypoint", KeyPointModel, HtxView);
 
export { HtxView, KeyPointModel };