+
{toasts.toReversed().map((toast) => (
removeToast(toast.id)} />
))}
diff --git a/client/src/constants/color.ts b/client/src/constants/color.ts
index 7a43622a..b8bd4602 100644
--- a/client/src/constants/color.ts
+++ b/client/src/constants/color.ts
@@ -1 +1 @@
-export const colors = ["#0053B5", "#64B5F6", "#6B95BC", "#E6F4F1", "#FCFCD4"];
+export const colors = ["#0053B5", "#64B5F6", "#6B95BC", "#A2D2FF", "#1d70a2"];
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: [],
};
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,
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;