fix(scene-edit): 轨道标签竖排截断——加宽标签列 54→96px + 名字单行省略号
中文 actor 名(神秘剑客/客栈小二)被挤成竖排单字、与 +/✕ 按钮抢宽换行。 - 标签列宽 54→96px,引入 LABEL_W 常量统一 clip/标尺左偏移与 CSS 宽度 - 名字包进 .se-lname:flex:1 + nowrap + 省略号;按钮 flex:none 不参与换行
This commit is contained in:
@ -4,7 +4,7 @@
|
|||||||
// 时长口径复用 window.Timeline._clipDur(与播放/校验单一来源)。
|
// 时长口径复用 window.Timeline._clipDur(与播放/校验单一来源)。
|
||||||
// 暴露 window.SceneEdit = { open(sceneId, ir, ctx, pointsets, dict) }。
|
// 暴露 window.SceneEdit = { open(sceneId, ir, ctx, pointsets, dict) }。
|
||||||
(function () {
|
(function () {
|
||||||
const PX = 90, LANE_H = 34, GRID = 0.1, MIN_DUR = 0.2;
|
const PX = 90, LANE_H = 34, GRID = 0.1, MIN_DUR = 0.2, LABEL_W = 96; // LABEL_W 须与 .se-lane-label 宽一致
|
||||||
let ir, ctx, dict, pointsets, sceneId, posMap = {}, sel = null;
|
let ir, ctx, dict, pointsets, sceneId, posMap = {}, sel = null;
|
||||||
let root = null, lanesEl = null, propEl = null, lintEl = null, previewEl = null, rulerWrapEl = null;
|
let root = null, lanesEl = null, propEl = null, lintEl = null, previewEl = null, rulerWrapEl = null;
|
||||||
|
|
||||||
@ -89,13 +89,13 @@
|
|||||||
const sc = scene(); if (!sc) { close(); return; }
|
const sc = scene(); if (!sc) { close(); return; }
|
||||||
if (!sc.tracks) sc.tracks = [];
|
if (!sc.tracks) sc.tracks = [];
|
||||||
const froms = moveFroms(sc), total = sceneEnd(sc, froms);
|
const froms = moveFroms(sc), total = sceneEnd(sc, froms);
|
||||||
const W = Math.max(total, 4) * PX + 60;
|
const W = Math.max(total, 4) * PX + LABEL_W + 40;
|
||||||
root.querySelector(".se-total").textContent = "总时长 ≈ " + round1(total) + "s" + (sc.duration ? "(显式 " + sc.duration + "s)" : "");
|
root.querySelector(".se-total").textContent = "总时长 ≈ " + round1(total) + "s" + (sc.duration ? "(显式 " + sc.duration + "s)" : "");
|
||||||
|
|
||||||
// 标尺
|
// 标尺
|
||||||
rulerWrapEl.innerHTML = ""; rulerWrapEl.style.width = W + "px";
|
rulerWrapEl.innerHTML = ""; rulerWrapEl.style.width = W + "px";
|
||||||
for (let s = 0; s <= Math.ceil(total) + 1; s++) {
|
for (let s = 0; s <= Math.ceil(total) + 1; s++) {
|
||||||
const t = document.createElement("div"); t.className = "se-tick"; t.style.left = (s * PX + 56) + "px"; t.innerHTML = "<span>" + s + "s</span>";
|
const t = document.createElement("div"); t.className = "se-tick"; t.style.left = (s * PX + LABEL_W) + "px"; t.innerHTML = "<span>" + s + "s</span>";
|
||||||
rulerWrapEl.appendChild(t);
|
rulerWrapEl.appendChild(t);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -105,7 +105,8 @@
|
|||||||
const lane = document.createElement("div"); lane.className = "se-lane"; lane.style.height = LANE_H + "px";
|
const lane = document.createElement("div"); lane.className = "se-lane"; lane.style.height = LANE_H + "px";
|
||||||
const isCam = tk.role === "camera";
|
const isCam = tk.role === "camera";
|
||||||
const label = document.createElement("div"); label.className = "se-lane-label";
|
const label = document.createElement("div"); label.className = "se-lane-label";
|
||||||
label.innerHTML = (isCam ? "🎬 镜头" : esc(actorName(tk.actor || "P1"))) +
|
const who = isCam ? "🎬 镜头" : actorName(tk.actor || "P1");
|
||||||
|
label.innerHTML = '<span class="se-lname" title="' + esc(who) + '">' + esc(who) + '</span>' +
|
||||||
'<button class="se-addclip" title="加 clip">+</button>' +
|
'<button class="se-addclip" title="加 clip">+</button>' +
|
||||||
'<button class="se-deltrack" title="删轨道">✕</button>';
|
'<button class="se-deltrack" title="删轨道">✕</button>';
|
||||||
label.querySelector(".se-addclip").onclick = e => { e.stopPropagation(); addClip(ti); };
|
label.querySelector(".se-addclip").onclick = e => { e.stopPropagation(); addClip(ti); };
|
||||||
@ -122,7 +123,7 @@
|
|||||||
function clipEl(tk, ti, c, ci, froms) {
|
function clipEl(tk, ti, c, ci, froms) {
|
||||||
const dur = durOf(c, froms), el = document.createElement("div");
|
const dur = durOf(c, froms), el = document.createElement("div");
|
||||||
el.className = "se-clip k-" + (c.kind === "narration" ? "dialogue" : c.kind) + (sel && sel.ti === ti && sel.ci === ci ? " sel" : "");
|
el.className = "se-clip k-" + (c.kind === "narration" ? "dialogue" : c.kind) + (sel && sel.ti === ti && sel.ci === ci ? " sel" : "");
|
||||||
el.style.left = ((c.start || 0) * PX + 56) + "px";
|
el.style.left = ((c.start || 0) * PX + LABEL_W) + "px";
|
||||||
el.style.width = Math.max(14, dur * PX - 2) + "px";
|
el.style.width = Math.max(14, dur * PX - 2) + "px";
|
||||||
el.textContent = clipLabel(c);
|
el.textContent = clipLabel(c);
|
||||||
el.title = clipLabel(c) + "(start " + round1(c.start || 0) + "s · " + round1(dur) + "s" + (c.dur ? " 显式" : " 自动") + ")";
|
el.title = clipLabel(c) + "(start " + round1(c.start || 0) + "s · " + round1(dur) + "s" + (c.dur ? " 显式" : " 自动") + ")";
|
||||||
|
|||||||
@ -346,10 +346,11 @@ body.perform-mode .mode-switch { border-color:#2f7a60; }
|
|||||||
.se-tick span { font-size:9px; color:#6a6256; padding-left:3px; }
|
.se-tick span { font-size:9px; color:#6a6256; padding-left:3px; }
|
||||||
.se-lanes { position:relative; min-width:100%; }
|
.se-lanes { position:relative; min-width:100%; }
|
||||||
.se-lane { position:relative; border-bottom:1px solid #211c15; }
|
.se-lane { position:relative; border-bottom:1px solid #211c15; }
|
||||||
.se-lane-label { position:sticky; left:0; z-index:5; display:inline-flex; align-items:center; gap:3px;
|
.se-lane-label { position:sticky; left:0; z-index:5; display:flex; align-items:center; gap:2px;
|
||||||
width:54px; height:100%; background:#1d1810; color:#d8cda0; font-size:11px; padding:0 3px;
|
width:96px; height:100%; background:#1d1810; color:#d8cda0; font-size:11px; padding:0 4px;
|
||||||
border-right:1px solid #2a2419; box-sizing:border-box; }
|
border-right:1px solid #2a2419; box-sizing:border-box; }
|
||||||
.se-lane-label button { background:none; border:none; color:#9a8f78; cursor:pointer; font-size:11px; padding:0 1px; }
|
.se-lane-label .se-lname { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||||
|
.se-lane-label button { flex:none; background:none; border:none; color:#9a8f78; cursor:pointer; font-size:12px; padding:0 1px; line-height:1; }
|
||||||
.se-lane-label .se-addclip:hover { color:#7ee3c8; }
|
.se-lane-label .se-addclip:hover { color:#7ee3c8; }
|
||||||
.se-lane-label .se-deltrack:hover { color:#e38f7e; }
|
.se-lane-label .se-deltrack:hover { color:#e38f7e; }
|
||||||
.se-clip { position:absolute; top:5px; height:24px; line-height:24px; padding:0 6px; border-radius:4px;
|
.se-clip { position:absolute; top:5px; height:24px; line-height:24px; padding:0 6px; border-radius:4px;
|
||||||
|
|||||||
Reference in New Issue
Block a user