Merge pull request #265 from lixinghua123/3.4-pointCloud-lxh

feat: Point cloud tool view optimizations
open-mmlab · Aug 14, 2023 · 7f3bb28 · 7f3bb28
2 parents 586a351 + 9261897
commit 7f3bb28
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 69 deletions.
diff --git a/packages/lb-components/src/components/pointCloudView/PointCloud2DView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloud2DView.tsx
@@ -49,13 +49,76 @@ const EKeyCode = cKeyCode.default;
 
 interface IProps extends IA2MapStateProps {
   thumbnailWidth?: number;
+  isEnlargeTopView?: boolean;
 }
 
-const PointCloud2DView = ({ currentData, config, thumbnailWidth, highlightAttribute }: IProps) => {
+const ContainerTitle = ({
+  showEnlarge,
+  isEnlargeTopView,
+  data,
+  setIsEnlarge,
+  setCurIndex,
+  curIndex = 0,
+  index,
+  annotations2d,
+}: {
+  showEnlarge: boolean;
+  isEnlargeTopView?: boolean;
+  data: IAnnotationData2dView;
+  setIsEnlarge: (v: boolean) => void;
+  setCurIndex: (v: number | undefined) => void;
+  curIndex: number | undefined;
+  index: number;
+  annotations2d: IAnnotationData2dView[];
+}) => {
+  if (isEnlargeTopView) {
+    return (
+      <TitleButton
+        title={data?.calName}
+        style={{ background: 'rgba(0, 0, 0, 0.74)', color: '#FFFFFF' }}
+      />
+    );
+  }
+  if (showEnlarge) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <LeftOutlined
+          style={{ cursor: 'pointer', marginRight: '12px' }}
+          onClick={() => {
+            setIsEnlarge(false);
+            setCurIndex(undefined);
+          }}
+        />
+        <span>{data?.calName}</span>
+        <span style={{ marginLeft: '8px' }}>
+          {curIndex + 1}/{annotations2d?.length}
+        </span>
+      </div>
+    );
+  }
+  return (
+    <TitleButton
+      title={data?.calName}
+      onClick={() => {
+        setIsEnlarge(true);
+        setCurIndex(index);
+      }}
+      style={{ background: 'rgba(0, 0, 0, 0.74)', color: '#FFFFFF' }}
+    />
+  );
+};
+
+const PointCloud2DView = ({
+  currentData,
+  config,
+  thumbnailWidth,
+  isEnlargeTopView,
+  highlightAttribute,
+}: IProps) => {
   const [annotations2d, setAnnotations2d] = useState<IAnnotationData2dView[]>([]);
   const { topViewInstance, displayPointCloudList } = useContext(PointCloudContext);
   const [selectedID, setSelectedID] = useState<number | string>('');
-  const [isEnlarge, setIsEnlarge] = useState(false);
+  const [isEnlarge, setIsEnlarge] = useState<boolean>(false);
   const [curIndex, setCurIndex] = useState<number | undefined>(undefined);
 
   useEffect(() => {
@@ -240,30 +303,16 @@ const PointCloud2DView = ({ currentData, config, thumbnailWidth, highlightAttrib
                 [getClassName('point-cloud-3d-containerZoom')]: showEnlarge,
               })}
               title={
-                showEnlarge ? (
-                  <div style={{ display: 'flex', alignItems: 'center' }}>
-                    <LeftOutlined
-                      style={{ cursor: 'pointer', marginRight: '12px' }}
-                      onClick={() => {
-                        setIsEnlarge(false);
-                        setCurIndex(undefined);
-                      }}
-                    />
-                    <span>{item?.calName}</span>
-                    <span style={{ marginLeft: '8px' }}>
-                      {curIndex + 1}/{annotations2d?.length}
-                    </span>
-                  </div>
-                ) : (
-                  <TitleButton
-                    title={item?.calName}
-                    onClick={() => {
-                      setIsEnlarge(true);
-                      setCurIndex(index);
-                    }}
-                    style={{ background: 'rgba(0, 0, 0, 0.74)', color: '#FFFFFF' }}
-                  />
-                )
+                <ContainerTitle
+                  showEnlarge={showEnlarge}
+                  isEnlargeTopView={isEnlargeTopView}
+                  data={item}
+                  setIsEnlarge={setIsEnlarge}
+                  setCurIndex={setCurIndex}
+                  curIndex={curIndex}
+                  index={index}
+                  annotations2d={annotations2d}
+                />
               }
               titleOnSurface={!showEnlarge}
               style={{

diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudBackView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudBackView.tsx
@@ -190,7 +190,11 @@ const PointCloudBackView = ({ currentData, config, checkMode }: IA2MapStateProps
       titleOnSurface={true}
     >
       <div className={getClassName('point-cloud-container', 'bottom-view-content')}>
-        <div className={getClassName('point-cloud-container', 'core-instance')} ref={ref} />
+        <div
+          className={getClassName('point-cloud-container', 'core-instance')}
+          ref={ref}
+          style={{ width: 360 }}
+        />
         {!selectedBox && !selectedSphere && <EmptyPage />}
         <SizeInfoForView perspectiveView={EPerspectiveView.Back} />
       </div>

diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudInfos.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudInfos.tsx
@@ -107,18 +107,6 @@ export const BoxInfos = ({
     const { x, y, z } = selectedBox.info.center;
 
     let infos = [
-      {
-        label: t('Length'),
-        value: length.toFixed(DECIMAL_PLACES),
-      },
-      {
-        label: t('Width'),
-        value: width.toFixed(DECIMAL_PLACES),
-      },
-      {
-        label: t('Height'),
-        value: height.toFixed(DECIMAL_PLACES),
-      },
       {
         label: 'x',
         value: x.toFixed(DECIMAL_PLACES),
@@ -131,6 +119,18 @@ export const BoxInfos = ({
         label: 'z',
         value: z.toFixed(DECIMAL_PLACES),
       },
+      {
+        label: t('Length'),
+        value: length.toFixed(DECIMAL_PLACES),
+      },
+      {
+        label: t('Width'),
+        value: width.toFixed(DECIMAL_PLACES),
+      },
+      {
+        label: t('Height'),
+        value: height.toFixed(DECIMAL_PLACES),
+      },
       {
         label: t('Rotation_y'),
         value: UnitUtils.rad2deg(rotation_y).toFixed(DECIMAL_PLACES),

diff --git a/...ages/lb-components/src/components/pointCloudView/components/sideAndBackOverView/index.tsx b/...ages/lb-components/src/components/pointCloudView/components/sideAndBackOverView/index.tsx
@@ -50,40 +50,41 @@ const SideAndBackOverView = (props: IProps) => {
     <div
       className={classNames({
         [getClassName('point-cloud-container', 'left-bottom')]: true,
-        [getClassName('point-cloud-container', 'left-bottom-float')]: selectAndEnlarge,
+        [getClassName('point-cloud-container', 'left-bottom-float')]: true,
       })}
       style={{
         top: position.y,
         left: position.x,
         width: 360,
+        height: 400,
+        zIndex: selectAndEnlarge ? 1003 : -1,
       }}
     >
-      {selectAndEnlarge && (
-        <div
-          className={getClassName('point-cloud-container', 'left-bottom-floatHeader')}
-          draggable={'true'}
-          onDragStart={(event) => {
-            if (selectAndEnlarge) {
-              setOffset({
-                x: event.clientX - position.x,
-                y: event.clientY - position.y,
-              });
-            }
-          }}
-          onDrag={(e: any) => {
-            const moveX = e.clientX - offset.x;
-            const moveY = e.clientY - offset.y;
-            setPosition({ x: moveX, y: moveY });
-          }}
-          onDragEnd={(e: any) => {
-            const moveX = e.clientX - offset.x;
-            const moveY = e.clientY - offset.y;
-            setPosition({ x: moveX, y: moveY });
-          }}
-        >
-          {t('DragAndDrop')}
-        </div>
-      )}
+      <div
+        className={getClassName('point-cloud-container', 'left-bottom-floatHeader')}
+        draggable={'true'}
+        onDragStart={(event) => {
+          if (selectAndEnlarge) {
+            setOffset({
+              x: event.clientX - position.x,
+              y: event.clientY - position.y,
+            });
+          }
+        }}
+        onDrag={(e: any) => {
+          const moveX = e.clientX - offset.x;
+          const moveY = e.clientY - offset.y;
+          setPosition({ x: moveX, y: moveY });
+        }}
+        onDragEnd={(e: any) => {
+          const moveX = e.clientX - offset.x;
+          const moveY = e.clientY - offset.y;
+          setPosition({ x: moveX, y: moveY });
+        }}
+      >
+        {t('DragAndDrop')}
+      </div>
+
       <PointCloudBackView checkMode={checkMode} />
       <PointCloudSideView checkMode={checkMode} />
     </div>

diff --git a/packages/lb-components/src/components/pointCloudView/index.tsx b/packages/lb-components/src/components/pointCloudView/index.tsx
@@ -181,7 +181,10 @@ const PointCloudView: React.FC<IProps> = ({
                     isEnlargeTopView,
                 })}
               >
-                <PointCloud2DView thumbnailWidth={isEnlargeTopView ? 300 : 455} />
+                <PointCloud2DView
+                  isEnlargeTopView={isEnlargeTopView}
+                  thumbnailWidth={isEnlargeTopView ? 300 : 455}
+                />
               </div>
             </div>
           </div>

diff --git a/packages/lb-components/src/index.scss b/packages/lb-components/src/index.scss
@@ -1755,8 +1755,6 @@ $headerHeight: 40px;
       bottom: 0px;
       right: 0px;
       z-index: 1003;
-      width: 360px;
-      height: 400px;
       border: 1px solid #fff;
 
       .#{$ptPrefix}-container__left-bottom-floatHeader {