4538 lines
149 KiB
TypeScript
4538 lines
149 KiB
TypeScript
import { Comment } from "./api/label/typing"
|
||
import { Project } from "./api/project/typing"
|
||
import dayjs from "dayjs"
|
||
import paper from "paper"
|
||
import { DispatchWithoutAction } from "react"
|
||
import { create } from "zustand"
|
||
import { usePermissionStore } from "./store/auth"
|
||
import {
|
||
initialDetail,
|
||
useKeyEventStore,
|
||
useLabelStore,
|
||
useObjectStore,
|
||
} from "./store"
|
||
import { useBottomToolsStore } from "./useBottomToolsStore"
|
||
import { useOtherToolsStore } from "./useOtherToolsStore"
|
||
import { usePaperSupportStore } from "./usePaperSupportStore"
|
||
import { useRightToolsStore } from "./useRightToolsStore"
|
||
import { useTopToolsStore } from "./useTopToolsStore"
|
||
import { safeClone } from "./utils/clone"
|
||
|
||
interface PaperState {
|
||
paperScope: paper.PaperScope | null
|
||
group: paper.Group | null
|
||
rasterPath: paper.Path | null
|
||
el: HTMLCanvasElement | null
|
||
viewTool: paper.Tool | null
|
||
panTool: paper.Tool | null
|
||
toolOption: any
|
||
polygonTool: paper.Tool | null
|
||
rectangleTool: paper.Tool | null
|
||
brushTool: paper.Tool | null
|
||
pointTool: paper.Tool | null
|
||
supportTool: paper.Tool | null
|
||
mode: "pan" | "polygon" | "rectangle" | "brush" | "point" | "support" | null
|
||
rasterScale: { [x: string]: number }
|
||
rasterSize: { [x: string]: [number, number] }
|
||
reciprocalRasterScale: { [x: string]: number }
|
||
loadingData: boolean
|
||
init: (
|
||
initEl: HTMLCanvasElement,
|
||
initScope: paper.PaperScope,
|
||
initGroup: paper.Group
|
||
) => void
|
||
setRasterPath: (paperRaster: paper.Path) => void
|
||
setRasterScale: (id: string, scale: number) => void
|
||
setRasterSize: (id: string, size: [number, number]) => void
|
||
resetRasterScale: () => void
|
||
initViewTool: (paperPanTool: paper.Tool) => void
|
||
initPanTool: (
|
||
paperPanTool: paper.Tool,
|
||
renderRectangle: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.Path.Rectangle,
|
||
forceUpdate: DispatchWithoutAction
|
||
) => void
|
||
setToolOption: (toolOption: any) => void
|
||
addPolygon: (
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
points: paper.Point[] | undefined,
|
||
option: any,
|
||
data: any
|
||
) => paper.Path
|
||
addCompoundPath: (
|
||
renderCompoundPath: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.CompoundPath,
|
||
children: paper.Path[] | undefined,
|
||
option: any,
|
||
data: any
|
||
) => paper.CompoundPath
|
||
initPolygonTool: (
|
||
paperPolygonTool: paper.Tool,
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
renderCompoundPath: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.CompoundPath,
|
||
forceUpdate: DispatchWithoutAction
|
||
) => void
|
||
addRectangle: (
|
||
renderRectangle: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.Path.Rectangle,
|
||
option: any,
|
||
data: any
|
||
) => paper.Path.Rectangle
|
||
initRectangleTool: (
|
||
paperRectangleTool: paper.Tool,
|
||
renderRectangle: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.Path.Rectangle,
|
||
forceUpdate: DispatchWithoutAction
|
||
) => void
|
||
addBrush: (
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
points: paper.Point[] | undefined,
|
||
option: any,
|
||
data: any
|
||
) => paper.Path
|
||
initBrushTool: (
|
||
paperBrushTool: paper.Tool,
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
renderCompoundPath: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.CompoundPath,
|
||
forceUpdate: DispatchWithoutAction
|
||
) => void
|
||
addPoint: (
|
||
renderCircle: (paperGroup: paper.Group, option: any) => paper.Path.Circle,
|
||
points: paper.Point | undefined,
|
||
option: any,
|
||
data: any
|
||
) => paper.Path.Circle
|
||
addPointLine: (
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
points: paper.Point[] | undefined,
|
||
option: any,
|
||
data: any
|
||
) => paper.Path
|
||
initPointTool: (
|
||
paperPointTool: paper.Tool,
|
||
renderCircle: (paperGroup: paper.Group, option: any) => paper.Path.Circle,
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
forceUpdate: DispatchWithoutAction
|
||
) => void
|
||
getPointCircle: (
|
||
point: paper.Point,
|
||
index: number,
|
||
id: number,
|
||
color: any
|
||
) => paper.Path.Circle
|
||
initSupportTool: (
|
||
tool: paper.Tool,
|
||
renderPath: (
|
||
points: Array<[number, number]>,
|
||
tags: number[],
|
||
flag?: boolean
|
||
) => void
|
||
) => void
|
||
getClickedCircle: (
|
||
point: paper.Point,
|
||
index: number,
|
||
id: number,
|
||
color: any
|
||
) => paper.Path.Circle
|
||
getBuffPath: (
|
||
item: paper.Segment,
|
||
index: number,
|
||
id: number,
|
||
color: any
|
||
) => paper.Path | null
|
||
setPaperMode: (
|
||
modeParam:
|
||
| "pan"
|
||
| "polygon"
|
||
| "rectangle"
|
||
| "brush"
|
||
| "point"
|
||
| "support"
|
||
| null
|
||
) => void
|
||
setGroupScale: (scale: number) => void
|
||
getAll: () => paper.Path[]
|
||
getItemById: (id: number) => paper.Path | null
|
||
getItemsById: (id: number) => Array<paper.Path | paper.CompoundPath>
|
||
setLoadingData: (flag: boolean) => void
|
||
}
|
||
|
||
interface PositionStore {
|
||
currentMousePosition: [number, number]
|
||
setCurrentMousePosition: (p: [number, number]) => void
|
||
}
|
||
|
||
const initialPaperState = {
|
||
paperScope: null,
|
||
group: null,
|
||
rasterPath: null,
|
||
el: null,
|
||
mode: null,
|
||
viewTool: null,
|
||
panTool: null,
|
||
toolOption: {
|
||
strokeColor: "red",
|
||
strokeWidth: 2,
|
||
fillColor: "#ff000033",
|
||
blankColor: "#ff000033",
|
||
},
|
||
polygonTool: null,
|
||
rectangleTool: null,
|
||
brushTool: null,
|
||
pointTool: null,
|
||
rasterScale: {},
|
||
rasterSize: {},
|
||
reciprocalRasterScale: {},
|
||
}
|
||
const handleDelete = () => {
|
||
const group = usePaperStore.getState().group!
|
||
const imageId = useBottomToolsStore.getState().activeImage
|
||
let ids = useObjectStore.getState().selectedPath[imageId]
|
||
let operationIds: any[] = []
|
||
let parentGroupIds: any[] = []
|
||
|
||
ids.forEach((id, index) => {
|
||
const items = group.getItems({ data: { id } })
|
||
items.forEach((item: any) => {
|
||
item.remove()
|
||
if (item.data.operationId && !operationIds[index])
|
||
operationIds[index] = item.data.operationId
|
||
if (item.data.parentGroupId && !parentGroupIds[index])
|
||
parentGroupIds[index] = item.data.parentGroupId
|
||
})
|
||
useObjectStore
|
||
.getState()
|
||
.updateSelectedPath(
|
||
useBottomToolsStore.getState().activeImage,
|
||
"DELETE",
|
||
id
|
||
)
|
||
})
|
||
|
||
// handle group path update
|
||
if (parentGroupIds.length) {
|
||
console.log(parentGroupIds)
|
||
const groupMap = useRightToolsStore.getState().pathGroupMap.get(imageId)
|
||
parentGroupIds.forEach((parentGroupId, index) => {
|
||
if (parentGroupId) {
|
||
const currentGroupIds = groupMap
|
||
?.get(parentGroupId)
|
||
?.filter((v) => v !== ids[index])
|
||
if (!currentGroupIds || currentGroupIds?.length <= 1) {
|
||
groupMap?.delete(parentGroupId)
|
||
} else {
|
||
groupMap?.set(parentGroupId, currentGroupIds ?? [])
|
||
}
|
||
}
|
||
})
|
||
}
|
||
const currentLabelData = safeClone(useLabelStore.getState().label)
|
||
operationIds.forEach((operationId, index) => {
|
||
let result =
|
||
currentLabelData
|
||
.get(imageId)
|
||
?.get(operationId)
|
||
?.filter((item) => item[0] !== ids[index]) ?? []
|
||
currentLabelData.get(imageId)?.set(operationId, result)
|
||
})
|
||
useLabelStore.getState().setLabel(currentLabelData)
|
||
useLabelStore.getState().pushStateStack(currentLabelData)
|
||
// ids.forEach((id) => {
|
||
// usePaperStore
|
||
// .getState()
|
||
// .group?.getItems({
|
||
// data: { id: id },
|
||
// })
|
||
// .forEach((item: any) => {
|
||
// item.remove();
|
||
// if (item.data.id) {
|
||
// if (item.data.imageId && item.data.operationId) {
|
||
// useLabelStore
|
||
// .getState()
|
||
// .deleteOperation(
|
||
// item.data.imageId,
|
||
// item.data.operationId,
|
||
// item.data.id
|
||
// );
|
||
// }
|
||
// // tocheck
|
||
// useObjectStore
|
||
// .getState()
|
||
// .updateSelectedPath(
|
||
// useBottomToolsStore.getState().activeImage,
|
||
// item.data.id
|
||
// );
|
||
// }
|
||
// });
|
||
// });
|
||
}
|
||
|
||
const handleShift = (flag: boolean) => {
|
||
useKeyEventStore.getState().setShift(flag)
|
||
}
|
||
|
||
// 通用 鼠标在paperScope上移动时更新当前鼠标位置
|
||
const handleMouseMove = (e: paper.MouseEvent) => {
|
||
usePositionStore.getState().setCurrentMousePosition([e.point.x, e.point.y])
|
||
}
|
||
|
||
const { user_id } = usePermissionStore.getState()
|
||
|
||
type OrderPoint = [number, number]
|
||
const getOrder = (b: OrderPoint[]): number[] => {
|
||
// 左下角：x最小，y最大
|
||
// 左上角：x最小，y最小
|
||
// 右上角：x最大，y最小
|
||
// 右下角：x最大，y最大
|
||
const bottomLeft = b.reduce(
|
||
(acc, point) =>
|
||
point[0] < acc[0] || (point[0] === acc[0] && point[1] > acc[1])
|
||
? point
|
||
: acc,
|
||
b[0]
|
||
)
|
||
const topLeft = b.reduce(
|
||
(acc, point) =>
|
||
point[0] < acc[0] || (point[0] === acc[0] && point[1] < acc[1])
|
||
? point
|
||
: acc,
|
||
b[0]
|
||
)
|
||
const topRight = b.reduce(
|
||
(acc, point) =>
|
||
point[0] > acc[0] || (point[0] === acc[0] && point[1] < acc[1])
|
||
? point
|
||
: acc,
|
||
b[0]
|
||
)
|
||
const bottomRight = b.reduce(
|
||
(acc, point) =>
|
||
point[0] > acc[0] || (point[0] === acc[0] && point[1] > acc[1])
|
||
? point
|
||
: acc,
|
||
b[0]
|
||
)
|
||
|
||
return [
|
||
b.indexOf(bottomLeft),
|
||
b.indexOf(topLeft),
|
||
b.indexOf(topRight),
|
||
b.indexOf(bottomRight),
|
||
]
|
||
}
|
||
|
||
const handleRectangleIntersectRaster = (rect: paper.Path) => {
|
||
let intersections = rect.getIntersections(
|
||
usePaperStore.getState().rasterPath!
|
||
)
|
||
let validIntersections = intersections.filter((intersection) => {
|
||
// 检查交点是否在两个路径的可见部分
|
||
return (
|
||
rect?.contains(intersection.point) &&
|
||
usePaperStore.getState().rasterPath!.contains(intersection.point)
|
||
)
|
||
})
|
||
|
||
// 没有 validIntersections 不进行操作
|
||
if (validIntersections.length) {
|
||
let intersectionPath: paper.Path | null = rect.intersect(
|
||
usePaperStore.getState().rasterPath!
|
||
) as paper.Path
|
||
|
||
let rectOrder = getOrder(
|
||
rect.segments.map((segment) => [
|
||
+segment.point.x.toFixed(2),
|
||
+segment.point.y.toFixed(2),
|
||
])
|
||
)
|
||
|
||
let intersectionOrder = getOrder(
|
||
intersectionPath.segments.map((segment) => [
|
||
+segment.point.x.toFixed(2),
|
||
+segment.point.y.toFixed(2),
|
||
])
|
||
)
|
||
|
||
let order = rectOrder.map((rorder) =>
|
||
intersectionOrder.findIndex((iorder) => iorder === rorder)
|
||
)
|
||
|
||
if (intersectionPath) {
|
||
rect.segments = order.map((child) => intersectionPath!.segments[child])
|
||
}
|
||
|
||
// rect.segments = [
|
||
// intersectionPath.segments[1],
|
||
// intersectionPath.segments[2],
|
||
// intersectionPath.segments[3],
|
||
// intersectionPath.segments[0],
|
||
// ];
|
||
// rect.segments = intersectionPath.segments;
|
||
intersectionPath.remove()
|
||
intersectionPath = null
|
||
} else {
|
||
let intersectionPath: paper.Path | null = rect.intersect(
|
||
usePaperStore.getState().rasterPath!
|
||
) as paper.Path
|
||
rect.segments = intersectionPath.segments
|
||
intersectionPath.remove()
|
||
intersectionPath = null
|
||
}
|
||
}
|
||
|
||
export const updateObjLatestComment = (
|
||
imageId: any,
|
||
operationId: any,
|
||
id: any
|
||
) => {
|
||
// 标注中的任务不对批注状态进行更新
|
||
if (useTopToolsStore.getState().currentTimeKey === "label") return
|
||
const currentDetail = useLabelStore
|
||
.getState()
|
||
.getLabelDetailDataByKeys(imageId, operationId, id)
|
||
const comment = currentDetail?.comment || []
|
||
const updatedComment = comment.map((item: Comment, index: number) =>
|
||
index < comment.length - 1
|
||
? item
|
||
: { ...item, comment_type: item.comment_type || 1 }
|
||
)
|
||
useLabelStore
|
||
.getState()
|
||
.updateLabelDetailDataByKeys(imageId, operationId, id, {
|
||
...currentDetail,
|
||
comment: updatedComment,
|
||
})
|
||
}
|
||
|
||
// 清空辅助标注形成的path
|
||
export const clearSupportAnnotationItem = () => {
|
||
const needClearItems = usePaperStore
|
||
.getState()
|
||
.group!.getItems({ data: { id: "support" } })
|
||
needClearItems.forEach((item: any) => item.remove())
|
||
}
|
||
|
||
// 根据点击位置判断弹窗弹出的top、left
|
||
const containerWidth = 244
|
||
const containerHeight = 240
|
||
export const getShowContextMenuPosition = (
|
||
clickPoint: paper.Point,
|
||
category: Project.LabelSchemaList,
|
||
offsetWidth = 0,
|
||
offsetHeight = 0
|
||
) => {
|
||
let subAttrHeight = 0
|
||
if (category) {
|
||
const { sub_attributes_describe } = category
|
||
console.log(sub_attributes_describe)
|
||
|
||
if (sub_attributes_describe.length) subAttrHeight += 30
|
||
sub_attributes_describe.forEach((item) => {
|
||
if (item.chinese_name) subAttrHeight += 32
|
||
if (item.optional_item && item.optional_item.length)
|
||
item.optional_item.forEach(() => {
|
||
subAttrHeight += 22
|
||
})
|
||
if (item.select_mode === 0) subAttrHeight += 32
|
||
})
|
||
}
|
||
|
||
const finalHeight = containerHeight + subAttrHeight
|
||
const element = document.getElementById("paper-container")
|
||
const rasterPos = [element!.clientWidth, element!.clientHeight]
|
||
console.log(rasterPos, finalHeight)
|
||
let left =
|
||
clickPoint.x + containerWidth > rasterPos[0]
|
||
? clickPoint.x + offsetWidth - containerWidth
|
||
: clickPoint.x + offsetWidth
|
||
let top =
|
||
clickPoint.y + finalHeight > rasterPos[1]
|
||
? clickPoint.y + offsetHeight - finalHeight < 0
|
||
? 0
|
||
: clickPoint.y + offsetHeight - finalHeight
|
||
: clickPoint.y + offsetHeight
|
||
console.log("转换之后的x、y", left, top)
|
||
|
||
return {
|
||
top,
|
||
left,
|
||
}
|
||
}
|
||
|
||
export const usePositionStore = create<PositionStore>((set) => ({
|
||
currentMousePosition: [0, 0],
|
||
setCurrentMousePosition: (point) =>
|
||
set((state) => ({ ...state, currentMousePosition: point })),
|
||
}))
|
||
|
||
// store paper
|
||
export const usePaperStore = create<PaperState>((set) => ({
|
||
paperScope: initialPaperState.paperScope,
|
||
group: initialPaperState.group,
|
||
rasterPath: initialPaperState.rasterPath,
|
||
el: initialPaperState.el,
|
||
mode: initialPaperState.mode,
|
||
viewTool: initialPaperState.viewTool,
|
||
panTool: initialPaperState.panTool,
|
||
toolOption: initialPaperState.toolOption,
|
||
polygonTool: initialPaperState.polygonTool,
|
||
rectangleTool: initialPaperState.rectangleTool,
|
||
brushTool: initialPaperState.brushTool,
|
||
pointTool: initialPaperState.pointTool,
|
||
supportTool: null,
|
||
rasterScale: initialPaperState.rasterScale,
|
||
rasterSize: initialPaperState.rasterSize,
|
||
reciprocalRasterScale: initialPaperState.reciprocalRasterScale,
|
||
currentMousePosition: [0, 0],
|
||
loadingData: false,
|
||
init: (
|
||
initEl: HTMLCanvasElement,
|
||
initScope: paper.PaperScope,
|
||
initGroup: paper.Group
|
||
) => {
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
paperScope: initScope,
|
||
group: initGroup,
|
||
el: initEl,
|
||
}))
|
||
},
|
||
setRasterPath: (rasterPath) => {
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
rasterPath: rasterPath,
|
||
}))
|
||
},
|
||
setRasterScale: (id: string, scale: number) => {
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
rasterScale: { ...state.rasterScale, [id]: scale },
|
||
reciprocalRasterScale: {
|
||
...state.reciprocalRasterScale,
|
||
[id]: 1 / scale,
|
||
},
|
||
}))
|
||
},
|
||
setRasterSize: (id: string, size: [number, number]) => {
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
rasterSize: { ...state.rasterSize, [id]: size },
|
||
}))
|
||
},
|
||
resetRasterScale: () =>
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
rasterScale: {},
|
||
reciprocalRasterScale: {},
|
||
})),
|
||
setLoadingData: (flag) =>
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
loadingData: flag,
|
||
})),
|
||
setCurrentMousePosition: (point: [number, number]) =>
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
currentMousePosition: point,
|
||
})),
|
||
setToolOption: (toolOption: any) => {
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
toolOption: toolOption,
|
||
}))
|
||
},
|
||
initViewTool: (paperViewTool: paper.Tool) => {
|
||
let viewTool = paperViewTool
|
||
viewTool.onMouseMove = (e: paper.MouseEvent) => {
|
||
handleMouseMove(e)
|
||
}
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
viewTool: viewTool,
|
||
}))
|
||
},
|
||
initPanTool: (
|
||
paperPanTool: paper.Tool,
|
||
renderRectangle: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.Path.Rectangle,
|
||
forceUpdate: DispatchWithoutAction
|
||
) => {
|
||
let panMode = ""
|
||
let activePath: paper.Path
|
||
// let compoundPolygon: paper.Path | paper.CompoundPath | null;
|
||
let hitIndex: number
|
||
let pressShift: boolean = false
|
||
let pressCtrl: boolean = false
|
||
let rect: paper.Path.Rectangle | null
|
||
let panTool = paperPanTool
|
||
let lastPoint: paper.Point
|
||
let isChanged: boolean = false
|
||
let lastTime: number
|
||
|
||
// const handleSelected = (path: paper.Path) => {
|
||
// // path.blendMode = "subtract";
|
||
// path.segments.forEach((segment) => {
|
||
// // console.log(segment.index);
|
||
|
||
// // let point = usePaperStore
|
||
// // .getState()
|
||
// // .group!.globalToLocal(segment.point);
|
||
// let circle = usePaperStore
|
||
// .getState()
|
||
// .getClickedCircle(
|
||
// segment.point,
|
||
// segment.index,
|
||
// path.data.id,
|
||
// path.data.blankColor
|
||
// );
|
||
// // circle.insertBelow(path);
|
||
// // path.addChild(circle);
|
||
|
||
// selectedCircles.push(circle);
|
||
// // usePaperStore.getState().group?.addChild(circle);
|
||
// // circle.bringToFront();
|
||
// // circle.addTo(path);
|
||
// });
|
||
// };
|
||
|
||
const handleCtrl = (rect: paper.Path.Rectangle) => {
|
||
let items = usePaperStore
|
||
.getState()
|
||
.group!.getItems({})
|
||
.filter(
|
||
(item) =>
|
||
item.data?.id &&
|
||
["rectangle", "polygon", "brush", "point"].includes(item.data.type)
|
||
)
|
||
// 清空选中
|
||
usePaperStore
|
||
.getState()
|
||
.group!.getItems({
|
||
data: { selected: true },
|
||
})
|
||
.forEach((item) => {
|
||
if (item.data.selected) {
|
||
item.data.selected = false
|
||
usePaperSupportStore.getState().clearMasks()
|
||
usePaperSupportStore.getState().clearTexts()
|
||
}
|
||
// item.data.selected = false;
|
||
})
|
||
handleCancelSelect()
|
||
for (let i = 0; i < items.length; i++) {
|
||
let child = items[i]
|
||
if (child instanceof paper.Path) {
|
||
if (
|
||
rect.intersects(child.bounds as any) ||
|
||
rect.contains(child.bounds)
|
||
) {
|
||
if (rect.data.id !== child.data.id) {
|
||
if (child.data.type !== "brush" && child.data.type !== "point") {
|
||
child.fillColor = child.data.fillColor
|
||
}
|
||
if (child.data.type === "rectangle") {
|
||
if (child instanceof paper.Path) child.data.selected = true
|
||
} else if (child.data.type === "brush") {
|
||
child.data.selected = true
|
||
usePaperSupportStore.getState().handleMask(child)
|
||
} else if (child.data.type === "point") {
|
||
child.data.selected = true
|
||
usePaperSupportStore.getState().handleMask(child)
|
||
usePaperSupportStore.getState().handleText(child as paper.Path)
|
||
}
|
||
useObjectStore
|
||
.getState()
|
||
.updateSelectedPath(
|
||
useBottomToolsStore.getState().activeImage,
|
||
"ADDSOME",
|
||
child.data?.id
|
||
)
|
||
}
|
||
}
|
||
} else if (child instanceof paper.CompoundPath) {
|
||
let bool = child.children.some((item) => {
|
||
return (
|
||
rect.intersects(item.bounds as any) || rect.contains(item.bounds)
|
||
)
|
||
})
|
||
if (bool) {
|
||
if (rect.data.id !== child.data.id) {
|
||
if (child.data.type !== "brush" && child.data.type !== "point") {
|
||
child.fillColor = child.data.fillColor
|
||
}
|
||
if (child.data.type === "rectangle") {
|
||
if (child instanceof paper.Path) child.data.selected = true
|
||
} else if (child.data.type === "brush") {
|
||
child.data.selected = true
|
||
usePaperSupportStore.getState().handleMask(child)
|
||
} else if (child.data.type === "point") {
|
||
child.data.selected = true
|
||
usePaperSupportStore.getState().handleMask(child)
|
||
usePaperSupportStore.getState().handleText(child as paper.Path)
|
||
}
|
||
useObjectStore
|
||
.getState()
|
||
.updateSelectedPath(
|
||
useBottomToolsStore.getState().activeImage,
|
||
"ADDSOME",
|
||
child.data?.id
|
||
)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleCancelSelect = () => {
|
||
usePaperStore
|
||
.getState()
|
||
.group!.getItems({})
|
||
.forEach((item) => {
|
||
// clear color
|
||
if (
|
||
!(
|
||
item.data.type === "mask" ||
|
||
item.data.type === "text" ||
|
||
item.data.type === "tag"
|
||
)
|
||
)
|
||
item.fillColor = item?.data?.blankColor
|
||
})
|
||
|
||
// 如果没有按下shift 当前图片SelectedPath被清空 下面从空数组开始push
|
||
useObjectStore
|
||
.getState()
|
||
.updateSelectedPath(useBottomToolsStore.getState().activeImage, "ADD")
|
||
}
|
||
|
||
panTool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
|
||
if (pressCtrl) return
|
||
const currentTime = Date.now()
|
||
const timeDelta = currentTime - lastTime
|
||
|
||
if (e.event && e.event.button === 0) {
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: false,
|
||
position: {
|
||
top: 0,
|
||
left: 0,
|
||
},
|
||
imageId: useOtherToolsStore.getState().imageId,
|
||
operationId: useOtherToolsStore.getState().operationId,
|
||
id: useOtherToolsStore.getState().id,
|
||
})
|
||
} else if (e.event && e.event.button === 1) {
|
||
// 鼠标中键操作图片移动
|
||
panMode = "item"
|
||
return
|
||
}
|
||
if (useTopToolsStore.getState().isView) {
|
||
panMode = ""
|
||
return
|
||
}
|
||
|
||
let point = usePaperStore.getState().group!.globalToLocal(e.point)
|
||
|
||
let hitResult = usePaperStore.getState().group?.hitTest(e.point, {
|
||
segments: true,
|
||
stroke: true,
|
||
curves: true,
|
||
fill: true,
|
||
guide: false,
|
||
tolerance: usePaperStore.getState().paperScope
|
||
? 8 / useTopToolsStore.getState().scale
|
||
: 0,
|
||
})
|
||
console.log("hitResult", hitResult)
|
||
let lastTagDataId = -1
|
||
if (activePath?.data.id) {
|
||
lastTagDataId = activePath.data.id
|
||
}
|
||
|
||
// 处理相同id标注对象的函数 生成对应activePath 更新rect和polygon的fillColor
|
||
const handleSameIdItems = (id: number) => {
|
||
const sameIdItems = usePaperStore
|
||
.getState()
|
||
.getItemsById(id)
|
||
.filter((item) => {
|
||
return item.data.type !== "tag"
|
||
})
|
||
const types = [
|
||
...new Set(sameIdItems.map((item) => item.data.type || "")),
|
||
]
|
||
if (types.includes("rectangle")) {
|
||
activePath = sameIdItems.filter((item) => {
|
||
if (item.data.type === "rectangle") {
|
||
item.fillColor = item.data.fillColor
|
||
return true
|
||
} else return false
|
||
})[0] as paper.Path
|
||
} else if (types.includes("polygon")) {
|
||
const items = sameIdItems.filter((item) => {
|
||
if (item.data.type === "polygon") {
|
||
if (!item.data.isHollowPolygon)
|
||
item.fillColor = item.data.fillColor
|
||
return true
|
||
} else return false
|
||
})
|
||
console.log(items)
|
||
} else if (types.includes("brush")) {
|
||
const items = sameIdItems.filter((item) => item.data.type === "brush")
|
||
if (items.length === 1) {
|
||
// 此时 items[0] 类型只可能为path
|
||
activePath = items[0] as paper.Path
|
||
} else if (items.length > 1) {
|
||
let parent: any = items.filter(
|
||
(item) => item instanceof paper.CompoundPath
|
||
)[0]
|
||
const children = parent.children
|
||
if (children.length === 1) {
|
||
activePath = children[0]
|
||
} else if (children.length > 1) {
|
||
let activeItem: any
|
||
let min = 1000000
|
||
children.forEach((child: any) => {
|
||
let nearestPoint = child.getNearestPoint(point)
|
||
let distance = point.getDistance(nearestPoint)
|
||
if (distance < min) {
|
||
min = distance
|
||
activeItem = child
|
||
}
|
||
})
|
||
activePath = activeItem
|
||
}
|
||
// 根据点击位置更新实际点击类型
|
||
let currentHitRes = activePath.hitTest(point, {
|
||
segments: true,
|
||
stroke: true,
|
||
curves: true,
|
||
fill: true,
|
||
guide: false,
|
||
tolerance: usePaperStore.getState().paperScope
|
||
? 8 / useTopToolsStore.getState().scale
|
||
: 0,
|
||
})
|
||
if (currentHitRes) {
|
||
if (currentHitRes.type === "segment") {
|
||
hitIndex = currentHitRes.segment.index
|
||
panMode = "segment"
|
||
} else if (currentHitRes.type === "stroke") {
|
||
hitIndex = currentHitRes.location.index
|
||
panMode = "stroke"
|
||
}
|
||
}
|
||
}
|
||
} else if (types.includes("point")) {
|
||
const items = sameIdItems.filter((item) => item.data.type === "point")
|
||
if (items.length === 1) {
|
||
// 点类型没有单对象多区域的情况
|
||
activePath = items[0] as paper.Path
|
||
}
|
||
}
|
||
console.log("处理相同id对象后", activePath)
|
||
if (activePath instanceof paper.CompoundPath) {
|
||
let selected = (activePath.children as paper.Path[]).find(
|
||
(child) => child.data.selected
|
||
)
|
||
selected && usePaperSupportStore.getState().handleCircles(selected)
|
||
}
|
||
}
|
||
|
||
// 当前点击结果为遮罩 处理线段和点的相关情况
|
||
if (hitResult && hitResult.item.data.type === "mask") {
|
||
panMode = "fill"
|
||
if (hitResult.item.data.id) {
|
||
handleSameIdItems(hitResult.item.data.id)
|
||
}
|
||
return
|
||
}
|
||
|
||
if (pressShift) {
|
||
} else {
|
||
// not press shift
|
||
let selectedItems = usePaperStore.getState().group!.getItems({
|
||
data: { selected: true },
|
||
})
|
||
if (selectedItems && selectedItems.length) {
|
||
selectedItems.forEach((item) => {
|
||
if (item.data.selected) {
|
||
let itemHitResult = item.hitTest(point, {
|
||
segments: true,
|
||
stroke: true,
|
||
curves: true,
|
||
fill: true,
|
||
guide: false,
|
||
tolerance: usePaperStore.getState().paperScope
|
||
? 8 / usePaperStore.getState().paperScope!.view.zoom
|
||
: 0,
|
||
})
|
||
|
||
if (!itemHitResult) {
|
||
item.data.selected = false
|
||
usePaperSupportStore.getState().clearAll()
|
||
|
||
handleCancelSelect()
|
||
}
|
||
}
|
||
// item.data.selected = false;
|
||
})
|
||
} else {
|
||
handleCancelSelect()
|
||
}
|
||
}
|
||
|
||
if (hitResult && hitResult.item.className !== "Raster") {
|
||
if (hitResult.item.data?.id) {
|
||
// 处理多边形和矩形填充色
|
||
usePaperStore
|
||
.getState()
|
||
.group!.getItems({
|
||
data: { id: hitResult.item.data?.id },
|
||
})
|
||
.forEach((item) => {
|
||
// 点击图形本身 fill color
|
||
if (
|
||
hitResult.item.data.type !== "brush" &&
|
||
hitResult.item.data.type !== "point" &&
|
||
hitResult.item.data.type !== "pathCircle" &&
|
||
hitResult.item.data.type !== "pathBuff" &&
|
||
hitResult.item.data.type !== "text" &&
|
||
item.data.type !== "tag"
|
||
) {
|
||
item.fillColor = hitResult.item.data.fillColor
|
||
}
|
||
})
|
||
|
||
if (hitResult.item.data.type === "polygon") {
|
||
if (hitResult.item instanceof paper.CompoundPath) {
|
||
;(hitResult.item.children as paper.Path[]).forEach((item) => {
|
||
const childHitResult = item.hitTest(point, {
|
||
segments: true,
|
||
stroke: true,
|
||
curves: true,
|
||
fill: true,
|
||
guide: false,
|
||
tolerance: 0,
|
||
})
|
||
|
||
if (childHitResult) {
|
||
if (childHitResult.item.data.isHollowPolygon) return
|
||
// item.fillColor = new paper.Color("transparent");
|
||
// item.strokeColor = item.strokeColor || new paper.Color("red");
|
||
// item.strokeWidth = item.strokeWidth || 1;
|
||
if (
|
||
lastPoint &&
|
||
lastPoint.x === point.x &&
|
||
lastPoint.y === point.y &&
|
||
timeDelta < 200
|
||
) {
|
||
console.log("点击位置 多边形子路径", childHitResult)
|
||
if (childHitResult.item instanceof paper.Path) {
|
||
// if (!childHitResult.item.data.selected) {
|
||
// childHitResult.item.data.selected = true;
|
||
// }
|
||
let selectedItems = usePaperStore
|
||
.getState()
|
||
.group!.getItems({
|
||
data: { selected: true },
|
||
})
|
||
selectedItems.forEach((item) => {
|
||
item.data.selected = false
|
||
})
|
||
childHitResult.item.data.selected = true
|
||
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleBufferPaths(childHitResult.item)
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleCircles(childHitResult.item)
|
||
}
|
||
}
|
||
}
|
||
})
|
||
} else if (hitResult.item instanceof paper.Path) {
|
||
// doubleclick;
|
||
if (
|
||
lastPoint &&
|
||
lastPoint.x === point.x &&
|
||
lastPoint.y === point.y &&
|
||
timeDelta < 200
|
||
) {
|
||
if (hitResult.item.data.isHollowPolygon) return
|
||
let selectedItems = usePaperStore.getState().group!.getItems({
|
||
data: { selected: true },
|
||
})
|
||
selectedItems.forEach((item) => {
|
||
item.data.selected = false
|
||
})
|
||
hitResult.item.data.selected = true
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleBufferPaths(hitResult.item)
|
||
usePaperSupportStore.getState().handleCircles(hitResult.item)
|
||
// if (!hitResult.item.data.selected) {
|
||
// hitResult.item.data.selected = true;
|
||
// usePaperSupportStore
|
||
// .getState()
|
||
// .handleBufferPaths(hitResult.item);
|
||
// usePaperSupportStore.getState().handleCircles(hitResult.item);
|
||
// }
|
||
}
|
||
}
|
||
activePath = hitResult.item as paper.Path
|
||
} else if (hitResult.item.data.type === "rectangle") {
|
||
if (hitResult.item instanceof paper.Path) {
|
||
if (!hitResult.item.data.selected) {
|
||
hitResult.item.data.selected = true
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleBufferPaths(hitResult.item)
|
||
usePaperSupportStore.getState().handleCircles(hitResult.item)
|
||
}
|
||
activePath = hitResult.item as paper.Path
|
||
}
|
||
} else if (hitResult.item.data.type === "brush") {
|
||
// hitResult.item.data.selected = true;
|
||
usePaperSupportStore.getState().handleMask(hitResult.item)
|
||
// 绘制选中的circle
|
||
if (hitResult.item instanceof paper.CompoundPath) {
|
||
;(hitResult.item.children as paper.Path[]).forEach((item) => {
|
||
const childHitResult = item.hitTest(point, {
|
||
segments: true,
|
||
stroke: true,
|
||
curves: true,
|
||
fill: true,
|
||
guide: false,
|
||
tolerance: usePaperStore.getState().paperScope
|
||
? 8 / usePaperStore.getState().paperScope!.view.zoom
|
||
: 0,
|
||
})
|
||
if (childHitResult) {
|
||
if (childHitResult.item instanceof paper.Path) {
|
||
if (!childHitResult.item.data.selected) {
|
||
childHitResult.item.data.selected = true
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleBufferPaths(childHitResult.item)
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleCircles(childHitResult.item)
|
||
}
|
||
activePath = childHitResult.item as paper.Path
|
||
}
|
||
}
|
||
})
|
||
} else if (hitResult.item instanceof paper.Path) {
|
||
if (!hitResult.item.data.selected) {
|
||
hitResult.item.data.selected = true
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleBufferPaths(hitResult.item)
|
||
usePaperSupportStore.getState().handleCircles(hitResult.item)
|
||
}
|
||
activePath = hitResult.item as paper.Path
|
||
}
|
||
} else if (hitResult.item.data.type === "point") {
|
||
// 只有点击圆才视为选中
|
||
if (hitResult.type === "segment") {
|
||
// Path 类型
|
||
if (hitResult.item instanceof paper.Path) {
|
||
if (!hitResult.item.data.selected) {
|
||
hitResult.item.data.selected = true
|
||
// 绘制遮罩
|
||
usePaperSupportStore.getState().handleMask(hitResult.item)
|
||
// 绘制点对应的数字
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleText(hitResult.item as paper.Path)
|
||
// 绘制选中边
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleBufferPaths(hitResult.item)
|
||
// 绘制选中圆
|
||
usePaperSupportStore.getState().handleCircles(hitResult.item)
|
||
}
|
||
activePath = hitResult.item as paper.Path
|
||
}
|
||
}
|
||
} else if (
|
||
hitResult.item.data.type === "pathBuff" ||
|
||
hitResult.item.data.type === "pathCircle"
|
||
) {
|
||
handleSameIdItems(hitResult.item.data.id)
|
||
}
|
||
|
||
// // 更新被选中的标注对象detail
|
||
// updateObjLatestComment(
|
||
// hitResult.item.data?.imageId,
|
||
// hitResult.item.data?.operationId,
|
||
// hitResult.item.data?.id
|
||
// );
|
||
useObjectStore
|
||
.getState()
|
||
.updateSelectedPath(
|
||
useBottomToolsStore.getState().activeImage,
|
||
"ADD",
|
||
hitResult.item.data?.id
|
||
)
|
||
|
||
// usePaperStore.getState().group?.addChild(activePath); // 放到顶层
|
||
|
||
// activePath.bringToFront();
|
||
}
|
||
} else {
|
||
// if Raster
|
||
if (e.event && e.event.button === 2) {
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: false,
|
||
position: {
|
||
top: 0,
|
||
left: 0,
|
||
},
|
||
imageId: useOtherToolsStore.getState().imageId,
|
||
operationId: useOtherToolsStore.getState().operationId,
|
||
id: useOtherToolsStore.getState().id,
|
||
})
|
||
}
|
||
}
|
||
|
||
// 禁止右键拖拽
|
||
if (e.event && e.event.button === 2) {
|
||
panMode = ""
|
||
if (
|
||
hitResult?.item?.data.id &&
|
||
["rectangle", "polygon", "brush", "point"].includes(
|
||
hitResult?.item?.data.type
|
||
)
|
||
) {
|
||
const data = hitResult?.item?.data
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) => item.category_id.toString() === data.operationId
|
||
)
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category!,
|
||
5,
|
||
5
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: data.imageId,
|
||
operationId: data.operationId,
|
||
id: data.id,
|
||
})
|
||
}
|
||
} else if (hitResult && hitResult.type === "fill") {
|
||
if (
|
||
hitResult &&
|
||
hitResult.item?.data?.type === "pathCircle" &&
|
||
activePath?.data?.type === "rectangle"
|
||
) {
|
||
// 放大后 点击（只考虑了rect） 1204todo
|
||
hitIndex = hitResult.item.data.index
|
||
panMode = "segment"
|
||
} else {
|
||
panMode = "fill"
|
||
}
|
||
} else if (hitResult && hitResult.type === "stroke") {
|
||
// 镂空区域不可添加点
|
||
if (activePath && activePath.data.isHollowPolygon) return
|
||
panMode = "stroke"
|
||
// hitIndex = hitResult.location.index;
|
||
|
||
if (hitResult.item?.data?.type === "pathBuff") {
|
||
hitIndex = hitResult.item.data.index
|
||
} else {
|
||
hitIndex = hitResult.location.index
|
||
return
|
||
}
|
||
|
||
//点击多边形边，添加一个 端点
|
||
if (
|
||
activePath?.data?.type === "polygon" ||
|
||
activePath?.data?.type === "brush" ||
|
||
activePath?.data?.type === "point"
|
||
) {
|
||
// doubleclick
|
||
if (
|
||
lastPoint &&
|
||
lastPoint.x === point.x &&
|
||
lastPoint.y === point.y &&
|
||
timeDelta < 200
|
||
) {
|
||
if (activePath instanceof paper.CompoundPath) {
|
||
;(activePath.children as paper.Path[]).forEach((item) => {
|
||
const childHitResult = item.hitTest(point, {
|
||
segments: true,
|
||
stroke: true,
|
||
curves: true,
|
||
fill: true,
|
||
guide: false,
|
||
tolerance: usePaperStore.getState().paperScope
|
||
? 8 / usePaperStore.getState().paperScope!.view.zoom
|
||
: 0,
|
||
})
|
||
if (childHitResult) {
|
||
if (childHitResult.location.point) {
|
||
item.insert(hitIndex + 1, childHitResult.location.point)
|
||
usePaperSupportStore.getState().handleBufferPaths(item)
|
||
usePaperSupportStore.getState().handleCircles(item)
|
||
isChanged = true
|
||
panMode = "stroke"
|
||
hitIndex = hitIndex + 1
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
activePath.insert(hitIndex + 1, hitResult.location.point)
|
||
activePath?.data?.type === "point" &&
|
||
usePaperStore
|
||
.getState()
|
||
.getPointCircle(
|
||
hitResult.location.point,
|
||
hitIndex + 1,
|
||
activePath.data.id,
|
||
activePath.data.blankColor
|
||
)
|
||
activePath.bringToFront()
|
||
usePaperSupportStore.getState().handleBufferPaths(activePath)
|
||
usePaperSupportStore.getState().handleCircles(activePath)
|
||
isChanged = true
|
||
panMode = "stroke"
|
||
hitIndex = hitIndex + 1
|
||
}
|
||
if (activePath?.data?.type === "brush") {
|
||
usePaperSupportStore.getState().handleMask(hitResult.item)
|
||
}
|
||
if (activePath?.data?.type === "point") {
|
||
// 绘制点对应的数字
|
||
usePaperSupportStore.getState().handleText(activePath)
|
||
let circles = usePaperStore.getState().group!.getItems({
|
||
data: {
|
||
id: activePath.data.id,
|
||
type: "circle",
|
||
},
|
||
}) as paper.Path[]
|
||
|
||
activePath.segments.forEach((segment, index) => {
|
||
let findIndex = circles.findIndex((circle) => {
|
||
return circle.contains(segment.point)
|
||
})
|
||
circles[index].data = Object.assign({}, circles[index]?.data, {
|
||
text: findIndex + 1,
|
||
})
|
||
})
|
||
usePaperSupportStore.getState().handleBufferPaths(activePath)
|
||
usePaperSupportStore.getState().handleCircles(activePath)
|
||
}
|
||
}
|
||
}
|
||
} else if (hitResult && hitResult.type === "segment") {
|
||
// 镂空区域不可删除点
|
||
if (activePath && activePath.data.isHollowPolygon) return
|
||
panMode = "segment"
|
||
|
||
if (hitResult.item?.data?.type === "pathCircle") {
|
||
hitIndex = hitResult.item.data.index
|
||
} else {
|
||
hitIndex = hitResult.segment.index
|
||
}
|
||
|
||
// shift点击 删除端点
|
||
// if (e.event.shiftKey) {
|
||
// activePath.removeSegment(hitIndex);
|
||
// panMode = "";
|
||
// }
|
||
if (
|
||
activePath?.data?.type === "polygon" ||
|
||
activePath?.data?.type === "brush" ||
|
||
activePath?.data?.type === "point"
|
||
) {
|
||
if (
|
||
lastPoint &&
|
||
lastPoint.x === point.x &&
|
||
lastPoint.y === point.y &&
|
||
timeDelta < 200
|
||
) {
|
||
if (activePath instanceof paper.CompoundPath) {
|
||
;(activePath.children as paper.Path[]).forEach((item) => {
|
||
const childHitResult = item.hitTest(point, {
|
||
segments: true,
|
||
stroke: true,
|
||
curves: true,
|
||
fill: true,
|
||
guide: false,
|
||
tolerance: usePaperStore.getState().paperScope
|
||
? 8 / usePaperStore.getState().paperScope!.view.zoom
|
||
: 0,
|
||
})
|
||
if (childHitResult) {
|
||
let checkLength = 3
|
||
if (item?.data?.type === "brush") checkLength = 2
|
||
if (item?.data?.type === "point") checkLength = 1
|
||
if (item.segments && item.segments.length <= checkLength)
|
||
return
|
||
;(childHitResult.item as paper.Path).removeSegment(hitIndex)
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleBufferPaths(childHitResult.item as paper.Path)
|
||
usePaperSupportStore
|
||
.getState()
|
||
.handleCircles(childHitResult.item as paper.Path)
|
||
|
||
isChanged = true
|
||
panMode = "segment"
|
||
}
|
||
})
|
||
} else {
|
||
let checkLength = 3
|
||
if (activePath?.data?.type === "brush") checkLength = 2
|
||
if (activePath?.data?.type === "point") checkLength = 1
|
||
if (
|
||
activePath.segments &&
|
||
activePath.segments.length <= checkLength
|
||
)
|
||
return
|
||
|
||
activePath.removeSegment(hitIndex)
|
||
usePaperSupportStore.getState().handleBufferPaths(activePath)
|
||
usePaperSupportStore.getState().handleCircles(activePath)
|
||
isChanged = true
|
||
panMode = "segment"
|
||
}
|
||
if (activePath?.data?.type === "brush") {
|
||
usePaperSupportStore.getState().handleMask(hitResult.item)
|
||
}
|
||
if (activePath?.data?.type === "point") {
|
||
let paths = usePaperStore.getState().group!.getItems({
|
||
data: {
|
||
id: activePath.data.id,
|
||
// text: activePath.segments.length - hitIndex + 1,
|
||
type: "circle",
|
||
},
|
||
}) as paper.Path[]
|
||
|
||
// paths = paths.filter((item) => {
|
||
// if (item.data.text === hitIndex + 1) item.remove();
|
||
// return item.data.text !== hitIndex + 1;
|
||
// });
|
||
paths = paths.filter((circle) => {
|
||
let findIndex = activePath.segments.findIndex((segment) => {
|
||
return circle.contains(segment.point)
|
||
})
|
||
if (findIndex === -1) {
|
||
circle.remove()
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
})
|
||
|
||
// 1. 对数组按照 text 属性进行排序
|
||
let sortedArr = paths
|
||
.slice()
|
||
.sort((a, b) => a.data.text - b.data.text)
|
||
|
||
// 2. 重新赋值 text 属性为从 1 开始的连续自然数
|
||
sortedArr.forEach((item, index) => {
|
||
item.data.text = index + 1
|
||
})
|
||
|
||
// paths.forEach((child) => {
|
||
// if (
|
||
// child.data.text ===
|
||
// activePath.segments.length - hitIndex + 1
|
||
// ) {
|
||
// // 删除 circle
|
||
// child.remove();
|
||
// } else if (
|
||
// child.data.text >
|
||
// activePath.segments.length - hitIndex + 1
|
||
// ) {
|
||
// child.data.text = child.data.text - 1;
|
||
// }
|
||
// });
|
||
// usePaperSupportStore.getState().handleMask(hitResult.item);
|
||
// usePaperSupportStore
|
||
// .getState()
|
||
// .handleText(hitResult.item as paper.Path);
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
panMode = ""
|
||
}
|
||
|
||
// 当前选中路径 tags
|
||
const tags = usePaperStore.getState().group!.getItems({
|
||
data: {
|
||
id: activePath?.data?.id,
|
||
type: "tag",
|
||
},
|
||
})
|
||
// 上一选中路径 tags
|
||
const lastTags = usePaperStore.getState().group!.getItems({
|
||
data: {
|
||
id: lastTagDataId,
|
||
type: "tag",
|
||
},
|
||
})
|
||
// 标识位为true时：选中路径隐藏tags; 没选中显示tags
|
||
const configs = useTopToolsStore.getState().showTagsConfigs
|
||
if (useTopToolsStore.getState().showTags)
|
||
if (panMode) {
|
||
lastTags.forEach((tag) => {
|
||
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
|
||
})
|
||
tags.forEach((tag) => {
|
||
tag.visible = false
|
||
})
|
||
} else {
|
||
tags.forEach((tag) => {
|
||
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
|
||
})
|
||
}
|
||
|
||
console.log("鼠标按下 选中路径", activePath, "当前模式", panMode)
|
||
|
||
lastPoint = point
|
||
lastTime = Date.now()
|
||
}
|
||
|
||
panTool.onMouseDrag = (e: {
|
||
event: MouseEvent
|
||
point: paper.Point
|
||
downPoint: paper.Point
|
||
delta: paper.Point
|
||
}) => {
|
||
// 优先判断移动图片
|
||
if (panMode === "item") {
|
||
usePaperStore.getState().group!.position = usePaperStore
|
||
.getState()
|
||
.group?.position.add(e.delta)!
|
||
}
|
||
|
||
if (useTopToolsStore.getState().isView) return
|
||
|
||
if (pressCtrl) {
|
||
const delta = e.point.subtract(e.downPoint)
|
||
if (delta.length > 10 && e.event.button === 0) {
|
||
let temp = renderRectangle(usePaperStore.getState().group!, {})
|
||
let point = temp.globalToLocal(e.point)
|
||
let downPoint = temp.globalToLocal(e.downPoint)
|
||
|
||
temp.remove()
|
||
rect = usePaperStore.getState().addRectangle(
|
||
renderRectangle,
|
||
{
|
||
from: downPoint,
|
||
to: point,
|
||
// option
|
||
strokeColor: "#FFF",
|
||
strokeWidth: 2,
|
||
fillColor: undefined,
|
||
},
|
||
{
|
||
imageId: useBottomToolsStore.getState().activeImage,
|
||
operationId: useTopToolsStore.getState().activeOperation,
|
||
id:
|
||
useRightToolsStore
|
||
.getState()
|
||
.pathIds.reduce((a, b) => Math.max(a, b), 0) + 1,
|
||
}
|
||
)
|
||
rect.removeOnDrag()
|
||
}
|
||
} else {
|
||
let point: paper.Point | undefined = undefined
|
||
if (activePath) {
|
||
point = usePaperStore.getState().group!.globalToLocal(e.point)
|
||
}
|
||
|
||
let movePath = (path: paper.Path) => {
|
||
const currentGroupScaling = usePaperStore.getState().group!.scaling
|
||
const delta = {
|
||
x: e.delta.x / currentGroupScaling.x,
|
||
y: e.delta.y / currentGroupScaling.y,
|
||
}
|
||
|
||
if (panMode === "fill") {
|
||
if (path.data.type === "brush") {
|
||
path.position = path.position.add(delta)
|
||
usePaperSupportStore
|
||
.getState()
|
||
.selectedCircles.forEach((item) => {
|
||
item.position = item.position.add(delta)
|
||
})
|
||
usePaperSupportStore.getState().handleMask(path)
|
||
} else if (path.data.type === "point") {
|
||
path.position = path.position.add(delta)
|
||
usePaperSupportStore.getState().handleMask(path)
|
||
usePaperSupportStore.getState().handleText(path)
|
||
let circles = usePaperStore.getState().group!.getItems({
|
||
data: {
|
||
id: path.data.id,
|
||
type: "circle",
|
||
},
|
||
}) as paper.Path[]
|
||
if (circles && circles.length) {
|
||
circles.forEach((circle) => {
|
||
circle.position = circle.position.add(delta)
|
||
})
|
||
}
|
||
usePaperSupportStore
|
||
.getState()
|
||
.selectedCircles.forEach((circle) => {
|
||
circle.position = circle.position.add(delta)
|
||
})
|
||
} else {
|
||
path.position = path.position.add(delta)
|
||
// 镂空区域移动不影响选中点移动
|
||
if (!path.data.isHollowPolygon) {
|
||
usePaperSupportStore
|
||
.getState()
|
||
.selectedCircles.forEach((item) => {
|
||
item.position = item.position.add(delta)
|
||
})
|
||
}
|
||
usePaperSupportStore.getState().handleBufferPaths(null)
|
||
}
|
||
} else if (panMode === "stroke") {
|
||
if (path.data.type === "rectangle") {
|
||
usePaperSupportStore.getState().handleBufferPaths(null)
|
||
let axis: "x" | "y" = hitIndex % 2 ? "y" : "x"
|
||
path.segments[hitIndex].point[axis] = point![axis]
|
||
path.segments[hitIndex].next.point[axis] = point![axis]
|
||
usePaperSupportStore.getState().selectedCircles[
|
||
hitIndex
|
||
]!.position[axis] = point![axis]
|
||
let next =
|
||
hitIndex + 1 ===
|
||
usePaperSupportStore.getState().selectedCircles.length
|
||
? 0
|
||
: hitIndex + 1
|
||
usePaperSupportStore.getState().selectedCircles[next].position[
|
||
axis
|
||
] = point![axis]
|
||
} else if (path.data.type === "polygon") {
|
||
} else if (path.data.type === "brush") {
|
||
// path.position = path.position.add(e.delta);
|
||
// handleMask(path);
|
||
}
|
||
} else if (panMode === "segment") {
|
||
if (path.data.type === "rectangle") {
|
||
usePaperSupportStore.getState().handleBufferPaths(null)
|
||
path.segments[hitIndex].point.x = point!.x
|
||
path.segments[hitIndex].point.y = point!.y
|
||
path.segments[hitIndex].next.point[hitIndex % 2 ? "y" : "x"] =
|
||
point![hitIndex % 2 ? "y" : "x"]
|
||
path.segments[hitIndex].previous.point[hitIndex % 2 ? "x" : "y"] =
|
||
point![hitIndex % 2 ? "x" : "y"]
|
||
usePaperSupportStore.getState().selectedCircles[
|
||
hitIndex
|
||
]!.position.x = point!.x
|
||
usePaperSupportStore.getState().selectedCircles[
|
||
hitIndex
|
||
]!.position.y = point!.y
|
||
let previous =
|
||
hitIndex + 1 ===
|
||
usePaperSupportStore.getState().selectedCircles.length
|
||
? 0
|
||
: hitIndex + 1
|
||
let next =
|
||
hitIndex - 1 < 0
|
||
? usePaperSupportStore.getState().selectedCircles.length - 1
|
||
: hitIndex - 1
|
||
usePaperSupportStore.getState().selectedCircles[
|
||
previous
|
||
].position[hitIndex % 2 ? "y" : "x"] =
|
||
point![hitIndex % 2 ? "y" : "x"]
|
||
usePaperSupportStore.getState().selectedCircles[next].position[
|
||
hitIndex % 2 ? "x" : "y"
|
||
] = point![hitIndex % 2 ? "x" : "y"]
|
||
} else if (path.data.type === "polygon") {
|
||
if (path.data.isHollowPolygon) return
|
||
|
||
usePaperSupportStore.getState().clearBufferPaths()
|
||
path.segments[hitIndex].point.x = point!.x
|
||
path.segments[hitIndex].point.y = point!.y
|
||
|
||
usePaperSupportStore.getState().selectedCircles[
|
||
hitIndex
|
||
]!.position.x = point!.x
|
||
usePaperSupportStore.getState().selectedCircles[
|
||
hitIndex
|
||
]!.position.y = point!.y
|
||
} else if (path.data.type === "brush") {
|
||
path.segments[hitIndex].point.x = point!.x
|
||
path.segments[hitIndex].point.y = point!.y
|
||
usePaperSupportStore.getState().selectedCircles[
|
||
hitIndex
|
||
]!.position.x = point!.x
|
||
usePaperSupportStore.getState().selectedCircles[
|
||
hitIndex
|
||
]!.position.y = point!.y
|
||
usePaperSupportStore.getState().handleMask(path)
|
||
} else if (path.data.type === "point") {
|
||
let circles = usePaperStore.getState().group!.getItems({
|
||
data: {
|
||
id: path.data.id,
|
||
type: "circle",
|
||
},
|
||
}) as paper.Path[]
|
||
|
||
// let index = path.segments.length - hitIndex - 1
|
||
// let index = hitIndex;
|
||
|
||
// 移动点
|
||
if (circles && circles.length) {
|
||
// let circle = circles.find(
|
||
// (item) => item.data.text === index + 1
|
||
// );
|
||
|
||
let circle = circles.find((circle) => {
|
||
return circle.contains(path.segments[hitIndex].point)
|
||
})
|
||
circle!.position.x = point!.x
|
||
circle!.position.y = point!.y
|
||
}
|
||
// 移动路径
|
||
path.segments[hitIndex].point.x = point!.x
|
||
path.segments[hitIndex].point.y = point!.y
|
||
// 移动选中点
|
||
usePaperSupportStore.getState().selectedCircles[
|
||
hitIndex
|
||
]!.position.x = point!.x
|
||
usePaperSupportStore.getState().selectedCircles[
|
||
hitIndex
|
||
]!.position.y = point!.y
|
||
|
||
// 移动蒙版
|
||
usePaperSupportStore.getState().handleMask(path)
|
||
usePaperSupportStore.getState().handleText(path as paper.Path)
|
||
}
|
||
}
|
||
}
|
||
// 如果 activePath 被选中了 即可以被移动修改
|
||
if (activePath?.data.selected) {
|
||
movePath(activePath)
|
||
isChanged = true
|
||
} else {
|
||
// 没被选中可能是children被选中
|
||
if (activePath instanceof paper.CompoundPath) {
|
||
// let selectedItems = activePath.children.filter(
|
||
// (item) => item.data.selected
|
||
// );
|
||
// console.log("selectedItems", selectedItems);
|
||
|
||
const selectedItem: paper.Path = (
|
||
activePath.children as paper.Path[]
|
||
).filter((item) => item.data.selected)[0]
|
||
;(activePath.children as paper.Path[]).forEach((item) => {
|
||
if (item && item.data.selected) {
|
||
movePath(item as paper.Path)
|
||
isChanged = true
|
||
} else if (
|
||
item.data.isHollowPolygon &&
|
||
selectedItem &&
|
||
selectedItem.bounds.contains(item.bounds)
|
||
) {
|
||
// 当前被选中路径的镂空区域需要一起移动
|
||
movePath(item as paper.Path)
|
||
isChanged = true
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 改变对象不能用 activeImage activeOperation (因为图形只在对应图片渲染，所以activeImage是一样的)
|
||
panTool.onMouseUp = (_e: paper.ToolEvent) => {
|
||
if (useTopToolsStore.getState().isView) return
|
||
|
||
let newDrawPath: paper.Path | paper.CompoundPath | null = null
|
||
|
||
if (pressCtrl) {
|
||
if (rect) handleCtrl(rect)
|
||
rect?.remove()
|
||
return
|
||
}
|
||
|
||
const handleBrushIntersectRaster = (currentPath: paper.Path) => {
|
||
const currentSegments = currentPath.segments
|
||
if (!currentSegments || (currentSegments && !currentSegments.length))
|
||
return
|
||
// 设置首尾连线 判断是否跟自身当前有交点
|
||
let flag: boolean
|
||
if (currentSegments.length === 2) flag = false
|
||
else if (currentSegments.length > 2) {
|
||
const line = new paper.Path([
|
||
currentSegments[0],
|
||
currentSegments[currentSegments.length - 1],
|
||
])
|
||
const lineIntersections = line.getIntersections(currentPath)
|
||
flag = lineIntersections.length > 1 ? false : true
|
||
} else {
|
||
flag = false
|
||
}
|
||
let intersections = currentPath.getIntersections(
|
||
usePaperStore.getState().rasterPath!
|
||
)
|
||
let validIntersections = intersections.filter((intersection) => {
|
||
// 检查交点是否在两个路径的可见部分
|
||
return (
|
||
currentPath.contains(intersection.point) &&
|
||
usePaperStore.getState().rasterPath!.contains(intersection.point)
|
||
)
|
||
})
|
||
|
||
// intersectionPath as paper.CompoundPath | paper.Path | null
|
||
let intersectionPath: any = currentPath.intersect(
|
||
usePaperStore.getState().rasterPath!,
|
||
{
|
||
insert: false,
|
||
trace: flag,
|
||
}
|
||
)
|
||
|
||
// 没有 validIntersections 不进行操作
|
||
if (validIntersections.length) {
|
||
// 处理相交部分
|
||
if (intersectionPath instanceof paper.CompoundPath) {
|
||
// intersectionPath是CompoundPath
|
||
let new_segments: any[] = []
|
||
if (
|
||
intersectionPath.children &&
|
||
!intersectionPath.children.length
|
||
) {
|
||
// unconfirm activePath被修改了
|
||
;(activePath.children as paper.Path[]).forEach(
|
||
(activeChild, index) => {
|
||
if (index !== 0) {
|
||
new_segments.push(...activeChild.segments)
|
||
}
|
||
}
|
||
)
|
||
activePath.removeChildren(1)
|
||
currentPath.segments = new_segments
|
||
} else {
|
||
;(intersectionPath.children as paper.Path[]).forEach((child) => {
|
||
if (child.segments && child.segments.length) {
|
||
new_segments.push(...child.segments)
|
||
}
|
||
})
|
||
currentPath.segments = new_segments
|
||
}
|
||
} else if (
|
||
intersectionPath.segments &&
|
||
intersectionPath.segments.length
|
||
) {
|
||
currentPath.segments = intersectionPath.segments
|
||
}
|
||
|
||
// let oldCompoundPolygon = compoundPolygon;
|
||
// compoundPolygon = oldCompoundPolygon?.intersect(
|
||
// usePaperStore.getState().rasterPath!
|
||
// ) as paper.Path;
|
||
// compoundPolygon.closed = false;
|
||
// oldCompoundPolygon?.remove();
|
||
// usePaperSupportStore.getState().handleMask(currentPath);
|
||
} else {
|
||
// path整体移动到图片外 清空path的点
|
||
if (
|
||
!usePaperStore
|
||
.getState()
|
||
.rasterPath!.bounds.contains(currentPath.bounds)
|
||
) {
|
||
currentPath.segments = []
|
||
}
|
||
}
|
||
intersectionPath.remove()
|
||
intersectionPath = null
|
||
usePaperSupportStore.getState().handleMask(currentPath)
|
||
usePaperSupportStore.getState().handleBufferPaths(currentPath)
|
||
usePaperSupportStore.getState().handleCircles(currentPath)
|
||
}
|
||
|
||
const handlePolygonIntersectRaster = (path: paper.Path) => {
|
||
let intersections = path.getIntersections(
|
||
usePaperStore.getState().rasterPath!
|
||
)
|
||
let validIntersections = intersections.filter((intersection) => {
|
||
// 检查交点是否在两个路径的可见部分
|
||
return (
|
||
path.contains(intersection.point) &&
|
||
usePaperStore.getState().rasterPath!.contains(intersection.point)
|
||
)
|
||
})
|
||
|
||
if (validIntersections.length) {
|
||
let oldPolygon: any = path
|
||
console.log("处理前", path)
|
||
newDrawPath = oldPolygon.intersect(
|
||
usePaperStore.getState().rasterPath!
|
||
) as any
|
||
console.log("after", newDrawPath)
|
||
// if (!newDrawPath?.clockwise) newDrawPath?.reverse();
|
||
if (newDrawPath instanceof paper.CompoundPath)
|
||
(newDrawPath.children as paper.Path[]).forEach((child) => {
|
||
if (
|
||
!child.data ||
|
||
(child.data && !Object.keys(child.data).length)
|
||
)
|
||
child.data = safeClone(newDrawPath?.data || {})
|
||
})
|
||
oldPolygon.remove()
|
||
oldPolygon = null
|
||
} else {
|
||
// path整体移动到图片外 清空path的点
|
||
if (
|
||
!usePaperStore
|
||
.getState()
|
||
.rasterPath!.bounds.contains(path.bounds) &&
|
||
newDrawPath instanceof paper.Path
|
||
) {
|
||
newDrawPath.segments = []
|
||
}
|
||
}
|
||
usePaperSupportStore.getState().handleBufferPaths(newDrawPath)
|
||
usePaperSupportStore.getState().handleCircles(newDrawPath)
|
||
}
|
||
|
||
const handlePointIntersectRaster = (path: paper.Path) => {
|
||
let circles = usePaperStore.getState().group!.getItems({
|
||
data: {
|
||
id: path.data.id,
|
||
type: "circle",
|
||
},
|
||
}) as paper.Path[]
|
||
// 去除超出图片边界的部分
|
||
let newCircles = circles.filter((circle) => {
|
||
if (
|
||
!usePaperStore
|
||
.getState()
|
||
.rasterPath!.bounds.contains(circle.bounds.center)
|
||
) {
|
||
circle.remove()
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
})
|
||
|
||
// 1. 对数组按照 text 属性进行排序
|
||
let sortedArr = newCircles
|
||
.slice()
|
||
.sort((a, b) => a.data.text - b.data.text)
|
||
|
||
// 2. 重新赋值 text 属性为从 1 开始的连续自然数
|
||
sortedArr.forEach((item, index) => {
|
||
item.data.text = index + 1
|
||
})
|
||
|
||
// newCircles.forEach((circle, circleIndex) => {
|
||
// // 重新设置显示数字
|
||
// circle.data.text = circleIndex + 1;
|
||
// });
|
||
path.segments = path.segments.filter((segment) => {
|
||
return usePaperStore
|
||
.getState()
|
||
.rasterPath!.bounds.contains(segment.point)
|
||
})
|
||
// 去除超出图片边界的部分 end
|
||
usePaperSupportStore.getState().handleMask(path)
|
||
usePaperSupportStore.getState().handleBufferPaths(path)
|
||
usePaperSupportStore.getState().handleCircles(path)
|
||
usePaperSupportStore.getState().handleText(path)
|
||
}
|
||
|
||
const handlePolygonIntersect = () => {
|
||
if (panMode !== "stroke" && newDrawPath) {
|
||
const handleCurrentPathSub = (eachPath: paper.Path) => {
|
||
if (newDrawPath) {
|
||
let oldPolygon: any = newDrawPath
|
||
let oldParent: any = newDrawPath.parent
|
||
|
||
newDrawPath = oldPolygon.subtract(eachPath)
|
||
|
||
// if (!newDrawPath?.clockwise) newDrawPath?.reverse();
|
||
if (newDrawPath instanceof paper.CompoundPath) {
|
||
;(newDrawPath.children as paper.Path[]).forEach((child) => {
|
||
child.data = safeClone(
|
||
Object.assign({}, newDrawPath?.data || {}, {
|
||
isHollowPolygon: !child.clockwise,
|
||
})
|
||
)
|
||
})
|
||
if (oldParent instanceof paper.CompoundPath) {
|
||
;(oldParent.children as paper.Path[]).forEach((child) => {
|
||
child.data = safeClone(
|
||
Object.assign({}, newDrawPath?.data || {}, {
|
||
isHollowPolygon: !child.clockwise,
|
||
})
|
||
)
|
||
})
|
||
}
|
||
}
|
||
|
||
oldPolygon.remove()
|
||
oldPolygon = null
|
||
}
|
||
}
|
||
|
||
usePaperStore.getState().group?.children!.forEach((item: any) => {
|
||
if (
|
||
!item.data.id ||
|
||
item.data.type !== "polygon" ||
|
||
!item.visible ||
|
||
item.data.id === newDrawPath?.data.id
|
||
)
|
||
return
|
||
if (item instanceof paper.Path) {
|
||
if (item.segments.length) {
|
||
handleCurrentPathSub(item)
|
||
}
|
||
} else if (item instanceof paper.CompoundPath) {
|
||
;(item.children as paper.Path[]).forEach((child) => {
|
||
if (
|
||
child?.segments?.length &&
|
||
child.data.id !== newDrawPath?.data.id
|
||
) {
|
||
handleCurrentPathSub(child)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
const handlePolygonUnite = () => {
|
||
const handleCurrentPathUnite = (eachPath: paper.Path) => {
|
||
if (!newDrawPath) return
|
||
let intersectionPath = newDrawPath.intersect(eachPath, {
|
||
insert: false,
|
||
}) as paper.Path
|
||
if (intersectionPath.segments?.length) {
|
||
let oldPolygon: any = newDrawPath
|
||
newDrawPath = oldPolygon.unite(eachPath) as any
|
||
// if (!newDrawPath?.clockwise) newDrawPath?.reverse();
|
||
if (newDrawPath instanceof paper.CompoundPath)
|
||
(newDrawPath.children as paper.Path[]).forEach((child) => {
|
||
child.data = safeClone(newDrawPath?.data || {})
|
||
})
|
||
oldPolygon.remove()
|
||
oldPolygon = null
|
||
}
|
||
}
|
||
usePaperStore.getState().group?.children!.forEach((item: any) => {
|
||
if (!item.data.id || item.data.type !== "polygon" || !item.visible)
|
||
return
|
||
if (item instanceof paper.CompoundPath) {
|
||
;(item.children as paper.Path[]).forEach((child) => {
|
||
handleCurrentPathUnite(child)
|
||
})
|
||
} else if (item instanceof paper.Path) {
|
||
handleCurrentPathUnite(item)
|
||
}
|
||
})
|
||
}
|
||
|
||
const getNewDetail = (detailPathData: {
|
||
imageId: string
|
||
operationId: any
|
||
id: number
|
||
}) => {
|
||
const currentDetail = useLabelStore
|
||
.getState()
|
||
.getLabelDetailDataByKeys(
|
||
detailPathData.imageId,
|
||
detailPathData.operationId,
|
||
detailPathData.id
|
||
)
|
||
const newDetail = currentDetail
|
||
? {
|
||
...currentDetail,
|
||
first_modified_timestamp:
|
||
currentDetail.first_modified_timestamp || dayjs().unix(),
|
||
first_modified_uid: currentDetail.first_modified_uid || user_id,
|
||
last_modified_timestamp: dayjs().unix(),
|
||
last_modified_uid: user_id,
|
||
}
|
||
: {
|
||
...initialDetail,
|
||
create_timestamp: dayjs().unix(),
|
||
category_id: Number(detailPathData.operationId),
|
||
}
|
||
return newDetail
|
||
}
|
||
|
||
// 保存矩形类型数据结果
|
||
const handleSaveRect = (rectPath: any) => {
|
||
// 去除超出图片边界的部分
|
||
handleRectangleIntersectRaster(rectPath)
|
||
usePaperSupportStore.getState().handleBufferPaths(rectPath)
|
||
usePaperSupportStore.getState().handleCircles(rectPath)
|
||
const newDetail = getNewDetail(rectPath.data)
|
||
let pathData = JSON.parse(rectPath.exportJSON({ precision: 20 }))
|
||
|
||
if (rectPath.data.id && rectPath.segments?.length) {
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(rectPath.data.imageId, rectPath.data.operationId, [
|
||
rectPath.data.id,
|
||
[pathData[1].segments],
|
||
newDetail,
|
||
[],
|
||
])
|
||
} else {
|
||
useLabelStore
|
||
.getState()
|
||
.deleteOperation(
|
||
rectPath.data.imageId,
|
||
rectPath.data.operationId,
|
||
rectPath.data.id
|
||
)
|
||
}
|
||
|
||
forceUpdate()
|
||
}
|
||
|
||
// 保存多边形类型数据结果
|
||
const handleSavePolygon = (polygonPath: any) => {
|
||
newDrawPath = new paper.Path()
|
||
let parent: any = usePaperStore.getState().group
|
||
let hollowPaths: Array<{ path: paper.Path; index: number }> = []
|
||
let area = 0
|
||
if (polygonPath instanceof paper.CompoundPath) {
|
||
let oldSelected = (polygonPath.children as paper.Path[]).find(
|
||
(item) => item.data.selected
|
||
)!
|
||
parent = polygonPath
|
||
newDrawPath.set({
|
||
segments: oldSelected.segments,
|
||
data: oldSelected.data,
|
||
strokeColor: oldSelected.strokeColor,
|
||
strokeWidth: oldSelected.strokeWidth,
|
||
fillColor: oldSelected.fillColor,
|
||
closed: oldSelected.closed,
|
||
parent: usePaperStore.getState().group,
|
||
})
|
||
oldSelected.remove()
|
||
// newDrawPath = (polygonPath.children as paper.Path[]).find(
|
||
// (item) => item.data.selected
|
||
// )!;
|
||
area = (newDrawPath as paper.Path).area
|
||
// 设置镂空数组
|
||
polygonPath.children.forEach((child: any, index: number) => {
|
||
if (
|
||
child.data.isHollowPolygon &&
|
||
newDrawPath?.bounds.contains(child.bounds)
|
||
) {
|
||
hollowPaths.push({ path: child, index })
|
||
}
|
||
})
|
||
} else {
|
||
newDrawPath = polygonPath
|
||
area = (newDrawPath as paper.Path).area
|
||
}
|
||
console.log("保存当前被选中路径的结果", newDrawPath)
|
||
|
||
// 边界裁剪
|
||
handlePolygonIntersectRaster(newDrawPath as any)
|
||
|
||
usePaperSupportStore.getState().handleCircles(newDrawPath)
|
||
console.log("边界裁剪之后", newDrawPath)
|
||
|
||
if (useTopToolsStore.getState().drawOption === "intersect") {
|
||
// 裁剪
|
||
handlePolygonIntersect()
|
||
usePaperSupportStore.getState().handleCircles(newDrawPath)
|
||
} else if (useTopToolsStore.getState().drawOption === "unite") {
|
||
// 融合
|
||
handlePolygonUnite()
|
||
usePaperSupportStore.getState().handleCircles(newDrawPath)
|
||
}
|
||
|
||
// 路径已发生改变则清空之前存的镂空区域，后续无需处理
|
||
// if (
|
||
// newDrawPath instanceof paper.CompoundPath ||
|
||
// (newDrawPath instanceof paper.Path && newDrawPath.area !== area)
|
||
// ) {
|
||
// hollowPaths.forEach((item) => {
|
||
// item.path?.remove();
|
||
// });
|
||
// hollowPaths = [];
|
||
// }
|
||
|
||
console.log("裁剪之后", newDrawPath)
|
||
|
||
if (
|
||
newDrawPath instanceof paper.CompoundPath ||
|
||
(newDrawPath instanceof paper.Path && newDrawPath.area !== area)
|
||
) {
|
||
hollowPaths.forEach((item) => {
|
||
item.path?.remove()
|
||
})
|
||
hollowPaths = []
|
||
} else {
|
||
hollowPaths = hollowPaths.filter((item) => {
|
||
let subtractPath = newDrawPath!.subtract(item.path!, {
|
||
insert: false,
|
||
})
|
||
if (subtractPath instanceof paper.Path) {
|
||
item.path?.remove()
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
})
|
||
}
|
||
|
||
// 边界裁剪
|
||
// handlePolygonIntersectRaster(newDrawPath as any);
|
||
|
||
// if (
|
||
// newDrawPath instanceof paper.CompoundPath ||
|
||
// (newDrawPath instanceof paper.Path && newDrawPath.area !== area)
|
||
// ) {
|
||
// hollowPaths.forEach((item) => {
|
||
// item.path?.remove();
|
||
// });
|
||
// hollowPaths = [];
|
||
// }
|
||
// usePaperSupportStore.getState().handleCircles(newDrawPath);
|
||
// console.log("边界裁剪之后", newDrawPath);
|
||
|
||
if (newDrawPath instanceof paper.CompoundPath) {
|
||
let selectedItems = usePaperStore.getState().group!.getItems({
|
||
data: { selected: true },
|
||
})
|
||
selectedItems.forEach((item) => {
|
||
item.data.selected = false
|
||
})
|
||
handleCancelSelect()
|
||
}
|
||
|
||
// 存在镂空区域时，对镂空区域进行边界裁剪
|
||
if (hollowPaths.length) {
|
||
hollowPaths.forEach((hollowPath) => {
|
||
if (
|
||
!usePaperStore
|
||
.getState()
|
||
.rasterPath!.bounds.contains(hollowPath.path.bounds)
|
||
) {
|
||
polygonPath.removeChildren(hollowPath.index, hollowPath.index + 1)
|
||
return
|
||
}
|
||
// hollowPath.path.clockwise = false;
|
||
hollowPath.path.data = safeClone(
|
||
Object.assign({}, hollowPath.path?.data || {}, {
|
||
isHollowPolygon: true,
|
||
})
|
||
)
|
||
// let oldPolygon: any = hollowPath.path;
|
||
// let finnalPath = oldPolygon.intersect(
|
||
// usePaperStore.getState().rasterPath!
|
||
// ) as any;
|
||
// console.log("finnalPath", finnalPath);
|
||
|
||
// // if (hollowPath.clockwise) hollowPath.reverse();
|
||
// if (finnalPath instanceof paper.CompoundPath) {
|
||
// (finnalPath.children as paper.Path[]).forEach((child) => {
|
||
// // child.clockwise = false;
|
||
// child.data = safeClone(
|
||
// Object.assign({}, oldPolygon?.data || {}, {
|
||
// isHollowPolygon: true,
|
||
// })
|
||
// );
|
||
// });
|
||
// } else if (finnalPath instanceof paper.Path) {
|
||
// // finnalPath.clockwise = false;
|
||
// finnalPath.data = safeClone(
|
||
// Object.assign({}, oldPolygon?.data || {}, {
|
||
// isHollowPolygon: true,
|
||
// })
|
||
// );
|
||
// }
|
||
// oldPolygon.remove();
|
||
// oldPolygon = null;
|
||
|
||
// polygonPath.removeChildren(hollowPath.index, hollowPath.index + 1);
|
||
// polygonPath.addChild(finnalPath);
|
||
})
|
||
}
|
||
|
||
if (!(parent instanceof paper.Group)) {
|
||
if (newDrawPath instanceof paper.CompoundPath) {
|
||
let len = newDrawPath.children.length
|
||
for (let i = len - 1; i >= 0; i--) {
|
||
let child = newDrawPath.children[i]
|
||
child.set({
|
||
parent: parent,
|
||
})
|
||
}
|
||
} else {
|
||
newDrawPath?.set({
|
||
parent: parent,
|
||
})
|
||
}
|
||
}
|
||
|
||
// 创建对象 重新渲染对象 都需要添加 imageId operationId
|
||
if (
|
||
polygonPath.data.imageId &&
|
||
polygonPath.data.operationId &&
|
||
polygonPath.data.id
|
||
) {
|
||
const newDetail = getNewDetail(polygonPath.data)
|
||
let savedItems = usePaperStore.getState().group!.getItems({
|
||
data: { id: polygonPath.data.id },
|
||
}) as paper.Path[]
|
||
|
||
console.log(savedItems)
|
||
|
||
let saveCompoundItems = savedItems.filter(
|
||
(item) =>
|
||
item instanceof paper.Path &&
|
||
item.data.type === "polygon" &&
|
||
item.segments.length
|
||
)
|
||
|
||
let handleSavePaths = (paths: paper.Path[]) => {
|
||
let polygonPoints: any[] = []
|
||
let polygonHollowPoints: any[] = []
|
||
let bool = paths.some((child) => {
|
||
return child.segments.length > 0
|
||
})
|
||
|
||
if (bool) {
|
||
;(paths as paper.Path[]).forEach((path) => {
|
||
if (path.data.type !== "polygon") return
|
||
let pathData = JSON.parse(path.exportJSON({ precision: 20 }))
|
||
// 在镂空区域中 镂空区域路径方向为false
|
||
if (!path.data.isHollowPolygon) {
|
||
polygonPoints.push(pathData[1]?.segments)
|
||
} else {
|
||
if (path.data.id && path.segments?.length) {
|
||
polygonHollowPoints.push(pathData[1]?.segments)
|
||
}
|
||
}
|
||
})
|
||
console.log(
|
||
"编辑后最终保存结果",
|
||
polygonPoints,
|
||
polygonHollowPoints
|
||
)
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(
|
||
polygonPath.data.imageId,
|
||
polygonPath.data.operationId,
|
||
[
|
||
polygonPath.data.id,
|
||
polygonPoints,
|
||
newDetail,
|
||
polygonHollowPoints,
|
||
]
|
||
)
|
||
} else {
|
||
useLabelStore
|
||
.getState()
|
||
.deleteOperation(
|
||
polygonPath.data.imageId,
|
||
polygonPath.data.operationId,
|
||
polygonPath.data.id
|
||
)
|
||
}
|
||
}
|
||
|
||
handleSavePaths(saveCompoundItems)
|
||
activePath =
|
||
newDrawPath?.parent instanceof paper.CompoundPath
|
||
? newDrawPath.parent
|
||
: (newDrawPath as any)
|
||
forceUpdate()
|
||
}
|
||
}
|
||
|
||
// 保存线段类型数据结果
|
||
const handleSaveBrush = (brushPath: any) => {
|
||
if (brushPath instanceof paper.CompoundPath) {
|
||
;(brushPath.children as paper.Path[]).forEach((path) => {
|
||
handleBrushIntersectRaster(path)
|
||
})
|
||
} else {
|
||
handleBrushIntersectRaster(brushPath)
|
||
}
|
||
|
||
if (
|
||
brushPath.data.imageId &&
|
||
brushPath.data.operationId &&
|
||
brushPath.data.id
|
||
) {
|
||
const currentDetail = useLabelStore
|
||
.getState()
|
||
.getLabelDetailDataByKeys(
|
||
brushPath.data.imageId,
|
||
brushPath.data.operationId,
|
||
brushPath.data.id
|
||
)
|
||
const newDetail = currentDetail
|
||
? {
|
||
...currentDetail,
|
||
first_modified_timestamp:
|
||
currentDetail.first_modified_timestamp || dayjs().unix(),
|
||
first_modified_uid: currentDetail.first_modified_uid || user_id,
|
||
last_modified_timestamp: dayjs().unix(),
|
||
last_modified_uid: user_id,
|
||
}
|
||
: {
|
||
...initialDetail,
|
||
create_timestamp: dayjs().unix(),
|
||
category_id: Number(brushPath.data.operationId),
|
||
}
|
||
if (brushPath instanceof paper.CompoundPath) {
|
||
const brushChildren = brushPath.children
|
||
if (brushChildren && brushChildren.length) {
|
||
const points: any[] = []
|
||
;(brushChildren as paper.Path[]).forEach((childPath) => {
|
||
if (childPath.segments && childPath.segments.length) {
|
||
let pathData = JSON.parse(
|
||
childPath.exportJSON({ precision: 20 })
|
||
)
|
||
points.push(pathData[1]?.segments)
|
||
}
|
||
})
|
||
if (points.length)
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(
|
||
brushPath.data.imageId,
|
||
brushPath.data.operationId,
|
||
[brushPath.data.id, points, newDetail, []]
|
||
)
|
||
else {
|
||
usePaperSupportStore
|
||
.getState()
|
||
.removeMaskById(brushPath.data.id)
|
||
useLabelStore
|
||
.getState()
|
||
.deleteOperation(
|
||
brushPath.data.imageId,
|
||
brushPath.data.operationId,
|
||
brushPath.data.id
|
||
)
|
||
}
|
||
}
|
||
} else if (brushPath instanceof paper.Path) {
|
||
if (brushPath.segments && brushPath.segments.length) {
|
||
const pathData = JSON.parse(
|
||
brushPath.exportJSON({ precision: 20 })
|
||
)
|
||
const brushSegments = pathData?.[1]?.segments
|
||
if (brushSegments?.length) {
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(
|
||
brushPath.data.imageId,
|
||
brushPath.data.operationId,
|
||
[brushPath.data.id, [brushSegments], newDetail, []]
|
||
)
|
||
} else {
|
||
usePaperSupportStore
|
||
.getState()
|
||
.removeMaskById(brushPath.data.id)
|
||
useLabelStore
|
||
.getState()
|
||
.deleteOperation(
|
||
brushPath.data.imageId,
|
||
brushPath.data.operationId,
|
||
brushPath.data.id
|
||
)
|
||
}
|
||
} else {
|
||
usePaperSupportStore.getState().removeMaskById(brushPath.data.id)
|
||
useLabelStore
|
||
.getState()
|
||
.deleteOperation(
|
||
brushPath.data.imageId,
|
||
brushPath.data.operationId,
|
||
brushPath.data.id
|
||
)
|
||
}
|
||
}
|
||
|
||
forceUpdate()
|
||
}
|
||
}
|
||
|
||
const handleSavePoint = (pointPath: any) => {
|
||
handlePointIntersectRaster(pointPath)
|
||
if (
|
||
pointPath.data.imageId &&
|
||
pointPath.data.operationId &&
|
||
pointPath.data.id
|
||
) {
|
||
const currentDetail = useLabelStore
|
||
.getState()
|
||
.getLabelDetailDataByKeys(
|
||
pointPath.data.imageId,
|
||
pointPath.data.operationId,
|
||
pointPath.data.id
|
||
)
|
||
const newDetail = currentDetail
|
||
? {
|
||
...currentDetail,
|
||
first_modified_timestamp:
|
||
currentDetail.first_modified_timestamp || dayjs().unix(),
|
||
first_modified_uid: currentDetail.first_modified_uid || user_id,
|
||
last_modified_timestamp: dayjs().unix(),
|
||
last_modified_uid: user_id,
|
||
}
|
||
: {
|
||
...initialDetail,
|
||
create_timestamp: dayjs().unix(),
|
||
category_id: Number(pointPath.data.operationId),
|
||
}
|
||
if (pointPath instanceof paper.Path) {
|
||
if (pointPath.segments && pointPath.segments.length) {
|
||
const pathData = JSON.parse(
|
||
pointPath.exportJSON({ precision: 20 })
|
||
)
|
||
const pointSegments = pathData?.[1]?.segments
|
||
if (pointSegments?.length) {
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(
|
||
pointPath.data.imageId,
|
||
pointPath.data.operationId,
|
||
[pointPath.data.id, [pointSegments], newDetail, []]
|
||
)
|
||
} else {
|
||
usePaperSupportStore
|
||
.getState()
|
||
.removeMaskById(pointPath.data.id)
|
||
useLabelStore
|
||
.getState()
|
||
.deleteOperation(
|
||
pointPath.data.imageId,
|
||
pointPath.data.operationId,
|
||
pointPath.data.id
|
||
)
|
||
}
|
||
} else {
|
||
usePaperSupportStore.getState().removeMaskById(pointPath.data.id)
|
||
useLabelStore
|
||
.getState()
|
||
.deleteOperation(
|
||
pointPath.data.imageId,
|
||
pointPath.data.operationId,
|
||
pointPath.data.id
|
||
)
|
||
}
|
||
}
|
||
|
||
forceUpdate()
|
||
}
|
||
}
|
||
|
||
if (isChanged) {
|
||
if (
|
||
(activePath && activePath.data.selected) ||
|
||
(activePath?.children?.length &&
|
||
activePath?.children?.findIndex((item) => item.data.selected) !==
|
||
-1)
|
||
) {
|
||
if (
|
||
panMode === "segment" ||
|
||
panMode === "fill" ||
|
||
panMode === "stroke"
|
||
) {
|
||
if (activePath.data.type === "rectangle") {
|
||
handleSaveRect(activePath)
|
||
} else if (activePath.data.type === "brush") {
|
||
handleSaveBrush(activePath)
|
||
} else if (activePath.data.type === "polygon") {
|
||
handleSavePolygon(activePath)
|
||
} else if (activePath.data.type === "point") {
|
||
handleSavePoint(activePath)
|
||
}
|
||
}
|
||
} else {
|
||
// 没被选中
|
||
}
|
||
|
||
isChanged = false
|
||
}
|
||
}
|
||
panTool.onKeyDown = (e: paper.KeyEvent) => {
|
||
if (e.key === "delete") {
|
||
handleDelete()
|
||
usePaperSupportStore.getState().clearTexts()
|
||
|
||
let ids =
|
||
useObjectStore.getState().selectedPath[
|
||
useBottomToolsStore.getState().activeImage
|
||
]
|
||
|
||
usePaperSupportStore.getState().removeMaskByIds(ids)
|
||
|
||
forceUpdate()
|
||
} else if (e.key === "shift") {
|
||
pressShift = true
|
||
useKeyEventStore.getState().setShift(true)
|
||
} else if (e.key === "control") {
|
||
pressCtrl = true
|
||
}
|
||
}
|
||
panTool.onKeyUp = (e: paper.KeyEvent) => {
|
||
if (e.key === "shift") {
|
||
pressShift = false
|
||
useKeyEventStore.getState().setShift(false)
|
||
} else if (e.key === "control") {
|
||
pressCtrl = false
|
||
}
|
||
}
|
||
panTool.onMouseMove = (e: paper.MouseEvent) => {
|
||
handleMouseMove(e)
|
||
}
|
||
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
panTool: panTool,
|
||
}))
|
||
},
|
||
addPolygon: (
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
points: paper.Point[] | undefined,
|
||
option: any,
|
||
data: any
|
||
) => {
|
||
let polygon = renderPath(
|
||
usePaperStore.getState().group!,
|
||
Object.assign(option, {
|
||
strokeScaling: false,
|
||
})
|
||
)
|
||
polygon.data = Object.assign({ type: "polygon", ...option }, data)
|
||
points?.forEach((point) => {
|
||
polygon.add(point)
|
||
})
|
||
|
||
polygon.onMouseEnter = (_e: paper.MouseEvent) => {
|
||
// if (usePaperStore.getState().mode === "pan") {
|
||
// e.target.strokeWidth += 2;
|
||
// if (usePaperStore.getState().el)
|
||
// usePaperStore.getState().el!.style.cursor = "move";
|
||
// }
|
||
}
|
||
polygon.onMouseLeave = (_e: paper.MouseEvent) => {
|
||
// if (usePaperStore.getState().mode === "pan") {
|
||
// // render 结束没有触发 onMouseEnter
|
||
// if (e.target.strokeWidth - 2 > 0) e.target.strokeWidth -= 2;
|
||
// if (usePaperStore.getState().el)
|
||
// usePaperStore.getState().el!.style.cursor = "default";
|
||
// }
|
||
}
|
||
|
||
polygon.onDoubleClick = (e: paper.MouseEvent) => {
|
||
console.log("polygon.onDoubleClick", e)
|
||
}
|
||
polygon.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
|
||
if (e.event && e.event.button === 2) {
|
||
if (polygon.data.id) {
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) => item.category_id.toString() === polygon.data.operationId
|
||
)
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category!,
|
||
5,
|
||
5
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: polygon.data.imageId,
|
||
operationId: polygon.data.operationId,
|
||
id: polygon.data.id,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
return polygon
|
||
},
|
||
addCompoundPath: (
|
||
renderCompoundPath: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.CompoundPath,
|
||
children: paper.Path[] | undefined,
|
||
option: any,
|
||
data: any
|
||
) => {
|
||
let compoundPath = renderCompoundPath(
|
||
usePaperStore.getState().group!,
|
||
Object.assign(option, {
|
||
children,
|
||
strokeScaling: false,
|
||
})
|
||
)
|
||
compoundPath.data = Object.assign({ type: "polygon", ...option }, data)
|
||
compoundPath.onMouseDown = (e: {
|
||
event: MouseEvent
|
||
point: paper.Point
|
||
}) => {
|
||
if (e.event && e.event.button === 2) {
|
||
if (compoundPath.data.id) {
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) =>
|
||
item.category_id.toString() === compoundPath.data.operationId
|
||
)
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category!,
|
||
5,
|
||
5
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: compoundPath.data.imageId,
|
||
operationId: compoundPath.data.operationId,
|
||
id: compoundPath.data.id,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
return compoundPath
|
||
},
|
||
initPolygonTool: (
|
||
paperPolygonTool: paper.Tool,
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
renderCompoundPath: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.CompoundPath,
|
||
forceUpdate: DispatchWithoutAction
|
||
) => {
|
||
let selectedCircles: paper.Path.Circle[] = []
|
||
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 isMouseDown: boolean = false
|
||
let polygonTool = paperPolygonTool
|
||
let currentMagnetPoint: paper.Point | null = null
|
||
|
||
const handleCircles = (path: paper.Path | paper.CompoundPath | null) => {
|
||
// 更新选中的点
|
||
if (selectedCircles && selectedCircles.length) {
|
||
selectedCircles.forEach((item) => {
|
||
item.remove()
|
||
})
|
||
selectedCircles = []
|
||
}
|
||
path &&
|
||
path instanceof paper.Path &&
|
||
path.segments.forEach((segment) => {
|
||
let circle = usePaperStore
|
||
.getState()
|
||
.getClickedCircle(
|
||
segment.point,
|
||
segment.index,
|
||
path.data.id,
|
||
path.data.blankColor
|
||
)
|
||
selectedCircles.push(circle)
|
||
})
|
||
}
|
||
|
||
const handlePolygonIntersectRaster = (savePath: paper.Path) => {
|
||
let oldPolygon: any = savePath
|
||
polygon = oldPolygon.intersect(
|
||
usePaperStore.getState().rasterPath!
|
||
) as any
|
||
if (polygon instanceof paper.CompoundPath)
|
||
(polygon.children as paper.Path[]).forEach((child) => {
|
||
if (!child.data || (child.data && !Object.keys(child.data).length))
|
||
child.data = safeClone(
|
||
Object.assign(
|
||
{ isHollowPolygon: !child.clockwise },
|
||
polygon?.data || {}
|
||
)
|
||
)
|
||
})
|
||
oldPolygon.remove()
|
||
oldPolygon = null
|
||
}
|
||
|
||
const handlePolygonIntersect = (path: paper.Path) => {
|
||
const handleCurrentPathSub = (eachPath: paper.Path) => {
|
||
if (!polygon) return
|
||
let oldPolygon: any = polygon
|
||
polygon = oldPolygon?.subtract(eachPath) as any
|
||
if (polygon instanceof paper.CompoundPath)
|
||
(polygon.children as paper.Path[]).forEach((child) => {
|
||
child.data = safeClone(
|
||
Object.assign(
|
||
{ isHollowPolygon: !child.clockwise },
|
||
polygon?.data || {}
|
||
)
|
||
)
|
||
})
|
||
oldPolygon?.remove()
|
||
oldPolygon = null
|
||
}
|
||
|
||
usePaperStore.getState().group?.children!.forEach((item: any) => {
|
||
if (!item.data.id || item.data.type !== "polygon" || !item.visible)
|
||
return
|
||
if (item instanceof paper.Path) {
|
||
if (item?.segments?.length && item.data.id !== path?.data.id) {
|
||
handleCurrentPathSub(item)
|
||
}
|
||
} else if (
|
||
item instanceof paper.CompoundPath &&
|
||
item.data.id !== path.data.id
|
||
) {
|
||
;(item.children as paper.Path[]).forEach((child) => {
|
||
if (child?.segments?.length && child.data.id !== path?.data.id) {
|
||
handleCurrentPathSub(child)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
const handlePolygonUnite = () => {
|
||
const handleCurrentPathUnite = (eachPath: paper.Path) => {
|
||
if (!polygon) return
|
||
let intersectionPath = polygon.intersect(eachPath, {
|
||
insert: false,
|
||
}) as paper.Path
|
||
if (intersectionPath.segments?.length) {
|
||
let oldPolygon: any = polygon
|
||
polygon = oldPolygon.unite(eachPath) as any
|
||
if (polygon instanceof paper.CompoundPath)
|
||
(polygon.children as paper.Path[]).forEach((child) => {
|
||
child.data = safeClone(polygon?.data || {})
|
||
})
|
||
oldPolygon?.remove()
|
||
oldPolygon = null
|
||
}
|
||
}
|
||
|
||
usePaperStore.getState().group?.children!.forEach((item: any) => {
|
||
if (!item.data.id || item.data.type !== "polygon" || !item.visible)
|
||
return
|
||
if (item instanceof paper.CompoundPath) {
|
||
;(item.children as paper.Path[]).forEach((child) => {
|
||
handleCurrentPathUnite(child)
|
||
})
|
||
} else if (item instanceof paper.Path) {
|
||
handleCurrentPathUnite(item)
|
||
}
|
||
})
|
||
}
|
||
|
||
polygonTool.onMouseDown = (e: {
|
||
event: MouseEvent
|
||
point: paper.Point
|
||
}) => {
|
||
if (e.event.button !== 0) return
|
||
isMouseDown = true
|
||
|
||
// 绘制时去除选中辅助
|
||
if (usePaperSupportStore.getState().selectedCircles.length) {
|
||
usePaperSupportStore.getState().clearAll()
|
||
}
|
||
|
||
// 先判断是否存在吸附点
|
||
let checkPoint = currentMagnetPoint ? currentMagnetPoint : e.point
|
||
// doubleclick
|
||
if (
|
||
lastPoint &&
|
||
lastPoint.x === checkPoint.x &&
|
||
lastPoint.y === checkPoint.y
|
||
) {
|
||
if (polygon) {
|
||
if ((polygon as paper.Path).segments.length < 3) {
|
||
polygon.remove()
|
||
selectedCircles.forEach((item) => {
|
||
item.remove()
|
||
})
|
||
}
|
||
|
||
// 调整polygon点位初始顺序
|
||
if (!polygon.clockwise) polygon.reverse()
|
||
|
||
// 初始化 compoundPolygon
|
||
compoundPolygon = new paper.Path()
|
||
|
||
// pressA 模式下添加多边形
|
||
if (useTopToolsStore.getState().pressA) {
|
||
let ids =
|
||
useObjectStore.getState().selectedPath[
|
||
useBottomToolsStore.getState().activeImage
|
||
]
|
||
let paths = usePaperStore.getState().getItemsById(ids[0])
|
||
let oldPolygon = polygon
|
||
// 闭合绘制路径
|
||
oldPolygon.closePath()
|
||
|
||
if (paths.length === 1) {
|
||
const prevPath = paths[0]
|
||
polygon = usePaperStore.getState().addCompoundPath(
|
||
renderCompoundPath,
|
||
[prevPath, oldPolygon] as paper.Path[],
|
||
{
|
||
// option
|
||
...usePaperStore.getState().toolOption,
|
||
},
|
||
{ ...oldPolygon.data, id: prevPath?.data.id }
|
||
)
|
||
} else if (paths.length > 1) {
|
||
const prevPath = paths.filter(
|
||
(path) => path instanceof paper.CompoundPath
|
||
)[0]
|
||
// 直接将当前路径添加到原有父路径
|
||
prevPath.addChild(oldPolygon)
|
||
polygon = prevPath
|
||
}
|
||
}
|
||
|
||
if (useTopToolsStore.getState().drawOption === "intersect") {
|
||
// 裁剪
|
||
handlePolygonIntersect(polygon as paper.Path)
|
||
handleCircles(polygon)
|
||
} else if (useTopToolsStore.getState().drawOption === "unite") {
|
||
// 融合
|
||
handlePolygonUnite()
|
||
handleCircles(polygon)
|
||
}
|
||
console.log("裁剪之后", polygon)
|
||
|
||
// if (useTopToolsStore.getState().drawOption === "default") {
|
||
// if (useTopToolsStore.getState().pressA)
|
||
// compoundPolygon = polygon.clone();
|
||
// }
|
||
|
||
// 去除超出图片边界的部分
|
||
handlePolygonIntersectRaster(polygon as any)
|
||
// 去除超出图片边界的部分
|
||
console.log("边界裁剪之后", polygon)
|
||
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) =>
|
||
item.category_id.toString() ===
|
||
useTopToolsStore.getState().activeOperation
|
||
)
|
||
let label_class = category?.label_class || ""
|
||
let subAttr = Object.assign(
|
||
{},
|
||
useTopToolsStore.getState().subAttributes[label_class]
|
||
)
|
||
|
||
// 镂空或分割的多边形存值
|
||
if (polygon instanceof paper.CompoundPath) {
|
||
if (polygon.children && polygon.children.length) {
|
||
let points: any[] = []
|
||
let hollowPoints: any[] = []
|
||
;(polygon.children as paper.Path[]).forEach((path) => {
|
||
let pathData = JSON.parse(path.exportJSON({ precision: 20 }))
|
||
// 在镂空或分割的区域中 路径方向是false
|
||
if (path.clockwise) {
|
||
points.push(pathData[1]?.segments)
|
||
} else {
|
||
hollowPoints.push(pathData[1]?.segments)
|
||
}
|
||
})
|
||
console.log(
|
||
"处理完成的点位数据",
|
||
points,
|
||
hollowPoints,
|
||
polygon.data
|
||
)
|
||
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(
|
||
useBottomToolsStore.getState().activeImage,
|
||
useTopToolsStore.getState().activeOperation,
|
||
[
|
||
polygon.data.id,
|
||
points,
|
||
{
|
||
...initialDetail,
|
||
uid: usePermissionStore.getState().user_id,
|
||
comment: [
|
||
...useLabelStore.getState().labelDefaultComments,
|
||
],
|
||
create_timestamp: dayjs().unix(),
|
||
sub_attributes: subAttr,
|
||
image_id: useBottomToolsStore.getState().activeImageId,
|
||
category_id: Number(
|
||
useTopToolsStore.getState().activeOperation
|
||
),
|
||
},
|
||
hollowPoints,
|
||
]
|
||
)
|
||
if (!useTopToolsStore.getState().pressA)
|
||
useRightToolsStore.getState().pushPathId(polygon.data.id)
|
||
}
|
||
} else if (
|
||
// 未镂空或分割 存值
|
||
polygon instanceof paper.Path &&
|
||
polygon.data.id &&
|
||
polygon.segments?.length
|
||
) {
|
||
let pathData = JSON.parse(polygon.exportJSON({ precision: 20 }))
|
||
console.log(pathData[1]?.segments)
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(
|
||
useBottomToolsStore.getState().activeImage,
|
||
useTopToolsStore.getState().activeOperation,
|
||
[
|
||
polygon.data.id,
|
||
// todo intersect+a | +a会变成CompoundPath 理论上已解决这个todo
|
||
[pathData[1]?.segments, ...[]],
|
||
{
|
||
...initialDetail,
|
||
uid: usePermissionStore.getState().user_id,
|
||
comment: [...useLabelStore.getState().labelDefaultComments],
|
||
create_timestamp: dayjs().unix(),
|
||
sub_attributes: subAttr,
|
||
image_id: useBottomToolsStore.getState().activeImageId,
|
||
category_id: Number(
|
||
useTopToolsStore.getState().activeOperation
|
||
),
|
||
},
|
||
[],
|
||
]
|
||
)
|
||
useRightToolsStore.getState().pushPathId(polygon.data.id)
|
||
}
|
||
|
||
// 如果该类别存在子属性，则弹出子属性对话框
|
||
if (category && category.sub_attributes.length) {
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category!,
|
||
-30,
|
||
-30
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: polygon.data.imageId,
|
||
operationId: polygon.data.operationId,
|
||
id: polygon.data.id,
|
||
})
|
||
}
|
||
|
||
// 设置其为selectedPath
|
||
useObjectStore
|
||
.getState()
|
||
.updateSelectedPath(
|
||
useBottomToolsStore.getState().activeImage,
|
||
"ADD",
|
||
polygon.data.id
|
||
)
|
||
|
||
forceUpdate()
|
||
|
||
if (compoundPolygon instanceof paper.CompoundPath) {
|
||
polygon.remove()
|
||
polygon = null
|
||
points = []
|
||
} else {
|
||
compoundPolygon?.remove()
|
||
compoundPolygon = null
|
||
polygon?.closePath()
|
||
polygon = null
|
||
points = []
|
||
}
|
||
selectedCircles.forEach((item) => {
|
||
item.remove()
|
||
})
|
||
const magnetPaths = usePaperStore
|
||
.getState()
|
||
.group!.getItems({ data: { type: "magnet" } })
|
||
magnetPaths.forEach((item) => {
|
||
item.remove()
|
||
})
|
||
currentMagnetPoint = null
|
||
|
||
useTopToolsStore.getState().setPressA(false)
|
||
return
|
||
}
|
||
} else {
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: false,
|
||
position: {
|
||
top: 0,
|
||
left: 0,
|
||
},
|
||
imageId: "",
|
||
operationId: "",
|
||
id: 0,
|
||
})
|
||
// 清空多边形 fillColor
|
||
usePaperStore
|
||
.getState()
|
||
.group!.getItems({})
|
||
.forEach((item) => {
|
||
// clear color
|
||
item.fillColor = item?.data?.blankColor
|
||
})
|
||
}
|
||
|
||
let temp = renderPath(usePaperStore.getState().group!, {})
|
||
let point = currentMagnetPoint
|
||
? currentMagnetPoint
|
||
: temp.globalToLocal(e.point)
|
||
|
||
let circle = usePaperStore
|
||
.getState()
|
||
.getClickedCircle(
|
||
point,
|
||
selectedCircles.length,
|
||
polygon?.data.id,
|
||
polygon?.data.blankColor
|
||
)
|
||
// add circle
|
||
selectedCircles.push(circle)
|
||
|
||
// add point
|
||
points.push(point)
|
||
if (polygon) {
|
||
polygon.remove()
|
||
}
|
||
polygon = usePaperStore.getState().addPolygon(
|
||
renderPath,
|
||
points,
|
||
{
|
||
// 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,
|
||
}
|
||
)
|
||
|
||
lastPoint = checkPoint
|
||
lastTime = Date.now()
|
||
}
|
||
polygonTool.onMouseUp = (_e: paper.ToolEvent) => {
|
||
isMouseDown = false
|
||
}
|
||
polygonTool.onMouseMove = (e: paper.MouseEvent) => {
|
||
handleMouseMove(e)
|
||
|
||
if (polygon) {
|
||
let temp = renderPath(usePaperStore.getState().group!, {})
|
||
let point = temp.globalToLocal(e.point)
|
||
// let point = e.point;
|
||
// when mousedown then drag draw
|
||
const paperGroup = usePaperStore.getState().group!
|
||
const currentPloygons = paperGroup.getItems({
|
||
data: { type: "polygon" },
|
||
})
|
||
// clear prev magnet
|
||
const prevHitResult = paperGroup.getItems({
|
||
data: { type: "magnet" },
|
||
})
|
||
prevHitResult.forEach((item) => {
|
||
item.remove()
|
||
})
|
||
currentMagnetPoint = null
|
||
if (useTopToolsStore.getState().magnetFlag)
|
||
currentPloygons.forEach((imgPolygon) => {
|
||
if (
|
||
imgPolygon instanceof paper.Path &&
|
||
imgPolygon.data.id !== polygon!.data.id
|
||
) {
|
||
const hitResult = imgPolygon.hitTest(point, {
|
||
stroke: true,
|
||
tolerance: usePaperStore.getState().paperScope
|
||
? 8 / usePaperStore.getState().paperScope!.view.zoom
|
||
: 0,
|
||
})
|
||
if (hitResult) {
|
||
// 绘制高亮边及其端点
|
||
const { point, location } = hitResult
|
||
const magnetPoint = new paper.Path.Circle(point, 4).set({
|
||
fillColor: "white",
|
||
strokeScaling: false,
|
||
data: { type: "magnet" },
|
||
})
|
||
magnetPoint.scale(1 / usePaperStore.getState().group!.scaling.x)
|
||
const magnetLine = new paper.Path.Line(
|
||
location.curve.segment1.point,
|
||
location.curve.segment2.point
|
||
).set({
|
||
strokeColor: "white",
|
||
strokeWidth: 2,
|
||
strokeScaling: false,
|
||
data: { type: "magnet" },
|
||
})
|
||
paperGroup.addChild(magnetPoint)
|
||
paperGroup.addChild(magnetLine)
|
||
currentMagnetPoint = point
|
||
}
|
||
}
|
||
})
|
||
if (isMouseDown) {
|
||
const delta = currentMagnetPoint
|
||
? (currentMagnetPoint as paper.Point).subtract(lastPoint)
|
||
: e.point.subtract(lastPoint)
|
||
const currentTime = Date.now()
|
||
const timeDelta = currentTime - lastTime
|
||
if (delta.length > 10 && timeDelta > 50) {
|
||
// Add a point to the current path if the distance exceeds the threshold
|
||
if (!currentMagnetPoint) {
|
||
points.push(point)
|
||
let circle = usePaperStore
|
||
.getState()
|
||
.getClickedCircle(
|
||
point,
|
||
selectedCircles.length,
|
||
polygon.data.id,
|
||
polygon.data.blankColor
|
||
)
|
||
// add circle
|
||
selectedCircles.push(circle)
|
||
;(polygon as paper.Path).add(point)
|
||
lastPoint = e.point
|
||
} else {
|
||
points.push(currentMagnetPoint)
|
||
let circle = usePaperStore
|
||
.getState()
|
||
.getClickedCircle(
|
||
currentMagnetPoint,
|
||
selectedCircles.length,
|
||
polygon.data.id,
|
||
polygon.data.blankColor
|
||
)
|
||
// add circle
|
||
selectedCircles.push(circle)
|
||
;(polygon as paper.Path).add(currentMagnetPoint)
|
||
lastPoint = currentMagnetPoint
|
||
}
|
||
lastTime = currentTime
|
||
}
|
||
} else {
|
||
polygon.remove()
|
||
polygon = usePaperStore.getState().addPolygon(
|
||
renderPath,
|
||
points.concat(point),
|
||
{
|
||
// option
|
||
...usePaperStore.getState().toolOption,
|
||
},
|
||
{}
|
||
)
|
||
}
|
||
}
|
||
}
|
||
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)
|
||
}
|
||
const magnetPaths = usePaperStore
|
||
.getState()
|
||
.group!.getItems({ data: { type: "magnet" } })
|
||
magnetPaths.forEach((item) => {
|
||
item.remove()
|
||
})
|
||
currentMagnetPoint = null
|
||
} else if (e.key === "delete") {
|
||
handleDelete()
|
||
forceUpdate()
|
||
} else if (e.key === "shift") {
|
||
handleShift(true)
|
||
}
|
||
}
|
||
polygonTool.onKeyUp = (e: paper.KeyEvent) => {
|
||
if (e.key === "shift") {
|
||
handleShift(false)
|
||
}
|
||
}
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
polygonTool: polygonTool,
|
||
}))
|
||
},
|
||
addRectangle: (
|
||
renderRectangle: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.Path.Rectangle,
|
||
option: any,
|
||
data: any
|
||
) => {
|
||
let rect = renderRectangle(
|
||
usePaperStore.getState().group!,
|
||
Object.assign(option, { strokeScaling: false })
|
||
)
|
||
rect.data = Object.assign({ type: "rectangle", ...option }, data)
|
||
rect.onMouseEnter = (_e: paper.MouseEvent) => {
|
||
// if (usePaperStore.getState().mode === "pan") {
|
||
// e.target.strokeWidth += 2;
|
||
// if (usePaperStore.getState().el)
|
||
// usePaperStore.getState().el!.style.cursor = "move";
|
||
// }
|
||
}
|
||
rect.onMouseLeave = (_e: paper.MouseEvent) => {
|
||
// if (usePaperStore.getState().mode === "pan") {
|
||
// // render 结束没有触发 onMouseEnter
|
||
// if (e.target.strokeWidth - 2 > 0) e.target.strokeWidth -= 2;
|
||
// if (usePaperStore.getState().el)
|
||
// usePaperStore.getState().el!.style.cursor = "default";
|
||
// }
|
||
}
|
||
rect.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
|
||
if (e.event && e.event.button === 2) {
|
||
if (rect.data.id) {
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) => item.category_id.toString() === rect.data.operationId
|
||
)
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category!,
|
||
5,
|
||
5
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: rect.data.imageId,
|
||
operationId: rect.data.operationId,
|
||
id: rect.data.id,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
return rect
|
||
},
|
||
initRectangleTool: (
|
||
paperRectangleTool: paper.Tool,
|
||
renderRectangle: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.Path.Rectangle,
|
||
forceUpdate: DispatchWithoutAction
|
||
) => {
|
||
let rect: paper.Path.Rectangle | null
|
||
let rectangleTool = paperRectangleTool
|
||
|
||
rectangleTool.onMouseDown = (e: { event: MouseEvent }) => {
|
||
if (e.event && e.event.button !== 2)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: false,
|
||
position: {
|
||
top: 0,
|
||
left: 0,
|
||
},
|
||
imageId: "",
|
||
operationId: "",
|
||
id: 0,
|
||
})
|
||
|
||
// 绘制时去除选中辅助
|
||
if (usePaperSupportStore.getState().selectedCircles.length) {
|
||
usePaperSupportStore.getState().clearAll()
|
||
}
|
||
}
|
||
|
||
rectangleTool.onMouseDrag = (e: {
|
||
event: MouseEvent
|
||
point: paper.Point
|
||
downPoint: paper.Point
|
||
}) => {
|
||
const delta = e.point.subtract(e.downPoint)
|
||
// 阻止右键移动矩形(e.event.button === 0)
|
||
if (delta.length > 10 && e.event.button === 0) {
|
||
let temp = renderRectangle(usePaperStore.getState().group!, {})
|
||
let point = temp.globalToLocal(e.point)
|
||
let downPoint = temp.globalToLocal(e.downPoint)
|
||
|
||
temp.remove()
|
||
rect = usePaperStore.getState().addRectangle(
|
||
renderRectangle,
|
||
{
|
||
from: downPoint,
|
||
to: point,
|
||
// 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,
|
||
}
|
||
)
|
||
rect.removeOnDrag()
|
||
|
||
// !!! 矩形不进行裁剪
|
||
// intersect drawOption 舍弃交集
|
||
// 舍弃交集
|
||
}
|
||
}
|
||
rectangleTool.onMouseUp = (e: {
|
||
event: MouseEvent
|
||
point: paper.Point
|
||
}) => {
|
||
// add segment judgement
|
||
if (rect && rect.segments?.length && rect?.data?.id) {
|
||
// 去除超出图片边界的部分
|
||
handleRectangleIntersectRaster(rect)
|
||
// 去除后无点位 则不作后续新增处理
|
||
if (!rect.segments.length) return
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) =>
|
||
item.category_id.toString() ===
|
||
useTopToolsStore.getState().activeOperation
|
||
)
|
||
let label_class = category?.label_class || ""
|
||
let subAttr = Object.assign(
|
||
{},
|
||
useTopToolsStore.getState().subAttributes[label_class]
|
||
)
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(
|
||
useBottomToolsStore.getState().activeImage,
|
||
useTopToolsStore.getState().activeOperation,
|
||
[
|
||
rect.data.id,
|
||
[JSON.parse(rect.exportJSON({ precision: 20 }))[1]?.segments],
|
||
{
|
||
...initialDetail,
|
||
uid: usePermissionStore.getState().user_id,
|
||
comment: [...useLabelStore.getState().labelDefaultComments],
|
||
create_timestamp: dayjs().unix(),
|
||
sub_attributes: subAttr,
|
||
image_id: useBottomToolsStore.getState().activeImageId,
|
||
category_id: Number(
|
||
useTopToolsStore.getState().activeOperation
|
||
),
|
||
},
|
||
[],
|
||
]
|
||
)
|
||
useRightToolsStore.getState().pushPathId(rect.data.id)
|
||
|
||
// 设置其为selectedPath
|
||
useObjectStore
|
||
.getState()
|
||
.updateSelectedPath(
|
||
useBottomToolsStore.getState().activeImage,
|
||
"ADD",
|
||
rect.data?.id
|
||
)
|
||
|
||
forceUpdate()
|
||
// 如果该类别存在子属性，则弹出子属性对话框
|
||
if (category && category.sub_attributes.length) {
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category,
|
||
-30,
|
||
-30
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: rect.data.imageId,
|
||
operationId: rect.data.operationId,
|
||
id: rect.data.id,
|
||
})
|
||
}
|
||
}
|
||
rect = null
|
||
}
|
||
rectangleTool.onKeyDown = (e: paper.KeyEvent) => {
|
||
if (e.key === "escape" || e.key === "alt") {
|
||
if (rect) {
|
||
rect.remove()
|
||
rect = null
|
||
}
|
||
} else if (e.key === "delete") {
|
||
handleDelete()
|
||
forceUpdate()
|
||
} else if (e.key === "shift") {
|
||
handleShift(true)
|
||
}
|
||
}
|
||
rectangleTool.onKeyUp = (e: paper.KeyEvent) => {
|
||
if (e.key === "shift") {
|
||
handleShift(false)
|
||
}
|
||
}
|
||
rectangleTool.onMouseMove = (e: paper.MouseEvent) => {
|
||
handleMouseMove(e)
|
||
}
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
rectangleTool: rectangleTool,
|
||
}))
|
||
},
|
||
addBrush: (
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
points: paper.Point[] | undefined,
|
||
option: any,
|
||
data: any
|
||
) => {
|
||
let brush = renderPath(
|
||
usePaperStore.getState().group!,
|
||
Object.assign(
|
||
{ ...option, fillColor: undefined, closed: false },
|
||
{ segments: points, strokeScaling: false }
|
||
)
|
||
)
|
||
brush.data = Object.assign({ type: "brush", ...option }, data)
|
||
// points?.forEach((point) => {
|
||
// brush.add(point);
|
||
// });
|
||
brush.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
|
||
if (e.event && e.event.button === 2) {
|
||
// console.log(e.event.clientX, e.event.clientY);
|
||
if (brush.data.id) {
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) => item.category_id.toString() === brush.data.operationId
|
||
)
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category!,
|
||
5,
|
||
5
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: brush.data.imageId,
|
||
operationId: brush.data.operationId,
|
||
id: brush.data.id,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
return brush
|
||
},
|
||
initBrushTool: (
|
||
paperBrushTool: paper.Tool,
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
renderCompoundPath: (
|
||
paperGroup: paper.Group,
|
||
option: any
|
||
) => paper.CompoundPath,
|
||
forceUpdate: DispatchWithoutAction
|
||
) => {
|
||
let brushCircles: paper.Path.Circle[] = []
|
||
let myPath: paper.Path | null
|
||
let compoundPolygon: paper.Path | paper.CompoundPath | null
|
||
let lastPoint: paper.Point
|
||
let points: paper.Point[] = []
|
||
|
||
let brushTool = paperBrushTool
|
||
|
||
const handleBrushIntersectRaster = (savePath: paper.Path) => {
|
||
let intersections = savePath.getIntersections(
|
||
usePaperStore.getState().rasterPath!
|
||
)
|
||
let validIntersections = intersections.filter((intersection) => {
|
||
// 检查交点是否在两个路径的可见部分
|
||
return (
|
||
savePath.contains(intersection.point) &&
|
||
usePaperStore.getState().rasterPath!.contains(intersection.point)
|
||
)
|
||
})
|
||
|
||
// 没有 validIntersections 不进行操作
|
||
if (validIntersections.length) {
|
||
// intersectionPath as paper.CompoundPath | paper.Path | null
|
||
let intersectionPath: any = savePath.intersect(
|
||
usePaperStore.getState().rasterPath!,
|
||
{
|
||
insert: false,
|
||
trace: false,
|
||
}
|
||
)
|
||
|
||
// 检测交点并处理
|
||
if (intersectionPath instanceof paper.CompoundPath) {
|
||
let new_segments: any[] = []
|
||
;(intersectionPath.children as paper.Path[]).forEach((child) => {
|
||
if (child.segments && child.segments.length) {
|
||
new_segments.push(...child.segments)
|
||
}
|
||
})
|
||
savePath.segments = new_segments
|
||
} else if (
|
||
intersectionPath.segments &&
|
||
intersectionPath.segments.length
|
||
) {
|
||
// intersectionPath是CompoundPath
|
||
savePath.segments = intersectionPath.segments
|
||
} else {
|
||
}
|
||
intersectionPath.remove()
|
||
intersectionPath = null
|
||
|
||
let oldCompoundPolygon = compoundPolygon
|
||
compoundPolygon = oldCompoundPolygon?.intersect(
|
||
usePaperStore.getState().rasterPath!
|
||
) as paper.Path
|
||
compoundPolygon.closed = false
|
||
oldCompoundPolygon?.remove()
|
||
} else {
|
||
let intersectionPath: paper.Path | null = savePath.intersect(
|
||
usePaperStore.getState().rasterPath!,
|
||
{
|
||
insert: false,
|
||
trace: false,
|
||
}
|
||
) as paper.Path
|
||
savePath.segments = intersectionPath.segments
|
||
intersectionPath.remove()
|
||
intersectionPath = null
|
||
}
|
||
}
|
||
|
||
brushTool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
|
||
if (e.event.button !== 0) return
|
||
|
||
// 绘制时去除选中辅助
|
||
if (usePaperSupportStore.getState().selectedCircles.length) {
|
||
usePaperSupportStore.getState().clearAll()
|
||
}
|
||
|
||
// doubleclick
|
||
if (lastPoint && lastPoint.x === e.point.x && lastPoint.y === e.point.y) {
|
||
if (myPath) {
|
||
// 初始化 compoundPolygon
|
||
compoundPolygon = new paper.Path()
|
||
if (useTopToolsStore.getState().pressA)
|
||
compoundPolygon = myPath.clone()
|
||
|
||
// 去除超出图片边界的部分
|
||
handleBrushIntersectRaster(myPath)
|
||
// 去除超出图片边界的部分
|
||
|
||
// pressA 模式下添加线段
|
||
if (useTopToolsStore.getState().pressA) {
|
||
let ids =
|
||
useObjectStore.getState().selectedPath[
|
||
useBottomToolsStore.getState().activeImage
|
||
]
|
||
let path = usePaperStore.getState().getItemById(ids[0])
|
||
let paths =
|
||
usePaperStore
|
||
.getState()
|
||
.getItemsById(ids[0])
|
||
.filter((item) => item instanceof paper.Path && item.area) || []
|
||
|
||
// compoundPolygon === Path
|
||
let oldCompoundPolygon: any = compoundPolygon
|
||
let children: paper.Path[] = []
|
||
if (oldCompoundPolygon instanceof paper.CompoundPath) {
|
||
children = oldCompoundPolygon.children as paper.Path[]
|
||
} else if (oldCompoundPolygon instanceof paper.Path) {
|
||
children = [oldCompoundPolygon]
|
||
}
|
||
compoundPolygon = usePaperStore.getState().addCompoundPath(
|
||
renderCompoundPath,
|
||
[...paths!, ...children] as paper.Path[],
|
||
{
|
||
// option
|
||
...usePaperStore.getState().toolOption,
|
||
fillColor: undefined,
|
||
closed: false,
|
||
},
|
||
{ ...oldCompoundPolygon.data, id: path?.data.id, type: "brush" }
|
||
)
|
||
// oldCompoundPolygon?.remove();
|
||
oldCompoundPolygon.data.id = path?.data.id
|
||
}
|
||
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) =>
|
||
item.category_id.toString() ===
|
||
useTopToolsStore.getState().activeOperation
|
||
)
|
||
let label_class = category?.label_class || ""
|
||
let subAttr = Object.assign(
|
||
{},
|
||
useTopToolsStore.getState().subAttributes[label_class]
|
||
)
|
||
|
||
// 多线段存值
|
||
if (compoundPolygon instanceof paper.CompoundPath) {
|
||
if (compoundPolygon.children && compoundPolygon.children.length) {
|
||
let polygonPoints: any[] = []
|
||
let polygonHollowPoints: any[] = []
|
||
|
||
;(compoundPolygon.children as paper.Path[]).forEach((path) => {
|
||
let pathData = JSON.parse(path.exportJSON({ precision: 20 }))
|
||
// 在镂空或分割的区域中 路径方向是false
|
||
if (path.clockwise) {
|
||
polygonPoints.push(pathData[1]?.segments)
|
||
} else {
|
||
if (path.data.id && path.segments?.length) {
|
||
polygonHollowPoints.push(pathData[1]?.segments)
|
||
}
|
||
}
|
||
})
|
||
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(
|
||
useBottomToolsStore.getState().activeImage,
|
||
useTopToolsStore.getState().activeOperation,
|
||
[
|
||
useTopToolsStore.getState().pressA
|
||
? compoundPolygon.data.id
|
||
: myPath.data.id,
|
||
polygonPoints,
|
||
{
|
||
...initialDetail,
|
||
uid: usePermissionStore.getState().user_id,
|
||
comment: [
|
||
...useLabelStore.getState().labelDefaultComments,
|
||
],
|
||
create_timestamp: dayjs().unix(),
|
||
sub_attributes: subAttr,
|
||
image_id: useBottomToolsStore.getState().activeImageId,
|
||
category_id: Number(
|
||
useTopToolsStore.getState().activeOperation
|
||
),
|
||
},
|
||
polygonHollowPoints,
|
||
]
|
||
)
|
||
useRightToolsStore
|
||
.getState()
|
||
.pushPathId(
|
||
useTopToolsStore.getState().pressA
|
||
? compoundPolygon.data.id
|
||
: myPath.data.id
|
||
)
|
||
}
|
||
} else if (
|
||
compoundPolygon instanceof paper.Path &&
|
||
myPath.data.id &&
|
||
myPath.segments?.length
|
||
) {
|
||
let pathData = JSON.parse(myPath.exportJSON({ precision: 20 }))
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(
|
||
useBottomToolsStore.getState().activeImage,
|
||
useTopToolsStore.getState().activeOperation,
|
||
[
|
||
myPath.data.id,
|
||
// todo intersect+a | +a会变成CompoundPath 理论上已解决这个todo
|
||
[pathData[1]?.segments, ...[]],
|
||
{
|
||
...initialDetail,
|
||
uid: usePermissionStore.getState().user_id,
|
||
comment: [...useLabelStore.getState().labelDefaultComments],
|
||
create_timestamp: dayjs().unix(),
|
||
sub_attributes: subAttr,
|
||
image_id: useBottomToolsStore.getState().activeImageId,
|
||
category_id: Number(
|
||
useTopToolsStore.getState().activeOperation
|
||
),
|
||
},
|
||
[],
|
||
]
|
||
)
|
||
useRightToolsStore.getState().pushPathId(myPath.data.id)
|
||
}
|
||
|
||
// 如果该类别存在子属性，则弹出子属性对话框
|
||
if (category && category.sub_attributes.length) {
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category,
|
||
-30,
|
||
-30
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: myPath.data.imageId,
|
||
operationId: myPath.data.operationId,
|
||
id: myPath.data.id,
|
||
})
|
||
}
|
||
|
||
// 设置其为selectedPath
|
||
useObjectStore
|
||
.getState()
|
||
.updateSelectedPath(
|
||
useBottomToolsStore.getState().activeImage,
|
||
"ADD",
|
||
useTopToolsStore.getState().pressA
|
||
? compoundPolygon.data.id
|
||
: myPath.data.id
|
||
)
|
||
|
||
forceUpdate()
|
||
|
||
if (compoundPolygon instanceof paper.CompoundPath) {
|
||
myPath.remove()
|
||
myPath = null
|
||
points = []
|
||
} else {
|
||
compoundPolygon?.remove()
|
||
compoundPolygon = null
|
||
myPath = null
|
||
points = []
|
||
}
|
||
|
||
brushCircles.forEach((item) => {
|
||
item.remove()
|
||
})
|
||
|
||
useTopToolsStore.getState().setPressA(false)
|
||
return
|
||
}
|
||
} else {
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: false,
|
||
position: {
|
||
top: 0,
|
||
left: 0,
|
||
},
|
||
imageId: "",
|
||
operationId: "",
|
||
id: 0,
|
||
})
|
||
}
|
||
|
||
let temp = renderPath(usePaperStore.getState().group!, {})
|
||
let point = temp.globalToLocal(e.point)
|
||
|
||
// add point
|
||
points.push(point)
|
||
if (myPath) {
|
||
myPath.remove()
|
||
}
|
||
myPath = usePaperStore.getState().addBrush(
|
||
renderPath,
|
||
points,
|
||
{
|
||
// 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,
|
||
}
|
||
)
|
||
let circle = usePaperStore
|
||
.getState()
|
||
.getClickedCircle(
|
||
point,
|
||
brushCircles.length,
|
||
myPath?.data.id,
|
||
myPath?.data.blankColor
|
||
)
|
||
brushCircles.push(circle)
|
||
|
||
lastPoint = e.point
|
||
temp.remove()
|
||
}
|
||
|
||
brushTool.onMouseMove = (e: paper.MouseEvent) => {
|
||
handleMouseMove(e)
|
||
|
||
if (myPath) {
|
||
let temp = renderPath(usePaperStore.getState().group!, {})
|
||
let point = temp.globalToLocal(e.point)
|
||
myPath.remove()
|
||
myPath = usePaperStore.getState().addBrush(
|
||
renderPath,
|
||
points.concat(point),
|
||
{
|
||
// option
|
||
...usePaperStore.getState().toolOption,
|
||
fillColor: undefined,
|
||
closed: false,
|
||
},
|
||
{}
|
||
)
|
||
}
|
||
}
|
||
|
||
brushTool.onKeyDown = (e: paper.KeyEvent) => {
|
||
if (e.key === "escape" || e.key === "alt") {
|
||
if (myPath) {
|
||
brushCircles.forEach((item) => {
|
||
item.remove()
|
||
})
|
||
myPath.remove()
|
||
myPath = null
|
||
points = []
|
||
}
|
||
} else if (e.key === "delete") {
|
||
handleDelete()
|
||
forceUpdate()
|
||
} else if (e.key === "shift") {
|
||
handleShift(true)
|
||
}
|
||
}
|
||
brushTool.onKeyUp = (e: paper.KeyEvent) => {
|
||
if (e.key === "shift") {
|
||
handleShift(false)
|
||
}
|
||
}
|
||
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
brushTool: brushTool,
|
||
}))
|
||
},
|
||
addPoint: (
|
||
renderCircle: (paperGroup: paper.Group, option: any) => paper.Path.Circle,
|
||
point: paper.Point | undefined,
|
||
option: any,
|
||
data: any
|
||
) => {
|
||
let myCircle = renderCircle(usePaperStore.getState().group!, {
|
||
center: point,
|
||
...option,
|
||
strokeScaling: false,
|
||
})
|
||
const currentScaling = usePaperStore.getState().group!.scaling.x
|
||
const newScale = useTopToolsStore.getState().scale / currentScaling
|
||
myCircle.scale(newScale / currentScaling)
|
||
myCircle.data = Object.assign({ type: "circle", ...option }, data)
|
||
myCircle.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
|
||
if (e.event && e.event.button === 2) {
|
||
// console.log(e.event.clientX, e.event.clientY);
|
||
if (myCircle.data.id) {
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) =>
|
||
item.category_id.toString() === myCircle.data.operationId
|
||
)
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category!,
|
||
5,
|
||
5
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: myCircle.data.imageId,
|
||
operationId: myCircle.data.operationId,
|
||
id: myCircle.data.id,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
myCircle.onMouseEnter = (e: paper.MouseEvent) => {
|
||
if (usePaperStore.getState().mode === "pan") {
|
||
e.target.strokeWidth += 2
|
||
if (usePaperStore.getState().el)
|
||
usePaperStore.getState().el!.style.cursor = "move"
|
||
}
|
||
}
|
||
myCircle.onMouseLeave = (e: paper.MouseEvent) => {
|
||
if (usePaperStore.getState().mode === "pan") {
|
||
e.target.strokeWidth -= 2
|
||
if (usePaperStore.getState().el)
|
||
usePaperStore.getState().el!.style.cursor = "default"
|
||
}
|
||
}
|
||
return myCircle
|
||
},
|
||
addPointLine: (
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
points: paper.Point[] | undefined,
|
||
option: any,
|
||
data: any
|
||
) => {
|
||
let myCircleLine = renderPath(
|
||
usePaperStore.getState().group!,
|
||
Object.assign(
|
||
{
|
||
...option,
|
||
fillColor: undefined,
|
||
closed: false,
|
||
dashArray: [4, 4],
|
||
strokeScaling: false,
|
||
},
|
||
{ segments: points }
|
||
)
|
||
)
|
||
myCircleLine.data = Object.assign({ type: "point", ...option }, data)
|
||
return myCircleLine
|
||
},
|
||
|
||
initPointTool: (
|
||
paperPointTool: paper.Tool,
|
||
renderCircle: (paperGroup: paper.Group, option: any) => paper.Path.Circle,
|
||
renderPath: (paperGroup: paper.Group, option: any) => paper.Path,
|
||
forceUpdate: DispatchWithoutAction
|
||
) => {
|
||
let myCircle: paper.Path.Circle[] = []
|
||
let myCircleText: paper.PointText[] = []
|
||
let textNumbers: number[] = []
|
||
let myPath: paper.Path | null
|
||
let lastPoint: paper.Point
|
||
let points: paper.Point[] = []
|
||
|
||
let pointTool = paperPointTool
|
||
|
||
pointTool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
|
||
if (e.event.button !== 0) return
|
||
|
||
// 绘制时去除选中辅助
|
||
if (usePaperSupportStore.getState().selectedCircles.length) {
|
||
usePaperSupportStore.getState().clearAll()
|
||
}
|
||
|
||
// doubleclick
|
||
if (lastPoint && lastPoint.x === e.point.x && lastPoint.y === e.point.y) {
|
||
if (myPath) {
|
||
// 去除超出图片边界的部分
|
||
myCircle = myCircle.filter((circle) => {
|
||
if (circle.data.id === myPath!.data.id) {
|
||
if (
|
||
usePaperStore
|
||
.getState()
|
||
.rasterPath!.bounds.contains(circle.bounds.center)
|
||
) {
|
||
return true
|
||
} else {
|
||
circle.remove()
|
||
return false
|
||
}
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
myPath.segments = myPath.segments.filter((segment) => {
|
||
return usePaperStore
|
||
.getState()
|
||
.rasterPath!.bounds.contains(segment.point)
|
||
})
|
||
// 去除超出图片边界的部分 end
|
||
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) =>
|
||
item.category_id.toString() ===
|
||
useTopToolsStore.getState().activeOperation
|
||
)
|
||
let label_class = category?.label_class || ""
|
||
let subAttr = Object.assign(
|
||
{},
|
||
useTopToolsStore.getState().subAttributes[label_class]
|
||
)
|
||
|
||
// 存值
|
||
// let circles = usePaperStore.getState().group!.getItems({
|
||
// data: { type: "circle", id: myPath.data.id },
|
||
// });
|
||
let circles = myCircle.filter((item) => {
|
||
return item.data.id === myPath!.data.id
|
||
})
|
||
if (circles.length) {
|
||
let segments = circles.map((circle, circleIndex) => {
|
||
// 重新设置显示数字
|
||
circle.data.text = circleIndex + 1
|
||
return {
|
||
point: [circle.position.x, circle.position.y],
|
||
attributes: circle.data.attributes,
|
||
}
|
||
})
|
||
useLabelStore
|
||
.getState()
|
||
.setOperation(
|
||
useBottomToolsStore.getState().activeImage,
|
||
useTopToolsStore.getState().activeOperation,
|
||
[
|
||
myPath.data.id,
|
||
// 关键点 没有多区域
|
||
[segments.map((item) => item.point)],
|
||
{
|
||
...initialDetail,
|
||
uid: usePermissionStore.getState().user_id,
|
||
comment: [...useLabelStore.getState().labelDefaultComments],
|
||
create_timestamp: dayjs().unix(),
|
||
sub_attributes: subAttr,
|
||
image_id: useBottomToolsStore.getState().activeImageId,
|
||
category_id: Number(
|
||
useTopToolsStore.getState().activeOperation
|
||
),
|
||
circles: segments,
|
||
},
|
||
[],
|
||
]
|
||
)
|
||
|
||
// 如果该类别存在子属性，则弹出子属性对话框
|
||
if (category && category.sub_attributes.length) {
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category,
|
||
-30,
|
||
-30
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: myPath.data.imageId,
|
||
operationId: myPath.data.operationId,
|
||
id: myPath.data.id,
|
||
})
|
||
}
|
||
|
||
// 设置其为selectedPath
|
||
useObjectStore
|
||
.getState()
|
||
.updateSelectedPath(
|
||
useBottomToolsStore.getState().activeImage,
|
||
"ADD",
|
||
myPath.data.id
|
||
)
|
||
useRightToolsStore.getState().pushPathId(myPath.data.id)
|
||
|
||
forceUpdate()
|
||
}
|
||
|
||
myPath = null
|
||
points = []
|
||
textNumbers = []
|
||
myCircleText.forEach((item) => {
|
||
item.remove()
|
||
})
|
||
myCircleText = []
|
||
// 避免后续按键删除已绘制的circle
|
||
myCircle = []
|
||
|
||
return
|
||
}
|
||
} else {
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: false,
|
||
position: {
|
||
top: 0,
|
||
left: 0,
|
||
},
|
||
imageId: "",
|
||
operationId: "",
|
||
id: 0,
|
||
})
|
||
}
|
||
|
||
let temp = renderCircle(usePaperStore.getState().group!, {})
|
||
let point = temp.globalToLocal(e.point)
|
||
let text = textNumbers.reduce((a, b) => Math.max(a, b), 0) + 1
|
||
|
||
let circle = usePaperStore.getState().addPoint(
|
||
renderCircle,
|
||
point,
|
||
{
|
||
fillColor: null,
|
||
// center: point,
|
||
strokeColor: usePaperStore.getState().toolOption?.strokeColor,
|
||
radius: 3,
|
||
strokeScaling: false,
|
||
},
|
||
{
|
||
imageId: useBottomToolsStore.getState().activeImage,
|
||
operationId: useTopToolsStore.getState().activeOperation,
|
||
text: text,
|
||
id:
|
||
useRightToolsStore
|
||
.getState()
|
||
.pathIds.reduce((a, b) => Math.max(a, b), 0) + 1,
|
||
}
|
||
)
|
||
// add circle
|
||
myCircle.push(circle)
|
||
let pointText = new paper.PointText({
|
||
parent: usePaperStore.getState().group!,
|
||
point: point,
|
||
content: text.toString(),
|
||
justification: "right",
|
||
fillColor: usePaperStore.getState().toolOption?.strokeColor,
|
||
fontSize: 12,
|
||
})
|
||
const currentScaling = usePaperStore.getState().group!.scaling.x
|
||
const newScale = useTopToolsStore.getState().scale / currentScaling
|
||
pointText.scale(newScale / currentScaling)
|
||
textNumbers.push(text)
|
||
myCircleText.push(pointText)
|
||
// add point
|
||
points.push(point)
|
||
|
||
if (myPath) {
|
||
myPath.remove()
|
||
}
|
||
myPath = usePaperStore.getState().addPointLine(
|
||
renderPath,
|
||
points,
|
||
{
|
||
// 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,
|
||
}
|
||
)
|
||
|
||
lastPoint = e.point
|
||
|
||
// group.current?.addChild(myCircle);
|
||
temp.remove()
|
||
}
|
||
pointTool.onMouseMove = (e: paper.MouseEvent) => {
|
||
handleMouseMove(e)
|
||
|
||
if (myPath) {
|
||
let temp = renderPath(usePaperStore.getState().group!, {})
|
||
let point = temp.globalToLocal(e.point)
|
||
myPath.remove()
|
||
myPath = usePaperStore.getState().addPointLine(
|
||
renderPath,
|
||
points.concat(point),
|
||
{
|
||
// option
|
||
...usePaperStore.getState().toolOption,
|
||
fillColor: undefined,
|
||
closed: false,
|
||
},
|
||
{}
|
||
)
|
||
}
|
||
}
|
||
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 = []
|
||
}
|
||
} else if (e.key === "delete") {
|
||
handleDelete()
|
||
forceUpdate()
|
||
} else if (e.key === "shift") {
|
||
handleShift(true)
|
||
}
|
||
}
|
||
pointTool.onKeyUp = (e: paper.KeyEvent) => {
|
||
if (e.key === "shift") {
|
||
handleShift(false)
|
||
}
|
||
}
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
pointTool: pointTool,
|
||
}))
|
||
},
|
||
getPointCircle: (
|
||
point: paper.Point,
|
||
index: number,
|
||
id: number,
|
||
color: any
|
||
) => {
|
||
let circle: paper.Path.Circle = new paper.Path.Circle(
|
||
Object.assign(
|
||
{ parent: usePaperStore.getState().group!, center: point },
|
||
{
|
||
fillColor: color,
|
||
// center: point,
|
||
strokeColor: usePaperStore.getState().toolOption?.strokeColor,
|
||
radius: 3,
|
||
strokeScaling: false,
|
||
},
|
||
{
|
||
data: {
|
||
type: "circle",
|
||
fillColor: color,
|
||
strokeColor: usePaperStore.getState().toolOption?.strokeColor,
|
||
imageId: useBottomToolsStore.getState().activeImage,
|
||
// bug
|
||
operationId: useTopToolsStore.getState().activeOperation,
|
||
text: +index + 1,
|
||
id: id,
|
||
},
|
||
}
|
||
)
|
||
)
|
||
const currentScaling = usePaperStore.getState().group!.scaling.x
|
||
const newScale = useTopToolsStore.getState().scale / currentScaling
|
||
circle.scale(newScale / currentScaling)
|
||
circle.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
|
||
if (e.event && e.event.button === 2) {
|
||
// console.log(e.event.clientX, e.event.clientY);
|
||
if (circle.data.id) {
|
||
let category = useTopToolsStore
|
||
.getState()
|
||
.objectOperations.find(
|
||
(item) => item.category_id.toString() === circle.data.operationId
|
||
)
|
||
const { top, left } = getShowContextMenuPosition(
|
||
e.point,
|
||
category!,
|
||
5,
|
||
5
|
||
)
|
||
useOtherToolsStore.getState().setShowContextMenu({
|
||
showContextMenu: true,
|
||
position: { top, left },
|
||
imageId: circle.data.imageId,
|
||
operationId: circle.data.operationId,
|
||
id: circle.data.id,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
circle.onMouseEnter = (e: paper.MouseEvent) => {
|
||
if (usePaperStore.getState().mode === "pan") {
|
||
e.target.strokeWidth += 2
|
||
if (usePaperStore.getState().el)
|
||
usePaperStore.getState().el!.style.cursor = "move"
|
||
}
|
||
}
|
||
circle.onMouseLeave = (e: paper.MouseEvent) => {
|
||
if (usePaperStore.getState().mode === "pan") {
|
||
e.target.strokeWidth -= 2
|
||
if (usePaperStore.getState().el)
|
||
usePaperStore.getState().el!.style.cursor = "default"
|
||
}
|
||
}
|
||
return circle
|
||
},
|
||
initSupportTool: (tool, renderPath) => {
|
||
let points: Array<[number, number]> = []
|
||
let tags: number[] = []
|
||
|
||
tool.onMouseDown = (e: { event: MouseEvent; point: paper.Point }) => {
|
||
let point = usePaperStore.getState().group!.globalToLocal(e.point)
|
||
if (e.event.button === 1) return
|
||
points.push([point.x, point.y])
|
||
tags.push(e.event.button === 0 ? 1 : 0)
|
||
renderPath(points, tags, points.length === 1)
|
||
}
|
||
|
||
tool.onKeyDown = (e: paper.KeyEvent) => {
|
||
if (e.key === "escape") {
|
||
points = []
|
||
tags = []
|
||
clearSupportAnnotationItem()
|
||
usePaperStore.getState().setPaperMode("pan")
|
||
}
|
||
if (e.key === "f1") {
|
||
points = []
|
||
tags = []
|
||
}
|
||
}
|
||
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
supportTool: tool,
|
||
}))
|
||
},
|
||
getClickedCircle: (
|
||
point: paper.Point,
|
||
index: number,
|
||
id: number,
|
||
color: any
|
||
) => {
|
||
const currentScaling = usePaperStore.getState().group!.scaling.x
|
||
const newScale = useTopToolsStore.getState().scale / currentScaling
|
||
let circle: paper.Path.Circle = new paper.Path.Circle(
|
||
Object.assign(
|
||
{ parent: usePaperStore.getState().group!, center: point },
|
||
{
|
||
fillColor: color,
|
||
// center: point,
|
||
strokeColor: "#FFF",
|
||
radius: 3,
|
||
strokeScaling: false,
|
||
},
|
||
{
|
||
data: { index, type: "pathCircle", id },
|
||
}
|
||
)
|
||
)
|
||
circle.scale(newScale / currentScaling)
|
||
circle.onMouseEnter = (_e: any) => {
|
||
circle.strokeWidth = 4
|
||
circle.fillColor = new paper.Color("#FFF")
|
||
}
|
||
circle.onMouseLeave = (_e: any) => {
|
||
circle.strokeWidth = 2
|
||
circle.fillColor = color
|
||
}
|
||
return circle
|
||
},
|
||
getBuffPath: (item: paper.Segment, index: number, id: number, color: any) => {
|
||
if (!item.next) return null
|
||
let bufferPath: paper.Path = new paper.Path(
|
||
Object.assign(
|
||
{
|
||
parent: usePaperStore.getState().group!,
|
||
segments: [item.point, item.next],
|
||
strokeColor: color, // 设置为透明，以便不可见
|
||
strokeScaling: false,
|
||
strokeWidth: 4, // 设置一个较大的strokeWidth作为缓冲区
|
||
strokeCap: "butt",
|
||
onSelect: function (event: { stopPropagation: () => void }) {
|
||
event.stopPropagation() // 阻止事件冒泡
|
||
},
|
||
},
|
||
{
|
||
data: { index, type: "pathBuff", id },
|
||
}
|
||
)
|
||
)
|
||
// 复制段的handleIn和handleOut到缓冲路径
|
||
// bufferPath.segments[0].handleIn = item.handleIn;
|
||
// bufferPath.segments[1].handleOut = item.handleOut;
|
||
let edge: paper.Path | null
|
||
// 鼠标移入时高亮显示
|
||
bufferPath.onMouseEnter = function (event: {
|
||
stopPropagation: () => void
|
||
}) {
|
||
if (!edge) {
|
||
edge = new paper.Path(
|
||
Object.assign(
|
||
{
|
||
parent: usePaperStore.getState().group!,
|
||
segments: [
|
||
bufferPath.segments[0].point,
|
||
bufferPath.segments[1].point,
|
||
],
|
||
strokeColor: "white", // 初始颜色与原始路径相同
|
||
strokeWidth: 2,
|
||
strokeScaling: false,
|
||
strokeCap: "butt",
|
||
},
|
||
{
|
||
data: { index, type: "pathBuff" },
|
||
}
|
||
)
|
||
)
|
||
// edge.bringToFront();
|
||
event.stopPropagation() // 阻止事件冒泡
|
||
}
|
||
}
|
||
|
||
// 鼠标移出时取消高亮
|
||
bufferPath.onMouseLeave = function (event: {
|
||
stopPropagation: () => void
|
||
}) {
|
||
edge?.remove()
|
||
edge = null
|
||
event.stopPropagation() // 阻止事件冒泡
|
||
}
|
||
return bufferPath
|
||
},
|
||
setPaperMode: (modeParam) => {
|
||
set((state: PaperState) => ({
|
||
...state,
|
||
mode: modeParam,
|
||
}))
|
||
|
||
switch (modeParam) {
|
||
case "pan":
|
||
usePaperStore.getState().panTool?.activate()
|
||
if (usePaperStore.getState().el) {
|
||
usePaperStore.getState().el!.style.cursor = "default"
|
||
}
|
||
break
|
||
case "polygon":
|
||
usePaperStore.getState().polygonTool?.activate()
|
||
if (usePaperStore.getState().el) {
|
||
usePaperStore.getState().el!.style.cursor = "crosshair"
|
||
}
|
||
break
|
||
case "rectangle":
|
||
usePaperStore.getState().rectangleTool?.activate()
|
||
if (usePaperStore.getState().el) {
|
||
usePaperStore.getState().el!.style.cursor = "crosshair"
|
||
}
|
||
break
|
||
case "brush":
|
||
usePaperStore.getState().brushTool?.activate()
|
||
if (usePaperStore.getState().el) {
|
||
usePaperStore.getState().el!.style.cursor = "crosshair"
|
||
}
|
||
break
|
||
case "point":
|
||
usePaperStore.getState().pointTool?.activate()
|
||
if (usePaperStore.getState().el) {
|
||
usePaperStore.getState().el!.style.cursor = "crosshair"
|
||
}
|
||
break
|
||
case "support":
|
||
usePaperStore.getState().supportTool?.activate()
|
||
if (usePaperStore.getState().el) {
|
||
usePaperStore.getState().el!.style.cursor = "crosshair"
|
||
}
|
||
break
|
||
default:
|
||
usePaperStore.getState().viewTool?.activate()
|
||
break
|
||
}
|
||
},
|
||
setGroupScale: (scale: number) => {
|
||
if (usePaperStore.getState().group) {
|
||
const currentScaling = usePaperStore.getState().group!.scaling.x
|
||
const newScale = scale / currentScaling
|
||
const point = usePositionStore.getState().currentMousePosition
|
||
|
||
if (point[0] !== 0 || point[1] !== 0)
|
||
usePaperStore.getState().group!.scale(newScale, new paper.Point(point))
|
||
else usePaperStore.getState().group!.scale(newScale)
|
||
|
||
let texts = usePaperStore.getState().group!.getItems({
|
||
data: { type: "text" },
|
||
}) as paper.Path[]
|
||
texts.forEach((text) => {
|
||
text.scale(1 / newScale)
|
||
})
|
||
|
||
let pathCircles = usePaperStore.getState().group!.getItems({
|
||
data: { type: "pathCircle" },
|
||
}) as paper.Path[]
|
||
pathCircles.forEach((pathCircle) => {
|
||
pathCircle.scale(1 / newScale)
|
||
})
|
||
let circles = usePaperStore.getState().group!.getItems({
|
||
data: { type: "circle" },
|
||
}) as paper.Path[]
|
||
circles.forEach((circle) => {
|
||
circle.scale(1 / newScale)
|
||
})
|
||
}
|
||
},
|
||
getAll: () => {
|
||
let polygon = usePaperStore.getState().group!.getItems({
|
||
data: { type: "polygon" },
|
||
}) as paper.Path[]
|
||
return polygon
|
||
},
|
||
getItemById: (id: number) => {
|
||
// let item = usePaperStore.getState().group!.getItems({
|
||
// id: id,
|
||
// }) as paper.Path[];
|
||
let savedItem: paper.Path[] = (
|
||
usePaperStore.getState().group!.getItems({
|
||
data: { id: id },
|
||
}) as paper.Path[]
|
||
).filter((item) =>
|
||
["rectangle", "polygon", "brush", "point"].includes(item.data.type)
|
||
)
|
||
if (savedItem?.[0]) {
|
||
return savedItem[0]
|
||
} else {
|
||
return null
|
||
}
|
||
},
|
||
getItemsById: (id: number) => {
|
||
// let item = usePaperStore.getState().group!.getItems({
|
||
// id: id,
|
||
// }) as paper.Path[];
|
||
let savedItem = usePaperStore.getState().group!.getItems({
|
||
data: { id: id },
|
||
}) as paper.Path[]
|
||
if (savedItem?.length) {
|
||
return savedItem
|
||
} else {
|
||
return []
|
||
}
|
||
},
|
||
}))
|