fix(bug): fix

components/label/usePaperStore.ts

@@ -139,7 +139,8 @@ interface PaperState {
     renderPath: (
       points: Array<[number, number]>,
       tags: number[],
-      flag?: boolean
+      flag?: boolean,
+      boxes?: Array<[number, number, number, number]>
     ) => void
   ) => void
   getClickedCircle: (
@@ -2574,6 +2575,12 @@ export const usePaperStore = create<PaperState>((set) => ({
     }
     polygon.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
       if (e.event && e.event.button === 2) {
+        if (
+          ["polygon", "brush", "point"].includes(
+            usePaperStore.getState().mode || ""
+          )
+        )
+          return
         if (polygon.data.id) {
           let category = useTopToolsStore
             .getState()
@@ -2620,6 +2627,12 @@ export const usePaperStore = create<PaperState>((set) => ({
       point: paper.Point
     }) => {
       if (e.event && e.event.button === 2) {
+        if (
+          ["polygon", "brush", "point"].includes(
+            usePaperStore.getState().mode || ""
+          )
+        )
+          return
         if (compoundPath.data.id) {
           let category = useTopToolsStore
             .getState()
@@ -2659,11 +2672,12 @@ export const usePaperStore = create<PaperState>((set) => ({
     let polygon: paper.Path | paper.CompoundPath | null
     let compoundPolygon: paper.Path | paper.CompoundPath | null
     let points: paper.Point[] = []
-    let lastPoint: paper.Point
-    let lastTime: number
+    let lastPoint: paper.Point | null = null
+    let lastTime = 0
     let isMouseDown: boolean = false
     let polygonTool = paperPolygonTool
     let currentMagnetPoint: paper.Point | null = null
+    let draftId: number | null = null
 
     const handleCircles = (path: paper.Path | paper.CompoundPath | null) => {
       // 更新选中的点
@@ -2688,6 +2702,71 @@ export const usePaperStore = create<PaperState>((set) => ({
         })
     }
 
+    const getDraftPolygonData = () => ({
+      imageId: useBottomToolsStore.getState().activeImage,
+      operationId: useTopToolsStore.getState().activeOperation,
+      id:
+        draftId ??
+        (draftId =
+          useRightToolsStore
+            .getState()
+            .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1),
+    })
+
+    const clearPolygonMagnet = () => {
+      const magnetPaths = usePaperStore
+        .getState()
+        .group!.getItems({ data: { type: "magnet" } })
+      magnetPaths.forEach((item) => {
+        item.remove()
+      })
+      currentMagnetPoint = null
+    }
+
+    const rebuildPolygonDraft = () => {
+      polygon?.remove()
+      polygon = null
+
+      if (points.length) {
+        polygon = usePaperStore.getState().addPolygon(
+          renderPath,
+          points,
+          {
+            ...usePaperStore.getState().toolOption,
+          },
+          getDraftPolygonData()
+        )
+      } else {
+        draftId = null
+      }
+
+      handleCircles(polygon)
+      lastPoint = points.length
+        ? usePaperStore
+            .getState()
+            .group!.localToGlobal(points[points.length - 1])
+        : null
+      clearPolygonMagnet()
+    }
+
+    const resetPolygonDraft = () => {
+      polygon?.remove()
+      polygon = null
+      points = []
+      handleCircles(null)
+      lastPoint = null
+      lastTime = 0
+      draftId = null
+      clearPolygonMagnet()
+    }
+
+    const undoPolygonPoint = () => {
+      if (!points.length) return false
+      points.pop()
+      rebuildPolygonDraft()
+      return true
+    }
+
     const handlePolygonIntersectRaster = (savePath: paper.Path) => {
       let oldPolygon: any = savePath
       polygon = oldPolygon.intersect(
@@ -2781,6 +2860,12 @@ export const usePaperStore = create<PaperState>((set) => ({
       point: paper.Point
     }) => {
       if (startMiddleMousePan(e.event)) return
+      if (e.event.button === 2) {
+        e.event.preventDefault()
+        hidePaperContextMenu()
+        undoPolygonPoint()
+        return
+      }
       if (e.event.button !== 0) return
       isMouseDown = true
 
@@ -2803,6 +2888,7 @@ export const usePaperStore = create<PaperState>((set) => ({
             selectedCircles.forEach((item) => {
               item.remove()
             })
+            selectedCircles = []
           }
 
           // 调整polygon点位初始顺序
@@ -3000,15 +3086,12 @@ export const usePaperStore = create<PaperState>((set) => ({
           selectedCircles.forEach((item) => {
             item.remove()
           })
-          const magnetPaths = usePaperStore
-            .getState()
-            .group!.getItems({ data: { type: "magnet" } })
-          magnetPaths.forEach((item) => {
-            item.remove()
-          })
-          currentMagnetPoint = null
-
+          selectedCircles = []
+          clearPolygonMagnet()
           useTopToolsStore.getState().setPressA(false)
+          draftId = null
+          lastPoint = null
+          lastTime = 0
           return
         }
       } else {
@@ -3036,14 +3119,15 @@ export const usePaperStore = create<PaperState>((set) => ({
       let point = currentMagnetPoint
         ? currentMagnetPoint
         : temp.globalToLocal(e.point)
+      const draftData = getDraftPolygonData()
 
       let circle = usePaperStore
         .getState()
         .getClickedCircle(
           point,
           selectedCircles.length,
-          polygon?.data.id,
-          polygon?.data.blankColor
+          draftData.id,
+          usePaperStore.getState().toolOption.blankColor
         )
       // add circle
       selectedCircles.push(circle)
@@ -3060,14 +3144,7 @@ export const usePaperStore = create<PaperState>((set) => ({
           // option
           ...usePaperStore.getState().toolOption,
         },
-        {
-          imageId: useBottomToolsStore.getState().activeImage,
-          operationId: useTopToolsStore.getState().activeOperation,
-          id:
-            useRightToolsStore
-              .getState()
-              .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1,
-        }
+        draftData
       )
 
       lastPoint = checkPoint
@@ -3139,7 +3216,7 @@ export const usePaperStore = create<PaperState>((set) => ({
               }
             }
           })
-        if (isMouseDown) {
+        if (isMouseDown && lastPoint) {
           const delta = currentMagnetPoint
             ? (currentMagnetPoint as paper.Point).subtract(lastPoint)
             : e.point.subtract(lastPoint)
@@ -3187,27 +3264,17 @@ export const usePaperStore = create<PaperState>((set) => ({
               // option
               ...usePaperStore.getState().toolOption,
             },
-            {}
+            getDraftPolygonData()
           )
         }
       }
     }
     polygonTool.onKeyDown = (e: paper.KeyEvent) => {
       if (e.key === "escape" || e.key === "alt") {
-        if (polygon) {
-          polygon.remove()
-          polygon = null
-          points = []
-          usePaperSupportStore.getState().handleBufferPaths(polygon)
-          handleCircles(polygon)
+        if (polygon || points.length) {
+          resetPolygonDraft()
+          usePaperSupportStore.getState().handleBufferPaths(null)
         }
-        const magnetPaths = usePaperStore
-          .getState()
-          .group!.getItems({ data: { type: "magnet" } })
-        magnetPaths.forEach((item) => {
-          item.remove()
-        })
-        currentMagnetPoint = null
       } else if (e.key === "delete") {
         handleDelete()
         forceUpdate()
@@ -3255,6 +3322,12 @@ export const usePaperStore = create<PaperState>((set) => ({
     }
     rect.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
       if (e.event && e.event.button === 2) {
+        if (
+          ["polygon", "brush", "point"].includes(
+            usePaperStore.getState().mode || ""
+          )
+        )
+          return
         if (rect.data.id) {
           let category = useTopToolsStore
             .getState()
@@ -3469,6 +3542,12 @@ export const usePaperStore = create<PaperState>((set) => ({
     // });
     brush.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
       if (e.event && e.event.button === 2) {
+        if (
+          ["polygon", "brush", "point"].includes(
+            usePaperStore.getState().mode || ""
+          )
+        )
+          return
         // console.log(e.event.clientX, e.event.clientY);
         if (brush.data.id) {
           let category = useTopToolsStore
@@ -3506,10 +3585,66 @@ export const usePaperStore = create<PaperState>((set) => ({
     let brushCircles: paper.Path.Circle[] = []
     let myPath: paper.Path | null
     let compoundPolygon: paper.Path | paper.CompoundPath | null
-    let lastPoint: paper.Point
+    let lastPoint: paper.Point | null = null
     let points: paper.Point[] = []
 
     let brushTool = paperBrushTool
+    let draftId: number | null = null
+
+    const getDraftBrushData = () => ({
+      imageId: useBottomToolsStore.getState().activeImage,
+      operationId: useTopToolsStore.getState().activeOperation,
+      id:
+        draftId ??
+        (draftId =
+          useRightToolsStore
+            .getState()
+            .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1),
+    })
+
+    const rebuildBrushDraft = () => {
+      myPath?.remove()
+      myPath = null
+
+      if (points.length) {
+        myPath = usePaperStore.getState().addBrush(
+          renderPath,
+          points,
+          {
+            ...usePaperStore.getState().toolOption,
+          },
+          getDraftBrushData()
+        )
+      } else {
+        draftId = null
+      }
+
+      lastPoint = points.length
+        ? usePaperStore
+            .getState()
+            .group!.localToGlobal(points[points.length - 1])
+        : null
+    }
+
+    const resetBrushDraft = () => {
+      brushCircles.forEach((item) => {
+        item.remove()
+      })
+      brushCircles = []
+      myPath?.remove()
+      myPath = null
+      points = []
+      lastPoint = null
+      draftId = null
+    }
+
+    const undoBrushPoint = () => {
+      if (!points.length) return false
+      points.pop()
+      brushCircles.pop()?.remove()
+      rebuildBrushDraft()
+      return true
+    }
 
     const handleBrushIntersectRaster = (savePath: paper.Path) => {
       let intersections = savePath.getIntersections(
@@ -3576,6 +3711,12 @@ export const usePaperStore = create<PaperState>((set) => ({
 
     brushTool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
       if (startMiddleMousePan(e.event)) return
+      if (e.event.button === 2) {
+        e.event.preventDefault()
+        hidePaperContextMenu()
+        undoBrushPoint()
+        return
+      }
       if (e.event.button !== 0) return
 
       // 绘制时去除选中辅助
@@ -3771,8 +3912,11 @@ export const usePaperStore = create<PaperState>((set) => ({
           brushCircles.forEach((item) => {
             item.remove()
           })
+          brushCircles = []
 
           useTopToolsStore.getState().setPressA(false)
+          draftId = null
+          lastPoint = null
           return
         }
       } else {
@@ -3790,6 +3934,7 @@ export const usePaperStore = create<PaperState>((set) => ({
 
       let temp = renderPath(usePaperStore.getState().group!, {})
       let point = temp.globalToLocal(e.point)
+      const draftData = getDraftBrushData()
 
       // add point
       points.push(point)
@@ -3803,22 +3948,15 @@ export const usePaperStore = create<PaperState>((set) => ({
           // option
           ...usePaperStore.getState().toolOption,
         },
-        {
-          imageId: useBottomToolsStore.getState().activeImage,
-          operationId: useTopToolsStore.getState().activeOperation,
-          id:
-            useRightToolsStore
-              .getState()
-              .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1,
-        }
+        draftData
       )
       let circle = usePaperStore
         .getState()
         .getClickedCircle(
           point,
           brushCircles.length,
-          myPath?.data.id,
-          myPath?.data.blankColor
+          draftData.id,
+          usePaperStore.getState().toolOption.blankColor
         )
       brushCircles.push(circle)
 
@@ -3846,7 +3984,7 @@ export const usePaperStore = create<PaperState>((set) => ({
             fillColor: undefined,
             closed: false,
           },
-          {}
+          getDraftBrushData()
         )
       }
     }
@@ -3857,13 +3995,8 @@ export const usePaperStore = create<PaperState>((set) => ({
 
     brushTool.onKeyDown = (e: paper.KeyEvent) => {
       if (e.key === "escape" || e.key === "alt") {
-        if (myPath) {
-          brushCircles.forEach((item) => {
-            item.remove()
-          })
-          myPath.remove()
-          myPath = null
-          points = []
+        if (myPath || points.length) {
+          resetBrushDraft()
         }
       } else if (e.key === "delete") {
         handleDelete()
@@ -3900,6 +4033,12 @@ export const usePaperStore = create<PaperState>((set) => ({
     myCircle.data = Object.assign({ type: "circle", ...option }, data)
     myCircle.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
       if (e.event && e.event.button === 2) {
+        if (
+          ["polygon", "brush", "point"].includes(
+            usePaperStore.getState().mode || ""
+          )
+        )
+          return
         // console.log(e.event.clientX, e.event.clientY);
         if (myCircle.data.id) {
           let category = useTopToolsStore
@@ -3973,13 +4112,82 @@ export const usePaperStore = create<PaperState>((set) => ({
     let myCircleText: paper.PointText[] = []
     let textNumbers: number[] = []
     let myPath: paper.Path | null
-    let lastPoint: paper.Point
+    let lastPoint: paper.Point | null = null
     let points: paper.Point[] = []
 
     let pointTool = paperPointTool
+    let draftId: number | null = null
+
+    const getDraftPointData = () => ({
+      imageId: useBottomToolsStore.getState().activeImage,
+      operationId: useTopToolsStore.getState().activeOperation,
+      id:
+        draftId ??
+        (draftId =
+          useRightToolsStore
+            .getState()
+            .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1),
+    })
+
+    const rebuildPointDraft = () => {
+      myPath?.remove()
+      myPath = null
+
+      if (points.length) {
+        myPath = usePaperStore.getState().addPointLine(
+          renderPath,
+          points,
+          {
+            ...usePaperStore.getState().toolOption,
+          },
+          getDraftPointData()
+        )
+      } else {
+        draftId = null
+      }
+
+      lastPoint = points.length
+        ? usePaperStore
+            .getState()
+            .group!.localToGlobal(points[points.length - 1])
+        : null
+    }
+
+    const resetPointDraft = () => {
+      myPath?.remove()
+      myPath = null
+      points = []
+      textNumbers = []
+      myCircleText.forEach((item) => {
+        item.remove()
+      })
+      myCircleText = []
+      myCircle.forEach((item) => {
+        item.remove()
+      })
+      myCircle = []
+      lastPoint = null
+      draftId = null
+    }
+
+    const undoPoint = () => {
+      if (!points.length) return false
+      points.pop()
+      textNumbers.pop()
+      myCircle.pop()?.remove()
+      myCircleText.pop()?.remove()
+      rebuildPointDraft()
+      return true
+    }
 
     pointTool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
       if (startMiddleMousePan(e.event)) return
+      if (e.event.button === 2) {
+        e.event.preventDefault()
+        hidePaperContextMenu()
+        undoPoint()
+        return
+      }
       if (e.event.button !== 0) return
 
       // 绘制时去除选中辅助
@@ -4106,6 +4314,8 @@ export const usePaperStore = create<PaperState>((set) => ({
           myCircleText = []
           // 避免后续按键删除已绘制的circle
           myCircle = []
+          draftId = null
+          lastPoint = null
 
           return
         }
@@ -4125,6 +4335,7 @@ export const usePaperStore = create<PaperState>((set) => ({
       let temp = renderCircle(usePaperStore.getState().group!, {})
       let point = temp.globalToLocal(e.point)
       let text = textNumbers.reduce((a, b) => Math.max(a, b), 0) + 1
+      const draftData = getDraftPointData()
 
       let circle = usePaperStore.getState().addPoint(
         renderCircle,
@@ -4137,13 +4348,8 @@ export const usePaperStore = create<PaperState>((set) => ({
           strokeScaling: false,
         },
         {
-          imageId: useBottomToolsStore.getState().activeImage,
-          operationId: useTopToolsStore.getState().activeOperation,
+          ...draftData,
           text: text,
-          id:
-            useRightToolsStore
-              .getState()
-              .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1,
         }
       )
       // add circle
@@ -4174,14 +4380,7 @@ export const usePaperStore = create<PaperState>((set) => ({
           // option
           ...usePaperStore.getState().toolOption,
         },
-        {
-          imageId: useBottomToolsStore.getState().activeImage,
-          operationId: useTopToolsStore.getState().activeOperation,
-          id:
-            useRightToolsStore
-              .getState()
-              .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1,
-        }
+        draftData
       )
 
       lastPoint = e.point
@@ -4208,7 +4407,7 @@ export const usePaperStore = create<PaperState>((set) => ({
             fillColor: undefined,
             closed: false,
           },
-          {}
+          getDraftPointData()
         )
       }
     }
@@ -4217,19 +4416,8 @@ export const usePaperStore = create<PaperState>((set) => ({
     }
     pointTool.onKeyDown = (e: paper.KeyEvent) => {
       if (e.key === "escape" || e.key === "alt") {
-        if (myPath) {
-          myPath.remove()
-          myPath = null
-          points = []
-          textNumbers = []
-          myCircleText.forEach((item) => {
-            item.remove()
-          })
-          myCircleText = []
-          myCircle.forEach((item) => {
-            item.remove()
-          })
-          myCircle = []
+        if (myPath || points.length) {
+          resetPointDraft()
         }
       } else if (e.key === "delete") {
         handleDelete()
@@ -4283,6 +4471,12 @@ export const usePaperStore = create<PaperState>((set) => ({
     circle.scale(newScale / currentScaling)
     circle.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
       if (e.event && e.event.button === 2) {
+        if (
+          ["polygon", "brush", "point"].includes(
+            usePaperStore.getState().mode || ""
+          )
+        )
+          return
         // console.log(e.event.clientX, e.event.clientY);
         if (circle.data.id) {
           let category = useTopToolsStore
@@ -4325,34 +4519,125 @@ export const usePaperStore = create<PaperState>((set) => ({
   initSupportTool: (tool, renderPath) => {
     let points: Array<[number, number]> = []
     let tags: number[] = []
+    let boxes: Array<[number, number, number, number]> = []
+    let dragStartPoint: paper.Point | null = null
+    let dragButton: number | null = null
+    let supportBox: paper.Path.Rectangle | null = null
+    let isBoxDragging = false
+
+    const BOX_DRAG_THRESHOLD = 6
+
+    const clearSupportBoxPreview = () => {
+      supportBox?.remove()
+      supportBox = null
+      isBoxDragging = false
+    }
+
+    const getSupportBox = (
+      from: paper.Point,
+      to: paper.Point
+    ): [number, number, number, number] => [
+      Math.min(from.x, to.x),
+      Math.min(from.y, to.y),
+      Math.max(from.x, to.x),
+      Math.max(from.y, to.y),
+    ]
+
+    const renderSupportBoxPreview = (from: paper.Point, to: paper.Point) => {
+      const [left, top, right, bottom] = getSupportBox(from, to)
+      supportBox?.remove()
+      supportBox = new paper.Path.Rectangle({
+        parent: usePaperStore.getState().group!,
+        from: [left, top],
+        to: [right, bottom],
+        strokeColor: "#FFF",
+        strokeWidth: 2,
+        strokeScaling: false,
+        dashArray: [6, 4],
+        fillColor: new paper.Color(1, 1, 1, 0.05),
+        data: {
+          id: "support",
+          type: "box",
+        },
+      })
+    }
+
+    const renderSupportPrompt = () => {
+      void renderPath(points, tags, points.length + boxes.length === 1, boxes)
+    }
 
     tool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
       if (startMiddleMousePan(e.event)) return
-      let point = usePaperStore.getState().group!.globalToLocal(e.point)
-      points.push([point.x, point.y])
-      tags.push(e.event.button === 0 ? 1 : 0)
-      renderPath(points, tags, points.length === 1)
+      dragStartPoint = usePaperStore.getState().group!.globalToLocal(e.point)
+      dragButton = e.event.button
+      clearSupportBoxPreview()
     }
-    tool.onMouseDrag = (e: { event: MouseEvent; delta: paper.Point }) => {
+
+    tool.onMouseDrag = (e: {
+      event: MouseEvent
+      point: paper.Point
+      delta: paper.Point
+    }) => {
       if (dragMiddleMousePan(e)) return
+
+      if (!dragStartPoint || dragButton !== 0) return
+
+      const currentPoint = usePaperStore
+        .getState()
+        .group!.globalToLocal(e.point)
+      if (currentPoint.subtract(dragStartPoint).length <= BOX_DRAG_THRESHOLD)
+        return
+
+      isBoxDragging = true
+      renderSupportBoxPreview(dragStartPoint, currentPoint)
     }
-    tool.onMouseUp = (_e: paper.ToolEvent) => {
-      stopMiddleMousePan()
+
+    tool.onMouseUp = (e: paper.ToolEvent) => {
+      if (stopMiddleMousePan()) return
+      if (!dragStartPoint || dragButton === null) return
+
+      const currentPoint = usePaperStore
+        .getState()
+        .group!.globalToLocal(e.point)
+
+      if (dragButton === 0 && isBoxDragging) {
+        boxes.push(getSupportBox(dragStartPoint, currentPoint))
+      } else {
+        points.push([dragStartPoint.x, dragStartPoint.y])
+        tags.push(dragButton === 0 ? 1 : 0)
+      }
+
+      renderSupportPrompt()
+      clearSupportBoxPreview()
+      dragStartPoint = null
+      dragButton = null
     }
 
     tool.onKeyDown = (e: paper.KeyEvent) => {
       if (e.key === "escape") {
         points = []
         tags = []
+        boxes = []
+        dragStartPoint = null
+        dragButton = null
+        clearSupportBoxPreview()
         clearSupportAnnotationItem()
         usePaperStore.getState().setPaperMode("pan")
       }
       if (e.key === "f1") {
         points = []
         tags = []
+        boxes = []
+        dragStartPoint = null
+        dragButton = null
+        clearSupportBoxPreview()
       }
     }
 
+    tool.onMouseMove = (e: paper.MouseEvent) => {
+      handleMouseMove(e)
+    }
+
     set((state: PaperState) => ({
       ...state,
       supportTool: tool,