paperclip-bot/labelimage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(label): fix bug

Browse Source
This commit is contained in:
zhangheng
2026-04-03 11:00:08 +08:00
parent 7a7b64e281
commit d7d2bbf43f
4 changed files with 361 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/label/LabelNossr.tsx
View File

@@ -1642,7 +1642,6 @@ const LabelPage = ({
showGroupList,
showDescList && projectDetail && projectDetail.label_type === 5,
showDescList && projectDetail && projectDetail.label_type === 6,
showDescList && projectDetail && projectDetail.label_type === 7,
showObjectList,
]
let count = 0

86
components/label/components/PaperContainer.tsx
View File

@@ -26,6 +26,7 @@ import React, {
useCallback,
useEffect,
useImperativeHandle,
useLayoutEffect,
useMemo,
useRef,
useState,
@@ -94,6 +95,12 @@ const renderRaster = (paperGroup: paper.Group, option: any) => {
}
type NormalizedPoint = [number, number]
type ContextMenuLayout = {
top: number
left: number
maxHeight: number
maxWidth: number
}
const normalizePoint = (value: any): NormalizedPoint | null => {
if (value instanceof paper.Point) return [value.x, value.y]
@@ -133,10 +140,19 @@ const PaperContainer = (
) => {
const { forceUpdate, projectDetail, labelState, updateLoadingFlag } = props
const containerRef = useRef<any>(null)
const contextMenuRef = useRef<HTMLDivElement>(null)
const [imgSize, setImageSize] = useState<{
clientWidth: number
clientHeight: number
}>()
const [contextMenuLayout, setContextMenuLayout] = useState<ContextMenuLayout>(
{
top: 0,
left: 0,
maxHeight: 0,
maxWidth: 0,
}
)
const [firstRender, setFirstRender] = useState(false)
const [confirmModalOpened, setConfirmModalOpened] = useState(false)
@@ -1918,6 +1934,61 @@ const PaperContainer = (
?.find((item) => item[0] === id)
}, [activeImage, id, operationId, storeLabel])
useLayoutEffect(() => {
if (!showContextMenu) return
const container = containerRef.current
const menu = contextMenuRef.current
if (!container || !menu) return
const safeMargin = 8
const updateMenuLayout = () => {
const availableWidth = Math.max(container.clientWidth - safeMargin * 2, 0)
const availableHeight = Math.max(
container.clientHeight - safeMargin * 2,
0
)
const menuWidth = Math.min(menu.offsetWidth, availableWidth)
const menuHeight = Math.min(menu.offsetHeight, availableHeight)
const nextLeft = Math.min(
Math.max(position.left, safeMargin),
Math.max(container.clientWidth - menuWidth - safeMargin, safeMargin)
)
const nextTop = Math.min(
Math.max(position.top, safeMargin),
Math.max(container.clientHeight - menuHeight - safeMargin, safeMargin)
)
setContextMenuLayout((prev) => {
if (
prev.left === nextLeft &&
prev.top === nextTop &&
prev.maxHeight === availableHeight &&
prev.maxWidth === availableWidth
) {
return prev
}
return {
left: nextLeft,
top: nextTop,
maxHeight: availableHeight,
maxWidth: availableWidth,
}
})
}
updateMenuLayout()
const resizeObserver = new ResizeObserver(() => {
updateMenuLayout()
})
resizeObserver.observe(container)
resizeObserver.observe(menu)
return () => {
resizeObserver.disconnect()
}
}, [position.left, position.top, showContextMenu])
// 打开弹窗时，初始化form数据
useEffect(() => {
if (showContextMenu) {
@@ -2264,6 +2335,7 @@ const PaperContainer = (
return (
<Card
ref={contextMenuRef}
shadow="sm"
padding="xs"
radius="md"
@@ -2272,10 +2344,20 @@ const PaperContainer = (
position: "absolute",
zIndex: 1000,
width: 224,
maxWidth: contextMenuLayout.maxWidth
? `${contextMenuLayout.maxWidth}px`
: undefined,
maxHeight: contextMenuLayout.maxHeight
? `${contextMenuLayout.maxHeight}px`
: undefined,
height: "fit-content",
display: !showContextMenu ? "none" : "block",
top: `${position.top}px`,
left: `${position.left}px`,
top: `${contextMenuLayout.top}px`,
left: `${contextMenuLayout.left}px`,
overflowY: "auto",
overflowX: "hidden",
overscrollBehavior: "contain",
wordBreak: "break-word",
}}>
<Box p="xs">
<Stack gap="xs">

256
components/label/components/RightObjectTools.tsx
View File

@@ -628,16 +628,48 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
<Stack gap="xs" pb="md">
{labelState.get(activeImage) &&
labelState.get(activeImage)?.map((operationId) => {
const operationSchema = getOperationSchema(operationId)
const isCollapsed =
operationStatus[activeImage + operationId]?.["COLLAPSE"]
const isHide =
operationStatus[activeImage + operationId]?.HIDE
const hasSubAttrError = getOperationSubAttrStatus(operationId)
const operationLabel = operationSchema?.label_class
const operationChildren =
storeLabel.get(activeImage)?.get(operationId) || []
const objectCount = operationChildren.length
const visibleChildren = operationChildren.filter((child) => {
const { comment } = child[2]
let visibleFlag = true
if (comment && comment.length) {
const latest_comment =
(taskDetail && taskDetail.label_status === 2) ||
comment.length === 1
? comment[comment.length - 1]
: comment[comment.length - 2]
let type = latest_comment.comment_type
if (type === 2) {
const { last_modified_timestamp } = child[2]
if (
last_modified_timestamp &&
last_modified_timestamp > latest_comment.date
)
type = 3
}
visibleFlag = checkBoxsChecked[3 - type]
}
if (checkBoxsChecked.every((value) => !value))
visibleFlag = true
return visibleFlag
})
return (
<Box key={operationId} w="100%">
<Paper withBorder p="xs" radius="md" shadow="sm">
<Flex justify="space-between" align="center">
<Group gap="xs">
<Flex align="center" gap="xs" style={{ minWidth: 0 }}>
<Flex
align="center"
gap="xs"
style={{ flex: 1, minWidth: 0 }}>
<ActionIcon
variant="subtle"
size="sm"
@@ -650,23 +682,62 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
<EyeOff size={16} />
)}
</ActionIcon>
{renderOperationIcon(
getOperationSchema(operationId)
)}
<Text
size="sm"
c={hasSubAttrError ? "red" : undefined}>
{renderShortcutKey(operationId)}
</Text>
</Group>
<Text
size="sm"
c={hasSubAttrError ? "red" : undefined}>
{getOperationSchema(operationId)?.label_class}
</Text>
<Group gap="xs">
<Group
gap={8}
wrap="nowrap"
style={{ flex: 1, minWidth: 0 }}>
<Group
gap={6}
wrap="nowrap"
px="xs"
py={4}
style={{
flexShrink: 0,
borderRadius: 999,
border: `1px solid ${
hasSubAttrError
? "var(--mantine-color-red-2)"
: "var(--mantine-color-gray-2)"
}`,
background: hasSubAttrError
? "var(--mantine-color-red-0)"
: "var(--mantine-color-gray-0)",
}}>
{renderOperationIcon(operationSchema)}
<Text
size="xs"
fw={700}
c={hasSubAttrError ? "red" : "dimmed"}
style={{
whiteSpace: "nowrap",
lineHeight: 1,
}}>
{renderShortcutKey(operationId)}
</Text>
</Group>
<Box style={{ flex: 1, minWidth: 0 }}>
<Text
size="sm"
fw={500}
c={hasSubAttrError ? "red" : undefined}
title={operationLabel || undefined}
style={{
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}>
{operationLabel}
</Text>
</Box>
</Group>
</Flex>
<Group
gap={6}
wrap="nowrap"
style={{ flexShrink: 0, marginLeft: "auto" }}>
<TextInput
w={96}
w={88}
size="xs"
placeholder="搜索子属性"
value={searchSubAttrs[operationId] || ""}
@@ -680,10 +751,13 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
handleSelectedBySearchSubAttr(e, operationId)
}
/>
<Text size="sm">
{storeLabel.get(activeImage)?.get(operationId)
?.length || 0}
</Text>
<Badge
size="sm"
variant="light"
radius="xl"
color={hasSubAttrError ? "red" : "gray"}>
{objectCount}
</Badge>
<ActionIcon
variant="subtle"
size="sm"
@@ -704,58 +778,93 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
</Flex>
</Paper>
<Collapse in={!isCollapsed}>
<Stack gap="xs" mt="xs" pl="xs">
{storeLabel
.get(activeImage)
?.get(operationId)
?.map((child) => {
const { comment } = child[2]
let visibleFlag = true
if (comment && comment.length) {
const latest_comment =
(taskDetail &&
taskDetail.label_status === 2) ||
comment.length === 1
? comment[comment.length - 1]
: comment[comment.length - 2]
let type = latest_comment.comment_type
if (type === 2) {
const { last_modified_timestamp } = child[2]
if (
last_modified_timestamp &&
last_modified_timestamp >
latest_comment.date
)
type = 3
}
visibleFlag = checkBoxsChecked[3 - type]
}
if (checkBoxsChecked.every((value) => !value))
visibleFlag = true
<Stack gap="xs" mt="xs" ml="xs">
{visibleChildren.map((child, childIndex) => {
const { comment } = child[2]
const isSelected = selectedPath[
activeImage
]?.includes(child[0])
const isChildHide =
pathStatus[activeImage + child[0]]?.["HIDE"]
const hasChildError = getSubAttrStatus(
getOperationSchema(operationId),
child[2]?.sub_attributes
)
const isLastVisibleChild =
childIndex === visibleChildren.length - 1
const isSelected = selectedPath[
activeImage
]?.includes(child[0])
const isChildHide =
pathStatus[activeImage + child[0]]?.["HIDE"]
const hasChildError = getSubAttrStatus(
getOperationSchema(operationId),
child[2]?.sub_attributes
)
let textColor = undefined
let connectorColor = "var(--mantine-color-gray-4)"
let textColor = undefined
if (hasChildError) {
textColor = "red"
connectorColor = "var(--mantine-color-red-3)"
} else if (isSelected) {
textColor = "white"
connectorColor =
"var(--mantine-primary-color-filled)"
}
if (hasChildError) {
textColor = "red"
} else if (isSelected) {
textColor = "white"
}
if (!visibleFlag) return null
return (
return (
<Box
key={child[0]}
pl="lg"
style={{ position: "relative" }}>
<Box
style={{
position: "absolute",
left: 7,
top: 0,
bottom: isLastVisibleChild ? "75%" : 0,
width: 1.5,
borderRadius: 999,
background: connectorColor,
opacity: isSelected ? 0.9 : 0.35,
}}
/>
{isLastVisibleChild ? (
<Box
style={{
position: "absolute",
left: 7,
top: "calc(50% - 10px)",
width: 14,
height: 10,
borderLeft: `1.5px solid ${connectorColor}`,
borderBottom: `1.5px solid ${connectorColor}`,
borderBottomLeftRadius: 10,
opacity: isSelected ? 0.9 : 0.55,
}}
/>
) : (
<>
<Box
style={{
position: "absolute",
left: 7,
top: "50%",
width: 14,
borderTop: `1.5px solid ${connectorColor}`,
opacity: isSelected ? 0.9 : 0.45,
}}
/>
<Box
style={{
position: "absolute",
left: 4,
top: "calc(50% - 3px)",
width: 6,
height: 6,
borderRadius: 999,
background: connectorColor,
boxShadow:
"0 0 0 2px var(--mantine-color-body)",
opacity: isSelected ? 1 : 0.85,
}}
/>
</>
)}
<Paper
key={child[0]}
withBorder
p="xs"
radius="md"
@@ -763,7 +872,7 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
bg={
isSelected
? "var(--mantine-primary-color-filled)"
: undefined
: "var(--mantine-color-gray-0)"
}
c={isSelected ? "white" : undefined}
onClick={() =>
@@ -944,8 +1053,9 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
) : null}
</Flex>
</Paper>
)
})}
</Box>
)
})}
</Stack>
</Collapse>
</Box>

148
components/label/usePaperStore.ts
View File

@@ -290,6 +290,49 @@ const handleMouseMove = (e: paper.MouseEvent) => {
usePositionStore.getState().setCurrentMousePosition([e.point.x, e.point.y])
}
const hidePaperContextMenu = () => {
useOtherToolsStore.getState().setShowContextMenu({
showContextMenu: false,
position: {
top: 0,
left: 0,
},
imageId: useOtherToolsStore.getState().imageId,
operationId: useOtherToolsStore.getState().operationId,
id: useOtherToolsStore.getState().id,
})
}
let isMiddleMousePanning = false
const startMiddleMousePan = (event?: MouseEvent) => {
if (!event || event.button !== 1) return false
event.preventDefault()
isMiddleMousePanning = true
hidePaperContextMenu()
return true
}
const dragMiddleMousePan = (e: { event: MouseEvent; delta: paper.Point }) => {
if (!isMiddleMousePanning) return false
e.event.preventDefault()
usePaperStore.getState().group!.position = usePaperStore
.getState()
.group!.position.add(e.delta)
return true
}
const stopMiddleMousePan = () => {
if (!isMiddleMousePanning) return false
isMiddleMousePanning = false
return true
}
const { user_id } = usePermissionStore.getState()
type OrderPoint = [number, number]
@@ -427,45 +470,23 @@ export const clearSupportAnnotationItem = () => {
}
// 根据点击位置判断弹窗弹出的top、left
const containerWidth = 244
const containerHeight = 240
export const getShowContextMenuPosition = (
clickPoint: paper.Point,
category: Project.LabelSchemaList,
_category: Project.LabelSchemaList,
offsetWidth = 0,
offsetHeight = 0
) => {
let subAttrHeight = 0
if (category) {
const { sub_attributes_describe } = category
console.log(sub_attributes_describe)
if (sub_attributes_describe.length) subAttrHeight += 30
sub_attributes_describe.forEach((item) => {
if (item.chinese_name) subAttrHeight += 32
if (item.optional_item && item.optional_item.length)
item.optional_item.forEach(() => {
subAttrHeight += 22
})
if (item.select_mode === 0) subAttrHeight += 32
})
}
const finalHeight = containerHeight + subAttrHeight
const element = document.getElementById("paper-container")
const rasterPos = [element!.clientWidth, element!.clientHeight]
console.log(rasterPos, finalHeight)
let left =
clickPoint.x + containerWidth > rasterPos[0]
? clickPoint.x + offsetWidth - containerWidth
: clickPoint.x + offsetWidth
let top =
clickPoint.y + finalHeight > rasterPos[1]
? clickPoint.y + offsetHeight - finalHeight < 0
? 0
: clickPoint.y + offsetHeight - finalHeight
: clickPoint.y + offsetHeight
console.log("转换之后的x、y", left, top)
const containerWidth = element?.clientWidth ?? 0
const containerHeight = element?.clientHeight ?? 0
const left = Math.min(
Math.max(clickPoint.x + offsetWidth, 0),
containerWidth || clickPoint.x + offsetWidth
)
const top = Math.min(
Math.max(clickPoint.y + offsetHeight, 0),
containerHeight || clickPoint.y + offsetHeight
)
return {
top,
@@ -722,25 +743,13 @@ export const usePaperStore = create<PaperState>((set) => ({
}
panTool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
if (startMiddleMousePan(e.event)) return
if (pressCtrl) return
const currentTime = Date.now()
const timeDelta = currentTime - lastTime
if (e.event && e.event.button === 0) {
useOtherToolsStore.getState().setShowContextMenu({
showContextMenu: false,
position: {
top: 0,
left: 0,
},
imageId: useOtherToolsStore.getState().imageId,
operationId: useOtherToolsStore.getState().operationId,
id: useOtherToolsStore.getState().id,
})
} else if (e.event && e.event.button === 1) {
// 鼠标中键操作图片移动
panMode = "item"
return
hidePaperContextMenu()
}
if (useTopToolsStore.getState().isView) {
panMode = ""
@@ -1433,12 +1442,7 @@ export const usePaperStore = create<PaperState>((set) => ({
downPoint: paper.Point
delta: paper.Point
}) => {
// 优先判断移动图片
if (panMode === "item") {
usePaperStore.getState().group!.position = usePaperStore
.getState()
.group?.position.add(e.delta)!
}
if (dragMiddleMousePan(e)) return
if (useTopToolsStore.getState().isView) return
@@ -1677,6 +1681,7 @@ export const usePaperStore = create<PaperState>((set) => ({
// 改变对象不能用 activeImage activeOperation (因为图形只在对应图片渲染，所以activeImage是一样的)
panTool.onMouseUp = (_e: paper.ToolEvent) => {
if (stopMiddleMousePan()) return
if (useTopToolsStore.getState().isView) return
let newDrawPath: paper.Path | paper.CompoundPath | null = null
@@ -2775,6 +2780,7 @@ export const usePaperStore = create<PaperState>((set) => ({
event: MouseEvent
point: paper.Point
}) => {
if (startMiddleMousePan(e.event)) return
if (e.event.button !== 0) return
isMouseDown = true
@@ -3067,7 +3073,14 @@ export const usePaperStore = create<PaperState>((set) => ({
lastPoint = checkPoint
lastTime = Date.now()
}
polygonTool.onMouseDrag = (e: {
event: MouseEvent
delta: paper.Point
}) => {
if (dragMiddleMousePan(e)) return
}
polygonTool.onMouseUp = (_e: paper.ToolEvent) => {
if (stopMiddleMousePan()) return
isMouseDown = false
}
polygonTool.onMouseMove = (e: paper.MouseEvent) => {
@@ -3278,6 +3291,7 @@ export const usePaperStore = create<PaperState>((set) => ({
let rectangleTool = paperRectangleTool
rectangleTool.onMouseDown = (e: { event: MouseEvent }) => {
if (startMiddleMousePan(e.event)) return
if (e.event && e.event.button !== 2)
useOtherToolsStore.getState().setShowContextMenu({
showContextMenu: false,
@@ -3300,7 +3314,9 @@ export const usePaperStore = create<PaperState>((set) => ({
event: MouseEvent
point: paper.Point
downPoint: paper.Point
delta: paper.Point
}) => {
if (dragMiddleMousePan(e)) return
const delta = e.point.subtract(e.downPoint)
// 阻止右键移动矩形(e.event.button === 0)
if (delta.length > 10 && e.event.button === 0) {
@@ -3337,6 +3353,7 @@ export const usePaperStore = create<PaperState>((set) => ({
event: MouseEvent
point: paper.Point
}) => {
if (stopMiddleMousePan()) return
// add segment judgement
if (rect && rect.segments?.length && rect?.data?.id) {
// 去除超出图片边界的部分
@@ -3558,6 +3575,7 @@ export const usePaperStore = create<PaperState>((set) => ({
}
brushTool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
if (startMiddleMousePan(e.event)) return
if (e.event.button !== 0) return
// 绘制时去除选中辅助
@@ -3808,6 +3826,10 @@ export const usePaperStore = create<PaperState>((set) => ({
temp.remove()
}
brushTool.onMouseDrag = (e: { event: MouseEvent; delta: paper.Point }) => {
if (dragMiddleMousePan(e)) return
}
brushTool.onMouseMove = (e: paper.MouseEvent) => {
handleMouseMove(e)
@@ -3829,6 +3851,10 @@ export const usePaperStore = create<PaperState>((set) => ({
}
}
brushTool.onMouseUp = (_e: paper.ToolEvent) => {
stopMiddleMousePan()
}
brushTool.onKeyDown = (e: paper.KeyEvent) => {
if (e.key === "escape" || e.key === "alt") {
if (myPath) {
@@ -3953,6 +3979,7 @@ export const usePaperStore = create<PaperState>((set) => ({
let pointTool = paperPointTool
pointTool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
if (startMiddleMousePan(e.event)) return
if (e.event.button !== 0) return
// 绘制时去除选中辅助
@@ -4162,6 +4189,9 @@ export const usePaperStore = create<PaperState>((set) => ({
// group.current?.addChild(myCircle);
temp.remove()
}
pointTool.onMouseDrag = (e: { event: MouseEvent; delta: paper.Point }) => {
if (dragMiddleMousePan(e)) return
}
pointTool.onMouseMove = (e: paper.MouseEvent) => {
handleMouseMove(e)
@@ -4182,6 +4212,9 @@ export const usePaperStore = create<PaperState>((set) => ({
)
}
}
pointTool.onMouseUp = (_e: paper.ToolEvent) => {
stopMiddleMousePan()
}
pointTool.onKeyDown = (e: paper.KeyEvent) => {
if (e.key === "escape" || e.key === "alt") {
if (myPath) {
@@ -4294,12 +4327,18 @@ export const usePaperStore = create<PaperState>((set) => ({
let tags: number[] = []
tool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
if (startMiddleMousePan(e.event)) return
let point = usePaperStore.getState().group!.globalToLocal(e.point)
if (e.event.button === 1) return
points.push([point.x, point.y])
tags.push(e.event.button === 0 ? 1 : 0)
renderPath(points, tags, points.length === 1)
}
tool.onMouseDrag = (e: { event: MouseEvent; delta: paper.Point }) => {
if (dragMiddleMousePan(e)) return
}
tool.onMouseUp = (_e: paper.ToolEvent) => {
stopMiddleMousePan()
}
tool.onKeyDown = (e: paper.KeyEvent) => {
if (e.key === "escape") {
@@ -4416,6 +4455,7 @@ export const usePaperStore = create<PaperState>((set) => ({
return bufferPath
},
setPaperMode: (modeParam) => {
stopMiddleMousePan()
set((state: PaperState) => ({
...state,
mode: modeParam,