From c2cf6fc3cc3eb7efbc1c983684cac6bc2b3fc0dc Mon Sep 17 00:00:00 2001
From: "lixinghua.vendor" <lixinghua.vendor@sensetime.com>
Date: Mon, 8 May 2023 11:44:49 +0800
Subject: [PATCH] feat: 3D point cloud supports custom colors in
 annotation-Adjustment

---
 .../src/components/attributeList/index.tsx           | 10 ++++++----
 .../src/components/colorPalette/index.tsx            |  2 +-
 packages/lb-components/src/utils/colorUtils.ts       | 12 ++++++------
 .../MainView/sidebar/PointCloudToolSidebar/index.tsx |  3 ++-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/lb-components/src/components/attributeList/index.tsx b/packages/lb-components/src/components/attributeList/index.tsx
index 4427218d3..66e0862be 100644
--- a/packages/lb-components/src/components/attributeList/index.tsx
+++ b/packages/lb-components/src/components/attributeList/index.tsx
@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { Popover } from 'antd';
 import ColorPalette from '../colorPalette';
 import { CloseOutlined } from '@ant-design/icons';
-import { i18n } from '@labelbee/lb-utils';
+import { useTranslation } from 'react-i18next';
 
 export const ATTRIBUTE_COLORS = [NULL_COLOR].concat(COLORS_ARRAY);
 
@@ -28,7 +28,7 @@ interface IProps {
 
 const AttributeList = React.forwardRef((props: IProps, ref) => {
   const radioRef = React.useRef<any>();
-
+  const { t } = useTranslation();
   const list = props.list || [];
 
   const [paletteVisible, setPaletteVisible] = useState<boolean>(false);
@@ -47,7 +47,9 @@ const AttributeList = React.forwardRef((props: IProps, ref) => {
   }
 
   const changeColor = (value: string, color: string) => {
-    props.updateColorConfig(value, color);
+    if (props.updateColorConfig) {
+      props.updateColorConfig(value, color);
+    }
   };
 
   return (
@@ -100,7 +102,7 @@ const AttributeList = React.forwardRef((props: IProps, ref) => {
                           alignItems: 'center',
                         }}
                       >
-                        <span>{i18n.t('Palette')}</span>
+                        <span>{t('Palette')}</span>
                         <CloseOutlined onClick={() => setPaletteVisible(false)} />
                       </div>
                     }
diff --git a/packages/lb-components/src/components/colorPalette/index.tsx b/packages/lb-components/src/components/colorPalette/index.tsx
index d2ef14bb9..7ad368372 100644
--- a/packages/lb-components/src/components/colorPalette/index.tsx
+++ b/packages/lb-components/src/components/colorPalette/index.tsx
@@ -17,7 +17,7 @@ const Palette = (props: IProps) => {
 
   return (
     <RgbaColorPicker
-      color={defaultColor && toRGBAObj(defaultColor)}
+      color={toRGBAObj(defaultColor)}
       onChange={(values) => {
         const colorStr = toRGBAStr(values);
         setColor(colorStr);
diff --git a/packages/lb-components/src/utils/colorUtils.ts b/packages/lb-components/src/utils/colorUtils.ts
index ebc647f27..3753f83d7 100644
--- a/packages/lb-components/src/utils/colorUtils.ts
+++ b/packages/lb-components/src/utils/colorUtils.ts
@@ -1,17 +1,17 @@
 /**
- * transform rgba(a,g,b), to {r,g,b,a} / [r,g,b,a]
+ * transform rgba(a,g,b), to {r,g,b,a}
  * @param color
  */
-export const toRGBAObj = (rgbStr: string, toArray?: boolean) => {
+export const toRGBAObj = (rgbStr: string | undefined) => {
+  if (!rgbStr) {
+    return;
+  }
   const match = rgbStr.replace(/[rgba()]/g, '').split(',');
   if (match) {
     const [r, g, b, a] = match;
-    if (toArray) {
-      return [r, g, b, a];
-    }
     return { r: Number(r), g: Number(g), b: Number(b), a: Number(a) };
   }
-  return '';
+  return undefined;
 };
 
 /**
diff --git a/packages/lb-components/src/views/MainView/sidebar/PointCloudToolSidebar/index.tsx b/packages/lb-components/src/views/MainView/sidebar/PointCloudToolSidebar/index.tsx
index 8be4a9237..25d44a749 100644
--- a/packages/lb-components/src/views/MainView/sidebar/PointCloudToolSidebar/index.tsx
+++ b/packages/lb-components/src/views/MainView/sidebar/PointCloudToolSidebar/index.tsx
@@ -29,7 +29,7 @@ interface IProps {
   imgIndex: number;
   stepList: IStepInfo[];
 }
-const dispatch = useDispatch();
+
 // Temporarily hidden, this feature does not support the function for the time being.
 const AnnotatedBox = ({ imgList, imgIndex }: { imgList: IFileItem[]; imgIndex: number }) => {
   const ptCtx = useContext(PointCloudContext);
@@ -206,6 +206,7 @@ const AttributeUpdater = ({
   const ptx = useContext(PointCloudContext);
   const { t } = useTranslation();
   const { defaultAttribute } = useAttribute();
+  const dispatch = useDispatch();
 
   const titleStyle = {
     fontWeight: 500,