fix: Tab key wraps automatically & styles adjustment / fix: Audio tool split and merge text by clip

packages/lb-components/src/components/audioAnnotate/textInput/index.module.scss

@@ -23,6 +23,18 @@
   @include fontStyle;
   font-size: 14px;
 
+  .labelText{
+    display: flex;
+    overflow: hidden;
+    width: 60%;
+    align-items: center;
+
+    .titleText{
+      max-width: calc(100% - 20px);
+      overflow: hidden;
+    }
+  }
+
   .required::before {
     display: inline-block;
     margin-right: 4px;
@@ -35,6 +47,7 @@
   .extra {
     float: right;
     margin-right: 5px;
+    width: 40%;
   }
 }
 
@@ -182,6 +195,7 @@
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
+      overflow: hidden;
     }
     .text {
       color: #333;
@@ -200,7 +214,10 @@
 
 .attribute {
   height: 22px;
-  padding: 2px 8px;
+  padding: 0px 8px;
+  width: max-content;
+  max-width: 100%;
+  margin-left: auto;
 }
 
 .clearIcon {
@@ -209,13 +226,13 @@
   height: 14px;
   margin-left: 4px;
   vertical-align: text-top;
-  //background-image: url(~@/assets/tool_Icon/icon_clearSmall.svg);
+  background-image: url(~@/assets/tool_Icon/icon_clearSmall.svg);
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
 
   &:not(.disabled):hover {
-    //background-image: url(~@/assets/tool_Icon/icon_clearSmall_a.svg);
+    background-image: url(~@/assets/tool_Icon/icon_clearSmall_a.svg);
   }
 
   &.disabled {

packages/lb-components/src/components/audioAnnotate/textInput/index.tsx

@@ -17,6 +17,7 @@ import AudioContext, { DEFAULT_CLIP_TEXT_CONFIG_ITEM, useAudioClipStore } from '
 import styles from './index.module.scss';
 import { IInputList } from '@/types/main';
 import { useTranslation } from 'react-i18next';
+import LongText from '@/components/longText';
 // import { AlgorithmButtonForText } from '../icons/algorithmButton';
 
 const EKeyCode = cKeyCode.default;
@@ -212,16 +213,22 @@ export const SingleTextInput = (props: any) => {
   return (
     <div className={styles.textField}>
       <div className={styles.label}>
-        <span className={classnames({ [styles.required]: config.required })}>{config.label}</span>
-        <ClearIcon
-          onClick={() => {
-            if (!disabled) {
-              updateTextWithKey('');
-            }
-          }}
-          title=''
-          disabled={disabled}
-        />
+        <div className={styles.labelText}>
+          <span
+            className={classnames({ [styles.titleText]: true, [styles.required]: config.required })}
+          >
+            <LongText text={config.label} openByText={true} isToolTips={true} />
+          </span>
+          <ClearIcon
+            onClick={() => {
+              if (!disabled) {
+                updateTextWithKey('');
+              }
+            }}
+            title=''
+            disabled={disabled}
+          />
+        </div>
 
         {/* {!algorithmDisabled && ( */}
         {/*  <AlgorithmButtonForText */}
@@ -305,7 +312,7 @@ const TextInput = (props: IProps) => {
 
   const switchToNextTextarea = (currentIndex: number) => {
     const configListLength = textConfigurable ? configList.length : 0;
-    const regionsLength = clipTextConfigurable ? regionsList.length : 0;
+    const regionsLength = clipTextConfigurable ? regionsList.length * clipTextList.length : 0;
     const allTextareaLength = configListLength + regionsLength;
     const nextIndex = (currentIndex + 1) % allTextareaLength;
     textareaFocus(nextIndex);
@@ -314,7 +321,9 @@ const TextInput = (props: IProps) => {
   const tabToFirstTextarea = (e: KeyboardEvent) => {
     if (e.keyCode === EKeyCode.Tab) {
       e.preventDefault();
-      if (configList.length > 0) {
+      const canChangeFocuByTab =
+        configList.length > 0 || (clipTextConfigurable && clipTextList.length > 0);
+      if (canChangeFocuByTab) {
         textareaFocus(0);
       }
     }
@@ -449,7 +458,7 @@ const TextInput = (props: IProps) => {
               maxLength,
             };
             // 处理按tab无法正常切换问题
-            const regionIndex = _configList.length + index;
+            const regionIndex = (textConfigurable ? _configList.length : 0) + index;
 
             const attributeColor = getAttributeColor(attribute, clipAttributeList);
 
@@ -461,7 +470,11 @@ const TextInput = (props: IProps) => {
               num: 1,
             });
             const errorText = required && text.length < 1 ? errorTips : undefined;
-
+            const attributeText =
+              getAttributeShowText(attribute, [
+                { value: '', key: t('NoAttribute') },
+                ...clipAttributeList,
+              ]) ?? '';
             return (
               <SingleTextInput
                 config={config}
@@ -491,10 +504,7 @@ const TextInput = (props: IProps) => {
                 extra={
                   clipAttributeConfigurable ? (
                     <div style={textStyle} className={styles.attribute}>
-                      {getAttributeShowText(attribute, [
-                        { value: '', key: t('NoAttribute') },
-                        ...clipAttributeList,
-                      ])}
+                      <LongText text={attributeText} openByText={true} isToolTips={true} />
                     </div>
                   ) : null
                 }

packages/lb-components/src/components/audioAnnotate/utils/dataTransform.ts

@@ -0,0 +1,28 @@
+/**
+ * @file Process audio tool data
+ * @author lixinghua <lixinghua_vendor@sensetime.com>
+ * @date 2024.05.14
+ */
+
+import { IAudioTimeSlice, ITextConfigItem } from '@labelbee/lb-utils';
+import _ from 'lodash';
+
+export default class DataTransform {
+  // clip tool get text by config
+  public static getClipTextByConfig = (
+    region: IAudioTimeSlice,
+    clipTextList: ITextConfigItem[],
+    isClear = false,
+  ) => {
+    const newRegion = _.cloneDeep(region);
+    clipTextList.forEach((i, index) => {
+      // index === 0: Compatible with old data
+      if (index === 0) {
+        Object.assign(newRegion, { text: isClear ? '' : region[i.key] });
+      } else {
+        Object.assign(newRegion, { [i.key]: isClear ? '' : region[i.key] });
+      }
+    });
+    return newRegion;
+  };
+}

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

@@ -3,7 +3,7 @@ import { getWebPcm2WavBase64 } from '@/components/audioAnnotate/utils/getWebPcm2
 import _, { debounce, sortBy } from 'lodash';
 import { PauseOutlined, CaretRightOutlined } from '@ant-design/icons';
 import { cKeyCode, cTool, EventBus, TagUtils } from '@labelbee/lb-annotation';
-import { IAudioTimeSlice,ITextConfigItem } from '@labelbee/lb-utils';
+import { IAudioTimeSlice, ITextConfigItem } from '@labelbee/lb-utils';
 import { Button } from 'antd';
 import InvalidPage from '@/components/invalidPage';
 import ImageError from '@/components/imageError';
@@ -245,7 +245,7 @@ export const AudioPlayer = ({
     clipConfigurable,
     secondaryAttributeConfigurable,
     subAttributeList,
-    clipTextList
+    clipTextList,
   };
 
   useEffect(() => {

packages/lb-components/src/components/audioPlayer/useAudioCombine/index.tsx

@@ -9,10 +9,11 @@ import { cKeyCode } from '@labelbee/lb-annotation';
 import { useAudioClipStore } from '@/components/audioAnnotate/audioContext';
 import { useEventListener, useMemoizedFn } from 'ahooks';
 import { useEffect } from 'react';
-import { IAudioTimeSlice } from '@labelbee/lb-utils'
+import { IAudioTimeSlice } from '@labelbee/lb-utils';
 import { ISetSelectedRegionParams } from '..';
+import { cloneDeep } from 'lodash';
 
-const EKeyCode = cKeyCode.default
+const EKeyCode = cKeyCode.default;
 
 interface IProps {
   /** WaveSurfer */
@@ -43,9 +44,34 @@ const useAudioCombine = (props: IProps) => {
     setSelectedRegion,
   } = props;
   const { audioClipState, setAudioClipState } = useAudioClipStore();
-  const { selectedRegion, clipConfigurable, combined } = audioClipState;
+  const { selectedRegion, clipConfigurable, combined, clipTextList } = audioClipState;
   const { id } = selectedRegion;
 
+  const combineTextByConfig = (
+    region: IAudioTimeSlice,
+    current: IAudioTimeSlice,
+    target: IAudioTimeSlice,
+  ) => {
+    const newRegion = cloneDeep(region);
+    // If the merged text is not empty, it needs to be wrapped.
+    clipTextList.forEach((i, index) => {
+      const curText = current[i.key];
+      const targetText = target[i.key];
+      const inCludeEmpty = [curText, targetText].includes('');
+      const showText = inCludeEmpty
+        ? `${curText}${targetText}`
+        : `${curText}
+${targetText}`;
+      // index === 0: Compatible with old data
+      if (index === 0) {
+        Object.assign(newRegion, { text: showText });
+      } else {
+        Object.assign(newRegion, { [i.key]: showText });
+      }
+    });
+    return newRegion;
+  };
+
   const combineInstance = useMemoizedFn((instance) => {
     if (!id) {
       return;
@@ -75,7 +101,7 @@ const useAudioCombine = (props: IProps) => {
     const start = Math.min(...times);
     const end = Math.max(...times);
 
-    const newRegion = {
+    const region = {
       id: waveRef.current?.util.getId('combined_'),
       start,
       end,
@@ -84,8 +110,10 @@ const useAudioCombine = (props: IProps) => {
       text: [current.text, target.text].includes('')
         ? `${current.text}${target.text}`
         : `${current.text}
-${target.text}`,
+        ${target.text}`,
     };
+    const newRegion = combineTextByConfig(region, current, target);
+
     updateRegion?.(newRegion);
     removeRegion?.(id);
     removeRegion?.(target.id);

packages/lb-components/src/components/audioPlayer/useAudioSegment/index.tsx

@@ -10,9 +10,9 @@ import { cKeyCode } from '@labelbee/lb-annotation';
 import { useAudioClipStore } from '@/components/audioAnnotate/audioContext';
 import { useEventListener, useMemoizedFn } from 'ahooks';
 import { ISetSelectedRegionParams } from '..';
-import { IAudioTimeSlice } from '@labelbee/lb-utils'
-
-const EKeyCode = cKeyCode.default
+import { IAudioTimeSlice } from '@labelbee/lb-utils';
+import DataTransform from '@/components/audioAnnotate/utils/dataTransform';
+const EKeyCode = cKeyCode.default;
 
 interface IProps {
   /** WaveSurfer */
@@ -32,17 +32,11 @@ interface IProps {
 
 /** 音频区间分割功能 */
 const useAudioSegment = (props: IProps) => {
-  const {
-    waveRef,
-    regionMap,
-    updateRegion,
-    removeRegion,
-    generateRegions,
-    setSelectedRegion,
-  } = props;
+  const { waveRef, regionMap, updateRegion, removeRegion, generateRegions, setSelectedRegion } =
+    props;
 
   const { audioClipState, setAudioClipState } = useAudioClipStore();
-  const { selectedRegion, clipConfigurable, segment } = audioClipState;
+  const { selectedRegion, clipConfigurable, segment, clipTextList } = audioClipState;
   const { id } = selectedRegion;
   const segmentTimeTip = useRef<null | number>(null);
   const mouseEvent = useRef<null | MouseEvent>(null);
@@ -68,21 +62,17 @@ const useAudioSegment = (props: IProps) => {
       return;
     }
     const current = regionMap[id];
-
+    const newData = DataTransform.getClipTextByConfig(current, clipTextList);
     const targetLeft = {
+      ...newData,
       id: waveRef.current?.util.getId('segment_'),
-      start: current.start,
       end: time,
-      attribute: current.attribute,
-      text: current.text,
     };
-
+    const clearText = DataTransform.getClipTextByConfig(current, clipTextList, true);
     const targetRight = {
+      ...clearText,
       id: waveRef.current?.util.getId('segment_'),
       start: time,
-      end: current.end,
-      attribute: current.attribute,
-      text: '',
     };
 
     updateRegion?.(targetLeft);