feat(label): add label page
This commit is contained in:
234
components/label/usePaperSupportStore.ts
Normal file
234
components/label/usePaperSupportStore.ts
Normal file
@@ -0,0 +1,234 @@
|
||||
import paper from "paper"
|
||||
import { create } from "zustand"
|
||||
import { usePaperStore } from "./usePaperStore"
|
||||
import { useTopToolsStore } from "./useTopToolsStore"
|
||||
|
||||
interface SupportStore {
|
||||
masks: paper.Path.Rectangle[]
|
||||
pointTexts: paper.PointText[]
|
||||
selectedCircles: paper.Path.Circle[]
|
||||
bufferPaths: paper.Path[]
|
||||
handleMask: (path: paper.Path | paper.Item | paper.CompoundPath) => void
|
||||
removeMaskById: (id: number) => void
|
||||
removeMaskByIds: (id: number[]) => void
|
||||
clearMasks: () => void
|
||||
handleText: (path: paper.Path | paper.Item | paper.CompoundPath) => void
|
||||
clearTexts: () => void
|
||||
handleCircles: (path: paper.Path | paper.CompoundPath | null) => void
|
||||
clearCircles: () => void
|
||||
handleBufferPaths: (path: paper.Path | paper.CompoundPath | null) => void
|
||||
clearBufferPaths: () => void
|
||||
clearAll: () => void
|
||||
}
|
||||
|
||||
export const usePaperSupportStore = create<SupportStore>((set) => ({
|
||||
masks: [],
|
||||
pointTexts: [],
|
||||
selectedCircles: [],
|
||||
bufferPaths: [],
|
||||
handleMask: (path) =>
|
||||
set((state) => {
|
||||
let newMasks = state.masks
|
||||
if (newMasks.length) {
|
||||
newMasks = newMasks.filter((mask) => {
|
||||
if (mask.data.id !== path.data.id) {
|
||||
return true
|
||||
} else {
|
||||
mask.remove()
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let bounds = path.bounds
|
||||
let mask = new paper.Path.Rectangle({
|
||||
parent: usePaperStore.getState().group!,
|
||||
point: [bounds.left, bounds.top],
|
||||
size: [bounds.width, bounds.height],
|
||||
fillColor: path.data.fillColor,
|
||||
strokeColor: path.data.strokeColor,
|
||||
strokeWidth: path.data.strokeWidth || 1,
|
||||
// opacity: 0.3,
|
||||
strokeScaling: false,
|
||||
})
|
||||
mask.data = {
|
||||
type: "mask",
|
||||
id: path.data.id,
|
||||
operationId: path.data.operationId,
|
||||
}
|
||||
newMasks.push(mask)
|
||||
return {
|
||||
...state,
|
||||
masks: newMasks,
|
||||
}
|
||||
}),
|
||||
removeMaskById: (id) =>
|
||||
set((state) => {
|
||||
let newMasks = state.masks.filter((mask) => {
|
||||
if (mask.data.id !== id) {
|
||||
return true
|
||||
} else {
|
||||
mask.remove()
|
||||
return false
|
||||
}
|
||||
})
|
||||
return {
|
||||
...state,
|
||||
masks: newMasks,
|
||||
}
|
||||
}),
|
||||
removeMaskByIds: (ids) =>
|
||||
set((state) => {
|
||||
let newMasks = state.masks.filter((mask) => {
|
||||
if (!ids.includes(mask.data.id)) {
|
||||
return true
|
||||
} else {
|
||||
mask.remove()
|
||||
return false
|
||||
}
|
||||
})
|
||||
return {
|
||||
...state,
|
||||
masks: newMasks,
|
||||
}
|
||||
}),
|
||||
clearMasks: () =>
|
||||
set((state) => {
|
||||
if (state.masks.length) {
|
||||
state.masks.forEach((mask) => mask.remove())
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
masks: [],
|
||||
}
|
||||
}),
|
||||
handleText: (path) =>
|
||||
set((state) => {
|
||||
if (state.pointTexts.length) {
|
||||
state.pointTexts.forEach((item) => item.remove())
|
||||
}
|
||||
let newTexts: any[] = []
|
||||
// let circleItems = usePaperStore.getState().group!.getItems({
|
||||
// data: { type: "circle" },
|
||||
// });
|
||||
const currentScaling = usePaperStore.getState().group!.scaling.x
|
||||
const newScale = useTopToolsStore.getState().scale / currentScaling
|
||||
|
||||
let currentPointTexts = (path as paper.Path)?.segments.map(
|
||||
(item, index) => {
|
||||
// let text = circleItems.find((circle) => circle.contains(item.point))
|
||||
// ?.data.text;
|
||||
let text = index + 1
|
||||
let pointText = new paper.PointText({
|
||||
parent: usePaperStore.getState().group!,
|
||||
point: item.point,
|
||||
content: text?.toString(),
|
||||
justification: "right",
|
||||
fillColor: path?.data?.strokeColor,
|
||||
// fontSize: 12,
|
||||
data: {
|
||||
type: "text",
|
||||
id: path.data.id,
|
||||
operationId: path.data.operationId,
|
||||
},
|
||||
strokeScaling: false,
|
||||
// scaling: usePaperStore.getState().group!.scaling,
|
||||
})
|
||||
|
||||
pointText.scale(newScale / currentScaling)
|
||||
return pointText
|
||||
}
|
||||
)
|
||||
currentPointTexts.forEach((currentPointText) => {
|
||||
newTexts.push(currentPointText)
|
||||
})
|
||||
return {
|
||||
...state,
|
||||
pointTexts: newTexts,
|
||||
}
|
||||
}),
|
||||
clearTexts: () =>
|
||||
set((state) => {
|
||||
if (state.pointTexts.length) {
|
||||
state.pointTexts.forEach((pointText) => pointText.remove())
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
pointTexts: [],
|
||||
}
|
||||
}),
|
||||
handleCircles: (path) =>
|
||||
set((state) => {
|
||||
if (state.selectedCircles.length) {
|
||||
state.selectedCircles.forEach((circle) => circle.remove())
|
||||
}
|
||||
let newCircles: any[] = []
|
||||
path &&
|
||||
path instanceof paper.Path &&
|
||||
path.segments.forEach((segment) => {
|
||||
let circle = usePaperStore
|
||||
.getState()
|
||||
.getClickedCircle(
|
||||
segment.point,
|
||||
segment.index,
|
||||
path.data.id,
|
||||
path.data.blankColor
|
||||
)
|
||||
newCircles.push(circle)
|
||||
})
|
||||
return {
|
||||
...state,
|
||||
selectedCircles: newCircles,
|
||||
}
|
||||
}),
|
||||
clearCircles: () =>
|
||||
set((state) => {
|
||||
if (state.selectedCircles.length) {
|
||||
state.selectedCircles.forEach((circle) => circle.remove())
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
selectedCircles: [],
|
||||
}
|
||||
}),
|
||||
handleBufferPaths: (path) =>
|
||||
set((state) => {
|
||||
if (state.bufferPaths.length) {
|
||||
state.bufferPaths.forEach((bufferPath) => bufferPath.remove())
|
||||
}
|
||||
let newPaths: any[] = []
|
||||
path &&
|
||||
path instanceof paper.Path &&
|
||||
path.segments.forEach((segment) => {
|
||||
let bufferPath = usePaperStore
|
||||
.getState()
|
||||
.getBuffPath(
|
||||
segment,
|
||||
segment.index,
|
||||
path.data.id,
|
||||
path.data.blankColor
|
||||
)
|
||||
if (bufferPath) newPaths.push(bufferPath)
|
||||
})
|
||||
return {
|
||||
...state,
|
||||
bufferPaths: newPaths,
|
||||
}
|
||||
}),
|
||||
clearBufferPaths: () =>
|
||||
set((state) => {
|
||||
if (state.bufferPaths.length) {
|
||||
state.bufferPaths.forEach((bufferPath) => bufferPath.remove())
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
bufferPaths: [],
|
||||
}
|
||||
}),
|
||||
clearAll: () => {
|
||||
usePaperSupportStore.getState().clearMasks()
|
||||
usePaperSupportStore.getState().clearTexts()
|
||||
usePaperSupportStore.getState().clearCircles()
|
||||
usePaperSupportStore.getState().clearBufferPaths()
|
||||
},
|
||||
}))
|
||||
Reference in New Issue
Block a user