Upload folder using huggingface_hub

web/app.js

@@ -44,7 +44,7 @@ var S = {
   queue: [], filtered: [], selected: null,   // {kind, scene_id, key:[...]}
   scenes: [], sceneSel: null,
   scene: null, offset: 0, limit: 100,
-  basemap: 'satellite', mapZoom: 17, edgeMode: 'road',
+  basemap: 'satellite', mapZoom: 17, edgeMode: 'straight',   // 直线更醒目，默认走直线
   boot: null,
 };
 
@@ -452,28 +452,29 @@ function drawScene() {
   if (S.basemap === 'map') renderMapTiles();
 }
 
-/* ---------- 重叠边的分离 ----------------------------------------------
- * 同一条街上常常叠着好几条边。新策略（merged_policy_0915）之后这更普遍了：
- * §1 蓝边和 §2 绿边都沿路画，一条绿边往往**只有一段**和某条蓝边重合。
+/* ---------- 重合边的分离 ----------------------------------------------
+ * 直线更醒目，所以默认就画直线（`E` 可切到沿路走线）。
  *
- * 所以不能整条边一起挪。之前那版按「整条边 75% 重合」判定，实测只挪动 6%
- * 的边，而真实被压住的采样点有 30% ——差的全是部分重合。
+ * 直线模式下**真正重合的很少**：实测 464 条边里只有 6 对、涉及 8 条边
+ * (1.7%)。因为直线只在「共线且投影重叠」时才压在一起，而策略的 §2.5 /
+ * §3.3 本来就禁止「第三个节点落在路径/直线上」，大部分共线情形已被排除。
+ * 剩下的是两条边恰好首尾错开地共线。
  *
- * 现在改成**逐点侧移**：
- *   1. 每条折线按固定间距重采样
- *   2. 每个采样点去找「附近且走向相近」的其它边的点，凑成一组
- *   3. 组内按边的下标定序，各自沿法线偏移 (rank - (n-1)/2) * SEP
- *   4. 沿边做滑动平均，避免分组变化处抖动
+ * 所以分离用**整条边平移**，不是逐点侧移：
+ *   - 直线平移之后还是直线，不会被弯成弧
+ *   - 端点跟着挪，但挪动量被压在节点圆点半径（5）以内，看上去仍然连着节点
  *
- * 法线方向按**归一到 [0,180) 的走向**算：同一条路上反向行进的两条边，
- * 法线必须指向同一侧，否则 rank 0 和 rank 1 会被推到同一边。
+ * 逐点侧移那一版是为沿路走线写的（那种模式下大量边共用同一条道路中心线，
+ * 遮挡 17%），它会把直线弯掉，与「直线更醒目」正好相反。
  */
-var SEP = 4.2;            // 相邻两条重合边的间距（raster 单位，400 = 全宽）
-var NEAR_TOL = 3.2;       // 多近算"压在一起"
-var ANG_TOL = 30.0;       // 走向差多少度以内才算同向（度）
-var STEP = 3.0;           // 重采样间距
-var DILATE = 3;           // 把偏移量向两侧扩张几个采样点（见下）
-var TAPER = 9.0;          // 端点附近多少距离内收敛回 0（raster 单位）
+var SEP = 4.2;            // 同组相邻两条边的间距（raster 单位，画布 400）
+var MAX_OFF = 6.0;        // 单条边的最大平移量。
+                          // 节点圆点半径 5 且画在边之上，所以平移 5 以内完全被盖住；
+                          // 取 6 是给大组留余地（5 条边一组时挤到 2.25 反而低于容差），
+                          // 超出的那 1 单位比边宽(2)还窄，看上去仍然连着节点。
+var NEAR_TOL = 2.5;       // 多近算"压在一起"
+var OVERLAP_FRAC = 0.6;   // 采样点落在容差内的比例门槛
+var NSAMP = 9;            // 每条边取几个采样点做重合判定
 
 function distToSegment(p, a, b) {
   var dx = b[0] - a[0], dy = b[1] - a[1];
@@ -492,116 +493,96 @@ function distToPolyline(p, pts) {
 }
 function polyLength(pts) {
   var L = 0;
-  for (var i = 0; i + 1 < pts.length; i++) L += Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]);
+  for (var i = 0; i + 1 < pts.length; i++)
+    L += Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]);
   return L;
 }
-/* 沿折线等距取点，同时给出每点的走向（归一到 [0,180)）。 */
-function resample(pts, step) {
-  var out = [];
+/* 沿折线等距取 n 个点（含两端）。 */
+function sampleAlong(pts, n) {
   var total = polyLength(pts);
-  var n = Math.max(2, Math.ceil(total / step) + 1);
+  if (!total) return [pts[0]];
   var segs = [];
   for (var i = 0; i + 1 < pts.length; i++)
     segs.push(Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]));
+  var out = [];
   for (var k = 0; k < n; k++) {
     var want = total * k / (n - 1), acc = 0, j = 0;
     while (j < segs.length && acc + segs[j] < want) { acc += segs[j]; j++; }
     if (j >= segs.length) j = segs.length - 1;
     var t = segs[j] ? (want - acc) / segs[j] : 0;
-    var a = pts[j], b = pts[j + 1];
-    var ang = Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI;
-    ang = ((ang % 180) + 180) % 180;        // 归一：反向行进算同一走向
-    out.push({ x: a[0] + (b[0] - a[0]) * t, y: a[1] + (b[1] - a[1]) * t,
-               ang: ang, s: want });
+    out.push([pts[j][0] + (pts[j + 1][0] - pts[j][0]) * t,
+              pts[j][1] + (pts[j + 1][1] - pts[j][1]) * t]);
   }
   return out;
 }
-function angDiff(a, b) {
-  var d = Math.abs(a - b) % 180;
-  return d > 90 ? 180 - d : d;
+/* 两条边压在一起的程度。取两个方向的较大者——一条短边整个趴在长边上时，
+   短→长的比例高而长→短的低，只看一个方向会漏掉。 */
+function overlapFraction(a, b) {
+  var hit = 0;
+  var pts = sampleAlong(a, NSAMP);
+  pts.forEach(function (p) { if (distToPolyline(p, b) <= NEAR_TOL) hit++; });
+  return hit / pts.length;
 }
 
-/* 返回每条边的新折线。不重合的边原样返回。 */
-function separateEdges(polys) {
+/* 返回每条边的平移量（沿自身法线，单位 raster）。不重合的为 0。 */
+function planOffsets(polys) {
   var n = polys.length;
-  var samples = polys.map(function (p) {
-    return (p && p.length > 1) ? resample(p, STEP) : [];
-  });
-  // 网格索引：只跟邻近格子里的点比，不做 O(总点数^2)
-  var CELL = NEAR_TOL * 2;
-  var grid = {};
-  samples.forEach(function (pts, ei) {
-    pts.forEach(function (q, pi) {
-      var key = Math.floor(q.x / CELL) + ':' + Math.floor(q.y / CELL);
-      (grid[key] || (grid[key] = [])).push([ei, pi]);
-    });
-  });
-
-  var offsets = samples.map(function (pts) { return pts.map(function () { return 0; }); });
-  samples.forEach(function (pts, ei) {
-    pts.forEach(function (q, pi) {
-      // 收集与本点重合的其它边
-      var group = [ei];
-      var cx = Math.floor(q.x / CELL), cy = Math.floor(q.y / CELL);
-      for (var dx = -1; dx <= 1; dx++) for (var dy = -1; dy <= 1; dy++) {
-        var cell = grid[(cx + dx) + ':' + (cy + dy)];
-        if (!cell) continue;
-        for (var t = 0; t < cell.length; t++) {
-          var ej = cell[t][0], pj = cell[t][1];
-          if (ej === ei || group.indexOf(ej) >= 0) continue;
-          var r = samples[ej][pj];
-          if (Math.hypot(r.x - q.x, r.y - q.y) > NEAR_TOL) continue;
-          if (angDiff(r.ang, q.ang) > ANG_TOL) continue;
-          group.push(ej);
-        }
-      }
-      if (group.length < 2) return;
-      group.sort(function (a, b) { return a - b; });    // 确定性：按边的下标
-      var rank = group.indexOf(ei);
-      offsets[ei][pi] = (rank - (group.length - 1) / 2) * SEP;
+  var parent = [];
+  for (var i = 0; i < n; i++) parent.push(i);
+  function find(x) { while (parent[x] !== x) { parent[x] = parent[parent[x]]; x = parent[x]; } return x; }
+  function join(x, y) { var a = find(x), b = find(y); if (a !== b) parent[Math.max(a, b)] = Math.min(a, b); }
+
+  for (var i = 0; i < n; i++) {
+    if (!polys[i] || polys[i].length < 2) continue;
+    for (var j = i + 1; j < n; j++) {
+      if (!polys[j] || polys[j].length < 2) continue;
+      var f = Math.max(overlapFraction(polys[i], polys[j]),
+                       overlapFraction(polys[j], polys[i]));
+      if (f >= OVERLAP_FRAC) join(i, j);
+    }
+  }
+  var groups = {};
+  for (var k = 0; k < n; k++) {
+    if (!polys[k] || polys[k].length < 2) continue;
+    var r = find(k);
+    (groups[r] || (groups[r] = [])).push(k);
+  }
+  var off = {};
+  Object.keys(groups).forEach(function (g) {
+    var list = groups[g];
+    if (list.length < 2) return;
+    list.sort(function (a, b) { return a - b; });     // 确定性：按边的绘制序
+    // 组大时收窄间距，保证最外侧那条仍在节点圆点内（否则边看着从节点脱开）
+    var sep = Math.min(SEP, 2 * MAX_OFF / (list.length - 1));
+    list.forEach(function (ei, idx) {
+      off[ei] = (idx - (list.length - 1) / 2) * sep;
     });
   });
+  return off;
+}
 
-  return polys.map(function (poly, ei) {
-    var pts = samples[ei];
-    if (!pts.length) return poly;
-    var off = offsets[ei];
-    if (!off.some(function (v) { return v !== 0; })) return poly;   // 没被挪
-
-    // 1) 扩张：把每个点的偏移取邻域内绝对值最大的那个。
-    //    直接做滑动平均会把短重合段的偏移摊薄到不起作用——重合只有三四个点时
-    //    平均下来只剩三分之一，等于没挪。扩张先把量保住，过渡放到重合段之外。
-    var dil = off.map(function (_, i) {
-      var best = 0;
-      for (var k = -DILATE; k <= DILATE; k++) {
-        var j = i + k;
-        if (j < 0 || j >= off.length) continue;
-        if (Math.abs(off[j]) > Math.abs(best)) best = off[j];
-      }
-      return best;
-    });
-    // 2) 三点平均，磨圆分组变化处的折角。窗口小到不会再摊薄量级。
-    var sm = dil.map(function (_, i) {
-      var a = 0, c = 0;
-      for (var k = -1; k <= 1; k++) {
-        var j = i + k;
-        if (j >= 0 && j < dil.length) { a += dil[j]; c++; }
-      }
-      return a / c;
-    });
-    // 3) 端点收敛，**必须放在平滑之后**：先收敛再平滑的话，三点平均会把
-    //    邻点的偏移带回端点，边就从节点上脱开了（实测 425 条里脱开 251 条）。
-    //    §1/§2 的边本来就都汇聚到节点，那里不可能也不需要分开。
-    var total = pts[pts.length - 1].s || 1;
-    sm = sm.map(function (v, i) {
-      var d = Math.min(pts[i].s, total - pts[i].s);
-      return d >= TAPER ? v : v * (d / TAPER);
-    });
-    return pts.map(function (q, i) {
-      var nx = -Math.sin(q.ang * Math.PI / 180);
-      var ny = Math.cos(q.ang * Math.PI / 180);
-      return [q.x + nx * sm[i], q.y + ny * sm[i]];
-    });
+/* 整条折线沿法线平移 dist。直线平移后仍是直线。
+   拐角处取相邻两段法线的平均，折线不会在拐点裂开。 */
+function offsetPolyline(pts, dist) {
+  if (!dist || pts.length < 2) return pts;
+  // 法线方向必须与「边的朝向」无关。边的两端按 source<target 的字母序存，
+  // 与几何走向无关——同一条线上首尾相反的两条边，各按自己的方向算法线会
+  // 指向相反侧，于是 +d 和 -d 把它们推到了**同一边**，等于没分开。
+  // 把整体走向归一到 [0,180)，方向落在下半圆时翻转平移量。
+  var deg = (Math.atan2(pts[pts.length - 1][1] - pts[0][1],
+                        pts[pts.length - 1][0] - pts[0][0]) * 180 / Math.PI + 360) % 360;
+  if (deg >= 180) dist = -dist;
+  var norms = [];
+  for (var i = 0; i + 1 < pts.length; i++) {
+    var dx = pts[i + 1][0] - pts[i][0], dy = pts[i + 1][1] - pts[i][1];
+    var L = Math.hypot(dx, dy) || 1;
+    norms.push([-dy / L, dx / L]);
+  }
+  return pts.map(function (p, i) {
+    var a = norms[Math.max(0, i - 1)], b = norms[Math.min(norms.length - 1, i)];
+    var nx = (a[0] + b[0]) / 2, ny = (a[1] + b[1]) / 2;
+    var L = Math.hypot(nx, ny) || 1;
+    return [p[0] + nx / L * dist, p[1] + ny / L * dist];
   });
 }
 
@@ -633,8 +614,8 @@ function drawGraph() {
     }
     return { e: e, costly: costly, road: false, pts: [a, b] };
   });
-  // 逐点侧移：重合的部分被推开，不重合的部分原样
-  var drawn = separateEdges(geo.map(function (g) { return g ? g.pts : []; }));
+  // 整条边平移：直线平移后仍是直线
+  var off = planOffsets(geo.map(function (g) { return g ? g.pts : []; }));
 
   geo.forEach(function (g, ei) {
     if (!g) return;
@@ -643,25 +624,35 @@ function drawGraph() {
     var isSel = sel && sel.kind === 'edge'
       && sel.key[1] === e.source_label && sel.key[2] === e.target_label;
     var dead = !e.in_graph;
-    var pts = drawn[ei] || g.pts;
-    var moved = pts !== g.pts;
-
-    // 一律用 polyline：侧移之后连"直线"边也可能变成折线
-    // （两端不重合、中段被推开时，直线会被弯成一个浅弧）
-    var el = mk('polyline', {
-      points: pts.map(function (q) { return q[0].toFixed(2) + ',' + q[1].toFixed(2); }).join(' '),
-      fill: 'none', stroke: isSel ? '#fff' : colour,
-      'stroke-width': isSel ? 3 : (g.costly ? 2.2 : 1.7),
-      opacity: dead ? .22 : 1,
-      'stroke-dasharray': g.costly ? '6 4' : '',
-      'stroke-linejoin': 'round', 'stroke-linecap': 'round',
-      style: 'cursor:pointer',
-    });
+    var shift = off[ei] || 0;
+    var pts = offsetPolyline(g.pts, shift);
+
+    var el;
+    if (pts.length === 2) {
+      el = mk('line', {
+        x1: pts[0][0].toFixed(2), y1: pts[0][1].toFixed(2),
+        x2: pts[1][0].toFixed(2), y2: pts[1][1].toFixed(2),
+        stroke: isSel ? '#fff' : colour,
+        'stroke-width': isSel ? 3 : 2.0,
+        opacity: dead ? .22 : 1,
+        'stroke-linecap': 'round',
+        style: 'cursor:pointer',
+      });
+    } else {
+      el = mk('polyline', {
+        points: pts.map(function (q) { return q[0].toFixed(2) + ',' + q[1].toFixed(2); }).join(' '),
+        fill: 'none', stroke: isSel ? '#fff' : colour,
+        'stroke-width': isSel ? 3 : 1.8,
+        opacity: dead ? .22 : 1,
+        'stroke-linejoin': 'round', 'stroke-linecap': 'round',
+        style: 'cursor:pointer',
+      });
+    }
     el.onclick = function () { pickEdge(e); };
     var title = mk('title', {});
     title.textContent = e.source_label + '–' + e.target_label + ' · ' +
       (EDGE_LABEL[e.origin] || e.origin || '') +
-      (moved ? '（与其它边重合，已错开显示）' : '');
+      (shift ? '（与其它边重合，已错开显示）' : '');
     el.appendChild(title);
     svg.appendChild(el);
   });

web/index.html

@@ -180,8 +180,8 @@
           <span class="image-kind">Scene Graph</span>
           <div class="map-card-tools">
             <div class="basemap-switch" role="group" aria-label="边的画法">
-              <button type="button" id="edgeRoad" class="active" title="沿道路走线">ROAD</button>
-              <button type="button" id="edgeStraight" title="直线连接">LINE</button>
+              <button type="button" id="edgeStraight" class="active" title="直线连接（默认，更醒目）">LINE</button>
+              <button type="button" id="edgeRoad" title="沿道路走线">ROAD</button>
             </div>
             <div class="basemap-switch" role="group" aria-label="底图切换">
               <button type="button" id="baseSat" class="active">SAT</button>