Fix translate shape style issue

Author: jpggvilaca

web_ui/packages/smart-tools/src/edit-bounding-box/edit-bounding-box/edit-bounding-box.component.tsx

@@ -65,7 +65,17 @@ export const EditBoundingBox = ({
                     annotation={{ ...annotation, shape }}
                     translateShape={translate}
                     onComplete={onComplete}
-                />
+                >
+                    <g id={`canvas-annotation-${annotation.id}`}>
+                        <rect
+                            x={annotation.shape.x}
+                            y={annotation.shape.y}
+                            width={annotation.shape.width}
+                            height={annotation.shape.height}
+                            fill='transparent'
+                        />
+                    </g>
+                </TranslateShape>
             </svg>
 
             {disablePoints === false ? (

web_ui/src/pages/annotator/tools/edit-tool/edit-circle/edit-circle.component.tsx

@@ -7,9 +7,10 @@ import { ANCHOR_SIZE, ResizeAnchor } from '@geti/smart-tools';
 import { Vec2 } from '@geti/smart-tools/utils';
 
 import { TranslateShape } from '../../../../../../packages/smart-tools/src/edit-bounding-box/translate-shape.component';
-import { Annotation, RegionOfInterest } from '../../../../../core/annotations/annotation.interface';
+import { Annotation as AnnotationType, RegionOfInterest } from '../../../../../core/annotations/annotation.interface';
 import { Point } from '../../../../../core/annotations/shapes.interface';
 import { ShapeType } from '../../../../../core/annotations/shapetype.enum';
+import { Annotation } from '../../../annotation/annotation.component';
 import { Labels } from '../../../annotation/labels/labels.component';
 import { AnnotationToolContext } from '../../../core/annotation-tool-context.interface';
 import { useROI } from '../../../providers/region-of-interest-provider/region-of-interest-provider.component';
@@ -25,7 +26,7 @@ type Circle = { x: number; y: number; r: number };
 
 interface EditCircleProps {
     annotationToolContext: AnnotationToolContext;
-    annotation: Annotation & { shape: { shapeType: ShapeType.Circle } };
+    annotation: AnnotationType & { shape: { shapeType: ShapeType.Circle } };
     disableTranslation?: boolean;
     disablePoints?: boolean;
 }
@@ -119,7 +120,9 @@ export const EditCircle = ({
                     annotation={{ ...annotation, shape }}
                     translateShape={translate}
                     onComplete={onComplete}
-                />
+                >
+                    <Annotation annotation={annotation} />
+                </TranslateShape>
 
                 <line
                     x1={shape.x}

web_ui/src/pages/annotator/tools/edit-tool/edit-polygon/edit-polygon.component.tsx

@@ -4,9 +4,10 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { TranslateShape } from '../../../../../../packages/smart-tools/src/edit-bounding-box/translate-shape.component';
-import { Annotation } from '../../../../../core/annotations/annotation.interface';
+import { Annotation as AnnotationType } from '../../../../../core/annotations/annotation.interface';
 import { Polygon } from '../../../../../core/annotations/shapes.interface';
 import { ShapeType } from '../../../../../core/annotations/shapetype.enum';
+import { Annotation } from '../../../annotation/annotation.component';
 import { Labels } from '../../../annotation/labels/labels.component';
 import { AnnotationScene } from '../../../core/annotation-scene.interface';
 import { AnnotationToolContext, ToolType } from '../../../core/annotation-tool-context.interface';
@@ -20,12 +21,12 @@ import classes from './../../../annotator-canvas.module.scss';
 
 interface EditPolygonProps {
     annotationToolContext: AnnotationToolContext;
-    annotation: Annotation & { shape: { shapeType: ShapeType.Polygon } };
+    annotation: AnnotationType & { shape: { shapeType: ShapeType.Polygon } };
     disableTranslation?: boolean;
     disablePoints?: boolean;
 }
 
-const updateOrRemovePolygonAnnotation = (annotation: Annotation, scene: AnnotationScene): void => {
+const updateOrRemovePolygonAnnotation = (annotation: AnnotationType, scene: AnnotationScene): void => {
     if (isPolygonValid(annotation.shape as Polygon)) {
         scene.updateAnnotation({ ...annotation });
     } else {
@@ -122,7 +123,9 @@ export const EditPolygon = ({
                     annotation={{ ...annotation, shape }}
                     onComplete={() => onComplete(shape)}
                     disabled={disableTranslation || isBrushSubTool}
-                />
+                >
+                    <Annotation annotation={annotation} />
+                </TranslateShape>
             </svg>
 
             {shape.points.length > 0 && !isBrushSubTool && <Labels annotation={{ ...annotation, shape }} />}

web_ui/src/pages/annotator/tools/edit-tool/edit-rotated-bounding-box/edit-rotated-bounding-box.component.tsx

@@ -14,8 +14,9 @@ import {
 } from '@geti/smart-tools/utils';
 
 import { TranslateShape } from '../../../../../../packages/smart-tools/src/edit-bounding-box/translate-shape.component';
-import { Annotation } from '../../../../../core/annotations/annotation.interface';
+import { Annotation as AnnotationType } from '../../../../../core/annotations/annotation.interface';
 import { ShapeType } from '../../../../../core/annotations/shapetype.enum';
+import { Annotation } from '../../../annotation/annotation.component';
 import { AnnotationToolContext } from '../../../core/annotation-tool-context.interface';
 import { useROI } from '../../../providers/region-of-interest-provider/region-of-interest-provider.component';
 import { useZoom } from '../../../zoom/zoom-provider.component';
@@ -28,7 +29,7 @@ import classes from './../../../annotator-canvas.module.scss';
 
 interface EditRotatedBoundingBoxProps {
     annotationToolContext: AnnotationToolContext;
-    annotation: Annotation & { shape: { shapeType: ShapeType.RotatedRect } };
+    annotation: AnnotationType & { shape: { shapeType: ShapeType.RotatedRect } };
     disableTranslation?: boolean;
     disablePoints?: boolean;
 }
@@ -181,7 +182,9 @@ export const EditRotatedBoundingBox = ({
                     annotation={{ ...annotation, shape }}
                     translateShape={translate}
                     onComplete={onComplete}
-                />
+                >
+                    <Annotation annotation={annotation} />
+                </TranslateShape>
             </svg>
 
             {disablePoints === false ? (