bia/story-edit-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

节点编辑器改用 Drawflow 拖拽连线版

Browse Source 
- 中间画布换成 Drawflow：拖动节点摆位、从出口圆点拉线到目标=建跳转
- 出口端口动态映射 IR：线性next/choice选项/random分支/fight胜败
- 连线/拖动实时写回 IR；节点坐标持久化到 ir._layout（编译忽略）
- 右栏表单保留并双向联动；改跳转目标触发画布重渲
- 工具栏：自动整理、加后继；防误删（右栏输入时 Del 不删节点）
- 移除旧 tree.js
This commit is contained in:
bia
2026-06-08 17:27:45 +08:00
parent cd6cab33f1
commit 4a681dfe91
8 changed files with 305 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/static/style.css
View File

@ -39,12 +39,15 @@ button.mini { padding:2px 8px; font-size:12px; }
.b-confirmed{ background:#1f3a24; color:#7ad88a; }
.b-discarded{ background:#3a2020; color:#d88; }
#graph-pane { flex:1; position:relative; min-width:0; }
#graph { position:absolute; inset:0; overflow:auto; padding:30px; }
#svg { position:absolute; top:0; left:0; pointer-events:none; }
#layers { position:relative; z-index:2; }
#graph-pane { flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
#graph-tools { flex:none; display:flex; align-items:center; gap:8px; padding:6px 10px;
background:#19150f; border-bottom:1px solid #3a322a; }
#graph-tools .tip { font-size:11.5px; color:#7a7264; }
#drawflow { position:relative; flex:1; min-height:0; background:#161310;
background-image:radial-gradient(#2a2419 1.1px, transparent 1.1px);
background-size:22px 22px; }
.empty-center { position:absolute; inset:0; display:flex; align-items:center;
justify-content:center; color:#6a6256; font-size:15px; }
justify-content:center; color:#6a6256; font-size:15px; pointer-events:none; }
#edit-pane { width:370px; background:#1c1813; border-left:1px solid #3a322a;
overflow:auto; flex:none; }
@ -82,6 +85,35 @@ button.mini { padding:2px 8px; font-size:12px; }
clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
.node.kind-choice .k, .node.kind-choice_once .k { color:#9ec0f0; }
/* ---- Drawflow 节点（拖拽连线版） ---- */
#drawflow .drawflow-node { background:#262019; border:1.5px solid #4a4030; border-radius:9px;
padding:8px 12px; width:192px; color:#e8e0d4; box-shadow:0 2px 6px rgba(0,0,0,.4); }
#drawflow .drawflow-node:hover { border-color:#e6c878; }
#drawflow .drawflow-node.selected { border-color:#e6c878; box-shadow:0 0 0 2px rgba(230,200,120,.45); }
#drawflow .drawflow_content_node { width:100%; }
.drawflow-node .nid { font-size:10px; color:#6a6256; }
.drawflow-node .k { font-size:11px; color:#b89a5a; font-weight:bold; }
.drawflow-node .t { font-size:12.5px; margin-top:2px; line-height:1.35; color:#ddd3c2; word-break:break-all; }
.drawflow-node .outs { margin-top:5px; display:flex; flex-direction:column; gap:2px; }
.drawflow-node .outs span { font-size:10.5px; color:#9ec0f0; }
.drawflow-node .rw { font-size:11px; color:#c9a86a; margin-top:4px;
border-top:1px dashed #6a5630; padding-top:4px; }
#drawflow .kind-ending { background:#3a2a17; border-color:#e0a850; }
#drawflow .kind-ending .k { color:#f2c463; }
#drawflow .kind-fight { border-color:#7a4a4a; background:#2a1c1c; }
#drawflow .kind-fight .k { color:#d87878; }
#drawflow .kind-out_ref { border-style:dashed; border-color:#7a7ad8; background:#1d1d2a; }
#drawflow .kind-out_ref .k { color:#9e9ef0; }
#drawflow .kind-choice, #drawflow .kind-choice_once { background:#1d2840; border-color:#3a527a; }
#drawflow .kind-choice .k, #drawflow .kind-choice_once .k { color:#9ec0f0; }
/* 端口圆点 */
#drawflow .drawflow-node .input, #drawflow .drawflow-node .output {
background:#e6c878; border:2px solid #161310; width:15px; height:15px; }
#drawflow .drawflow-node .input:hover, #drawflow .drawflow-node .output:hover { background:#f0d68a; }
/* 连线 */
#drawflow .connection .main-path { stroke:#7a96c8; stroke-width:2.4px; }
#drawflow .connection .main-path:hover { stroke:#e6c878; }
/* ---- form ---- */
.fld { margin:9px 0; }
.fld > label { display:block; font-size:12px; color:#9a8f7e; margin-bottom:3px; }