807 lines
33 KiB
JavaScript
807 lines
33 KiB
JavaScript
(function () {
|
||
const root = document.querySelector(".graph-editor");
|
||
const jsonEl = document.getElementById("graph-template-json");
|
||
if (!root || !jsonEl) return;
|
||
|
||
const svg = root.querySelector(".graph-canvas");
|
||
const canvasWrap = root.querySelector(".graph-canvas-wrap");
|
||
const nodeForm = root.querySelector(".graph-node-form");
|
||
const edgeForm = root.querySelector(".graph-edge-form");
|
||
const empty = root.querySelector(".graph-empty-inspector");
|
||
const saveForm = root.closest(".graph-editor-card").querySelector(".graph-save-form");
|
||
const deleteNodeBtn = root.querySelector(".graph-delete-node");
|
||
const deleteEdgeBtn = root.querySelector(".graph-delete-edge");
|
||
const connectBtn = root.querySelector(".graph-connect-node");
|
||
const connectTarget = root.querySelector(".graph-connect-target");
|
||
const typedParamFields = root.querySelector(".graph-typed-param-fields");
|
||
const autoLayoutBtn = root.querySelector(".graph-auto-layout");
|
||
const paletteList = root.querySelector(".graph-node-palette-list");
|
||
const rawJSON = (jsonEl.textContent && jsonEl.textContent.trim())
|
||
|| (jsonEl.innerHTML && jsonEl.innerHTML.trim())
|
||
|| (jsonEl.content && jsonEl.content.textContent && jsonEl.content.textContent.trim())
|
||
|| "{}";
|
||
const doc = JSON.parse(rawJSON);
|
||
const graph = doc.template || {};
|
||
const nodes = Array.isArray(graph.nodes) ? graph.nodes : [];
|
||
const edges = Array.isArray(graph.edges) ? graph.edges : [];
|
||
graph.nodes = nodes;
|
||
graph.edges = edges;
|
||
doc.template = graph;
|
||
|
||
const fallbackNodeTypes = [
|
||
{ type: "input_rtsp", label: "RTSP 输入", category: "输入", icon: "camera", description: "从网络摄像机或流媒体地址读取视频流。", defaults: { id: "input_rtsp", type: "input_rtsp", role: "source", enable: true, url: "${slot:video_input_main.url}" } },
|
||
{ type: "input_file", label: "文件输入", category: "输入", icon: "file", description: "从本地视频文件读取帧，常用于离线验证和回放。", defaults: { id: "input_file", type: "input_file", role: "source", enable: true } },
|
||
{ type: "preprocess", label: "图像预处理", category: "处理", icon: "adjust", description: "调整尺寸、格式和硬件加速路径，为后续推理或编码准备图像。", defaults: { id: "preprocess", type: "preprocess", role: "filter", enable: true, dst_format: "rgb" } },
|
||
{ type: "ai_scrfd", label: "SCRFD 人脸检测", category: "AI 推理", icon: "scan-face", description: "使用 SCRFD 模型做人脸检测，适合固定输入尺寸场景。", defaults: { id: "ai_scrfd", type: "ai_scrfd", role: "filter", enable: true } },
|
||
{ type: "ai_scrfd_sliding", label: "滑窗人脸检测", category: "AI 推理", icon: "scan-face", description: "使用滑窗方式执行 SCRFD 人脸检测，适合高分辨率画面。", defaults: { id: "ai_scrfd_sliding", type: "ai_scrfd_sliding", role: "filter", enable: true } },
|
||
{ type: "ai_face_det", label: "人脸检测", category: "AI 推理", icon: "face", description: "通用人脸检测节点，输出人脸框和质量信息。", defaults: { id: "ai_face_det", type: "ai_face_det", role: "filter", enable: true } },
|
||
{ type: "ai_face_recog", label: "人脸识别", category: "AI 推理", icon: "face-id", description: "对检测到的人脸进行特征提取和人脸库匹配。", defaults: { id: "face_recog", type: "ai_face_recog", role: "filter", enable: true, infer_fps: 2 } },
|
||
{ type: "ai_yolo", label: "YOLO 目标检测", category: "AI 推理", icon: "target", description: "使用 YOLO 模型检测人员、PPE 或其他目标。", defaults: { id: "ai_yolo", type: "ai_yolo", role: "filter", enable: true, infer_fps: 2, conf: 0.35, nms: 0.45 } },
|
||
{ type: "ai_shoe_det", label: "鞋靴检测", category: "AI 推理", icon: "shoe", description: "检测鞋靴和工鞋相关目标，可配合逻辑节点判断违规。", defaults: { id: "ai_shoe_det", type: "ai_shoe_det", role: "filter", enable: true } },
|
||
{ type: "tracker", label: "目标跟踪", category: "处理", icon: "route", description: "对检测目标分配跟踪 ID，保持跨帧目标状态。", defaults: { id: "tracker", type: "tracker", role: "filter", enable: true } },
|
||
{ type: "logic_gate", label: "规则判断", category: "规则", icon: "branch", description: "根据检测、跟踪或颜色分析结果进行业务规则判断。", defaults: { id: "logic_gate", type: "logic_gate", role: "filter", enable: true, expression: "" } },
|
||
{ type: "event_fusion", label: "事件融合", category: "规则", icon: "merge", description: "融合多路事件，减少重复告警并形成更稳定的业务事件。", defaults: { id: "event_fusion", type: "event_fusion", role: "filter", enable: true } },
|
||
{ type: "region_event", label: "区域事件", category: "规则", icon: "region", description: "基于区域、越线或停留规则生成区域行为事件。", defaults: { id: "region_event", type: "region_event", role: "filter", enable: true } },
|
||
{ type: "action_recog", label: "行为识别", category: "AI 推理", icon: "activity", description: "识别人员行为或动作事件。", defaults: { id: "action_recog", type: "action_recog", role: "filter", enable: true } },
|
||
{ type: "det_post", label: "检测后处理", category: "处理", icon: "filter", description: "对检测结果做过滤、映射、合并或类别转换。", defaults: { id: "det_post", type: "det_post", role: "filter", enable: true } },
|
||
{ type: "osd", label: "画面叠加", category: "输出", icon: "overlay", description: "在视频帧上绘制检测框、文字、人脸识别和事件信息。", defaults: { id: "osd", type: "osd", role: "filter", enable: true } },
|
||
{ type: "publish", label: "视频输出", category: "输出", icon: "broadcast", description: "编码并发布 RTSP、HLS 或其他视频输出。", defaults: { id: "publish", type: "publish", role: "sink", enable: true } },
|
||
{ type: "storage", label: "本地存储", category: "输出", icon: "database", description: "保存帧、事件或中间结果到本地存储。", defaults: { id: "storage", type: "storage", role: "sink", enable: true } },
|
||
{ type: "alarm", label: "告警动作", category: "输出", icon: "bell", description: "根据规则触发日志、抓图、录像片段、外部接口等动作。", defaults: { id: "alarm", type: "alarm", role: "sink", enable: true, level: "warning" } },
|
||
{ type: "gate", label: "流控闸门", category: "系统", icon: "gate", description: "控制流程分支或限流，保护下游节点。", defaults: { id: "gate", type: "gate", role: "filter", enable: true } },
|
||
{ type: "zlm_http", label: "ZLMediaKit HTTP", category: "系统", icon: "server", description: "提供 ZLMediaKit 相关 HTTP 文件服务能力。", defaults: { id: "zlm_http", type: "zlm_http", role: "sink", enable: true } }
|
||
];
|
||
|
||
const coreNodeKeys = new Set(["id", "type", "role", "enable"]);
|
||
const coreEdgeKeys = new Set(["from", "to"]);
|
||
const paramSchemas = {
|
||
input_rtsp: [
|
||
{ key: "url", label: "RTSP 地址", type: "text", placeholder: "${slot:video_input_main.url}" },
|
||
{ key: "fps", label: "输入帧率", type: "number", step: "1" },
|
||
{ key: "width", label: "宽度", type: "number", step: "1" },
|
||
{ key: "height", label: "高度", type: "number", step: "1" },
|
||
{ key: "force_tcp", label: "强制 TCP", type: "boolean" },
|
||
{ key: "reconnect_sec", label: "重连间隔秒", type: "number", step: "1" }
|
||
],
|
||
preprocess: [
|
||
{ key: "dst_w", label: "输出宽度", type: "number", step: "1" },
|
||
{ key: "dst_h", label: "输出高度", type: "number", step: "1" },
|
||
{ key: "dst_format", label: "输出格式", type: "select", options: ["rgb", "nv12", "bgr"] },
|
||
{ key: "resize_mode", label: "缩放方式", type: "select", options: ["stretch", "letterbox"] },
|
||
{ key: "use_rga", label: "使用 RGA", type: "boolean" },
|
||
{ key: "rga_gate", label: "RGA 通道", type: "text" }
|
||
],
|
||
ai_yolo: [
|
||
{ key: "model_path", label: "模型路径", type: "text" },
|
||
{ key: "infer_fps", label: "推理帧率", type: "number", step: "0.1" },
|
||
{ key: "model_w", label: "模型宽度", type: "number", step: "1" },
|
||
{ key: "model_h", label: "模型高度", type: "number", step: "1" },
|
||
{ key: "conf", label: "置信度", type: "number", step: "0.01" },
|
||
{ key: "nms", label: "NMS", type: "number", step: "0.01" }
|
||
],
|
||
ai_shoe_det: [
|
||
{ key: "model_path", label: "模型路径", type: "text" },
|
||
{ key: "infer_fps", label: "推理帧率", type: "number", step: "0.1" },
|
||
{ key: "conf", label: "置信度", type: "number", step: "0.01" },
|
||
{ key: "nms", label: "NMS", type: "number", step: "0.01" },
|
||
{ key: "append_detections", label: "追加检测结果", type: "boolean" }
|
||
],
|
||
ai_scrfd_sliding: [
|
||
{ key: "model_path", label: "模型路径", type: "text" },
|
||
{ key: "infer_fps", label: "推理帧率", type: "number", step: "0.1" },
|
||
{ key: "conf_thresh", label: "置信度", type: "number", step: "0.01" },
|
||
{ key: "nms_thresh", label: "NMS", type: "number", step: "0.01" },
|
||
{ key: "max_faces", label: "最大人脸数", type: "number", step: "1" }
|
||
],
|
||
ai_face_recog: [
|
||
{ key: "model_path", label: "模型路径", type: "text" },
|
||
{ key: "infer_fps", label: "推理帧率", type: "number", step: "0.1" },
|
||
{ key: "align", label: "人脸对齐", type: "boolean" },
|
||
{ key: "emit_embedding", label: "输出特征", type: "boolean" },
|
||
{ key: "max_faces", label: "最大人脸数", type: "number", step: "1" }
|
||
],
|
||
tracker: [
|
||
{ key: "mode", label: "跟踪模式", type: "text" },
|
||
{ key: "per_class", label: "按类别跟踪", type: "boolean" },
|
||
{ key: "high_th", label: "高阈值", type: "number", step: "0.01" },
|
||
{ key: "low_th", label: "低阈值", type: "number", step: "0.01" },
|
||
{ key: "iou_th", label: "IOU 阈值", type: "number", step: "0.01" },
|
||
{ key: "max_age_ms", label: "最大保留毫秒", type: "number", step: "1" }
|
||
],
|
||
logic_gate: [
|
||
{ key: "mode", label: "逻辑模式", type: "text" },
|
||
{ key: "debug", label: "调试输出", type: "boolean" },
|
||
{ key: "anchor_class", label: "锚点类别", type: "number", step: "1" },
|
||
{ key: "boots_class", label: "鞋靴类别", type: "number", step: "1" },
|
||
{ key: "violation_class", label: "违规类别", type: "number", step: "1" }
|
||
],
|
||
osd: [
|
||
{ key: "draw_bbox", label: "绘制框", type: "boolean" },
|
||
{ key: "draw_text", label: "绘制文字", type: "boolean" },
|
||
{ key: "draw_face_det", label: "绘制人脸检测", type: "boolean" },
|
||
{ key: "draw_face_recog", label: "绘制人脸识别", type: "boolean" },
|
||
{ key: "line_width", label: "线宽", type: "number", step: "0.1" },
|
||
{ key: "font_scale", label: "字体缩放", type: "number", step: "0.1" }
|
||
],
|
||
publish: [
|
||
{ key: "codec", label: "编码", type: "select", options: ["h264", "h265"] },
|
||
{ key: "fps", label: "输出帧率", type: "number", step: "1" },
|
||
{ key: "gop", label: "GOP", type: "number", step: "1" },
|
||
{ key: "bitrate_kbps", label: "码率 kbps", type: "number", step: "1" },
|
||
{ key: "use_mpp", label: "使用 MPP", type: "boolean" },
|
||
{ key: "use_ffmpeg_mux", label: "FFmpeg 封装", type: "boolean" }
|
||
],
|
||
alarm: [
|
||
{ key: "eval_fps", label: "评估帧率", type: "number", step: "0.1" }
|
||
]
|
||
};
|
||
|
||
function catalogFromItems(items) {
|
||
const out = {};
|
||
(items || []).forEach((item) => {
|
||
if (!item || !item.type || !item.defaults) return;
|
||
out[item.type] = item;
|
||
if (Array.isArray(item.params)) paramSchemas[item.type] = item.params;
|
||
});
|
||
return out;
|
||
}
|
||
|
||
let nodeCatalog = catalogFromItems(fallbackNodeTypes);
|
||
|
||
const layout = (((doc.ui || {}).layout || {}).nodes) || {};
|
||
const hasSavedLayout = Object.keys(layout).length > 0;
|
||
const nodeSize = { w: 142, h: 48 };
|
||
const layoutGap = { x: 190, y: 86 };
|
||
const positions = {};
|
||
let selectedNodeId = "";
|
||
let selectedEdgeIndex = -1;
|
||
let drag = null;
|
||
|
||
function nodePosition(node, index) {
|
||
const saved = layout[node.id] || {};
|
||
return {
|
||
x: Number.isFinite(saved.x) ? saved.x : 80 + (index % 4) * 220,
|
||
y: Number.isFinite(saved.y) ? saved.y : 80 + Math.floor(index / 4) * 100
|
||
};
|
||
}
|
||
|
||
nodes.forEach((node, index) => {
|
||
positions[node.id] = nodePosition(node, index);
|
||
});
|
||
|
||
function edgeEndpoints(edge) {
|
||
if (Array.isArray(edge)) return { from: edge[0], to: edge[1] };
|
||
return { from: edge.from, to: edge.to };
|
||
}
|
||
|
||
function setEdgeEndpoint(edge, key, value) {
|
||
if (Array.isArray(edge)) {
|
||
edge[key === "from" ? 0 : 1] = value;
|
||
return;
|
||
}
|
||
edge[key] = value;
|
||
}
|
||
|
||
function edgeExtras(edge) {
|
||
if (Array.isArray(edge)) {
|
||
const extra = edge[2];
|
||
return extra && typeof extra === "object" && !Array.isArray(extra) ? extra : {};
|
||
}
|
||
const out = {};
|
||
Object.entries(edge).forEach(([key, value]) => {
|
||
if (!coreEdgeKeys.has(key)) out[key] = value;
|
||
});
|
||
return out;
|
||
}
|
||
|
||
function ensureObjectEdge(index) {
|
||
const edge = edges[index];
|
||
if (!Array.isArray(edge)) return edge;
|
||
const next = { from: edge[0], to: edge[1] };
|
||
edges[index] = next;
|
||
return next;
|
||
}
|
||
|
||
function clear(el) {
|
||
while (el.firstChild) el.removeChild(el.firstChild);
|
||
}
|
||
|
||
function svgEl(name, attrs) {
|
||
const el = document.createElementNS("http://www.w3.org/2000/svg", name);
|
||
Object.entries(attrs || {}).forEach(([key, value]) => el.setAttribute(key, String(value)));
|
||
return el;
|
||
}
|
||
|
||
function iconLabel(icon, type) {
|
||
const icons = {
|
||
camera: "IN",
|
||
file: "FI",
|
||
adjust: "PR",
|
||
"scan-face": "FD",
|
||
face: "FD",
|
||
"face-id": "FR",
|
||
target: "AI",
|
||
shoe: "SH",
|
||
route: "TR",
|
||
branch: "LG",
|
||
merge: "EF",
|
||
region: "RG",
|
||
activity: "AC",
|
||
filter: "PO",
|
||
overlay: "OS",
|
||
broadcast: "PB",
|
||
database: "DB",
|
||
bell: "AL",
|
||
gate: "GT",
|
||
server: "SV"
|
||
};
|
||
return icons[icon] || String(type || "?").slice(0, 2).toUpperCase();
|
||
}
|
||
|
||
function renderPalette() {
|
||
if (!paletteList) return;
|
||
clear(paletteList);
|
||
const groups = {};
|
||
Object.values(nodeCatalog).forEach((item) => {
|
||
const key = item.category || "其他";
|
||
groups[key] = groups[key] || [];
|
||
groups[key].push(item);
|
||
});
|
||
Object.keys(groups).forEach((category) => {
|
||
const group = document.createElement("div");
|
||
group.className = "graph-node-palette-group";
|
||
const title = document.createElement("div");
|
||
title.className = "graph-node-palette-category";
|
||
title.textContent = category;
|
||
group.appendChild(title);
|
||
groups[category].forEach((item) => {
|
||
const button = document.createElement("button");
|
||
button.type = "button";
|
||
button.className = "graph-node-palette";
|
||
button.dataset.nodeType = item.type;
|
||
button.title = item.description || item.label || item.type;
|
||
const icon = document.createElement("span");
|
||
icon.className = "graph-node-palette-icon";
|
||
icon.textContent = iconLabel(item.icon, item.type);
|
||
const text = document.createElement("span");
|
||
text.className = "graph-node-palette-text";
|
||
const label = document.createElement("span");
|
||
label.textContent = item.label || item.type;
|
||
const type = document.createElement("small");
|
||
type.textContent = item.type;
|
||
text.appendChild(label);
|
||
text.appendChild(type);
|
||
button.appendChild(icon);
|
||
button.appendChild(text);
|
||
group.appendChild(button);
|
||
});
|
||
paletteList.appendChild(group);
|
||
});
|
||
}
|
||
|
||
async function loadNodeCatalog() {
|
||
if (!paletteList || !paletteList.dataset.catalogUrl || !window.fetch) return;
|
||
try {
|
||
const res = await fetch(paletteList.dataset.catalogUrl, { headers: { Accept: "application/json" } });
|
||
if (!res.ok) return;
|
||
const payload = await res.json();
|
||
if (!payload || !Array.isArray(payload.items) || payload.items.length === 0) return;
|
||
nodeCatalog = catalogFromItems(payload.items);
|
||
renderPalette();
|
||
render();
|
||
if (selectedNodeId) selectNode(selectedNodeId);
|
||
} catch (err) {
|
||
// Keep the offline catalog available when no device agent is reachable.
|
||
}
|
||
}
|
||
|
||
function nodeOptions(select, excludedId) {
|
||
clear(select);
|
||
nodes.forEach((node) => {
|
||
if (node.id === excludedId) return;
|
||
const option = document.createElement("option");
|
||
option.value = node.id;
|
||
option.textContent = node.id;
|
||
select.appendChild(option);
|
||
});
|
||
}
|
||
|
||
function anchorPoints(fromId, toId) {
|
||
const a = positions[fromId];
|
||
const b = positions[toId];
|
||
if (!a || !b) return null;
|
||
const dx = b.x - a.x;
|
||
const dy = b.y - a.y;
|
||
if (Math.abs(dy) >= Math.abs(dx)) {
|
||
if (dy >= 0) {
|
||
return {
|
||
from: { x: a.x + nodeSize.w / 2, y: a.y + nodeSize.h },
|
||
to: { x: b.x + nodeSize.w / 2, y: b.y },
|
||
vertical: true
|
||
};
|
||
}
|
||
return {
|
||
from: { x: a.x + nodeSize.w / 2, y: a.y },
|
||
to: { x: b.x + nodeSize.w / 2, y: b.y + nodeSize.h },
|
||
vertical: true
|
||
};
|
||
}
|
||
if (dx >= 0) {
|
||
return {
|
||
from: { x: a.x + nodeSize.w, y: a.y + nodeSize.h / 2 },
|
||
to: { x: b.x, y: b.y + nodeSize.h / 2 },
|
||
vertical: false
|
||
};
|
||
}
|
||
return {
|
||
from: { x: a.x, y: a.y + nodeSize.h / 2 },
|
||
to: { x: b.x + nodeSize.w, y: b.y + nodeSize.h / 2 },
|
||
vertical: false
|
||
};
|
||
}
|
||
|
||
function edgePathData(fromId, toId) {
|
||
const anchors = anchorPoints(fromId, toId);
|
||
if (!anchors) return "";
|
||
const a = anchors.from;
|
||
const b = anchors.to;
|
||
if (anchors.vertical) {
|
||
const midY = (a.y + b.y) / 2;
|
||
return `M ${a.x} ${a.y} C ${a.x} ${midY}, ${b.x} ${midY}, ${b.x} ${b.y}`;
|
||
}
|
||
const midX = (a.x + b.x) / 2;
|
||
return `M ${a.x} ${a.y} C ${midX} ${a.y}, ${midX} ${b.y}, ${b.x} ${b.y}`;
|
||
}
|
||
|
||
function updateCanvasSize() {
|
||
const padding = 90;
|
||
let maxX = 0;
|
||
let maxY = 0;
|
||
nodes.forEach((node) => {
|
||
const p = positions[node.id];
|
||
if (!p) return;
|
||
maxX = Math.max(maxX, p.x + nodeSize.w);
|
||
maxY = Math.max(maxY, p.y + nodeSize.h);
|
||
});
|
||
const contentWidth = Math.max(720, maxX + padding);
|
||
const contentHeight = Math.max(620, maxY + padding);
|
||
const viewportWidth = canvasWrap ? Math.max(720, canvasWrap.clientWidth - 2) : 720;
|
||
svg.setAttribute("width", String(Math.max(viewportWidth, contentWidth)));
|
||
svg.setAttribute("height", String(contentHeight));
|
||
svg.style.width = `${Math.max(viewportWidth, contentWidth)}px`;
|
||
svg.style.height = `${contentHeight}px`;
|
||
svg.setAttribute("viewBox", `0 0 ${Math.max(viewportWidth, contentWidth)} ${contentHeight}`);
|
||
}
|
||
|
||
function render() {
|
||
updateCanvasSize();
|
||
clear(svg);
|
||
edges.forEach((edge, index) => {
|
||
const ep = edgeEndpoints(edge);
|
||
const d = edgePathData(ep.from, ep.to);
|
||
if (!d) return;
|
||
const hit = svgEl("path", { class: "graph-edge-hit", d: d, "data-edge-index": index });
|
||
const path = svgEl("path", {
|
||
class: "graph-edge" + (index === selectedEdgeIndex ? " selected" : ""),
|
||
d: d,
|
||
"data-edge-index": index
|
||
});
|
||
hit.addEventListener("click", () => selectEdge(index));
|
||
path.addEventListener("click", () => selectEdge(index));
|
||
svg.appendChild(hit);
|
||
svg.appendChild(path);
|
||
});
|
||
|
||
nodes.forEach((node) => {
|
||
const p = positions[node.id] || { x: 80, y: 80 };
|
||
const g = svgEl("g", {
|
||
class: "graph-node" + (node.id === selectedNodeId ? " selected" : ""),
|
||
transform: `translate(${p.x}, ${p.y})`,
|
||
"data-node-id": node.id
|
||
});
|
||
g.appendChild(svgEl("rect", { width: nodeSize.w, height: nodeSize.h, rx: 7 }));
|
||
const spec = nodeCatalog[node.type] || {};
|
||
const svgTitle = svgEl("title");
|
||
svgTitle.textContent = spec.description || node.type || node.id || "";
|
||
g.appendChild(svgTitle);
|
||
const icon = svgEl("text", { x: 12, y: 19, class: "graph-node-icon" });
|
||
icon.textContent = iconLabel(spec.icon, node.type);
|
||
g.appendChild(icon);
|
||
const title = svgEl("text", { x: 36, y: 19 });
|
||
title.textContent = node.id || "-";
|
||
g.appendChild(title);
|
||
const meta = svgEl("text", { x: 36, y: 37, class: "graph-node-type" });
|
||
meta.textContent = spec.label || node.type || "-";
|
||
g.appendChild(meta);
|
||
g.addEventListener("click", () => selectNode(node.id));
|
||
g.addEventListener("pointerdown", (event) => startDrag(event, node));
|
||
svg.appendChild(g);
|
||
});
|
||
}
|
||
|
||
function showPanel(kind) {
|
||
empty.hidden = kind !== "empty";
|
||
nodeForm.hidden = kind !== "node";
|
||
edgeForm.hidden = kind !== "edge";
|
||
}
|
||
|
||
function nodeExtras(node) {
|
||
const schemaKeys = new Set((paramSchemas[node.type] || []).map((field) => field.key));
|
||
const out = {};
|
||
Object.entries(node).forEach(([key, value]) => {
|
||
if (!coreNodeKeys.has(key) && !schemaKeys.has(key)) out[key] = value;
|
||
});
|
||
return out;
|
||
}
|
||
|
||
function fieldValueForInput(value) {
|
||
if (value === undefined || value === null) return "";
|
||
if (typeof value === "object") return JSON.stringify(value);
|
||
return String(value);
|
||
}
|
||
|
||
function parseTypedValue(field, value) {
|
||
if (field.type === "boolean") return value === "true";
|
||
if (field.type === "number") {
|
||
if (String(value).trim() === "") return undefined;
|
||
const num = Number(value);
|
||
return Number.isFinite(num) ? num : undefined;
|
||
}
|
||
if (String(value).trim() === "") return undefined;
|
||
return value;
|
||
}
|
||
|
||
function createTypedField(field, value) {
|
||
const label = document.createElement("label");
|
||
const caption = document.createElement("span");
|
||
caption.textContent = field.label;
|
||
label.appendChild(caption);
|
||
let input;
|
||
if (field.type === "boolean") {
|
||
input = document.createElement("select");
|
||
[["true", "启用"], ["false", "停用"]].forEach(([val, text]) => {
|
||
const option = document.createElement("option");
|
||
option.value = val;
|
||
option.textContent = text;
|
||
input.appendChild(option);
|
||
});
|
||
input.value = value === false ? "false" : "true";
|
||
} else if (field.type === "select") {
|
||
input = document.createElement("select");
|
||
(field.options || []).forEach((item) => {
|
||
const option = document.createElement("option");
|
||
option.value = item;
|
||
option.textContent = item;
|
||
input.appendChild(option);
|
||
});
|
||
if (value !== undefined) input.value = String(value);
|
||
} else {
|
||
input = document.createElement("input");
|
||
input.type = field.type || "text";
|
||
if (field.step) input.step = field.step;
|
||
if (field.placeholder) input.placeholder = field.placeholder;
|
||
input.value = fieldValueForInput(value);
|
||
}
|
||
input.dataset.paramKey = field.key;
|
||
input.dataset.paramType = field.type || "text";
|
||
label.appendChild(input);
|
||
return label;
|
||
}
|
||
|
||
function renderTypedParamFields(node) {
|
||
clear(typedParamFields);
|
||
(paramSchemas[node.type] || []).forEach((field) => {
|
||
typedParamFields.appendChild(createTypedField(field, node[field.key]));
|
||
});
|
||
}
|
||
|
||
function applyTypedParamFields(node) {
|
||
(paramSchemas[node.type] || []).forEach((field) => {
|
||
const input = typedParamFields.querySelector(`[data-param-key="${field.key}"]`);
|
||
if (!input) return;
|
||
const parsed = parseTypedValue(field, input.value);
|
||
if (parsed === undefined) {
|
||
delete node[field.key];
|
||
} else {
|
||
node[field.key] = parsed;
|
||
}
|
||
});
|
||
}
|
||
|
||
function selectNode(id) {
|
||
selectedNodeId = id;
|
||
selectedEdgeIndex = -1;
|
||
const node = nodes.find((item) => item.id === id);
|
||
if (!node) return;
|
||
showPanel("node");
|
||
nodeForm.elements.id.value = node.id || "";
|
||
nodeForm.elements.type.value = node.type || "";
|
||
nodeForm.elements.role.value = node.role || "filter";
|
||
nodeForm.elements.enable.value = node.enable === false ? "false" : "true";
|
||
renderTypedParamFields(node);
|
||
nodeForm.elements.params_json.value = JSON.stringify(nodeExtras(node), null, 2);
|
||
nodeOptions(connectTarget, node.id);
|
||
render();
|
||
}
|
||
|
||
function selectEdge(index) {
|
||
selectedNodeId = "";
|
||
selectedEdgeIndex = index;
|
||
const edge = edges[index];
|
||
if (!edge) return;
|
||
const ep = edgeEndpoints(edge);
|
||
showPanel("edge");
|
||
nodeOptions(edgeForm.elements.from, "");
|
||
nodeOptions(edgeForm.elements.to, "");
|
||
edgeForm.elements.from.value = ep.from || "";
|
||
edgeForm.elements.to.value = ep.to || "";
|
||
edgeForm.elements.params_json.value = JSON.stringify(edgeExtras(edge), null, 2);
|
||
render();
|
||
}
|
||
|
||
function parseJSONField(text, fallback) {
|
||
const raw = text.trim();
|
||
if (raw === "") return {};
|
||
const parsed = JSON.parse(raw);
|
||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return fallback;
|
||
return parsed;
|
||
}
|
||
|
||
function applyNodeExtras(node) {
|
||
applyTypedParamFields(node);
|
||
const extras = parseJSONField(nodeForm.elements.params_json.value, {});
|
||
Object.keys(node).forEach((key) => {
|
||
if (!coreNodeKeys.has(key) && !(paramSchemas[node.type] || []).some((field) => field.key === key)) delete node[key];
|
||
});
|
||
Object.assign(node, extras);
|
||
}
|
||
|
||
function applyEdgeExtras(index) {
|
||
const edge = ensureObjectEdge(index);
|
||
const extras = parseJSONField(edgeForm.elements.params_json.value, {});
|
||
Object.keys(edge).forEach((key) => {
|
||
if (!coreEdgeKeys.has(key)) delete edge[key];
|
||
});
|
||
Object.assign(edge, extras);
|
||
}
|
||
|
||
function bindForms() {
|
||
if (!nodeForm.dataset.bound) {
|
||
nodeForm.dataset.bound = "true";
|
||
nodeForm.addEventListener("input", function (event) {
|
||
if (event.target && event.target.dataset && event.target.dataset.paramKey) {
|
||
const node = nodes.find((item) => item.id === selectedNodeId);
|
||
if (node) applyTypedParamFields(node);
|
||
return;
|
||
}
|
||
if (event.target && event.target.name === "params_json") return;
|
||
const node = nodes.find((item) => item.id === selectedNodeId);
|
||
if (!node) return;
|
||
const oldId = node.id;
|
||
const nextId = nodeForm.elements.id.value.trim();
|
||
node.role = nodeForm.elements.role.value;
|
||
node.enable = nodeForm.elements.enable.value === "true";
|
||
if (nextId && nextId !== oldId && !nodes.some((item) => item !== node && item.id === nextId)) {
|
||
node.id = nextId;
|
||
positions[nextId] = positions[oldId] || { x: 80, y: 80 };
|
||
delete positions[oldId];
|
||
edges.forEach((edge) => {
|
||
if (edgeEndpoints(edge).from === oldId) setEdgeEndpoint(edge, "from", nextId);
|
||
if (edgeEndpoints(edge).to === oldId) setEdgeEndpoint(edge, "to", nextId);
|
||
});
|
||
selectedNodeId = nextId;
|
||
nodeOptions(connectTarget, node.id);
|
||
}
|
||
render();
|
||
});
|
||
nodeForm.elements.params_json.addEventListener("change", function () {
|
||
const node = nodes.find((item) => item.id === selectedNodeId);
|
||
if (!node) return;
|
||
try {
|
||
applyNodeExtras(node);
|
||
this.setCustomValidity("");
|
||
} catch (err) {
|
||
this.setCustomValidity("参数必须是 JSON 对象");
|
||
this.reportValidity();
|
||
}
|
||
});
|
||
}
|
||
|
||
if (!edgeForm.dataset.bound) {
|
||
edgeForm.dataset.bound = "true";
|
||
edgeForm.addEventListener("input", function (event) {
|
||
if (event.target && event.target.name === "params_json") return;
|
||
const edge = edges[selectedEdgeIndex];
|
||
if (!edge) return;
|
||
setEdgeEndpoint(edge, "from", edgeForm.elements.from.value);
|
||
setEdgeEndpoint(edge, "to", edgeForm.elements.to.value);
|
||
render();
|
||
});
|
||
edgeForm.elements.params_json.addEventListener("change", function () {
|
||
if (selectedEdgeIndex < 0) return;
|
||
try {
|
||
applyEdgeExtras(selectedEdgeIndex);
|
||
this.setCustomValidity("");
|
||
} catch (err) {
|
||
this.setCustomValidity("参数必须是 JSON 对象");
|
||
this.reportValidity();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
function startDrag(event, node) {
|
||
const p = positions[node.id] || { x: 80, y: 80 };
|
||
drag = { id: node.id, startX: event.clientX, startY: event.clientY, x: p.x, y: p.y };
|
||
selectedNodeId = node.id;
|
||
selectNode(node.id);
|
||
event.preventDefault();
|
||
}
|
||
|
||
function uniqueNodeId(base) {
|
||
let out = base;
|
||
let i = 2;
|
||
while (nodes.some((node) => node.id === out)) {
|
||
out = `${base}_${i}`;
|
||
i += 1;
|
||
}
|
||
return out;
|
||
}
|
||
|
||
function hasEdge(from, to) {
|
||
return edges.some((edge) => {
|
||
const ep = edgeEndpoints(edge);
|
||
return ep.from === from && ep.to === to;
|
||
});
|
||
}
|
||
|
||
function autoLayout() {
|
||
const ids = nodes.map((node) => node.id).filter(Boolean);
|
||
const viewportWidth = canvasWrap ? Math.max(720, canvasWrap.clientWidth - 2) : 720;
|
||
const indegree = {};
|
||
const outgoing = {};
|
||
ids.forEach((id) => {
|
||
indegree[id] = 0;
|
||
outgoing[id] = [];
|
||
});
|
||
edges.forEach((edge) => {
|
||
const ep = edgeEndpoints(edge);
|
||
if (!(ep.from in indegree) || !(ep.to in indegree)) return;
|
||
outgoing[ep.from].push(ep.to);
|
||
indegree[ep.to] += 1;
|
||
});
|
||
|
||
const queue = ids.filter((id) => indegree[id] === 0);
|
||
const level = {};
|
||
queue.forEach((id) => { level[id] = 0; });
|
||
for (let i = 0; i < queue.length; i += 1) {
|
||
const id = queue[i];
|
||
outgoing[id].forEach((next) => {
|
||
level[next] = Math.max(level[next] || 0, (level[id] || 0) + 1);
|
||
indegree[next] -= 1;
|
||
if (indegree[next] === 0) queue.push(next);
|
||
});
|
||
}
|
||
ids.forEach((id, index) => {
|
||
if (level[id] === undefined) level[id] = index;
|
||
});
|
||
|
||
const groups = {};
|
||
ids.forEach((id) => {
|
||
const key = level[id];
|
||
groups[key] = groups[key] || [];
|
||
groups[key].push(id);
|
||
});
|
||
Object.keys(groups).map(Number).sort((a, b) => a - b).forEach((levelNum) => {
|
||
const group = groups[levelNum];
|
||
const totalWidth = nodeSize.w + Math.max(0, group.length - 1) * layoutGap.x;
|
||
const startX = Math.max(60, (viewportWidth - totalWidth) / 2);
|
||
group.forEach((id, index) => {
|
||
positions[id] = {
|
||
x: startX + index * layoutGap.x,
|
||
y: 70 + levelNum * layoutGap.y
|
||
};
|
||
});
|
||
});
|
||
render();
|
||
}
|
||
|
||
if (paletteList) {
|
||
paletteList.addEventListener("click", function (event) {
|
||
const item = event.target.closest(".graph-node-palette");
|
||
if (!item || !paletteList.contains(item)) return;
|
||
const spec = nodeCatalog[item.dataset.nodeType];
|
||
if (!spec) return;
|
||
const node = JSON.parse(JSON.stringify(spec.defaults));
|
||
node.id = uniqueNodeId(node.id);
|
||
nodes.push(node);
|
||
positions[node.id] = { x: 100 + nodes.length * 20, y: 100 + nodes.length * 20 };
|
||
selectNode(node.id);
|
||
});
|
||
}
|
||
|
||
svg.addEventListener("pointermove", function (event) {
|
||
if (!drag) return;
|
||
positions[drag.id] = {
|
||
x: drag.x + event.clientX - drag.startX,
|
||
y: drag.y + event.clientY - drag.startY
|
||
};
|
||
render();
|
||
});
|
||
|
||
svg.addEventListener("pointerup", function () {
|
||
drag = null;
|
||
});
|
||
|
||
if (connectBtn) {
|
||
connectBtn.addEventListener("click", function () {
|
||
const target = connectTarget.value;
|
||
if (!selectedNodeId || !target || hasEdge(selectedNodeId, target)) return;
|
||
edges.push({ from: selectedNodeId, to: target });
|
||
selectedEdgeIndex = edges.length - 1;
|
||
selectEdge(selectedEdgeIndex);
|
||
});
|
||
}
|
||
|
||
if (deleteNodeBtn) {
|
||
deleteNodeBtn.addEventListener("click", function () {
|
||
if (!selectedNodeId) return;
|
||
const index = nodes.findIndex((node) => node.id === selectedNodeId);
|
||
if (index >= 0) nodes.splice(index, 1);
|
||
for (let i = edges.length - 1; i >= 0; i -= 1) {
|
||
const ep = edgeEndpoints(edges[i]);
|
||
if (ep.from === selectedNodeId || ep.to === selectedNodeId) edges.splice(i, 1);
|
||
}
|
||
delete positions[selectedNodeId];
|
||
selectedNodeId = "";
|
||
showPanel("empty");
|
||
render();
|
||
});
|
||
}
|
||
|
||
if (deleteEdgeBtn) {
|
||
deleteEdgeBtn.addEventListener("click", function () {
|
||
if (selectedEdgeIndex < 0) return;
|
||
edges.splice(selectedEdgeIndex, 1);
|
||
selectedEdgeIndex = -1;
|
||
showPanel("empty");
|
||
render();
|
||
});
|
||
}
|
||
|
||
if (autoLayoutBtn) {
|
||
autoLayoutBtn.addEventListener("click", autoLayout);
|
||
}
|
||
|
||
if (saveForm) {
|
||
saveForm.addEventListener("submit", function (event) {
|
||
try {
|
||
if (!nodeForm.hidden && selectedNodeId) {
|
||
const node = nodes.find((item) => item.id === selectedNodeId);
|
||
if (node) applyNodeExtras(node);
|
||
}
|
||
if (!edgeForm.hidden && selectedEdgeIndex >= 0) {
|
||
applyEdgeExtras(selectedEdgeIndex);
|
||
}
|
||
doc.ui = doc.ui || {};
|
||
doc.ui.layout = doc.ui.layout || {};
|
||
doc.ui.layout.version = 1;
|
||
doc.ui.layout.nodes = positions;
|
||
saveForm.elements.json.value = JSON.stringify(doc);
|
||
} catch (err) {
|
||
event.preventDefault();
|
||
window.alert(err && err.message ? err.message : "参数 JSON 格式不正确");
|
||
}
|
||
});
|
||
}
|
||
|
||
bindForms();
|
||
renderPalette();
|
||
loadNodeCatalog();
|
||
if (!hasSavedLayout && nodes.length > 0) {
|
||
autoLayout();
|
||
} else {
|
||
render();
|
||
}
|
||
})();
|