/**
* Клиент редактора диалогов (D8): список графов, SVG-канва с карточками и
* рёбрами, инспектор узла. Без фреймворков и CDN; авторитет валидации —
* сервер (probe.ts), клиент лишь мгновенно подсвечивает сирот и неизвестные id.
*/
const $ = (id) => document.getElementById(id);
const SVGNS = 'http://www.w3.org/2000/svg';
const CARD_W = 190;
const CARD_H = 74;
const GAP_X = 90;
const GAP_Y = 24;
let graphIds = [];
let currentId = null;
let mtime = null;
let graph = null;
let selected = null;
let dirty = false;
/** Позиции узлов последнего рендера (для рёбер). */
let posMap = new Map();
async function jget(url) {
const r = await fetch(url);
const body = await r.json();
if (!r.ok) throw new Error(body.message ?? `${r.status}`);
return body;
}
async function jsend(url, method, body) {
const r = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
return { ok: r.ok, status: r.status, body: await r.json() };
}
function setStatus(text, cls = '') {
$('status').textContent = text;
$('status').className = `muted ${cls}`;
}
function markDirty() {
dirty = true;
setStatus('не сохранено');
}
/** Все исходящие рёбра узла: [{to, kind}] — next и next выборов. */
function edgesOf(id) {
const n = graph.nodes[id];
if (!n) return [];
const out = [];
if (n.next) out.push({ to: n.next, kind: 'next' });
(n.choices ?? []).forEach((c) => {
if (c.next) out.push({ to: c.next, kind: 'choice' });
});
return out;
}
/** Слоёная раскладка: BFS от start (уровень → колонка), сироты — в последнюю. */
function computeLayout() {
const pos = new Map();
const depth = new Map();
if (!graph.nodes[graph.start]) return pos;
depth.set(graph.start, 0);
const queue = [graph.start];
while (queue.length > 0) {
const id = queue.shift();
for (const e of edgesOf(id)) {
if (graph.nodes[e.to] && !depth.has(e.to)) {
depth.set(e.to, depth.get(id) + 1);
queue.push(e.to);
}
}
}
const rows = new Map();
const lastCol = Math.max(-1, ...depth.values()) + 1;
for (const id of Object.keys(graph.nodes)) {
const d = depth.get(id) ?? lastCol;
const row = rows.get(d) ?? 0;
rows.set(d, row + 1);
pos.set(id, { x: d * (CARD_W + GAP_X) + 16, y: row * (CARD_H + GAP_Y) + 16, orphan: !depth.has(id) });
}
return pos;
}
/** Эллипсис для карточки. */
function preview(s, n) {
const s2 = (s ?? '').replace(/\s+/g, ' ').trim();
return s2.length > n ? `${s2.slice(0, n - 1)}…` : s2;
}
function svgText(x, y, str, cls) {
const t = document.createElementNS(SVGNS, 'text');
t.setAttribute('x', x);
t.setAttribute('y', y);
if (cls) t.setAttribute('class', cls);
t.textContent = str;
return t;
}
/** Реплика ли узел: есть текст (inline или ключ). */
function isReplica(n) {
return n.text !== undefined || n.textKey !== undefined;
}
/** Краткие бейджи условий и эффектов (внизу карточки). */
function badgesOf(n) {
const parts = [];
if (n.mood) parts.push(`mood:${n.mood}`);
if (n.when?.length) parts.push(`when:${n.when.join(',')}`);
if (n.whenNot?.length) parts.push(`!${n.whenNot.join(',')}`);
if (n.whenVar) parts.push(`${n.whenVar.key}${n.whenVar.op}${n.whenVar.value}`);
if (n.whenVars?.length) parts.push(`${n.whenVars.length}×var`);
if (n.hasItem?.length) parts.push(`item:${n.hasItem.join(',')}`);
if (n.setFlags?.length) parts.push(`+${n.setFlags.join(',')}`);
if (n.setVars && Object.keys(n.setVars).length) parts.push(`v=${Object.keys(n.setVars).join(',')}`);
(n.do ?? []).forEach((o) => parts.push(`${o.kind}${o.id ? ':' + o.id : ''}`));
return parts.join(' ');
}
/** Карточка узла (rect + 4 строки текста). */
function drawNodeCard(id) {
const n = graph.nodes[id];
const p = posMap.get(id);
const g = document.createElementNS(SVGNS, 'g');
g.setAttribute('class', `node-card${selected === id ? ' selected' : ''}${p.orphan ? ' ghost' : ''}`);
g.setAttribute('transform', `translate(${p.x},${p.y})`);
const rect = document.createElementNS(SVGNS, 'rect');
rect.setAttribute('width', CARD_W);
rect.setAttribute('height', CARD_H);
rect.setAttribute('rx', 6);
g.appendChild(rect);
g.appendChild(svgText(10, 16, n.speaker ?? (isReplica(n) ? '—' : '(действие)'), 'speaker'));
g.appendChild(svgText(10, 30, id, ''));
g.appendChild(svgText(10, 46, preview(n.text ?? n.textKey ?? '', 27), 'body'));
const badges = badgesOf(n);
if (badges) g.appendChild(svgText(10, 62, preview(badges, 30), 'badge'));
g.addEventListener('click', () => select(id));
$('nodes').appendChild(g);
}
/** Ребро между карточками: кубическая кривая от правой грани к левой. */
function drawEdge(from, to, kind) {
const a = posMap.get(from);
const b = posMap.get(to);
if (!a || !b) return;
const x1 = a.x + CARD_W;
const y1 = a.y + CARD_H / 2;
const x2 = b.x;
const y2 = b.y + CARD_H / 2;
const mx = (x1 + x2) / 2;
const path = document.createElementNS(SVGNS, 'path');
path.setAttribute('d', `M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}`);
path.setAttribute('fill', 'none');
path.setAttribute('stroke', kind === 'choice' ? 'var(--edge-choice)' : 'var(--edge)');
if (kind === 'choice') path.setAttribute('stroke-dasharray', '5 4');
path.setAttribute('stroke-width', '1.5');
$('edges').appendChild(path);
}
function renderCanvas() {
posMap = computeLayout();
$('edges').replaceChildren();
$('nodes').replaceChildren();
for (const id of Object.keys(graph.nodes)) {
for (const e of edgesOf(id)) {
if (graph.nodes[e.to]) drawEdge(id, e.to, e.kind);
}
}
for (const id of Object.keys(graph.nodes)) {
drawNodeCard(id);
}
const xs = [...posMap.values()].map((p) => p.x + CARD_W + GAP_X);
const ys = [...posMap.values()].map((p) => p.y + CARD_H + GAP_Y);
$('canvas').setAttribute('viewBox', `0 0 ${Math.max(480, ...xs)} ${Math.max(400, ...ys)}`);
}
function select(id) {
selected = id;
renderCanvas();
renderInspector();
}
/* ---------- инспектор ---------- */
function setField(el, value) {
el.value = value ?? '';
}
/** Собрать whenVar из трёх полей (пустой ключ — условия нет). */
function whenVarFromInputs() {
const key = $('f-whenvar-key').value.trim();
if (!key) return undefined;
return { key, op: $('f-whenvar-op').value, value: Number($('f-whenvar-value').value || 0) };
}
/** do[] из строки «kind:id:count, kind:id». */
function doFromString(s) {
const ops = [];
for (const part of s.split(',')) {
const [kind, id, count] = part.trim().split(':').map((x) => x.trim());
if (!kind) continue;
const op = { kind };
if (id) op.id = id;
if (count) op.count = Number(count);
ops.push(op);
}
return ops.length > 0 ? ops : undefined;
}
function doToString(ops) {
return (ops ?? []).map((o) => [o.kind, o.id, o.count].filter((x) => x !== undefined).join(':')).join(', ');
}
/** setVars из строки «ключ=число, ...». */
function setVarsFromString(s) {
const out = {};
for (const part of s.split(',')) {
const [k, v] = part.split('=').map((x) => x.trim());
if (k && v !== undefined && v !== '') out[k] = Number(v);
}
return Object.keys(out).length > 0 ? out : undefined;
}
function setVarsToString(vars) {
return Object.entries(vars ?? {}).map(([k, v]) => `${k}=${v}`).join(', ');
}
/** Заполнить поля инспектора из узла. */
function fillInspector(id) {
const n = graph.nodes[id];
setField($('f-id'), id);
setField($('f-speaker'), n.speaker);
setField($('f-mood'), n.mood);
setField($('f-text'), n.text);
setField($('f-textkey'), n.textKey);
setField($('f-tags'), (n.tags ?? []).join(', '));
setField($('f-next'), n.next ?? '');
setField($('f-when'), (n.when ?? []).join(', '));
setField($('f-whennot'), (n.whenNot ?? []).join(', '));
const wv = n.whenVar ?? n.whenVars?.[0];
setField($('f-whenvar-key'), wv?.key);
setField($('f-whenvar-op'), wv?.op ?? 'ge');
setField($('f-whenvar-value'), wv?.value);
setField($('f-setflags'), (n.setFlags ?? []).join(', '));
setField($('f-setvars'), setVarsToString(n.setVars));
setField($('f-do'), doToString(n.do));
fillNextOptions(n.next ?? '');
renderChoicesEditor(id);
}
/** Варианты next: все узлы + пустой конец. */
function fillNextOptions(current) {
const sel = $('f-next');
sel.replaceChildren(new Option('— конец —', ''));
for (const id of Object.keys(graph.nodes)) sel.appendChild(new Option(id, id));
sel.value = current;
}
/** Обёртка label>control (строки инспектора). */
function wrapLabel(text, control, grow) {
const label = document.createElement('label');
if (grow) label.className = 'grow';
label.append(text, control);
return label;
}
/** Редактор одного выбора: text / next / when / удалить. */
function choiceRow(id, index, ch) {
const div = document.createElement('div');
div.className = 'choice-edit';
const text = document.createElement('input');
text.value = ch.text ?? '';
text.placeholder = 'текст варианта';
text.addEventListener('input', () => {
ch.text = text.value;
markDirty();
renderCanvas();
});
const next = document.createElement('select');
next.appendChild(new Option('— конец —', ''));
for (const nid of Object.keys(graph.nodes)) next.appendChild(new Option(nid, nid));
next.value = ch.next ?? '';
next.addEventListener('change', () => {
if (next.value) ch.next = next.value;
else delete ch.next;
markDirty();
renderCanvas();
});
const when = document.createElement('input');
when.value = (ch.when ?? []).join(', ');
when.placeholder = 'when (флаги, через запятую)';
when.addEventListener('input', () => {
const flags = listOf(when.value);
if (flags.length > 0) ch.when = flags;
else delete ch.when;
markDirty();
});
const del = document.createElement('button');
del.textContent = '× удалить';
del.className = 'danger';
del.addEventListener('click', () => {
graph.nodes[id].choices.splice(index, 1);
if (graph.nodes[id].choices.length === 0) delete graph.nodes[id].choices;
markDirty();
renderAll();
});
const row1 = document.createElement('div');
row1.className = 'row';
row1.appendChild(wrapLabel('text', text, true));
const row2 = document.createElement('div');
row2.className = 'row';
row2.appendChild(wrapLabel('next', next, true));
const row3 = document.createElement('div');
row3.className = 'row';
row3.appendChild(wrapLabel('when', when, true));
div.append(row1, row2, row3, del);
return div;
}
function renderChoicesEditor(id) {
const n = graph.nodes[id];
const wrap = $('choices');
wrap.replaceChildren();
(n.choices ?? []).forEach((ch, i) => {
wrap.appendChild(choiceRow(id, i, ch));
});
}
/* ---------- запись полей обратно в узел ---------- */
/** Поля с comma-списками: пустое поле → пустой список. */
function listOf(s) {
return s.split(',').map((x) => x.trim()).filter(Boolean);
}
function bindField(elId, apply) {
$(elId).addEventListener('input', () => {
if (!selected) return;
apply(graph.nodes[selected]);
markDirty();
renderCanvas();
});
}
/** whenVar-поле: единая запись (редактируем одно условие; whenVars[1+] не трогаем). */
function bindWhenVar() {
const apply = (n) => {
const wv = whenVarFromInputs();
if (wv) {
n.whenVar = wv;
delete n.whenVars;
} else {
delete n.whenVar;
delete n.whenVars;
}
};
for (const id of ['f-whenvar-key', 'f-whenvar-op', 'f-whenvar-value']) bindField(id, apply);
}
function bindInspector() {
bindField('f-speaker', (n) => {
if ($('f-speaker').value) n.speaker = $('f-speaker').value;
else delete n.speaker;
});
bindField('f-mood', (n) => {
if ($('f-mood').value) n.mood = $('f-mood').value;
else delete n.mood;
});
bindField('f-text', (n) => {
if ($('f-text').value) n.text = $('f-text').value;
else delete n.text;
});
bindField('f-textkey', (n) => {
if ($('f-textkey').value) n.textKey = $('f-textkey').value;
else delete n.textKey;
});
bindField('f-tags', (n) => {
const tags = listOf($('f-tags').value);
if (tags.length > 0) n.tags = tags;
else delete n.tags;
});
bindField('f-when', (n) => {
const flags = listOf($('f-when').value);
if (flags.length > 0) n.when = flags;
else delete n.when;
});
bindField('f-whennot', (n) => {
const flags = listOf($('f-whennot').value);
if (flags.length > 0) n.whenNot = flags;
else delete n.whenNot;
});
bindWhenVar();
bindField('f-setflags', (n) => {
const flags = listOf($('f-setflags').value);
if (flags.length > 0) n.setFlags = flags;
else delete n.setFlags;
});
bindField('f-setvars', (n) => {
const vars = setVarsFromString($('f-setvars').value);
if (vars) n.setVars = vars;
else delete n.setVars;
});
bindField('f-do', (n) => {
const ops = doFromString($('f-do').value);
if (ops) n.do = ops;
else delete n.do;
});
$('f-next').addEventListener('change', () => {
if (!selected) return;
if ($('f-next').value) graph.nodes[selected].next = $('f-next').value;
else delete graph.nodes[selected].next;
markDirty();
renderCanvas();
});
$('btn-add-choice').addEventListener('click', () => {
if (!selected) return;
(graph.nodes[selected].choices ??= []).push({ text: 'Новый вариант' });
markDirty();
renderAll();
});
$('btn-add-node').addEventListener('click', addNode);
$('btn-del-node').addEventListener('click', deleteNode);
}
/** Свободный id узла: node_N. */
function freeNodeId() {
let i = 1;
while (graph.nodes[`node_${i}`]) i++;
return `node_${i}`;
}
function addNode() {
const id = freeNodeId();
graph.nodes[id] = { text: '' };
markDirty();
select(id);
}
function deleteNode() {
if (!selected) return;
if (selected === graph.start) {
setStatus('start удалять нельзя — выбери другой узел', 'err');
return;
}
delete graph.nodes[selected];
selected = null;
markDirty();
renderAll();
}
/* ---------- список графов, открытие, сохранение, dry-run ---------- */
async function loadGraphList() {
graphIds = await jget('/api/graphs');
const nav = $('graph-list');
nav.replaceChildren();
for (const g of graphIds) {
const b = document.createElement('button');
b.textContent = g.id;
b.className = g.id === currentId ? 'active' : '';
b.addEventListener('click', () => switchGraph(g.id));
nav.appendChild(b);
}
}
async function switchGraph(id) {
if (dirty && !confirm('Есть несохранённые правки. Перейти и потерять их?')) return;
await openGraph(id);
}
async function openGraph(id) {
const data = await jget(`/api/graph/${id}`);
currentId = id;
mtime = data.mtime;
graph = data.graph;
selected = null;
dirty = false;
$('graph-title').textContent = `— ${id}`;
$('run-output').hidden = true;
$('problems').hidden = true;
setStatus('загружено с диска');
await loadGraphList();
renderAll();
}
function renderInspector() {
if (selected && graph.nodes[selected]) {
$('inspector-empty').hidden = true;
$('inspector-form').hidden = false;
fillInspector(selected);
} else {
$('inspector-empty').hidden = false;
$('inspector-form').hidden = true;
}
}
function renderAll() {
renderCanvas();
renderInspector();
}
async function save() {
if (!graph) return;
setStatus('валидация…');
const r = await jsend(`/api/graph/${currentId}`, 'PUT', { mtime, graph });
if (r.status === 409) {
if (confirm(`${r.body.message}. Перечитать с диска и потерять локальные правки?`)) {
await openGraph(currentId);
}
return;
}
if (r.status === 422) {
showProblems(r.body);
setStatus('ошибки валидации — не сохранено', 'err');
return;
}
if (!r.ok) {
setStatus(`ошибка: ${r.body.message ?? r.status}`, 'err');
return;
}
mtime = r.body.mtime;
dirty = false;
$('problems').hidden = true;
setStatus('сохранено', 'ok');
}
/** Проблемы (валидация/анализ) в панель над канвой. */
function showProblems(out) {
const div = $('problems');
div.replaceChildren();
const line = (cls, text) => {
const p = document.createElement('div');
p.className = cls;
p.textContent = text;
div.appendChild(p);
};
for (const inv of out.errors ?? []) line('err', `[ошибка] ${inv.message}`);
for (const inv of out.warnings ?? []) line('warn', `[предупреждение] ${inv.message}`);
for (const o of out.orphans ?? []) line('warn', `[сирота] узел «${o}» недостижим`);
for (const cy of out.cycles ?? []) line('err', `[цикл без текста] ${cy.join(' → ')}`);
for (const e of out.silentEnds ?? []) line('warn', `[тихий конец] «${e}»`);
div.hidden = div.childElementCount === 0;
}
async function dryRun() {
if (!graph) return;
setStatus('прогон…');
const r = await jsend('/api/dry-run', 'POST', { graph, preset: $('preset').value });
if (!r.ok) {
setStatus(`ошибка: ${r.body.message ?? r.status}`, 'err');
return;
}
const div = $('run-output');
div.textContent = r.body.run ?? '';
div.hidden = false;
showProblems(r.body);
setStatus('прогон готов', 'ok');
}
async function init() {
const list = await jget('/api/graphs');
if (list.length === 0) {
setStatus('в data/dialogues нет графов', 'err');
return;
}
bindInspector();
$('btn-save').addEventListener('click', save);
$('btn-reload').addEventListener('click', async () => {
if (!dirty || confirm('Потерять локальные правки?')) await openGraph(currentId);
});
$('btn-dry').addEventListener('click', dryRun);
window.addEventListener('beforeunload', (e) => {
if (dirty) e.preventDefault();
});
await openGraph(list[0].id);
}
init().catch((e) => setStatus(String(e), 'err'));
