Feat/relation tool

apps/frontend/src/pages/tasks.[id].edit/partials/InputData/imagePreAnnotationJson.schema.json

@@ -47,6 +47,9 @@
               {
                 "$ref": "#/definitions/PolygonTool"
               },
+              {
+                "$ref": "#/definitions/RelationTool"
+              },
               {
                 "$ref": "#/definitions/CuboidTool"
               },
@@ -323,6 +326,55 @@
       },
       "required": ["toolName", "result"]
     },
+    "RelationTool": {
+      "type": "object",
+      "properties": {
+        "toolName": {
+          "type": "string",
+          "const": "relationTool"
+        },
+        "result": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "唯一标识"
+              },
+              "sourceId": {
+                "type": "string",
+                "description": "起始标注id"
+              },
+              "targetId": {
+                "type": "string",
+                "description": "目标标注id"
+              },
+              "visible": {
+                "type": "boolean",
+                "description": "是否可见",
+                "default": true
+              },
+              "attributes": {
+                "$ref": "#/definitions/Attribute"
+              },
+              "order": {
+                "type": "integer",
+                "description": "标注顺序",
+                "minimum": 0
+              },
+              "label": {
+                "type": "string",
+                "description": "标注标签",
+                "default": "none"
+              }
+            },
+            "required": ["sourceId", "targetId", "id", "order", "label"]
+          }
+        }
+      },
+      "required": ["toolName", "result"]
+    },
     "RectTool": {
       "type": "object",
       "properties": {

apps/frontend/src/pages/tasks.[id].edit/partials/InputData/imagePreAnnotationJsonl.schema.json

@@ -33,6 +33,12 @@
             "$ref": "#/definitions/LabelItem"
           }
         },
+        "relationTool": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/LabelItem"
+          }
+        },
         "cuboidTool": {
           "type": "array",
           "items": {
@@ -161,6 +167,24 @@
           },
           "required": ["toolName", "result"]
         },
+        "relationTool": {
+          "type": "object",
+          "properties": {
+            "toolName": {
+              "type": "string",
+              "const": "relationTool",
+              "default": "relationTool"
+            },
+            "result": {
+              "description": "标注结果",
+              "type": "array",
+              "items": {
+                "$ref": "#/definitions/RelationTool"
+              }
+            }
+          },
+          "required": ["toolName", "result"]
+        },
         "textTool": {
           "type": "object",
           "properties": {
@@ -608,6 +632,55 @@
       },
       "required": ["direction", "front", "back", "x", "y", "width", "height", "id", "order", "label"]
     },
+    "RelationTool": {
+      "type": "object",
+      "properties": {
+        "toolName": {
+          "type": "string",
+          "const": "relationTool"
+        },
+        "result": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "唯一标识"
+              },
+              "sourceId": {
+                "type": "string",
+                "description": "起始标注id"
+              },
+              "targetId": {
+                "type": "string",
+                "description": "目标标注id"
+              },
+              "visible": {
+                "type": "boolean",
+                "description": "是否可见",
+                "default": true
+              },
+              "attributes": {
+                "$ref": "#/definitions/Attribute"
+              },
+              "order": {
+                "type": "integer",
+                "description": "标注顺序",
+                "minimum": 0
+              },
+              "label": {
+                "type": "string",
+                "description": "标注标签",
+                "default": "none"
+              }
+            },
+            "required": ["sourceId", "targetId", "id", "order", "label"]
+          }
+        }
+      },
+      "required": ["toolName", "result"]
+    },
     "TextTool": {
       "type": "array",
       "items": {

apps/frontend/src/pages/tasks.[id].samples.[id]/index.tsx

@@ -38,6 +38,9 @@ export const imageAnnotationRef = createRef<ImageAnnotatorRef>();
 export const videoAnnotationRef = createRef<AudioAndVideoAnnotatorRef>();
 export const audioAnnotationRef = createRef<AudioAndVideoAnnotatorRef>();
 
+const PREVIEW_OFFSET_TOP = 102;
+const OFFSET_TOP = 158;
+
 const AnnotationPage = () => {
   const routeParams = useParams();
   const { task } = useRouteLoaderData('task') as TaskLoaderResult;
@@ -308,7 +311,7 @@ const AnnotationPage = () => {
         ref={imageAnnotationRef}
         onError={onError}
         // windows platform pixel issue
-        offsetTop={configFromParent ? 100 : 158}
+        offsetTop={configFromParent ? PREVIEW_OFFSET_TOP : OFFSET_TOP}
         editingSample={editingSample}
         config={config}
         disabled={disabled}
@@ -326,7 +329,7 @@ const AnnotationPage = () => {
       <Annotator
         primaryColor="#0d53de"
         ref={videoAnnotationRef}
-        offsetTop={configFromParent ? 100 : 156}
+        offsetTop={configFromParent ? PREVIEW_OFFSET_TOP : OFFSET_TOP}
         editingSample={editingSample}
         config={config}
         toolbarRight={topActionContent}
@@ -346,7 +349,7 @@ const AnnotationPage = () => {
       <AudioAnnotator
         primaryColor="#0d53de"
         ref={audioAnnotationRef}
-        offsetTop={configFromParent ? 100 : 156}
+        offsetTop={configFromParent ? PREVIEW_OFFSET_TOP : OFFSET_TOP}
         editingSample={editingSample}
         config={config}
         disabled={disabled}

packages/image/src/annotations/Annotation.ts

@@ -94,14 +94,21 @@ export class Annotation<Data extends BasicImageAnnotation, Style> {
     return { x, y, rotate: finalRotate };
   }
 
-  static createTextDomPortal(content: string, isAboveLine: boolean, order: number, bindShape: Line): DomPortal {
+  static createTextDomPortal(
+    content: string,
+    isAboveLine: boolean,
+    order: number,
+    bindShape: Line,
+    style?: Record<string, string>,
+  ): DomPortal {
     return new DomPortal({
       content,
       getPosition: (shape, container) =>
         Annotation.calculateTextPosition({ shape: shape as Line, container, isAboveLine }),
       order,
       preventPointerEvents: true,
       bindShape,
+      style,
     });
   }
 

packages/image/src/annotations/Cuboid.annotation.ts

@@ -241,6 +241,9 @@ export class AnnotationCuboid extends Annotation<CuboidData, CuboidStyle> {
         order: data.order,
         preventPointerEvents: true,
         bindShape: backShape,
+        style: {
+          display: visible ? 'block' : 'none',
+        },
       }),
     );
 
@@ -255,6 +258,9 @@ export class AnnotationCuboid extends Annotation<CuboidData, CuboidStyle> {
           order: data.order,
           preventPointerEvents: true,
           bindShape: frontShape,
+          style: {
+            display: visible ? 'block' : 'none',
+          },
         }),
       );
     }

packages/image/src/annotations/Line.annotation.ts

@@ -143,6 +143,9 @@ export class AnnotationLine extends Annotation<LineData, LineStyle> {
         order: data.order,
         preventPointerEvents: true,
         bindShape: group.shapes[0] as Line,
+        style: {
+          display: visible ? 'block' : 'none',
+        },
       }),
     );
 
@@ -157,6 +160,9 @@ export class AnnotationLine extends Annotation<LineData, LineStyle> {
           order: data.order,
           preventPointerEvents: true,
           bindShape: group.shapes[0],
+          style: {
+            display: visible ? 'block' : 'none',
+          },
         }),
       );
     }

packages/image/src/annotations/Point.annotation.ts

@@ -76,6 +76,9 @@ export class AnnotationPoint extends Annotation<PointData, PointStyle> {
         order: data.order,
         preventPointerEvents: true,
         bindShape: group.shapes[0],
+        style: {
+          display: visible ? 'block' : 'none',
+        },
       }),
     );
 
@@ -90,6 +93,9 @@ export class AnnotationPoint extends Annotation<PointData, PointStyle> {
           order: data.order,
           preventPointerEvents: true,
           bindShape: group.shapes[0],
+          style: {
+            display: visible ? 'block' : 'none',
+          },
         }),
       );
     }

packages/image/src/annotations/Polygon.annotation.ts

@@ -126,6 +126,9 @@ export class AnnotationPolygon extends Annotation<PolygonData, PolygonStyle> {
         order: data.order,
         preventPointerEvents: true,
         bindShape: group.shapes[0],
+        style: {
+          display: visible ? 'block' : 'none',
+        },
       }),
     );
 
@@ -151,6 +154,9 @@ export class AnnotationPolygon extends Annotation<PolygonData, PolygonStyle> {
           order: data.order,
           preventPointerEvents: true,
           bindShape: group.shapes[0],
+          style: {
+            display: visible ? 'block' : 'none',
+          },
         }),
       );
     }

packages/image/src/annotations/Rect.annotation.ts

@@ -81,6 +81,9 @@ export class AnnotationRect extends Annotation<RectData, RectStyle> {
         order: data.order,
         preventPointerEvents: true,
         bindShape: group.shapes[0] as Rect,
+        style: {
+          display: visible ? 'block' : 'none',
+        },
       }),
     );
 
@@ -95,6 +98,9 @@ export class AnnotationRect extends Annotation<RectData, RectStyle> {
           order: data.order,
           preventPointerEvents: true,
           bindShape: group.shapes[0] as Rect,
+          style: {
+            display: visible ? 'block' : 'none',
+          },
         }),
       );
     }

packages/image/src/annotations/Relation.annotation.ts

@@ -164,6 +164,9 @@ export class AnnotationRelation extends Annotation<RelationData, LineStyle> {
         false, // 标签文本在线条下方
         data.order,
         group.shapes[0] as Line,
+        {
+          display: visible ? 'block' : 'none',
+        },
       ),
     );
 
@@ -175,6 +178,9 @@ export class AnnotationRelation extends Annotation<RelationData, LineStyle> {
           true, // 属性文本在线条上方
           data.order,
           group.shapes[0] as Line,
+          {
+            display: visible ? 'block' : 'none',
+          },
         ),
       );
     }

packages/image/src/core/DomPortal.ts

@@ -15,6 +15,7 @@ export interface DomPortalParams {
   content: HTMLElement | string;
   bindShape: AllShape;
   preventPointerEvents?: boolean;
+  style?: Record<string, string>;
 }
 
 export class DomPortal {
@@ -48,6 +49,7 @@ export class DomPortal {
     order = 2,
     rotate = 0,
     getPosition,
+    style,
   }: DomPortalParams) {
     this._content = content;
     this._shape = bindShape;
@@ -100,6 +102,10 @@ export class DomPortal {
 
     this._container.appendChild(this._wrapper);
     this._setupElementStyle();
+
+    if (style) {
+      Object.assign(this._wrapper.style, style);
+    }
   }
 
   private _setupElementStyle() {
@@ -154,10 +160,6 @@ export class DomPortal {
     this._wrapper.style.display = 'none';
   }
 
-  public setOpacity(opacity: number) {
-    this._wrapper.style.opacity = `${opacity}`;
-  }
-
   public toTop() {
     this._wrapper.style.zIndex = '1049';
   }