Skip to content

Commit

Permalink
feat(点云): 线条显示信息
Browse files Browse the repository at this point in the history
  • Loading branch information
@Henry-Diasa
Henry-Diasa committed Mar 29, 2023
2 parents fae6ad8 + 1276dd2 commit ab97303
Show file tree
Hide file tree
Showing 24 changed files with 369 additions and 112 deletions.
3 changes: 3 additions & 0 deletions packages/lb-annotation/src/constant/tool.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ export enum EToolName {
OCRRelation = 'OCRRelationTool',
/** 算法分割辅助工具 */
SegmentByRect = 'segmentByRectTool',
/** 点云多边形工具 */
PointCloudPolygon = 'pointCloudPolygon',
}

export enum ECheckModel {
Expand All @@ -71,6 +73,7 @@ export enum ERectPattern {
}

export type ToolName = EToolName | EVideoToolName | EPointCloudName;
export type THybridToolName = EToolName | Array<EToolName>;

export const TOOL_NAME: { [a: string]: string } = {
[EToolName.Rect]: '拉框',
Expand Down
4 changes: 2 additions & 2 deletions packages/lb-annotation/src/core/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@

import { ELang } from '@/constant/annotation';
import { getConfig, styleDefaultConfig } from '@/constant/defaultConfig';
import { EToolName } from '@/constant/tool';
import { EToolName, THybridToolName } from '@/constant/tool';
import { IPolygonData } from '@/types/tool/polygon';
import { HybridToolUtils, THybridToolName, ToolScheduler } from './scheduler';
import { HybridToolUtils, ToolScheduler } from './scheduler';

interface IProps {
container: HTMLElement;
Expand Down
88 changes: 71 additions & 17 deletions packages/lb-annotation/src/core/pointCloud/annotation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@
* @author Ron <[email protected]>
*/

import { IPointCloudBox, PointCloudUtils, IPointCloudConfig } from '@labelbee/lb-utils';
import { EPolygonPattern } from '@/constant/tool';
import { IPointCloudBox, IPointCloudConfig, PointCloudUtils } from '@labelbee/lb-utils';
import { EPolygonPattern, EToolName, THybridToolName } from '@/constant/tool';
import { CanvasScheduler } from '@/newCore';
import { IPolygonData } from '@/types/tool/polygon';
import { IPolygonData, IPolygonPoint } from '@/types/tool/polygon';
import { PointCloud } from '.';
import PointCloud2dOperation, { IPointCloud2dOperationProps } from '../toolOperation/pointCloud2dOperation';
import { HybridToolUtils, ToolScheduler } from '../scheduler';

interface IPointCloudAnnotationOperation {
updateData: (pcdPath: string, result: string) => void;
Expand All @@ -25,6 +26,7 @@ interface IPointCloudAnnotationProps {
config: IPointCloudConfig;

checkMode?: boolean;
toolName: THybridToolName;
}

const createEmptyImage = (size: { width: number; height: number }) => {
Expand All @@ -43,19 +45,33 @@ const createEmptyImage = (size: { width: number; height: number }) => {
export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
public pointCloudInstance: PointCloud;

public pointCloud2dOperation: PointCloud2dOperation;
public pointCloud2dOperation!: PointCloud2dOperation;

public canvasScheduler: CanvasScheduler;

public toolScheduler: ToolScheduler;

public toolInstance: any; // 用于存储当前工具实例

public config: IPointCloudConfig;

constructor({ size, container, pcdPath, polygonOperationProps, config, checkMode }: IPointCloudAnnotationProps) {
constructor({
size,
container,
pcdPath,
polygonOperationProps,
config,
checkMode,
toolName,
}: IPointCloudAnnotationProps) {
const defaultOrthographic = this.getDefaultOrthographic(size);

const imgSrc = createEmptyImage(size);

const image = new Image();
image.src = imgSrc;

const toolScheduler = new ToolScheduler({ container, size, toolName });
const canvasScheduler = new CanvasScheduler({ container });

// 1. PointCloud initialization
Expand All @@ -73,11 +89,9 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {

// 2. PointCloud2dOperation initialization
const defaultPolygonProps = {
container,
size,
config: JSON.stringify(config),
imgNode: image,
isAppend: false,
checkMode,
// forbidOperation: true,
// forbidOperation: !!checkMode,
Expand All @@ -86,17 +100,40 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
if (polygonOperationProps) {
Object.assign(defaultPolygonProps, polygonOperationProps);
}
const polygonOperation = new PointCloud2dOperation(defaultPolygonProps);

polygonOperation.eventBinding();
polygonOperation.setPattern(EPolygonPattern.Rect);
// init operations
let toolList: EToolName[] = [];

canvasScheduler.createCanvas(polygonOperation.canvas, { size });
if (HybridToolUtils.isSingleTool(toolName)) {
toolList = [toolName] as EToolName[];
} else {
toolList = toolName as EToolName[];
}
toolList.forEach((tool, i) => {
let toolInstance;
if (tool === EToolName.PointCloudPolygon) {
const pointCloudPolygonOperation = toolScheduler.createOperation(tool, image, defaultPolygonProps);
pointCloudPolygonOperation.eventBinding();
pointCloudPolygonOperation.setPattern(EPolygonPattern.Rect);
this.toolInstance = pointCloudPolygonOperation;
this.toolInstance.eventBinding();
this.pointCloud2dOperation = pointCloudPolygonOperation;
} else {
toolInstance = toolScheduler.createOperation(tool, image, config);
}
if (i === toolList.length - 1) {
if (!this.toolInstance) {
this.toolInstance = toolInstance;
this.toolInstance.eventBinding();
}
// The last one by default is the topmost operation.
}
});

// 3. Data record
this.pointCloud2dOperation = polygonOperation;
this.pointCloudInstance = pointCloud;
this.canvasScheduler = canvasScheduler;
this.toolScheduler = toolScheduler;

this.config = config;
}
Expand Down Expand Up @@ -150,8 +187,11 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
* Notice. It needs to update polygon if it shows polygon.
* (Like `ptCtx.topViewInstance.updatePolygonList(ptCtx.pointCloudBoxList);`)
*/
this.pointCloud2dOperation.setImgNode(image);
this.pointCloud2dOperation.initImgPos();
this.toolInstance.setImgNode(image);
this.toolInstance.initImgPos();

// this.pointCloud2dOperation.setImgNode(image);
// this.pointCloud2dOperation.initImgPos();
};

// It need to update directly
Expand All @@ -166,7 +206,7 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
}

public updatePolygonList = (pointCloudDataList: IPointCloudBox[], extraList?: IPolygonData[]) => {
let polygonList = pointCloudDataList.map((v) => {
let polygonList = pointCloudDataList.map((v: IPointCloudBox) => {
const { polygon2d: pointList } = this.pointCloudInstance.getBoxTopPolygon2DCoordinate(v);
return {
id: v.id,
Expand All @@ -181,9 +221,9 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
if (extraList) {
// Convert extraList(polygonList) from PointCloud coordinate to Canvas Coordinate
polygonList = polygonList.concat(
extraList.map((v) => ({
extraList.map((v: IPolygonData) => ({
...v,
pointList: v?.pointList?.map((point) =>
pointList: v?.pointList?.map((point: IPolygonPoint) =>
PointCloudUtils.transferWorld2Canvas(point, this.pointCloud2dOperation.size),
),
})),
Expand All @@ -208,6 +248,20 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
this.addPolygonListOnTopView(result);
}

/**
* switch to chosen canvas。
*
*/
public switchToCanvas(toolName: EToolName) {
const newInstance = this.toolScheduler.switchToCanvas(toolName);
if (newInstance) {
newInstance.eventBinding();
this.toolInstance = newInstance;
return newInstance;
}
return this.toolInstance;
}

/**
* Init All Position
* 1. PointCloud camera change to topView
Expand Down
44 changes: 40 additions & 4 deletions packages/lb-annotation/src/core/scheduler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,13 @@
*/

import { getConfig, styleDefaultConfig } from '@/constant/defaultConfig';
import { EToolName } from '@/constant/tool';
import { EToolName, THybridToolName } from '@/constant/tool';
import { getCurrentOperation } from '@/utils/tool/EnhanceCommonToolUtils';
import { RectOperation } from './toolOperation/rectOperation';
import PolygonOperation from './toolOperation/polygonOperation';
import { BasicToolOperation } from './toolOperation/basicToolOperation';
import SegmentByRect from './toolOperation/segmentByRect';

export type THybridToolName = EToolName | Array<EToolName>;

interface IToolSchedulerOperation {}

interface IToolSchedulerProps {
Expand Down Expand Up @@ -71,6 +69,8 @@ export class ToolScheduler implements IToolSchedulerOperation {

private toolOperationDom: Array<HTMLElement> = [];

private toolOperationNameList: Array<EToolName> = [];

private size: ISize;

private config: string; // 定义 TODO！！
Expand Down Expand Up @@ -114,6 +114,7 @@ export class ToolScheduler implements IToolSchedulerOperation {
}

public syncPosition(currentPos: ICoordinate, zoom: number, imgInfo: ISize, currentToolInstance: any) {
console.log('syncPosition', 111222);
this.toolOperationList.forEach((toolInstance) => {
if (currentToolInstance === toolInstance) {
return;
Expand Down Expand Up @@ -143,7 +144,6 @@ export class ToolScheduler implements IToolSchedulerOperation {
dom.style.height = `${height}px`;
const zIndex = this.toolOperationList.length + 1;
dom.style.zIndex = `${zIndex}`;

return dom;
}

Expand Down Expand Up @@ -203,6 +203,7 @@ export class ToolScheduler implements IToolSchedulerOperation {
},
);
toolInstance.on('renderZoom', (zoom: number, currentPos: ICoordinate, imgInfo: ISize) => {
console.log(zoom, currentPos);
if (zoom && currentPos) {
this.syncPosition(currentPos, zoom, imgInfo, toolInstance);
}
Expand All @@ -221,6 +222,7 @@ export class ToolScheduler implements IToolSchedulerOperation {
this.container.appendChild(dom);

this.toolOperationList.push(toolInstance);
this.toolOperationNameList.push(tool);
this.toolOperationDom.push(dom);

return toolInstance;
Expand Down Expand Up @@ -278,6 +280,40 @@ export class ToolScheduler implements IToolSchedulerOperation {
return this.toolOperationList[0];
}

/**
* switch to canvas by given toolName
* TODO: change operationList to operationMap
*/
public switchToCanvas(toolName: EToolName) {
const chosenIndex = this.toolOperationNameList.indexOf(toolName);
if (chosenIndex < 0 || this.toolOperationList.length < 1 || chosenIndex > this.toolOperationDom.length - 1) {
return;
}
const lastOneIndex = this.toolOperationDom.length - 1;
const chosenDom = this.toolOperationDom[chosenIndex];
const lastOneDom = this.toolOperationDom[lastOneIndex];

if (!chosenDom || !lastOneDom) {
return;
}

const temp = lastOneDom.style.zIndex;
lastOneDom.style.zIndex = `${chosenDom.style.zIndex}`;
chosenDom.style.zIndex = `${temp}`;

// The original top-level operation clears the data
this.toolOperationList[lastOneIndex].clearActiveStatus?.();
this.toolOperationList[lastOneIndex].clearCursorLine?.();
this.toolOperationList[lastOneIndex].render();

// swap
this.toolOperationList = arraySwap(this.toolOperationList, lastOneIndex, chosenIndex);
this.toolOperationDom = arraySwap(this.toolOperationDom, lastOneIndex, chosenIndex);
this.toolOperationNameList = arraySwap(this.toolOperationNameList, lastOneIndex, chosenIndex);

return this.toolOperationList[lastOneIndex];
}

public destroyAllLayer() {
this.toolOperationList.forEach((toolInstance) => {
toolInstance.destroyCanvas();
Expand Down
Loading

0 comments on commit ab97303

Please sign in to comment.