From d4241c3c16d0f0a1a51d4ba880912a14543f3bfc Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Mon, 3 Feb 2025 18:11:14 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A7=80=EB=B6=95=ED=95=A0=EB=8B=B9=20?= =?UTF-8?q?=ED=9B=84=20=ED=9D=90=EB=A6=84=EB=B0=A9=ED=96=A5=20=ED=91=9C?= =?UTF-8?q?=EC=8B=9C=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/usePolygon.js | 73 +++++++++++++++++++++-------------------- 1 file changed, 37 insertions(+), 36 deletions(-) diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js index e1f127a5..532f2aac 100644 --- a/src/hooks/usePolygon.js +++ b/src/hooks/usePolygon.js @@ -192,6 +192,7 @@ export const usePolygon = () => { } let centerPoint = { x: polygon.left, y: polygon.top } + const { width, height } = polygon let stickeyPoint const polygonMaxX = Math.max(...polygon.getCurrentPoints().map((point) => point.x)) @@ -202,58 +203,58 @@ export const usePolygon = () => { switch (direction) { case 'north': points = [ - { 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 }, + { 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 }, ] - stickeyPoint = { x: centerPoint.x, y: polygonMinY - 110 } + stickeyPoint = { x: centerPoint.x - width / 2, y: polygonMinY - 110 } break case 'south': points = [ - { 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 }, + { 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 }, ] - stickeyPoint = { x: centerPoint.x, y: polygonMaxY + 110 } + stickeyPoint = { x: centerPoint.x + width / 2, y: polygonMaxY + 110 } break case 'west': points = [ - { 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 }, + { 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 }, ] - stickeyPoint = { x: polygonMinX - 110, y: centerPoint.y } + stickeyPoint = { x: polygonMinX - 110, y: centerPoint.y - height / 2 } break case 'east': points = [ - { 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 }, + { 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 }, ] - stickeyPoint = { x: polygonMaxX + 110, y: centerPoint.y } + stickeyPoint = { x: polygonMaxX + 110, y: centerPoint.y + height / 2 } break }