89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
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,
|
|
})
|
|
}
|
|
}
|