diff --git a/packages/lb-annotation/src/core/pointCloud/annotation.ts b/packages/lb-annotation/src/core/pointCloud/annotation.ts index 23cef8d50..3cfcfb808 100644 --- a/packages/lb-annotation/src/core/pointCloud/annotation.ts +++ b/packages/lb-annotation/src/core/pointCloud/annotation.ts @@ -23,6 +23,8 @@ interface IPointCloudAnnotationProps { polygonOperationProps?: IPointCloud2dOperationProps; config: IPointCloudConfig; + + checkMode?: boolean; } const createEmptyImage = (size: { width: number; height: number }) => { @@ -47,7 +49,7 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation { public config: IPointCloudConfig; - constructor({ size, container, pcdPath, polygonOperationProps, config }: IPointCloudAnnotationProps) { + constructor({ size, container, pcdPath, polygonOperationProps, config, checkMode }: IPointCloudAnnotationProps) { const defaultOrthographic = this.getDefaultOrthographic(size); const imgSrc = createEmptyImage(size); @@ -76,6 +78,9 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation { config: JSON.stringify(config), imgNode: image, isAppend: false, + checkMode, + // forbidOperation: true, + // forbidOperation: !!checkMode, }; if (polygonOperationProps) { Object.assign(defaultPolygonProps, polygonOperationProps); @@ -99,6 +104,11 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation { this.config = config; } + public updateConfig(config: IPointCloudConfig) { + this.config = config; + this.pointCloud2dOperation.setConfig(JSON.stringify(config)); + } + /** * Get default boundary by size. * @param size diff --git a/packages/lb-annotation/src/core/pointCloud/index.ts b/packages/lb-annotation/src/core/pointCloud/index.ts index e2acac368..75b48447b 100644 --- a/packages/lb-annotation/src/core/pointCloud/index.ts +++ b/packages/lb-annotation/src/core/pointCloud/index.ts @@ -156,6 +156,10 @@ export class PointCloud { this.initCameraPosition = vector; } + public setConfig(config: IPointCloudConfig) { + this.config = config; + } + /** * Init OrthographicCamera to default config by size * @param orthographicParams @@ -554,8 +558,7 @@ export class PointCloud { if (radius) { // @ts-ignore - const circle = this.createRange(radius); - this.scene.add(circle); + this.generateRange(radius); } this.pointsUuid = points.uuid; @@ -679,6 +682,11 @@ export class PointCloud { this.render(); } + public generateRange = (radius: number) => { + const circle = this.createRange(radius); + this.scene.add(circle); + }; + public generateBoxArrow = ({ width }: IPointCloudBox) => { const dir = new THREE.Vector3(1, 0, 0); const origin = new THREE.Vector3(width / 2, 0, 0); diff --git a/packages/lb-annotation/src/core/toolOperation/pointCloud2dOperation.ts b/packages/lb-annotation/src/core/toolOperation/pointCloud2dOperation.ts index 6cae42a14..7a1cbc1c6 100644 --- a/packages/lb-annotation/src/core/toolOperation/pointCloud2dOperation.ts +++ b/packages/lb-annotation/src/core/toolOperation/pointCloud2dOperation.ts @@ -20,6 +20,7 @@ import PolygonOperation, { IPolygonOperationProps } from './polygonOperation'; interface IPointCloud2dOperationProps { showDirectionLine?: boolean; forbidAddNew?: boolean; + checkMode?: boolean; // Judgement of check Mode } class PointCloud2dOperation extends PolygonOperation { @@ -29,6 +30,8 @@ class PointCloud2dOperation extends PolygonOperation { public pointCloudConfig: IPointCloudConfig; + private checkMode: boolean; + private selectedIDs: string[] = []; constructor(props: IPolygonOperationProps & IPointCloud2dOperationProps) { @@ -37,6 +40,12 @@ class PointCloud2dOperation extends PolygonOperation { this.showDirectionLine = props.showDirectionLine ?? true; this.forbidAddNew = props.forbidAddNew ?? false; this.pointCloudConfig = CommonToolUtils.jsonParser(props.config) ?? {}; + this.checkMode = props.checkMode ?? false; + + // Check Mode automatically opens forbidAddNew. + if (this.forbidAddNew === false && props.checkMode === true) { + this.forbidAddNew = true; + } // Set the default this.config = { @@ -51,6 +60,39 @@ class PointCloud2dOperation extends PolygonOperation { return this.selectedIDs; } + public setConfig(config: string) { + const newConfig = CommonToolUtils.jsonParser(config); + this.pointCloudConfig = newConfig; + this.config = { + ...this.config, + attributeList: newConfig?.attributeList ?? [], + }; + } + + public dragMouseDown(e: MouseEvent) { + if (this.checkMode) { + return; + } + + super.dragMouseDown(e); + } + + public deletePolygon(id?: string) { + if (this.checkMode) { + return; + } + + super.deletePolygon(id); + } + + public deletePolygonPoint(index: number) { + if (this.checkMode) { + return; + } + + super.deletePolygonPoint(index); + } + /** * Update selectedIDs and rerender * @param selectedIDs diff --git a/packages/lb-annotation/src/core/toolOperation/polygonOperation.ts b/packages/lb-annotation/src/core/toolOperation/polygonOperation.ts index deec6d470..72b32d29b 100644 --- a/packages/lb-annotation/src/core/toolOperation/polygonOperation.ts +++ b/packages/lb-annotation/src/core/toolOperation/polygonOperation.ts @@ -924,6 +924,16 @@ class PolygonOperation extends BasicToolOperation { return; } + this.dragMouseDown(e); + return true; + } + + /** + * Judgment of drag information during mousedown + * @param e + * @returns + */ + public dragMouseDown(e: MouseEvent) { const firstPolygon = this.selectedPolygon; if (!firstPolygon || e.button !== 0) { @@ -961,8 +971,6 @@ class PolygonOperation extends BasicToolOperation { changePointIndex, originPolygon: this.selectedPolygon, }; - - return true; } public segment() { diff --git a/packages/lb-components/src/App.tsx b/packages/lb-components/src/App.tsx index 639394c9e..6a531991f 100644 --- a/packages/lb-components/src/App.tsx +++ b/packages/lb-components/src/App.tsx @@ -83,6 +83,8 @@ export interface AppProps { creatingRender?: (canvas: HTMLCanvasElement, data: any, style: IAnnotationStyle) => void; }; customRenderStyle?: (data: any) => IAnnotationStyle; + + checkMode?: boolean; } const App: React.FC = (props) => { diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudBackView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudBackView.tsx index 5694e03fb..6c2aabea2 100644 --- a/packages/lb-components/src/components/pointCloudView/PointCloudBackView.tsx +++ b/packages/lb-components/src/components/pointCloudView/PointCloudBackView.tsx @@ -76,7 +76,11 @@ const updateBackViewByCanvas2D = ( backPointCloud.render(); }; -const PointCloudSideView = ({ currentData, config }: IA2MapStateProps) => { +interface IProps { + checkMode?: boolean +} + +const PointCloudSideView = ({ currentData, config, checkMode }: IA2MapStateProps & IProps) => { const ptCtx = React.useContext(PointCloudContext); const ref = useRef(null); const size = useSize(ref); @@ -95,6 +99,7 @@ const PointCloudSideView = ({ currentData, config }: IA2MapStateProps) => { size, polygonOperationProps: { showDirectionLine: false, forbidAddNew: true }, config, + checkMode }); ptCtx.setBackViewInstance(pointCloudAnnotation); } diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx index 597ebbefb..313946ba8 100644 --- a/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx +++ b/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx @@ -14,6 +14,7 @@ import { usePointCloudViews } from './hooks/usePointCloudViews'; import { LabelBeeContext } from '@/store/ctx'; import { useHistory } from './hooks/useHistory'; import { useAttribute } from './hooks/useAttribute'; +import { useConfig } from './hooks/useConfig'; const { EPolygonPattern } = cTool; @@ -29,6 +30,7 @@ const PointCloudListener: React.FC = ({ currentData, config }) const { updatePointCloudData } = usePointCloudViews(); const { redo, undo, pushHistoryWithList } = useHistory(); const { syncThreeViewsAttribute, reRenderPointCloud3DBox } = useAttribute(); + const { syncAllViewsConfig, reRenderTopViewRange } = useConfig(); const keydownEvents = (lowerCaseKey: string, e: KeyboardEvent) => { const { topViewInstance, mainViewInstance } = ptCtx; @@ -173,6 +175,16 @@ const PointCloudListener: React.FC = ({ currentData, config }) }; }, [ptCtx, copiedBoxes, config]); + useEffect(() => { + syncAllViewsConfig(config); + }, [config]); + + useEffect(() => { + if (config?.radius) { + reRenderTopViewRange(config?.radius); + } + }, [config?.radius]); + // Page switch data initialization useEffect(() => { updatePointCloudData?.(); diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudSideView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudSideView.tsx index 9ee6b078e..c8039b662 100644 --- a/packages/lb-components/src/components/pointCloudView/PointCloudSideView.tsx +++ b/packages/lb-components/src/components/pointCloudView/PointCloudSideView.tsx @@ -69,7 +69,11 @@ const updateSideViewByCanvas2D = ( SidePointCloud.render(); }; -const PointCloudSideView: React.FC = ({ config }) => { +interface IProps { + checkMode?: boolean +} + +const PointCloudSideView: React.FC = ({ config, checkMode }) => { const ptCtx = React.useContext(PointCloudContext); const { sideViewUpdateBox } = usePointCloudViews(); const { selectedBox } = useSingleBox(); @@ -89,6 +93,7 @@ const PointCloudSideView: React.FC = ({ config }) => { size, polygonOperationProps: { showDirectionLine: false, forbidAddNew: true }, config, + checkMode }); ptCtx.setSideViewInstance(pointCloudAnnotation); // }; diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx index d005b10b2..b845f070f 100644 --- a/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx +++ b/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx @@ -137,9 +137,10 @@ const ZAxisSlider = ({ interface IProps extends IA2MapStateProps { drawLayerSlot?: TDrawLayerSlot + checkMode?: boolean; } -const PointCloudTopView: React.FC = ({ currentData, imgList, stepInfo, drawLayerSlot }) => { +const PointCloudTopView: React.FC = ({ currentData, imgList, stepInfo, drawLayerSlot, checkMode }) => { const [annotationPos, setAnnotationPos] = useState({ zoom: 1, currentPos: { x: 0, y: 0 } }); const ref = useRef(null); const ptCtx = React.useContext(PointCloudContext); @@ -169,7 +170,9 @@ const PointCloudTopView: React.FC = ({ currentData, imgList, stepInfo, d size, pcdPath: currentData.url, config, + checkMode }); + ptCtx.setTopViewInstance(pointCloudAnnotation); } }, [currentData]); diff --git a/packages/lb-components/src/components/pointCloudView/hooks/useConfig.ts b/packages/lb-components/src/components/pointCloudView/hooks/useConfig.ts new file mode 100644 index 000000000..5ecb8d7eb --- /dev/null +++ b/packages/lb-components/src/components/pointCloudView/hooks/useConfig.ts @@ -0,0 +1,25 @@ +import { PointCloudContext } from '../PointCloudContext'; +import { useContext } from 'react'; +import { IPointCloudConfig } from '@labelbee/lb-utils'; + +export const useConfig = () => { + const { topViewInstance, sideViewInstance, backViewInstance, mainViewInstance } = + useContext(PointCloudContext); + + const syncAllViewsConfig = (config: IPointCloudConfig) => { + [topViewInstance, sideViewInstance, backViewInstance].forEach((instance) => { + instance?.updateConfig(config); + }); + mainViewInstance?.setConfig(config); + }; + + const reRenderTopViewRange = (radius: number) => { + topViewInstance?.pointCloudInstance?.generateRange?.(radius); + topViewInstance?.pointCloudInstance?.render(); + } + + return { + syncAllViewsConfig, + reRenderTopViewRange, + }; +}; diff --git a/packages/lb-components/src/components/pointCloudView/index.tsx b/packages/lb-components/src/components/pointCloudView/index.tsx index acbe82514..8ba302d2e 100644 --- a/packages/lb-components/src/components/pointCloudView/index.tsx +++ b/packages/lb-components/src/components/pointCloudView/index.tsx @@ -28,9 +28,10 @@ import { TDrawLayerSlot } from '@/types/main'; interface IProps { imgList: IFileItem[]; drawLayerSlot?: TDrawLayerSlot; + checkMode?: boolean; } -const PointCloudView: React.FC = ({ imgList, drawLayerSlot }) => { +const PointCloudView: React.FC = ({ imgList, drawLayerSlot, checkMode }) => { if (imgList.length === 0) { return null; } @@ -46,10 +47,10 @@ const PointCloudView: React.FC = ({ imgList, drawLayerSlot }) => {
- +
- - + +
diff --git a/packages/lb-components/src/hooks/annotation.ts b/packages/lb-components/src/hooks/annotation.ts index e6d920823..52b4c8556 100644 --- a/packages/lb-components/src/hooks/annotation.ts +++ b/packages/lb-components/src/hooks/annotation.ts @@ -32,6 +32,8 @@ export interface ICustomToolInstance { undo: () => void, redo: () => void, + + [str: string]: any; } export interface ICustomToolInstanceProps { diff --git a/packages/lb-components/src/index.scss b/packages/lb-components/src/index.scss index 9405fd442..2d1eae763 100644 --- a/packages/lb-components/src/index.scss +++ b/packages/lb-components/src/index.scss @@ -1424,7 +1424,7 @@ $headerHeight: 40px; .#{$ptPrefix}-wrapper { display: flex; height: 100%; - width: 100; + width: 100%; overflow: hidden; flex: 1; diff --git a/packages/lb-components/src/views/MainView/index.tsx b/packages/lb-components/src/views/MainView/index.tsx index d81d6a3c5..047210307 100644 --- a/packages/lb-components/src/views/MainView/index.tsx +++ b/packages/lb-components/src/views/MainView/index.tsx @@ -43,7 +43,7 @@ const ImageAnnotate: React.FC = (props) => { const PointCloudAnnotate: React.FC = (props) => { return ( <> - + ); @@ -89,7 +89,7 @@ const MainView: React.FC = (props) => {