' +
- '
' +
- '
' +
- '
0.0 / 0.0s' +
- '
点时间轴任意处跳转 · 战斗/选择/随机仅标点不模拟 · 预览沿首出口主路径' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ ' ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ ' 0.0 / 0.0s' +
+ ' 单击节点选中→「从选中处开始」，或双击节点直接开始(位置按途中走位重放) · 遇选择/战斗/随机弹选项' +
+ '
' +
'
' +
- '
';
+ '
';
function show(host, IR, DICT, POINTSETS) {
stopPlay();
const psName = (IR.stage || {}).point_set || IR.id;
const ps = (POINTSETS || {})[psName] || {};
- const anchors = ps.anchors || [];
- model = buildModel(IR, anchors);
+ S = prepare(IR, ps.anchors || []); model = S;
host.innerHTML = TEMPLATE;
els = {
host,
mapinfo: host.querySelector(".tl-mapinfo"),
stage: host.querySelector(".tl-stage"),
+ choices: host.querySelector(".tl-choices"),
tracks: host.querySelector(".tl-tracks"),
play: host.querySelector(".tl-play"),
restart: host.querySelector(".tl-restart"),
+ startbtn: host.querySelector(".tl-startbtn"),
+ fitbtn: host.querySelector(".tl-fitbtn"),
time: host.querySelector(".tl-time"),
playhead: null,
};
els.mapinfo.textContent = "点位集：" + psName + (ps.mapId ? "（地图 " + ps.mapId + "）" : "") +
- (model.synthetic ? " · ⚠ 未取到真实坐标，按示意布局自动铺开（走位仍可预览）" : " · 真实坐标");
+ (S.synthetic ? " · ⚠ 未取到真实坐标，按示意布局自动铺开（走位仍可预览）" : " · 真实坐标");
stageCv = els.stage; stageCtx = stageCv.getContext("2d");
- buildTracks();
els.play.onclick = () => playing ? stopPlay() : play();
- els.restart.onclick = () => { stopPlay(); seek(0); };
- seek(0);
+ els.restart.onclick = () => restart();
+ els.startbtn.onclick = () => { if (selNode) startFrom(selNode, true); };
+ els.fitbtn.onclick = () => { fitMode = !fitMode; els.fitbtn.classList.toggle("on", fitMode); refreshTimeline(); renderFrame(); };
+
+ startFrom(firstNode(IR));
}
- function clear() { stopPlay(); if (els.host) els.host.innerHTML = ""; els = {}; model = null; }
+ function selectClip(c, el) {
+ els.tracks.querySelectorAll(".tl-clip.sel").forEach(x => x.classList.remove("sel"));
+ const startable = c.nodeId && S.nodes[c.nodeId];
+ if (el) el.classList.add("sel");
+ selNode = startable ? c.nodeId : null;
+ els.startbtn.disabled = !selNode;
+ els.startbtn.textContent = selNode ? ("▶ 从「" + nodeLabel(S, S.nodes[selNode]).slice(0, 12) + "」开始") : "▶ 从选中处开始";
+ }
+ function clearSelection() { selNode = null; if (els.startbtn) { els.startbtn.disabled = true; els.startbtn.textContent = "▶ 从选中处开始"; } }
+
+ function nodeLabel(S, n) {
+ const nm = S.nm, t = (n.text || "").slice(0, 12);
+ if (n.kind === "narration") return "旁白·" + nm(n.speaker || "P1") + "：" + t;
+ if (n.kind === "dialogue") return "对话·" + nm(n.speaker || "P1") + "：" + t;
+ if (n.kind === "move") return "走位·" + nm(n.actor) + "→" + n.to;
+ if (n.kind === "anim") return "动画·" + nm(n.actor) + " " + (n.ani || "");
+ if (n.kind === "choice" || n.kind === "choice_once") return "【选择】" + (n.options || []).map(o => o.text).join(" / ").slice(0, 18);
+ if (n.kind === "random") return "【随机】" + (n.branches || []).length + " 路";
+ if (n.kind === "fight") return "【战斗】vs " + (n.camp2 || []).map(nm).join("、");
+ if (n.kind === "reward") return "奖励结算";
+ if (n.kind === "out_ref") return "引用·" + n.ref;
+ return n.kind;
+ }
+ // 从指定节点开始：先重放途中走位算进入位置，再从该节点构建演出。
+ function startFrom(targetId, autoplay) {
+ stopPlay(); hideChoices(); clearSelection();
+ const path = pathTo(S, targetId);
+ S.entryPos = path ? replayPositions(S, path) : {};
+ resetAccum(S);
+ pending = runUntilPause(S, targetId);
+ refreshTimeline();
+ seek(0);
+ if (autoplay) play(); // 用户双击/点「从此处开始」=立即播放；初始加载/重头则停在起点
+ }
+ function clear() { stopPlay(); if (els.host) els.host.innerHTML = ""; els = {}; model = S = null; }
+
+ function restart() { startFrom(firstNode(S.IR)); }
+
+ function refreshTimeline() { orderRows(S); buildTracks(); }
function buildTracks() {
const host = els.tracks; host.innerHTML = ""; host.style.position = "relative";
- const W = model.total * PXPSEC;
+ // 适应宽度：把整条时间轴压进可视宽度(留标签位)；否则用固定 80px/s。
+ PX = fitMode ? Math.max(6, ((host.clientWidth || 760) - 60) / Math.max(model.total, 0.1)) : PXMAX;
+ // 鼠标滚轮 → 横向滚动（横向溢出时）
+ host.onwheel = e => { if (host.scrollWidth > host.clientWidth + 1) { host.scrollLeft += (e.deltaY || 0) + (e.deltaX || 0); e.preventDefault(); } };
+ const W = model.total * PX;
const ruler = document.createElement("div"); ruler.className = "tl-ruler"; ruler.style.width = W + "px";
for (let s = 0; s <= Math.ceil(model.total); s++) {
- const tick = document.createElement("div"); tick.className = "tl-tick"; tick.style.left = (s * PXPSEC) + "px";
+ const tick = document.createElement("div"); tick.className = "tl-tick"; tick.style.left = (s * PX) + "px";
tick.innerHTML = '
' + s + 's'; ruler.appendChild(tick);
}
host.appendChild(ruler);
-
model.rows.forEach(r => {
const lane = document.createElement("div"); lane.className = "tl-lane"; lane.style.width = W + "px"; lane.style.height = ROW_H + "px";
const label = r.startsWith("演员:") ? model.nm(r.slice(3)) : r;
@@ -246,69 +329,53 @@
model.clips.filter(c => c.row === r).forEach(c => {
const el = document.createElement("div");
el.className = "tl-clip k-" + c.kind;
- el.style.left = (c.start * PXPSEC) + "px";
- el.style.width = Math.max(8, c.dur * PXPSEC - 2) + "px";
+ el.style.left = (c.start * PX) + "px";
+ el.style.width = Math.max(8, c.dur * PX - 2) + "px";
el.title = c.label + "（" + c.dur.toFixed(1) + "s）";
el.textContent = c.label;
el.dataset.start = c.start; el.dataset.end = c.start + c.dur;
- el.onclick = e => { e.stopPropagation(); seek(c.start + 0.001); };
+ if (c.nodeId && S.nodes[c.nodeId]) el.classList.add("startable");
+ el.onclick = e => { e.stopPropagation(); selectClip(c, el); }; // 单击=选中(不跳时间，避免视图乱滚)
+ el.ondblclick = e => { e.stopPropagation(); e.preventDefault(); if (c.nodeId && S.nodes[c.nodeId]) startFrom(c.nodeId, true); };
lane.appendChild(el);
});
host.appendChild(lane);
});
-
- const ph = document.createElement("div"); ph.className = "tl-playhead"; host.appendChild(ph);
- els.playhead = ph;
+ const ph = document.createElement("div"); ph.className = "tl-playhead"; host.appendChild(ph); els.playhead = ph;
host.onclick = e => {
const rect = host.getBoundingClientRect();
- const x = e.clientX - rect.left + host.scrollLeft;
- seek(Math.max(0, Math.min(model.total, x / PXPSEC)));
+ seek(Math.max(0, Math.min(model.total, (e.clientX - rect.left + host.scrollLeft) / PX)));
};
}
function worldToStage(p) {
- const b = model.bounds, pad = 40;
- const w = stageCv.width, h = stageCv.height;
+ const b = model.bounds, pad = 40, w = stageCv.width, h = stageCv.height;
const dx = (b.maxX - b.minX) || 1, dz = (b.maxZ - b.minZ) || 1;
const sc = Math.min((w - pad * 2) / dx, (h - pad * 2) / dz);
const cx = (b.minX + b.maxX) / 2, cz = (b.minZ + b.maxZ) / 2;
return { x: w / 2 + (p.x - cx) * sc, y: h / 2 - (p.z - cz) * sc, sc };
}
-
const ACTOR_COLORS = ["#e6c878", "#7ec8e3", "#e38f7e", "#9ee37e", "#c89ee3", "#e3c87e", "#7ee3c8"];
- function colorOf(model, actor) {
+ function colorOf(M, actor) {
if (actor === "P1") return "#f0d890";
- const list = actorsIn(model).filter(a => a !== "P1");
- const i = list.indexOf(actor);
+ const list = actorsIn(M).filter(a => a !== "P1"); const i = list.indexOf(actor);
return ACTOR_COLORS[(i + 1) % ACTOR_COLORS.length];
}
function drawStage(tau) {
const ctx = stageCtx, w = stageCv.width, h = stageCv.height;
- ctx.clearRect(0, 0, w, h);
- ctx.fillStyle = "#15130d"; ctx.fillRect(0, 0, w, h);
-
- // 锚点（淡）
+ ctx.clearRect(0, 0, w, h); ctx.fillStyle = "#15130d"; ctx.fillRect(0, 0, w, h);
(model.anchors || []).forEach(a => {
const p = worldToStage({ x: a.pos[0], z: a.pos[2] });
- ctx.strokeStyle = "rgba(180,170,140,.35)"; ctx.lineWidth = 1;
- ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2); ctx.stroke();
- ctx.fillStyle = "rgba(180,170,140,.45)"; ctx.font = "10px sans-serif"; ctx.textAlign = "center";
- ctx.fillText(a.name, p.x, p.y - 8);
+ ctx.strokeStyle = "rgba(180,170,140,.35)"; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2); ctx.stroke();
+ ctx.fillStyle = "rgba(180,170,140,.45)"; ctx.font = "10px sans-serif"; ctx.textAlign = "center"; ctx.fillText(a.name, p.x, p.y - 8);
});
-
- // 镜头可视区域框（始终可见，跟随焦点）
- const fw = focusWorldAt(model, tau), fp = worldToStage(fw);
- const bw = CAM_W * fp.sc, bh = CAM_H * fp.sc;
+ const fw = focusWorldAt(model, tau), fp = worldToStage(fw), bw = CAM_W * fp.sc, bh = CAM_H * fp.sc;
ctx.strokeStyle = "rgba(230,200,120,.85)"; ctx.lineWidth = 1.5; ctx.setLineDash([7, 5]);
ctx.strokeRect(fp.x - bw / 2, fp.y - bh / 2, bw, bh); ctx.setLineDash([]);
- ctx.fillStyle = "rgba(230,200,120,.9)"; ctx.font = "10px sans-serif"; ctx.textAlign = "left";
- ctx.fillText("镜头", fp.x - bw / 2 + 4, fp.y - bh / 2 + 13);
- // 焦点十字
- ctx.strokeStyle = "rgba(230,200,120,.5)"; ctx.beginPath();
- ctx.moveTo(fp.x - 6, fp.y); ctx.lineTo(fp.x + 6, fp.y); ctx.moveTo(fp.x, fp.y - 6); ctx.lineTo(fp.x, fp.y + 6); ctx.stroke();
+ ctx.fillStyle = "rgba(230,200,120,.9)"; ctx.font = "10px sans-serif"; ctx.textAlign = "left"; ctx.fillText("镜头", fp.x - bw / 2 + 4, fp.y - bh / 2 + 13);
+ ctx.strokeStyle = "rgba(230,200,120,.5)"; ctx.beginPath(); ctx.moveTo(fp.x - 6, fp.y); ctx.lineTo(fp.x + 6, fp.y); ctx.moveTo(fp.x, fp.y - 6); ctx.lineTo(fp.x, fp.y + 6); ctx.stroke();
- // 演员
const dlg = activeDialogue(model, tau);
actorsIn(model).forEach(actor => {
const wp = actorPosAt(model, actor, tau), p = worldToStage(wp), col = colorOf(model, actor);
@@ -316,10 +383,8 @@
const anim = activeAnim(model, actor, tau);
ctx.fillStyle = col; ctx.beginPath(); ctx.arc(p.x, p.y, moving ? 9 : 8, 0, Math.PI * 2); ctx.fill();
ctx.strokeStyle = "#000"; ctx.lineWidth = 1; ctx.stroke();
- ctx.fillStyle = "#1a1710"; ctx.font = "bold 9px sans-serif"; ctx.textAlign = "center";
- ctx.fillText(actor, p.x, p.y + 3);
- ctx.fillStyle = "#d8cda0"; ctx.font = "11px sans-serif";
- ctx.fillText(model.nm(actor), p.x, p.y + 22);
+ ctx.fillStyle = "#1a1710"; ctx.font = "bold 9px sans-serif"; ctx.textAlign = "center"; ctx.fillText(actor, p.x, p.y + 3);
+ ctx.fillStyle = "#d8cda0"; ctx.font = "11px sans-serif"; ctx.fillText(model.nm(actor), p.x, p.y + 22);
if (moving) { ctx.fillStyle = col; ctx.font = "9px sans-serif"; ctx.fillText("…走位", p.x, p.y - 12); }
if (anim) { ctx.fillStyle = col; ctx.font = "9px sans-serif"; ctx.fillText("♪" + (anim.label || ""), p.x, p.y - 12); }
if (dlg && dlg.actor === actor) {
@@ -328,63 +393,109 @@
}
});
}
-
function drawBubble(ctx, cx, cy, text) {
ctx.font = "12px sans-serif"; ctx.textAlign = "left";
const maxW = 260, lines = wrap(ctx, text, maxW), lh = 16;
- const tw = Math.min(maxW, Math.max(...lines.map(l => ctx.measureText(l).width))) + 14;
- const th = lines.length * lh + 10;
- let x = cx - tw / 2, y = cy - th;
- x = Math.max(4, Math.min(stageCv.width - tw - 4, x)); y = Math.max(4, y);
+ const tw = Math.min(maxW, Math.max(...lines.map(l => ctx.measureText(l).width))) + 14, th = lines.length * lh + 10;
+ let x = cx - tw / 2, y = cy - th; x = Math.max(4, Math.min(stageCv.width - tw - 4, x)); y = Math.max(4, y);
ctx.fillStyle = "rgba(20,18,12,.92)"; ctx.strokeStyle = "#e6c878"; ctx.lineWidth = 1;
roundRect(ctx, x, y, tw, th, 5); ctx.fill(); ctx.stroke();
- ctx.fillStyle = "#f0e6c8";
- lines.forEach((l, i) => ctx.fillText(l, x + 7, y + 16 + i * lh));
+ ctx.fillStyle = "#f0e6c8"; lines.forEach((l, i) => ctx.fillText(l, x + 7, y + 16 + i * lh));
}
function wrap(ctx, text, maxW) {
const out = []; let cur = "";
- for (const ch of String(text)) {
- if (ctx.measureText(cur + ch).width > maxW || ch === "\n") { out.push(cur); cur = ch === "\n" ? "" : ch; }
- else cur += ch;
- }
- if (cur) out.push(cur);
- return out.length ? out : [""];
+ for (const ch of String(text)) { if (ctx.measureText(cur + ch).width > maxW || ch === "\n") { out.push(cur); cur = ch === "\n" ? "" : ch; } else cur += ch; }
+ if (cur) out.push(cur); return out.length ? out : [""];
}
function roundRect(ctx, x, y, w, h, r) {
- ctx.beginPath(); ctx.moveTo(x + r, y);
- ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r);
+ ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath();
}
+ // ---- 选项浮层（镜头下方）----
+ function showChoices(node, kind) {
+ const box = els.choices; box.innerHTML = "";
+ let q, opts;
+ if (kind === "fight") {
+ q = "战斗（预览任一结果）：";
+ opts = [{ label: "▶ 胜 → 继续", goto: node.win }, { label: "▷ 败 → 继续", goto: node.lose }];
+ } else if (kind === "random") {
+ q = "随机分支（手选预览任一）：";
+ opts = (node.branches || []).map((b, i) => ({ label: "分支 " + (i + 1) + "（权重 " + (b.weight != null ? b.weight : "?") + "）", goto: b.goto }));
+ } else {
+ q = "请选择：";
+ opts = (node.options || []).map(o => ({
+ label: o.text + (o.condition ? "（需 " + o.condition.kind + o.condition.op + o.condition.value + "）" : ""),
+ goto: o.goto,
+ }));
+ }
+ box.appendChild(Object.assign(document.createElement("div"), { className: "tl-choices-q", textContent: q }));
+ opts.forEach(o => {
+ const b = document.createElement("button"); b.className = "tl-choice-btn"; b.textContent = o.label;
+ b.onclick = () => pick(o.goto);
+ box.appendChild(b);
+ });
+ box.classList.remove("hidden");
+ }
+ function hideChoices() { if (els.choices) { els.choices.classList.add("hidden"); els.choices.innerHTML = ""; } }
+
+ function pick(goto) {
+ hideChoices();
+ if (!goto) { pending = { kind: "end" }; return; }
+ pending = runUntilPause(S, goto);
+ refreshTimeline();
+ play(); // 从当前 playT(上一段末尾)继续
+ }
+
// ---- 帧/控制 ----
function renderFrame() {
if (!model) return;
drawStage(playT);
- if (els.playhead) els.playhead.style.left = (playT * PXPSEC) + "px";
+ if (els.playhead) els.playhead.style.left = (playT * PX) + "px";
if (els.time) els.time.textContent = playT.toFixed(1) + " / " + model.total.toFixed(1) + "s";
- els.tracks.querySelectorAll(".tl-clip").forEach(el => {
- el.classList.toggle("active", playT >= +el.dataset.start && playT < +el.dataset.end);
- });
- const host = els.tracks, phx = playT * PXPSEC;
- if (phx < host.scrollLeft + 60 || phx > host.scrollLeft + host.clientWidth - 60)
- host.scrollLeft = phx - host.clientWidth / 2;
+ els.tracks.querySelectorAll(".tl-clip").forEach(el => el.classList.toggle("active", playT >= +el.dataset.start && playT < +el.dataset.end));
+ // 仅播放时把 playhead 顶在中间；暂停时不动滚动条，让用户自由横向滚动找节点。
+ if (playing) {
+ const host = els.tracks, phx = playT * PX, maxScroll = host.scrollWidth - host.clientWidth;
+ host.scrollLeft = Math.max(0, Math.min(Math.max(0, maxScroll), phx - host.clientWidth / 2));
+ }
+ }
+ function onReachEnd() {
+ if (pending && (pending.kind === "choice" || pending.kind === "choice_once" || pending.kind === "fight" || pending.kind === "random"))
+ showChoices(pending.node, pending.kind);
}
function tick(ts) {
if (!playing) return;
if (!lastTs) lastTs = ts;
playT += (ts - lastTs) / 1000; lastTs = ts;
- if (playT >= model.total) { playT = model.total; playing = false; updateBtn(); }
+ if (playT >= model.total) { playT = model.total; playing = false; updateBtn(); renderFrame(); onReachEnd(); return; }
renderFrame();
if (playing) rafId = requestAnimationFrame(tick);
}
- function play() { if (!model) return; if (playT >= model.total) playT = 0; playing = true; lastTs = 0; updateBtn(); rafId = requestAnimationFrame(tick); }
+ function play() { if (!model) return; if (playT >= model.total && !(pending && pending.kind !== "end" && pending.kind !== "ending")) playT = 0; hideChoices(); playing = true; lastTs = 0; updateBtn(); rafId = requestAnimationFrame(tick); }
function stopPlay() { playing = false; if (rafId) cancelAnimationFrame(rafId); rafId = 0; updateBtn(); }
- function seek(t) { playT = t; lastTs = 0; renderFrame(); }
+ function seek(t) { playT = Math.max(0, Math.min(model ? model.total : 0, t)); lastTs = 0; if (playT < model.total) hideChoices(); renderFrame(); if (playT >= model.total) onReachEnd(); }
function updateBtn() { if (els.play) els.play.textContent = playing ? "⏸ 暂停" : "▶ 播放"; }
+ // ---- 离线测试用：自动取首分支拍平整路径 ----
+ function buildModelAuto(IR, anchors) {
+ const s = prepare(IR, anchors);
+ let r = extendSegment(s, firstNode(IR)), g = 0;
+ while (r && g++ < 200) {
+ if (r.kind === "choice" || r.kind === "choice_once") { const o = (r.node.options || [])[0]; if (!o) break; r = extendSegment(s, o.goto); }
+ else if (r.kind === "random") { const b = (r.node.branches || [])[0]; if (!b) break; r = extendSegment(s, b.goto); }
+ else if (r.kind === "fight") { r = extendSegment(s, r.node.win || r.node.lose); }
+ else break;
+ }
+ s.total = Math.max(s._t, 0.1); orderRows(s);
+ return s;
+ }
+
window.Timeline = {
show, stop: stopPlay, clear,
- // 仅供离线测试（node）调用的纯逻辑，无 DOM 依赖：
- _buildModel: buildModel, _linearize: linearize, _dlgDur: dlgDur,
+ // 离线测试用：
+ _buildModel: buildModelAuto, _dlgDur: dlgDur,
+ _prepare: prepare, _extend: extendSegment, _runUntilPause: runUntilPause, _firstNode: firstNode, _orderRows: orderRows,
+ _pathTo: pathTo, _replayPositions: replayPositions,
};
})();