Extract resize anchor component (#1131)

jpggvilaca · web-flow · commit 0b2fef182fa5 · 2025-08-19T11:19:51.000Z
diff --git a/web_ui/packages/smart-tools/index.ts b/web_ui/packages/smart-tools/index.ts
@@ -15,3 +15,4 @@ export { type GrabcutData } from './src/grabcut/interfaces';
 export { buildIntelligentScissorsInstance, IntelligentScissors } from './src/intelligent-scissors/intelligent-scissors';
 
 export { Anchor } from './src/edit-bounding-box/anchor.component';
+export { ANCHOR_SIZE, ResizeAnchor } from './src/edit-bounding-box/resize-anchor.component';
diff --git a/web_ui/packages/smart-tools/src/edit-bounding-box/resize-anchor.component.tsx b/web_ui/packages/smart-tools/src/edit-bounding-box/resize-anchor.component.tsx
@@ -3,12 +3,16 @@
 
 import { CSSProperties, ReactNode } from 'react';
 
-import { Anchor as InternalAnchor } from '@geti/smart-tools';
-
-import { ResizeAnchorType } from './resize-anchor.enum';
+import { Anchor as InternalAnchor } from './anchor.component';
 
 export const ANCHOR_SIZE = 8;
 
+enum ResizeAnchorType {
+    SQUARE,
+    CIRCLE,
+    CUSTOM,
+}
+
 interface ResizeAnchorProps {
     zoom: number;
     x: number;
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-bounding-box/edit-bounding-box.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-bounding-box/edit-bounding-box.component.tsx
@@ -3,14 +3,15 @@
 
 import { useEffect, useState } from 'react';
 
+import { ANCHOR_SIZE, ResizeAnchor } from '@geti/smart-tools';
+
 import { Annotation } from '../../../../../core/annotations/annotation.interface';
 import { Point } from '../../../../../core/annotations/shapes.interface';
 import { ShapeType } from '../../../../../core/annotations/shapetype.enum';
 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';
 import { useZoom } from '../../../zoom/zoom-provider.component';
-import { ANCHOR_SIZE, ResizeAnchor } from '../resize-anchor.component';
 import { TranslateShape } from '../translate-shape.component';
 import { getBoundingBoxInRoi, getBoundingBoxResizePoints, getClampedBoundingBox } from '../utils';
 
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-bounding-box/edit-bounding-box.test.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-bounding-box/edit-bounding-box.test.tsx
@@ -3,6 +3,7 @@
 
 import '@wessberg/pointer-events';
 
+import { ANCHOR_SIZE } from '@geti/smart-tools';
 import { fireEvent, screen } from '@testing-library/react';
 
 import { Annotation } from '../../../../../core/annotations/annotation.interface';
@@ -15,7 +16,6 @@ import { ProjectProvider } from '../../../../project-details/providers/project-p
 import { AnnotationToolContext } from '../../../core/annotation-tool-context.interface';
 import { useROI } from '../../../providers/region-of-interest-provider/region-of-interest-provider.component';
 import { TaskProvider } from '../../../providers/task-provider/task-provider.component';
-import { ANCHOR_SIZE } from '../resize-anchor.component';
 import { EditBoundingBox as EditBoundingBoxTool } from './edit-bounding-box.component';
 
 const mockROI = getMockedROI({ x: 0, y: 0, width: 1000, height: 1000 });
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-circle/edit-circle.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-circle/edit-circle.component.tsx
@@ -3,6 +3,7 @@
 
 import { useEffect, useState } from 'react';
 
+import { ANCHOR_SIZE, ResizeAnchor } from '@geti/smart-tools';
 import { Vec2 } from '@geti/smart-tools/utils';
 
 import { Annotation, RegionOfInterest } from '../../../../../core/annotations/annotation.interface';
@@ -14,7 +15,6 @@ import { useROI } from '../../../providers/region-of-interest-provider/region-of
 import { useZoom } from '../../../zoom/zoom-provider.component';
 import { getMaxCircleRadius, MIN_RADIUS } from '../../circle-tool/utils';
 import { isShapeWithinRoi } from '../../utils';
-import { ANCHOR_SIZE, ResizeAnchor } from '../resize-anchor.component';
 import { ResizeAnchorType } from '../resize-anchor.enum';
 import { TranslateShape } from '../translate-shape.component';
 
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-keypoint/edit-keypoint-tool.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-keypoint/edit-keypoint-tool.component.tsx
@@ -3,6 +3,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 
+import { ANCHOR_SIZE, ResizeAnchor } from '@geti/smart-tools';
 import { getBoundingBox } from '@geti/smart-tools/utils';
 
 import { KeypointAnnotation } from '../../../../../core/annotations/annotation.interface';
@@ -20,7 +21,6 @@ import {
     MIN_BOUNDING_BOX_SIZE,
     rotatePointsAroundPivot,
 } from '../../keypoint-tool/utils';
-import { ANCHOR_SIZE, ResizeAnchor } from '../resize-anchor.component';
 import { TranslateShape } from '../translate-shape.component';
 import { getBoundingBoxInRoi, getBoundingBoxResizePoints, getClampedBoundingBox } from '../utils';
 import { ClosestKeypoint } from './closest-keypoint.component';
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-keypoint/edit-pose-point.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-keypoint/edit-pose-point.component.tsx
@@ -3,6 +3,7 @@
 
 import { useRef } from 'react';
 
+import { ResizeAnchor } from '@geti/smart-tools';
 import { Invisible, Visible } from '@geti/ui/icons';
 
 import { RegionOfInterest } from '../../../../../core/annotations/annotation.interface';
@@ -15,7 +16,6 @@ import { PoseKeypointVisibility } from '../../../annotation/shapes/pose-keypoint
 import { useAnnotatorCanvasSettings } from '../../../providers/annotator-canvas-settings-provider/annotator-canvas-settings-provider.component';
 import { useAnnotatorContextMenu } from '../../../providers/annotator-context-menu-provider/annotator-context-menu-provider.component';
 import { useZoom } from '../../../zoom/zoom-provider.component';
-import { ResizeAnchor } from '../resize-anchor.component';
 import { ResizeAnchorType } from '../resize-anchor.enum';
 
 export interface EditPosePointToolProps {
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-polygon/edit-points.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-polygon/edit-points.component.tsx
@@ -3,6 +3,7 @@
 
 import { PointerEvent, RefObject, useEffect, useRef, useState } from 'react';
 
+import { ANCHOR_SIZE, ResizeAnchor } from '@geti/smart-tools';
 import { Delete } from '@geti/ui/icons';
 import { isEmpty, noop } from 'lodash-es';
 
@@ -15,7 +16,6 @@ import { isKeyboardDelete } from '../../../../media/utils';
 import { getRelativePoint, projectPointOnLine } from '../../../../utils';
 import { useAnnotationScene } from '../../../providers/annotation-scene-provider/annotation-scene-provider.component';
 import { useAnnotatorContextMenu } from '../../../providers/annotator-context-menu-provider/annotator-context-menu-provider.component';
-import { ANCHOR_SIZE, ResizeAnchor } from '../resize-anchor.component';
 import { selectAnchorPointLabel } from './utils';
 
 interface EditPointsProps {
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-rotated-bounding-box/edit-rotated-bounding-box.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-rotated-bounding-box/edit-rotated-bounding-box.component.tsx
@@ -3,6 +3,7 @@
 
 import { useEffect, useState } from 'react';
 
+import { ANCHOR_SIZE, ResizeAnchor } from '@geti/smart-tools';
 import {
     calculateSizeAndPositionBasedOfCornerAnchor,
     calculateSizeAndPositionOfSideAnchor,
@@ -18,7 +19,6 @@ import { AnnotationToolContext } from '../../../core/annotation-tool-context.int
 import { useROI } from '../../../providers/region-of-interest-provider/region-of-interest-provider.component';
 import { useZoom } from '../../../zoom/zoom-provider.component';
 import { isShapeWithinRoi } from '../../utils';
-import { ANCHOR_SIZE, ResizeAnchor } from '../resize-anchor.component';
 import { ResizeAnchorType } from '../resize-anchor.enum';
 import { TranslateShape } from '../translate-shape.component';
 import { getSideAnchorLocations } from './location';
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-rotated-bounding-box/edit-rotated-bounding-box.test.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-rotated-bounding-box/edit-rotated-bounding-box.test.tsx
@@ -3,12 +3,12 @@
 
 import '@wessberg/pointer-events';
 
+import { ANCHOR_SIZE } from '@geti/smart-tools';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 import { ShapeType } from '../../../../../core/annotations/shapetype.enum';
 import { fakeAnnotationToolContext } from '../../../../../test-utils/fake-annotator-context';
 import { getMockedImage, getMockedROI } from '../../../../../test-utils/utils';
-import { ANCHOR_SIZE } from '../resize-anchor.component';
 import { EditRotatedBoundingBox as EditRotatedBoundingBoxTool } from './edit-rotated-bounding-box.component';
 
 const mockROI = getMockedROI({ x: 0, y: 0, width: 1000, height: 1000 });
diff --git a/web_ui/src/pages/annotator/tools/keypoint-tool/keypoint-tool.component.tsx b/web_ui/src/pages/annotator/tools/keypoint-tool/keypoint-tool.component.tsx
@@ -1,6 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
+import { ResizeAnchor } from '@geti/smart-tools';
 import { isEmpty, isNil } from 'lodash-es';
 
 import { RegionOfInterest } from '../../../../core/annotations/annotation.interface';
@@ -11,7 +12,6 @@ import { PoseKeypoints } from '../../annotation/shapes/pose-keypoints.component'
 import { useVisibleAnnotations } from '../../hooks/use-visible-annotations.hook';
 import { useROI } from '../../providers/region-of-interest-provider/region-of-interest-provider.component';
 import { useZoom } from '../../zoom/zoom-provider.component';
-import { ResizeAnchor } from '../edit-tool/resize-anchor.component';
 import { TranslateShape } from '../edit-tool/translate-shape.component';
 import { getBoundingBoxInRoi, getBoundingBoxResizePoints, getClampedBoundingBox } from '../edit-tool/utils';
 import { SvgToolCanvas } from '../svg-tool-canvas.component';
diff --git a/web_ui/src/pages/create-project/components/pose-template/canvas/points.component.tsx b/web_ui/src/pages/create-project/components/pose-template/canvas/points.component.tsx
@@ -1,9 +1,10 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
+import { ResizeAnchor } from '@geti/smart-tools';
+
 import { KeypointNode } from '../../../../../core/annotations/shapes.interface';
 import { PoseKeypoint } from '../../../../annotator/annotation/shapes/pose-keypoints.component';
-import { ResizeAnchor } from '../../../../annotator/tools/edit-tool/resize-anchor.component';
 import { ResizeAnchorType } from '../../../../annotator/tools/edit-tool/resize-anchor.enum';
 
 interface PointsProps {

Original file line number	Diff line number	Diff line change
`@@ -15,3 +15,4 @@ export { type GrabcutData } from './src/grabcut/interfaces';`
`15`	`15`	`export { buildIntelligentScissorsInstance, IntelligentScissors } from './src/intelligent-scissors/intelligent-scissors';`
`16`	`16`
`17`	`17`	`export { Anchor } from './src/edit-bounding-box/anchor.component';`
	`18`	`+export { ANCHOR_SIZE, ResizeAnchor } from './src/edit-bounding-box/resize-anchor.component';`