feat(project): init

components/label/useRenderGroupPath.ts

@@ -0,0 +1,88 @@
+import paper from "paper"
+import { useBottomToolsStore } from "./useBottomToolsStore"
+import { usePaperStore } from "./usePaperStore"
+import { useRightToolsStore } from "./useRightToolsStore"
+
+const clearGroupPath = () => {
+  const group = usePaperStore.getState().group
+  if (!group) return
+  const paths = group.getItems({ data: { type: "groupPath" } })
+  paths.forEach((path) => {
+    path.remove()
+  })
+}
+
+export const renderGroupPath = () => {
+  const group = usePaperStore.getState().group
+  const visible = useRightToolsStore.getState().groupPathVisible
+  const imageId = useBottomToolsStore.getState().activeImage
+  const groupMap =
+    useRightToolsStore.getState().pathGroupMap.get(imageId) ??
+    new Map<number, number[]>()
+
+  console.log("render group", group, groupMap)
+
+  if (!group) return
+  clearGroupPath()
+  if (!Array.from(groupMap.values()).length) return
+
+  for (let [groupId, pathIds] of groupMap) {
+    let boundsArr: any[] = []
+    pathIds.forEach((pathId) => {
+      const path = usePaperStore.getState().getItemById(pathId)!
+      console.log(path)
+      if (path) {
+        path.data = { ...path.data, parentGroupId: groupId }
+        boundsArr.push(path.bounds)
+      }
+    })
+    console.log(boundsArr)
+    if (!boundsArr.length) continue
+    // pathIds.length 必大于等于2
+    let uniteBounds = boundsArr[0].unite(boundsArr[1])
+    for (let i = 2; i < boundsArr.length; i++) {
+      uniteBounds = uniteBounds.unite(boundsArr[i])
+    }
+    // draw groupPath
+    let groupPath = new paper.Path.Rectangle(uniteBounds)
+    groupPath.set({
+      data: { type: "groupPath", groupId, childPathIds: pathIds },
+      strokeColor: "white",
+      strokeWidth: 2,
+      strokeScaling: false,
+      parent: group,
+      visible,
+    })
+    const text = `@${groupId}`
+    const pos = [
+      groupPath.bounds.left - text.length * 15,
+      groupPath.bounds.top + 18,
+    ]
+    const textPath = new paper.PointText(pos)
+    textPath.set({
+      content: text,
+      fontSize: 18,
+      fontWeight: "bold",
+      fillColor: "white",
+      data: {
+        groupId,
+        type: "groupPath",
+        blankColor: "white",
+      },
+      parent: group,
+      visible,
+    })
+    const textMask = new paper.Path.Rectangle(textPath.bounds)
+    textMask.set({
+      strokeColor: "white",
+      strokeWidth: 2,
+      strokeScaling: false,
+      data: {
+        groupId,
+        type: "groupPath",
+      },
+      parent: group,
+      visible,
+    })
+  }
+}