fix(tag): bug

components/label/usePaperStore.ts

@@ -20,6 +20,7 @@ import { usePaperSupportStore } from "./usePaperSupportStore"
 import { useRightToolsStore } from "./useRightToolsStore"
 import { DEFAULT_NODE_SIZE, useTopToolsStore } from "./useTopToolsStore"
 import { safeClone } from "./utils/clone"
+import { getObjectTagVisibility } from "./utils/objectVisibility"
 
 interface ContinuePolygonTarget {
   imageId: string
@@ -216,6 +217,16 @@ const initialPaperState = {
   reciprocalRasterScale: {},
   resizeGhostRequestToken: 0,
 }
+
+const insertItemBelowTags = (item: paper.Item | null | undefined) => {
+  if (!item) return
+  const group = usePaperStore.getState().group
+  if (!group || item.parent !== group) return
+  const firstTagItem = group.getItems({ data: { type: "tag" } })[0]
+  if (!firstTagItem || firstTagItem === item) return
+  item.insertBelow(firstTagItem)
+}
+
 const handleDelete = () => {
   const group = usePaperStore.getState().group!
   const imageId = useBottomToolsStore.getState().activeImage
@@ -450,12 +461,7 @@ const clearPaperSelectedObjects = () => {
       .getState()
       .getItemsById(id)
       .forEach((item) => {
-        if (
-          (item instanceof paper.Path || item instanceof paper.CompoundPath) &&
-          ["rectangle", "polygon"].includes(item.data?.type || "")
-        ) {
-          item.fillColor = item.data?.blankColor || item.fillColor || null
-        }
+        resetPaperShapeFillColor(item)
       })
   })
 
@@ -464,6 +470,16 @@ const clearPaperSelectedObjects = () => {
   })
 }
 
+const resetPaperShapeFillColor = (item: paper.Item) => {
+  if (!(item instanceof paper.Path || item instanceof paper.CompoundPath)) {
+    return
+  }
+  if (!["rectangle", "polygon"].includes(item.data?.type || "")) {
+    return
+  }
+  item.fillColor = item.data?.blankColor || item.fillColor || null
+}
+
 const applyPaperSelectedPath = (item: paper.Path | paper.CompoundPath) => {
   if (item.data.type === "rectangle" && item instanceof paper.Path) {
     item.data.selected = true
@@ -2011,15 +2027,14 @@ export const usePaperStore = create<PaperState>((set) => ({
           type: "tag",
         },
       })
-      // 标识位为true时：选中路径隐藏tags; 没选中显示tags
-      const configs = useTopToolsStore.getState().showTagsConfigs
+      // 仅恢复当前应显示的标签，隐藏对象的标签保持不可见
       if (useTopToolsStore.getState().showTags) {
         const setTagVisibleByConfig = (tag: any) => {
-          if (tag.data.tag_category === "mask")
-            tag.visible = configs.includes("外框")
-          else if (tag.data.tag_category === "point_text")
-            tag.visible = configs.includes("点ID")
-          else tag.visible = true
+          tag.visible = getObjectTagVisibility(
+            useBottomToolsStore.getState().activeImage,
+            Number(tag.data?.id),
+            tag.data?.tag_category
+          )
         }
         lastTags.forEach(setTagVisibleByConfig)
         tags.forEach(setTagVisibleByConfig)
@@ -3147,6 +3162,7 @@ export const usePaperStore = create<PaperState>((set) => ({
       })
     )
     polygon.data = Object.assign({ type: "polygon", ...option }, data)
+    insertItemBelowTags(polygon)
     points?.forEach((point) => {
       polygon.add(point)
     })
@@ -3219,6 +3235,7 @@ export const usePaperStore = create<PaperState>((set) => ({
       })
     )
     compoundPath.data = Object.assign({ type: "polygon", ...option }, data)
+    insertItemBelowTags(compoundPath)
     compoundPath.onMouseDown = (e: {
       event: MouseEvent
       point: paper.Point
@@ -4606,8 +4623,7 @@ export const usePaperStore = create<PaperState>((set) => ({
           .getState()
           .group!.getItems({})
           .forEach((item) => {
-            // clear color
-            item.fillColor = item?.data?.blankColor
+            resetPaperShapeFillColor(item)
           })
       }
 
@@ -4803,6 +4819,7 @@ export const usePaperStore = create<PaperState>((set) => ({
       Object.assign(option, { strokeScaling: false })
     )
     rect.data = Object.assign({ type: "rectangle", ...option }, data)
+    insertItemBelowTags(rect)
     rect.onMouseEnter = (_e: paper.MouseEvent) => {
       // if (usePaperStore.getState().mode === "pan") {
       //   e.target.strokeWidth += 2;
@@ -5045,6 +5062,7 @@ export const usePaperStore = create<PaperState>((set) => ({
       )
     )
     brush.data = Object.assign({ type: "brush", ...option }, data)
+    insertItemBelowTags(brush)
     // points?.forEach((point) => {
     //   brush.add(point);
     // });
@@ -5545,6 +5563,7 @@ export const usePaperStore = create<PaperState>((set) => ({
     const newScale = useTopToolsStore.getState().scale / currentScaling
     myCircle.scale(newScale / currentScaling)
     myCircle.data = Object.assign({ type: "circle", ...option }, data)
+    insertItemBelowTags(myCircle)
     syncPaperCircleDiameter(myCircle)
     myCircle.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
       if (e.event && e.event.button === 2) {
@@ -5614,6 +5633,7 @@ export const usePaperStore = create<PaperState>((set) => ({
       )
     )
     myCircleLine.data = Object.assign({ type: "point", ...option }, data)
+    insertItemBelowTags(myCircleLine)
     return myCircleLine
   },