Merge branch 'alpha' into feat-optimizeAttrSwitch

packages/lb-annotation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-annotation",
-  "version": "1.27.0",
+  "version": "1.28.0-alpha.3",
   "description": "Annotation tool collection",
   "keywords": [
     "annotation",

packages/lb-annotation/src/core/pointCloud/index.ts

@@ -163,6 +163,8 @@ export class PointCloud extends EventListener {
 
   private geometry: THREE.BufferGeometry;
 
+  private highlightColor = 0xffff00;
+
   constructor({
     container,
     noAppend,
@@ -242,20 +244,45 @@ export class PointCloud extends EventListener {
         child.children.forEach((grandson) => {
           if (grandson instanceof THREE.Mesh) {
             clickMeshes.push(grandson);
+          } else {
+            this.updateMaterialColor(grandson, child.userData.defaultColor);
           }
         });
       });
       const intersects = this.raycaster.intersectObjects(clickMeshes, false);
       if (intersects.length > 0) {
-        const intersectedObject = intersects[0].object;
+        const parentGroup = intersects[0].object.parent;
+        // Find the BoxHelper and change the color
+        parentGroup?.children.forEach((child) => {
+          this.updateMaterialColor(child, this.highlightColor);
+        });
         this.pipe?.setNeedUpdateCenter(false);
-        this.pipe?.setSelectedIDs(intersectedObject.userData.selectedID);
+        this.pipe?.setSelectedIDs(parentGroup?.userData.selectedID);
       } else {
         this.pipe?.setSelectedIDs(undefined);
       }
+      this.render();
     });
   }
 
+  public setHighlightColor(selectedId?: string) {
+    this.scene.children.forEach((child) => {
+      if (!(child instanceof THREE.Group)) return;
+      const color = selectedId && child.name === `box${selectedId}` ? this.highlightColor : child.userData.defaultColor;
+      child.children.forEach((grandson) => {
+        this.updateMaterialColor(grandson, color);
+      });
+    });
+  }
+
+  private updateMaterialColor(child: THREE.Object3D<THREE.Event>, color: THREE.ColorRepresentation) {
+    if (child instanceof THREE.BoxHelper) {
+      (child.material as THREE.LineBasicMaterial).color.set(color);
+    } else if (child instanceof THREE.Sprite) {
+      (child.material as THREE.SpriteMaterial).color.set(color);
+    }
+  }
+
   public setHandlerPipe(pipe: IPipeTypes) {
     this.pipe = pipe;
   }
@@ -596,13 +623,13 @@ export class PointCloud extends EventListener {
     const arrow = this.generateBoxArrow(boxParams);
 
     // Temporarily hide
-    const boxID = this.generateBoxTrackID(boxParams);
+    const boxID = this.generateBoxTrackID(boxParams, color);
     if (boxID) {
       group.add(boxID);
     }
 
     // 生成并添加attribute标签
-    const attributeLabel = this.generateBoxAttributeLabel(boxParams);
+    const attributeLabel = this.generateBoxAttributeLabel(boxParams, color);
     if (attributeLabel) {
       group.add(attributeLabel);
     }
@@ -619,9 +646,8 @@ export class PointCloud extends EventListener {
     const clickGeometry = new THREE.BoxGeometry(width, height, depth);
     const clickMaterial = new THREE.MeshBasicMaterial({ visible: false });
     const clickMesh = new THREE.Mesh(clickGeometry, clickMaterial);
-    clickMesh.userData = { selectedID: id };
     group.add(clickMesh);
-
+    group.userData = { defaultColor: color, selectedID: id };
     this.scene.add(group);
   };
 
@@ -1389,8 +1415,7 @@ export class PointCloud extends EventListener {
     const dir = new THREE.Vector3(1, 0, 0);
     const origin = new THREE.Vector3(width / 2, 0, 0);
     const arrowLen = 2;
-    const hex = 0xffff00;
-    const arrowHelper = new THREE.ArrowHelper(dir, origin, arrowLen, hex);
+    const arrowHelper = new THREE.ArrowHelper(dir, origin, arrowLen, this.highlightColor);
     arrowHelper.visible = this.showDirection;
 
     return arrowHelper;
@@ -1402,7 +1427,7 @@ export class PointCloud extends EventListener {
    * @param scaleFactor  scale size
    * @returns  { sprite, canvasWidth, canvasHeight }
    */
-  public generateLabel = (text: string, scaleFactor: number) => {
+  public generateLabel = (text: string, scaleFactor: number, color: THREE.ColorRepresentation) => {
     const canvas = this.getTextCanvas(text);
     const texture = new THREE.Texture(canvas);
 
@@ -1415,7 +1440,7 @@ export class PointCloud extends EventListener {
     const canvasWidth = canvas.width / window.devicePixelRatio;
     const canvasHeight = canvas.height / window.devicePixelRatio;
 
-    const spriteMaterial = new THREE.SpriteMaterial({ map: texture, depthWrite: false });
+    const spriteMaterial = new THREE.SpriteMaterial({ map: texture, depthWrite: false, color });
     const sprite = new THREE.Sprite(spriteMaterial);
     sprite.scale.set(canvasWidth / scaleFactor, canvasHeight / scaleFactor, 1);
 
@@ -1427,10 +1452,10 @@ export class PointCloud extends EventListener {
    * @param boxParams
    * @returns sprite
    */
-  public generateBoxTrackID = (boxParams: IPointCloudBox) => {
+  public generateBoxTrackID = (boxParams: IPointCloudBox, color: THREE.ColorRepresentation) => {
     if (!boxParams.trackID) return;
 
-    const { sprite } = this.generateLabel(boxParams.trackID.toString(), 50);
+    const { sprite } = this.generateLabel(boxParams.trackID.toString(), 50, color);
 
     sprite.position.set(-boxParams.width / 2, 0, boxParams.depth / 2 + 0.5);
 
@@ -1442,13 +1467,13 @@ export class PointCloud extends EventListener {
    * @param boxParams
    * @returns sprite
    */
-  public generateBoxAttributeLabel = (boxParams: IPointCloudBox) => {
+  public generateBoxAttributeLabel = (boxParams: IPointCloudBox, color: THREE.ColorRepresentation) => {
     if (!boxParams.attribute || this.hiddenText) return;
 
     const classLabel = this.findSubAttributeLabel(boxParams, this.config);
     const subAttributeLabel = classLabel ? `${boxParams.attribute}\n${classLabel}` : `${boxParams.attribute}`;
 
-    const { sprite, canvasHeight } = this.generateLabel(subAttributeLabel, 100);
+    const { sprite, canvasHeight } = this.generateLabel(subAttributeLabel, 100, color);
 
     sprite.position.set(-boxParams.width / 2, 0, -boxParams.depth / 2 - canvasHeight / 150);
 

packages/lb-annotation/src/core/toolOperation/pointCloud2dOperation.ts

@@ -5,7 +5,7 @@
  * @createdate 2022-07-11
  * @author Ron <[email protected]>
  */
-import _ from 'lodash';
+import _, { isNumber } from 'lodash';
 import { IPointCloudConfig, toolStyleConverter, UpdatePolygonByDragList, INVALID_COLOR } from '@labelbee/lb-utils';
 import { EDragTarget, ESortDirection, DEFAULT_TEXT_OFFSET } from '@/constant/annotation';
 import { EPolygonPattern } from '@/constant/tool';
@@ -237,7 +237,7 @@ class PointCloud2dOperation extends PolygonOperation {
           isClose: true,
           lineType: this.config?.lineType,
         });
-        if (polygon?.trackID) {
+        if (isNumber(polygon?.trackID) && polygon?.trackID >= 0) {
           this.renderdrawTrackID(polygon);
         }
         // Only the rectangle shows the direction.
@@ -276,7 +276,7 @@ class PointCloud2dOperation extends PolygonOperation {
       // Only the rectangle shows the direction.
       if (selectedPolygon.isRect === true && this.showDirectionLine === true) {
         this.renderRectPolygonDirection(polygon);
-        if (selectedPolygon?.trackID) {
+        if (isNumber(selectedPolygon?.trackID) && selectedPolygon?.trackID >= 0) {
           this.renderdrawTrackID(selectedPolygon);
         }
       }

packages/lb-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-components",
-  "version": "1.23.1-alpha.3",
+  "version": "1.24.0-alpha.7",
   "description": "Provide a complete library of annotation components",
   "main": "./dist/index.js",
   "es": "./es/index.js",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
-    "@labelbee/lb-annotation": "1.27.0",
+    "@labelbee/lb-annotation": "1.28.0-alpha.3",
     "@labelbee/lb-utils": "1.19.0",
     "@labelbee/wavesurfer": "1.1.0",
     "@types/react-dom": "^18.2.7",

packages/lb-components/src/components/AnnotationView/pointCloudAnnotationView.tsx

@@ -85,7 +85,7 @@ const PointCloudAnnotationView = (props: IProps) => {
 
       // Add Init Box
       boxParamsList.forEach((v: IPointCloudBox) => {
-        instance.current?.generateBox(v, v.id);
+        instance.current?.generateBox(v);
       });
     }
     return () => {

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

@@ -49,6 +49,7 @@ export const LLMMultiWheelSourceView: React.FC<ILLMMultiWheelSourceViewProps> =
           style={{
             display: 'flex',
             justifyContent: 'flex-end',
+            margin: '10px',
           }}
         >
           <ToggleDataFormatType

packages/lb-components/src/components/LLMMultiWheelView/sidebar/index.tsx

@@ -168,10 +168,12 @@ const LLMMultiWheelToolSidebar = (props: IProps) => {
       const data = getRenderDataByResult(LLMConfig, {
         ...item,
         answerList: item?.answerList?.map((answer: any, index: number) => {
-          setNewAnswerListMap({
-            ...newAnswerListMap,
-            [`${item.id}-${answer.id}`]: answer.answer,
-          });
+          if (LLMConfig?.isTextEdit) {
+            setNewAnswerListMap({
+              ...newAnswerListMap,
+              [`${item.id}-${answer.id}`]: answer.answer,
+            });
+          }
           return {
             ...answer,
             order: index + 1,
@@ -249,7 +251,7 @@ const LLMMultiWheelToolSidebar = (props: IProps) => {
     const newList = answerList?.map((i: IAnswerList) => {
       if (i?.order === order) {
         // text edit
-        if (key === 'textEdit' && isString(value)) {
+        if (key === 'textEdit' && isString(value) && isTextEdit) {
           setNewAnswerListMap({
             ...newAnswerListMap,
             [`${selectedID}-${i?.id ?? ''}`]: value,

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

@@ -111,27 +111,23 @@ const AudioTextToolTextarea = ({
   clipTextList,
 }: any) => {
   return (
-    <div className={styles.textareaContainer}>
-      <div className={styles.textareaContent}>
-        <TextInput
-          isCheck={isCheck}
-          result={result?.value}
-          textInputDisabled={inputDisabled}
-          textID={result?.id || 0}
-          updateText={updateText}
-          configList={configList}
-          autofocus={!inputDisabled && autofocus}
-          preContext={preContext}
-          regions={result?.regions}
-          clipAttributeConfigurable={clipAttributeConfigurable}
-          clipTextConfigurable={clipTextConfigurable}
-          textConfigurable={textConfigurable}
-          updateRegion={updateRegion}
-          clipAttributeList={clipAttributeList}
-          clipTextList={clipTextList}
-        />
-      </div>
-    </div>
+    <TextInput
+      isCheck={isCheck}
+      result={result?.value}
+      textInputDisabled={inputDisabled}
+      textID={result?.id || 0}
+      updateText={updateText}
+      configList={configList}
+      autofocus={!inputDisabled && autofocus}
+      preContext={preContext}
+      regions={result?.regions}
+      clipAttributeConfigurable={clipAttributeConfigurable}
+      clipTextConfigurable={clipTextConfigurable}
+      textConfigurable={textConfigurable}
+      updateRegion={updateRegion}
+      clipAttributeList={clipAttributeList}
+      clipTextList={clipTextList}
+    />
   );
 };
 

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

@@ -23,13 +23,13 @@
   @include fontStyle;
   font-size: 14px;
 
-  .labelText{
+  .labelText {
     display: flex;
     overflow: hidden;
     width: 60%;
     align-items: center;
 
-    .titleText{
+    .titleText {
       max-width: calc(100% - 20px);
       overflow: hidden;
     }
@@ -44,6 +44,7 @@
     line-height: 1;
     content: '*';
   }
+
   .extra {
     float: right;
     margin-right: 5px;
@@ -67,7 +68,7 @@
     font-size: 12px;
     opacity: 1;
 
-    > span {
+    >span {
       line-height: 16px;
     }
 
@@ -150,25 +151,30 @@
 .placeholderHotkey {
   padding: 20px;
   border-bottom: 1px solid #eee;
+
   .title {
     margin-bottom: 8px;
     color: #333;
     font-size: 12px;
   }
+
   .questionIcon {
     margin-left: 8px;
     color: #999;
     cursor: pointer;
+
     &:hover {
       color: #666fff;
     }
   }
+
   :global {
     .ant-radio-group {
       display: flex;
       justify-content: space-between;
       width: 100%;
     }
+
     .ant-radio-button-wrapper {
       width: 60px;
       height: 60px;
@@ -178,28 +184,34 @@
       background: #fff;
       border: 1px solid #ccc !important;
       border-radius: 2px;
+
       &:hover {
         box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
       }
+
       &.ant-radio-button-wrapper-checked {
         .text {
           color: #666fff;
         }
       }
+
       &::before {
         display: none;
       }
     }
+
     .label {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
       overflow: hidden;
     }
+
     .text {
       color: #333;
     }
+
     .hotkey {
       width: 44px;
       height: 20px;
@@ -234,3 +246,16 @@
     cursor: not-allowed;
   }
 }
+
+
+.textInputBox {
+  flex: 1;
+  overflow: scroll;
+  text-align: center;
+  .textInputChild{
+
+    display: inline-block;
+    width: 65%;
+  }
+
+}