feat: Add a annotationPath display

open-mmlab · May 15, 2022 · caf671f · caf671f
1 parent a0d3575
commit caf671f
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 2 deletions.
diff --git a/packages/lb-components/src/App.tsx b/packages/lb-components/src/App.tsx
@@ -42,6 +42,7 @@ export interface AppProps {
   };
   setToolInstance?: (tool: ToolInstance) => void;
   mode?: 'light' | 'dark'; // 临时需求应用于 toolFooter 的操作
+  showTips?: boolean; // 是否展示 tips
   defaultLang: 'en' | 'cn'; // 国际化设置
   leftSider?: () => React.ReactNode | React.ReactNode;
 

diff --git a/packages/lb-components/src/index.scss b/packages/lb-components/src/index.scss
@@ -519,6 +519,22 @@ $prefix: bee;
   }
 }
 
+.#{$prefix}-tips {
+  display: flex;
+  justify-content: flex-end;
+  background-color: #333;
+  color: rgba(255,255,255,0.4);
+  line-height: 40px;
+  opacity: .8;
+  height: 40px;
+  padding: 0 30px;
+  width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: text;
+}
+
 //
 .annotationOperation {
   position: relative;

diff --git a/packages/lb-components/src/views/MainView/annotationTips/index.tsx b/packages/lb-components/src/views/MainView/annotationTips/index.tsx
@@ -0,0 +1,32 @@
+/*
+ * Annotation Tips Showing
+ * @Author: Laoluo [email protected]
+ * @Date: 2022-05-11 17:15:30
+ * @LastEditors: Laoluo [email protected]
+ * @LastEditTime: 2022-05-12 19:34:32
+ */
+import React from 'react';
+import { Tooltip } from 'antd';
+import { prefix } from '@/constant';
+
+interface IProps {
+  tips: string;
+}
+
+const AnnotationTips = ({ tips }: IProps) => {
+  if (!tips) {
+    return null;
+  }
+
+  return (
+    <div className={`${prefix}-tips`}>
+      <div className=''>
+        <Tooltip placement='bottomRight' title={tips}>
+          <span className=''>{tips}</span>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default AnnotationTips;
diff --git a/packages/lb-components/src/views/MainView/index.tsx b/packages/lb-components/src/views/MainView/index.tsx
@@ -1,17 +1,27 @@
 import { AppProps } from '@/App';
 import { ViewportProvider } from '@/components/customResizeHook';
 import { prefix } from '@/constant';
+import { AppState } from '@/store';
 import { Layout } from 'antd/es';
+import _ from 'lodash';
 import React from 'react';
+import { connect } from 'react-redux';
 import AnnotationOperation from './annotationOperation';
+import AnnotationTips from './annotationTips';
 import Sidebar from './sidebar';
 import ToolFooter from './toolFooter';
 import ToolHeader from './toolHeader';
 
+interface IProps {
+  path: string;
+}
+
 const { Sider, Content } = Layout;
 
 const layoutCls = `${prefix}-layout`;
-const MainView: React.FC<AppProps> = (props) => {
+const MainView: React.FC<AppProps & IProps> = (props) => {
+  const showTips = props.showTips ?? false;
+
   return (
     <ViewportProvider>
       <Layout className={`${layoutCls} ${props.className}`} style={props.style?.layout}>
@@ -27,6 +37,7 @@ const MainView: React.FC<AppProps> = (props) => {
         <Layout>
           {props?.leftSider}
           <Content className={`${layoutCls}__content`}>
+            {showTips === true && <AnnotationTips tips={props.path} />}
             <AnnotationOperation {...props} />
             <ToolFooter style={props.style?.footer} mode={props.mode} footer={props?.footer} />
           </Content>
@@ -39,4 +50,11 @@ const MainView: React.FC<AppProps> = (props) => {
   );
 };
 
-export default MainView;
+const mapStateToProps = ({ annotation }: AppState) => {
+  const imgInfo = annotation.imgList[annotation.imgIndex] ?? {};
+  return {
+    path: imgInfo?.url ?? imgInfo?.path ?? '', // 将当前路径的数据注入
+  };
+};
+
+export default connect(mapStateToProps)(MainView);