diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js index 4514cb7e..f6dbf3ce 100644 --- a/src/hooks/usePolygon.js +++ b/src/hooks/usePolygon.js @@ -847,7 +847,8 @@ export const usePolygon = () => { // innerLine의 type을 polygonLine의 type으로 변경 if (polygonLine.attributes?.type && innerLine.attributes) { polygonLine.need = false - innerLine.attributes.type = polygonLine.attributes.type + innerLine.attributes = polygonLine.attributes + innerLine.direction = polygonLine.direction innerLine.attributes.isStart = true } } @@ -903,6 +904,28 @@ export const usePolygon = () => { line.endPoint = endPoint }) + // polygonLines과 innerLines에서 startPoint, endPoint가 같은 라인을 innerLines에서 제거하고 canvas에서도 제거 + const linesToRemove = [] + innerLines = innerLines.filter((innerLine) => { + const shouldRemove = polygonLines.some((polygonLine) => { + return ( + (isSamePoint(innerLine.startPoint, polygonLine.startPoint) && isSamePoint(innerLine.endPoint, polygonLine.endPoint)) || + (isSamePoint(innerLine.startPoint, polygonLine.endPoint) && isSamePoint(innerLine.endPoint, polygonLine.startPoint)) + ) + }) + if (shouldRemove) { + linesToRemove.push(innerLine) + } + return !shouldRemove + }) + + // 중복된 라인들을 canvas에서 제거 + linesToRemove.forEach((line) => { + canvas.remove(line) + }) + + canvas.renderAll() + /*polygonLines.forEach((line) => { line.set({ strokeWidth: 10 }) canvas.add(line) @@ -1251,7 +1274,10 @@ export const usePolygon = () => { return ( index === self.findIndex((l) => { - return isSamePoint(l.startPoint, line.startPoint) && isSamePoint(l.endPoint, line.endPoint) + return ( + (isSamePoint(l.startPoint, line.startPoint) && isSamePoint(l.endPoint, line.endPoint)) || + (isSamePoint(l.startPoint, line.endPoint) && isSamePoint(l.endPoint, line.startPoint)) + ) }) ) })