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

- 中间画布换成 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

View File

@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Story 协作编辑器 · M5</title>
<link rel="stylesheet" href="vendor/drawflow.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
@ -51,9 +52,14 @@
<div id="event-list"></div>
</aside>
<!-- 中:分支 -->
<!-- 中:分支Drawflow 可拖拽连线) -->
<main id="graph-pane">
<div id="graph"><svg id="svg"></svg><div id="layers"></div></div>
<div id="graph-tools">
<button id="btn-autolayout" class="mini" disabled>自动整理</button>
<button id="btn-addsucc" class="mini" disabled>加后继</button>
<span class="tip">拖出口圆点→目标节点 = 连跳转 · 拖动摆位 · 选中按 Del 删除</span>
</div>
<div id="drawflow"></div>
<div id="graph-empty" class="empty-center">从左侧选择一个事件</div>
</main>
@ -107,7 +113,8 @@
</div>
</div>
<script src="tree.js"></script>
<script src="vendor/drawflow.min.js"></script>
<script src="graph.js"></script>
<script src="form.js"></script>
<script src="playtest.js"></script>
<script src="app.js"></script>