-
Notifications
You must be signed in to change notification settings - Fork 54
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(lb-components): Add FindTrackIDIndex and AnnotatedBox component
- Loading branch information
Showing
11 changed files
with
402 additions
and
75 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
packages/lb-components/src/assets/annotation/pointCloudTool/highlight.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions
3
packages/lb-components/src/assets/annotation/pointCloudTool/highlight_a.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
...rc/views/MainView/sidebar/PointCloudToolSidebar/components/annotatedBox/index.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| .tag { | ||
| color: #666; | ||
| background-color: #f3f4ff; | ||
| border-color: transparent; | ||
| cursor: pointer; | ||
| position: relative; | ||
| &.disabled { | ||
| color: #ccc; | ||
| background-color: #f5f5f5; | ||
| cursor: not-allowed; | ||
| } | ||
| &.selected { | ||
| color: #fff; | ||
| background-color: #666fff; | ||
| } | ||
| .highlight { | ||
| position: absolute; | ||
| right: -5px; | ||
| top: -5px; | ||
| } | ||
| } |
174 changes: 174 additions & 0 deletions
174
...onents/src/views/MainView/sidebar/PointCloudToolSidebar/components/annotatedBox/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| import React, { useContext, useState, useEffect } from 'react'; | ||
| import { Checkbox, Popover, Tag } from 'antd'; | ||
| import { PointCloudUtils } from '@labelbee/lb-utils'; | ||
| import { PointCloudContext } from '@/components/pointCloudView/PointCloudContext'; | ||
| import { IFileItem } from '@/types/data'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import styles from './index.module.scss'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| import HighlightSvg from '@/assets/annotation/pointCloudTool/highlight.svg'; | ||
| import HighlightActiveSvg from '@/assets/annotation/pointCloudTool/highlight_a.svg'; | ||
| import { QuestionCircleOutlined } from '@ant-design/icons'; | ||
| import { isDoubleClick } from '@/utils/audio'; | ||
|
|
||
| interface ITrackIDItem { | ||
| id: string; | ||
| trackID?: number; | ||
| disabled: boolean; | ||
| selected: boolean; | ||
| isHighlight: boolean; | ||
| } | ||
|
|
||
| const AnnotatedBox = ({ imgList, imgIndex }: { imgList: IFileItem[]; imgIndex: number }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const ptCtx = useContext(PointCloudContext); | ||
| const { pointCloudBoxList } = ptCtx; | ||
|
|
||
| const [showIDs, setShowIds] = useState<ITrackIDItem[]>([]); | ||
| const [onlyShowCurrentIndex, setOnlyShowCurrentIndex] = useState<boolean>(false); | ||
|
|
||
| const highlightHandler = (item: ITrackIDItem) => { | ||
| ptCtx.addHighlightID(item.trackID as number); | ||
| }; | ||
|
|
||
| const selectHandler = (item: ITrackIDItem) => { | ||
| ptCtx.addSelectedID(item.id); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const newImgList = imgList as Array<{ result: string }>; | ||
| let trackMap = new Map(); | ||
| const selectedTrackIDs = ptCtx.selectedIDs.map( | ||
| (v) => ptCtx.pointCloudBoxList.find((box) => box.id === v)?.trackID, | ||
| ); | ||
| setShowIds( | ||
| PointCloudUtils.getAllPointCloudResult({ | ||
| imgList: newImgList, | ||
| extraBoxList: pointCloudBoxList, | ||
| ignoreIndexList: [imgIndex], | ||
| }) | ||
| .filter((v) => { | ||
| if (!v.trackID) { | ||
| return false; | ||
| } | ||
|
|
||
| if (trackMap.get(v.trackID)) { | ||
| return false; | ||
| } | ||
| trackMap.set(v.trackID, true); | ||
| return true; | ||
| }) | ||
| .sort((a, b) => { | ||
| const aTrackID = a?.trackID ?? 0; | ||
| const bTrackID = b?.trackID ?? 0; | ||
|
|
||
| return aTrackID - bTrackID; | ||
| }) | ||
| .map((v) => { | ||
| const box = ptCtx.pointCloudBoxList.find((box) => box.trackID === v.trackID); | ||
| return { | ||
| id: box?.id ?? v.id, | ||
| trackID: v.trackID, | ||
| disabled: !box, | ||
| selected: selectedTrackIDs.includes(v.trackID), | ||
| isHighlight: v?.trackID ? ptCtx.highlightIDs.includes(v.trackID) : false, | ||
| }; | ||
| }), | ||
| ); | ||
| }, [ptCtx.pointCloudBoxList, imgList, ptCtx.selectedIDs, ptCtx.highlightIDs, imgIndex]); | ||
|
|
||
| useEffect(() => { | ||
| const highlightBoxes = ptCtx.pointCloudBoxList.filter( | ||
| (box) => box.trackID && ptCtx.highlightIDs.includes(box.trackID), | ||
| ); | ||
|
|
||
| if (highlightBoxes?.length) { | ||
| const needSetSelectedIDs = highlightBoxes.every((box) => !ptCtx.selectedIDs.includes(box.id)); | ||
| if (needSetSelectedIDs) { | ||
| const needHighlightSelectedIDs = [...ptCtx.selectedIDs, ...highlightBoxes.map((v) => v.id)]; | ||
| ptCtx.setSelectedIDs(needHighlightSelectedIDs); | ||
| } | ||
| } | ||
| }, [imgIndex, ptCtx.highlightIDs, ptCtx.selectedIDs]); | ||
|
|
||
| return ( | ||
| <div style={{ padding: 24, borderBottom: '1px solid #eee' }}> | ||
| <div style={{ marginBottom: 16 }}> | ||
| {t('AllTrackIDs')} | ||
| <Popover | ||
| placement='topRight' | ||
| content={ | ||
| <> | ||
| <div>{t('ClickOnTheIdToHighlightTheMarkupBox')}</div> | ||
| <div>{t('DoubleClickOnTheIdToContinuouslyHighlightBoxesAcrossFrames')}</div> | ||
| </> | ||
| } | ||
| > | ||
| <QuestionCircleOutlined style={{ marginLeft: 8 }} /> | ||
| </Popover> | ||
| </div> | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| marginBottom: 16, | ||
| justifyContent: 'flex-end', | ||
| }} | ||
| > | ||
| <Checkbox | ||
| checked={onlyShowCurrentIndex} | ||
| onChange={(e) => setOnlyShowCurrentIndex(e.target.checked)} | ||
| > | ||
| {t('OnlyCurrentFrame')} | ||
| </Checkbox> | ||
| </div> | ||
|
|
||
| <div> | ||
| {showIDs.map((item) => { | ||
| if (item.disabled && onlyShowCurrentIndex) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <Tag | ||
| key={item.trackID} | ||
| className={classNames({ | ||
| [styles.tag]: true, | ||
| [styles.disabled]: item.disabled, | ||
| [styles.selected]: item.selected, | ||
| [styles.highlight]: item.isHighlight, | ||
| })} | ||
| style={{ | ||
| marginBottom: 8, | ||
| }} | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (isDoubleClick(e as any)) { | ||
| highlightHandler(item); | ||
| return; | ||
| } | ||
| if (item.disabled) { | ||
| return; | ||
| } | ||
| selectHandler(item); | ||
| }} | ||
| > | ||
| {item.isHighlight && ( | ||
| <img | ||
| src={item.disabled ? HighlightSvg : HighlightActiveSvg} | ||
| className={styles.highlight} | ||
| /> | ||
| )} | ||
|
|
||
| {item.trackID} | ||
| </Tag> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AnnotatedBox; |
8 changes: 8 additions & 0 deletions
8
...iews/MainView/sidebar/PointCloudToolSidebar/components/findTrackIDIndex/index.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| .container { | ||
| padding: 12px 20px; | ||
| .content { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| margin-top: 4px; | ||
| } | ||
| } |
Oops, something went wrong.