qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

화살표 위치 수정

Browse Source
This commit is contained in:
hyojun.choi 2025-02-07 18:32:09 +09:00
parent 3200e201c4
commit 0a3272704d
1 changed files with 68 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/hooks/usePolygon.js
View File

@ -205,62 +205,94 @@ export const usePolygon = () => {
const polygonMinX = Math.min(...polygon.getCurrentPoints().map((point) => point.x))
const polygonMaxY = Math.max(...polygon.getCurrentPoints().map((point) => point.y))
const polygonMinY = Math.min(...polygon.getCurrentPoints().map((point) => point.y))
const lines = polygon.lines
let centerPoints
switch (direction) {
case 'south':
// lines중 가장 아래에 있는 라인을 찾는다.
const line = lines.reduce((acc, cur) => {
return acc.y2 > cur.y2 ? acc : cur
}, lines[0])
centerPoint = { x: (line.x2 + line.x1) / 2, y: Math.max(line.y1, line.y2) }
break
case 'north':
// lines중 가장 위에 있는 라인을 찾는다.
const line2 = lines.reduce((acc, cur) => {
return acc.y2 < cur.y2 ? acc : cur
}, lines[0])
centerPoint = { x: (line2.x2 + line2.x1) / 2, y: Math.min(line2.y1, line2.y2) }
break
case 'west':
// lines중 가장 왼쪽에 있는 라인을 찾는다.
const line3 = lines.reduce((acc, cur) => {
return acc.x2 < cur.x2 ? acc : cur
}, lines[0])
centerPoint = { x: Math.min(line3.x1, line3.x2), y: (line3.y1 + line3.y2) / 2 }
break
case 'east':
// lines중 가장 오른쪽에 있는 라인을 찾는다.
const line4 = lines.reduce((acc, cur) => {
return acc.x2 > cur.x2 ? acc : cur
}, lines[0])
centerPoint = { x: Math.max(line4.x1, line4.x2), y: (line4.y1 + line4.y2) / 2 }
break
}
switch (direction) {
case 'north':
points = [
{ x: centerPoint.x - width / 2, y: polygonMinY - 50 },
{ x: centerPoint.x + 20 - width / 2, y: polygonMinY - 50 },
{ x: centerPoint.x + 20 - width / 2, y: polygonMinY - 80 },
{ x: centerPoint.x + 50 - width / 2, y: polygonMinY - 80 },
{ x: centerPoint.x - width / 2, y: polygonMinY - 110 },
{ x: centerPoint.x - 50 - width / 2, y: polygonMinY - 80 },
{ x: centerPoint.x - 20 - width / 2, y: polygonMinY - 80 },
{ x: centerPoint.x - 20 - width / 2, y: polygonMinY - 50 },
{ x: centerPoint.x, y: polygonMinY - 50 },
{ x: centerPoint.x + 20, y: polygonMinY - 50 },
{ x: centerPoint.x + 20, y: polygonMinY - 80 },
{ x: centerPoint.x + 50, y: polygonMinY - 80 },
{ x: centerPoint.x, y: polygonMinY - 110 },
{ x: centerPoint.x - 50, y: polygonMinY - 80 },
{ x: centerPoint.x - 20, y: polygonMinY - 80 },
{ x: centerPoint.x - 20, y: polygonMinY - 50 },
]
stickeyPoint = { x: centerPoint.x - width / 2, y: polygonMinY - 110 }
stickeyPoint = { x: centerPoint.x, y: polygonMinY - 110 }
break
case 'south':
points = [
{ x: centerPoint.x + width / 2, y: polygonMaxY + 50 },
{ x: centerPoint.x + 20 + width / 2, y: polygonMaxY + 50 },
{ x: centerPoint.x + 20 + width / 2, y: polygonMaxY + 80 },
{ x: centerPoint.x + 50 + width / 2, y: polygonMaxY + 80 },
{ x: centerPoint.x + width / 2, y: polygonMaxY + 110 },
{ x: centerPoint.x - 50 + width / 2, y: polygonMaxY + 80 },
{ x: centerPoint.x - 20 + width / 2, y: polygonMaxY + 80 },
{ x: centerPoint.x - 20 + width / 2, y: polygonMaxY + 50 },
{ x: centerPoint.x, y: polygonMaxY + 50 },
{ x: centerPoint.x + 20, y: polygonMaxY + 50 },
{ x: centerPoint.x + 20, y: polygonMaxY + 80 },
{ x: centerPoint.x + 50, y: polygonMaxY + 80 },
{ x: centerPoint.x, y: polygonMaxY + 110 },
{ x: centerPoint.x - 50, y: polygonMaxY + 80 },
{ x: centerPoint.x - 20, y: polygonMaxY + 80 },
{ x: centerPoint.x - 20, y: polygonMaxY + 50 },
]
stickeyPoint = { x: centerPoint.x + width / 2, y: polygonMaxY + 110 }
stickeyPoint = { x: centerPoint.x, y: polygonMaxY + 110 }
break
case 'west':
points = [
{ x: polygonMinX - 50, y: centerPoint.y - height / 2 },
{ x: polygonMinX - 50, y: centerPoint.y + 20 - height / 2 },
{ x: polygonMinX - 80, y: centerPoint.y + 20 - height / 2 },
{ x: polygonMinX - 80, y: centerPoint.y + 50 - height / 2 },
{ x: polygonMinX - 110, y: centerPoint.y - height / 2 },
{ x: polygonMinX - 80, y: centerPoint.y - 50 - height / 2 },
{ x: polygonMinX - 80, y: centerPoint.y - 20 - height / 2 },
{ x: polygonMinX - 50, y: centerPoint.y - 20 - height / 2 },
{ x: polygonMinX - 50, y: centerPoint.y },
{ x: polygonMinX - 50, y: centerPoint.y + 20 },
{ x: polygonMinX - 80, y: centerPoint.y + 20 },
{ x: polygonMinX - 80, y: centerPoint.y + 50 },
{ x: polygonMinX - 110, y: centerPoint.y },
{ x: polygonMinX - 80, y: centerPoint.y - 50 },
{ x: polygonMinX - 80, y: centerPoint.y - 20 },
{ x: polygonMinX - 50, y: centerPoint.y - 20 },
]
stickeyPoint = { x: polygonMinX - 110, y: centerPoint.y - height / 2 }
stickeyPoint = { x: polygonMinX - 110, y: centerPoint.y }
break
case 'east':
points = [
{ x: polygonMaxX + 50, y: centerPoint.y + height / 2 },
{ x: polygonMaxX + 50, y: centerPoint.y + 20 + height / 2 },
{ x: polygonMaxX + 80, y: centerPoint.y + 20 + height / 2 },
{ x: polygonMaxX + 80, y: centerPoint.y + 50 + height / 2 },
{ x: polygonMaxX + 110, y: centerPoint.y + height / 2 },
{ x: polygonMaxX + 80, y: centerPoint.y - 50 + height / 2 },
{ x: polygonMaxX + 80, y: centerPoint.y - 20 + height / 2 },
{ x: polygonMaxX + 50, y: centerPoint.y - 20 + height / 2 },
{ x: polygonMaxX + 50, y: centerPoint.y },
{ x: polygonMaxX + 50, y: centerPoint.y + 20 },
{ x: polygonMaxX + 80, y: centerPoint.y + 20 },
{ x: polygonMaxX + 80, y: centerPoint.y + 50 },
{ x: polygonMaxX + 110, y: centerPoint.y },
{ x: polygonMaxX + 80, y: centerPoint.y - 50 },
{ x: polygonMaxX + 80, y: centerPoint.y - 20 },
{ x: polygonMaxX + 50, y: centerPoint.y - 20 },
]
stickeyPoint = { x: polygonMaxX + 110, y: centerPoint.y + height / 2 }
stickeyPoint = { x: polygonMaxX + 110, y: centerPoint.y }
break
}