feat: 3D point cloud supports custom colors in annotation-Adjustment

open-mmlab · May 8, 2023 · c2cf6fc · c2cf6fc
1 parent a4733c7
commit c2cf6fc
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,