feat: Add PointCloudSideBackView EmptyView

open-mmlab · Aug 30, 2022 · b19513f · b19513f
1 parent 34520d4
commit b19513f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudBackView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudBackView.tsx
@@ -71,7 +71,7 @@ const PointCloudSideView = ({ currentData }: IAnnotationStateProps) => {
   const ptCtx = React.useContext(PointCloudContext);
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
   const ref = useRef<HTMLDivElement>(null);
-  const { updateSelectedBox } = useSingleBox();
+  const { updateSelectedBox, selectedBox } = useSingleBox();
 
   useEffect(() => {
     if (ref.current) {
@@ -177,7 +177,13 @@ const PointCloudSideView = ({ currentData }: IAnnotationStateProps) => {
       title='背视图'
       toolbar={<SizeInfoForView perspectiveView={EPerspectiveView.Back} />}
     >
-      <div style={{ width: '100%', height: 300 }} ref={ref} />
+      <div style={{ width: '100%', height: 300, position: 'relative' }} ref={ref} />
+
+      {!selectedBox && (
+        <div style={{ ...size }} className={getClassName('point-cloud-container', 'empty-page')}>
+          暂无数据
+        </div>
+      )}
     </PointCloudContainer>
   );
 };

diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudSideView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudSideView.tsx
@@ -5,14 +5,15 @@
  */
 import { PointCloud, PointCloudAnnotation } from '@labelbee/lb-annotation';
 import { getClassName } from '@/utils/dom';
-import { PointCloudContainer } from './PointCloudLayout';
+import { PointCloudContainer, usePointCloudSize } from './PointCloudLayout';
 import React, { useEffect, useRef, useState } from 'react';
 import { EPerspectiveView, IPointCloudBox } from '@labelbee/lb-utils';
 import { PointCloudContext } from './PointCloudContext';
 import { SizeInfoForView } from './PointCloudInfos';
 import { connect } from 'react-redux';
 import { aMapStateToProps, IAnnotationStateProps } from '@/store/annotation/map';
 import { usePointCloudViews } from './hooks/usePointCloudViews';
+import { useSingleBox } from './hooks/useSingleBox';
 
 /**
  * Get the offset from canvas2d-coordinate to world coordinate
@@ -69,6 +70,7 @@ const PointCloudSideView: React.FC<IAnnotationStateProps> = ({ currentData }) =>
   const ptCtx = React.useContext(PointCloudContext);
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
   const { sideViewUpdateBox } = usePointCloudViews();
+  const { selectedBox } = useSingleBox();
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -136,16 +138,12 @@ const PointCloudSideView: React.FC<IAnnotationStateProps> = ({ currentData }) =>
       title='侧视图'
       toolbar={<SizeInfoForView perspectiveView={EPerspectiveView.Left} />}
     >
-      <div style={{ width: '100%', height: 300 }} ref={ref} />
-      <div
-        style={{
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          width: 200,
-          color: 'white',
-        }}
-      />
+      <div style={{ width: '100%', height: 300, position: 'relative' }} ref={ref} />
+      {!selectedBox && (
+        <div style={{ ...size }} className={getClassName('point-cloud-container', 'empty-page')}>
+          暂无数据
+        </div>
+      )}
     </PointCloudContainer>
   );
 };

diff --git a/packages/lb-components/src/index.scss b/packages/lb-components/src/index.scss
@@ -1356,6 +1356,7 @@ $hotkey-container-padding: 7px;
 /** PointCloud样式 start */
 $pointCloudBg: #4c4c4c;
 $ptPrefix: #{$prefix}-point-cloud;
+$headerHeight: 40px;
 
 @mixin icon($size: 36px) {
   display: inline-block;
@@ -1389,7 +1390,7 @@ $ptPrefix: #{$prefix}-point-cloud;
     &__header {
       background-color: #444;
       color: white;
-      height: 40px;
+      height: $headerHeight;
       padding: 0 16px;
       line-height: 40px;
       display: flex;
@@ -1529,15 +1530,14 @@ $ptPrefix: #{$prefix}-point-cloud;
             &__left {
               background-position-y: -88px;
             }
-            
+
             &__back {
               background-position-y: -132px;
             }
 
             &__right {
               background-position-y: -176px;
             }
-
 
             &__bottom {
               background-position-y: -220px;
@@ -1575,6 +1575,20 @@ $ptPrefix: #{$prefix}-point-cloud;
       flex-direction: column;
     }
 
+    .#{$ptPrefix}-container__empty-page {
+      position: absolute;
+      left: 0;
+      top: $headerHeight;
+      flex: 1;
+      background: black;
+      color: #666666;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+      z-index: 20;
+    }
+
     .#{$ptPrefix}-container__right-bottom {
       flex: 1;
       display: flex;
@@ -1586,6 +1600,7 @@ $ptPrefix: #{$prefix}-point-cloud;
 
       .#{$ptPrefix}-container__side-view,
       .#{$ptPrefix}-container__back-view {
+        position: relative;
         flex: 1;
         background: black;
       }