feat(pointcloud): Add focus after imgOnload

packages/lb-components/src/components/AnnotationView/index.tsx

@@ -6,6 +6,9 @@
 import React, { useEffect, useRef, useImperativeHandle, useState } from 'react';
 import { ViewOperation, ImgUtils } from '@labelbee/lb-annotation';
 import { Spin } from 'antd/es';
+import useRefCache from '@/hooks/useRefCache';
+
+type TAfterImgOnLoad = (img: HTMLImageElement) => void;
 
 interface IProps {
   src: string; // 图片路径
@@ -25,6 +28,8 @@ interface IProps {
 
   showLoading?: boolean;
   globalStyle?: React.CSSProperties; // Custom global style.
+
+  afterImgOnLoad?: TAfterImgOnLoad;
 }
 
 const DEFAULT_SIZE = {
@@ -68,11 +73,13 @@ const AnnotationView = (props: IProps, ref: any) => {
     onChange,
     showLoading = false,
     globalStyle,
+    afterImgOnLoad,
   } = props;
   const size = sizeInitialized(props.size);
   const [loading, setLoading] = useState(false);
   const annotationRef = useRef<HTMLDivElement>(null);
   const viewOperation = useRef<ViewOperation>();
+  const afterImgOnLoadRef = useRefCache<TAfterImgOnLoad | undefined>(afterImgOnLoad);
 
   useImperativeHandle(
     ref,
@@ -120,6 +127,10 @@ const AnnotationView = (props: IProps, ref: any) => {
           setLoading(false);
 
           viewOperation.current?.setImgNode(imgNode);
+
+          if (afterImgOnLoadRef.current) {
+            afterImgOnLoadRef.current(imgNode);
+          }
         })
         .catch(() => {
           viewOperation.current?.setLoading(false);

packages/lb-components/src/components/pointCloudView/PointCloud2DView.tsx

@@ -1,5 +1,5 @@
 import { getClassName } from '@/utils/dom';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { PointCloudContainer } from './PointCloudLayout';
 import AnnotationView from '@/components/AnnotationView';
 import { PointCloudContext } from './PointCloudContext';
@@ -99,7 +99,7 @@ const PointCloud2DView = ({ imgInfo }: IProps) => {
 
   const hiddenData = !imgInfo || !imgInfo?.mappingImgList || !(imgInfo?.mappingImgList?.length > 0);
 
-  useEffect(() => {
+  const afterImgOnLoad = useCallback(() => {
     const toolInstance = viewRef.current?.toolInstance;
 
     if (!selectedBox || !toolInstance) {
@@ -110,7 +110,14 @@ const PointCloud2DView = ({ imgInfo }: IProps) => {
     if (selected2data?.annotation.pointList?.length > 0) {
       toolInstance.focusPositionByPointList(selected2data?.annotation.pointList);
     }
-  }, [selectedBox, viewRef.current, annotations2d]);
+  }, [selectedBox, viewRef.current, annotations2d, mappingIndex]);
+
+  /**
+   * If the status is updated, it needs to
+   */
+  useEffect(() => {
+    afterImgOnLoad();
+  }, [afterImgOnLoad]);
 
   return (
     <PointCloudContainer
@@ -149,6 +156,7 @@ const PointCloud2DView = ({ imgInfo }: IProps) => {
           size={size}
           ref={viewRef}
           globalStyle={{ display: hiddenData ? 'none' : 'block' }}
+          afterImgOnLoad={afterImgOnLoad}
         />
       </div>
     </PointCloudContainer>

packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx

@@ -151,6 +151,7 @@ const PointCloudListener: React.FC<IAnnotationStateProps> = ({ currentData }) =>
     updatePointCloudData?.();
   }, [currentData, ptCtx.mainViewInstance]);
 
+  // Update the listener of toolInstance.
   useEffect(() => {
     toolInstanceRef.current.exportData = () => {
       return [ptCtx.pointCloudBoxList, { valid: ptCtx.valid }];

packages/lb-components/src/hooks/useRefCache.ts

@@ -0,0 +1,17 @@
+/**
+ * @file Cache the operation
+ * @createDate 2022-09-27
+ * @author Ron <ron.f.luo@gmail.com>
+ */
+
+import { useRef, useEffect } from 'react';
+
+const useRefCache = <T>(data: T) => {
+  const ref = useRef<T>(data);
+  useEffect(() => {
+    ref.current = data
+  }, [data]);
+  return ref;
+};
+
+export default useRefCache;