index_editor.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				user-select: none;
			}
			#graph {
				position: absolute;
				display: flex;
				flex-direction: column;
			}
			#liner {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
			.level {
				width: auto;
				height: auto;

				position: relative;
				display: flex;
				justify-content: center;
			}
			.level > .levelText {
				position: absolute;
				top: 0;
				left: 0;
				font-weight: bold;
				font-size: 2em;
			}
			.item {
				height: fit-content;
				display: flex;
				align-items: center;
				margin: 30px;
				padding: 20px;
				touch-action: none;
			}
			.item > .circle {
				width: 16px;
				height: 16px;
				border-radius: 100%;
				margin-right: 10px;
				background-color: #dddddd;
			}
			.columnGroup {
				width: fit-content;
				display: flex;
				flex-direction: column;
			}
		</style>
	</head>

	<body>
		<div id="liner"></div>
		<div id="graph"></div>
		<script>
			var graph = document.getElementById("graph");
			var liner = SVG("liner");

			addEventListener("resize", e => {
				drawLine();
				resizeing();
			});
			var data = [
				{
					name: "0",
					rank: 0,
					link: [1]
				},
				{
					name: "1",
					rank: 1,
					link: [2, 3]
				},
				{
					name: "2",
					rank: 1,
					link: [4, 5, 6, 7]
				},
				{
					name: "3",
					rank: 2,
					link: [11]
				},
				{
					name: "4",
					rank: 2,
					link: [11]
				},
				{
					name: "5",
					rank: 2,
					link: [11]
				},
				{
					name: "6",
					rank: 2,
					link: [11]
				},
				{
					name: "7",
					rank: 2,
					link: [8]
				},
				{
					name: "8",
					rank: 2,
					link: [9]
				},
				{
					name: "9",
					rank: 2,
					link: [10]
				},
				{
					name: "10",
					rank: 2,
					link: [11]
				},
				{
					name: "11",
					rank: 3,
					link: []
				}
			];
			function resizeing() {
				var l = document.getElementById("liner");
				l.style.width = graph.clientWidth + "px";
				l.style.height = graph.clientHeight + "px";
			}
			function render() {
				graph.innerHTML = "";
				var levels = [];

				var maxLevel = 0;
				data.forEach((x, idx) => {
					data[idx].index = idx;
					if (x.rank > maxLevel) maxLevel = x.rank;
				});

				var startRGB = [76, 175, 80];
				var endRGB = [233, 30, 99];
				var gapRGB = [
					endRGB[0] - startRGB[0],
					endRGB[1] - startRGB[1],
					endRGB[2] - startRGB[2]
				];
				var getRGB = idx => {
					return `${startRGB[0] +
						(gapRGB[0] / maxLevel) * idx},${startRGB[1] +
						(gapRGB[1] / maxLevel) * idx},${startRGB[2] +
						(gapRGB[2] / maxLevel) * idx}`;
				};
				for (let i = 0; i <= maxLevel; i++) {
					var level = document.createElement("div");
					var levelText = document.createElement("div");

					level.classList.add("level");
					level.style.borderBottom = `1px solid rgba(${getRGB(
						i
					)},0.2)`;
					level.style.color = `rgb(${getRGB(i)})`;
					level.style.background = `rgba(${getRGB(i)},0.1)`;

					levelText.innerText = i + 1;
					levelText.classList.add("levelText");
					level.appendChild(levelText);

					graph.appendChild(level);
					levels.push(level);
				} // 모든 레벨 추가하기

				data.forEach((item, index) => {
					var div = document.createElement("div");
					var circle = document.createElement("div");
					circle.classList.add("circle");
					circle.style.background = `rgb(${getRGB(item.rank)})`;
					item.color = `rgb(${getRGB(item.rank)})`;

					div.classList.add("item");
					div.appendChild(circle);
					div.appendChild(document.createTextNode(item.name));
					levels[item.rank].appendChild(div);

					div.addEventListener("contextmenu", e => {
						e.preventDefault();
						data[index].link = [];
						render();
						drawLine();
					});

					data[index].prop = div;
					div.controllter = item;
				}); // 모든 요소 추가하기

				data.forEach((item, index) => {
					item.link.forEach(link => {
						var prevProp = item.prop;
						var nextProp = data[link].prop;
						if (item.rank == data[link].rank) {
							if (
								prevProp.parentElement.classList.contains(
									"level"
								)
							) {
								var group = document.createElement("div");
								var tmp = prevProp.parentElement;
								group.classList.add("columnGroup");
								prevProp.parentElement.removeChild(prevProp);
								nextProp.parentElement.removeChild(nextProp);
								group.appendChild(prevProp);
								group.appendChild(nextProp);
								levels[item.rank].appendChild(group);
							} else {
								var tmp = prevProp.parentElement;
								while (
									!tmp.parentElement.classList.contains(
										"level"
									)
								) {
									tmp = prevProp.parentElement;
								}
								nextProp.parentElement.removeChild(nextProp);
								tmp.appendChild(nextProp);
							}
						}
					});
				}); // 같은 등급 그룹 설정해주기

				var maxColumnWidth = [];
				data.forEach(item => {
					var index;
					var child;
					var parent = item.prop.parentElement;
					var child = item.prop;
					if (parent.classList.contains("columnGroup")) {
						child = parent;
						parent = parent.parentElement;
					}
					[...parent.children].forEach((x, idx) => {
						if (x == child) {
							index = idx;
						}
					});
					item.column = index;
					if (
						item.prop.offsetWidth >
						(maxColumnWidth[index] || !maxColumnWidth[index])
					)
						maxColumnWidth[index] = item.prop.offsetWidth;
				});

				data.forEach((item, index) => {
					item.prop.style.width = maxColumnWidth[item.column] + "px";
				});
			}
			function drawLine() {
				liner.clear();
				data.forEach((item, index) => {
					item.link.forEach(link => {
						var prevProp = item.prop.children[0];
						var nextProp = data[link].prop.children[0];
						var prev = prevProp.getBoundingClientRect();
						var next = nextProp.getBoundingClientRect();
						var prevPointX =
							scrollX + prev.left + prevProp.offsetWidth / 2;
						var prevPointY =
							scrollY + prev.top + prevProp.offsetHeight;
						var nextPointX =
							scrollX + next.left + nextProp.offsetWidth / 2;
						var nextPointY = scrollY + next.top;
						liner
							.line(
								prevPointX,
								prevPointY,
								nextPointX,
								nextPointY
							)
							.stroke({
								width: 5,
								color: "rgba(100,100,100,0.3)"
							});
					});
				});
			}
			render();
			drawLine();
			resizeing();
			var currentLine;
			var startItem;
			var startPoint = [];
			var endPoint = [];

			function eventDown(e, x, y) {
				if (
					e.target.classList.contains("item") ||
					e.target.classList.contains("circle")
				) {
					startItem = e.target.classList.contains("circle")
						? e.target.parentElement
						: e.target;
					startPoint[0] =
						scrollX +
						startItem.children[0].getBoundingClientRect().left +
						startItem.children[0].offsetWidth / 2;
					startPoint[1] =
						scrollY +
						startItem.children[0].getBoundingClientRect().top +
						startItem.children[0].offsetHeight;
					endPoint[0] = startPoint[0];
					endPoint[1] = startPoint[1];
					currentLine = liner
						.line(x, y, x, y)
						.stroke({ width: 5, color: "rgba(100,100,100,0.3)" });
				}
			}
			function eventMove(e, x, y) {
				if (currentLine) {
					endPoint[0] = x;
					endPoint[1] = y;
					currentLine.plot(
						startPoint[0],
						startPoint[1],
						scrollX + endPoint[0],
						scrollY + endPoint[1]
					);
				}
			}
			function eventUp(e) {
				if (currentLine) {
					currentLine.plot(
						startPoint[0],
						startPoint[1],
						scrollX + endPoint[0],
						scrollY + endPoint[1]
					);
					currentLine.remove();
					currentLine = null;
					if (endPoint[0] && endPoint[1]) {
						var tmpTarget = document.elementFromPoint(
							endPoint[0],
							endPoint[1]
						);
						if (
							tmpTarget.classList.contains("item") ||
							tmpTarget.classList.contains("circle")
						) {
							var target = tmpTarget.classList.contains("circle")
								? tmpTarget.parentElement
								: tmpTarget;

							if (
								startItem.controllter.index !=
								target.controllter.index
							) {
								var idx = data[
									startItem.controllter.index
								].link.indexOf(target.controllter.index);
								if (idx == -1) {
									data[startItem.controllter.index].link.push(
										target.controllter.index
									);
								} else {
									data[
										startItem.controllter.index
									].link.splice(idx, 1);
								}
							}
							drawLine();
						}
					}
				}
			}
			addEventListener("mousedown", e => {
				eventDown(e, e.clientX, e.clientY);
			});
			addEventListener("mousemove", e => {
				eventMove(e, e.clientX, e.clientY);
			});
			addEventListener("mouseup", e => {
				eventUp(e);
			});
			addEventListener("touchstart", e => {
				eventDown(e, e.touches[0].clientX, e.touches[0].clientY);
			});
			addEventListener("touchmove", e => {
				eventMove(e, e.touches[0].clientX, e.touches[0].clientY);
			});
			addEventListener("touchend", e => {
				eventUp(e);
			});
		</script>
	</body>
</html>