feat(pointcloud): Add box color

open-mmlab · Nov 21, 2022 · 1e72cac · 1e72cac
1 parent 892bb93
commit 1e72cac
Show file tree

Hide file tree

Showing 21 changed files with 308 additions and 106 deletions.
diff --git a/packages/lb-annotation/src/constant/defaultConfig.ts b/packages/lb-annotation/src/constant/defaultConfig.ts
@@ -91,7 +91,7 @@ const textToolConfig = {
   filterData: ['valid', 'invalid'],
 };
 
-const polygonConfig = {
+export const polygonConfig = {
   lineType: 0,
   lineColor: 0,
   lowerLimitPointNum: 3,

diff --git a/packages/lb-annotation/src/core/pointCloud/annotation.ts b/packages/lb-annotation/src/core/pointCloud/annotation.ts
@@ -4,7 +4,7 @@
  * @author Ron <[email protected]>
  */
 
-import { IPointCloudBox, PointCloudUtils } from '@labelbee/lb-utils';
+import { IPointCloudBox, PointCloudUtils, IPointCloudConfig } from '@labelbee/lb-utils';
 import { EPolygonPattern } from '@/constant/tool';
 import { CanvasScheduler } from '@/newCore';
 import { IPolygonData } from '@/types/tool/polygon';
@@ -21,6 +21,8 @@ interface IPointCloudAnnotationProps {
 
   pcdPath?: string;
   polygonOperationProps?: IPointCloud2dOperationProps;
+
+  config: IPointCloudConfig;
 }
 
 const createEmptyImage = (size: { width: number; height: number }) => {
@@ -43,7 +45,9 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
 
   public canvasScheduler: CanvasScheduler;
 
-  constructor({ size, container, pcdPath, polygonOperationProps }: IPointCloudAnnotationProps) {
+  public config: IPointCloudConfig;
+
+  constructor({ size, container, pcdPath, polygonOperationProps, config }: IPointCloudAnnotationProps) {
     const defaultOrthographic = this.getDefaultOrthographic(size);
 
     const imgSrc = createEmptyImage(size);
@@ -69,7 +73,7 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
     const defaultPolygonProps = {
       container,
       size,
-      config: '{ "textConfigurable": false }',
+      config: JSON.stringify(config),
       imgNode: image,
       isAppend: false,
     };
@@ -82,12 +86,17 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
     polygonOperation.eventBinding();
     polygonOperation.setPattern(EPolygonPattern.Rect);
 
+    // Set the DefaultAttribute.
+    polygonOperation.setDefaultAttribute(config?.attributeList?.[0]?.value);
+
     canvasScheduler.createCanvas(polygonOperation.canvas, { size });
 
     // 3. Data record
     this.pointCloud2dOperation = polygonOperation;
     this.pointCloudInstance = pointCloud;
     this.canvasScheduler = canvasScheduler;
+
+    this.config = config;
   }
 
   /**
@@ -156,6 +165,7 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
         pointList,
         isRect: true,
         valid: v.valid ?? true,
+        attribute: v.attribute,
       };
     }) as IPolygonData[];
 

diff --git a/packages/lb-annotation/src/core/pointCloud/index.ts b/packages/lb-annotation/src/core/pointCloud/index.ts
@@ -17,6 +17,8 @@ import {
   PointCloudUtils,
   TMatrix14Tuple,
   TMatrix13Tuple,
+  IPointCloudConfig,
+  toolStyleConverter,
 } from '@labelbee/lb-utils';
 import { PointsMaterial, Shader } from 'three';
 import HighlightWorker from 'web-worker:./highlightWorker.js';
@@ -43,6 +45,8 @@ interface IProps {
   isOrthographicCamera?: boolean;
   orthographicParams?: IOrthographicCamera;
   backgroundColor?: string;
+
+  config?: IPointCloudConfig;
 }
 
 const DEFAULT_DISTANCE = 30;
@@ -62,6 +66,8 @@ export class PointCloud {
 
   public pcdLoader: PCDLoader;
 
+  public config?: IPointCloudConfig;
+
   /**
    * zAxis Limit for filter point over a value
    */
@@ -87,10 +93,18 @@ export class PointCloud {
 
   private showDirection: boolean = true; // Whether to display the direction of box
 
-  constructor({ container, noAppend, isOrthographicCamera, orthographicParams, backgroundColor = 'black' }: IProps) {
+  constructor({
+    container,
+    noAppend,
+    isOrthographicCamera,
+    orthographicParams,
+    backgroundColor = 'black',
+    config,
+  }: IProps) {
     this.container = container;
     this.renderer = new THREE.WebGLRenderer({ antialias: true });
     this.backgroundColor = backgroundColor;
+    this.config = config;
 
     // TODO
     if (isOrthographicCamera && orthographicParams) {
@@ -315,7 +329,17 @@ export class PointCloud {
    * @param color
    */
   public generateBox(boxParams: IPointCloudBox, color = 0xffffff) {
-    this.AddBoxToSense(boxParams, color);
+    let newColor = color;
+    if (this.config?.attributeList && this.config?.attributeList?.length > 0 && boxParams.attribute) {
+      newColor =
+        toolStyleConverter.getColorFromConfig(
+          { attribute: boxParams.attribute },
+          { ...this.config, attributeConfigurable: true },
+          {},
+        )?.hex ?? color;
+    }
+
+    this.AddBoxToSense(boxParams, newColor);
     this.render();
   }
 

diff --git a/packages/lb-annotation/src/core/toolOperation/pointCloud2dOperation.ts b/packages/lb-annotation/src/core/toolOperation/pointCloud2dOperation.ts
@@ -6,15 +6,16 @@
  * @author Ron <[email protected]>
  */
 
+import { IPointCloudConfig, toolStyleConverter } from '@labelbee/lb-utils';
 import { ESortDirection } from '@/constant/annotation';
 import { EPolygonPattern } from '@/constant/tool';
 import { IPolygonData, IPolygonPoint } from '@/types/tool/polygon';
 import AxisUtils from '@/utils/tool/AxisUtils';
 import CommonToolUtils from '@/utils/tool/CommonToolUtils';
 import DrawUtils from '@/utils/tool/DrawUtils';
 import PolygonUtils from '@/utils/tool/PolygonUtils';
-import StyleUtils from '@/utils/tool/StyleUtils';
 import PolygonOperation, { IPolygonOperationProps } from './polygonOperation';
+import { polygonConfig } from '@/constant/defaultConfig';
 
 interface IPointCloud2dOperationProps {
   showDirectionLine?: boolean;
@@ -26,13 +27,24 @@ class PointCloud2dOperation extends PolygonOperation {
 
   public forbidAddNew: boolean;
 
+  public pointCloudConfig: IPointCloudConfig;
+
   private selectedIDs: string[] = [];
 
   constructor(props: IPolygonOperationProps & IPointCloud2dOperationProps) {
     super(props);
 
     this.showDirectionLine = props.showDirectionLine ?? true;
     this.forbidAddNew = props.forbidAddNew ?? false;
+    this.pointCloudConfig = CommonToolUtils.jsonParser(props.config) ?? {};
+
+    // Set the default
+    this.config = {
+      ...polygonConfig,
+      textConfigurable: false,
+      attributeConfigurable: true,
+      attributeList: this.pointCloudConfig?.attributeList ?? [],
+    };
   }
 
   get getSelectedIDs() {
@@ -93,6 +105,15 @@ class PointCloud2dOperation extends PolygonOperation {
     return 'rgba(0, 255, 255, 0.5)';
   }
 
+  /** 获取当前属性颜色 */
+  public getPointCloudLineColor(attribute = '') {
+    return toolStyleConverter.getColorFromConfig(
+      { attribute },
+      { ...this.pointCloudConfig, attributeConfigurable: true },
+      {},
+    ).stroke;
+  }
+
   /**
    * Add direction
    * @override
@@ -104,13 +125,12 @@ class PointCloud2dOperation extends PolygonOperation {
           return;
         }
         const { attribute } = polygon;
-        const toolColor = this.getColor(attribute);
-        const toolData = StyleUtils.getStrokeAndFill(toolColor, polygon.valid);
+        const lineColor = this.getPointCloudLineColor(attribute);
         const transformPointList = AxisUtils.changePointListByZoom(polygon.pointList || [], this.zoom, this.currentPos);
 
         DrawUtils.drawPolygonWithFillAndLine(this.canvas, transformPointList, {
           fillColor: 'transparent',
-          strokeColor: toolData.stroke,
+          strokeColor: lineColor,
           pointColor: 'white',
           thickness: this.style?.width ?? 2,
           lineCap: 'round',
@@ -138,14 +158,14 @@ class PointCloud2dOperation extends PolygonOperation {
 
   public renderSingleSelectedPolygon = (selectedPolygon: IPolygonData) => {
     if (this.selectedPolygons) {
-      const toolColor = this.getColor(selectedPolygon.attribute);
-      const toolData = StyleUtils.getStrokeAndFill(toolColor, selectedPolygon.valid, { isSelected: true });
+      const color = this.getPointCloudLineColor(selectedPolygon.attribute);
+      // const toolData = StyleUtils.getStrokeAndFill(toolColor, selectedPolygon.valid, { isSelected: true });
 
       const polygon = AxisUtils.changePointListByZoom(selectedPolygon.pointList, this.zoom, this.currentPos);
 
       DrawUtils.drawSelectedPolygonWithFillAndLine(this.canvas, polygon, {
         fillColor: 'transparent',
-        strokeColor: toolData.stroke,
+        strokeColor: color,
         pointColor: 'white',
         thickness: 2,
         lineCap: 'round',
@@ -166,8 +186,9 @@ class PointCloud2dOperation extends PolygonOperation {
     }
 
     DrawUtils.drawLine(this.canvas, polygon[0], polygon[1], {
-      color: 'red',
+      color: 'white',
       thickness: 3,
+      lineDash: [6],
     });
   }
 

diff --git a/packages/lb-annotation/src/types/tool/pointCloudTool.d.ts b/packages/lb-annotation/src/types/tool/pointCloudTool.d.ts
diff --git a/packages/lb-annotation/src/types/tool/polygon.d.ts b/packages/lb-annotation/src/types/tool/polygon.d.ts
@@ -44,7 +44,7 @@ declare interface IPolygonConfig extends IToolConfig {
   referenceFilterData?: string[]; // 存储参考展示的过滤数据对象
   preReferenceStep?: number; // 参考显示预标注步骤
 
-  segmentSupport: boolean; // 分割辅助
+  segmentSupport?: boolean; // 分割辅助
   showConfirm?: boolean;
-  panopticModel: string; // 分割模型
+  panopticModel?: string; // 分割模型
 }
diff --git a/packages/lb-annotation/src/utils/tool/DrawUtils.ts b/packages/lb-annotation/src/utils/tool/DrawUtils.ts
@@ -79,15 +79,20 @@ export default class DrawUtils {
       color: string;
       thickness: number;
       lineCap: CanvasLineCap;
+      lineDash: number[];
     }> = {},
   ): void {
     const ctx: CanvasRenderingContext2D = canvas.getContext('2d')!;
-    const { color = DEFAULT_COLOR, thickness = 1, lineCap = 'round' } = options;
+    const { color = DEFAULT_COLOR, thickness = 1, lineCap = 'round', lineDash } = options;
 
     ctx.save();
     ctx.strokeStyle = color;
     ctx.lineWidth = thickness;
     ctx.lineCap = lineCap;
+
+    if (lineDash) {
+      ctx.setLineDash(lineDash);
+    }
     ctx.beginPath();
 
     ctx.moveTo(startPoint.x, startPoint.y);