Merge pull request #519 from opendatalab/main

release prod

apps/frontend/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@labelu/frontend",
-  "version": "5.3.0",
+  "version": "5.3.0-alpha.7",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
-    "@labelu/audio-annotator-react": "1.5.3-alpha.1",
-    "@labelu/components-react": "1.4.3-alpha.1",
-    "@labelu/image": "1.1.0",
+    "@labelu/audio-annotator-react": "1.5.3-alpha.2",
+    "@labelu/components-react": "1.5.0-alpha.1",
+    "@labelu/image": "1.1.1-alpha.5",
     "@labelu/formatter": "1.0.2",
-    "@labelu/image-annotator-react": "2.1.2-alpha.1",
+    "@labelu/image-annotator-react": "2.1.2-alpha.7",
     "@labelu/interface": "1.3.1",
-    "@labelu/video-annotator-react": "1.3.5-alpha.1",
-    "@labelu/video-react": "1.3.4-alpha.1",
+    "@labelu/video-annotator-react": "1.3.5-alpha.2",
+    "@labelu/video-react": "1.3.4-alpha.2",
     "@tanstack/react-query": "^5.0.0",
     "antd": "5.10.1",
     "axios": "^1.3.4",

apps/frontend/src/pages/tasks.[id].samples.[id]/components/annotationRightCorner/index.tsx

@@ -286,7 +286,6 @@ const AnnotationRightCorner = ({ noSave, fetchNext, totalSize }: AnnotationRight
       ),
     );
 
-    await saveCurrentSample();
     // 切换到下一个文件
     if (!isLastSample) {
       navigateWithSearch(`/tasks/${taskId}/samples/${_.get(samples, `[${sampleIndex + 1}].id`)}`);

package.json

@@ -5,7 +5,7 @@
     "packages/*",
     "apps/*"
   ],
-  "version": "5.3.0",
+  "version": "5.3.0-alpha.7",
   "scripts": {
     "prepare": "husky install",
     "build": "pnpm --filter @labelu/utils --filter @labelu/interface --filter @labelu/formatter --filter @labelu/image --filter @labelu/components-react --filter @labelu/image-annotator-react --filter @labelu/audio-react --filter @labelu/video-react --filter @labelu/audio-annotator-react --filter @labelu/video-annotator-react build",

packages/audio-annotator-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelu/audio-annotator-react",
-  "version": "1.5.3-alpha.1",
+  "version": "1.5.3-alpha.2",
   "description": "audio annotator for react",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -29,9 +29,9 @@
   ],
   "dependencies": {
     "lodash.clonedeep": "^4.5.0",
-    "@labelu/components-react": "1.4.3-alpha.1",
+    "@labelu/components-react": "1.5.0-alpha.1",
     "@labelu/interface": "1.3.1",
-    "@labelu/audio-react": "1.3.4-alpha.1",
+    "@labelu/audio-react": "1.3.4-alpha.2",
     "polished": "^4.2.2",
     "react-hotkeys-hook": "^4.4.1",
     "styled-components": "^5.3.6"

packages/audio-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelu/audio-react",
-  "version": "1.3.4-alpha.1",
+  "version": "1.3.4-alpha.2",
   "description": "labelu audio annotation component for react",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -41,7 +41,7 @@
     "vite-tsconfig-paths": "^3.5.0"
   },
   "dependencies": {
-    "@labelu/components-react": "1.4.3-alpha.1",
+    "@labelu/components-react": "1.5.0-alpha.1",
     "polished": "^4.2.2",
     "react-hotkeys-hook": "^4.4.1",
     "styled-components": "^5.3.6",

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelu/components-react",
-  "version": "1.4.3-alpha.1",
+  "version": "1.5.0-alpha.1",
   "description": "basic react components for labelU",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",

packages/components-react/src/DraggableModal/index.tsx

@@ -116,6 +116,8 @@ export interface DraggableModalRef {
   toggleVisibility: (value: boolean) => void;
   setPosition: (position: Position) => void;
   getModalRef: () => React.RefObject<HTMLDivElement | null>;
+
+  getVisibility: () => boolean;
 }
 
 const ForwardDraggableModel = (props: Iprops, ref: React.ForwardedRef<DraggableModalRef>) => {
@@ -163,8 +165,9 @@ const ForwardDraggableModel = (props: Iprops, ref: React.ForwardedRef<DraggableM
       },
       setPosition: updatePosition,
       getModalRef: () => modalRef,
+      getVisibility: () => isVisible,
     }),
-    [updatePosition],
+    [updatePosition, isVisible],
   );
 
   const bodyStyle = useMemo(() => {

packages/image-annotator-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelu/image-annotator-react",
-  "version": "2.1.2-alpha.1",
+  "version": "2.1.2-alpha.7",
   "description": "image annotator for react",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -29,8 +29,8 @@
     "react"
   ],
   "dependencies": {
-    "@labelu/components-react": "1.4.3-alpha.1",
-    "@labelu/image": "1.1.0",
+    "@labelu/components-react": "1.5.0-alpha.1",
+    "@labelu/image": "1.1.1-alpha.5",
     "@labelu/interface": "1.3.1",
     "lodash.clonedeep": "^4.5.0",
     "polished": "^4.2.2",

packages/image-annotator-react/readme.md

@@ -1,4 +1,4 @@
-# @labelu/video-annotator-react
+# @labelu/image-annotator-react
 
 [![npm](https://img.shields.io/npm/v/%40labelu/image-annotator-react.svg)](https://www.npmjs.com/package/@labelu/image-annotator-react)
 

packages/image-annotator-react/src/ImageAnnotator.tsx

@@ -322,6 +322,9 @@ function ForwardAnnotator(
         rotate: currentSample?.meta?.rotate ?? 0,
       })
       .then(() => {
+        // 避免重复添加
+        engine.clearData();
+
         Object.keys(annotationsFromSample).forEach((key) => {
           if (TOOL_NAMES.includes(key as ToolName)) {
             engine?.loadData(key as ToolName, annotationsFromSample[key as ToolName] as AnnotationToolData<ToolName>);
@@ -376,6 +379,10 @@ function ForwardAnnotator(
           imageAnnotations![toolName]!.push(_item as AnnotationDataInUI);
         }
       });
+
+      Object.keys(imageAnnotations).forEach((key) => {
+        engine?.loadData(key as ToolName, imageAnnotations[key as ToolName] as AnnotationToolData<ToolName>);
+      });
     },
     [engine],
   );
@@ -481,6 +488,21 @@ function ForwardAnnotator(
     [updateAnnotationsWithGlobal],
   );
 
+  const onAnnotationDelete = useCallback(
+    (restAnnotations: AnnotationWithTool[]) => {
+      const annotationGroupByTool: AllAnnotationMapping = {};
+
+      restAnnotations.forEach((item) => {
+        annotationGroupByTool[item.id] = item;
+      });
+
+      updateAnnotationsWithGlobal(() => {
+        return annotationGroupByTool;
+      });
+    },
+    [updateAnnotationsWithGlobal],
+  );
+
   const onAnnotationChange = useCallback(
     (_annotation: AnnotationWithTool) => {
       updateAnnotationsWithGlobal((pre) => {
@@ -568,6 +590,20 @@ function ForwardAnnotator(
   );
 
   // effects
+  useEffect(() => {
+    // 删除标记
+    engine?.on('delete', (annotation: AnnotationData) => {
+      onAnnotationDelete(addToolNameToAnnotationData(engine!.getDataByTool()));
+      setSelectedAnnotation((pre) => {
+        if (pre?.id === annotation.id) {
+          return undefined;
+        }
+
+        return pre;
+      });
+    });
+  }, [engine, onAnnotationDelete]);
+
   useEffect(() => {
     const _onAnnotationsChange = () => {
       onAnnotationsChange(addToolNameToAnnotationData(engine!.getDataByTool()));
@@ -582,18 +618,6 @@ function ForwardAnnotator(
       });
     });
 
-    // 删除标记
-    engine?.on('delete', (annotation: AnnotationData) => {
-      _onAnnotationsChange();
-      setSelectedAnnotation((pre) => {
-        if (pre?.id === annotation.id) {
-          return undefined;
-        }
-
-        return pre;
-      });
-    });
-
     // 改变标签
     engine?.on('labelChange', (label) => {
       _onAnnotationsChange();

packages/image-annotator-react/src/Toolbar/index.tsx

@@ -2,6 +2,7 @@ import { Toolbar, Tooltip, HotkeyPanel } from '@labelu/components-react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import styled from 'styled-components';
 import type { ToolName } from '@labelu/image';
+import { useCallback } from 'react';
 
 import { ReactComponent as PointIcon } from '@/assets/tools/point.svg';
 import { ReactComponent as LineIcon } from '@/assets/tools/line.svg';
@@ -11,6 +12,7 @@ import { ReactComponent as CuboidIcon } from '@/assets/tools/cuboid.svg';
 import { useTool } from '@/context/tool.context';
 import { useAnnotationCtx } from '@/context/annotation.context';
 import { useHistoryCtx } from '@/context/history.context';
+import { dragModalRef } from '@/LabelSection';
 
 import ToolStyle from './ToolStyle';
 import hotkeysConst from './hotkeys.const';
@@ -57,11 +59,19 @@ export function AnnotatorToolbar({ right }: IToolbarInEditorProps) {
   const { onOrderVisibleChange, orderVisible } = useAnnotationCtx();
   const { redo, undo, futureRef, pastRef } = useHistoryCtx();
 
+  const handleUndo = useCallback(() => {
+    if (dragModalRef.current?.getVisibility()) {
+      return;
+    }
+
+    undo();
+  }, [undo]);
+
   const handleToolChange = (tool: ToolName) => () => {
     engine.switch(tool);
   };
 
-  useHotkeys('ctrl+z, meta+z', undo, [undo]);
+  useHotkeys('ctrl+z, meta+z', handleUndo, [handleUndo]);
   useHotkeys('ctrl+shift+z, meta+shift+z', redo, [undo]);
 
   return (

packages/image/README.md

@@ -4,7 +4,7 @@
 
 Image annotation engine for LabelU
 
-Try it out at [opendatalab.github.io/labelU-Kit/](https://opendatalab.github.io/labelU-Kit/image)
+Try it out at [opendatalab.github.io/labelU-Kit/](https://opendatalab.github.io/labelU-Kit/#/image)
 
 ## Usage
 

packages/image/example/package.json

@@ -9,12 +9,13 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "typescript": "4.8.4",
+    "@labelu/image": "^1.1.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "typescript": "4.8.4",
     "vite": "^4.4.9"
   },
   "dependencies": {

packages/image/example/readme.md

@@ -1,3 +1,3 @@
 # StackBlitz Example
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/opendatalab/labelU-Kit/tree/website/packages/audio-react/example)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/opendatalab/labelU-Kit/tree/main/packages/image/example)

packages/image/example/vite.config.ts

@@ -22,7 +22,6 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src'),
-      '@labelu/image': resolve(__dirname, '../src'),
     },
   },
 });

packages/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelu/image",
-  "version": "1.1.0",
+  "version": "1.1.1-alpha.5",
   "description": "Image annotation tool for labelU",
   "author": {
     "name": "GaryShen",

packages/image/src/core/Axis.ts

@@ -265,6 +265,13 @@ export class Axis {
     eventEmitter.emit(EInternalEvent.AxisChange, e);
   };
 
+  public resetOffset() {
+    this._distanceX = 0;
+    this._distanceY = 0;
+    this._startPanPoint = null;
+    this._startMovePoint = null;
+  }
+
   /**
    * 根据图片的初始位置和缩放比例，计算在画布上的精确位置
    *

packages/image/src/drafts/ClosedSpline.draft.ts

@@ -34,6 +34,7 @@ export class DraftPolygonCurve extends Draft<PolygonData, Line | Point | any, Li
 
     this._setupShapes();
     this.onMouseUp(this._onMouseUp);
+    this.finishSetup();
   }
 
   /**

packages/image/src/drafts/Cuboid.draft/index.ts

@@ -88,6 +88,7 @@ export class DraftCuboid extends Draft<CuboidData, ControllerEdge | Point | Line
 
     this._setupShapes();
     this.onMouseUp(this._onMouseUp);
+    this.finishSetup();
   }
 
   /**

packages/image/src/drafts/Draft.ts

@@ -91,7 +91,7 @@ export class Draft<
 
     // 应该让草稿内的图形对象先于草稿对象监听鼠标事件
     // TODO：模仿DOM的事件设计冒泡机制，处理重叠的图形鼠标事件
-    setTimeout(() => {
+    this.on('setup', () => {
       eventEmitter.on(EInternalEvent.LeftMouseDown, this._handleMouseDown);
       eventEmitter.on(EInternalEvent.MouseMove, this._handleMouseMove);
       eventEmitter.on(EInternalEvent.LeftMouseUp, this._handleLeftMouseUp);
@@ -180,6 +180,10 @@ export class Draft<
   private _handleRightMouseUp = (e: MouseEvent) => {
     const isUnderCursor = this.isUnderCursor({ x: e.offsetX, y: e.offsetY });
 
+    /**
+     * 因为清除isMoved是异步的
+     * see https://github.com/opendatalab/labelU-Kit/blob/main/packages/image/src/core/Axis.ts#L230
+     */
     if (!isUnderCursor && !axis?.isMoved) {
       this.group.emit(EInternalEvent.UnSelect, e, this);
     }
@@ -214,6 +218,10 @@ export class Draft<
     return (this._serializeData?.shapes?.map(loop) as AxisPoint[] | AxisPoint[][]) ?? [];
   }
 
+  public finishSetup() {
+    this.emit('setup');
+  }
+
   public onMove(handler: MouseEventHandler) {
     this._onMoveHandlers.push(handler);
   }
@@ -342,7 +350,8 @@ export class Draft<
     this.data = null as any;
     this.group.destroy();
     this.clearHandlers();
-
+    axis?.resetOffset();
+    this.removeAllListeners();
     eventEmitter.off(EInternalEvent.LeftMouseDown, this._handleMouseDown);
     eventEmitter.off(EInternalEvent.MouseMove, this._handleMouseMove);
     eventEmitter.off(EInternalEvent.LeftMouseUp, this._handleLeftMouseUp);

packages/image/src/drafts/Line.draft.ts

@@ -37,6 +37,7 @@ export class DraftLine extends Draft<LineData, Line | Point, LineStyle | PointSt
     this._createSelection();
 
     eventEmitter.on(EInternalEvent.KeyUp, this._onKeyUp);
+    this.finishSetup();
   }
 
   /**

packages/image/src/drafts/Point.draft.ts

@@ -15,8 +15,8 @@ export class DraftPoint extends Draft<PointData, Point | ShapeText, PointStyle>
     this.config = config;
 
     this._setupShapes();
-
     this.onMouseUp(this._onMouseUp);
+    this.finishSetup();
   }
 
   private _setupShapes() {

packages/image/src/drafts/Polygon.draft.ts

@@ -63,6 +63,7 @@ export class DraftPolygon extends Draft<PolygonData, Polygon | Point | Line, Pol
 
     eventEmitter.on(EInternalEvent.KeyDown, this._onKeyDown);
     eventEmitter.on(EInternalEvent.KeyUp, this._onKeyUp);
+    this.finishSetup();
   }
 
   /**