Merge pull request #122 from IDEA-Research/feature/annotator_update

feature(annotator): update annotator functions & adapt to new mask fo…

packages/components/src/Annotator/components/AttributeEditor/index.tsx

@@ -1,12 +1,14 @@
+import { CloseOutlined } from '@ant-design/icons';
 import { Button, Card, message } from 'antd';
-import { useImmer } from 'use-immer';
-import { FloatWrapper } from '../FloatWrapper';
-import { memo, useEffect } from 'react';
 import { useLocale } from 'dds-utils/locale';
+import { memo, useEffect } from 'react';
+import { useImmer } from 'use-immer';
+
 import { IAttributeValue, IEditingAttribute } from '../../type';
-import './index.less';
 import AttributesForm from '../AttributesForm';
-import { CloseOutlined } from '@ant-design/icons';
+import { FloatWrapper } from '../FloatWrapper';
+
+import './index.less';
 
 interface IProps {
   data: IEditingAttribute;

packages/components/src/Annotator/components/AttributesForm/index.tsx

@@ -1,11 +1,13 @@
-import React, { memo } from 'react';
-import classNames from 'classnames';
 import { Button, Checkbox, Form, Input, Radio, Tooltip } from 'antd';
-import { EActionType, IAttribute, IAttributeValue } from '../../type';
+import classNames from 'classnames';
+import { useLocale } from 'dds-utils/locale';
 import { isEqual } from 'lodash';
-import './index.less';
+import React, { memo } from 'react';
+
 import { ReactComponent as Attribute } from '../../assets/attribute.svg';
-import { useLocale } from 'dds-utils/locale';
+import { EActionType, IAttribute, IAttributeValue } from '../../type';
+
+import './index.less';
 
 export interface IProps {
   isDarkTheme?: boolean;

packages/components/src/Annotator/components/CategoryCreator/index.tsx

@@ -1,7 +1,8 @@
-import { useLocale } from 'dds-utils/locale';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Divider, Input, InputRef, Space } from 'antd';
+import { useLocale } from 'dds-utils/locale';
 import { memo, useRef, useState } from 'react';
+
 interface IProps {
   onAdd: (value: string) => void;
 }

packages/components/src/Annotator/components/Classification/index.tsx

@@ -1,19 +1,21 @@
-import React, { memo, useMemo, useState } from 'react';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { Button, Tabs, Tooltip } from 'antd';
 import classNames from 'classnames';
 import { useLocale } from 'dds-utils/locale';
+import { isEqual } from 'lodash';
+import React, { memo, useMemo, useState } from 'react';
+import { Updater } from 'use-immer';
+
 import {
   Category,
   DrawData,
   IAttributeValue,
   IEditingAttribute,
 } from '../../type';
-import { isEqual } from 'lodash';
-import './index.less';
-import { Updater } from 'use-immer';
-import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import AttributesForm from '../AttributesForm';
 
+import './index.less';
+
 export interface IProps {
   className?: string;
   supportEdit?: boolean;

packages/components/src/Annotator/components/DisplaySettings/index.tsx

@@ -1,14 +1,16 @@
-import { Button, Popover, Slider, Tooltip } from 'antd';
 import Icon from '@ant-design/icons';
+import { Button, Popover, Slider, Tooltip } from 'antd';
 import { useLocale } from 'dds-utils/locale';
-import { ReactComponent as SettingIcon } from '../../assets/settings-sliders.svg';
-import { ReactComponent as DisplayReset } from '../../assets/displayReset.svg';
 import { memo, useMemo } from 'react';
+
+import { ReactComponent as DisplayReset } from '../../assets/displayReset.svg';
+import { ReactComponent as SettingIcon } from '../../assets/settings-sliders.svg';
 import {
   DEFAULT_IMG_DISPLAY_OPTIONS,
   IAnnotsDisplayOptions,
   IImageDisplayOptions,
 } from '../../type';
+
 import './index.less';
 
 interface IProps {

packages/components/src/Annotator/components/EditorStatus/index.tsx

@@ -1,9 +1,11 @@
-import { memo } from 'react';
 import classNames from 'classnames';
 import { useLocale } from 'dds-utils/locale';
-import { EditorMode } from '../../type';
+import { memo } from 'react';
+
 import { ReactComponent as LabelIcon } from '../../assets/label.svg';
 import { ReactComponent as ReviewIcon } from '../../assets/review.svg';
+import { EditorMode } from '../../type';
+
 import './index.less';
 
 interface IProps {

packages/components/src/Annotator/components/ImageView/index.tsx

@@ -1,7 +1,9 @@
-import { Button, Spin } from 'antd';
 import { ReloadOutlined } from '@ant-design/icons';
-import ImgBroken from '../../assets/img-broken.svg';
+import { Button, Spin } from 'antd';
 import React, { useState } from 'react';
+
+import ImgBroken from '../../assets/img-broken.svg';
+
 import './index.less';
 
 interface IProps {

packages/components/src/Annotator/components/LabelSelector/index.tsx

@@ -1,14 +1,16 @@
 import { Select } from 'antd';
 import { useLocale } from 'dds-utils/locale';
 import { memo, useMemo } from 'react';
-import { Category, DrawData } from '../../type';
-import CategoryCreator from '../CategoryCreator';
+
 import {
   EBasicToolItem,
   EBasicToolTypeMap,
   LABEL_TOOL_MAP,
   OBJECT_ICON,
 } from '../../constants';
+import { Category, DrawData } from '../../type';
+import CategoryCreator from '../CategoryCreator';
+
 import './index.less';
 
 interface IProps {

packages/components/src/Annotator/components/ModelSelectModal/index.less

@@ -1,18 +1,20 @@
 .dds-annotator-model-selector-modal {
   display: flex;
-  gap: 30px;
+  align-items: center;
+  justify-content: space-between;
 
   &-option {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-between;
+    gap: 10px;
     padding-top: 30px;
-    padding-block-end: 20px;
-    margin-block: 25px;
+    padding-bottom: 20px;
+    padding-inline: 5px;
+    margin-block: 10px;
     width: 220px;
-    height: 180px;
+    height: 200px;
     border: 0.5px solid #d6d6d6;
 
     &-icon {
@@ -23,15 +25,19 @@
     }
 
     &-name {
+      text-align: center;
       color: #000;
       font-size: 18px;
       font-weight: 500;
       user-select: none;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: 90%;
     }
 
     &-description {
       text-align: center;
-      width: 80%;
       color: rgba(0, 0, 0, 0.4);
       font-size: 12px;
       font-weight: 400;
@@ -47,14 +53,13 @@
     }
 
     &:hover {
-      border: 2px solid #165cff;
       background: rgba(185, 206, 255, 0.11);
       box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
     }
   }
 
   &-option-hightlight {
-    border: 2px solid #165cff5f;
+    border: 1px solid #165cff5f;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
     background: rgba(185, 206, 255, 0.3);
   }

packages/components/src/Annotator/components/ModelSelectModal/index.tsx

@@ -1,57 +1,58 @@
-import {
-  EBasicToolItem,
-  EnumModelType,
-  MODEL_INTRO_MAP,
-  TOOL_MODELS_MAP,
-} from '../../constants';
 import Icon from '@ant-design/icons';
 import { Modal, Tag } from 'antd';
+import classNames from 'classnames';
+import { useLocale } from 'dds-utils';
 import { memo, useMemo } from 'react';
+
+import { EnumModelType, MODEL_INTRO_MAP } from '../../constants';
+
 import './index.less';
-import { useLocale } from 'dds-utils';
-import classNames from 'classnames';
 
 interface IProps {
-  selectedTool: EBasicToolItem;
   AIAnnotation: boolean;
+  modelOptions: EnumModelType[];
   selectedModel?: EnumModelType;
   onSelectModel: (type: EnumModelType) => void;
   onCloseModal: () => void;
 }
 
 const ModelSelectModal: React.FC<IProps> = memo(
   ({
-    selectedTool,
     AIAnnotation,
+    modelOptions,
     selectedModel,
     onSelectModel,
     onCloseModal,
   }) => {
     const { localeText } = useLocale();
 
+    const modalWidth =
+      modelOptions.length * 220 + (modelOptions.length + 1) * 20;
+
     const autoOpen = useMemo(() => {
       if (
         AIAnnotation &&
-        TOOL_MODELS_MAP[selectedTool] &&
-        TOOL_MODELS_MAP[selectedTool]!.length > 1 &&
+        modelOptions &&
+        modelOptions.length > 1 &&
         !selectedModel
       ) {
         return true;
       }
       return false;
-    }, [AIAnnotation, selectedTool, selectedModel]);
+    }, [AIAnnotation, modelOptions, selectedModel]);
 
     return (
       <Modal
         open={autoOpen}
-        title={'Enable Intelligent Annotate'}
+        title={localeText('DDSAnnotator.smart.modelSelectModal.title')}
+        width={modalWidth}
         onCancel={onCloseModal}
         footer={null}
         centered
         destroyOnClose
       >
         <div className="dds-annotator-model-selector-modal">
-          {TOOL_MODELS_MAP[selectedTool]?.map((model, index) => {
+          {modelOptions.map((model, index) => {
             const intro = MODEL_INTRO_MAP[model];
             if (!intro) return <></>;
             return (
@@ -71,7 +72,7 @@ const ModelSelectModal: React.FC<IProps> = memo(
                   component={intro.icon}
                 />
                 <div className="dds-annotator-model-selector-modal-option-name">
-                  {intro.name}
+                  {localeText(intro.name)}
                 </div>
                 <div className="dds-annotator-model-selector-modal-option-description">
                   {localeText(intro.description)}

packages/components/src/Annotator/components/ModelSelector/index.tsx

@@ -1,32 +1,37 @@
+import Icon from '@ant-design/icons';
 import { Select } from 'antd';
 import { useLocale } from 'dds-utils/locale';
 import { memo } from 'react';
-import { DrawData } from '../../type';
+
 import {
+  EBasicToolItem,
+  EBasicToolTypeMap,
   EnumModelType,
-  EObjectType,
   MODEL_INTRO_MAP,
   OBJECT_AI_ICON,
 } from '../../constants';
+
 import './index.less';
-import Icon from '@ant-design/icons';
 
 interface IProps {
-  drawData: DrawData;
+  selectedTool: EBasicToolItem;
+  selectedModel?: EnumModelType;
   modelOptions: EnumModelType[];
   onSelectModel: (type: EnumModelType) => void;
 }
 
 const ModelSelector: React.FC<IProps> = memo(
-  ({ drawData, modelOptions, onSelectModel }) => {
+  ({ selectedTool, selectedModel, modelOptions, onSelectModel }) => {
     const { localeText } = useLocale();
 
+    const objectType = EBasicToolTypeMap[selectedTool];
+
     return (
       <div className="dds-annotator-model-selector">
         <Select
           placeholder={localeText('DDSAnnotator.label.select')}
           size="middle"
-          value={drawData.selectedModel}
+          value={selectedModel}
           onChange={onSelectModel}
           popupClassName="objects-select-popup"
           onClick={(event) => event.stopPropagation()}
@@ -43,8 +48,9 @@ const ModelSelector: React.FC<IProps> = memo(
               value={model}
               className="dds-annotator-model-selector-option"
             >
-              <Icon component={OBJECT_AI_ICON[EObjectType.Rectangle]} />
-              {MODEL_INTRO_MAP[model]?.name}
+              <Icon component={OBJECT_AI_ICON[objectType]} />
+              {MODEL_INTRO_MAP[model] &&
+                localeText(MODEL_INTRO_MAP[model]!.name)}
             </Select.Option>
           ))}
         </Select>

packages/components/src/Annotator/components/ObjectList/index.tsx

@@ -1,3 +1,15 @@
+import Icon, {
+  DeleteOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
+} from '@ant-design/icons';
+import { useKeyPress } from 'ahooks';
+import { Button, Collapse, List, Tabs, Tooltip } from 'antd';
+import classNames from 'classnames';
+import { useWindowResize } from 'dds-hooks';
+import { useLocale } from 'dds-utils/locale';
+import { isEqual } from 'lodash';
+import VirtualList, { ListRef } from 'rc-virtual-list';
 import React, {
   memo,
   useCallback,
@@ -6,32 +18,22 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Button, Collapse, List, Tabs, Tooltip } from 'antd';
-import { OBJECT_ICON } from '../../constants';
-import { ReactComponent as DownArrorIcon } from '../../assets/downArror.svg';
-import { ReactComponent as Palette } from '../../assets/palette.svg';
+import { Updater } from 'use-immer';
+
 import { ReactComponent as Attribute } from '../../assets/attribute.svg';
+import { ReactComponent as DownArrorIcon } from '../../assets/downArror.svg';
 import { ReactComponent as Layer } from '../../assets/layer.svg';
-import classNames from 'classnames';
-import Icon, {
-  DeleteOutlined,
-  EyeInvisibleOutlined,
-  EyeOutlined,
-} from '@ant-design/icons';
+import { ReactComponent as Palette } from '../../assets/palette.svg';
+import { OBJECT_ICON } from '../../constants';
+import { EDITOR_SHORTCUTS, EShortcuts } from '../../constants/shortcuts';
 import {
   Category,
   DrawData,
   IAnnotationObject,
   IAnnotsDisplayOptions,
 } from '../../type';
-import { useKeyPress } from 'ahooks';
-import { EDITOR_SHORTCUTS, EShortcuts } from '../../constants/shortcuts';
-import { useLocale } from 'dds-utils/locale';
-import VirtualList, { ListRef } from 'rc-virtual-list';
-import { useWindowResize } from 'dds-hooks';
-import { isEqual } from 'lodash';
+
 import './index.less';
-import { Updater } from 'use-immer';
 
 export interface IProps {
   objects: IAnnotationObject[];