1756 lines
54 KiB
HTML
1756 lines
54 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Stage 图形编辑</title>
|
|
<link rel="stylesheet" href="/ui/assets/common.css" />
|
|
<script src="/assets/d3.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: "Microsoft YaHei", sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 300px;
|
|
background-color: #f5f5f5;
|
|
border-right: 1px solid #e0e0e0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
}
|
|
|
|
.node-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.node-item {
|
|
padding: 12px;
|
|
margin-bottom: 8px;
|
|
background-color: white;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
cursor: move;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.node-item:hover {
|
|
border-color: #1890ff;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
|
}
|
|
|
|
.node-name {
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.node-info {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.graph-container {
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.toolbar {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
z-index: 10;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
background-color: #1890ff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: #40a9ff;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #ff4d4f;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #ff7875;
|
|
}
|
|
|
|
.loading {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.spinner {
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #1890ff;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
color: #999;
|
|
}
|
|
|
|
.node rect {
|
|
fill: #fff;
|
|
stroke: #1890ff;
|
|
stroke-width: 1.5px;
|
|
rx: 4;
|
|
ry: 4;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.node text {
|
|
font: 14px sans-serif;
|
|
text-anchor: middle;
|
|
dominant-baseline: middle;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.node.selected rect {
|
|
stroke: #ff4d4f;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.link {
|
|
stroke: #cacaca;
|
|
stroke-width: 1.5px;
|
|
marker-end: url(#arrowhead);
|
|
cursor: pointer;
|
|
stroke-linecap: round;
|
|
}
|
|
.link-hitbox {
|
|
stroke: transparent;
|
|
stroke-width: 10px;
|
|
cursor: pointer;
|
|
pointer-events: stroke;
|
|
}
|
|
|
|
.link-handle {
|
|
fill: #1890ff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: white;
|
|
padding: 24px;
|
|
border-radius: 4px;
|
|
width: 400px;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close {
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.zoom-controls {
|
|
position: absolute;
|
|
left: 16px;
|
|
bottom: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.zoom-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: white;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zoom-btn:hover {
|
|
border-color: #1890ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.stage-info {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
background: white;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
|
z-index: 10;
|
|
}
|
|
|
|
.stage-name {
|
|
font-weight: bold;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.stage-level {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.node rect.selected {
|
|
stroke: #ff4d4f;
|
|
stroke-width: 2px;
|
|
}
|
|
.link.selected {
|
|
stroke: #ff4d4f;
|
|
marker-end: url(#arrowhead-selected);
|
|
/* stroke-width: 2.5px;*/
|
|
}
|
|
.connection-point {
|
|
fill: #1890ff;
|
|
stroke: white;
|
|
stroke-width: 2px;
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.connection-point.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
.connection-point:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.dragline {
|
|
stroke: #1890ff;
|
|
stroke-width: 2px;
|
|
stroke-dasharray: 5, 5;
|
|
}
|
|
|
|
/* 添加箭头样式 */
|
|
.link {
|
|
stroke: #cacaca;
|
|
stroke-width: 1.5px;
|
|
marker-end: url(#arrowhead);
|
|
}
|
|
.node rect.highlight {
|
|
stroke: #1890ff;
|
|
stroke-width: 2.5px;
|
|
stroke-dasharray: 5, 3;
|
|
}
|
|
|
|
.mouse-position {
|
|
position: fixed;
|
|
bottom: 16px;
|
|
right: 16px;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
font-family: monospace;
|
|
z-index: 1000;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
min-width: 200px;
|
|
}
|
|
|
|
.mouse-position-title {
|
|
font-weight: bold;
|
|
margin-bottom: 4px;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.mouse-position-data {
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr;
|
|
gap: 4px;
|
|
}
|
|
|
|
.mouse-position-label {
|
|
color: #666;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2 class="sidebar-title">可用节点</h2>
|
|
<button class="btn" id="refresh-nodes-btn" style="display: none">
|
|
刷新
|
|
</button>
|
|
</div>
|
|
<div class="sidebar-content">
|
|
<ul class="node-list" id="available-nodes">
|
|
<!-- 可用节点将通过JavaScript动态加载 -->
|
|
</ul>
|
|
<div id="nodes-empty-state" class="empty-state" style="display: none">
|
|
<p>暂无可用节点</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mouse-position" id="mouse-position">
|
|
<div class="mouse-position-title">鼠标坐标</div>
|
|
<div class="mouse-position-data">
|
|
<span class="mouse-position-label">clientX:</span
|
|
><span id="client-x">0</span>
|
|
<span class="mouse-position-label">clientY:</span
|
|
><span id="client-y">0</span>
|
|
<span class="mouse-position-label">pageX:</span
|
|
><span id="page-x">0</span>
|
|
<span class="mouse-position-label">pageY:</span
|
|
><span id="page-y">0</span>
|
|
<span class="mouse-position-label">offsetX:</span
|
|
><span id="offset-x">0</span>
|
|
<span class="mouse-position-label">offsetY:</span
|
|
><span id="offset-y">0</span>
|
|
<span class="mouse-position-label">layerX:</span
|
|
><span id="layer-x">0</span>
|
|
<span class="mouse-position-label">layerY:</span
|
|
><span id="layer-y">0</span>
|
|
<span class="mouse-position-label">graohX:</span
|
|
><span id="graph-x">0</span>
|
|
<span class="mouse-position-label">graphY:</span
|
|
><span id="graph-y">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="graph-container" id="graph-container">
|
|
<div class="stage-info">
|
|
<div class="stage-name" id="stage-name">加载中...</div>
|
|
<div class="stage-level" id="stage-level"></div>
|
|
</div>
|
|
|
|
<div class="toolbar">
|
|
<button class="btn" id="add-link-btn" style="display: none">
|
|
添加连接
|
|
</button>
|
|
<button class="btn" id="save-btn">保存</button>
|
|
<button class="btn btn-danger" id="delete-btn">删除</button>
|
|
<button class="btn" id="back-btn">返回</button>
|
|
</div>
|
|
|
|
<div class="zoom-controls">
|
|
<div class="zoom-btn" id="zoom-in">+</div>
|
|
<div class="zoom-btn" id="zoom-out">-</div>
|
|
<div class="zoom-btn" id="zoom-reset">⟲</div>
|
|
</div>
|
|
|
|
<div id="graph-empty-state" class="empty-state" style="display: none">
|
|
<p>暂无图形节点，请从左侧拖拽节点到此处</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加/编辑连接的模态框 -->
|
|
<div class="modal" id="link-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">添加连接</h2>
|
|
<span class="close" id="close-link-modal">×</span>
|
|
</div>
|
|
<form id="link-form">
|
|
<div class="form-group">
|
|
<label class="form-label" for="prev-node">前置节点</label>
|
|
<select class="form-input" id="prev-node" required>
|
|
<option value="">请选择前置节点</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="next-node">后置节点</label>
|
|
<select class="form-input" id="next-node" required>
|
|
<option value="">请选择后置节点</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn" id="cancel-link-btn">取消</button>
|
|
<button type="submit" class="btn" id="save-link-btn">保存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 确认删除的模态框 -->
|
|
<div class="modal" id="confirm-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">确认删除</h2>
|
|
<span class="close" id="close-confirm-modal">×</span>
|
|
</div>
|
|
<p>确定要删除选中的节点或连接吗？此操作不可恢复。</p>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn" id="cancel-delete-btn">取消</button>
|
|
<button type="button" class="btn btn-danger" id="confirm-delete-btn">
|
|
删除
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 加载指示器 -->
|
|
<div class="loading" id="loading">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// 基础URL
|
|
const API_BASE_URL = "http://127.0.0.1:5002/api";
|
|
|
|
// 获取URL参数
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const stageId = urlParams.get("id");
|
|
|
|
if (!stageId) {
|
|
alert("缺少Stage ID参数");
|
|
window.location.href = "/ui/page/stage.html";
|
|
}
|
|
|
|
// DOM元素
|
|
const availableNodesList = document.getElementById("available-nodes");
|
|
const nodesEmptyState = document.getElementById("nodes-empty-state");
|
|
const graphContainer = document.getElementById("graph-container");
|
|
const graphEmptyState = document.getElementById("graph-empty-state");
|
|
const stageName = document.getElementById("stage-name");
|
|
const stageLevel = document.getElementById("stage-level");
|
|
const refreshNodesBtn = document.getElementById("refresh-nodes-btn");
|
|
const addLinkBtn = document.getElementById("add-link-btn");
|
|
const saveBtn = document.getElementById("save-btn");
|
|
const deleteBtn = document.getElementById("delete-btn");
|
|
const backBtn = document.getElementById("back-btn");
|
|
const zoomInBtn = document.getElementById("zoom-in");
|
|
const zoomOutBtn = document.getElementById("zoom-out");
|
|
const zoomResetBtn = document.getElementById("zoom-reset");
|
|
const linkModal = document.getElementById("link-modal");
|
|
const closeLinkModal = document.getElementById("close-link-modal");
|
|
const linkForm = document.getElementById("link-form");
|
|
const prevNodeSelect = document.getElementById("prev-node");
|
|
const nextNodeSelect = document.getElementById("next-node");
|
|
const cancelLinkBtn = document.getElementById("cancel-link-btn");
|
|
const confirmModal = document.getElementById("confirm-modal");
|
|
const closeConfirmModal = document.getElementById("close-confirm-modal");
|
|
const cancelDeleteBtn = document.getElementById("cancel-delete-btn");
|
|
const confirmDeleteBtn = document.getElementById("confirm-delete-btn");
|
|
const loading = document.getElementById("loading");
|
|
|
|
// 全局变量
|
|
let stageData = null;
|
|
let availableNodes = [];
|
|
let graphNodes = [];
|
|
let graphLinks = [];
|
|
let selectedElement = null;
|
|
let svg = null;
|
|
let mainGroup = null;
|
|
let simulation = null;
|
|
let zoomBehavior = null;
|
|
// let isDragging = false;
|
|
|
|
// 初始化
|
|
document.addEventListener("DOMContentLoaded", initialize);
|
|
|
|
// 初始化函数
|
|
async function initialize() {
|
|
try {
|
|
console.log("init");
|
|
await loadStageInfo();
|
|
await loadAvailableNodes();
|
|
await loadGraphData();
|
|
initGraph();
|
|
initDragAndDrop();
|
|
bindEvents();
|
|
initMousePositionTracker();
|
|
} catch (error) {
|
|
console.error("初始化错误:", error);
|
|
showError("初始化错误: " + error.message);
|
|
} finally {
|
|
hideLoading();
|
|
}
|
|
}
|
|
|
|
function initMousePositionTracker() {
|
|
const clientX = document.getElementById("client-x");
|
|
const clientY = document.getElementById("client-y");
|
|
const pageX = document.getElementById("page-x");
|
|
const pageY = document.getElementById("page-y");
|
|
const offsetX = document.getElementById("offset-x");
|
|
const offsetY = document.getElementById("offset-y");
|
|
const layerX = document.getElementById("layer-x");
|
|
const layerY = document.getElementById("layer-y");
|
|
const graphX = document.getElementById("graph-x");
|
|
const graphY = document.getElementById("graph-y");
|
|
|
|
// 监听整个文档的鼠标移动
|
|
document.addEventListener("mousemove", function (event) {
|
|
// 更新基本坐标信息
|
|
clientX.textContent = event.clientX;
|
|
clientY.textContent = event.clientY;
|
|
pageX.textContent = event.pageX;
|
|
pageY.textContent = event.pageY;
|
|
offsetX.textContent = event.offsetX;
|
|
offsetY.textContent = event.offsetY;
|
|
layerX.textContent = event.layerX;
|
|
layerY.textContent = event.layerY;
|
|
|
|
// 计算图形坐标系中的位置（考虑缩放和平移）
|
|
if (svg && mainGroup) {
|
|
try {
|
|
const transform = d3.zoomTransform(svg.node());
|
|
const rect = graphContainer.getBoundingClientRect();
|
|
const x = (event.clientX - rect.left - transform.x) / transform.k;
|
|
const y = (event.clientY - rect.top - transform.y) / transform.k;
|
|
graphX.textContent = Math.round(x);
|
|
graphY.textContent = Math.round(y);
|
|
} catch (e) {
|
|
console.error("计算图形坐标出错:", e);
|
|
}
|
|
}
|
|
});
|
|
|
|
// 添加切换显示/隐藏的功能
|
|
const mousePosition = document.getElementById("mouse-position");
|
|
mousePosition.addEventListener("dblclick", function () {
|
|
if (this.style.opacity === "0.2") {
|
|
this.style.opacity = "1";
|
|
} else {
|
|
this.style.opacity = "0.2";
|
|
}
|
|
});
|
|
}
|
|
|
|
let dragLine = null;
|
|
let dragStartNode = null;
|
|
let isDragging = false;
|
|
function length2GraphLength(length) {
|
|
const transform = d3.zoomTransform(svg.node());
|
|
return length / transform.k;
|
|
}
|
|
function client2Graph(x, y) {
|
|
const transform = d3.zoomTransform(svg.node());
|
|
const rect = graphContainer.getBoundingClientRect();
|
|
const graphX = (x - rect.left - transform.x) / transform.k;
|
|
const graphY = (y - rect.top - transform.y) / transform.k;
|
|
return { x: graphX, y: graphY };
|
|
}
|
|
// 连接线拖拽相关函数
|
|
function startLinkDrag(event, point) {
|
|
isDragging = true;
|
|
const sourceNode = d3.select(this.parentNode).datum();
|
|
dragStartNode = sourceNode;
|
|
|
|
dragLine = mainGroup
|
|
.append("path")
|
|
.attr("class", "link dragline")
|
|
.attr("marker-end", "url(#arrowhead)");
|
|
|
|
mainGroup.selectAll(".node").each(function () {
|
|
d3.select(this).property("leaveTimerId", null);
|
|
});
|
|
|
|
mainGroup
|
|
.selectAll(".node")
|
|
.on("mouseenter", function () {
|
|
// console.log("mouse enter", this);
|
|
const timerId = d3.select(this).property("leaveTimerId");
|
|
if (timerId) {
|
|
clearTimeout(timerId);
|
|
d3.select(this).property("leaveTimerId", null);
|
|
}
|
|
if (isDragging && dragStartNode !== d3.select(this).datum()) {
|
|
d3.select(this).select("rect").classed("highlight", true);
|
|
}
|
|
})
|
|
.on("mouseleave", function (event) {
|
|
// 获取当前的缩放和平移状态
|
|
/* console.log("mouse leave", event);
|
|
console.log("node", this);
|
|
let pos = client2Graph(event.clientX, event.clientY);
|
|
console.log("pos", pos);
|
|
let width = this.getBoundingClientRect().width;
|
|
let height = this.getBoundingClientRect().height;
|
|
let d3width = length2GraphLength(width);
|
|
let d3height = length2GraphLength(height);
|
|
// 获取node在d3中的坐标：
|
|
let nodeX = this.getBoundingClientRect().x;
|
|
let nodeY = this.getBoundingClientRect().y;
|
|
let nodePos = client2Graph(nodeX, nodeY);
|
|
nodePos.x = nodePos.x + 60;
|
|
nodePos.y = nodePos.y + 20;
|
|
|
|
console.log("mouse pos", pos, "node pos", nodePos);
|
|
console.log(
|
|
"rect",
|
|
nodePos.x - d3width / 2,
|
|
nodePos.x + d3width / 2,
|
|
nodePos.y - d3height / 2,
|
|
nodePos.y + d3height / 2
|
|
);
|
|
const node = this;
|
|
if (
|
|
!(
|
|
pos.x > nodePos.x - d3width / 2 &&
|
|
pos.x < nodePos.x + d3width / 2 &&
|
|
pos.y > nodePos.y - d3height / 2 &&
|
|
pos.y < nodePos.y + d3height / 2
|
|
)
|
|
) {
|
|
console.log("realOUT!");
|
|
}*/
|
|
node=this
|
|
const timerId = setTimeout(() => {
|
|
d3.select(node).select("rect").classed("highlight", false);
|
|
d3.select(node).property("leaveTimerId", null);
|
|
}, 200); // 200ms的防抖延迟
|
|
|
|
d3.select(this).property("leaveTimerId", timerId);
|
|
|
|
// d3.select(this).select("rect").classed("highlight", false);
|
|
});
|
|
/*.on("mouseover", function () {
|
|
// 获取当前的缩放和平移状态
|
|
|
|
console.log("mouse over");
|
|
const timerId = d3.select(this).property("leaveTimerId");
|
|
if (timerId) {
|
|
clearTimeout(timerId);
|
|
d3.select(this).property("leaveTimerId", null);
|
|
}
|
|
if (isDragging && dragStartNode !== d3.select(this).datum()) {
|
|
console.log(d3.select(this).datum());
|
|
d3.select(this).select("rect").classed("highlight", true);
|
|
}
|
|
// d3.select(this).select("rect").classed("highlight", true);
|
|
});*/
|
|
}
|
|
|
|
function dragLink(event) {
|
|
if (!dragLine) return;
|
|
|
|
// 获取当前的缩放和平移状态
|
|
const transform = d3.zoomTransform(svg.node());
|
|
|
|
// 计算鼠标在实际坐标系中的位置
|
|
const mouseX =
|
|
event.sourceEvent.clientX -
|
|
graphContainer.getBoundingClientRect().left;
|
|
const mouseY =
|
|
event.sourceEvent.clientY -
|
|
graphContainer.getBoundingClientRect().top;
|
|
|
|
// 应用逆变换获取实际坐标
|
|
const actualX = (mouseX - transform.x) / transform.k;
|
|
const actualY = (mouseY - transform.y) / transform.k;
|
|
|
|
// 更新拖拽线的路径
|
|
dragLine.attr(
|
|
"d",
|
|
`M${dragStartNode.x},${dragStartNode.y}L${actualX},${actualY}`
|
|
);
|
|
}
|
|
|
|
function endLinkDrag(event) {
|
|
isDragging = false;
|
|
if (dragLine) {
|
|
dragLine.remove();
|
|
dragLine = null;
|
|
}
|
|
// 如果source和target是同一个节点,直接退出
|
|
mainGroup.selectAll(".node rect").classed("highlight", false);
|
|
|
|
// 恢复节点的原始事件处理
|
|
mainGroup
|
|
.selectAll(".node")
|
|
.on("mouseenter", null)
|
|
.on("mouseleave", null)
|
|
.on("mouseover", null);
|
|
|
|
mainGroup.selectAll(".connection-point").classed("hidden", true);
|
|
|
|
const targetElement = event.sourceEvent.target;
|
|
const targetNode = d3.select(event.sourceEvent.target);
|
|
if (dragStartNode === targetElement || dragStartNode === targetNode) {
|
|
return;
|
|
}
|
|
if (
|
|
targetNode.classed("node") ||
|
|
targetNode.classed("connection-point") ||
|
|
targetNode.classed("selected") ||
|
|
targetNode.node().parentNode?.classList.contains("node")
|
|
) {
|
|
/* const sourceNode = dragStartNode;
|
|
const targetNodeData = d3
|
|
.select(targetNode.node().parentNode)
|
|
.datum();
|
|
|
|
if (sourceNode !== targetNodeData) {
|
|
// 创建新连接
|
|
graphLinks.push({
|
|
source: sourceNode,
|
|
target: targetNodeData,
|
|
id: `${sourceNode.id}-${targetNodeData.id}`,
|
|
});
|
|
updateGraph();
|
|
}*/
|
|
let targetNodeData;
|
|
if (targetNode.classed("node")) {
|
|
targetNodeData = targetNode.datum();
|
|
} else if (targetNode.classed("connection-point")) {
|
|
targetNodeData = d3.select(targetNode.node().parentNode).datum();
|
|
} else {
|
|
// 如果是节点内的其他元素(如rect或text)
|
|
const parentNode = d3.select(targetNode.node().parentNode);
|
|
if (parentNode.classed("node")) {
|
|
targetNodeData = parentNode.datum();
|
|
} else {
|
|
// 尝试再往上一级查找
|
|
const grandParent = d3.select(parentNode.node().parentNode);
|
|
if (grandParent.classed("node")) {
|
|
targetNodeData = grandParent.datum();
|
|
}
|
|
}
|
|
}
|
|
|
|
if (targetNodeData && dragStartNode !== targetNodeData) {
|
|
// 检查是否已存在反向连接
|
|
const existingReverseLink = graphLinks.find(
|
|
(link) =>
|
|
link.source.instanceId === targetNodeData.instanceId &&
|
|
link.target.instanceId === dragStartNode.instanceId
|
|
);
|
|
|
|
if (existingReverseLink) {
|
|
showError("不能创建循环连接");
|
|
return;
|
|
}
|
|
if (hasCycle(graphLinks, dragStartNode, targetNodeData)) {
|
|
showError("不能创建会形成环路的连接");
|
|
return;
|
|
}
|
|
// 创建新连接
|
|
const linkId = `${dragStartNode.instanceId}-${targetNodeData.instanceId}`;
|
|
graphLinks.push({
|
|
source: dragStartNode,
|
|
target: targetNodeData,
|
|
id: linkId,
|
|
});
|
|
updateGraph();
|
|
}
|
|
}
|
|
dragStartNode = null;
|
|
}
|
|
// 加载Stage信息
|
|
// 加载Stage信息
|
|
async function loadStageInfo() {
|
|
const response = await fetch(`${API_BASE_URL}/stage/${stageId}/`);
|
|
if (!response.ok) throw new Error(`HTTP error ${response.status}`);
|
|
|
|
const result = await response.json();
|
|
if (result.code === 0 && result.data) {
|
|
stageData = result.data.stage;
|
|
stageName.textContent = stageData.name || "未命名";
|
|
|
|
// 修改显示关联树节点而不是level
|
|
if (stageData.tree_id === "root") {
|
|
stageLevel.textContent = "关联节点: 所有节点 (虚拟根节点)";
|
|
} else if (stageData.tree_id) {
|
|
stageLevel.textContent = `关联节点ID: ${stageData.tree_id}`;
|
|
// 尝试获取树节点名称
|
|
try {
|
|
const treeResponse = await fetch(
|
|
`${API_BASE_URL}/tree/${stageData.tree_id}/`
|
|
);
|
|
if (treeResponse.ok) {
|
|
const treeResult = await treeResponse.json();
|
|
if (treeResult.code === 0 && treeResult.data) {
|
|
stageLevel.textContent = `关联节点: ${
|
|
treeResult.data.node.name || "未命名"
|
|
}`;
|
|
// console.log("tre", treeResult.data);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("获取树节点名称失败:", error);
|
|
}
|
|
} else {
|
|
stageLevel.textContent = "未关联任何树节点";
|
|
}
|
|
} else {
|
|
throw new Error(result.message || "获取Stage信息失败");
|
|
}
|
|
}
|
|
|
|
// 加载可用节点
|
|
async function loadAvailableNodes() {
|
|
let url;
|
|
|
|
// 根据stage的tree_id决定请求的URL
|
|
if (!stageData.tree_id) {
|
|
// 如果没有关联树节点，则不加载任何节点
|
|
availableNodes = [];
|
|
renderAvailableNodes();
|
|
return;
|
|
} else if (stageData.tree_id === "root") {
|
|
// 如果是虚拟根节点，获取所有树节点
|
|
url = `${API_BASE_URL}/tree/`;
|
|
} else {
|
|
// 获取指定树节点及其所有子孙节点
|
|
url = `${API_BASE_URL}/tree/${stageData.tree_id}/descendants`;
|
|
}
|
|
|
|
const response = await fetch(url);
|
|
if (!response.ok) throw new Error(`HTTP error ${response.status}`);
|
|
|
|
const result = await response.json();
|
|
if (result.code === 0) {
|
|
// 如果是descendants接口，需要合并node和descendants
|
|
if (
|
|
stageData.tree_id !== "root" &&
|
|
result.data &&
|
|
result.data.node &&
|
|
result.data.descendants
|
|
) {
|
|
availableNodes = [result.data.node, ...result.data.descendants];
|
|
} else {
|
|
availableNodes = result.data || [];
|
|
}
|
|
renderAvailableNodes();
|
|
} else {
|
|
throw new Error(result.message || "获取可用节点失败");
|
|
}
|
|
}
|
|
// 渲染可用节点列表
|
|
// 渲染可用节点列表
|
|
function renderAvailableNodes() {
|
|
availableNodesList.innerHTML = "";
|
|
|
|
if (availableNodes.length == 0 || !availableNodes.length) {
|
|
nodesEmptyState.style.display = "block";
|
|
return;
|
|
}
|
|
|
|
nodesEmptyState.style.display = "none";
|
|
if (!availableNodes.length) return;
|
|
availableNodes.forEach((node) => {
|
|
if (node.id == stageData.tree_id) return;
|
|
const li = document.createElement("li");
|
|
li.className = "node-item";
|
|
li.draggable = true;
|
|
li.dataset.nodeId = node.id;
|
|
|
|
li.innerHTML = `
|
|
<div class="node-name">${node.name || "未命名"}</div>
|
|
<div class="node-info">
|
|
Level: ${node.level || 0}
|
|
${
|
|
node.parent_id
|
|
? `| 父节点: ${
|
|
availableNodes.filter((n) => {
|
|
return n.id === node.parent_id;
|
|
})[0]?.name
|
|
}`
|
|
: ""
|
|
}
|
|
</div>
|
|
`;
|
|
|
|
availableNodesList.appendChild(li);
|
|
});
|
|
}
|
|
|
|
function showError(message) {
|
|
// 可以使用alert或创建一个toast提示
|
|
alert(message);
|
|
}
|
|
|
|
// 显示成功消息
|
|
function showMessage(message) {
|
|
// 可以使用alert或创建一个toast提示
|
|
alert(message);
|
|
}
|
|
|
|
// 加载图形数据
|
|
async function loadGraphData() {
|
|
const response = await fetch(`${API_BASE_URL}/graph/${stageId}/`);
|
|
if (!response.ok) throw new Error(`HTTP error ${response.status}`);
|
|
|
|
const result = await response.json();
|
|
if (result.code === 0 && result.data) {
|
|
graphNodes = result.data.nodes || [];
|
|
graphLinks = result.data.links || [];
|
|
graphNodes = graphNodes.map((node) => {
|
|
return {
|
|
...node,
|
|
instanceId: node.instance_id,
|
|
};
|
|
});
|
|
console.log(graphNodes);
|
|
|
|
graphLinks = graphLinks.map((link) => {
|
|
return {
|
|
...link,
|
|
source: graphNodes.find(
|
|
(node) => node.instance_id === link.source_id
|
|
),
|
|
target: graphNodes.find(
|
|
(node) => node.instance_id === link.target_id
|
|
),
|
|
id: link.link_id || `${link.source_id}-${link.target_id}`, // 确保有id
|
|
};
|
|
});
|
|
// 如果需要，也可以更新 stageData
|
|
if (result.data.stage && !stageData) {
|
|
stageData = result.data.stage;
|
|
stageName.textContent = stageData.name || "未命名";
|
|
|
|
// 更新显示关联树节点信息
|
|
if (stageData.tree_id === "root") {
|
|
stageLevel.textContent = "关联节点: 所有节点 (虚拟根节点)";
|
|
} else if (stageData.tree_id) {
|
|
stageLevel.textContent = `关联节点ID: ${stageData.tree_id}`;
|
|
} else {
|
|
stageLevel.textContent = "未关联任何树节点";
|
|
}
|
|
}
|
|
} else {
|
|
throw new Error(result.message || "获取图形数据失败");
|
|
}
|
|
}
|
|
|
|
// 初始化D3图形
|
|
function initGraph() {
|
|
const width = graphContainer.clientWidth;
|
|
const height = graphContainer.clientHeight;
|
|
|
|
svg = d3
|
|
.select(graphContainer)
|
|
.append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
svg
|
|
.append("defs")
|
|
.append("marker")
|
|
.attr("id", "arrowhead")
|
|
.attr("viewBox", "0 -5 10 10")
|
|
.attr("refX", 8)
|
|
.attr("refY", 0)
|
|
.attr("markerWidth", 8)
|
|
.attr("markerHeight", 8)
|
|
.attr("orient", "auto")
|
|
.append("path")
|
|
.attr("d", "M0,-5L10,0L0,5")
|
|
.attr("fill", "#cacaca");
|
|
|
|
svg
|
|
.append("defs")
|
|
.append("marker")
|
|
.attr("id", "arrowhead-selected")
|
|
.attr("viewBox", "0 -5 10 10")
|
|
.attr("refX", 8)
|
|
.attr("refY", 0)
|
|
.attr("markerWidth", 8)
|
|
.attr("markerHeight", 8)
|
|
.attr("orient", "auto")
|
|
.append("path")
|
|
.attr("d", "M0,-5L10,0L0,5")
|
|
.attr("fill", "#ff4d4f");
|
|
// ... 保持箭头定义不变 ...
|
|
|
|
mainGroup = svg.append("g");
|
|
|
|
zoomBehavior = d3
|
|
.zoom()
|
|
.scaleExtent([0.1, 4])
|
|
.on("zoom", (event) => {
|
|
mainGroup.attr("transform", event.transform);
|
|
});
|
|
|
|
svg.call(zoomBehavior);
|
|
|
|
// 优化力导向模拟参数
|
|
simulation = d3
|
|
.forceSimulation()
|
|
.force(
|
|
"link",
|
|
d3
|
|
.forceLink()
|
|
.id((d) => d.instanceId || d.id)
|
|
.distance(200) // 增加节点间距
|
|
.strength(0.5) // 减小连接强度，使布局更灵活
|
|
)
|
|
.force("charge", d3.forceManyBody().strength(-1500)) // 增加排斥力
|
|
.force("center", d3.forceCenter(width / 2, height / 2))
|
|
.force("collision", d3.forceCollide().radius(100)) // 添加碰撞检测
|
|
.alphaDecay(0.1) // 调整衰减速度
|
|
.velocityDecay(0.4); // 调整阻尼
|
|
|
|
updateGraph();
|
|
}
|
|
// 更新图形
|
|
function updateGraph() {
|
|
// 更新连接
|
|
/* const links = mainGroup
|
|
.selectAll(".link")
|
|
.data(graphLinks)
|
|
.join("path")
|
|
.attr("class", "link")
|
|
.attr("marker-end", "url(#arrowhead)")
|
|
.attr("d", (d) => {
|
|
return `M${d.source.x},${d.source.y}L${d.target.x},${d.target.y}`;
|
|
})
|
|
.on("click", handleLinkClick);*/
|
|
const nodes = mainGroup
|
|
.selectAll(".node")
|
|
.data(graphNodes, (d) => d.instanceId || d.id)
|
|
.join("g")
|
|
.attr("class", "node")
|
|
.attr("transform", (d) => `translate(${d.x || 0},${d.y || 0})`)
|
|
.call(
|
|
d3
|
|
.drag()
|
|
.on("start", dragStarted)
|
|
.on("drag", dragged)
|
|
.on("end", dragEnded)
|
|
)
|
|
.on("click", handleNodeClick);
|
|
|
|
const linkGroups = mainGroup
|
|
.selectAll(".link-group")
|
|
.data(graphLinks)
|
|
.join("g")
|
|
.attr("class", "link-group");
|
|
|
|
// 添加透明的宽线条作为点击区域
|
|
linkGroups
|
|
.selectAll(".link-hitbox")
|
|
.data((d) => [d])
|
|
.join("path")
|
|
.attr("class", "link-hitbox")
|
|
.attr("d", (d) => {
|
|
//console.log("d", d, d.source);
|
|
const dx = d.target.x - d.source.x;
|
|
const dy = d.target.y - d.source.y;
|
|
const angle = Math.atan2(dy, dx);
|
|
|
|
// 节点的尺寸
|
|
const nodeWidth = 120;
|
|
const nodeHeight = 40;
|
|
|
|
// 计算起点和终点的偏移
|
|
const sourceX = d.source.x + Math.cos(angle) * (nodeWidth / 2);
|
|
const sourceY = d.source.y + Math.sin(angle) * (nodeHeight / 2);
|
|
const targetX = d.target.x - Math.cos(angle) * (nodeWidth / 2);
|
|
const targetY = d.target.y - Math.sin(angle) * (nodeHeight / 2);
|
|
|
|
return `M${sourceX},${sourceY}L${targetX},${targetY}`;
|
|
// return `M${d.source.x},${d.source.y}L${d.target.x},${d.target.y}`;
|
|
})
|
|
.on("click", handleLinkClick);
|
|
|
|
// 添加实际显示的连接线
|
|
linkGroups
|
|
.selectAll(".link")
|
|
.data((d) => [d])
|
|
.join("path")
|
|
.attr("class", (d) => `link ${d.selected ? "selected" : ""}`)
|
|
// .attr("marker-end", "url(#arrowhead)")
|
|
.attr("marker-end", (d) => {
|
|
return d.selected ? "url(#arrowhead-selected)" : "url(#arrowhead)";
|
|
})
|
|
.attr(
|
|
"d",
|
|
(d) => {
|
|
const dx = d.target.x - d.source.x;
|
|
const dy = d.target.y - d.source.y;
|
|
const angle = Math.atan2(dy, dx);
|
|
|
|
// 节点的尺寸
|
|
const nodeWidth = 120;
|
|
const nodeHeight = 40;
|
|
|
|
// 计算起点和终点的偏移
|
|
const sourceX = d.source.x + Math.cos(angle) * (nodeWidth / 2);
|
|
const sourceY = d.source.y + Math.sin(angle) * (nodeHeight / 2);
|
|
const targetX = d.target.x - Math.cos(angle) * (nodeWidth / 2);
|
|
const targetY = d.target.y - Math.sin(angle) * (nodeHeight / 2);
|
|
// console.log(targetX, targetY);
|
|
return `M${sourceX},${sourceY}L${targetX},${targetY}`;
|
|
}
|
|
//return `M${d.source.x},${d.source.y}L${d.target.x},${d.target.y}`}
|
|
);
|
|
// 更新节点
|
|
|
|
// 清除旧的连接点
|
|
nodes.selectAll(".connection-point").remove();
|
|
|
|
// 添加节点主体
|
|
nodes
|
|
.selectAll("rect")
|
|
.data((d) => [d])
|
|
.join("rect")
|
|
.attr("width", 120)
|
|
.attr("height", 40)
|
|
.attr("transform", "translate(-60, -20)")
|
|
.attr("class", (d) => (d.selected ? "selected" : ""));
|
|
|
|
// 添加文本
|
|
nodes
|
|
.selectAll("text")
|
|
.data((d) => [d])
|
|
.join("text")
|
|
.text((d) => d.name || "未命名")
|
|
.attr("transform", "translate(0, 0)")
|
|
// .attr("x", 15) // 向上偏移文本位置，避免被箭头遮挡
|
|
.attr("text-anchor", "middle") // 确保文本水平居中
|
|
.attr("dominant-baseline", "middle"); // 确保文本垂直居中
|
|
|
|
// 添加连接点
|
|
const connectionPoints = [
|
|
{ x: 0, y: -20, type: "top" }, // 上
|
|
{ x: 60, y: 0, type: "right" }, // 右
|
|
{ x: 0, y: 20, type: "bottom" }, // 下
|
|
{ x: -60, y: 0, type: "left" }, // 左
|
|
];
|
|
|
|
nodes.each(function (d) {
|
|
const node = d3.select(this);
|
|
node
|
|
.selectAll(".connection-point")
|
|
.data(connectionPoints)
|
|
.join("circle")
|
|
.attr("class", "connection-point hidden")
|
|
.attr("cx", (p) => p.x)
|
|
.attr("cy", (p) => p.y)
|
|
.attr("r", 8)
|
|
.on("mouseenter", function () {
|
|
d3.select(this).classed("hidden", false);
|
|
})
|
|
.on("mouseleave", function () {
|
|
// if (!isDragging) {
|
|
d3.select(this).classed("hidden", true);
|
|
// }
|
|
})
|
|
.call(
|
|
d3
|
|
.drag()
|
|
.on("start", startLinkDrag)
|
|
.on("drag", dragLink)
|
|
.on("end", endLinkDrag)
|
|
);
|
|
});
|
|
|
|
simulation.on("tick", () => {
|
|
nodes.attr("transform", (d) => `translate(${d.x},${d.y})`);
|
|
|
|
mainGroup.selectAll(".link").attr(
|
|
"d",
|
|
(d) => {
|
|
const dx = d.target.x - d.source.x;
|
|
const dy = d.target.y - d.source.y;
|
|
const angle = Math.atan2(dy, dx);
|
|
|
|
// 节点的尺寸
|
|
const nodeWidth = 120;
|
|
const nodeHeight = 40;
|
|
|
|
// 计算起点和终点的偏移
|
|
const sourceX = d.source.x + Math.cos(angle) * (nodeWidth / 2);
|
|
const sourceY = d.source.y + Math.sin(angle) * (nodeHeight / 2);
|
|
const targetX = d.target.x - Math.cos(angle) * (nodeWidth / 2);
|
|
const targetY = d.target.y - Math.sin(angle) * (nodeHeight / 2);
|
|
console.log(targetX, targetY);
|
|
return `M${sourceX},${sourceY}L${targetX},${targetY}`;
|
|
}
|
|
//`M${d.source.x},${d.source.y}L${d.target.x},${d.target.y}`
|
|
);
|
|
});
|
|
|
|
simulation.nodes(graphNodes);
|
|
simulation.force("link").links(graphLinks);
|
|
simulation.on("tick", () => {
|
|
nodes.attr("transform", (d) => `translate(${d.x},${d.y})`);
|
|
|
|
linkGroups.selectAll("path").attr(
|
|
"d",
|
|
(d) => {
|
|
const dx = d.target.x - d.source.x;
|
|
const dy = d.target.y - d.source.y;
|
|
const angle = Math.atan2(dy, dx);
|
|
|
|
// 节点的尺寸
|
|
const nodeWidth = 120;
|
|
const nodeHeight = 40;
|
|
|
|
// 计算起点和终点的偏移
|
|
const sourceX = d.source.x + Math.cos(angle) * (nodeWidth / 2);
|
|
const sourceY = d.source.y + Math.sin(angle) * (nodeHeight / 2);
|
|
const targetX = d.target.x - Math.cos(angle) * (nodeWidth / 2);
|
|
const targetY = d.target.y - Math.sin(angle) * (nodeHeight / 2);
|
|
// console.log(targetX, targetY);
|
|
return `M${sourceX},${sourceY}L${targetX},${targetY}`;
|
|
}
|
|
//`M${d.source.x},${d.source.y}L${d.target.x},${d.target.y}`
|
|
);
|
|
});
|
|
}
|
|
|
|
function handleLinkClick(event, d) {
|
|
// console.log("link click");
|
|
event.stopPropagation();
|
|
clearSelection();
|
|
// 取消所有节点的选中状态
|
|
graphNodes.forEach((node) => {
|
|
node.selected = false;
|
|
});
|
|
|
|
// 更新节点视图
|
|
// mainGroup.selectAll(".node").selectAll("rect").attr("class", "");
|
|
|
|
// 设置当前连接为选中状态
|
|
// selectedElement = this;
|
|
selectedElement = d3.select(this.parentNode).select(".link").node();
|
|
// 可以添加视觉效果表示连接被选中
|
|
mainGroup.selectAll(".link").classed("selected", false);
|
|
// d3.select(this).classed("selected", true);
|
|
d3.select(this.parentNode).select(".link").classed("selected", true);
|
|
}
|
|
// 节点拖拽相关函数
|
|
function dragStarted(event, d) {
|
|
event.sourceEvent.stopPropagation();
|
|
if (!event.active) simulation.alphaTarget(0.3).restart();
|
|
d.fx = d.x;
|
|
d.fy = d.y;
|
|
// 标记正在拖拽
|
|
d.isDragging = true;
|
|
}
|
|
|
|
function dragged(event, d) {
|
|
d.fx = event.x;
|
|
d.fy = event.y;
|
|
// 更新连接线位置
|
|
mainGroup.selectAll(".link").attr("d", (l) => {
|
|
return `M${l.source.x},${l.source.y}L${l.target.x},${l.target.y}`;
|
|
});
|
|
}
|
|
|
|
function dragEnded(event, d) {
|
|
if (!event.active) simulation.alphaTarget(0);
|
|
// 保持节点位置固定
|
|
d.isDragging = false;
|
|
}
|
|
|
|
// 节点点击事件
|
|
function handleNodeClick(event, d) {
|
|
event.stopPropagation();
|
|
|
|
// 如果正在拖拽，不处理点击事件
|
|
if (d.isDragging) {
|
|
d.isDragging = false;
|
|
return;
|
|
}
|
|
|
|
// 取消其他节点的选中状态
|
|
graphNodes.forEach((node) => {
|
|
node.selected = false;
|
|
});
|
|
clearSelection();
|
|
// 设置当前节点的选中状态
|
|
d.selected = true;
|
|
selectedElement = this;
|
|
|
|
// 更新视图但不重启模拟
|
|
mainGroup
|
|
.selectAll(".node")
|
|
.selectAll("rect")
|
|
.attr("class", (d) => (d.selected ? "selected" : ""));
|
|
}
|
|
|
|
// 初始化拖拽功能
|
|
function initDragAndDrop() {
|
|
document.querySelectorAll(".node-item").forEach((node) => {
|
|
node.addEventListener("dragstart", handleDragStart);
|
|
node.addEventListener("dragend", handleDragEnd);
|
|
});
|
|
|
|
graphContainer.addEventListener("dragover", handleDragOver);
|
|
graphContainer.addEventListener("drop", handleDrop);
|
|
}
|
|
|
|
function clearSelection() {
|
|
// 清除节点选中状态
|
|
graphNodes.forEach((node) => {
|
|
node.selected = false;
|
|
});
|
|
mainGroup.selectAll(".node").selectAll("rect").attr("class", "");
|
|
|
|
// 清除连接线选中状态
|
|
mainGroup.selectAll(".link").classed("selected", false);
|
|
|
|
selectedElement = null;
|
|
}
|
|
|
|
// 绑定事件
|
|
function bindEvents() {
|
|
svg.on("click", (event) => {
|
|
if (event.target === svg.node()) {
|
|
clearSelection();
|
|
}
|
|
});
|
|
|
|
refreshNodesBtn.addEventListener("click", loadAvailableNodes);
|
|
addLinkBtn.addEventListener("click", () => openModal(linkModal));
|
|
saveBtn.addEventListener("click", saveGraph);
|
|
//deleteBtn.addEventListener("click", deleteSelected);
|
|
deleteBtn.addEventListener("click", () => {
|
|
if (selectedElement) {
|
|
openModal(confirmModal);
|
|
} else {
|
|
showError("请先选择要删除的节点或连接");
|
|
}
|
|
});
|
|
backBtn.addEventListener(
|
|
"click",
|
|
() => (window.location.href = "/ui/page/stage.html")
|
|
);
|
|
|
|
zoomInBtn.addEventListener("click", () => {
|
|
svg.transition().call(zoomBehavior.scaleBy, 1.2);
|
|
});
|
|
|
|
zoomOutBtn.addEventListener("click", () => {
|
|
svg.transition().call(zoomBehavior.scaleBy, 0.8);
|
|
});
|
|
|
|
zoomResetBtn.addEventListener("click", () => {
|
|
svg.transition().call(zoomBehavior.transform, d3.zoomIdentity);
|
|
});
|
|
closeConfirmModal.addEventListener("click", () =>
|
|
closeModal(confirmModal)
|
|
);
|
|
cancelDeleteBtn.addEventListener("click", () =>
|
|
closeModal(confirmModal)
|
|
);
|
|
confirmDeleteBtn.addEventListener("click", confirmDelete);
|
|
}
|
|
|
|
function openModal(modal) {
|
|
modal.style.display = "flex";
|
|
}
|
|
|
|
// 工具函数：关闭模态框
|
|
function closeModal(modal) {
|
|
modal.style.display = "none";
|
|
}
|
|
// 拖拽相关函数
|
|
|
|
function handleDragStart(event) {
|
|
event.dataTransfer.setData("nodeId", event.target.dataset.nodeId);
|
|
}
|
|
|
|
function handleDragEnd() {
|
|
// 清理拖拽状态
|
|
}
|
|
|
|
function handleDragOver(event) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
async function handleDrop(event) {
|
|
event.preventDefault();
|
|
const nodeId = event.dataTransfer.getData("nodeId");
|
|
if (!nodeId) return;
|
|
|
|
const node = availableNodes.find((n) => n.id === nodeId);
|
|
if (!node) return;
|
|
|
|
const rect = graphContainer.getBoundingClientRect();
|
|
const transform = d3.zoomTransform(svg.node());
|
|
|
|
// 修正位置计算
|
|
const x = (event.clientX - rect.left - transform.x) / transform.k;
|
|
const y = (event.clientY - rect.top - transform.y) / transform.k;
|
|
|
|
// 添加新节点
|
|
const newNode = {
|
|
...node,
|
|
x: x,
|
|
y: y,
|
|
fx: x, // 固定初始位置
|
|
fy: y,
|
|
instanceId: `${node.id}-${Date.now()}`,
|
|
};
|
|
|
|
graphNodes.push(newNode);
|
|
|
|
// 更新图形并重启模拟
|
|
updateGraph();
|
|
|
|
// 短暂释放节点位置，让它能够稍微调整
|
|
setTimeout(() => {
|
|
newNode.fx = newNode.x;
|
|
newNode.fy = newNode.y;
|
|
simulation.alpha(0.1).restart();
|
|
}, 500);
|
|
}
|
|
// 保存图形
|
|
async function saveGraph() {
|
|
showLoading();
|
|
try {
|
|
const nodes = graphNodes.map((node) => ({
|
|
tree_id: node.id, // 原始树节点ID
|
|
stage_id: stageId,
|
|
instance_id: node.instanceId,
|
|
x: node.x,
|
|
y: node.y,
|
|
fx: node.fx,
|
|
fy: node.fy,
|
|
name: node.name,
|
|
level: node.level,
|
|
parent_id: node.parent_id,
|
|
}));
|
|
const links = graphLinks.map((link) => ({
|
|
stage_id: stageId,
|
|
source_id: link.source.instanceId,
|
|
target_id: link.target.instanceId,
|
|
link_id: link.id,
|
|
}));
|
|
const response = await fetch(`${API_BASE_URL}/graph/${stageId}/`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
nodes: nodes,
|
|
links: links,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) throw new Error(`HTTP error ${response.status}`);
|
|
|
|
const result = await response.json();
|
|
if (result.code === 0) {
|
|
showMessage("保存成功");
|
|
} else {
|
|
throw new Error(result.message || "保存失败");
|
|
}
|
|
} catch (error) {
|
|
showError("保存错误: " + error.message);
|
|
} finally {
|
|
hideLoading();
|
|
}
|
|
}
|
|
|
|
// 删除选中元素
|
|
function deleteSelected() {
|
|
if (!selectedElement) return;
|
|
|
|
if (
|
|
d3.select(selectedElement).classed("node") ||
|
|
d3.select(selectedElement.parentNode).classed("node")
|
|
) {
|
|
// 删除节点，使用instanceId而不是id
|
|
const nodeData = d3.select(selectedElement.closest(".node")).datum();
|
|
const nodeInstanceId = nodeData.instanceId || nodeData.id;
|
|
|
|
// 只删除特定实例的节点，而不是所有相同id的节点
|
|
graphNodes = graphNodes.filter(
|
|
(n) => (n.instanceId || n.id) !== nodeInstanceId
|
|
);
|
|
|
|
// 删除与该节点相关的连接
|
|
graphLinks = graphLinks.filter(
|
|
(l) =>
|
|
(l.source.instanceId || l.source.id) !== nodeInstanceId &&
|
|
(l.target.instanceId || l.target.id) !== nodeInstanceId
|
|
);
|
|
} else if (d3.select(selectedElement).classed("link")) {
|
|
// 删除连接线
|
|
const linkData = d3.select(selectedElement).datum();
|
|
graphLinks = graphLinks.filter((l) => l.id !== linkData.id);
|
|
}
|
|
|
|
selectedElement = null;
|
|
updateGraph();
|
|
}
|
|
|
|
// 绑定事件
|
|
|
|
// 打开连接模态框
|
|
function openLinkModal() {
|
|
// 填充节点选择框
|
|
populateNodeSelects();
|
|
openModal(linkModal);
|
|
}
|
|
|
|
// 填充节点选择框
|
|
function populateNodeSelects() {
|
|
prevNodeSelect.innerHTML = '<option value="">请选择前置节点</option>';
|
|
nextNodeSelect.innerHTML = '<option value="">请选择后置节点</option>';
|
|
|
|
graphNodes.forEach((node) => {
|
|
const prevOption = document.createElement("option");
|
|
prevOption.value = node.id;
|
|
prevOption.textContent =
|
|
node.name || `节点 ${node.id.substring(0, 8)}...`;
|
|
prevNodeSelect.appendChild(prevOption);
|
|
|
|
const nextOption = document.createElement("option");
|
|
nextOption.value = node.id;
|
|
nextOption.textContent =
|
|
node.name || `节点 ${node.id.substring(0, 8)}...`;
|
|
nextNodeSelect.appendChild(nextOption);
|
|
});
|
|
}
|
|
|
|
// 处理连接表单提交
|
|
function handleLinkFormSubmit(event) {
|
|
event.preventDefault();
|
|
|
|
const sourceId = prevNodeSelect.value;
|
|
const targetId = nextNodeSelect.value;
|
|
|
|
if (!sourceId || !targetId) {
|
|
showError("请选择前置节点和后置节点");
|
|
return;
|
|
}
|
|
|
|
if (sourceId === targetId) {
|
|
showError("前置节点和后置节点不能相同");
|
|
return;
|
|
}
|
|
|
|
// 检查是否已存在相同的连接
|
|
const existingLink = graphLinks.find(
|
|
(link) => link.source.id === sourceId && link.target.id === targetId
|
|
);
|
|
|
|
if (existingLink) {
|
|
showError("该连接已存在");
|
|
return;
|
|
}
|
|
|
|
// 获取源节点和目标节点
|
|
const source = graphNodes.find((node) => node.id === sourceId);
|
|
const target = graphNodes.find((node) => node.id === targetId);
|
|
|
|
// 创建新连接
|
|
graphLinks.push({
|
|
source,
|
|
target,
|
|
id: `${sourceId}-${targetId}`,
|
|
});
|
|
|
|
// 更新图形
|
|
updateGraph();
|
|
|
|
// 关闭模态框
|
|
closeModal(linkModal);
|
|
}
|
|
|
|
// 确认删除
|
|
function confirmDelete() {
|
|
deleteSelected();
|
|
closeModal(confirmModal);
|
|
}
|
|
|
|
// 工具函数：显示加载中
|
|
function showLoading() {
|
|
// 如果loading元素存在
|
|
if (loading) {
|
|
loading.style.display = "flex";
|
|
} else {
|
|
// 创建一个临时的loading元素
|
|
const tempLoading = document.createElement("div");
|
|
tempLoading.className = "loading";
|
|
tempLoading.innerHTML = '<div class="spinner"></div>';
|
|
document.body.appendChild(tempLoading);
|
|
setTimeout(() => {
|
|
document.body.removeChild(tempLoading);
|
|
}, 2000);
|
|
}
|
|
}
|
|
|
|
// 工具函数：隐藏加载中
|
|
function hideLoading() {
|
|
if (loading) {
|
|
loading.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// 工具函数：显示消息
|
|
function showMessage(message) {
|
|
alert(message); // 简单实现，可以替换为更友好的通知
|
|
}
|
|
|
|
// 工具函数：显示错误
|
|
function showError(message) {
|
|
alert("错误: " + message); // 简单实现，可以替换为更友好的通知
|
|
}
|
|
|
|
function hasCycle(links, source, target) {
|
|
// 创建一个临时的连接数组，包含新连接
|
|
const tempLinks = [...links, { source, target }];
|
|
|
|
// 构建邻接表
|
|
const adjacencyList = {};
|
|
tempLinks.forEach((link) => {
|
|
const sourceId = link.source.instanceId || link.source.id;
|
|
const targetId = link.target.instanceId || link.target.id;
|
|
|
|
if (!adjacencyList[sourceId]) {
|
|
adjacencyList[sourceId] = [];
|
|
}
|
|
adjacencyList[sourceId].push(targetId);
|
|
});
|
|
|
|
// 使用DFS检测环
|
|
const visited = {};
|
|
const recStack = {};
|
|
|
|
function dfsHasCycle(nodeId) {
|
|
// 如果节点不在邻接表中，说明它没有出边，不可能形成环
|
|
if (!adjacencyList[nodeId]) return false;
|
|
|
|
// 标记当前节点为已访问
|
|
visited[nodeId] = true;
|
|
recStack[nodeId] = true;
|
|
|
|
// 检查所有邻居
|
|
for (const neighbor of adjacencyList[nodeId]) {
|
|
// 如果邻居未访问，递归检查
|
|
if (!visited[neighbor]) {
|
|
if (dfsHasCycle(neighbor)) return true;
|
|
}
|
|
// 如果邻居在当前递归栈中，说明找到了环
|
|
else if (recStack[neighbor]) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// 回溯时从递归栈中移除
|
|
recStack[nodeId] = false;
|
|
return false;
|
|
}
|
|
|
|
// 对每个未访问的节点进行DFS
|
|
for (const nodeId in adjacencyList) {
|
|
if (!visited[nodeId]) {
|
|
if (dfsHasCycle(nodeId)) return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|