From c9171b25e3c0ba4eb4b0edb1c69c083444854355 Mon Sep 17 00:00:00 2001 From: Minju9187 Date: Wed, 4 Dec 2024 21:44:47 +0900 Subject: [PATCH 1/8] =?UTF-8?q?refactor=20:=20=EB=85=B8=EB=93=9C=20?= =?UTF-8?q?=EC=9E=AC=EC=A0=95=EB=A0=AC=20=EB=A1=9C=EC=A7=81=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(=20=EC=A2=80=20=EB=8D=94=20=EA=B2=B9=EC=B9=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20)=20&=20switch=20?= =?UTF-8?q?=EB=AC=B8=EC=9C=BC=EB=A1=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../utils/initializeNodePosition.ts | 60 +++++++++++-------- 1 file changed, 36 insertions(+), 24 deletions(-) diff --git a/client/src/konva_mindmap/utils/initializeNodePosition.ts b/client/src/konva_mindmap/utils/initializeNodePosition.ts index bd611a6d..38839153 100644 --- a/client/src/konva_mindmap/utils/initializeNodePosition.ts +++ b/client/src/konva_mindmap/utils/initializeNodePosition.ts @@ -52,32 +52,44 @@ export default function initializeNodePosition(data: NodeData) { const depth = node.depth; const radius = NODE_RADIUS(depth); - if (depth === 2) { - const angle = (360 / length) * index; - const radianAngle = (Math.PI / 180) * angle; - xPos += radius * Math.cos(radianAngle) * 8; - yPos += radius * Math.sin(radianAngle) * 8; - } else if (depth === 3) { - const divideAngle = 180 / (length + 1); - const adjustedAngle = divideAngle * (index + 1) - 90; - const { x, y } = calculateVector(rootLocation, { x: xPos, y: yPos }, adjustedAngle, 360); - xPos += x; - yPos += y; - } else if (depth === 4) { - const divideAngle = 180 / (length + 3); - const adjustedAngle = divideAngle * (index + 2) - 90; - const { x, y } = calculateVector(rootLocation, { x: xPos, y: yPos }, adjustedAngle, 360); - xPos += x; - yPos += y; - } else if (depth === 5) { - const ancestor = findAncestor(data, nodeId, 2); - const divideAngle = 180 / (length + 1); - const adjustedAngle = divideAngle * (index + 1) - 90; - const calculatedDistance = Math.sqrt((2 * radius * radius) / (1 - Math.cos((Math.PI / 180) * divideAngle))) * 1.8; - const maxDistance = Math.max(calculatedDistance, 200); - const { x, y } = calculateVector(ancestor.location, { x: xPos, y: yPos }, adjustedAngle, maxDistance); + const applyVectorAdjustment = (origin: { x: number; y: number }, angle: number, distance: number) => { + const { x, y } = calculateVector(origin, { x: xPos, y: yPos }, angle, distance); xPos += x; yPos += y; + }; + + switch (depth) { + case 2: { + const angle = (360 / length) * index; + const radianAngle = (Math.PI / 180) * angle; + xPos += radius * Math.cos(radianAngle) * 8; + yPos += radius * Math.sin(radianAngle) * 8; + break; + } + case 3: { + const divideAngle = 180 / (length + 1); + const adjustedAngle = divideAngle * (index + 1) - 90; + applyVectorAdjustment(rootLocation, adjustedAngle, 360); + break; + } + case 4: { + const divideAngle = 180 / (length + 3); + const adjustedAngle = divideAngle * (index + 2) - 90; + applyVectorAdjustment(rootLocation, adjustedAngle, 360); + break; + } + case 5: { + const ancestor = findAncestor(data, nodeId, 2); + const divideAngle = 180 / (length + 1); + const adjustedAngle = divideAngle * (index + 1) - 90; + const calculatedDistance = + Math.sqrt((2 * radius * radius) / (1 - Math.cos((Math.PI / 180) * divideAngle))) * 1.8; + const maxDistance = Math.max(calculatedDistance, 200); + applyVectorAdjustment(ancestor.location, adjustedAngle, maxDistance); + break; + } + default: + break; } node.location.x = xPos; node.location.y = yPos; From 5e8fc21d97529d23bc5f2d03ab50bbf22d8f6682 Mon Sep 17 00:00:00 2001 From: Minju9187 Date: Wed, 4 Dec 2024 21:45:49 +0900 Subject: [PATCH 2/8] =?UTF-8?q?refactor=20:=20=EB=85=B8=EB=93=9C=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=9C=84=EC=B9=98=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(=20=EA=B3=A0=EC=A0=95=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=EC=97=90=EC=84=9C=20depth=EB=B3=84=EB=A1=9C=20?= =?UTF-8?q?=EB=8B=A4=EB=A5=B4=EA=B2=8C=20=EC=88=98=EC=A0=95=20)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../konva_mindmap/utils/getNewNodePosition.ts | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/client/src/konva_mindmap/utils/getNewNodePosition.ts b/client/src/konva_mindmap/utils/getNewNodePosition.ts index 3f665ab1..b27b2f4f 100644 --- a/client/src/konva_mindmap/utils/getNewNodePosition.ts +++ b/client/src/konva_mindmap/utils/getNewNodePosition.ts @@ -1,21 +1,29 @@ -import { Node, NodeData } from "@/types/Node"; +import { NodeData } from "@/types/Node"; import { findRootNodeKey } from "./findRootNodeKey"; import { calculateVector } from "./vector"; +import { NODE_RADIUS } from "./nodeAttrs"; -export function getNewNodePosition(children: number[], data: NodeData, parentNode: Node) { +const lineLength = [360, 360, 360, 270]; +const angle = [104, 105, 103, 104]; +const distance = [240, 200, 160, 120]; + +export function getNewNodePosition(data: NodeData, nodeId: number) { const rootKey = findRootNodeKey(data); + const node = data[nodeId]; + const children = node.children; + const depth = node.depth; if (!children.length) { - if (parentNode.id === rootKey) + if (node.id === rootKey) return { - x: parentNode.location.x + 300, - y: parentNode.location.y, + x: node.location.x + NODE_RADIUS(depth) * 7, + y: node.location.y, }; - const { x, y } = calculateVector(data[rootKey].location, parentNode.location, -80, 240); - return parentNode ? { x: parentNode.location.x + x, y: parentNode.location.y + y } : { x: 0, y: 0 }; + const { x, y } = calculateVector(data[rootKey].location, node.location, -60, lineLength[depth - 1]); + return node ? { x: node.location.x + x, y: node.location.y + y } : { x: 0, y: 0 }; } const lastChildren = data[children[children.length - 1]]; - const uv = calculateVector(parentNode.location, lastChildren.location, 110, 240); + const uv = calculateVector(node.location, lastChildren.location, angle[depth - 1], distance[depth - 1]); return { x: lastChildren.location.x + uv.x, y: lastChildren.location.y + uv.y, From 685b5bb8a8ae6c5638f2c3533ecd1e1c45ea708c Mon Sep 17 00:00:00 2001 From: Minju9187 Date: Wed, 4 Dec 2024 21:46:28 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat=20:=20=EA=B9=8A=EC=9D=B4=205=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EB=8D=94=20=EC=83=9D=EC=84=B1=ED=95=A0=20=EC=8B=9C?= =?UTF-8?q?=20error=20=EB=9D=84=EC=96=B4=EC=A3=BC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/konva_mindmap/events/addNode.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/src/konva_mindmap/events/addNode.ts b/client/src/konva_mindmap/events/addNode.ts index 745832d3..65a24f47 100644 --- a/client/src/konva_mindmap/events/addNode.ts +++ b/client/src/konva_mindmap/events/addNode.ts @@ -63,7 +63,10 @@ export function addNode( return; } - if (!selectedNode.nodeId || data[selectedNode.nodeId].depth === NODE_DEPTH_LIMIT) return; + if (!selectedNode.nodeId || data[selectedNode.nodeId].depth === NODE_DEPTH_LIMIT) { + useConnectionStore.getState().propagateError("최대 깊이 5까지만 생성할 수 있어요", "error"); + return; + } const newNodeId = parseInt(Object.keys(data)[Object.keys(data).length - 1]) + 1; // 소켓으로 서버에 데이터를 전송할 때도 사용하기 위해 변수로 따로 빼서 관리 @@ -71,7 +74,7 @@ export function addNode( id: newNodeId, keyword: "제목없음", depth: data[selectedNode.nodeId].depth + 1, - location: getNewNodePosition(data[selectedNode.nodeId].children, data, data[selectedNode.nodeId]), + location: getNewNodePosition(data, selectedNode.nodeId), children: [], }; From 2cc1e2475cec662d9ef7bfb966288bf1d2361920 Mon Sep 17 00:00:00 2001 From: Minju9187 Date: Wed, 4 Dec 2024 21:47:26 +0900 Subject: [PATCH 4/8] =?UTF-8?q?style=20:=20nodeTool=20=EB=8B=A4=EB=A5=B8?= =?UTF-8?q?=20=EC=9A=94=EC=86=8C=EB=93=A4=EB=B3=B4=EB=8B=A4=20=EC=9C=84?= =?UTF-8?q?=EC=97=90=20=EB=B3=B4=EC=9D=B4=EB=8D=98=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/MindMapCanvas/ToolMenu.tsx | 2 +- client/src/components/common/Toast/ToastContainer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/MindMapCanvas/ToolMenu.tsx b/client/src/components/MindMapCanvas/ToolMenu.tsx index 2ea37918..8ab338d8 100644 --- a/client/src/components/MindMapCanvas/ToolMenu.tsx +++ b/client/src/components/MindMapCanvas/ToolMenu.tsx @@ -46,7 +46,7 @@ export default function ToolMenu({ dimensions, zoomIn, zoomOut, dragmode, setDra } return ( -
+