feat: SENSEBEE-7425: lb-component - 支持切换标注步骤

packages/lb-components/src/App.tsx

@@ -3,15 +3,10 @@ import { connect } from 'react-redux';
 import { store } from '.';
 import { AppState } from './store';
 import {
-  UpdateImgList,
-  SetTaskConfig,
-  UpdateOnSubmit,
-  UpdateGetFileData,
+  InitTaskData,
 } from './store/annotation/actionCreators';
 import MainView from '@/views/MainView';
 import { IStepInfo } from './types/step';
-import { ANNOTATION_ACTIONS } from './store/Actions';
-import { loadFileData } from './store/annotation/reducer';
 import { OnSubmit, GetFileData } from './types/data';
 import { ToolInstance } from './store/annotation/types';
 
@@ -31,31 +26,26 @@ export interface AppProps {
   header?: React.ReactNode;
   footer?: React.ReactNode;
   sider?: React.ReactNode;
-  setToolInstance?: (tool: ToolInstance) => void
+  setToolInstance?: (tool: ToolInstance) => void;
 }
 
 const App: React.FC<AppProps> = (props) => {
-  const { imgList, step, stepList, onSubmit, getFileData, initialIndex = 0, toolInstance, setToolInstance } = props;
+  const {
+    imgList,
+    step,
+    stepList,
+    onSubmit,
+    initialIndex = 0,
+    toolInstance,
+    setToolInstance,
+  } = props;
   useEffect(() => {
-    if (onSubmit) {
-      store.dispatch(UpdateOnSubmit(onSubmit));
-    }
-
-    if (getFileData) {
-      store.dispatch(UpdateGetFileData(getFileData));
-    }
-
-    store.dispatch(UpdateImgList(imgList));
-    store.dispatch(SetTaskConfig({ stepList, step }));
-    store.dispatch({
-      type: ANNOTATION_ACTIONS.INIT_TOOL,
-    });
-    store.dispatch(loadFileData(initialIndex));
+    store.dispatch(InitTaskData({ imgList, onSubmit, stepList, step, initialIndex }));
   }, []);
 
   useEffect(() => {
-    setToolInstance?.(toolInstance)
-  }, [toolInstance])
+    setToolInstance?.(toolInstance);
+  }, [toolInstance]);
 
   return (
     <div>

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

@@ -8,9 +8,8 @@ import { cKeyCode, toolUtils } from '@sensetime/annotation';
 
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { connect } from 'react-redux';
-import { pageForwardActions, pageBackwardActions } from '@/store/annotation/reducer';
 import { AppState } from '@/store';
-import { UpdateRotate } from '@/store/annotation/actionCreators';
+import { UpdateRotate, PageBackward, PageForward } from '@/store/annotation/actionCreators';
 import { ISize } from '@/types/main';
 
 const EKeyCode = cKeyCode.default;
@@ -38,11 +37,11 @@ export const ViewportProviderComponent = (props: any) => {
       return;
     }
     if (e.keyCode === EKeyCode.A) {
-      dispatch(pageBackwardActions());
+      dispatch(PageBackward());
     }
 
     if (e.keyCode === EKeyCode.D) {
-      dispatch(pageForwardActions());
+      dispatch(PageForward());
     }
     if (e.keyCode === EKeyCode.R) {
       dispatch(UpdateRotate());

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

@@ -12,6 +12,7 @@ export enum ESubmitType {
   Jump = 3, // 分页器的跳页翻页
   Quit = 4, // 左上角后退触发
   Export = 5, // 数据导出时
+  StepChanged = 6, // 切换步骤
 }
 // css 命名前缀
-export const prefix = 'bee'
+export const prefix = 'bee';

packages/lb-components/src/index.tsx

@@ -1,28 +1,32 @@
-import React, {useImperativeHandle, useState} from 'react';
+import React, { useImperativeHandle, useState } from 'react';
 import { Provider } from 'react-redux';
 import configureStore from './configureStore';
 import { ToolInstance } from './store/annotation/types';
-import { pageBackwardActions, pageForwardActions, pageJumpActions } from '@/store/annotation/reducer';
 import App from './App';
+import { PageBackward, PageForward, PageJump } from './store/annotation/actionCreators';
 
 export const store = configureStore();
 
 const OutputApp = (props: any, ref: any) => {
   const [toolInstance, setToolInstance] = useState<ToolInstance>(null);
 
   // 暴露给 ref 的一些方法
-  useImperativeHandle(ref, () => {
-    return {
-      toolInstance,
-      pageBackwardActions: () => store.dispatch(pageBackwardActions()),
-      pageForwardActions: () => store.dispatch(pageForwardActions()),
-      pageJump: (page: string) => {
-        const imgIndex = ~~page - 1;
-        store.dispatch(pageJumpActions(imgIndex));
-      },
-      hello: () => alert(`hello labelBee!!!`)
-    }
-  }, [toolInstance])
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        toolInstance,
+        pageBackwardActions: () => store.dispatch(PageBackward()),
+        pageForwardActions: () => store.dispatch(PageForward()),
+        pageJump: (page: string) => {
+          const imgIndex = ~~page - 1;
+          store.dispatch(PageJump(imgIndex));
+        },
+        hello: () => alert(`hello labelBee!!!`),
+      };
+    },
+    [toolInstance],
+  );
 
   return (
     <Provider store={store}>

packages/lb-components/src/store/Actions.ts

@@ -12,9 +12,10 @@ export const ANNOTATION_ACTIONS = {
   GET_FILE_DATA: '@@GET_FILE_DATA',
   SET_FILE_DATA: '@@SET_FILE_DATA',
   COPY_BACKWARD_RESULT: '@@COPY_BACKWARD_RESULT',
-  SET_NEXT_STEP: '@@SET_NEXT_STEP',
+  SET_STEP: '@@SET_STEP',
   SUBMIT_RESULT: '@@SUBMIT_RESULT',
   SET_BASIC_INDEX: '@@SET_BASIC_INDEX',
+  CALC_STEP_PROGRESS: '@@CALC_STEP_PROGRESS',
 };
 
 export const IMAGE_ATTRIBUTE_ACTIONS = {

packages/lb-components/src/store/annotation/actionCreators.ts

@@ -2,6 +2,32 @@ import { ANNOTATION_ACTIONS } from '@/store/Actions';
 import { IStepInfo } from '@/types/step';
 import { IFileItem, OnSubmit, GetFileData } from '@/types/data';
 import { AnnotationActionTypes, ToolInstance } from './types';
+import { loadFileData } from './reducer';
+import { ESubmitType } from '@/constant';
+import { EPageTurningOperation } from '@/data/enums/AnnotationSize';
+import PageOperator from '@/utils/PageOperator';
+
+const dispatchTasks = (dispatch: any, tasks: any[]) => tasks.map((task) => dispatch(task));
+
+/**
+ * @param {pageTurningOperation} pageTurningOperation 翻页操作
+ * @returns {ESubmitType} 提数据交类型
+ */
+const getSubmitByPageOperation = (pageTurningOperation: EPageTurningOperation) => {
+  if (pageTurningOperation === EPageTurningOperation.Forward) {
+    return ESubmitType.Forward;
+  }
+
+  if (pageTurningOperation === EPageTurningOperation.Backward) {
+    return ESubmitType.Backward;
+  }
+
+  if (pageTurningOperation === EPageTurningOperation.Jump) {
+    return ESubmitType.Jump;
+  }
+
+  return ESubmitType.Forward;
+};
 
 export function UpdateToolInstance(toolInstance: ToolInstance): AnnotationActionTypes {
   return {
@@ -72,6 +98,138 @@ export function UpdateRotate(): AnnotationActionTypes {
 
 export function CopyBackWordResult(): AnnotationActionTypes {
   return {
-    type: ANNOTATION_ACTIONS.COPY_BACKWARD_RESULT
+    type: ANNOTATION_ACTIONS.COPY_BACKWARD_RESULT,
+  };
+}
+
+/**
+ * 初始化任务数据
+ * @param param0
+ */
+export function InitTaskData({
+  onSubmit,
+  getFileData,
+  imgList,
+  step,
+  stepList,
+  initialIndex,
+}: any): any {
+  const tasks: any[] = [];
+
+  if (onSubmit) {
+    tasks.push(UpdateOnSubmit(onSubmit));
   }
-} 
+
+  if (getFileData) {
+    tasks.push(UpdateGetFileData(getFileData));
+  }
+
+  tasks.push(UpdateImgList(imgList));
+  tasks.push(SetTaskConfig({ stepList, step }));
+  tasks.push({
+    type: ANNOTATION_ACTIONS.CALC_STEP_PROGRESS,
+  });
+  tasks.push({
+    type: ANNOTATION_ACTIONS.INIT_TOOL,
+  });
+
+  tasks.push(loadFileData(initialIndex));
+
+  return (dispatch: any) => dispatchTasks(dispatch, tasks);
+}
+
+/** 切换到下一步 */
+export const ToNextStep = () => (dispatch: any, getState: any) => {
+  const { step } = getState().annotation;
+  return [dispatch(UpdateProcessingStep(step + 1))];
+};
+
+/**
+ * 更新当前操作的步骤
+ * @param {number} toStep
+ */
+export const UpdateProcessingStep = (toStep: number) => (dispatch: any) =>
+  [
+    ToSubmitFileData(ESubmitType.StepChanged),
+    dispatch({ type: ANNOTATION_ACTIONS.SET_STEP, payload: { toStep } }),
+    dispatch({ type: ANNOTATION_ACTIONS.CALC_STEP_PROGRESS }),
+    dispatch(loadFileData(0)),
+  ];
+
+/**
+ * 提交当前的文件数据
+ * @param submitType
+ */
+export const ToSubmitFileData = (submitType: ESubmitType) => (dispatch: any) =>
+  [
+    dispatch({ type: ANNOTATION_ACTIONS.SUBMIT_RESULT }),
+    dispatch({ type: ANNOTATION_ACTIONS.SUBMIT_FILE_DATA, payload: { submitType } }),
+  ];
+
+/**
+ * 提交数据并且切换标注文件
+ * @param dispatch
+ * @param nextIndex
+ * @param submitType
+ * @param nextBasicIndex
+ */
+const SubmitAndChangeFileIndex = (
+  dispatch: any,
+  nextIndex: number,
+  submitType: ESubmitType,
+  nextBasicIndex?: number,
+) => [dispatch(ToSubmitFileData(submitType)), dispatch(loadFileData(nextIndex, nextBasicIndex))];
+
+const ChangeBasicIndex = (dispatch: any, nextBasicIndex: number) => [
+  dispatch({ type: ANNOTATION_ACTIONS.SUBMIT_RESULT }),
+  dispatch({ type: ANNOTATION_ACTIONS.SET_BASIC_INDEX, payload: { basicIndex: nextBasicIndex } }),
+];
+
+/** 向前翻页 */
+export const PageBackward = () => (dispatch: any, getState: any) =>
+  DispatcherTurning(dispatch, getState, EPageTurningOperation.Backward);
+
+/** 向后翻页 */
+export const PageForward = () => (dispatch: any, getState: any) =>
+  DispatcherTurning(dispatch, getState, EPageTurningOperation.Forward);
+
+/**
+ * 跳到指定文件索引
+ * @param toIndex
+ */
+export const PageJump = (toIndex: number) => (dispatch: any, getState: any) => {
+  if (toIndex === getState().imgIndex) {
+    return;
+  }
+
+  return DispatcherTurning(dispatch, getState, EPageTurningOperation.Jump, toIndex);
+};
+
+/**
+ * 判断翻页还是切换依赖数据
+ * @param dispatch
+ * @param getState
+ * @param pageTurningOperation
+ * @param toIndex
+ */
+export const DispatcherTurning = (
+  dispatch: any,
+  getState: any,
+  pageTurningOperation: EPageTurningOperation,
+  toIndex?: number,
+) => {
+  const { fileIndexChanged, fileIndex, basicIndexChanged, basicIndex } =
+    PageOperator.getNextPageInfo(pageTurningOperation, getState().annotation, toIndex);
+
+  const submitType: ESubmitType = getSubmitByPageOperation(pageTurningOperation);
+
+  if (fileIndexChanged) {
+    return SubmitAndChangeFileIndex(dispatch, fileIndex, submitType, basicIndex);
+  }
+
+  if (basicIndexChanged) {
+    return ChangeBasicIndex(dispatch, basicIndex);
+  }
+
+  return dispatch(ToSubmitFileData(submitType));
+};