Extract anchor component (#1128)

Author: jpggvilaca

web_ui/packages/smart-tools/index.ts

@@ -14,9 +14,4 @@ export { type GrabcutData } from './src/grabcut/interfaces';
 
 export { buildIntelligentScissorsInstance, IntelligentScissors } from './src/intelligent-scissors/intelligent-scissors';
 
-export {
-    buildSegmentAnythingInstance,
-    SegmentAnythingModelWrapper,
-} from './src/segment-anything/segment-anything-wrapper';
-export { SegmentAnythingModel } from './src/segment-anything/segment-anything';
-export type { EncodingOutput } from './src/segment-anything/segment-anything-encoder';
+export { Anchor } from './src/edit-bounding-box/anchor.component';

web_ui/packages/smart-tools/package.json

@@ -30,7 +30,8 @@
     "./opencv": "./src/opencv/interfaces/index.d.ts",
     "./utils": "./src/utils/index.ts",
     "./types": "./src/shared/index.ts",
-    "./ritm": "./src/ritm/index.ts"
+    "./ritm": "./src/ritm/index.ts",
+    "./segment-anything": "./src/segment-anything/index.ts"
   },
   "scripts": {
     "type-check": "tsc --noEmit -p tsconfig.json",

…tor/tools/edit-tool/anchor.component.tsx …c/edit-bounding-box/anchor.component.tsxweb_ui/src/pages/annotator/tools/edit-tool/anchor.component.tsx renamed to web_ui/packages/smart-tools/src/edit-bounding-box/anchor.component.tsx web_ui/src/pages/annotator/tools/edit-tool/anchor.component.tsx renamed to web_ui/packages/smart-tools/src/edit-bounding-box/anchor.component.tsx

@@ -5,9 +5,20 @@ import { CSSProperties, PointerEvent, ReactNode, useState } from 'react';
 
 import { isFunction } from 'lodash-es';
 
-import { Point } from '../../../../core/annotations/shapes.interface';
-import { isLeftButton } from '../../../buttons-utils';
-import { PointerType } from '../tools.interface';
+import { Point } from '../shared/interfaces';
+
+interface MouseButton {
+    button: number;
+    buttons: number;
+}
+
+const BUTTON_LEFT = {
+    button: 0,
+    buttons: 1,
+};
+const isLeftButton = (button: MouseButton): boolean => {
+    return button.button === BUTTON_LEFT.button || button.buttons === BUTTON_LEFT.buttons;
+};
 
 interface AnchorProps {
     children: ReactNode;
@@ -41,7 +52,7 @@ export const Anchor = ({
     const onPointerDown = (event: PointerEvent) => {
         event.preventDefault();
 
-        if (event.pointerType === PointerType.Touch || !isLeftButton(event)) {
+        if (event.pointerType === 'touch' || !isLeftButton(event)) {
             return;
         }
 
@@ -66,7 +77,7 @@ export const Anchor = ({
     };
 
     const onPointerUp = (event: PointerEvent) => {
-        if (event.pointerType === PointerType.Touch || !isLeftButton(event)) {
+        if (event.pointerType === 'touch' || !isLeftButton(event)) {
             return;
         }
 

…nnotator/tools/edit-tool/anchor.test.tsx …ls/src/edit-bounding-box/anchor.test.tsxweb_ui/src/pages/annotator/tools/edit-tool/anchor.test.tsx renamed to web_ui/packages/smart-tools/src/edit-bounding-box/anchor.test.tsx web_ui/src/pages/annotator/tools/edit-tool/anchor.test.tsx renamed to web_ui/packages/smart-tools/src/edit-bounding-box/anchor.test.tsx

@@ -32,7 +32,7 @@ describe('anchor', (): void => {
         const anchorActor = screen.getByLabelText(properties.label);
         fireEvent.pointerDown(anchorActor);
         fireEvent.pointerMove(anchorActor, { clientX: 10, clientY: 10 });
-        expect(moveAnchorCallback).toBeCalledTimes(1);
+        expect(moveAnchorCallback).toHaveBeenCalledTimes(1);
     });
 
     it('calls onComplete when clicked and released', () => {
@@ -48,6 +48,6 @@ describe('anchor', (): void => {
         fireEvent.pointerDown(anchorActor);
         fireEvent.pointerMove(anchorActor, { clientX: 10, clientY: 10 });
         fireEvent.pointerUp(anchorActor);
-        expect(onCompleteCallback).toBeCalledTimes(1);
+        expect(onCompleteCallback).toHaveBeenCalledTimes(1);
     });
 });

web_ui/packages/smart-tools/src/segment-anything/index.ts

@@ -0,0 +1,6 @@
+// Copyright (C) 2022-2025 Intel Corporation
+// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
+
+export { buildSegmentAnythingInstance, SegmentAnythingModelWrapper } from './segment-anything-wrapper';
+export { SegmentAnythingModel } from './segment-anything';
+export type { EncodingOutput } from './segment-anything-encoder';

web_ui/src/hooks/use-load-ai-webworker/load-webworker.interface.ts

@@ -1,8 +1,9 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Grabcut, InferenceImage, IntelligentScissors, SegmentAnythingModel, SSIM, Watershed } from '@geti/smart-tools';
+import { Grabcut, InferenceImage, IntelligentScissors, SSIM, Watershed } from '@geti/smart-tools';
 import { RITM } from '@geti/smart-tools/ritm';
+import { SegmentAnythingModel } from '@geti/smart-tools/segment-anything';
 import { Remote } from 'comlink';
 
 import { AlgorithmType } from './algorithm.interface';

web_ui/src/pages/annotator/tools/edit-tool/edit-keypoint/rotation-anchor.component.tsx

@@ -1,12 +1,12 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
+import { Anchor } from '@geti/smart-tools';
 import { radiansToDegrees, Vec2 } from '@geti/smart-tools/utils';
 import { Rotation } from '@geti/ui/icons';
 import { clsx } from 'clsx';
 
 import { Point } from '../../../../../core/annotations/shapes.interface';
-import { Anchor } from '../anchor.component';
 
 import styles from './rotation-anchor.module.scss';
 

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

@@ -3,10 +3,9 @@
 
 import { CSSProperties } from 'react';
 
+import { Anchor } from '@geti/smart-tools';
 import { Rotation } from '@geti/ui/icons';
 
-import { Anchor } from '../../anchor.component';
-
 interface RotationAnchorProps {
     zoom: number;
     x: number;

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

@@ -3,7 +3,8 @@
 
 import { CSSProperties, ReactNode } from 'react';
 
-import { Anchor as InternalAnchor } from './anchor.component';
+import { Anchor as InternalAnchor } from '@geti/smart-tools';
+
 import { ResizeAnchorType } from './resize-anchor.enum';
 
 export const ANCHOR_SIZE = 8;

web_ui/src/pages/annotator/tools/segment-anything-tool/segment-anything-state-provider.component.tsx

@@ -3,7 +3,7 @@
 
 import { createContext, useContext, useEffect } from 'react';
 
-import { EncodingOutput } from '@geti/smart-tools';
+import { EncodingOutput } from '@geti/smart-tools/segment-anything';
 import { useQueryClient, UseQueryResult } from '@tanstack/react-query';
 import { isEmpty } from 'lodash-es';