release test

packages/audio-annotator-react/src/LabelSection/index.tsx

@@ -1,13 +1,16 @@
 import React, { createRef, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import type { DraggableModalRef, ValidationContextType } from '@labelu/components-react';
-import { DraggableModel, AttributeForm, EllipsisText } from '@labelu/components-react';
+import { DraggableModel, AttributeForm, EllipsisText, FlexLayout, Kbd, getOS } from '@labelu/components-react';
 import type { Attribute } from '@labelu/interface';
 
 import { ReactComponent as MenuOpenIcon } from '@/assets/icons/menu-open.svg';
 import { ReactComponent as MenuCloseIcon } from '@/assets/icons/menu-close.svg';
 import { useTool } from '@/context/tool.context';
 import { useAnnotationCtx } from '@/context/annotation.context';
+import { ReactComponent as MouseRightClick } from '@/Toolbar/mouse-right.svg';
+
+const os = getOS();
 
 const Wrapper = styled.div`
   display: flex;
@@ -289,7 +292,11 @@ export function LabelSection() {
       </TriggerWrapper>
       <DraggableModel
         beforeClose={handleModalClose}
-        title="详细信息"
+        title={
+          <FlexLayout items="center" gap="0.5rem">
+            详细信息 &nbsp;{os === 'MacOS' ? <Kbd>⇧</Kbd> : <Kbd>Shift</Kbd>} + <MouseRightClick />
+          </FlexLayout>
+        }
         ref={dragModalRef}
         width={333}
         okText="确认"

packages/audio-annotator-react/src/MediaAnnotatorWrapper.tsx

@@ -260,6 +260,7 @@ function ForwardAnnotator(
     setCurrentTool(propsSelectedTool);
   }, [propsSelectedTool]);
 
+  const shiftRef = useRef<boolean>(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const annotatorRef = useRef<MediaAnnotatorRef | null>(null);
   const samples = useMemo(() => propsSamples ?? [], [propsSamples]);
@@ -504,15 +505,25 @@ function ForwardAnnotator(
   }, [updateAnnotationsWithGlobal]);
 
   const onAnnotationSelect = useCallback(
-    (annotation: MediaAnnotationInUI) => {
+    (annotation: MediaAnnotationInUI, e: React.MouseEvent) => {
       setSelectedAnnotation(annotation);
       const _label = labelMappingByTool?.[annotation.type]?.[annotation.label!];
       setSelectedLabel(_label);
       propsOnLabelChange?.(currentTool, _label);
       setCurrentTool(annotation.type);
       selectedIndexRef.current = sortedMediaAnnotations.findIndex((item) => item.id === annotation.id);
+
+      if (shiftRef.current) {
+        const labelConfig = config?.[annotation.type]?.find((item) => item.value === annotation?.label);
+        openAttributeModal({
+          labelValue: annotation.label,
+          openModalAnyway: true,
+          e,
+          labelConfig,
+        });
+      }
     },
-    [currentTool, labelMappingByTool, propsOnLabelChange, sortedMediaAnnotations],
+    [config, currentTool, labelMappingByTool, propsOnLabelChange, sortedMediaAnnotations],
   );
 
   const handleAnnotateEnd: AudioAnnotatorProps['onAnnotateEnd'] = useCallback(
@@ -619,6 +630,18 @@ function ForwardAnnotator(
   );
 
   // ================== 快捷键 ==================
+  useHotkeys(
+    'shift',
+    (e: KeyboardEvent) => {
+      shiftRef.current = e.type === 'keydown';
+    },
+    {
+      keydown: true,
+      keyup: true,
+    },
+    [],
+  );
+
   // 删除标记
   useHotkeys(
     'delete, backspace',

packages/audio-annotator-react/src/Toolbar/hotkeys.const.tsx

@@ -86,6 +86,14 @@ export default [
         name: '播放 / 暂停',
         content: <Kbd>Space</Kbd>,
       },
+      {
+        name: '编辑属性',
+        content: (
+          <>
+            {os === 'MacOS' ? <Kbd>⇧</Kbd> : <Kbd>Shift</Kbd>} + <MouseRightClick />
+          </>
+        ),
+      },
       {
         name: '增倍率',
         content:

packages/audio-react/src/Audio.tsx

@@ -60,7 +60,7 @@ export interface AudioAnnotatorProps {
    *
    * @param annotation 选中的标注
    */
-  onAnnotationSelect?: (annotation: AudioAnnotationInUI) => void;
+  onAnnotationSelect?: (annotation: AudioAnnotationInUI, e: React.MouseEvent) => void;
   /**
    * 当标注改变时调用的回调
    *
@@ -253,10 +253,10 @@ export const AudioAnnotator = forwardRef<HTMLDivElement, AudioAnnotatorProps>(fu
   }, []);
 
   const handleAnnotationSelect = useCallback(
-    (_annotation: AudioAnnotationInUI) => {
+    (_annotation: AudioAnnotationInUI, e: React.MouseEvent) => {
       setSelectedAnnotation(_annotation);
       setCurrentAnnotationIds(_annotation.type === 'frame' ? _annotation.time : _annotation.start);
-      onAnnotationSelect?.(_annotation);
+      onAnnotationSelect?.(_annotation, e);
 
       if (playerRef.current) {
         playerRef.current.setTime(_annotation.type === 'frame' ? _annotation.time : _annotation.start);

packages/components-react/src/MediaAnnotator/AnnotationTrack.tsx

@@ -40,7 +40,7 @@ export function AnnotationTrack({ annotations }: AnnotationTrackProps) {
 
   const handleAnnotationClick = (_annotation: MediaAnnotationData) => (e: React.MouseEvent) => {
     e.preventDefault();
-    selectAnnotation(_annotation);
+    selectAnnotation(_annotation, e);
   };
 
   return (

packages/components-react/src/MediaAnnotator/context.ts

@@ -9,7 +9,7 @@ import { createContext, useContext } from 'react';
 
 export interface MediaAnnotationContextType {
   selectedAnnotation: MediaAnnotationInUI | undefined;
-  selectAnnotation: (annotation: MediaAnnotationInUI) => void;
+  selectAnnotation: (annotation: MediaAnnotationInUI, e: React.MouseEvent) => void;
   duration: number;
   annotations: MediaAnnotationInUI[];
   showOrder: boolean;

packages/video-react/src/Video.tsx

@@ -29,7 +29,7 @@ export interface VideoProps {
   playerRef?: React.RefObject<any>;
   onChange?: (annotations: VideoAnnotationInUI) => void;
   onAdd?: (annotations: VideoAnnotationInUI) => void;
-  onAnnotationSelect?: (annotation: VideoAnnotationInUI) => void;
+  onAnnotationSelect?: (annotation: VideoAnnotationInUI, e: React.MouseEvent) => void;
   onAnnotateEnd?: (annotation: VideoAnnotationInUI, e?: MouseEvent) => void;
   requestEdit?: MediaAnnotatorProps['requestEdit'];
   className?: string;
@@ -143,10 +143,10 @@ const VideoAnnotator = forwardRef<HTMLDivElement | null, VideoProps>(function Fo
   );
 
   const handleAnnotationSelect = useCallback(
-    (_annotation: VideoAnnotationInUI) => {
+    (_annotation: VideoAnnotationInUI, e: React.MouseEvent) => {
       setSelectedAnnotation(_annotation);
       setCurrentAnnotationIds(_annotation.type === 'frame' ? _annotation.time : _annotation.start);
-      onAnnotationSelect?.(_annotation);
+      onAnnotationSelect?.(_annotation, e);
 
       if (playerRef.current) {
         playerRef.current.currentTime(_annotation.type === 'segment' ? _annotation.start : _annotation.time);