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

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,