diff --git a/components/label/components/PaperContainer.tsx b/components/label/components/PaperContainer.tsx index e8c197a..4566e76 100644 --- a/components/label/components/PaperContainer.tsx +++ b/components/label/components/PaperContainer.tsx @@ -1291,11 +1291,6 @@ const PaperContainer = ( setup, ]) - const [paperSelectedPath] = useState<{ - // key = imageId - [key: string]: number[] - }>(selectedPath) - const getOperationSchema = useCallback( (operationId: string) => { return ( @@ -1320,6 +1315,8 @@ const PaperContainer = ( const renderImageId = imageIdOverride ?? activeImage if (operationSchema && imageData) { + const selectedIds = + useObjectStore.getState().selectedPath[renderImageId] || [] const toPaperPoint = (segment: any): paper.Point | null => { if (segment instanceof paper.Point) return segment if (segment instanceof paper.Segment) { @@ -1401,9 +1398,7 @@ const PaperContainer = ( operationId: operationId, fillColor: fillColor, blankColor: blankColor, - selected: paperSelectedPath[renderImageId]?.includes( - item[0] - ), + selected: selectedIds.includes(item[0]), } ) }) @@ -1430,9 +1425,7 @@ const PaperContainer = ( operationId: operationId, fillColor: fillColor, blankColor: blankColor, - selected: paperSelectedPath[renderImageId]?.includes( - item[0] - ), + selected: selectedIds.includes(item[0]), isHollowPolygon: true, } ) @@ -1456,7 +1449,7 @@ const PaperContainer = ( operationId: operationId, fillColor: fillColor, blankColor: blankColor, - selected: paperSelectedPath[renderImageId]?.includes(item[0]), + selected: selectedIds.includes(item[0]), } ) @@ -1534,9 +1527,7 @@ const PaperContainer = ( operationId: operationId, fillColor: fillColor, blankColor: blankColor, - selected: paperSelectedPath[renderImageId]?.includes( - item[0] - ), + selected: selectedIds.includes(item[0]), } ) }) @@ -1567,9 +1558,7 @@ const PaperContainer = ( operationId: operationId, fillColor: fillColor, blankColor: blankColor, - selected: paperSelectedPath[renderImageId]?.includes( - item[0] - ), + selected: selectedIds.includes(item[0]), } ) }) @@ -1592,7 +1581,7 @@ const PaperContainer = ( operationId: operationId, fillColor: fillColor, blankColor: blankColor, - selected: paperSelectedPath[renderImageId]?.includes(item[0]), + selected: selectedIds.includes(item[0]), } ) }) @@ -1632,9 +1621,7 @@ const PaperContainer = ( operationId: operationId, fillColor: fillColor, blankColor: blankColor, - selected: paperSelectedPath[renderImageId]?.includes( - item[0] - ), + selected: selectedIds.includes(item[0]), } ) }) @@ -1655,7 +1642,6 @@ const PaperContainer = ( addRectangle, getOperationSchema, paperPathStatus, - paperSelectedPath, ] ) @@ -1765,6 +1751,7 @@ const PaperContainer = ( detail, hollow_segmentation, ]) + useObjectStore.getState().updateSelectedPath(activeImage, "ADD", id) console.log(usePaperStore.getState().group) // console.log(first) // 更新当前页绘制数据 diff --git a/components/label/usePaperStore.ts b/components/label/usePaperStore.ts index 3354bf2..dda3c7f 100644 --- a/components/label/usePaperStore.ts +++ b/components/label/usePaperStore.ts @@ -3746,6 +3746,124 @@ export const usePaperStore = create((set) => ({ return true } + const handleSelectedPolygonAdd = (draftPath: paper.Path) => { + const activeImage = useBottomToolsStore.getState().activeImage + const selectedIds = + useObjectStore.getState().selectedPath[activeImage] || [] + if (selectedIds.length !== 1) return false + + const selectedId = selectedIds[0] + const targetShapes = usePaperStore + .getState() + .getItemsById(selectedId) + .filter((item) => item.data?.type === "polygon") + + const targetShape = + targetShapes.find((item) => item instanceof paper.CompoundPath) || + targetShapes.find( + (item) => item instanceof paper.Path && !item.data?.isHollowPolygon + ) || + targetShapes.find((item) => item instanceof paper.Path) + + if (!targetShape) return false + + let clippedDraft: paper.Path | paper.CompoundPath | null = + draftPath.intersect(usePaperStore.getState().rasterPath!, { + insert: false, + trace: false, + }) as paper.Path | paper.CompoundPath + + draftPath.remove() + + const draftHasSegments = + clippedDraft instanceof paper.CompoundPath + ? (clippedDraft.children as paper.Path[]).some( + (child) => child.segments?.length + ) + : clippedDraft.segments?.length + if (!draftHasSegments) { + clippedDraft?.remove() + clippedDraft = null + return false + } + + const targetData = getSafePathData(targetShape.data || {}) + let nextPolygon = (targetShape as paper.Path | paper.CompoundPath).unite( + clippedDraft + ) as paper.Path | paper.CompoundPath + clippedDraft?.remove() + clippedDraft = null + targetShape.remove() + + const points: any[] = [] + const hollowPoints: any[] = [] + const nextPaths = + nextPolygon instanceof paper.CompoundPath + ? (nextPolygon.children as paper.Path[]) + : ([nextPolygon] as paper.Path[]) + const nextPathSegments = nextPaths.map((path) => { + if (!path.segments?.length) return null + const pathData = JSON.parse(path.exportJSON({ precision: 20 })) + return pathData?.[1]?.segments || null + }) + const hollowFlags = getHollowFlagsByContainment( + nextPathSegments.map((segments) => segments || []) + ) + + if (nextPolygon instanceof paper.CompoundPath) { + nextPolygon.data = Object.assign({}, targetData) + } + nextPaths.forEach((path, index) => { + const segments = nextPathSegments[index] + if (!segments?.length) return + const isHollowPolygon = !!hollowFlags[index] + path.data = Object.assign({}, targetData, { + isHollowPolygon, + }) + if (isHollowPolygon) { + hollowPoints.push(segments) + } else { + points.push(segments) + } + }) + + const operationId = ( + targetData.operationId || + useTopToolsStore.getState().activeOperation || + "" + ).toString() + if (!operationId) { + nextPolygon.remove() + return false + } + const prevDetail = safeClone( + useLabelStore + .getState() + .getLabelDetailDataByKeys(activeImage, operationId, selectedId) || + initialDetail + ) + + if (points.length) { + useLabelStore + .getState() + .setOperation(activeImage, operationId, [ + selectedId, + points, + prevDetail, + hollowPoints, + ]) + useObjectStore + .getState() + .updateSelectedPath(activeImage, "ADD", selectedId) + } else { + nextPolygon.remove() + return false + } + + forceUpdate() + return true + } + polygonTool.onMouseDown = (e: { event: MouseEvent point: paper.Point @@ -3841,6 +3959,36 @@ export const usePaperStore = create((set) => ({ return } + if ( + useKeyboardStore.getState().drawAction === "add" && + useTopToolsStore.getState().pressA + ) { + const selectedId = + useObjectStore.getState().selectedPath[ + useBottomToolsStore.getState().activeImage + ]?.[0] + const selectedItem = selectedId + ? usePaperStore.getState().getItemById(selectedId) + : null + if (selectedItem?.data?.type === "polygon") { + ;(polygon as paper.Path).closePath() + handleSelectedPolygonAdd(polygon as paper.Path) + + selectedCircles.forEach((item) => { + item.remove() + }) + selectedCircles = [] + clearPolygonMagnet() + useTopToolsStore.getState().setPressA(false) + draftId = null + lastPoint = null + lastTime = 0 + points = [] + polygon = null + return + } + } + // pressA 模式下添加多边形 if (useTopToolsStore.getState().pressA) { let ids =