29:null 2a:["$","title",null,{"children":"Jones Act Waiver Shipping Dashboard | Cato Institute | Observable"}] 2f:T1cbe,viewof dashboard = { if (!document.querySelector("style[data-stkdash-style]")) { const styleClone = style.cloneNode(true); styleClone.setAttribute("data-stkdash-style", ""); document.head.appendChild(styleClone); } if (!compile) { const placeholder = html`

Attach cells to see in dashboard

`; placeholder.value = null; return placeholder; } const container = html`

`; const grid = html`

`; container.appendChild(grid); // Stats band, spanning the full width above the route/shipment titles. // appendChild moves the node out of its own notebook display container. if (typeof stats !== "undefined" && stats) { const statsWrap = document.createElement("div"); statsWrap.className = "stkdash__cell stkdash__cell--stats"; statsWrap.appendChild(stats); grid.appendChild(statsWrap); } // compile.cells is [globeRoutes, timeline, routeList] (array order from the // compile cell). Map each to its named grid slot rather than relying on // visual order, so the CSS grid-template-areas control the layout. const [globeEl, timelineEl, routeListEl] = compile.cells; const slots = [ { el: globeEl, cls: "stkdash__cell--globe", title: "Routes" }, { el: timelineEl, cls: "stkdash__cell--timeline", title: null }, { el: routeListEl, cls: "stkdash__cell--routelist", title: "Shipments" }, ]; // appendChild MOVES the node, so the notebook's own display container for // that cell ends up empty. for (const { el, cls, title } of slots) { if (!el) continue; const wrap = document.createElement("div"); wrap.className = "stkdash__cell " + cls; if (title) { const h = document.createElement("div"); h.className = "stkdash__title"; h.textContent = title; wrap.appendChild(h); } wrap.appendChild(el); grid.appendChild(wrap); } // --- Cato logo --------------------------------------------------------- // Pin the logo to the bottom-right of the MAP itself. Like the legend, the // "Routes" title lives at the top of the globe *cell*, so we re-parent into // globeEl (the map wrapper, which sits below the title) and position it // absolutely there. pointer-events:none keeps it decorative so it never // intercepts map interaction. The bottom-right corner avoids the legend, // which (in wide mode) overlays the top-right. if (globeEl) { if (!globeEl.style.position) globeEl.style.position = "relative"; const logo = await FileAttachment("Cato_Institute.svg").image(); Object.assign(logo.style, { position: "absolute", bottom: "8px", right: "8px", left: "auto", top: "auto", width: "60px", // adjust to taste height: "auto", opacity: "1", margin: "0", pointerEvents: "none", zIndex: "25", // above the globe / its zoom hint (z-index 20) }); globeEl.appendChild(logo); } // --- Cargo legend ------------------------------------------------------ // Narrow: a normal grid cell (grid-area: legend) -> its own full-width row // between the stats and the globe. Handled purely by the `style` cell. // Wide : overlay the MAP's top-right corner. The "Routes" title lives at // the top of the globe *cell*, so a grid-area overlay aligns to the title, // not the map (the legend sticks up above the map). To pin it to the map // itself we re-parent the legend into globeEl (the map wrapper, which // sits below the title) and position it absolutely there. if (typeof cargoLegend !== "undefined" && cargoLegend) { const legendWrap = document.createElement("div"); legendWrap.className = "stkdash__cell stkdash__cell--legend"; legendWrap.appendChild(cargoLegend); grid.appendChild(legendWrap); // narrow default const WIDE_MIN = 1000; // mirrors the @container (min-width: 1000px) rule let mode = null; function setWide() { if (mode === "wide" || !globeEl) return; mode = "wide"; if (!globeEl.style.position) globeEl.style.position = "relative"; if (legendWrap.parentNode !== globeEl) globeEl.appendChild(legendWrap); Object.assign(legendWrap.style, { position: "absolute", top: "8px", right: "8px", left: "auto", bottom: "auto", width: "auto", maxWidth: "240px", // keep it single-column, as before margin: "0", zIndex: "30", // above the globe (its zoom hint is z-index 20) pointerEvents: "auto", }); } function setNarrow() { if (mode === "narrow") return; mode = "narrow"; if (legendWrap.parentNode !== grid) grid.appendChild(legendWrap); legendWrap.removeAttribute("style"); // hand styling back to grid-area CSS } function sync(w) { if (w >= WIDE_MIN) setWide(); else setNarrow(); } // Mirror the container query by watching the .stkdash container's inline // size (container queries measure the container's content-box width). if (typeof ResizeObserver !== "undefined") { const ro = new ResizeObserver((entries) => { for (const e of entries) sync(e.contentRect.width); }); ro.observe(container); if (typeof invalidation !== "undefined") invalidation.then(() => ro.disconnect()); } // First pass once attached (RO may not fire before initial paint). requestAnimationFrame(() => sync(container.clientWidth || 0)); } // --- Sources line ------------------------------------------------------ // Full-width credit row pinned to the BOTTOM in both layouts. There's no // grid-template-areas slot for it (that lives in the `style` cell), so we // span every column with grid-column: 1 / -1. Because all the named areas // already occupy their columns, auto-placement drops this into a new // implicit row beneath them — i.e. the bottom — regardless of column count. // text-align:center on the inner node keeps the single line centered. if (typeof sources !== "undefined" && sources) { const sourceWrap = document.createElement("div"); sourceWrap.className = "stkdash__cell stkdash__cell--source"; sourceWrap.style.gridColumn = "1 / -1"; sourceWrap.appendChild(sources); grid.appendChild(sourceWrap); } // --- Region stats section ---------------------------------------------- // Full-width block placed BELOW the sources line. Same mechanism as // `sources`: no grid-template-areas slot, so grid-column: 1 / -1 spans // every column and auto-placement drops it into a new implicit row. // Because it is appended AFTER `sources`, that row sits beneath the // credits. regionStats is a DOM node, so appendChild moves it out of its // own notebook display container (like the other cells above). if (typeof regionStats !== "undefined" && regionStats) { const regionStatsWrap = document.createElement("div"); regionStatsWrap.className = "stkdash__cell stkdash__cell--regionstats"; regionStatsWrap.style.gridColumn = "1 / -1"; regionStatsWrap.style.marginTop = "24px"; // breathing room below the sources line regionStatsWrap.appendChild(regionStats); grid.appendChild(regionStatsWrap); } container.value = null; return container; }30:T6f0,// Cell 1: Configuration — node types, area segments, colors, path list config = { const size = 600; const center = size / 2; const radius = size * 0.36; const nodeLabelOffset = 28; const strokeWidth = 3; const bundleSpacing = strokeWidth * 3; const minGap = 20 * Math.PI / 180; // 10 nodes clockwise from top const nodeTypes = [ "link", "edge", "area", "edge", "link", "edge", "area", "area", "edge", "link" ]; const n = nodeTypes.length; // Contiguous node ranges connected directly (not through junction) const areaSegments = [[1, 2, 3], [5, 6, 7, 8]]; const segmentOfNode = new Array(n).fill(null); areaSegments.forEach((seg, i) => seg.forEach(node => (segmentOfNode[node] = i))); // CMY scheme — keyed both orderings since classify() sorts alphabetically const pathColors = { ll: "#b36db0", le: "#ff725c", el: "#ff725c", la: "#4269d0", al: "#4269d0", ee: "#efb118", ea: "#3ca951", ae: "#3ca951", aa: "#29cce2", }; const typeColors = { link: "#b36db0", edge: "#efb118", area: "#29cce2", }; const typeLetter = (t) => t[0]; const classify = (a, b) => [typeLetter(nodeTypes[a]), typeLetter(nodeTypes[b])].sort().join(""); // All unordered pairs, excluding intra-segment pairs const paths = []; for (let i = 0; i < n; i++) { for (let j = i + 1; j < n; j++) { if (segmentOfNode[i] !== null && segmentOfNode[i] === segmentOfNode[j]) continue; paths.push({ a: i, b: j, klass: classify(i, j) }); } } paths.forEach((p, idx) => { p.id = idx; }); return { size, center, radius, nodeLabelOffset, strokeWidth, bundleSpacing, minGap, nodeTypes, n, areaSegments, segmentOfNode, pathColors, typeColors, typeLetter, classify, paths }; }31:T6c6,// Cell 2: Bundle ordering — generic primitive. // Given a list of half-segments meeting at one or more spokes, assign each a // "rank" (perpendicular offset slot) within its spoke. Half-segments sharing // a spoke are sorted by the CW angle of the OTHER half of their path. // // halfSegments: [{ key, spokeId, spokeAngle, otherAngle }, ...] // key — unique identifier; used as the Map key in the result. // spokeId — which spoke this half belongs to. Halves sharing a spokeId // are sorted and ranked together. Use a unique value per // half-segment to make it a "spoke of one". // spokeAngle — the spoke's angle at the junction (radians). // otherAngle — angle of the other half of the same path (sort key). // // options.shift: (spokeId, count) → number — optional per-spoke rank shift // for justification (e.g. push an edge bundle into an adjacent area). // // Returns: Map. buildBundleOrders = function(halfSegments, options = {}) { const groups = new Map(); for (const hs of halfSegments) { if (!groups.has(hs.spokeId)) groups.set(hs.spokeId, []); groups.get(hs.spokeId).push(hs); } const ranks = new Map(); for (const [spokeId, list] of groups) { const spokeAngle = list[0].spokeAngle; list.forEach(hs => { let d = hs.otherAngle - spokeAngle; while (d <= 0) d += 2 * Math.PI; while (d > 2 * Math.PI) d -= 2 * Math.PI; hs._delta = d; }); list.sort((u, v) => u._delta - v._delta); const m = list.length; const shift = options.shift ? options.shift(spokeId, m) : 0; list.forEach((hs, k) => { ranks.set(hs.key, (m - 1) / 2 - k + shift); }); } return ranks; }32:T829,// Straight-line path. M-L-C-L command structure so d3 can morph // cleanly into the curved variant. buildStraightPath = function(p, nodeAngles, getBundleRank, opts) { const { center, radius, bundleSpacing } = opts; const aA = nodeAngles[p.a], aB = nodeAngles[p.b]; const A = { x: center + radius * Math.cos(aA), y: center + radius * Math.sin(aA) }; const B = { x: center + radius * Math.cos(aB), y: center + radius * Math.sin(aB) }; const dirA = { x: Math.cos(aA), y: Math.sin(aA) }; const perpA = { x: -dirA.y, y: dirA.x }; const dirB = { x: Math.cos(aB), y: Math.sin(aB) }; const perpB = { x: -dirB.y, y: dirB.x }; const offA = getBundleRank(p.id, p.a) * bundleSpacing; const offB = getBundleRank(p.id, p.b) * bundleSpacing; const endA = { x: A.x + perpA.x * offA, y: A.y + perpA.y * offA }; const endB = { x: B.x + perpB.x * offB, y: B.y + perpB.y * offB }; // Intersection of the two offset spoke-parallel lines const rhsX = perpB.x * offB - perpA.x * offA; const rhsY = perpB.y * offB - perpA.y * offA; const det = dirA.x * (-dirB.y) - dirA.y * (-dirB.x); const parallel = Math.abs(det) < 1e-6; let cx = 0, cy = 0, cornerDist = Infinity; if (!parallel) { const tC = (rhsX * (-dirB.y) - rhsY * (-dirB.x)) / det; cx = center + perpA.x * offA + tC * dirA.x; cy = center + perpA.y * offA + tC * dirA.y; cornerDist = Math.hypot(cx - center, cy - center); } let p0, p1, p2, p3; if (!parallel && cornerDist <= radius) { // Single sharp corner (degenerate cubic) const c = { x: cx, y: cy }; p0 = c; p1 = c; p2 = c; p3 = c; } else { // Antipodal-ish: short spoke-parallel jog between two corners const jog = bundleSpacing; const cA = { x: center + dirA.x * jog + perpA.x * offA, y: center + dirA.y * jog + perpA.y * offA }; const cB = { x: center + dirB.x * jog + perpB.x * offB, y: center + dirB.y * jog + perpB.y * offB }; p0 = cA; p1 = cA; p2 = cB; p3 = cB; } return `M ${endA.x} ${endA.y} L ${p0.x} ${p0.y} C ${p1.x} ${p1.y} ${p2.x} ${p2.y} ${p3.x} ${p3.y} L ${endB.x} ${endB.y}`; }33:Tb96,// Cell 4: Curved-line path. Paths run straight from the outer end until they // hit a circle of radius jr around center; a cubic Bezier joins the two // crossing points. Sharp corner is used only when the offset-line intersection // sits outside jr. buildCurvedPath = function(p, nodeAngles, getBundleRank, jr, opts) { const { center, radius, bundleSpacing } = opts; const aA = nodeAngles[p.a], aB = nodeAngles[p.b]; const A = { x: center + radius * Math.cos(aA), y: center + radius * Math.sin(aA) }; const B = { x: center + radius * Math.cos(aB), y: center + radius * Math.sin(aB) }; const dirA = { x: Math.cos(aA), y: Math.sin(aA) }; const perpA = { x: -dirA.y, y: dirA.x }; const dirB = { x: Math.cos(aB), y: Math.sin(aB) }; const perpB = { x: -dirB.y, y: dirB.x }; const offA = getBundleRank(p.id, p.a) * bundleSpacing; const offB = getBundleRank(p.id, p.b) * bundleSpacing; const endA = { x: A.x + perpA.x * offA, y: A.y + perpA.y * offA }; const endB = { x: B.x + perpB.x * offB, y: B.y + perpB.y * offB }; // Offset-line intersection const rhsX = perpB.x * offB - perpA.x * offA; const rhsY = perpB.y * offB - perpA.y * offA; const det = dirA.x * (-dirB.y) - dirA.y * (-dirB.x); const parallel = Math.abs(det) < 1e-6; let cx = 0, cy = 0, cornerDist = Infinity, tC = 0, sC = 0; if (!parallel) { tC = (rhsX * (-dirB.y) - rhsY * (-dirB.x)) / det; sC = (dirA.x * rhsY - dirA.y * rhsX) / det; cx = center + perpA.x * offA + tC * dirA.x; cy = center + perpA.y * offA + tC * dirA.y; cornerDist = Math.hypot(cx - center, cy - center); } let p0, p1, p2, p3; const cornerInFront = !parallel && tC > 0 && sC > 0; const sharpCorner = cornerInFront && cornerDist > jr; if (sharpCorner) { const c = { x: cx, y: cy }; p0 = c; p1 = c; p2 = c; p3 = c; } else { // P0, P3 = where each offset line crosses the jr circle on the spoke side. // Cubic-Bezier approximation of arc tangent to both endpoint tangents. const tA = Math.sqrt(Math.max(0, jr * jr - offA * offA)); const tB = Math.sqrt(Math.max(0, jr * jr - offB * offB)); p0 = { x: center + dirA.x * tA + perpA.x * offA, y: center + dirA.y * tA + perpA.y * offA }; p3 = { x: center + dirB.x * tB + perpB.x * offB, y: center + dirB.y * tB + perpB.y * offB }; // beta = angle between tangents at P0 and P3 const cosBeta = -dirA.x * dirB.x - dirA.y * dirB.y; const beta = Math.acos(Math.max(-1, Math.min(1, cosBeta))); const chord = Math.hypot(p3.x - p0.x, p3.y - p0.y); const cb4 = Math.cos(beta / 4); // Clamp so P1, P2 stay inside the jr circle let ctrlDist = Math.min(chord / (3 * cb4 * cb4), 2 * tA, 2 * tB); p1 = { x: p0.x - dirA.x * ctrlDist, y: p0.y - dirA.y * ctrlDist }; p2 = { x: p3.x - dirB.x * ctrlDist, y: p3.y - dirB.y * ctrlDist }; } return `M ${endA.x} ${endA.y} L ${p0.x} ${p0.y} C ${p1.x} ${p1.y} ${p2.x} ${p2.y} ${p3.x} ${p3.y} L ${endB.x} ${endB.y}`; }34:T61ee,// Drag a path near one of its endpoints to reorder it within that node's bundle. // Depends on: config, buildBundleOrders, buildStraightPath, buildCurvedPath, d3 junction1 = { const { size, center, radius, nodeLabelOffset, strokeWidth, bundleSpacing, minGap, nodeTypes, n, areaSegments, segmentOfNode, pathColors, typeColors, paths } = config; const opts = { center, radius, bundleSpacing }; // --- Mutable state --- const nodeAngles = Array.from({ length: n }, (_, i) => -Math.PI / 2 + (i / n) * 2 * Math.PI); const cwOrder = Array.from({ length: n }, (_, i) => i); const cwPos = new Array(n); cwOrder.forEach((idx, pos) => cwPos[idx] = pos); const hiddenClasses = new Set(); let curvedMode = true; let hoveredPath = null, hoveredNode = null, hoveredClass = null; let draggingNode = null, draggingHalf = null; // draggingHalf: { pathId, side } // Per-node ordered list of half-segment keys. Preserves user reorderings // across hide/show and across re-renders; new halves get inserted at the // angle-derived position via buildBundleOrders. // Map> const spokeOrders = new Map(); for (let i = 0; i < n; i++) spokeOrders.set(i, []); // Bundle justification: an edge spoke bordering an area on one side only // pushes its entire bundle into the area side (no entries centered on the // edge itself). Returns the rank offset to add to a centered position. function shiftFor(spokeId, count) { if (count <= 0) return 0; if (nodeTypes[spokeId] !== "edge") return 0; const cwIsArea = segmentOfNode[(spokeId + 1) % n] !== null; const ccwIsArea = segmentOfNode[(spokeId - 1 + n) % n] !== null; if (cwIsArea && !ccwIsArea) return (count - 1) / 2; if (ccwIsArea && !cwIsArea) return -(count - 1) / 2; return 0; } // The angle-based rank computation (for inserting new halves into the // ordered list; ignores justification — that's applied at display time). function angleRanks() { const halfSegments = []; paths.forEach(p => { if (hiddenClasses.has(p.klass)) return; halfSegments.push({ key: `${p.id}-a`, spokeId: p.a, spokeAngle: nodeAngles[p.a], otherAngle: nodeAngles[p.b], }); halfSegments.push({ key: `${p.id}-b`, spokeId: p.b, spokeAngle: nodeAngles[p.b], otherAngle: nodeAngles[p.a], }); }); return buildBundleOrders(halfSegments); } // Sync each spoke's ordered list with current visible halves. Existing // entries keep their relative order; missing halves are inserted at their // angle-derived rank position. function syncSpokeOrders() { // Build desired set of (nodeIndex, halfKey) pairs. const desired = new Map(); // nodeIndex -> Set of "pathId-side" for (let i = 0; i < n; i++) desired.set(i, new Set()); paths.forEach(p => { if (hiddenClasses.has(p.klass)) return; desired.get(p.a).add(`${p.id}-a`); desired.get(p.b).add(`${p.id}-b`); }); // Remove gone entries from each spoke. let needFullRebuild = false; for (let i = 0; i < n; i++) { const arr = spokeOrders.get(i); const dset = desired.get(i); const kept = arr.filter(e => dset.has(`${e.pathId}-${e.side}`)); spokeOrders.set(i, kept); // Detect if any spoke is missing entries (will need angle-based insertion). if (kept.length !== dset.size) needFullRebuild = true; } if (!needFullRebuild) return; // For any spoke with missing entries, compute angle ranks and insert // missing halves at their angle-sorted positions among existing ones. const ranksMap = angleRanks(); for (let i = 0; i < n; i++) { const arr = spokeOrders.get(i); const dset = desired.get(i); const present = new Set(arr.map(e => `${e.pathId}-${e.side}`)); const missing = [...dset].filter(k => !present.has(k)); if (missing.length === 0) continue; // Each entry in the spoke gets a "score": existing entries use their // current position; missing entries use their angle-derived rank. // Then sort all by score. const scored = [ ...arr.map((e, idx) => ({ entry: e, score: idx - (arr.length - 1) / 2 })), ...missing.map(k => { const [pid, side] = k.split("-"); return { entry: { pathId: +pid, side }, score: ranksMap.get(k) ?? 0 }; }), ]; scored.sort((u, v) => u.score - v.score); spokeOrders.set(i, scored.map(s => s.entry)); } } syncSpokeOrders(); // Rank for a half = centered position in its spoke's list, plus the // edge-near-area justification shift. function rankOf(pathId, side, nodeIdx) { const arr = spokeOrders.get(nodeIdx); const idx = arr.findIndex(e => e.pathId === pathId && e.side === side); if (idx < 0) return 0; return idx - (arr.length - 1) / 2 + shiftFor(nodeIdx, arr.length); } const getBundleRank = (pathId, nodeIndex) => { const path = paths[pathId]; if (!path) return 0; const side = path.a === nodeIndex ? "a" : "b"; return rankOf(pathId, side, nodeIndex); }; // --- Junction radius --- // Curved mode renders paths through a JR-radius circle around center. The // slider exposes the actual JR; bounds depend on current bundle sizes. const jrMax = radius * 0.85; const jrMin = radius * 0.35; const jrCap = 9; function currentMaxBundle() { let m = 0; for (let i = 0; i < n; i++) m = Math.max(m, spokeOrders.get(i).length); return m; } function computeJrBounds() { let maxOff = 0; for (let i = 0; i < n; i++) { const arr = spokeOrders.get(i); const shift = shiftFor(i, arr.length); for (let k = 0; k < arr.length; k++) { const r = k - (arr.length - 1) / 2 + shift; maxOff = Math.max(maxOff, Math.abs(r) * bundleSpacing); } } const mb = currentMaxBundle(); const t = (Math.min(Math.max(mb, 1), jrCap) - 1) / (jrCap - 1); const upper = jrMin + (jrMax - jrMin) * t; const lower = maxOff + 12; // safety floor: offsets must fit inside JR return { lower: Math.min(lower, upper), upper }; } let jrBounds = computeJrBounds(); let jr = jrBounds.upper; // initial: max let lastMaxBundle = currentMaxBundle(); function reclampJr() { const mb = currentMaxBundle(); if (lastMaxBundle > 0 && mb > 0 && mb !== lastMaxBundle) { jr = jr * (mb / lastMaxBundle); } lastMaxBundle = mb; jrBounds = computeJrBounds(); jr = Math.max(jrBounds.lower, Math.min(jrBounds.upper, jr)); } const buildPathD = (p) => curvedMode ? buildCurvedPath(p, nodeAngles, getBundleRank, jr, opts) : buildStraightPath(p, nodeAngles, getBundleRank, opts); // --- DOM scaffolding --- const wrapper = html`

`; // Toolbar: left = reset-order button + status; right = straight/curved radios. // The JR slider sits in an absolutely-positioned row anchored to the // wrapper, so when curved mode is active it overlays the top of the chart // (visually under the radios) without changing the toolbar's height or // the chart's vertical position. const toolbar = html`

`; const btnStyle = "padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;border:1px solid #888;background:#fff;border-radius:4px;"; const leftGroup = html`

`; const resetBtn = html``; leftGroup.appendChild(resetBtn); const radioRow = html`

`; const radioLabelStyle = "display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none;"; const radioStraight = html` straight`; const radioCurved = html` curved`; radioRow.appendChild(radioStraight); radioRow.appendChild(radioCurved); toolbar.appendChild(leftGroup); toolbar.appendChild(radioRow); wrapper.appendChild(toolbar); // Slider overlay: positioned relative to the wrapper, sitting just below // the toolbar's bottom edge. Custom SVG matches the snapRouteChart slider: // light grey track (#ddd) + medium grey thumb (#888). const sliderWidth = 100; const sliderRow = html`

`; const sliderSvg = d3.select(sliderRow).append("svg") .attr("width", sliderWidth + 12) .attr("height", 14) .style("display", "block") .style("pointer-events", "auto") .style("overflow", "visible"); const sliderTrackX0 = 6; const sliderTrackX1 = sliderTrackX0 + sliderWidth; sliderSvg.append("rect") .attr("x", sliderTrackX0).attr("y", 5) .attr("width", sliderWidth).attr("height", 4) .attr("rx", 2).attr("fill", "#ddd"); const sliderThumb = sliderSvg.append("circle") .attr("cy", 7).attr("r", 6).attr("fill", "#888") .style("cursor", "pointer"); wrapper.appendChild(sliderRow); // Chart container. const container = html`

`; // Toolbar: left = save/clear buttons; right = straight/curved radios. // The JR slider sits in an absolutely-positioned row anchored to the // wrapper, so when curved mode is active it overlays the top of the chart // (visually under the radios) without changing the toolbar's height or // the chart's vertical position. const toolbar = html`

`; const btnStyle = "padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;border:1px solid #888;background:#fff;border-radius:4px;"; const leftGroup = html`

`; const saveBtn = html``; const clearBtn = html``; const toolbarStatus = html``; leftGroup.appendChild(saveBtn); leftGroup.appendChild(clearBtn); leftGroup.appendChild(toolbarStatus); const radioRow = html`

`; const radioLabelStyle = "display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none;"; const radioStraight = html` straight`; const radioCurved = html` curved`; radioRow.appendChild(radioStraight); radioRow.appendChild(radioCurved); toolbar.appendChild(leftGroup); toolbar.appendChild(radioRow); wrapper.appendChild(toolbar); // Slider overlay: positioned relative to the wrapper, sitting just below // the toolbar's bottom edge. The wrapper needs position:relative for this // to anchor correctly. Custom SVG matches the old look: light grey track // (#ddd) + medium grey thumb (#888). wrapper.style.position = "relative"; const sliderWidth = 100; const sliderRow = html`

`; const sliderSvg = d3.select(sliderRow).append("svg") .attr("width", sliderWidth + 12) .attr("height", 14) .style("display", "block") .style("pointer-events", "auto") .style("overflow", "visible"); // Track sits with right edge at the svg's right, leaving room for the thumb. const sliderTrackX0 = 6; const sliderTrackX1 = sliderTrackX0 + sliderWidth; sliderSvg.append("rect") .attr("x", sliderTrackX0).attr("y", 5) .attr("width", sliderWidth).attr("height", 4) .attr("rx", 2).attr("fill", "#ddd"); const sliderThumb = sliderSvg.append("circle") .attr("cy", 7).attr("r", 6).attr("fill", "#888") .style("cursor", "pointer"); wrapper.appendChild(sliderRow); const container = html`

`; wrapper.appendChild(container); const svg = d3.select(container).append("svg") .attr("viewBox", `0 0 ${size} ${size}`) .attr("preserveAspectRatio", "xMidYMid meet") .style("width", "100%").style("height", "100%").style("display", "block"); svg.append("polygon") .attr("points", areaPoly.map(p => `${p.x},${p.y}`).join(" ")) .attr("fill", "#f2f2f2"); svg.append("g") .selectAll("line") .data(segments) .join("line") .attr("x1", d => d.p.x).attr("y1", d => d.p.y) .attr("x2", d => d.q.x).attr("y2", d => d.q.y) .attr("stroke", "#888").attr("stroke-width", 1); svg.append("circle") .attr("cx", J.x).attr("cy", J.y).attr("r", 3) .attr("fill", "#888"); const hit = svg.append("rect") .attr("x", 0).attr("y", 0).attr("width", size).attr("height", size) .attr("fill", "transparent"); const pathLayer = svg.append("g").attr("fill", "none"); const hitLayer = svg.append("g").attr("fill", "none"); const markerLayer = svg.append("g"); // --- Path state --- let nextId = 0; const paths = []; if (Array.isArray(initialState)) { for (const entry of initialState) { if (!entry || !entry.a || !entry.b) continue; paths.push({ id: nextId++, rawA: { x: +entry.a.x, y: +entry.a.y }, rawB: { x: +entry.b.x, y: +entry.b.y }, }); } } // segOrders[seg] = { bundle: [...members], riders: [...outer riders] } // - bundle: ee/le halves that own a slot in the bundle (index = rank). // - riders: ae halves arriving from the area; they stack one per slot // starting at rank bundle.length. Riders do NOT count toward the // bundle's perp spacing — bundle members keep their original ranks // regardless of how many riders sit outside them, and the aa-corner // placement excludes riders too. const segOrders = new Map(); segments.forEach(s => segOrders.set(s, { bundle: [], riders: [] })); let curvedMode = true; // JR controls the bezier region around J in curved mode. Bounds depend on // the largest current per-segment offset (the safety floor) so the path's // offset lines actually cross the JR circle. const jrMax = 150; const jrMin = 30; function jrBounds() { let maxOff = 0; for (const seg of segments) { const { bundle, riders } = segOrders.get(seg); const bundleCount = bundle.length; if (bundleCount === 0 && riders.length === 0) continue; // Largest absolute rank on this segment. Each rider occupies its own // slot starting at bundleCount; the outermost rider sits at // bundleCount + riders.length - 1. let maxRank; if (seg.kind === "link") { maxRank = (bundleCount - 1) / 2; } else { maxRank = bundleCount - 1; if (riders.length > 0) maxRank = Math.max(maxRank, bundleCount + riders.length - 1); } maxOff = Math.max(maxOff, Math.abs(maxRank) * bundleSpacing); } const lower = Math.max(jrMin, maxOff + 12); return { lower: Math.min(lower, jrMax), upper: jrMax }; } let jr = jrMax; // initial: max function reclampJr() { const { lower, upper } = jrBounds(); jr = Math.max(lower, Math.min(upper, jr)); } const svgPoint = (event) => { const [x, y] = d3.pointer(event, svg.node()); return { x, y }; }; const endpointR = 8; const clampPt = (p) => ({ x: Math.max(endpointR, Math.min(size - endpointR, p.x)), y: Math.max(endpointR, Math.min(size - endpointR, p.y)), }); function computePath(p) { const a = resolvePoint(p.rawA); const b = resolvePoint(p.rawB); const route = routePath(a, b); return { ...p, a, b, route, color: pathColors[route.klass] }; } // Classify each half of a 2-segment via-J path: // - "bundle": the half travels along a J-incident segment (ee/le sides, // or same-segment "both" entries). Gets a real bundle slot. // - "rider": the half is an ea-style arrival — the incident side of an // ea path coming from the area. Rides at outer+1, stacked. // Non-incident halves of via-J paths don't appear in segOrders at all. // // aa paths are excluded entirely: their corner sits along the bisector // (via maxIncidentEdgeIndex) and they don't snap to any edge, so they // never need a slot on any segment. The skip is at the path level so // they don't even count toward rider stacks. function syncSegOrders(computed) { // For each segment: bundle members and riders desired this frame. const desiredBundle = new Map(); const desiredRiders = new Map(); segments.forEach(s => { desiredBundle.set(s, new Map()); desiredRiders.set(s, new Map()); }); computed.forEach(cp => { // aa paths don't participate in edge bundle indexing at all — both // halves are in the area, the path bends at the bisector corner, // and there's no snap on any segment to push other paths around. if (cp.route.klass === "aa") return; // Same-segment path: ONE bundle slot, not two. if (cp.a.seg && cp.a.seg === cp.b.seg) { desiredBundle.get(cp.a.seg).set(`${cp.id}-both`, { cp, side: "both", other: cp.b.pt, }); return; } // Multi-segment paths. const aInc = cp.a.seg && jIncident.has(cp.a.seg); const bInc = cp.b.seg && jIncident.has(cp.b.seg); for (const side of ["a", "b"]) { const res = side === "a" ? cp.a : cp.b; const oth = side === "a" ? cp.b : cp.a; if (!res.seg) continue; if (!jIncident.has(res.seg)) continue; // non-incident: no slot const key = `${cp.id}-${side}`; const entry = { cp, side, other: oth.pt, }; // If the OTHER half is non-incident (area), this is the ea-style // incident side — it should ride the outside of the bundle, not // own a slot. The rider concept only applies to edges, though: // the link sits outside the area and has a centered bundle, so an // la path's link half is a regular bundle member. const otherInc = side === "a" ? bInc : aInc; if (!otherInc && res.seg.kind === "edge") { desiredRiders.get(res.seg).set(key, entry); } else { desiredBundle.get(res.seg).set(key, entry); } } }); // For each segment: rebuild bundle order via the priority resolver if // membership changed (or no prior order exists); otherwise keep the // existing order so drag-reorders stay sticky. // Process incident edges first, then the link, so rule 1 (no-cross) // sees earlier bundles when looking up the other segment. This is a // single-pass approximation — works well in practice for this layout. const processOrder = [ ...segments.filter(s => s.kind === "edge" && jIncident.has(s)), ...segments.filter(s => s.kind === "link"), ...segments.filter(s => s.kind === "edge" && !jIncident.has(s)), ]; // Helper for ctx.bundleOf — look up another segment's bundle order. // CRITICAL: only return bundles that have been (re)computed THIS FRAME. // Reading the previous frame's bundle would create a feedback loop where // rule 1 perpetuates whatever bootstrap order arose, drowning out the // lower-priority rules' attempts to reorganize. By only seeing neighbors // already processed this frame, rule 1 acts as a one-way consistency // pass: the first segment processed decides via local rules; later // segments enforce non-crossing against earlier ones. const processedThisFrame = new Set(); const bundleOf = (otherSeg) => { if (!processedThisFrame.has(otherSeg)) return null; const o = segOrders.get(otherSeg); return o ? o.bundle : null; }; for (const seg of processOrder) { const wantB = desiredBundle.get(seg); const wantR = desiredRiders.get(seg); // BUNDLE and RIDERS go through the same priority-rule pipeline. The // only difference is which pool they're in (which the rules don't // see — they treat the half-segments the same way). Riders stack at // bundle.length + riderIdx (handled in segRankOf). const orderOpts = { J, segments, areaPoly, bundleOf, jIncident, }; const newBundle = wantB.size === 0 ? [] : orderBundle([...wantB.values()], seg, orderOpts); const newRiders = wantR.size === 0 ? [] : orderBundle([...wantR.values()], seg, orderOpts); segOrders.set(seg, { bundle: newBundle, riders: newRiders }); processedThisFrame.add(seg); } } // link: center-justified; edge: justified into area. // Bundle members get their index as the rank. Riders (snap-endpoint paths // whose other half is in the area — they cross the edge at the snap point // and head straight to the area, never traveling along the edge) each // get their own slot, stacking outward from the bundle starting at // bundle.length. Riders don't count toward perp spacing for paths that // travel along the edge (e.g., aa-corner placement excludes them); the // bundle's perp positions stay computed off `bundle.length` alone. // For same-segment paths, both sides share the "both" entry's rank. function segRankOf(pathId, side, seg) { if (!seg) return 0; const { bundle, riders } = segOrders.get(seg); let idx = bundle.findIndex(e => e.pathId === pathId && e.side === side); if (idx < 0) idx = bundle.findIndex(e => e.pathId === pathId && e.side === "both"); if (idx >= 0) { if (seg.kind === "link") return idx - (bundle.length - 1) / 2; return idx; } // Rider? Each rider stacks at its own slot past the bundle. const riderIdx = riders.findIndex(e => e.pathId === pathId && e.side === side); if (riderIdx >= 0) return bundle.length + riderIdx; return 0; } // Offset endpoint at a snap point: snap_pt + perp * rank * spacing. function offsetAtSnap(res, pathId, side) { if (!res.seg) return res.pt; const r = segRankOf(pathId, side, res.seg); return { x: res.pt.x + res.seg.perp.x * r * bundleSpacing, y: res.pt.y + res.seg.perp.y * r * bundleSpacing, }; } // Intersection of two parametric lines; returns null when ~parallel. function intersect(p1, d1, p2, d2) { const det = d1.x * (-d2.y) - d1.y * (-d2.x); if (Math.abs(det) < 1e-6) return null; const rhsX = p2.x - p1.x, rhsY = p2.y - p1.y; const t = (rhsX * (-d2.y) - rhsY * (-d2.x)) / det; return { x: p1.x + t * d1.x, y: p1.y + t * d1.y }; } // Inward-pointing angle bisector at J between the two J-incident EDGES // (excluding the link). Computed once: layout is static. const aaBisector = (() => { const incidentEdges = segments.filter(s => s.kind === "edge" && jIncident.has(s)); let bx = 0, by = 0; for (const seg of incidentEdges) { const otherEnd = seg.p === J ? seg.q : seg.p; const ox = otherEnd.x - J.x, oy = otherEnd.y - J.y; const len = Math.hypot(ox, oy) || 1; bx -= ox / len; // negate: into the area by -= oy / len; } const blen = Math.hypot(bx, by) || 1; return { x: bx / blen, y: by / blen }; })(); // Largest bundle index used on either J-incident edge. The aa corner sits // at this slot so it lines up with the outermost edge-bundle path. // Riders (ea paths crossing an edge) are excluded: they shouldn't push the // aa corner outward, since they don't affect the corner's adjacent edges. function maxIncidentEdgeIndex() { let m = 0; for (const seg of segments) { if (seg.kind !== "edge" || !jIncident.has(seg)) continue; const { bundle } = segOrders.get(seg); m = Math.max(m, bundle.length - 1); } return Math.max(0, m); } // Single corner where a 2-segment path bends. // aa (both non-incident): J shifted into the area along the bisector // by the max edge rank, so it sits at the same // offset as the outermost edge-attached path. // ee/le (both incident): intersection of the two parallel-shifted lines. // ea/la (one of each): J shifted by the incident side's perpendicular // offset — the incident offset line continues // parallel to the segment until it's "level" // with J, then the non-incident side meets it. function cornerFor(cp) { const aInc = cp.a.seg && jIncident.has(cp.a.seg); const bInc = cp.b.seg && jIncident.has(cp.b.seg); if (!aInc && !bInc) { const k = maxIncidentEdgeIndex(); return { x: J.x + aaBisector.x * k * bundleSpacing, y: J.y + aaBisector.y * k * bundleSpacing, }; } if (aInc !== bInc) { const res = aInc ? cp.a : cp.b; const side = aInc ? "a" : "b"; const r = segRankOf(cp.id, side, res.seg); return { x: J.x + res.seg.perp.x * r * bundleSpacing, y: J.y + res.seg.perp.y * r * bundleSpacing, }; } const oA = offsetAtSnap(cp.a, cp.id, "a"); const oB = offsetAtSnap(cp.b, cp.id, "b"); const dA = { x: J.x - cp.a.pt.x, y: J.y - cp.a.pt.y }; const dB = { x: J.x - cp.b.pt.x, y: J.y - cp.b.pt.y }; const lenA = Math.hypot(dA.x, dA.y) || 1; const lenB = Math.hypot(dB.x, dB.y) || 1; dA.x /= lenA; dA.y /= lenA; dB.x /= lenB; dB.y /= lenB; return intersect(oA, dA, oB, dB) || J; } // For curved mode: bezier across a JR circle centered at the corner. Line // directions come from each side's geometry toward the corner. function bezierFor(cp) { const aInc = cp.a.seg && jIncident.has(cp.a.seg); const bInc = cp.b.seg && jIncident.has(cp.b.seg); // ee/le bezier sits at J; aa/ea/la bezier sits at the path's corner. const center = (aInc && bInc) ? J : cornerFor(cp); const oA = offsetAtSnap(cp.a, cp.id, "a"); const oB = offsetAtSnap(cp.b, cp.id, "b"); // Direction for each side: incident sides go along the segment (toward J, // which is also along the offset line); non-incident sides head straight // at the bezier center. function dirOf(res, offsetPt, isInc) { const ref = isInc ? res.pt : offsetPt; const target = isInc ? J : center; const d = { x: target.x - ref.x, y: target.y - ref.y }; const len = Math.hypot(d.x, d.y) || 1; return { x: d.x / len, y: d.y / len }; } const dA = dirOf(cp.a, oA, aInc); const dB = dirOf(cp.b, oB, bInc); // Cap JR so each offset_snap sits at or outside the JR circle. const halfA = Math.hypot(oA.x - center.x, oA.y - center.y); const halfB = Math.hypot(oB.x - center.x, oB.y - center.y); const effJr = Math.min(jr, halfA, halfB); // Solve |O + t*d - center|² = effJr² for each side; pick the entry crossing. function entry(o, d) { const ux = o.x - center.x, uy = o.y - center.y; const udd = ux * d.x + uy * d.y; const disc = udd * udd - (ux * ux + uy * uy) + effJr * effJr; if (disc < 0) return null; const root = Math.sqrt(disc); const t1 = -udd - root, t2 = -udd + root; const t = t1 >= -1e-6 ? Math.max(0, t1) : (t2 > 0 ? t2 : 0); return { pt: { x: o.x + t * d.x, y: o.y + t * d.y }, t }; } const eA = entry(oA, dA); const eB = entry(oB, dB); if (!eA || !eB) return null; const P0 = eA.pt, P3 = eB.pt; const cosBeta = -dA.x * dB.x - dA.y * dB.y; const beta = Math.acos(Math.max(-1, Math.min(1, cosBeta))); const chord = Math.hypot(P3.x - P0.x, P3.y - P0.y); const cb4 = Math.cos(beta / 4); // Clamp ctrlDist so the bezier handles stay inside the JR circle. const vA = { x: P0.x - center.x, y: P0.y - center.y }; const vB = { x: P3.x - center.x, y: P3.y - center.y }; const projA = Math.abs(vA.x * dA.x + vA.y * dA.y); const projB = Math.abs(vB.x * dB.x + vB.y * dB.y); const ctrlDist = Math.min(chord / (3 * cb4 * cb4), 2 * projA, 2 * projB); const P1 = { x: P0.x + dA.x * ctrlDist, y: P0.y + dA.y * ctrlDist }; const P2 = { x: P3.x + dB.x * ctrlDist, y: P3.y + dB.y * ctrlDist }; return { P0, P1, P2, P3 }; } // Build the visible path d-string. Uses straight corner in straight mode; // bezier across the JR circle in curved mode. function buildD(cp) { const oA = offsetAtSnap(cp.a, cp.id, "a"); const oB = offsetAtSnap(cp.b, cp.id, "b"); const parts = [`M ${cp.a.anchor.x} ${cp.a.anchor.y}`]; if (!samePt(cp.a.anchor, oA)) parts.push(`L ${oA.x} ${oA.y}`); if (cp.route.viaJ) { const bez = curvedMode ? bezierFor(cp) : null; if (bez) { parts.push(`L ${bez.P0.x} ${bez.P0.y}`); parts.push(`C ${bez.P1.x} ${bez.P1.y} ${bez.P2.x} ${bez.P2.y} ${bez.P3.x} ${bez.P3.y}`); } else { const c = cornerFor(cp); parts.push(`L ${c.x} ${c.y}`); } } if (!samePt(cp.b.anchor, oB)) parts.push(`L ${oB.x} ${oB.y}`); parts.push(`L ${cp.b.anchor.x} ${cp.b.anchor.y}`); return parts.join(" "); } function waypointsFor(cp) { // Used by hit-area splitting; always uses the straight corner regardless // of mode (hit strokes are wide enough that the curve mismatch is invisible). const oA = offsetAtSnap(cp.a, cp.id, "a"); const oB = offsetAtSnap(cp.b, cp.id, "b"); const wp = [cp.a.anchor]; if (!samePt(cp.a.anchor, oA)) wp.push(oA); if (cp.route.viaJ) wp.push(cornerFor(cp)); if (!samePt(cp.b.anchor, oB)) wp.push(oB); wp.push(cp.b.anchor); return wp; } function joinWaypoints(wp) { const out = [wp[0]]; for (let i = 1; i < wp.length; i++) { if (!samePt(out[out.length - 1], wp[i])) out.push(wp[i]); } return out.map((p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`)).join(" "); } // Per-half d-strings for hit areas. 2-segment paths split at the corner. function buildHalfDs(cp) { const oA = offsetAtSnap(cp.a, cp.id, "a"); const oB = offsetAtSnap(cp.b, cp.id, "b"); if (!cp.route.viaJ) { return [{ side: "whole", d: joinWaypoints(waypointsFor(cp)) }]; } const corner = cornerFor(cp); const wpA = [cp.a.anchor]; if (!samePt(cp.a.anchor, oA)) wpA.push(oA); wpA.push(corner); const wpB = [corner]; if (!samePt(cp.b.anchor, oB)) wpB.push(oB); wpB.push(cp.b.anchor); return [ { side: "a", d: joinWaypoints(wpA), seg: cp.a.seg }, { side: "b", d: joinWaypoints(wpB), seg: cp.b.seg }, ]; } function render() { const computed = paths.map(computePath); syncSegOrders(computed); reclampJr(); updateSliderInput(); pathLayer.selectAll("path") .data(computed, d => d.id) .join("path") .attr("d", buildD) .attr("stroke", d => d.color) .attr("stroke-width", 4) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .style("pointer-events", "none"); const halves = computed.flatMap(cp => buildHalfDs(cp).map(h => ({ ...h, id: cp.id, color: cp.color, cp })) ); hitLayer.selectAll("path") .data(halves, d => `${d.id}-${d.side}`) .join("path") .attr("d", d => d.d) .attr("stroke", "transparent") .attr("stroke-width", 14) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .style("cursor", "pointer") .on("dblclick", function(event, d) { event.stopPropagation(); const idx = paths.findIndex(p => p.id === d.id); if (idx >= 0) { paths.splice(idx, 1); render(); } }); const endpoints = computed.flatMap(d => [ { id: d.id, end: "a", pt: d.a.anchor, color: d.color }, { id: d.id, end: "b", pt: d.b.anchor, color: d.color }, ]); markerLayer.selectAll("circle.endpoint") .data(endpoints, d => `${d.id}-${d.end}`) .join("circle") .attr("class", "endpoint") .attr("cx", d => d.pt.x).attr("cy", d => d.pt.y) .attr("r", endpointR) .attr("fill", d => d.color) .attr("stroke", "#fff").attr("stroke-width", 1.5) .style("cursor", "grab") .call(d3.drag() .on("start", function(event) { event.sourceEvent.stopPropagation(); d3.select(this).style("cursor", "grabbing"); }) .on("drag", function(event, datum) { const p = clampPt(svgPoint(event)); const path = paths.find(pp => pp.id === datum.id); if (!path) return; if (datum.end === "a") path.rawA = p; else path.rawB = p; render(); }) .on("end", function() { d3.select(this).style("cursor", "grab"); })); // Numeric path-ID labels on top of each endpoint dot. Pointer-events // off so the label doesn't intercept drag — the underlying circle // still receives the mousedown. markerLayer.selectAll("text.endpoint-label") .data(endpoints, d => `${d.id}-${d.end}`) .join("text") .attr("class", "endpoint-label") .attr("x", d => d.pt.x).attr("y", d => d.pt.y) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-size", 9) .attr("font-weight", 700) .attr("fill", "#fff") .style("pointer-events", "none") .style("user-select", "none") .text(d => d.id); } // Drafting: drag on empty space to create a new path. let draft = null, draftStart = null; hit.call(d3.drag() .on("start", function(event) { draftStart = clampPt(svgPoint(event)); draft = { id: nextId++, rawA: draftStart, rawB: draftStart }; paths.push(draft); render(); }) .on("drag", function(event) { if (!draft) return; draft.rawB = clampPt(svgPoint(event)); render(); }) .on("end", function(event) { if (!draft) return; const p = clampPt(svgPoint(event)); if (dist(draftStart, p) < 3) { const idx = paths.indexOf(draft); if (idx >= 0) paths.splice(idx, 1); } else { draft.rawB = p; } draft = null; draftStart = null; render(); })); // --- Toolbar wiring: radio buttons + slider --- // Slider maps thumb cx ↔ jr against the dynamic [lower, upper] from // jrBounds(). Bounds shift as paths come and go, so updateSliderInput() // re-derives the thumb position each render to keep it in sync. // Map jr ↔ thumb cx. Track runs from sliderTrackX0 to sliderTrackX1. function jrToThumbX(value) { const { lower, upper } = jrBounds(); if (upper - lower < 1e-6) return sliderTrackX1; return sliderTrackX0 + ((value - lower) / (upper - lower)) * sliderWidth; } function thumbXToJr(x) { const { lower, upper } = jrBounds(); const cx = Math.max(sliderTrackX0, Math.min(sliderTrackX1, x)); return lower + ((cx - sliderTrackX0) / sliderWidth) * (upper - lower); } function updateSliderInput() { sliderThumb.attr("cx", jrToThumbX(jr)); sliderRow.style.display = curvedMode ? "" : "none"; } sliderSvg.call(d3.drag() .on("start drag", function(event) { const [x] = d3.pointer(event, sliderSvg.node()); jr = thumbXToJr(x); sliderThumb.attr("cx", jrToThumbX(jr)); pathLayer.selectAll("path").attr("d", buildD); })); function updateRadios() { radioStraight.querySelector("input").checked = !curvedMode; radioCurved.querySelector("input").checked = curvedMode; sliderRow.style.display = curvedMode ? "" : "none"; } radioStraight.querySelector("input").addEventListener("change", () => { if (radioStraight.querySelector("input").checked) { curvedMode = false; updateRadios(); render(); } }); radioCurved.querySelector("input").addEventListener("change", () => { if (radioCurved.querySelector("input").checked) { curvedMode = true; updateRadios(); render(); } }); updateRadios(); // --- Toolbar wiring: save/clear buttons --- // "save state" copies a compact JSON list of { a, b } anchor pairs that // can be pasted directly into the `initialState` const at the top of // this cell. "clear" wipes all paths and re-renders. function serializeState() { const round = (n) => Math.round(n * 10) / 10; const items = paths.map(p => ` { a: { x: ${round(p.rawA.x)}, y: ${round(p.rawA.y)} }, b: { x: ${round(p.rawB.x)}, y: ${round(p.rawB.y)} } }` ); return items.length ? `[\n${items.join(",\n")}\n]` : `[]`; } async function copyText(text) { try { await navigator.clipboard.writeText(text); return true; } catch (_) { // Clipboard API failed (insecure context, no permission); fall back. const ta = document.createElement("textarea"); ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0"; document.body.appendChild(ta); ta.select(); let ok = false; try { ok = document.execCommand("copy"); } catch (_) {} document.body.removeChild(ta); return ok; } } saveBtn.addEventListener("click", async () => { const ok = await copyText(serializeState()); toolbarStatus.textContent = ok ? `copied ${paths.length} path${paths.length === 1 ? "" : "s"}` : "copy failed"; setTimeout(() => { toolbarStatus.textContent = ""; }, 1500); }); clearBtn.addEventListener("click", () => { paths.length = 0; nextId = 0; render(); toolbarStatus.textContent = "cleared"; setTimeout(() => { toolbarStatus.textContent = ""; }, 1500); }); // Initial render so initialState (if any) shows up immediately. render(); return wrapper; }36:T2388,// Cell P: Bundle ordering priorities (hierarchical rules). // // Each rule's constraints(paths, ctx) returns [{ outer, inner }, ...] where // `outer` should sit at a higher rank than `inner`. The resolver applies // rules in array order, dropping any constraint that would cycle with // already-accepted ones. // // Half-segments expose only what rules need: // key, pathId, side, otherSeg, otherSide, spokeAngle, otherAngle, // isSnapEndpoint, endpointPos, pathClass // // ctx provides: seg (this segment), segments (all segments at this junction), // J (junction point), areaPoly, bundleOf (lookup another seg's bundle so // rule 1 can read shared-waypoint orderings), jIncident (pre-built set). // // All rules emit the MINIMUM set of constraints that imply the desired // ordering. The resolver builds transitive closure for free via topo sort, // so we don't pay O(n²) where O(n) suffices. bundlePriorities = (() => { // --- shared helpers --- const signedDelta = (d) => { while (d <= -Math.PI) d += 2 * Math.PI; while (d > Math.PI) d -= 2 * Math.PI; return d; }; // Returns -1, 0, or +1 for sin(signed exit delta) — used by rule 2 to // classify which half of the bundle a path belongs in. const signOfSin = (p) => { const d = signedDelta((p.otherAngle ?? 0) - (p.spokeAngle ?? 0)); const s = Math.sin(d); return s > 0 ? 1 : s < 0 ? -1 : 0; }; const cross = (a, b) => a.x * b.y - a.y * b.x; const inwardOf = (s, J) => { const farEnd = s.p === J ? s.q : s.p; const dx = J.x - farEnd.x, dy = J.y - farEnd.y; const len = Math.hypot(dx, dy) || 1; return { x: dx / len, y: dy / len }; }; return [ // Rule 1: Two paths sharing a pair of segments never cross at J. // // For each pair of paths whose other-half is on the SAME other segment, // propagate the order from that other segment to this one. The mapping // depends on bend geometry: +perp on segA and segB may be on the same // side relative to the bundle's travel direction (no inversion), or on // opposite sides (inversion). See sign(perp × travelDir). { name: "no_cross_at_shared_waypoint", constraints(paths, ctx) { const { seg, J, bundleOf } = ctx; if (!seg || !J || !bundleOf) return []; const sideHere = Math.sign(cross(seg.perp, inwardOf(seg, J))); // Group paths by their other-seg. const byOther = new Map(); for (const p of paths) { if (!p.otherSeg) continue; let group = byOther.get(p.otherSeg); if (!group) { group = []; byOther.set(p.otherSeg, group); } group.push(p); } const out = []; for (const [otherSeg, group] of byOther) { if (group.length < 2) continue; const otherOrder = bundleOf(otherSeg); if (!otherOrder) continue; // (pathId, side) -> idx lookup, built once per otherSeg. const idxLookup = new Map(); for (let i = 0; i < otherOrder.length; i++) { const e = otherOrder[i]; idxLookup.set(`${e.pathId}-${e.side}`, i); } const idxFor = (p) => { let i = idxLookup.get(`${p.pathId}-${p.otherSide}`); if (i === undefined) i = idxLookup.get(`${p.pathId}-both`); return i; }; // For the other segment, the path travels OUTWARD (away from J). const outwardOther = inwardOf(otherSeg, J); outwardOther.x = -outwardOther.x; outwardOther.y = -outwardOther.y; const sideOther = Math.sign(cross(otherSeg.perp, outwardOther)); const invert = sideHere !== sideOther; for (let i = 0; i < group.length; i++) { const A = group[i]; const aIdx = idxFor(A); if (aIdx === undefined) continue; for (let j = i + 1; j < group.length; j++) { const B = group[j]; const bIdx = idxFor(B); if (bIdx === undefined) continue; const aOuterOther = aIdx > bIdx; const aOuterHere = invert ? !aOuterOther : aOuterOther; if (aOuterHere) out.push({ outer: A.key, inner: B.key }); else out.push({ outer: B.key, inner: A.key }); } } } return out; }, }, // Rule 2: Class outerness on LINK bundles. // // Edge-bound paths (other half on another J-incident segment, i.e. // `le`/`el`) frame the bundle at its extremes; area-bound paths // (`la`/`al`, including those snapped to a non-J-incident segment) sit // in the middle. // // Per side: on the +perp half (sin > 0), edge-bound paths are MORE // +perp (higher rank) than area-bound. On the -perp half (sin < 0), // edge-bound paths are MORE -perp (lower rank). Opposite-side pairs // are left to rule 3. // // Inert on edges: edge bundles only carry `ee`/`le` members (riders // and aa-corners use separate slot machinery), so partitioning into // edge-bound vs area-bound is degenerate. { name: "class_outerness", constraints(paths, ctx) { if (!ctx.seg || ctx.seg.kind !== "link") return []; const jIncident = ctx.jIncident; const edgePos = [], edgeNeg = [], areaPos = [], areaNeg = []; for (const p of paths) { const s = signOfSin(p); if (s === 0) continue; const edge = !!p.otherSeg && jIncident.has(p.otherSeg); if (edge) (s > 0 ? edgePos : edgeNeg).push(p); else (s > 0 ? areaPos : areaNeg).push(p); } const out = []; for (const E of edgePos) for (const A of areaPos) { out.push({ outer: E.key, inner: A.key }); } for (const A of areaNeg) for (const E of edgeNeg) { out.push({ outer: A.key, inner: E.key }); } return out; }, }, // Rule 3: Angular sort — bundle order matches the order paths split // off at J. // // For each path on this seg, project its exit direction at J onto the // bundle's perp axis (link) or take |signed delta| (edge, one-sided). // Emit a chain of outer→inner constraints in that order; the resolver's // transitive closure gives the full ordering, so we don't emit the // O(n²) pairwise set. { name: "angular_split_order", constraints(paths, ctx) { if (paths.length < 2) return []; const isLink = ctx.seg && ctx.seg.kind === "link"; const keyVal = new Map(); for (const p of paths) { const d = signedDelta((p.otherAngle ?? 0) - (p.spokeAngle ?? 0)); keyVal.set(p, isLink ? Math.sin(d) : Math.abs(d)); } const sorted = paths.slice().sort( (u, v) => keyVal.get(v) - keyVal.get(u) ); const out = new Array(sorted.length - 1); for (let i = 0; i < sorted.length - 1; i++) { out[i] = { outer: sorted[i].key, inner: sorted[i + 1].key }; } return out; }, }, // Rule 4: Snap-endpoint paths (user-placed dot terminates ON this // segment) sit OUTER of any non-snap (transit) members. // // Edge only — on the link, all anchors snap to the link (the link // extends outside the area), so the partition is degenerate. { name: "snap_endpoint_outside", constraints(paths, ctx) { if (!ctx.seg || ctx.seg.kind === "link") return []; const snaps = [], rest = []; for (const p of paths) (p.isSnapEndpoint ? snaps : rest).push(p); if (snaps.length === 0 || rest.length === 0) return []; const out = new Array(snaps.length * rest.length); let k = 0; for (const S of snaps) for (const R of rest) { out[k++] = { outer: S.key, inner: R.key }; } return out; }, }, // Rule 5: Snap-endpoint paths sort by their endpoint's signed perp // projection on this segment. Higher projection → +perp side → outer // slot. Emit as a chain (sort descending, link adjacent). // // Edge only — link ordering is fully determined by exit direction // (rule 3); the dot's offset from the link line is incidental. { name: "snap_endpoint_side", constraints(paths, ctx) { const seg = ctx.seg; if (!seg || seg.kind === "link") return []; const snaps = []; for (const p of paths) { if (!p.isSnapEndpoint || !p.endpointPos) continue; const dx = p.endpointPos.x - seg.p.x; const dy = p.endpointPos.y - seg.p.y; snaps.push({ p, proj: dx * seg.perp.x + dy * seg.perp.y }); } if (snaps.length < 2) return []; snaps.sort((a, b) => b.proj - a.proj); const out = []; for (let i = 0; i < snaps.length - 1; i++) { if (snaps[i].proj > snaps[i + 1].proj + 1e-6) { out.push({ outer: snaps[i].p.key, inner: snaps[i + 1].p.key }); } } return out; }, }, ]; })();37:T10c4,// Cell R: Priority-based bundle order resolver. // // Each rule produces pairwise { outer, inner } constraints. Constraints are // processed in priority order: a later constraint is dropped if it would // create a cycle with already-accepted constraints. The result is a // topological sort of the resulting DAG, with `tieKey` breaking ties. // // Returns Map. The largest rank is the outermost slot; // rank = (m-1)/2 - position_in_sort. resolveBundleOrder = function(halfSegments, rules, ctx = {}) { const m = halfSegments.length; const ranks = new Map(); if (m === 0) return ranks; if (m === 1) { ranks.set(halfSegments[0].key, 0); return ranks; } // adj[outer] = Set of inner-keys reachable via direct edge. // revAdj[inner] = Set of outer-keys with direct edges to inner. const adj = new Map(); const revAdj = new Map(); for (const h of halfSegments) { adj.set(h.key, new Set()); revAdj.set(h.key, new Set()); } // Cycle detection: adding outer -> inner creates a cycle iff `outer` is // already reachable from `inner` along existing edges. function wouldCycle(outer, inner) { if (outer === inner) return true; const stack = [inner]; const seen = new Set(); seen.add(inner); while (stack.length) { const n = stack.pop(); if (n === outer) return true; const next = adj.get(n); if (!next) continue; for (const nx of next) { if (!seen.has(nx)) { seen.add(nx); stack.push(nx); } } } return false; } function addEdge(outer, inner) { const a = adj.get(outer); if (!a) return false; if (a.has(inner)) return true; if (wouldCycle(outer, inner)) return false; a.add(inner); revAdj.get(inner).add(outer); return true; } // Apply rules in priority order. for (const rule of rules) { const cs = rule.constraints(halfSegments, ctx); for (const c of cs) { if (c && c.outer !== c.inner) addEdge(c.outer, c.inner); } } // Tiebreaker: matches rule 3's convention so the "default" ordering when // the partial order leaves siblings unconstrained is the angular sort. // - LINK: largest sin(signed delta) → +perp end first. // - EDGE: largest |signed delta| → outer slot first (gentler bend). const isLink = ctx.seg && ctx.seg.kind === "link"; const tieKey = new Map(); for (const p of halfSegments) { let d = (p.otherAngle ?? 0) - (p.spokeAngle ?? 0); while (d <= -Math.PI) d += 2 * Math.PI; while (d > Math.PI) d -= 2 * Math.PI; tieKey.set(p.key, isLink ? Math.sin(d) : Math.abs(d)); } const tieBetter = (a, b) => tieKey.get(b) - tieKey.get(a); // descending // Kahn's algorithm. Keep `ready` as an array; on each iteration find the // largest-tieKey element with a single linear scan instead of a full sort. // For typical bundle sizes (≤20) this is faster than repeated sort calls // and faster than maintaining a binary heap. const inDeg = new Map(); const ready = []; for (const p of halfSegments) { const d = revAdj.get(p.key).size; inDeg.set(p.key, d); if (d === 0) ready.push(p.key); } const sorted = []; while (ready.length) { // Find argmax of tieKey in ready (single linear scan). let bestIdx = 0; for (let i = 1; i < ready.length; i++) { if (tieBetter(ready[i], ready[bestIdx]) < 0) bestIdx = i; } const next = ready[bestIdx]; // O(1) remove: swap with last, then pop. ready[bestIdx] = ready[ready.length - 1]; ready.pop(); sorted.push(next); for (const child of adj.get(next)) { const d = inDeg.get(child) - 1; inDeg.set(child, d); if (d === 0) ready.push(child); } } // Safety: if a cycle slipped through (it shouldn't, given wouldCycle), // append the remainder in tieKey order. if (sorted.length < m) { const placed = new Set(sorted); const rest = halfSegments .filter(p => !placed.has(p.key)) .sort((a, b) => tieKey.get(b.key) - tieKey.get(a.key)) .map(p => p.key); sorted.push(...rest); } // Position 0 → highest rank; position m-1 → lowest. const mid = (m - 1) / 2; for (let i = 0; i < sorted.length; i++) { ranks.set(sorted[i], mid - i); } return ranks; };38:Tc51,// Cell B: Bundle ordering driver. // // Public API: // orderBundle(members, seg, options) -> [{ pathId, side }, ...] // // members: array of { cp, side, other } where // cp — the computed path object (has .a, .b, .id, .route); // side — "a" | "b" | "both"; which half of cp belongs to `seg`'s pool; // other — oth.pt (the other half's snap/anchor point). // seg: the segment whose bundle we're ordering. // options: { J, segments, areaPoly, bundleOf, jIncident }. // // Returns the bundle order (idx 0 = innermost; idx m-1 = outermost). // // All consumers — bundle members on either edges or links, riders on edges, // future "riders" on links if we ever add them — go through this one entry // point. The per-half enrichment that rules consume is built here, so // rules' input shape is private to this module. // // Depends on cell P (bundlePriorities) and cell R (resolveBundleOrder). orderBundle = (() => { // Build the half-segment object the priority rules consume. Only fields // rules actually read are populated. const buildHalfSegment = (cp, side, other, seg, spokeAngle, J, jIncident) => { const res = side === "b" ? cp.b : cp.a; const oth = side === "b" ? cp.a : cp.b; // Outgoing direction at J: // - other half on a different J-incident segment: spoke angle of // that segment (the direction the path heads after bending at J); // - other half on the same segment (no J bend): snap-to-other; // - otherwise (area or non-J-incident segment): angle from J to // oth.pt (independent of this seg's snap location). let otherAngle; if (oth.seg && jIncident.has(oth.seg) && oth.seg !== seg) { const otherFarEnd = oth.seg.p === J ? oth.seg.q : oth.seg.p; otherAngle = Math.atan2(otherFarEnd.y - J.y, otherFarEnd.x - J.x); } else if (oth.seg === seg) { otherAngle = Math.atan2(other.y - res.pt.y, other.x - res.pt.x); } else { otherAngle = Math.atan2(other.y - J.y, other.x - J.x); } const isSnapEndpoint = res.type !== "area"; return { key: `${cp.id}-${side}`, pathId: cp.id, side, otherSeg: oth.seg || null, otherSide: side === "a" ? "b" : side === "b" ? "a" : "both", spokeAngle, otherAngle, isSnapEndpoint, endpointPos: isSnapEndpoint ? res.anchor : null, pathClass: cp.route.klass, }; }; return function orderBundle(members, seg, options) { if (!members || members.length === 0) return []; const { J, segments, areaPoly, bundleOf, jIncident } = options; const farEnd = seg.p === J ? seg.q : seg.p; const spokeAngle = Math.atan2(farEnd.y - J.y, farEnd.x - J.x); const halfSegments = members.map(({ cp, side, other }) => buildHalfSegment(cp, side, other, seg, spokeAngle, J, jIncident) ); const ranks = resolveBundleOrder(halfSegments, bundlePriorities, { seg, segments, J, areaPoly, bundleOf, jIncident, }); halfSegments.sort((u, v) => ranks.get(u.key) - ranks.get(v.key)); return halfSegments.map(hs => ({ pathId: hs.pathId, side: hs.side })); }; })();39:T60c,Priorities in strictly lexicographical order: 1. **Shared-waypoint non-crossing.**
When two paths share both J-incident segments (so they bend through J together), their order on one segment determines their order on the other. Whether the perp side stays the same or flips across the bend is decided by the geometry of the two segments. 2. **Link bundles separate by class.**
On the link, `le`/`el` paths (those that bend at J onto another J-incident segment) frame the bundle at its two extremes; `la`/`al` paths (those that continue into the area) sit in the middle. Within each +perp / -perp half, edge-bound paths are more extreme than area-bound paths. (Inert on edges.) 3. **Angular split order.**
Paths sort by the direction they leave J: - on a link, by sin(signed delta from spoke) — projecting the exit direction onto the perp axis, so paths exiting near the spoke axis sit in the middle of the bundle and paths exiting perpendicular to the spoke sit at the extremes; - on an edge, by |signed delta from spoke| — gentler bends outside, sharper bends inside. 4. **Snap-endpoint paths sit on the outside of the bundle.**
Edges only. A path whose user-placed endpoint terminates on this segment is OUTER of any "transit" path passing through. 5. **Snap-endpoint paths sort by endpoint's signed perp projection.**
Edges only. Higher projection (further +perp) → outer slot. Decides the order among multiple snap endpoints on the same segment.3a:Te21,// Reusable across nav-mesh, pathfinding, and any other geometric work. geometry = { // Project (px, py) onto segment ab. // Returns { t, fx, fy, d2, len2 } where t is clamped to [0, 1]. function projectToSegment(px, py, a, b) { const vx = b.x - a.x, vy = b.y - a.y; const len2 = vx * vx + vy * vy; if (len2 < 1e-12) { const dx = a.x - px, dy = a.y - py; return { t: 0, fx: a.x, fy: a.y, d2: dx * dx + dy * dy, len2: 0 }; } let t = ((px - a.x) * vx + (py - a.y) * vy) / len2; t = Math.max(0, Math.min(1, t)); const fx = a.x + t * vx, fy = a.y + t * vy; const dx = fx - px, dy = fy - py; return { t, fx, fy, d2: dx * dx + dy * dy, len2 }; } // Strict-interior crossing of segments p1->p2 and p3->p4. // Returns { t, u, x, y } where 0 < t < 1 and 0 < u < 1, else null. function segmentIntersection(p1, p2, p3, p4, eps = 1e-6) { const x1 = p1.x, y1 = p1.y, x2 = p2.x, y2 = p2.y; const x3 = p3.x, y3 = p3.y, x4 = p4.x, y4 = p4.y; const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4); if (Math.abs(denom) < 1e-12) return null; const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom; const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom; if (t <= eps || t >= 1 - eps || u <= eps || u >= 1 - eps) return null; return { t, u, x: x1 + t * (x2 - x1), y: y1 + t * (y2 - y1) }; } // Ray-casting point-in-ring test. `ring` is an array of {x, y}. function pointInRing(x, y, ring) { let inside = false; const n = ring.length; for (let i = 0, j = n - 1; i < n; j = i++) { const xi = ring[i].x, yi = ring[i].y; const xj = ring[j].x, yj = ring[j].y; const intersects = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / ((yj - yi) || 1e-12) + xi); if (intersects) inside = !inside; } return inside; } // Signed area of a ring of {x, y}. Negative = CW in screen coords (y down). function signedArea(ring) { let s = 0; for (let i = 0; i < ring.length; i++) { const p1 = ring[i]; const p2 = ring[(i + 1) % ring.length]; s += (p2.x - p1.x) * (p2.y + p1.y); } return s / 2; } // Canonical key for a ring of comparable ids (handles rotation + reversal). function canonicalRingKey(ringIds) { const n = ringIds.length; let minIdx = 0; for (let i = 1; i < n; i++) if (ringIds[i] < ringIds[minIdx]) minIdx = i; const forward = [], backward = []; for (let i = 0; i < n; i++) { forward.push(ringIds[(minIdx + i) % n]); backward.push(ringIds[(minIdx - i + n) % n]); } const f = forward.join(","); const b = backward.join(","); return f < b ? f : b; } // Pick a small-offset point strictly inside a ring of {x, y}. // Tries perpendicular offsets of each edge midpoint until one lands inside. function interiorPointOfRing(ring, probe = 0.5) { const n = ring.length; for (let i = 0; i < n; i++) { const a = ring[i], b = ring[(i + 1) % n]; const mx = (a.x + b.x) / 2; const my = (a.y + b.y) / 2; const dx = b.x - a.x, dy = b.y - a.y; const len = Math.hypot(dx, dy) || 1; const nx = -dy / len, ny = dx / len; const p1 = { x: mx + nx * probe, y: my + ny * probe }; const p2 = { x: mx - nx * probe, y: my - ny * probe }; if (pointInRing(p1.x, p1.y, ring)) return p1; if (pointInRing(p2.x, p2.y, ring)) return p2; } return null; } return { projectToSegment, segmentIntersection, pointInRing, signedArea, canonicalRingKey, interiorPointOfRing }; }3b:T28e7,// Pure function. Given user points + links (the authored graph), and an // optional set of disabled face stable keys, returns a derived structure: // - derivedPoints / derivedLinks (link crossings split with virtual points) // - faces (bounded faces, each tagged isArea/depth/filled) // - clusters (face groups sharing edges, with fill rings) // - interiorEdges (edge keys that lie inside the walkable area) // - helpers (dPointById, etc.) for downstream consumers // // Inputs: // points: [{ id, x, y }] // links: [{ id, a, b }] // a, b are point ids // disabledFaceKeys: Set // stable keys to suppress from fill // // Reusable for: the editor, a map-based water-way mesh, anything that needs // "given a 1D graph, what are the walkable polygons?". buildNavMesh = function buildNavMesh(points, links, disabledFaceKeys = new Set()) { const { projectToSegment, segmentIntersection, pointInRing, signedArea, canonicalRingKey, interiorPointOfRing } = geometry; // ---------- Step 1: derived graph (split crossings with virtual points) ---------- const derivedPoints = points.map(p => ({ id: "u" + p.id, x: p.x, y: p.y, virtual: false, userId: p.id })); const virtualPoints = []; let vCounter = 0; function getOrCreateVirtual(x, y) { for (const vp of virtualPoints) { if (Math.abs(vp.x - x) < 1e-3 && Math.abs(vp.y - y) < 1e-3) return vp.id; } for (const up of derivedPoints) { if (!up.virtual && Math.abs(up.x - x) < 1e-3 && Math.abs(up.y - y) < 1e-3) { return up.id; } } const id = "v" + (vCounter++); virtualPoints.push({ id, x, y }); return id; } const linkSplits = new Map(); links.forEach(l => linkSplits.set(l.id, [])); for (let i = 0; i < links.length; i++) { const li = links[i]; const pi1 = points.find(p => p.id === li.a); const pi2 = points.find(p => p.id === li.b); if (!pi1 || !pi2) continue; for (let j = i + 1; j < links.length; j++) { const lj = links[j]; if (lj.a === li.a || lj.a === li.b || lj.b === li.a || lj.b === li.b) continue; const pj1 = points.find(p => p.id === lj.a); const pj2 = points.find(p => p.id === lj.b); if (!pj1 || !pj2) continue; const x = segmentIntersection(pi1, pi2, pj1, pj2); if (!x) continue; const vid = getOrCreateVirtual(x.x, x.y); if (vid.startsWith("v") && !derivedPoints.find(p => p.id === vid)) { derivedPoints.push({ id: vid, x: x.x, y: x.y, virtual: true }); } linkSplits.get(li.id).push({ t: x.t, id: vid }); linkSplits.get(lj.id).push({ t: x.u, id: vid }); } } const derivedLinks = []; let dlIdCounter = 0; const EPS = 1e-6; links.forEach(l => { const splits = (linkSplits.get(l.id) || []).slice().sort((a, b) => a.t - b.t); const sequence = ["u" + l.a]; let lastT = 0; splits.forEach(s => { if (s.t - lastT < EPS) return; sequence.push(s.id); lastT = s.t; }); sequence.push("u" + l.b); for (let i = 0; i < sequence.length - 1; i++) { const a = sequence[i], b = sequence[i + 1]; if (a === b) continue; derivedLinks.push({ id: "d" + (dlIdCounter++), a, b, sourceLinkId: l.id }); } }); const derivedPointById = new Map(); derivedPoints.forEach(p => derivedPointById.set(p.id, p)); const dPointById = id => derivedPointById.get(id); // ---------- Step 2: planar face traversal ---------- const neighbors = new Map(); derivedPoints.forEach(p => neighbors.set(p.id, [])); derivedLinks.forEach(l => { if (!neighbors.has(l.a)) neighbors.set(l.a, []); if (!neighbors.has(l.b)) neighbors.set(l.b, []); neighbors.get(l.a).push(l.b); neighbors.get(l.b).push(l.a); }); const sortedNeighbors = new Map(); neighbors.forEach((nbrs, nid) => { const p = dPointById(nid); if (!p) { sortedNeighbors.set(nid, []); return; } const arr = nbrs.slice(); const angles = new Map(); arr.forEach(n => { const np = dPointById(n); if (np) angles.set(n, Math.atan2(np.y - p.y, np.x - p.x)); }); arr.sort((x, y) => angles.get(x) - angles.get(y)); sortedNeighbors.set(nid, arr); }); function nextHalfEdge(from, to) { const nbrs = sortedNeighbors.get(to); if (!nbrs || nbrs.length === 0) return null; const idx = nbrs.indexOf(from); if (idx === -1) return null; return nbrs[(idx - 1 + nbrs.length) % nbrs.length]; } function ringToXY(ring) { return ring.map(id => { const p = dPointById(id); return p ? { x: p.x, y: p.y } : null; }).filter(Boolean); } const visited = new Set(); const allFaces = []; derivedLinks.forEach(l => { [[l.a, l.b], [l.b, l.a]].forEach(([from, to]) => { if (visited.has(from + "->" + to)) return; const ring = []; let curFrom = from, curTo = to; let safety = 0, closed = false; while (safety++ < 2000) { visited.add(curFrom + "->" + curTo); ring.push(curFrom); const nxt = nextHalfEdge(curFrom, curTo); if (nxt == null) break; if (curTo === from && nxt === to) { closed = true; break; } curFrom = curTo; curTo = nxt; } if (closed && ring.length >= 3) allFaces.push({ ring }); }); }); // Keep only bounded (CW in screen coords = negative signed area) const bounded = allFaces.filter(f => signedArea(ringToXY(f.ring)) < 0); // Dedupe by canonical ring key const seen = new Set(); const faces = []; bounded.forEach(f => { const key = canonicalRingKey(f.ring); if (seen.has(key)) return; seen.add(key); faces.push({ ring: f.ring, key }); }); // Interior point per face faces.forEach(f => { f.interiorPoint = interiorPointOfRing(ringToXY(f.ring)); }); // Depth + isArea via ring-nesting faces.forEach(f => { const p = f.interiorPoint; if (!p) { f.depth = -1; f.isArea = false; return; } let depth = 0; for (const other of faces) { if (other === f) continue; if (pointInRing(p.x, p.y, ringToXY(other.ring))) depth++; } f.depth = depth; f.isArea = (depth % 2) === 0; }); // Stable key (user point IDs along ring), disabled flag, filled flag faces.forEach(f => { const userIds = new Set(); f.ring.forEach(pid => { const dp = dPointById(pid); if (dp && !dp.virtual && dp.userId != null) userIds.add(dp.userId); }); f.stableKey = [...userIds].sort((a, b) => a - b).join(",") + ":" + f.ring.length; f.disabled = disabledFaceKeys.has(f.stableKey); f.filled = f.isArea && !f.disabled; }); // Parent face (deepest containing face) faces.forEach((f, fi) => { if (!f.interiorPoint) { f.parentFaceIdx = -1; return; } let bestIdx = -1, bestDepth = -1; for (let j = 0; j < faces.length; j++) { if (j === fi) continue; if (!pointInRing(f.interiorPoint.x, f.interiorPoint.y, ringToXY(faces[j].ring))) continue; if (faces[j].depth > bestDepth) { bestDepth = faces[j].depth; bestIdx = j; } } f.parentFaceIdx = bestIdx; }); // ---------- Step 3: deepest-face-wins walkability test ---------- function pointInsideAnyFace(x, y) { let bestIdx = -1, bestDepth = -1; for (let i = 0; i < faces.length; i++) { const f = faces[i]; if (!pointInRing(x, y, ringToXY(f.ring))) continue; if (f.depth > bestDepth) { bestDepth = f.depth; bestIdx = i; } } if (bestIdx === -1) return false; return faces[bestIdx].filled === true; } // ---------- Step 4: clusters (face groups by shared edges + hole containment) ---------- function edgeKeyU(a, b) { return a < b ? a + "|" + b : b + "|" + a; } const edgeToFaces = new Map(); faces.forEach((f, fi) => { const r = f.ring; for (let i = 0; i < r.length; i++) { const a = r[i], b = r[(i + 1) % r.length]; const k = edgeKeyU(a, b); if (!edgeToFaces.has(k)) edgeToFaces.set(k, []); edgeToFaces.get(k).push(fi); } }); const parent = faces.map((_, i) => i); function find(i) { while (parent[i] !== i) { parent[i] = parent[parent[i]]; i = parent[i]; } return i; } function union(i, j) { const ri = find(i), rj = find(j); if (ri !== rj) parent[ri] = rj; } edgeToFaces.forEach(list => { for (let i = 1; i < list.length; i++) union(list[0], list[i]); }); faces.forEach((f, fi) => { if (f.isArea || !f.interiorPoint) return; const p = f.interiorPoint; for (let j = 0; j < faces.length; j++) { if (j === fi) continue; const af = faces[j]; if (!af.isArea) continue; if (pointInRing(p.x, p.y, ringToXY(af.ring))) { union(fi, j); break; } } }); const clusterMap = new Map(); faces.forEach((_, i) => { const r = find(i); if (!clusterMap.has(r)) clusterMap.set(r, []); clusterMap.get(r).push(i); }); const clusters = []; clusterMap.forEach((faceIdxs, root) => { const rings = []; const clusterFaces = []; faceIdxs.forEach(fi => { const face = faces[fi]; const parentFilled = face.parentFaceIdx === -1 ? false : faces[face.parentFaceIdx].filled; if (face.filled !== parentFilled) rings.push(face.ring); clusterFaces.push({ faceIdx: fi, stableKey: face.stableKey, interiorPoint: face.interiorPoint, isArea: face.isArea, disabled: face.disabled, ring: face.ring, }); }); clusters.push({ rings, faces: clusterFaces, key: "c" + root + ":" + clusterFaces.map(cf => cf.stableKey).sort().join("__"), }); }); // ---------- Step 5: interior edges (both sides walkable at midpoint) ---------- const interiorEdges = new Set(); const PROBE = 0.5; derivedLinks.forEach(l => { const pa = dPointById(l.a), pb = dPointById(l.b); if (!pa || !pb) return; const mx = (pa.x + pb.x) / 2; const my = (pa.y + pb.y) / 2; const dx = pb.x - pa.x, dy = pb.y - pa.y; const len = Math.hypot(dx, dy) || 1; const nx = -dy / len, ny = dx / len; if (pointInsideAnyFace(mx + nx * PROBE, my + ny * PROBE) && pointInsideAnyFace(mx - nx * PROBE, my - ny * PROBE)) { interiorEdges.add(edgeKeyU(l.a, l.b)); } }); return { derivedPoints, derivedLinks, dPointById, faces, clusters, interiorEdges, pointInsideAnyFace, edgeKeyU, ringToXY, }; }3c:T4f91,// Pure functions. Given a nav mesh (from buildNavMesh) and start/end points, // returns a polyline of waypoints. Each waypoint carries an `id` so // downstream consumers can identify which mesh node (or synthetic // snap/endpoint node) it corresponds to without proximity matching. // // Waypoint shape: { x, y, id, onLinkId } — unchanged from prior version. // // PERFORMANCE CHANGES in this version: // 1. routeWaypoints is MEMOIZED per mesh (keyed by exact start/end // coordinates) when using the default Euclidean distance. The // pipeline calls routeWaypoints for the same route from // buildDecisionGraph, buildJunctionClassification, and // combinedPathNetwork — previously 3+ full Dijkstra runs per // route. Now 1. The cached waypoint array is shared: treat it // as immutable downstream (all current consumers only read it). // 2. getCoreGraph now also precomputes a symmetric weighted // adjacency list (Euclidean weights) once per mesh, so // shortestPathOnMesh no longer rebuilds the full O(E) adjacency // (with fresh Math.hypot calls) on every call. // 3. Dijkstra uses a binary min-heap with early exit at the target // instead of the O(n²) linear min-scan. // // Cache invalidation: caches live on the mesh object via Symbols, so a // rebuilt mesh (new object from buildNavMesh) starts clean. If you ever // mutate a mesh in place, delete mesh[Symbol.for("pathfinding.waypointCache")] // along with the core-graph / spatial-index symbols. pathfinding = { const { projectToSegment, pointInRing } = geometry; const euclideanDistance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y); const CORE_GRAPH = Symbol.for("pathfinding.coreGraph"); const SPATIAL_INDEX = Symbol.for("pathfinding.spatialIndex"); const WAYPOINT_CACHE = Symbol.for("pathfinding.waypointCache"); // Tolerance for "snap landed at a mesh vertex". Matches the classifier's // VERTEX_SNAP_TOL — when changed, consider updating downstream code too. const VERTEX_SNAP_TOL = 0.5; const VERTEX_SNAP_TOL2 = VERTEX_SNAP_TOL * VERTEX_SNAP_TOL; // Same quantization the classifier and decision graph use, so synthetic // ids generated here align with downstream key schemes when needed. const POS_QUANTUM = 10; function posKey(x, y) { return Math.round(x * POS_QUANTUM) + "," + Math.round(y * POS_QUANTUM); } // ---- Spatial grid index ---- // Built per mesh, attached via SPATIAL_INDEX symbol. Grid cells are // square in mesh (Mercator-pixel) space. function buildSpatialIndex(mesh) { const links = mesh.derivedLinks; const faces = mesh.faces; let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; for (const p of mesh.derivedPoints) { if (p.x < minX) minX = p.x; if (p.x > maxX) maxX = p.x; if (p.y < minY) minY = p.y; if (p.y > maxY) maxY = p.y; } if (!isFinite(minX)) { return { empty: true }; } const pad = Math.max((maxX - minX), (maxY - minY)) * 0.01 + 1; minX -= pad; minY -= pad; maxX += pad; maxY += pad; const targetCells = Math.max(4, Math.min(64, Math.round(Math.sqrt(links.length)))); const cellSize = Math.max( (maxX - minX) / targetCells, (maxY - minY) / targetCells, 1e-6 ); const nx = Math.max(1, Math.ceil((maxX - minX) / cellSize)); const ny = Math.max(1, Math.ceil((maxY - minY) / cellSize)); function cellXY(x, y) { const ix = Math.max(0, Math.min(nx - 1, Math.floor((x - minX) / cellSize))); const iy = Math.max(0, Math.min(ny - 1, Math.floor((y - minY) / cellSize))); return [ix, iy]; } const linkCells = new Array(nx * ny); const faceCells = new Array(nx * ny); for (let i = 0; i < nx * ny; i++) { linkCells[i] = null; faceCells[i] = null; } for (let li = 0; li < links.length; li++) { const l = links[li]; const a = mesh.dPointById(l.a), b = mesh.dPointById(l.b); if (!a || !b) continue; const [ax, ay] = cellXY(a.x, a.y); const [bx, by] = cellXY(b.x, b.y); const lo_x = Math.min(ax, bx), hi_x = Math.max(ax, bx); const lo_y = Math.min(ay, by), hi_y = Math.max(ay, by); for (let cy = lo_y; cy <= hi_y; cy++) { for (let cx = lo_x; cx <= hi_x; cx++) { const k = cy * nx + cx; if (!linkCells[k]) linkCells[k] = []; linkCells[k].push(li); } } } for (let fi = 0; fi < faces.length; fi++) { const f = faces[fi]; let fxmin = Infinity, fymin = Infinity, fxmax = -Infinity, fymax = -Infinity; for (const pid of f.ring) { const dp = mesh.dPointById(pid); if (!dp) continue; if (dp.x < fxmin) fxmin = dp.x; if (dp.x > fxmax) fxmax = dp.x; if (dp.y < fymin) fymin = dp.y; if (dp.y > fymax) fymax = dp.y; } if (!isFinite(fxmin)) continue; const [lx, ly] = cellXY(fxmin, fymin); const [hx, hy] = cellXY(fxmax, fymax); for (let cy = ly; cy <= hy; cy++) { for (let cx = lx; cx <= hx; cx++) { const k = cy * nx + cx; if (!faceCells[k]) faceCells[k] = []; faceCells[k].push(fi); } } } const linkEndpoints = new Array(links.length); for (let li = 0; li < links.length; li++) { const l = links[li]; const a = mesh.dPointById(l.a), b = mesh.dPointById(l.b); if (!a || !b) { linkEndpoints[li] = null; continue; } linkEndpoints[li] = { ax: a.x, ay: a.y, bx: b.x, by: b.y }; } const faceRings = new Array(faces.length); for (let fi = 0; fi < faces.length; fi++) { faceRings[fi] = mesh.ringToXY(faces[fi].ring); } return { empty: false, nx, ny, minX, minY, cellSize, linkCells, faceCells, linkEndpoints, faceRings, cellXY, }; } function getSpatialIndex(mesh) { if (mesh[SPATIAL_INDEX]) return mesh[SPATIAL_INDEX]; const idx = buildSpatialIndex(mesh); mesh[SPATIAL_INDEX] = idx; return idx; } function linksNearSegment(idx, p1, p2, out) { out.clear(); if (idx.empty) return null; const { nx, ny, minX, minY, cellSize, linkCells } = idx; const ax = Math.max(0, Math.min(nx - 1, Math.floor((p1.x - minX) / cellSize))); const ay = Math.max(0, Math.min(ny - 1, Math.floor((p1.y - minY) / cellSize))); const bx = Math.max(0, Math.min(nx - 1, Math.floor((p2.x - minX) / cellSize))); const by = Math.max(0, Math.min(ny - 1, Math.floor((p2.y - minY) / cellSize))); const lo_x = Math.min(ax, bx), hi_x = Math.max(ax, bx); const lo_y = Math.min(ay, by), hi_y = Math.max(ay, by); for (let cy = lo_y; cy <= hi_y; cy++) { for (let cx = lo_x; cx <= hi_x; cx++) { const bucket = linkCells[cy * nx + cx]; if (!bucket) continue; for (let k = 0; k < bucket.length; k++) out.add(bucket[k]); } } return out; } const _linkScratch = new Set(); function pointInWalkableArea(x, y, mesh, idx) { if (idx.empty) return mesh.pointInsideAnyFace(x, y); const { nx, ny, minX, minY, cellSize, faceCells, faceRings } = idx; const ix = Math.max(0, Math.min(nx - 1, Math.floor((x - minX) / cellSize))); const iy = Math.max(0, Math.min(ny - 1, Math.floor((y - minY) / cellSize))); const bucket = faceCells[iy * nx + ix]; if (!bucket) return false; let bestDepth = -1, bestFilled = false; for (let k = 0; k < bucket.length; k++) { const fi = bucket[k]; const f = mesh.faces[fi]; if (!pointInRing(x, y, faceRings[fi])) continue; if (f.depth > bestDepth) { bestDepth = f.depth; bestFilled = f.filled === true; } } return bestFilled; } // Find the nearest derived mesh vertex to (x, y), within VERTEX_SNAP_TOL. function nearestDerivedVertexId(x, y, mesh) { let bestId = null, bestD2 = VERTEX_SNAP_TOL2; for (const dp of mesh.derivedPoints) { const dx = dp.x - x, dy = dp.y - y; const d2 = dx * dx + dy * dy; if (d2 <= bestD2) { bestD2 = d2; bestId = dp.id; } } return bestId; } // ---- Snap (unchanged behavior) ---- function snapToNavmesh(x, y, mesh) { const idx = getSpatialIndex(mesh); if (pointInWalkableArea(x, y, mesh, idx)) { return { x, y, vertexId: nearestDerivedVertexId(x, y, mesh), onLinkId: null }; } let best = null, bestD2 = Infinity, bestVertexId = null, bestLinkId = null; for (const p of mesh.derivedPoints) { const dx = p.x - x, dy = p.y - y; const d2 = dx * dx + dy * dy; if (d2 < bestD2) { bestD2 = d2; best = { x: p.x, y: p.y }; bestVertexId = p.id; bestLinkId = null; } } for (const l of mesh.derivedLinks) { const a = mesh.dPointById(l.a), b = mesh.dPointById(l.b); if (!a || !b) continue; const r = projectToSegment(x, y, a, b); if (r.len2 === 0) continue; if (r.d2 < bestD2) { bestD2 = r.d2; best = { x: r.fx, y: r.fy }; const da = (r.fx - a.x) * (r.fx - a.x) + (r.fy - a.y) * (r.fy - a.y); const db = (r.fx - b.x) * (r.fx - b.x) + (r.fy - b.y) * (r.fy - b.y); if (da <= VERTEX_SNAP_TOL2) { bestVertexId = l.a; bestLinkId = null; } else if (db <= VERTEX_SNAP_TOL2) { bestVertexId = l.b; bestLinkId = null; } else { bestVertexId = null; bestLinkId = l.id; } } } if (!best) return { x, y, vertexId: null, onLinkId: null }; return { x: best.x, y: best.y, vertexId: bestVertexId, onLinkId: bestLinkId }; } function pointOnAnyLinkIndexed(x, y, mesh, idx, tol = 0.5) { if (idx.empty) { const t2 = tol * tol; for (const l of mesh.derivedLinks) { const a = mesh.dPointById(l.a), b = mesh.dPointById(l.b); if (!a || !b) continue; const r = projectToSegment(x, y, a, b); if (r.len2 === 0) continue; if (r.d2 <= t2) return true; } return false; } const { nx, ny, minX, minY, cellSize, linkCells, linkEndpoints } = idx; const ix = Math.max(0, Math.min(nx - 1, Math.floor((x - minX) / cellSize))); const iy = Math.max(0, Math.min(ny - 1, Math.floor((y - minY) / cellSize))); const bucket = linkCells[iy * nx + ix]; if (!bucket) return false; const t2 = tol * tol; for (let k = 0; k < bucket.length; k++) { const le = linkEndpoints[bucket[k]]; if (!le) continue; const r = projectToSegment(x, y, { x: le.ax, y: le.ay }, { x: le.bx, y: le.by }); if (r.len2 === 0) continue; if (r.d2 <= t2) return true; } return false; } function isWalkable(p1, p2, mesh) { const dx = p2.x - p1.x, dy = p2.y - p1.y; if (Math.hypot(dx, dy) < 1e-9) return true; const idx = getSpatialIndex(mesh); linksNearSegment(idx, p1, p2, _linkScratch); const ts = [0, 1]; const EPS = 1e-9; if (idx.empty) { for (const l of mesh.derivedLinks) { const a = mesh.dPointById(l.a), b = mesh.dPointById(l.b); if (!a || !b) continue; const denom = (p1.x - p2.x) * (a.y - b.y) - (p1.y - p2.y) * (a.x - b.x); if (Math.abs(denom) < 1e-12) continue; const t = ((p1.x - a.x) * (a.y - b.y) - (p1.y - a.y) * (a.x - b.x)) / denom; const u = -((p1.x - p2.x) * (p1.y - a.y) - (p1.y - p2.y) * (p1.x - a.x)) / denom; if (t > -EPS && t < 1 + EPS && u > -EPS && u < 1 + EPS) { ts.push(Math.max(0, Math.min(1, t))); } } } else { const { linkEndpoints } = idx; for (const li of _linkScratch) { const le = linkEndpoints[li]; if (!le) continue; const denom = (p1.x - p2.x) * (le.ay - le.by) - (p1.y - p2.y) * (le.ax - le.bx); if (Math.abs(denom) < 1e-12) continue; const t = ((p1.x - le.ax) * (le.ay - le.by) - (p1.y - le.ay) * (le.ax - le.bx)) / denom; const u = -((p1.x - p2.x) * (p1.y - le.ay) - (p1.y - p2.y) * (p1.x - le.ax)) / denom; if (t > -EPS && t < 1 + EPS && u > -EPS && u < 1 + EPS) { ts.push(Math.max(0, Math.min(1, t))); } } } ts.sort((a, b) => a - b); for (let i = 0; i < ts.length - 1; i++) { if (ts[i + 1] - ts[i] < 1e-6) continue; const tm = (ts[i] + ts[i + 1]) / 2; const mx = p1.x + tm * dx; const my = p1.y + tm * dy; if (pointInWalkableArea(mx, my, mesh, idx)) continue; if (pointOnAnyLinkIndexed(mx, my, mesh, idx)) continue; return false; } return true; } // Build the symmetric weighted adjacency (`to` is a CORE index, not // node-space) from a walkable-pairs table. Factored out so we can // also AUGMENT a stale cached graph that predates this field — // Symbol.for(...) is a global registry, so a mesh decorated by an // older version of this cell can hand back a cached graph without // adjBase. function buildAdjBase(corePts, walkable) { const m = corePts.length; const adjBase = Array.from({ length: m }, () => []); for (let i = 0; i < m; i++) { const row = walkable[i]; for (let k = 0; k < row.length; k++) { const j = row[k]; const w = euclideanDistance(corePts[i], corePts[j]); adjBase[i].push({ to: j, w }); adjBase[j].push({ to: i, w }); } } return adjBase; } function getCoreGraph(mesh) { const cached = mesh[CORE_GRAPH]; if (cached) { // Stale cache from a previous cell version: has corePts/walkable // but no adjBase. Augment in place rather than rebuilding the // (expensive) visibility table. if (!cached.adjBase && cached.corePts && cached.walkable) { cached.adjBase = buildAdjBase(cached.corePts, cached.walkable); } if (cached.adjBase) return cached; // Unrecognized shape — fall through and rebuild from scratch. } getSpatialIndex(mesh); // Keep derived-point ids on corePts so reconstructed paths can carry them. const corePts = mesh.derivedPoints.map(p => ({ x: p.x, y: p.y, id: p.id })); const m = corePts.length; const walkable = new Array(m); for (let i = 0; i < m; i++) { const row = []; for (let j = i + 1; j < m; j++) { if (isWalkable(corePts[i], corePts[j], mesh)) row.push(j); } walkable[i] = row; } const adjBase = buildAdjBase(corePts, walkable); const graph = { corePts, walkable, adjBase }; mesh[CORE_GRAPH] = graph; return graph; } // ---- Binary min-heap of [dist, nodeIdx] with lazy deletion ---- function heapPush(h, d, v) { h.push([d, v]); let i = h.length - 1; while (i > 0) { const p = (i - 1) >> 1; if (h[p][0] <= h[i][0]) break; const t = h[p]; h[p] = h[i]; h[i] = t; i = p; } } function heapPop(h) { const top = h[0]; const last = h.pop(); if (h.length) { h[0] = last; let i = 0; for (;;) { const l = 2 * i + 1, r = l + 1; let s = i; if (l < h.length && h[l][0] < h[s][0]) s = l; if (r < h.length && h[r][0] < h[s][0]) s = r; if (s === i) break; const t = h[s]; h[s] = h[i]; h[i] = t; i = s; } } return top; } // shortestPathOnMesh takes p1/p2 with optional ids (caller can supply // synthesized ids for the snap landings). Returns an array of // { x, y, id, onLinkId } waypoints, in order from p1 to p2. // // Node index space: 0 = p1, 1 = p2, i+2 = corePts[i]. function shortestPathOnMesh(p1, p2, mesh, distance = euclideanDistance) { const graph = getCoreGraph(mesh); const { corePts, adjBase } = graph; const m = corePts.length; const n = m + 2; const custom = distance !== euclideanDistance; // Endpoint connections. These per-call visibility tests (2m // isWalkable calls) are the remaining per-route cost — the core // graph itself is cached. const startEdges = []; // from node 0 const endW = new Float64Array(m).fill(-1); // core i -> weight to node 1 for (let i = 0; i < m; i++) { if (isWalkable(p1, corePts[i], mesh)) { startEdges.push({ to: i + 2, w: distance(p1, corePts[i]) }); } if (isWalkable(p2, corePts[i], mesh)) { endW[i] = distance(p2, corePts[i]); } } const directW = isWalkable(p1, p2, mesh) ? distance(p1, p2) : null; const dist = new Float64Array(n).fill(Infinity); const prev = new Int32Array(n).fill(-1); const seen = new Uint8Array(n); const heap = []; dist[0] = 0; heapPush(heap, 0, 0); while (heap.length) { const [d, u] = heapPop(heap); if (seen[u]) continue; seen[u] = 1; if (u === 1) break; // early exit at target if (u === 0) { for (const e of startEdges) { if (seen[e.to]) continue; const nd = d + e.w; if (nd < dist[e.to]) { dist[e.to] = nd; prev[e.to] = 0; heapPush(heap, nd, e.to); } } if (directW != null && !seen[1] && d + directW < dist[1]) { dist[1] = d + directW; prev[1] = 0; heapPush(heap, dist[1], 1); } } else { const i = u - 2; const nbrs = adjBase[i]; for (let k = 0; k < nbrs.length; k++) { const nb = nbrs[k]; const to = nb.to + 2; if (seen[to]) continue; const w = custom ? distance(corePts[i], corePts[nb.to]) : nb.w; const nd = d + w; if (nd < dist[to]) { dist[to] = nd; prev[to] = u; heapPush(heap, nd, to); } } if (endW[i] >= 0 && !seen[1]) { const nd = d + endW[i]; if (nd < dist[1]) { dist[1] = nd; prev[1] = u; heapPush(heap, nd, 1); } } } } if (dist[1] === Infinity) { return [ { x: p1.x, y: p1.y, id: p1.id, onLinkId: p1.onLinkId || null }, { x: p2.x, y: p2.y, id: p2.id, onLinkId: p2.onLinkId || null }, ]; } // Reconstruct path with ids attached. p1/p2 may have onLinkId set // (mid-link snap landings); mesh vertices are never "on a link". const path = []; for (let cur = 1; cur !== -1; cur = prev[cur]) { if (cur === 0) path.push({ x: p1.x, y: p1.y, id: p1.id, onLinkId: p1.onLinkId || null }); else if (cur === 1) path.push({ x: p2.x, y: p2.y, id: p2.id, onLinkId: p2.onLinkId || null }); else { const cp = corePts[cur - 2]; path.push({ x: cp.x, y: cp.y, id: cp.id, onLinkId: null }); } } path.reverse(); return path; } // routeWaypoints returns the full polyline as [{x, y, id, onLinkId}, ...]. // Semantics unchanged. NEW: memoized per mesh (default distance only). // The returned array is shared between callers — treat it as immutable. function routeWaypoints(start, end, mesh, distance = euclideanDistance) { let cache = null, cacheKey = null; if (distance === euclideanDistance) { cache = mesh[WAYPOINT_CACHE]; if (!cache) { cache = new Map(); mesh[WAYPOINT_CACHE] = cache; } cacheKey = start.x + "," + start.y + "|" + end.x + "," + end.y; const hit = cache.get(cacheKey); if (hit) return hit; } const s = snapToNavmesh(start.x, start.y, mesh); const e = snapToNavmesh(end.x, end.y, mesh); const sId = s.vertexId != null ? s.vertexId : ("snap:" + posKey(s.x, s.y)); const eId = e.vertexId != null ? e.vertexId : ("snap:" + posKey(e.x, e.y)); const sOnLink = s.vertexId != null ? null : s.onLinkId; const eOnLink = e.vertexId != null ? null : e.onLinkId; const middle = shortestPathOnMesh( { x: s.x, y: s.y, id: sId, onLinkId: sOnLink }, { x: e.x, y: e.y, id: eId, onLinkId: eOnLink }, mesh, distance ); const startWp = { x: start.x, y: start.y, id: "endpoint:" + posKey(start.x, start.y), onLinkId: null, }; const endWp = { x: end.x, y: end.y, id: "endpoint:" + posKey(end.x, end.y), onLinkId: null, }; const pts = [startWp, ...middle, endWp]; const cleaned = [pts[0]]; for (let i = 1; i < pts.length; i++) { const prev = cleaned[cleaned.length - 1]; if (Math.hypot(pts[i].x - prev.x, pts[i].y - prev.y) > 0.01) cleaned.push(pts[i]); } if (cache) cache.set(cacheKey, cleaned); return cleaned; } return { snapToNavmesh, isWalkable, shortestPathOnMesh, routeWaypoints }; }3d:T2db0,// Pure function. Given a nav mesh, a set of routes, and the pathfinding // module, returns a simplified "decision graph" derived from the routes' // shortest paths through the mesh. // // Concepts: // - A route's "polyline" is its full sequence of waypoints from // pathfinding.routeWaypoints(start, end, mesh). Each waypoint now // carries an `id` from pathfinding (mesh-vertex id, snap id, or // endpoint id) that downstream consumers use for graph-based identity. // - At each interior waypoint of each route, we ask which routes are // bundled together on the incoming side vs the outgoing side. A // "bundle" is the set of routes covering the same user-authored link // near that waypoint's t-position along the link. // - A "decision point" / "marker" is a position where that set changes // for some route, and at least one side has 2+ routes bundled. // - Each route then "visits" every marker that geometrically lies on // its polyline, in polyline order. // - The decision graph is the multigraph on those markers: each route // contributes an edge between every consecutive pair of markers it // visits. // // Markers carry both a position key (for stable identity across // reorderings) AND a waypoint id (so the classifier can build its // spoke graph by id without proximity matching). // // Output shape (additions vs prior versions noted): // { // markers: [{ key, id, x, y }], // ← id added // routeVisits: [[{ key, id, x, y }, ...]], // ← id added // routeColors: [string, ...], // edges: [{ ... }], // endpointConnectors: [{ ... }], // } buildDecisionGraph = function buildDecisionGraph(mesh, userLinks, routes, pathfinding, geometry) { const POINT_ON_LINK_TOL = 0.75; const POINT_ON_SEG_TOL = 0.75; const T_EPS = 1e-3; function linkContainsPoint(link, x, y) { const a = mesh.dPointById(link.a), b = mesh.dPointById(link.b); if (!a || !b) return false; const r = geometry.projectToSegment(x, y, a, b); if (r.len2 === 0) return false; return r.d2 <= POINT_ON_LINK_TOL * POINT_ON_LINK_TOL; } // Per-userLink endpoint cache (for t-parameterization along the // authored link). const endpointsCache = new Map(); function endpointsFor(linkKey) { if (endpointsCache.has(linkKey)) return endpointsCache.get(linkKey); const sid = Number(linkKey.slice(3)); // strip "lk:" const ul = userLinks.find(l => l.id === sid); let ep = null; if (ul) { const a = mesh.derivedPoints.find(p => !p.virtual && p.userId === ul.a); const b = mesh.derivedPoints.find(p => !p.virtual && p.userId === ul.b); if (a && b) ep = { a, b }; } endpointsCache.set(linkKey, ep); return ep; } function tOnUserLink(x, y, endpoints) { return geometry.projectToSegment(x, y, endpoints.a, endpoints.b).t; } function segmentBundleKey(p1, p2, segUid) { for (const l of mesh.derivedLinks) { if (linkContainsPoint(l, p1.x, p1.y) && linkContainsPoint(l, p2.x, p2.y)) { return "lk:" + (l.sourceLinkId != null ? l.sourceLinkId : l.id); } } return "off:" + segUid; } // Per route, capture waypoints + per-segment link key + per-segment // parameterization range against the user link. const perRoute = routes.map((route, ri) => { const pts = pathfinding.routeWaypoints(route.start, route.end, mesh); const segs = []; for (let i = 0; i < pts.length - 1; i++) { const key = segmentBundleKey(pts[i], pts[i + 1], ri + ":" + i); let tA = 0, tB = 0, linkId = null; if (key.startsWith("lk:")) { const ep = endpointsFor(key); if (ep) { linkId = key; tA = tOnUserLink(pts[i].x, pts[i].y, ep); tB = tOnUserLink(pts[i + 1].x, pts[i + 1].y, ep); if (tA > tB) { const t = tA; tA = tB; tB = t; } } } segs.push({ key, linkId, tA, tB }); } return { pts, segs }; }); function routeCoversPointOnLink(routeIdx, linkKey, t) { const r = perRoute[routeIdx]; for (const s of r.segs) { if (s.linkId !== linkKey) continue; if (t >= s.tA - T_EPS && t <= s.tB + T_EPS) return true; } return false; } // ---- Pass 1: collect markers by unified incident-edge rule ---- const markers = []; const seenXY = new Set(); const posId = (p) => Math.round(p.x * 10) + "," + Math.round(p.y * 10); // Track which (route, waypointIdx) pairs touch each waypoint id. // Using waypoint.id directly avoids proximity matching. const touchesAt = new Map(); // wpId -> [{ ri, i }] perRoute.forEach((r, ri) => { const seenForRoute = new Set(); for (let i = 0; i < r.pts.length; i++) { const wp = r.pts[i]; if (!wp.id) continue; // Only treat mesh-vertex waypoints as "shared" nodes — snaps and // endpoints are route-specific even if at the same position. if (!(wp.id[0] === "u" || wp.id[0] === "v")) continue; if (seenForRoute.has(wp.id)) continue; seenForRoute.add(wp.id); if (!touchesAt.has(wp.id)) touchesAt.set(wp.id, []); touchesAt.get(wp.id).push({ ri, i }); } }); function routesOnLinkAt(linkId, x, y) { const ep = endpointsFor(linkId); if (!ep) return []; const tp = tOnUserLink(x, y, ep); const ids = []; for (let rj = 0; rj < perRoute.length; rj++) { if (routeCoversPointOnLink(rj, linkId, tp)) ids.push(rj); } return ids; } function setKey(ids) { return ids.slice().sort((a, b) => a - b).join(","); } function incidentEdgeSetsAtVertex(wpId, x, y) { const touches = touchesAt.get(wpId) || []; const linkIds = new Set(); const offMeshEdges = new Map(); // farPosId -> Set of routeIdx touches.forEach(({ ri, i }) => { const r = perRoute[ri]; const inSeg = i > 0 ? r.segs[i - 1] : null; const outSeg = i < r.pts.length - 1 ? r.segs[i] : null; if (inSeg) { if (inSeg.linkId) linkIds.add(inSeg.linkId); else { const farKey = posId(r.pts[i - 1]); if (!offMeshEdges.has(farKey)) offMeshEdges.set(farKey, new Set()); offMeshEdges.get(farKey).add(ri); } } if (outSeg) { if (outSeg.linkId) linkIds.add(outSeg.linkId); else { const farKey = posId(r.pts[i + 1]); if (!offMeshEdges.has(farKey)) offMeshEdges.set(farKey, new Set()); offMeshEdges.get(farKey).add(ri); } } }); const sets = []; linkIds.forEach(lid => sets.push(setKey(routesOnLinkAt(lid, x, y)))); offMeshEdges.forEach(routeSet => sets.push(setKey([...routeSet]))); return sets; } function incidentEdgeSetsAtMidLink(p, inSeg, outSeg, routeIdx) { const sets = []; if (inSeg) { if (inSeg.linkId) sets.push(setKey(routesOnLinkAt(inSeg.linkId, p.x, p.y))); else sets.push(String(routeIdx)); } if (outSeg) { if (outSeg.linkId) sets.push(setKey(routesOnLinkAt(outSeg.linkId, p.x, p.y))); else sets.push(String(routeIdx)); } return sets; } function isDecisionPoint(sets) { if (sets.length === 2 && sets[0] === sets[1]) return false; return true; } perRoute.forEach((r, ri) => { if (r.pts.length < 2) return; for (let i = 1; i < r.pts.length - 1; i++) { const p = r.pts[i]; const isMeshVertex = p.id && (p.id[0] === "u" || p.id[0] === "v"); const sets = isMeshVertex ? incidentEdgeSetsAtVertex(p.id, p.x, p.y) : incidentEdgeSetsAtMidLink(p, r.segs[i - 1], r.segs[i], ri); if (!isDecisionPoint(sets)) continue; const xyKey = posId(p); if (seenXY.has(xyKey)) continue; seenXY.add(xyKey); // Markers carry both the position-based key (for backward // compatibility with downstream code that aggregates by position) // and the waypoint id (preferred identity). markers.push({ key: xyKey, id: p.id, x: p.x, y: p.y }); } }); // ---- Pass 2: per-route ordered marker visits ---- function pointOnSegment(mx, my, p1, p2) { const r = geometry.projectToSegment(mx, my, p1, p2); return r.len2 > 0 && r.d2 <= POINT_ON_SEG_TOL * POINT_ON_SEG_TOL ? r.t : -1; } const routeVisits = perRoute.map(({ pts }) => { if (pts.length < 2) return []; const hits = []; for (let i = 0; i < pts.length - 1; i++) { const p1 = pts[i], p2 = pts[i + 1]; const onThisSeg = []; for (const m of markers) { const t = pointOnSegment(m.x, m.y, p1, p2); if (t === -1) continue; if (t < -0.001 || t > 1.001) continue; onThisSeg.push({ t, m }); } onThisSeg.sort((a, b) => a.t - b.t); for (const { m } of onThisSeg) { if (hits.length && hits[hits.length - 1].key === m.key) continue; hits.push({ key: m.key, id: m.id, x: m.x, y: m.y }); } } return hits; }); // ---- Pass 3: aggregate undirected edges ---- function parseColor(c) { if (typeof c !== "string") return null; if (c.startsWith("#")) { const h = c.slice(1); if (h.length === 3) { return { r: parseInt(h[0] + h[0], 16), g: parseInt(h[1] + h[1], 16), b: parseInt(h[2] + h[2], 16) }; } if (h.length === 6) { return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16) }; } } return null; } function blendColors(colors) { const parsed = colors.map(parseColor).filter(Boolean); if (parsed.length === 0) return "#000"; let r = 0, g = 0, b = 0; parsed.forEach(c => { r += c.r; g += c.g; b += c.b; }); r = Math.round(r / parsed.length); g = Math.round(g / parsed.length); b = Math.round(b / parsed.length); const hex = n => n.toString(16).padStart(2, "0"); return "#" + hex(r) + hex(g) + hex(b); } const routeColors = routes.map(r => r.color); const edgeMap = new Map(); routeVisits.forEach((visits, ri) => { for (let i = 0; i < visits.length - 1; i++) { const a = visits[i], b = visits[i + 1]; const [k1, p1, k2, p2] = a.key < b.key ? [a.key, a, b.key, b] : [b.key, b, a.key, a]; const key = k1 + "||" + k2; let e = edgeMap.get(key); if (!e) { e = { key, endpointKeys: [k1, k2], x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, routeIndices: [], }; edgeMap.set(key, e); } e.routeIndices.push(ri); } }); const edges = [...edgeMap.values()].map(e => ({ key: e.key, endpointKeys: e.endpointKeys, x1: e.x1, y1: e.y1, x2: e.x2, y2: e.y2, routeIndices: e.routeIndices, routeCount: e.routeIndices.length, blendedColor: blendColors(e.routeIndices.map(i => routeColors[i])), })); // ---- Pass 4: per-route endpoint connectors ---- const endpointConnectors = []; routes.forEach((route, ri) => { const visits = routeVisits[ri]; if (!visits || visits.length === 0) { endpointConnectors.push({ routeId: route.id, kind: "direct", x1: route.start.x, y1: route.start.y, x2: route.end.x, y2: route.end.y, color: route.color, }); return; } const first = visits[0]; const last = visits[visits.length - 1]; endpointConnectors.push({ routeId: route.id, kind: "start", x1: route.start.x, y1: route.start.y, x2: first.x, y2: first.y, color: route.color, }); endpointConnectors.push({ routeId: route.id, kind: "end", x1: last.x, y1: last.y, x2: route.end.x, y2: route.end.y, color: route.color, }); }); return { markers, routeVisits, routeColors, edges, endpointConnectors }; }3e:T2667,// Pure function. Given a nav mesh, the routes, the decision graph, and // the pathfinding module, classifies each junction (decision-graph // marker, snap landing, or pass-through vertex visited by any route) by // type and classifies every spoke leaving it. // // Identity model: junctions are keyed by **waypoint id** from the // pathfinding module — not by position proximity. Pathfinding's // routeWaypoints emits `{ x, y, id, onLinkId }` for every waypoint: // - id is a derived-vertex id ("u"/"v") for mesh vertices, // - "snap:" for a route endpoint that landed on a link // interior, // - "endpoint:" for a route's raw start/end position. // - onLinkId, when set on a "snap:..." waypoint, names the derived // link the snap sits on. // Using these ids removes the need for proximity / posKey lookups. // // Junction types: // "snap" — type 0. A route endpoint that snapped to the INTERIOR // of a link or area-face edge. (A snap-to-vertex case // has the snap waypoint's id resolved to that vertex's // id by pathfinding, so it's classified normally.) // Drawn as a square. // "multiway" — type 1. A junction with 0 area-spokes or 2+ area-spokes. // Y-intersections of rivers (0 areas) or straits/canals // between two bodies of water (2+ areas). Drawn as a circle. // "coastline" — type 2. A junction with exactly 1 incident area face. // Drawn as a triangle. // // Spoke types: // "link" — the spoke travels along a derived link that is NOT the // interior edge of any area face (rivers). // "edge" — the spoke travels along a derived link that IS the edge // of an area face (coastlines). // "area" — the spoke crosses the interior of a walkable area face // (the two endpoints aren't connected by a derived link). // // Inputs: // mesh — buildNavMesh(...) result // routes — the route array // decisionGraph — buildDecisionGraph(...) result (markers carry .id) // pathfinding — Cell 3 module (for routeWaypoints) // geometry — Cell 1 module (kept for parity; unused by this cell now) // // Output: // { // junctions: [{ // key, // waypoint id ("u", "v", or "snap:...") // x, y, // type, // areaCount, // spokes: [{ // farKey, // junction id, or "endpoint::start|end" // spokeType, // routeIds: [int], // }], // }], // junctionByKey, // } buildJunctionClassification = function buildJunctionClassification( mesh, routes, decisionGraph, pathfinding, geometry ) { // ---- Mesh-side lookups ---- const linkByEndpointPair = new Map(); function endpointPairKey(a, b) { return a < b ? a + "|" + b : b + "|" + a; } for (const l of mesh.derivedLinks) { linkByEndpointPair.set(endpointPairKey(l.a, l.b), l); } function findDerivedLinkBetween(idA, idB) { return linkByEndpointPair.get(endpointPairKey(idA, idB)) || null; } // Set of derived-link ids that are interior edges of an area face // (coastlines). Anything else is a "river" link. const areaEdgeLinkIds = new Set(); for (const f of mesh.faces) { if (!f.isArea) continue; const ring = f.ring; for (let i = 0; i < ring.length; i++) { const l = findDerivedLinkBetween(ring[i], ring[(i + 1) % ring.length]); if (l) areaEdgeLinkIds.add(l.id); } } // Derived links indexed by id (for snap onLinkId lookups). const linkById = new Map(); for (const l of mesh.derivedLinks) linkById.set(l.id, l); function isMeshVertexId(id) { return typeof id === "string" && (id[0] === "u" || id[0] === "v"); } function isSnapId(id) { return typeof id === "string" && id.startsWith("snap:"); } function isEndpointId(id) { return typeof id === "string" && id.startsWith("endpoint:"); } // Classify the spoke between two consecutive waypoints A and B. // - Both mesh vertices connected by a derived link: link/edge. // - Snap + mesh vertex where the vertex is an endpoint of the // snap's onLinkId: link/edge along that link. // - Two snaps on the same onLinkId: link/edge along that link. // - Endpoint (raw route start/end) + snap-on-linkL: link/edge // along L (the route entered the network via that link). // - Endpoint + mesh vertex: classified as link, or "edge" when the // vertex's incident links include an area-edge (the route // effectively entered along a coastline). // - Two endpoints: "area" (degenerate direct connector). // - Otherwise: "area". function classifySpoke(A, B) { let linkId = null; if (isMeshVertexId(A.id) && isMeshVertexId(B.id)) { const l = findDerivedLinkBetween(A.id, B.id); if (l) linkId = l.id; } else if (isSnapId(A.id) && isMeshVertexId(B.id)) { if (A.onLinkId != null) { const l = linkById.get(A.onLinkId); if (l && (l.a === B.id || l.b === B.id)) linkId = l.id; } } else if (isMeshVertexId(A.id) && isSnapId(B.id)) { if (B.onLinkId != null) { const l = linkById.get(B.onLinkId); if (l && (l.a === A.id || l.b === A.id)) linkId = l.id; } } else if (isSnapId(A.id) && isSnapId(B.id)) { if (A.onLinkId != null && A.onLinkId === B.onLinkId) { linkId = A.onLinkId; } } else if (isEndpointId(A.id) && (isSnapId(B.id) || isMeshVertexId(B.id))) { if (isSnapId(B.id) && B.onLinkId != null) { linkId = B.onLinkId; } else if (isMeshVertexId(B.id)) { const anyAreaEdge = mesh.derivedLinks.some( ll => (ll.a === B.id || ll.b === B.id) && areaEdgeLinkIds.has(ll.id) ); return anyAreaEdge ? "edge" : "link"; } } else if ((isSnapId(A.id) || isMeshVertexId(A.id)) && isEndpointId(B.id)) { if (isSnapId(A.id) && A.onLinkId != null) { linkId = A.onLinkId; } else if (isMeshVertexId(A.id)) { const anyAreaEdge = mesh.derivedLinks.some( ll => (ll.a === A.id || ll.b === A.id) && areaEdgeLinkIds.has(ll.id) ); return anyAreaEdge ? "edge" : "link"; } } else if (isEndpointId(A.id) && isEndpointId(B.id)) { return "area"; } if (linkId != null) { return areaEdgeLinkIds.has(linkId) ? "edge" : "link"; } return "area"; } // ---- Junction set construction (by id) ---- const junctionByKey = new Map(); function ensureJunction(id, x, y, presetType) { let j = junctionByKey.get(id); if (!j) { j = { key: id, x, y, type: null, areaCount: 0, spokes: [], _presetType: presetType || null, }; junctionByKey.set(id, j); } else if (presetType && !j._presetType) { j._presetType = presetType; } return j; } // 1) Decision-graph markers (must carry .id). for (const m of decisionGraph.markers) { const id = m.id || m.key; ensureJunction(id, m.x, m.y); } // 2) Snap landings + pass-through mesh vertices any route uses. // Raw "endpoint:..." waypoints are NOT junctions — they're off-mesh. const perRoute = routes.map(route => { const pts = pathfinding.routeWaypoints(route.start, route.end, mesh); return { pts }; }); perRoute.forEach(({ pts }) => { for (const wp of pts) { if (isEndpointId(wp.id)) continue; if (isSnapId(wp.id)) { ensureJunction(wp.id, wp.x, wp.y, "snap"); } else if (isMeshVertexId(wp.id)) { ensureJunction(wp.id, wp.x, wp.y); } } }); // ---- Spoke extraction ---- routes.forEach((route, ri) => { const { pts } = perRoute[ri]; if (pts.length < 2) return; for (let i = 0; i < pts.length - 1; i++) { const A = pts[i], B = pts[i + 1]; const aIsEndpoint = isEndpointId(A.id); const bIsEndpoint = isEndpointId(B.id); // Per-route endpoint pseudo-keys for spoke far-references. const aKind = i === 0 ? "start" : "end"; const bKind = i + 1 === pts.length - 1 ? "end" : "start"; const aFar = aIsEndpoint ? ("endpoint:" + route.id + ":" + aKind) : A.id; const bFar = bIsEndpoint ? ("endpoint:" + route.id + ":" + bKind) : B.id; const spokeType = classifySpoke(A, B); function recordSpoke(atJunction, fk) { if (!atJunction) return; let existing = atJunction.spokes.find( s => s.farKey === fk && s.spokeType === spokeType ); if (!existing) { existing = { farKey: fk, spokeType, routeIds: [] }; atJunction.spokes.push(existing); } if (existing.routeIds.indexOf(route.id) === -1) { existing.routeIds.push(route.id); } } const aJunction = aIsEndpoint ? null : junctionByKey.get(A.id); const bJunction = bIsEndpoint ? null : junctionByKey.get(B.id); if (aJunction) recordSpoke(aJunction, bFar); if (bJunction) recordSpoke(bJunction, aFar); } }); // ---- Classification ---- function areaFaceCountAt(pointId) { let n = 0; for (const f of mesh.faces) { if (!f.isArea) continue; if (f.ring.indexOf(pointId) !== -1) n++; } return n; } for (const j of junctionByKey.values()) { if (j._presetType === "snap") { j.type = "snap"; j.areaCount = 0; continue; } if (isMeshVertexId(j.key)) { j.areaCount = areaFaceCountAt(j.key); } else { j.areaCount = 0; } if (j.areaCount === 1) j.type = "coastline"; else j.type = "multiway"; } const junctions = []; for (const j of junctionByKey.values()) { delete j._presetType; junctions.push(j); } return { junctions, junctionByKey }; }3f:T77a0,// Pure function. Given a nav mesh, the routes, and the pathfinding // module, returns a combined network where each path's waypoint // sequence has been augmented with snap points from OTHER paths that // fall geometrically between two of this path's consecutive waypoints // on the same derived link. // // Why: each path is initially routed independently and produces its own // snap landings on links. If path 1 goes A → B along link L, and path 2 // snaps to a point S mid-link L, the un-augmented path 1 doesn't see S. // After splicing, path 1 reads A → S → B — i.e., paths that share a // link section also share its snap points. // // Splicing rule: a snap S from another path is spliced into path 1's // segment (A, B) iff: // - both A and B lie on the same derived link L (either as L's // endpoints, or as snap points whose onLinkId === L), AND // - S's onLinkId === L, AND // - S's t-coordinate along L is strictly between t(A) and t(B). // // ---------------------------------------------------------------------- // Source→target / visual-CCW convention // ---------------------------------------------------------------------- // Every derived nav-mesh link has an intrinsic direction: from its // stored source endpoint `link.a` to its target endpoint `link.b`. The // bundle perpendicular for that link is the unit vector pointing to // the VISUAL-CCW side of the source→target vector (i.e., the side that // appears counterclockwise on screen, where +y grows downward). // // For a direction (dx, dy) in screen coords, the visual-CCW // perpendicular is (dy, -dx) / |..|. Walking from source to target, // this vector points to your visual left. // // All angles, "which side" decisions, and bundle offsets are expressed // in this frame: // - `bundlePerpX, bundlePerpY` is the visual-CCW unit perpendicular. // - `bundleOffsetByRoute` is a signed fractional offset along that // perpendicular: POSITIVE = CCW side (visual left of source→target), // NEGATIVE = CW side (visual right). A renderer multiplies the // offset by a spacing constant and the perp vector. // - `areaSide` is +1 if the walkable area lies on the CCW side of // the link's source→target vector, -1 if on the CW side, 0 if // either side is walkable (interior link with area on both sides) // or the link doesn't bound any area face. // // Inputs: // mesh — buildNavMesh(...) result // routes — the route array // pathfinding — Cell 3 module (provides routeWaypoints emitting // {x, y, id, onLinkId}) // // Output: // { // paths: [{ // routeId, // route.id // routeIdx, // index into routes array // color, // route.color (if present) // waypoints: [ // spliced waypoint sequence // { id, x, y, onLinkId }, // ... // ], // }, ...], // // nodes: Map, // // edges: Map, // // signed fractional offset along the visual-CCW // // perpendicular. Sign convention: positive = CCW // // side (visual left of source→target), negative // // = CW side. For non-edge groups the layout is // // centered around 0; for edge groups (links // // bounding an area face) the layout is shifted // // entirely onto the area side so one strand // // sits on the link itself. // bundlePerpX, bundlePerpY, // // canonical visual-CCW perpendicular unit vector // // for this edge's bundle group (same across all // // edges in the group so a route's strand stays // // on a consistent visual side throughout). // }>, // linkGroups: Map, // // Summary of each bundle group, for callers (like // // an optimizer) that need to rewrite a group's // // bundle offsets en masse. `perpX, perpY` is the // // visual-CCW perpendicular; `areaSide` is +1 if // // the walkable area lies on the CCW side of the // // source→target vector, -1 if on the CW side, // // 0 if neither/both. // } // // nodeId reminder (from pathfinding): // "u" / "v" — derived mesh vertex // "snap:" — mid-link snap landing // "endpoint:" — raw route endpoint (off-mesh) combinedPathNetwork = function combinedPathNetwork(mesh, routes, pathfinding) { // Identify a derived link by either endpoint pair (for vertex/vertex // segments) or by id (for snap-bearing segments). const linkById = new Map(); for (const l of mesh.derivedLinks) linkById.set(l.id, l); function endpointPairKey(a, b) { return a < b ? a + "|" + b : b + "|" + a; } const linkByEndpointPair = new Map(); for (const l of mesh.derivedLinks) { linkByEndpointPair.set(endpointPairKey(l.a, l.b), l); } function isMeshVertexId(id) { return typeof id === "string" && (id[0] === "u" || id[0] === "v"); } function isSnapId(id) { return typeof id === "string" && id.startsWith("snap:"); } function isEndpointId(id) { return typeof id === "string" && id.startsWith("endpoint:"); } // Visual-CCW perpendicular for a source→target direction in SCREEN // coordinates (y grows downward). For direction (dx, dy), the // visual-CCW perpendicular is (dy, -dx) — i.e., the side you'd see // on your left if you walked from source to target. function visualCCWPerp(dx, dy) { const len = Math.hypot(dx, dy) || 1; return { px: dy / len, py: -dx / len }; } // Set of derived-link ids that are interior edges of an ENABLED area // face (a coastline bordering walkable area). Anything else — links // in open mesh, or rings that bound only disabled (non-walkable) // faces — is a "river" link, classified as "link". // // For each area-edge link, record `areaSide`: +1 if the walkable // area lies on the CCW (visual-left) side of the link's // source→target vector (link.a → link.b), -1 if on the CW // (visual-right) side, 0 if undetermined. Used downstream to shift // bundle offsets onto the area side so the strand at the // open-water edge of the bundle sits directly on the link and the // rest of the bundle extends into the area. // // ---------------------------------------------------------------- // Disabled faces. // // A face may carry `f.disabled = true`, marking it not-walkable // even though `f.isArea` is true. Such a face does NOT contribute // its ring edges as area-edges: a link that only borders disabled // faces is a "link" (river), not an "edge" (coastline), because // there's no walkable area adjacent to it. A link that borders one // enabled and one disabled face still counts as an area-edge (the // enabled side is its walkable side). // // ---------------------------------------------------------------- // Method: per-edge LOCAL probe. // // A global probe (face centroid, interiorPoint, etc.) is unreliable // — for a non-convex face, the global probe lies on different sides // of different edges, even though the polygon's interior is always // on ONE locally-consistent side of each edge. (Example: a face // shaped like a 'C' has its centroid outside several of its own // edges' "interior" sides.) // // Instead, for each candidate area-edge link, step a small distance // off the edge's midpoint in BOTH perpendicular directions and ask // whether that point lies inside an ENABLED area face. The walkable // side IS the area side. Then read which side that is relative to // the link's stored source→target vector to set areaSide. // Find the face containing (x, y), or null. Uses ring-containment // with the deepest hit (innermost face). Returns the face object // regardless of disabled status — callers should check `disabled` // themselves when they need walkability rather than just geometric // containment. function faceAt(x, y) { let bestIdx = -1, bestDepth = -1; for (let i = 0; i < mesh.faces.length; i++) { const f = mesh.faces[i]; const ring = f.ring; // Inline ray-cast point-in-polygon over the ring's coordinates. let inside = false; const n = ring.length; let prev = mesh.dPointById(ring[n - 1]); for (let j = 0; j < n; j++) { const curr = mesh.dPointById(ring[j]); if (!prev || !curr) { prev = curr; continue; } const yiAbove = curr.y > y, yjAbove = prev.y > y; if (yiAbove !== yjAbove) { const xCross = (prev.x - curr.x) * (y - curr.y) / (prev.y - curr.y) + curr.x; if (x < xCross) inside = !inside; } prev = curr; } if (!inside) continue; const depth = (typeof f.depth === "number") ? f.depth : 0; if (depth > bestDepth) { bestDepth = depth; bestIdx = i; } } return bestIdx === -1 ? null : mesh.faces[bestIdx]; } function isWalkableAt(x, y) { const f = faceAt(x, y); return !!(f && f.isArea && !f.disabled); } const areaEdgeLinkIds = new Set(); const areaSideByLinkId = new Map(); // First identify which links border at least one ENABLED area face. for (const f of mesh.faces) { if (!f.isArea || f.disabled) continue; const ring = f.ring; for (let i = 0; i < ring.length; i++) { const aId = ring[i], bId = ring[(i + 1) % ring.length]; const L = linkByEndpointPair.get(endpointPairKey(aId, bId)); if (L) areaEdgeLinkIds.add(L.id); } } // Then determine the area side per area-edge link via local probe. // Use the disabled-aware walkability test so a link bordering one // enabled and one disabled face resolves to areaSide pointing into // the enabled side (rather than tying at "both walkable"). const PROBE_OFFSET = 1.0; for (const linkId of areaEdgeLinkIds) { const L = linkById.get(linkId); if (!L) continue; const La = mesh.dPointById(L.a), Lb = mesh.dPointById(L.b); if (!La || !Lb) continue; const dx = Lb.x - La.x, dy = Lb.y - La.y; const len = Math.hypot(dx, dy); if (len < 1e-9) continue; // Visual-CCW unit perpendicular: (dy, -dx)/len. const ccwX = dy / len, ccwY = -dx / len; // Edge midpoint. const mx = (La.x + Lb.x) / 2, my = (La.y + Lb.y) / 2; // Probe both sides — walkable means "inside an enabled area face". const pCCWx = mx + ccwX * PROBE_OFFSET, pCCWy = my + ccwY * PROBE_OFFSET; const pCWx = mx - ccwX * PROBE_OFFSET, pCWy = my - ccwY * PROBE_OFFSET; const inCCW = isWalkableAt(pCCWx, pCCWy); const inCW = isWalkableAt(pCWx, pCWy); let side = 0; if (inCCW && !inCW) side = +1; // walkable on CCW side else if (inCW && !inCCW) side = -1; // walkable on CW side // If both sides are walkable (interior link between two enabled // area faces) or neither is (link surrounded by disabled or open // mesh on both sides), leave side = 0 so the bundle uses the // centered default. if (side !== 0) areaSideByLinkId.set(linkId, side); } // Classify the spoke (segment) between two waypoints by what kind of // mesh structure it travels along: // "link" — along a derived link that ISN'T an area-face edge (river) // "edge" — along a derived link that IS an area-face edge (coastline) // "area" — through walkable area interior (no shared link) // An endpoint-to-anything segment classifies by the snap/vertex side: // endpoint → snap-on-linkL ⇒ link/edge along L // endpoint → vertex ⇒ "link" by default, "edge" if any // incident link of the vertex is an // area-face edge function spokeTypeFor(A, B) { let linkId = null; if (isMeshVertexId(A.id) && isMeshVertexId(B.id)) { const L = linkByEndpointPair.get(endpointPairKey(A.id, B.id)); if (L) linkId = L.id; } else if (isSnapId(A.id) && isMeshVertexId(B.id) && A.onLinkId != null) { const L = linkById.get(A.onLinkId); if (L && (L.a === B.id || L.b === B.id)) linkId = L.id; } else if (isMeshVertexId(A.id) && isSnapId(B.id) && B.onLinkId != null) { const L = linkById.get(B.onLinkId); if (L && (L.a === A.id || L.b === A.id)) linkId = L.id; } else if (isSnapId(A.id) && isSnapId(B.id) && A.onLinkId != null && A.onLinkId === B.onLinkId) { linkId = A.onLinkId; } else if (isEndpointId(A.id) || isEndpointId(B.id)) { // Off-mesh connectors from a route's raw endpoint to its first // on-mesh waypoint (vertex or snap) don't lie ALONG any specific // mesh link — the connector cuts across open space to reach the // mesh. Treat them as "link" spokes regardless of whether the // attached snap/vertex happens to sit on a coastline (area-edge) // link. An endpoint-to-endpoint pair (degenerate) stays "area". if (isEndpointId(A.id) && isEndpointId(B.id)) return "area"; return "link"; } if (linkId != null) { return areaEdgeLinkIds.has(linkId) ? "edge" : "link"; } return "area"; } // Returns the derived link the waypoint is on, given context — i.e., // when the waypoint is a mesh vertex, we need to know "on which link" // to compute t. The caller passes the candidate link. // Returns t in [0, 1] for the waypoint's position along link L // measured from L.a (t=0) to L.b (t=1), or null if the waypoint // is not on L. function tOnLink(wp, L) { if (isMeshVertexId(wp.id)) { if (wp.id === L.a) return 0; if (wp.id === L.b) return 1; return null; } if (isSnapId(wp.id) && wp.onLinkId === L.id) { // Project the snap's coordinates onto L to get t. const a = mesh.dPointById(L.a), b = mesh.dPointById(L.b); if (!a || !b) return null; const dx = b.x - a.x, dy = b.y - a.y; const len2 = dx*dx + dy*dy; if (len2 < 1e-12) return null; const t = ((wp.x - a.x) * dx + (wp.y - a.y) * dy) / len2; return t; } return null; } // For a segment (A, B), determine the derived link it follows (if any). // Returns { link, tA, tB } or null. Note tA / tB are measured from // link.a (source) — if a path traverses the link from b→a, tA will // be greater than tB, and downstream code must respect that. function segmentOnLink(A, B) { // Both vertices connected by a derived link if (isMeshVertexId(A.id) && isMeshVertexId(B.id)) { const L = linkByEndpointPair.get(endpointPairKey(A.id, B.id)); if (!L) return null; return { link: L, tA: tOnLink(A, L), tB: tOnLink(B, L) }; } // Snap + vertex if (isSnapId(A.id) && isMeshVertexId(B.id) && A.onLinkId != null) { const L = linkById.get(A.onLinkId); if (!L) return null; if (B.id !== L.a && B.id !== L.b) return null; return { link: L, tA: tOnLink(A, L), tB: tOnLink(B, L) }; } if (isMeshVertexId(A.id) && isSnapId(B.id) && B.onLinkId != null) { const L = linkById.get(B.onLinkId); if (!L) return null; if (A.id !== L.a && A.id !== L.b) return null; return { link: L, tA: tOnLink(A, L), tB: tOnLink(B, L) }; } // Two snaps on the same link if (isSnapId(A.id) && isSnapId(B.id) && A.onLinkId != null && A.onLinkId === B.onLinkId) { const L = linkById.get(A.onLinkId); if (!L) return null; return { link: L, tA: tOnLink(A, L), tB: tOnLink(B, L) }; } // Endpoint-to-anything (off-mesh segment) — not splicable. return null; } // ---- Step 1: route each path independently ---- const rawPaths = routes.map((route, ri) => { const pts = pathfinding.routeWaypoints(route.start, route.end, mesh); return { route, routeIdx: ri, pts }; }); // ---- Step 2: collect all snap waypoints by their link ---- // snapsByLink: Map // t is measured from link.a (the link's source) toward link.b. const snapsByLink = new Map(); rawPaths.forEach(({ pts, routeIdx }) => { for (const wp of pts) { if (!isSnapId(wp.id) || wp.onLinkId == null) continue; const L = linkById.get(wp.onLinkId); if (!L) continue; const t = tOnLink(wp, L); if (t === null) continue; if (!snapsByLink.has(wp.onLinkId)) snapsByLink.set(wp.onLinkId, []); // Dedupe by snap id (the same snap may appear in multiple paths // if two paths happen to land at the exact same projected point). const list = snapsByLink.get(wp.onLinkId); if (!list.some(s => s.id === wp.id)) { list.push({ id: wp.id, x: wp.x, y: wp.y, onLinkId: wp.onLinkId, t, ownerRouteIdx: routeIdx, }); } } }); // ---- Step 3: splice — for each path's segment, insert any node // (mesh vertex or another path's snap) that lies geometrically on the // segment, in travel-direction order. // // Two categories of nodes get spliced: // (a) Snap points from any path whose onLinkId matches a derived // link the segment travels along, with t strictly inside the // segment's span on that link. // (b) Mesh vertices that are geometrically collinear with the // segment AND lie strictly between A and B on the segment's // straight-line interpolation. This handles cases where the // Dijkstra visibility-graph hop skips over a vertex that the // straight-line path actually crosses (e.g., a snap on link // d0 connecting directly to a snap on link d1 across their // shared endpoint vertex u2). ---- const ON_SEG_TOL = 0.5; // Pre-collect all snaps (across all paths) keyed by link, plus all // mesh-vertex positions for the collinearity test. const allMeshVertices = mesh.derivedPoints.map(p => ({ id: p.id, x: p.x, y: p.y, })); function nodesOnSegment(A, B) { // Returns an ordered list of { id, x, y, onLinkId, t } where t is // the fractional position along the segment (0 at A, 1 at B), for // every node strictly between A and B. const dx = B.x - A.x, dy = B.y - A.y; const segLen2 = dx*dx + dy*dy; if (segLen2 < 1e-9) return []; const out = []; const seenIds = new Set([A.id, B.id]); // (a) Snap-point splicing — only when the segment lies on a single // derived link. This preserves the "same-link" semantics requested // earlier (snaps don't bleed across links). const seg = segmentOnLink(A, B); if (seg && seg.tA !== null && seg.tB !== null) { const candidates = snapsByLink.get(seg.link.id) || []; const tLoLink = Math.min(seg.tA, seg.tB); const tHiLink = Math.max(seg.tA, seg.tB); const T_EPS = 1e-6; for (const s of candidates) { if (seenIds.has(s.id)) continue; if (s.t <= tLoLink + T_EPS || s.t >= tHiLink - T_EPS) continue; // Convert link-t to segment-t (fractional position along A→B). const segT = (s.t - seg.tA) / (seg.tB - seg.tA); out.push({ id: s.id, x: s.x, y: s.y, onLinkId: s.onLinkId, t: segT }); seenIds.add(s.id); } } // (b) Mesh-vertex splicing — any vertex collinear with A→B that // lies strictly between them gets included. We use a perpendicular- // distance tolerance + interpolation parameter in (0, 1). for (const v of allMeshVertices) { if (seenIds.has(v.id)) continue; // Parameterize V along A→B: projT = ((V-A) · (B-A)) / |B-A|². const px = v.x - A.x, py = v.y - A.y; const projT = (px*dx + py*dy) / segLen2; if (projT <= 1e-6 || projT >= 1 - 1e-6) continue; // Perpendicular distance squared from V to the segment line. const projX = A.x + projT*dx, projY = A.y + projT*dy; const perp2 = (v.x - projX)**2 + (v.y - projY)**2; if (perp2 > ON_SEG_TOL * ON_SEG_TOL) continue; out.push({ id: v.id, x: v.x, y: v.y, onLinkId: null, t: projT }); seenIds.add(v.id); } out.sort((a, b) => a.t - b.t); return out; } const paths = rawPaths.map(({ route, routeIdx, pts }) => { const out = [pts[0]]; for (let i = 0; i < pts.length - 1; i++) { const A = pts[i], B = pts[i + 1]; const inside = nodesOnSegment(A, B); for (const n of inside) { out.push({ id: n.id, x: n.x, y: n.y, onLinkId: n.onLinkId }); } out.push(B); } return { routeId: route.id, routeIdx, color: route.color, waypoints: out, }; }); // ---- Step 4: build nodes map and edges aggregate ---- const nodes = new Map(); function ensureNode(wp) { if (nodes.has(wp.id)) return; let kind; if (isMeshVertexId(wp.id)) kind = "vertex"; else if (isSnapId(wp.id)) kind = "snap"; else if (isEndpointId(wp.id)) kind = "endpoint"; else kind = "unknown"; nodes.set(wp.id, { id: wp.id, x: wp.x, y: wp.y, kind, onLinkId: wp.onLinkId != null ? wp.onLinkId : null, }); } function edgeKey(a, b) { return a < b ? a + "||" + b : b + "||" + a; } const edges = new Map(); paths.forEach(({ waypoints, routeIdx }) => { for (const wp of waypoints) ensureNode(wp); for (let i = 0; i < waypoints.length - 1; i++) { const A = waypoints[i], B = waypoints[i + 1]; const a = A.id, b = B.id; const k = edgeKey(a, b); let e = edges.get(k); if (!e) { e = { a: a < b ? a : b, b: a < b ? b : a, routeIdxs: [], spokeType: spokeTypeFor(A, B), }; edges.set(k, e); } if (!e.routeIdxs.includes(routeIdx)) e.routeIdxs.push(routeIdx); } }); // ---- Step 5: bundle layout ---- // // Each edge belongs to a "group". All edges in a group share a // single bundle layout (so a route's offset is visually continuous // across snap-induced sub-segments of the same underlying link). // // Group key derivation: // - Vertex↔vertex along a derived link: group = "link:" // - Snap↔vertex where vertex is an endpoint of snap.onLinkId: // group = "link:" // - Snap↔snap on the same onLinkId: group = "link:" // - Anything else (area crossings, endpoint connectors, etc.): // each edge is its own group, keyed "edge:". // // Within each group: // - The canonical perpendicular is the visual-CCW perpendicular of // the underlying link's source→target vector (link.a → link.b) // for link groups, or of the edge's stored a→b direction for // standalone edge groups. // - Offsets are signed scalars along that perpendicular: positive // pushes a strand to the CCW (visual-left) side, negative to CW. // - For non-edge groups (rivers, area crossings): offsets are // centered, k - (n-1)/2 where k indexes the sorted route list. // - For edge groups (links bounding an area face): the bundle is // shifted entirely onto the AREA side. One strand sits at offset // 0 (directly on the link), the rest step into the area. Sign // matches `areaSide`: areaSide = +1 (area on CCW side) → offsets // 0, +1, +2, …; areaSide = -1 (area on CW side) → 0, -1, -2, …. function nodeOnLinkAsEndpoint(nodeId, link) { return link && (link.a === nodeId || link.b === nodeId); } function groupKeyForEdge(e) { const A = nodes.get(e.a), B = nodes.get(e.b); if (!A || !B) return "edge:" + e.a + "||" + e.b; // vertex + vertex if (A.kind === "vertex" && B.kind === "vertex") { const L = linkByEndpointPair.get(endpointPairKey(A.id, B.id)); if (L) return "link:" + L.id; } // snap + vertex (vertex is link endpoint) if (A.kind === "snap" && B.kind === "vertex" && A.onLinkId != null) { const L = linkById.get(A.onLinkId); if (nodeOnLinkAsEndpoint(B.id, L)) return "link:" + L.id; } if (A.kind === "vertex" && B.kind === "snap" && B.onLinkId != null) { const L = linkById.get(B.onLinkId); if (nodeOnLinkAsEndpoint(A.id, L)) return "link:" + L.id; } // two snaps on the same link if (A.kind === "snap" && B.kind === "snap" && A.onLinkId != null && A.onLinkId === B.onLinkId) { return "link:" + A.onLinkId; } // Anything else (endpoint+anything, two unrelated snaps, etc.): // each edge is its own group. return "edge:" + e.a + "||" + e.b; } // Aggregate routes by group. const routesByGroup = new Map(); const groupKeyByEdgeKey = new Map(); for (const [ek, e] of edges) { const gk = groupKeyForEdge(e); groupKeyByEdgeKey.set(ek, gk); let g = routesByGroup.get(gk); if (!g) { g = new Set(); routesByGroup.set(gk, g); } for (const ri of e.routeIdxs) g.add(ri); } // Build per-group layouts and visual-CCW perpendiculars. const groupLayouts = new Map(); // gk -> Map const groupPerp = new Map(); // gk -> { px, py } for (const [gk, routeSet] of routesByGroup) { const sorted = [...routeSet].sort((a, b) => a - b); const n = sorted.length; // Decide layout style: centered by default; shifted to the area // side for area-edge link groups. areaSide records which side // the walkable area is on relative to source→target (CCW or CW), // and we push strands INTO that side so the bundle's open-water // edge sits flush on the link. let areaSide = 0; if (gk.startsWith("link:")) { const linkId = gk.slice("link:".length); if (areaEdgeLinkIds.has(linkId) && areaSideByLinkId.has(linkId)) { areaSide = areaSideByLinkId.get(linkId); } } const layout = new Map(); if (areaSide === +1) { // Walkable area is on the CCW (visual-left) side of source→target. // Push strands into CCW (positive offsets): 0, +1, +2, …. // ordering[0] = at offset 0 = on link (smallest stored offset). for (let k = 0; k < n; k++) layout.set(sorted[k], +k); } else if (areaSide === -1) { // Walkable area is on the CW (visual-right) side. Push into CW // (negative offsets). To keep the SAME meaning for ordering[k] // — namely, ordering[0] = smallest stored offset (most CW) — we // assign offsets -(n-1), -(n-2), …, -1, 0 so ordering[0] sits // deepest in the area and ordering[n-1] sits on the link. // // Visually identical to "0, -1, -2, …" (one strand on the link, // rest in the area); the only change is the meaning of "first // in ordering" is now consistent across all areaSide values: // ordering[0] is always the most-CW strand in stored frame. for (let k = 0; k < n; k++) layout.set(sorted[k], k - (n - 1)); } else { // Centered (default) — no area-edge constraint, so the bundle // sits symmetrically across the link. ordering[0] at the most // negative (CW) end. for (let k = 0; k < n; k++) layout.set(sorted[k], k - (n - 1) / 2); } groupLayouts.set(gk, layout); // Visual-CCW perpendicular for this group, anchored on the // underlying link's source→target direction. let dirX = 0, dirY = 0; if (gk.startsWith("link:")) { const L = linkById.get(gk.slice("link:".length)); const A = L && mesh.dPointById(L.a); const B = L && mesh.dPointById(L.b); if (A && B) { dirX = B.x - A.x; dirY = B.y - A.y; } } if (dirX === 0 && dirY === 0) { // Fallback (standalone edge group, or link lookup failed): // use the edge's own a→b direction. e.a < e.b lexicographically, // which gives a deterministic — if arbitrary — source→target. let sampleEdge = null; for (const [ek, e] of edges) { if (groupKeyByEdgeKey.get(ek) === gk) { sampleEdge = e; break; } } if (sampleEdge) { const A = nodes.get(sampleEdge.a), B = nodes.get(sampleEdge.b); if (A && B) { dirX = B.x - A.x; dirY = B.y - A.y; } } } groupPerp.set(gk, visualCCWPerp(dirX, dirY)); } for (const [ek, e] of edges) { e.routeIdxs.sort((x, y) => x - y); const gk = groupKeyByEdgeKey.get(ek); const layout = groupLayouts.get(gk); const perp = groupPerp.get(gk); e.groupKey = gk; e.bundleOffsetByRoute = new Map(); for (const ri of e.routeIdxs) { if (layout.has(ri)) e.bundleOffsetByRoute.set(ri, layout.get(ri)); } e.bundlePerpX = perp ? perp.px : 0; e.bundlePerpY = perp ? perp.py : 0; } // Group summary for downstream callers (e.g. an optimizer rewriting // bundle orderings). Each entry covers all edges sharing a single // bundle layout — keyed by the same `groupKey` set on each edge. // perpX/perpY is the visual-CCW perpendicular; areaSide records // which side of the link's source→target vector the walkable area // lies on (+1 = CCW, -1 = CW, 0 = undetermined / not an area-edge // link). const linkGroups = new Map(); for (const [gk, routeSet] of routesByGroup) { const edgeKeys = []; for (const [ek, e] of edges) { if (e.groupKey === gk) edgeKeys.push(ek); } let areaSide = 0; if (gk.startsWith("link:")) { const linkId = gk.slice("link:".length); if (areaEdgeLinkIds.has(linkId) && areaSideByLinkId.has(linkId)) { areaSide = areaSideByLinkId.get(linkId); } } const perp = groupPerp.get(gk) || { px: 0, py: 0 }; linkGroups.set(gk, { groupKey: gk, edgeKeys, routeUnion: [...routeSet].sort((a, b) => a - b), areaSide, perpX: perp.px, perpY: perp.py, isEdgeGroup: gk.startsWith("link:") && areaEdgeLinkIds.has(gk.slice("link:".length)), }); } return { paths, nodes, edges, linkGroups }; };40:T1f19,// Pure function. Given a combined path network (from combinedPathNetwork), // classifies each node as either a "decision" point or a "parallel" // waypoint, AND computes per-path-traversal junction-pair classifications. // // Definitions: // Decision point — a node where path routing decisions are visible: // either the node has 3+ distinct neighbors (a branching junction), // or two or more paths through it diverge (some take a different // spoke combo than others), or a path terminates at the node. // // Parallel waypoint — a node with exactly 2 distinct neighbors, where // every path that touches it passes straight through (uses both // spokes). Effectively a "pass-through" node where all paths stay // bundled together. // // Junction-pair (per-path-traversal) — at each interior waypoint of a // path, the unordered pair of spoke types on either side. Encoded // as a 2-character `pairKey` formed from the first letters of the // two spoke types, sorted alphabetically: "aa", "ae", "al", "ee", // "el", "ll". Useful for downstream coloring / styling. // // Endpoint nodes (kind: "endpoint") are NOT classified as decision/ // parallel — they're path termini sitting off-mesh. They still appear // in `pathTraversals` as the first/last waypoint of each path (whose // pairKey uses the single adjacent spoke's type for both sides). // // Inputs: // network — output of combinedPathNetwork(...) (each edge carries a // `spokeType` of "link" | "edge" | "area") // // Output: // { // nodes: [{ // id, x, y, kind, // spokes: [{ farId, spokeType, routeIdxs: [int], angle }, ...], // // spokes are sorted ascending by `angle` (atan2(dy, dx) from // // this junction toward the far node) giving a radial order; // // angle is in (-π, π]. Sort direction is counterclockwise in // // math coordinates / clockwise in SVG screen coordinates. // classification: "decision" | "parallel", // reason: string, // }, ...], // decisions: [...], // parallels: [...], // pathTraversals: [{ // routeId, routeIdx, // waypoints: [{ // id, // inSpokeType, // spoke type of segment INTO this waypoint // outSpokeType, // spoke type of segment OUT of this waypoint // pairKey, // sorted 2-letter key, e.g. "ae" // }, ...], // }, ...], // } classifyPathNodes = function classifyPathNodes(network) { const { paths, nodes, edges } = network; function edgeKey(a, b) { return a < b ? a + "||" + b : b + "||" + a; } function spokeTypeBetween(idA, idB) { const e = edges.get(edgeKey(idA, idB)); return e ? e.spokeType : "area"; } // Two-letter pair key, sorted alphabetically (so "edge,area" and // "area,edge" both yield "ae"). The single letters happen to be // unambiguous: link/edge/area → l/e/a. function pairKeyOf(typeA, typeB) { const letters = [typeA, typeB].map(t => t[0]).sort(); return letters[0] + letters[1]; } // ---- Per-node aggregation (with spoke types) ---- // adjByNode: Map> // touchesByNode: Map> const adjByNode = new Map(); const touchesByNode = new Map(); function recordAdj(nodeId, farId, routeIdx) { let m = adjByNode.get(nodeId); if (!m) { m = new Map(); adjByNode.set(nodeId, m); } let entry = m.get(farId); if (!entry) { entry = { routeIdxs: new Set(), spokeType: spokeTypeBetween(nodeId, farId) }; m.set(farId, entry); } entry.routeIdxs.add(routeIdx); } function recordTouch(nodeId, routeIdx, kind) { let m = touchesByNode.get(nodeId); if (!m) { m = new Map(); touchesByNode.set(nodeId, m); } if (m.get(routeIdx) !== "interior") m.set(routeIdx, kind); } paths.forEach(({ waypoints, routeIdx }) => { for (let i = 0; i < waypoints.length; i++) { const cur = waypoints[i]; const prev = i > 0 ? waypoints[i - 1] : null; const next = i < waypoints.length - 1 ? waypoints[i + 1] : null; const kind = (prev && next) ? "interior" : "terminus"; recordTouch(cur.id, routeIdx, kind); if (prev) recordAdj(cur.id, prev.id, routeIdx); if (next) recordAdj(cur.id, next.id, routeIdx); } }); // ---- Classify each non-endpoint node ---- const classified = []; for (const [id, node] of nodes) { if (node.kind === "endpoint") continue; const adj = adjByNode.get(id) || new Map(); const touches = touchesByNode.get(id) || new Map(); // Each spoke gets an angle measured from this junction toward its // far node, computed with standard atan2(dy, dx) so the value is in // (-π, π]. Spokes are sorted ascending by angle to give a stable // radial ordering (counterclockwise in math coordinates / clockwise // in SVG screen coordinates where y grows downward). const spokes = [...adj.entries()].map(([farId, entry]) => { const far = nodes.get(farId); const dx = far ? far.x - node.x : 0; const dy = far ? far.y - node.y : 0; return { farId, spokeType: entry.spokeType, routeIdxs: [...entry.routeIdxs].sort((a, b) => a - b), angle: Math.atan2(dy, dx), }; }); spokes.sort((a, b) => a.angle - b.angle); let classification, reason; if (spokes.length === 0) { classification = "decision"; reason = "no spokes recorded"; } else if (spokes.length !== 2) { classification = "decision"; reason = spokes.length >= 3 ? "3+ spokes (branching junction)" : "1 spoke (path terminus on mesh)"; } else { let anyTerminus = false; for (const [, t] of touches) if (t === "terminus") { anyTerminus = true; break; } if (anyTerminus) { classification = "decision"; reason = "path terminates here"; } else { const [s1, s2] = spokes; const set1 = new Set(s1.routeIdxs), set2 = new Set(s2.routeIdxs); let identical = set1.size === set2.size; if (identical) for (const r of set1) if (!set2.has(r)) { identical = false; break; } if (!identical) { classification = "decision"; reason = "spoke route-sets differ"; } else { classification = "parallel"; reason = "all paths pass through both spokes"; } } } classified.push({ id, x: node.x, y: node.y, kind: node.kind, spokes, classification, reason, }); } // ---- Per-path-traversal junction-pair classification ---- // For each path and each waypoint along it, compute the spoke types // on either side. At a terminus waypoint with only one neighbor, // both in/out types are the single available spoke's type — yielding // a self-pair key like "ll" / "ee" / "aa". const pathTraversals = paths.map(p => { const wps = p.waypoints; // Precompute segment types: segType[i] is the type of segment // wps[i] → wps[i+1]. Length = wps.length - 1. const segType = new Array(Math.max(0, wps.length - 1)); for (let i = 0; i < wps.length - 1; i++) { segType[i] = spokeTypeBetween(wps[i].id, wps[i + 1].id); } const wpInfo = wps.map((wp, i) => { const inT = i > 0 ? segType[i - 1] : (segType[0] || "area"); const outT = i < wps.length - 1 ? segType[i] : (segType[segType.length - 1] || "area"); return { id: wp.id, inSpokeType: inT, outSpokeType: outT, pairKey: pairKeyOf(inT, outT), }; }); return { routeId: p.routeId, routeIdx: p.routeIdx, waypoints: wpInfo, }; }); const decisions = classified.filter(n => n.classification === "decision"); const parallels = classified.filter(n => n.classification === "parallel"); return { nodes: classified, decisions, parallels, pathTraversals }; };41:T1f5c,// Groups geographically close route endpoints into logical PORT CLUSTERS, // so a set of up to five distinct berths in one region behaves as a single // port for bundling purposes. // // WHY // --- // Routes between two nearby port regions (say the Bay Area and the LA // basin) are short voyages and should hug the coast, but measured // berth-to-berth they look like many different origin/destination pairs. // Clustering collapses them so: // // * every route between the same two regions gets the SAME locality // score, so they tie in the coast-side preference and stay together // as one block rather than fanning across the ribbon; // * "short geographic distance" is measured region-to-region, which is // what actually determines whether a voyage is local. // // ALGORITHM // --------- // Agglomerative single-link clustering with a diameter cap: // // * two clusters may merge when their CLOSEST pair of ports is within // RADIUS_MILES, AND // * the merged cluster's widest pair stays within MAX_SPAN_MILES. // // The diameter cap matters. Plain single-link chaining would walk the // whole coast — if berths sit every 80 miles from San Diego to Seattle, // every one of them ends up in one cluster and the whole idea collapses. // MAX_SPAN_MILES stops the chain. Merges are performed closest-pair // first, so the grouping doesn't depend on input order. // // Distances are great-circle miles (haversine), not Mercator pixels, so // the thresholds mean the same thing at every latitude. // // OUTPUT // ------ // { // radiusMiles, maxSpanMiles, // clusters: [{ id, centroid: [lon, lat], spanMiles, points: [[lon,lat],...] }], // clusterIdFor(lon, lat) -> id | null // centroidFor(lon, lat) -> [lon, lat] (passthrough if unclustered) // clusterDistanceMiles(lonA, latA, lonB, latB) // -> miles between the two points' // cluster centroids; 0 when both // points are in the same cluster // distanceMiles(lonA, latA, lonB, latB) -> raw great-circle miles // } // // makeParallel and arrangeCrossings pick this up automatically if the cell // exists; they fall back to raw endpoint distance when it doesn't. // // TUNING // ------ // RADIUS_MILES is the "these are the same port" threshold you asked for. // MAX_SPAN_MILES should stay comfortably below the distance between the // regions you want kept apart — with Bay Area and LA about 350 miles // apart, a 200-mile cap keeps them distinct while absorbing the berths // within each. portClusters = { const RADIUS_MILES = 100; // merge when closest ports are within this const MAX_SPAN_MILES = 200; // hard cap on a cluster's own diameter const MAX_POINTS = 800; // above this, skip clustering (O(n²) matrix) const R_MILES = 3958.8; const D2R = Math.PI / 180; function distanceMiles(lonA, latA, lonB, latB) { const dLat = (latB - latA) * D2R; const dLon = (lonB - lonA) * D2R; const s = Math.sin(dLat / 2) ** 2 + Math.cos(latA * D2R) * Math.cos(latB * D2R) * Math.sin(dLon / 2) ** 2; return 2 * R_MILES * Math.asin(Math.min(1, Math.sqrt(s))); } // Quantized key, matching globeRoutesHelpers.llKey so lookups agree. function key(lon, lat) { return Math.round(lon * 1e4) + "|" + Math.round(lat * 1e4); } // ---- Collect unique endpoints from the routes -------------------- const pts = []; // [{ lon, lat }] const idxByKey = new Map(); function addPoint(lon, lat) { if (!isFinite(lon) || !isFinite(lat)) return; const k = key(lon, lat); if (idxByKey.has(k)) return; idxByKey.set(k, pts.length); pts.push({ lon, lat }); } if (typeof routes !== "undefined" && Array.isArray(routes)) { for (const r of routes) { if (!r) continue; addPoint(+r.load_lon, +r.load_lat); addPoint(+r.unload_lon, +r.unload_lat); } } const n = pts.length; const empty = { radiusMiles: RADIUS_MILES, maxSpanMiles: MAX_SPAN_MILES, clusters: [], clusterIdFor: () => null, centroidFor: (lon, lat) => [lon, lat], clusterDistanceMiles: (a, b, c, d) => distanceMiles(a, b, c, d), distanceMiles, }; if (n === 0 || n > MAX_POINTS) { if (n > MAX_POINTS) { console.warn("[portClusters] " + n + " endpoints exceeds MAX_POINTS; clustering skipped"); } return empty; } // ---- Pairwise distance matrix ------------------------------------ const D = new Float64Array(n * n); for (let i = 0; i < n; i++) { for (let j = i + 1; j < n; j++) { const d = distanceMiles(pts[i].lon, pts[i].lat, pts[j].lon, pts[j].lat); D[i * n + j] = d; D[j * n + i] = d; } } // ---- Agglomerate, closest pair first, respecting the diameter cap -- let groups = pts.map((_, i) => [i]); function minBetween(A, B) { let m = Infinity; for (const a of A) for (const b of B) { const d = D[a * n + b]; if (d < m) m = d; } return m; } function spanOfUnion(A, B) { let m = 0; const all = A.concat(B); for (let i = 0; i < all.length; i++) { for (let j = i + 1; j < all.length; j++) { const d = D[all[i] * n + all[j]]; if (d > m) m = d; } } return m; } for (let guard = 0; guard < n + 1; guard++) { let bi = -1, bj = -1, bd = Infinity; for (let i = 0; i < groups.length; i++) { for (let j = i + 1; j < groups.length; j++) { const d = minBetween(groups[i], groups[j]); if (d > RADIUS_MILES || d >= bd) continue; if (spanOfUnion(groups[i], groups[j]) > MAX_SPAN_MILES) continue; bd = d; bi = i; bj = j; } } if (bi === -1) break; groups[bi] = groups[bi].concat(groups[bj]); groups.splice(bj, 1); } // ---- Build the lookup structures --------------------------------- // Centroids are plain means of lon/lat. Fine for US coastal extents; // would need seam handling for clusters straddling the antimeridian. const clusters = groups.map((members, id) => { let sLon = 0, sLat = 0; for (const i of members) { sLon += pts[i].lon; sLat += pts[i].lat; } const centroid = [sLon / members.length, sLat / members.length]; let span = 0; for (let a = 0; a < members.length; a++) { for (let b = a + 1; b < members.length; b++) { const d = D[members[a] * n + members[b]]; if (d > span) span = d; } } return { id, centroid, spanMiles: +span.toFixed(1), points: members.map(i => [pts[i].lon, pts[i].lat]), }; }); const clusterIdByKey = new Map(); groups.forEach((members, id) => { for (const i of members) clusterIdByKey.set(key(pts[i].lon, pts[i].lat), id); }); function clusterIdFor(lon, lat) { const id = clusterIdByKey.get(key(lon, lat)); return id == null ? null : id; } function centroidFor(lon, lat) { const id = clusterIdFor(lon, lat); return id == null ? [lon, lat] : clusters[id].centroid; } function clusterDistanceMiles(lonA, latA, lonB, latB) { const ia = clusterIdFor(lonA, latA); const ib = clusterIdFor(lonB, latB); if (ia != null && ib != null && ia === ib) return 0; const ca = ia != null ? clusters[ia].centroid : [lonA, latA]; const cb = ib != null ? clusters[ib].centroid : [lonB, latB]; return distanceMiles(ca[0], ca[1], cb[0], cb[1]); } const multi = clusters.filter(c => c.points.length > 1); console.log( "[portClusters] " + n + " endpoints -> " + clusters.length + " clusters (" + multi.length + " with 2+ ports), radius " + RADIUS_MILES + " mi, max span " + MAX_SPAN_MILES + " mi", multi.map(c => ({ id: c.id, ports: c.points.length, spanMiles: c.spanMiles, centroid: c.centroid })) ); return { radiusMiles: RADIUS_MILES, maxSpanMiles: MAX_SPAN_MILES, clusters, clusterIdFor, centroidFor, clusterDistanceMiles, distanceMiles, }; }42:T626b,// Pure function. Given a combined path network (from combinedPathNetwork) // and a node classification (from classifyPathNodes), returns: // // { // orderings: Map // chains: [{ nodes, edges, routeIdxs, units, birthNode, deathNode }, ...] // } // // Soft dependencies (read from the notebook when present, ignored when // absent): `routes` for endpoint coordinates, `portClusters` for the // port-grouping. Keep the metric-block constants in sync with the same // block in arrangeCrossings. // // ====================================================================== // FIX — UNPLACED ROUTES NO LONGER LAND OUTERMOST // ====================================================================== // SYMPTOM: a route between two nearby port clusters draws as the // OUTERMOST strand of the coastal ribbon, outside long-haul traffic, // while other routes between the same two clusters sit inshore. // // CAUSE: the safety net for routes no chain placed used to append: // // for (const ri of group.routeUnion) // if (!existingSet.has(ri)) existing.push(ri); // OLD // // push() puts the route at the END of the stored order, which is the // OUTERMOST slot of the bundle — every time, regardless of how local the // voyage is. Sorting those routes among themselves (an earlier attempt) // does nothing about where the block lands. // // And routes drop out of chain coverage easily: chains are only built // from spokes carrying 2+ routes (`if (R0.length < 2) continue` in the // enumeration below), so a route that is alone on any spoke along its // corridor — exactly what happens where a single strand peels off toward // one berth of a port cluster — is never ordered by any chain and lands // outermost. // // NOW: unplaced routes are INSERTED at a locality-appropriate position. // The existing order is walked and each unplaced route is emitted before // the first route it should sit inshore of. Which end of the stored order // is coastal is derived per group (see coastAtLowIndexForGroup). // // This is a per-group decision and so could disagree with a neighbouring // group, but these routes were previously placed arbitrarily anyway, and // optimizeIndex runs enforceParallelChainConsistency afterwards, which // conforms shared sub-orders across adjacent groups. // // ====================================================================== // COAST-SIDE PREFERENCE FOR LOCAL VOYAGES (low priority) // ====================================================================== // Routes between nearby ports are preferred nearer the INSIDE of the // coastline; long-haul routes drift outward into open water. // // arrangeCrossings applies this to the TOP-LEVEL unit order. This cell // applies it where arrangeCrossings never reaches: // // 1. units.sort(...) — the initial unit order, last tie-break after the // birth and death lateral displacements. // 2. internalOrderForClass(...) — the order WITHIN a unit, the only // place a unit's internal sequence is ever decided; once set it is // locked and treated as atomic by arrangeCrossings. // 3. the safety net above. // // Anchor inheritance still wins inside a unit: if a smaller chain already // ordered those routes that order is inherited unchanged, so the // hierarchical "keep merged bundles together" behaviour is intact. // // METRIC — locality first, then voyage length // ------------------------------------------- // Earlier attempts failed on real data. WAYPOINT COUNT measured mesh // detail, not distance. POLYLINE LENGTH measured the voyage but not what // decides whether a route belongs inshore: berths within one region look // like many distinct origin/destination pairs rather than one. // // Primary key is LOCALITY: great-circle miles between the centroids of // the route's two endpoint PORT CLUSTERS (from portClusters), 0 when both // ends fall in the same cluster. All routes sharing a cluster pair score // identically, tie, and stay together as a block. Latitude-corrected // polyline length is the secondary key. // // Falls back to raw endpoint great-circle distance without portClusters, // and to polyline length alone without `routes`. // // WHICH DIRECTION IS THE COAST // ---------------------------- // Stored offset always increases along +bundlePerp, for every areaSide // convention (+1: 0..n-1; -1: -(n-1)..0; 0: centered), so one rule covers // all three: the coast side is at LOW stored index exactly when the // landward direction dots negatively with bundlePerp. Sources, in order: // // 1. areaSide — the walkable area is the ocean, so land is opposite. // 2. PORT CONNECTORS. A chain or group spanning only areaSide = 0 // groups used to get NO preference, which is the common case for a // bundle running through open-water "area" hops offshore rather than // along coastline links — the reason the preference only worked in // patches. Every route terminates at an "endpoint:" node at its // port, so the mean direction from mesh nodes toward incident // endpoint nodes points landward. // // ---------------------------------------------------------------------- // Prior behaviour, unchanged: units are partitioned by the PAIR // (birth spoke, death spoke), not by birth spoke alone. // ---------------------------------------------------------------------- // Previously all routes arriving at the chain's birth node on the same // spoke formed ONE atomic unit. If a small sub-group diverges at the // DEATH end (2 of 30 peel off), the optimizer could not move it to the // divergence side — the whole 30 were one unit with a locked internal // order and its representative deathSpoke hid the split, so the 2 could // sit inside the bundle and cross nearly every other strand on exit. // Now each (birthSpoke, deathSpoke) class is its own unit, so // arrangeCrossings sees the true divergence geometry. // // Frames: forward-CW. At the birth end (looking outward along the chain = // forward), forward-CW sorts sin(defl) DESCENDING; at the death end // (looking outward = backward), ASCENDING. makeParallel = function makeParallel(network, classified) { const { edges, linkGroups } = network; const classifiedNodes = classified.nodes; const nodeById = new Map(); for (const n of classifiedNodes) nodeById.set(n.id, n); function isParallel(node) { return node && node.classification === "parallel" && node.spokes.length === 2; } function twinSpoke(node, spoke) { if (!isParallel(node)) return null; return node.spokes[0] === spoke ? node.spokes[1] : node.spokes[0]; } function spokeAt(node, farId) { if (!node) return null; for (const sp of node.spokes) if (sp.farId === farId) return sp; return null; } function edgeKeyFor(idA, idB) { return idA < idB ? idA + "||" + idB : idB + "||" + idA; } function wrapPi(a) { while (a > Math.PI) a -= 2 * Math.PI; while (a <= -Math.PI) a += 2 * Math.PI; return a; } // ---- Coast-side preference: metric per route ---------------------- const MERCATOR_SCALE = 1000; // match navMesh's geoMercator().scale() const CORRECT_FOR_LATITUDE = true; // false -> raw Mercator length const R_MILES = 3958.8; const D2R = Math.PI / 180; const _routesArr = (typeof routes !== "undefined" && Array.isArray(routes)) ? routes : null; const _pc = (typeof portClusters !== "undefined" && portClusters) ? portClusters : null; function gcMiles(lonA, latA, lonB, latB) { const dLat = (latB - latA) * D2R; const dLon = (lonB - lonA) * D2R; const s = Math.sin(dLat / 2) ** 2 + Math.cos(latA * D2R) * Math.cos(latB * D2R) * Math.sin(dLon / 2) ** 2; return 2 * R_MILES * Math.asin(Math.min(1, Math.sqrt(s))); } // routeIdx -> { locality, length } const metricByRoute = new Map(); if (network.paths) { for (const p of network.paths) { const wps = p.waypoints || []; let len = 0; for (let i = 0; i < wps.length - 1; i++) { const a = wps[i], b = wps[i + 1]; let d = Math.hypot(b.x - a.x, b.y - a.y); if (CORRECT_FOR_LATITUDE && MERCATOR_SCALE > 0) { d /= Math.cosh(((a.y + b.y) / 2) / MERCATOR_SCALE); } len += d; } let locality = null; const rec = _routesArr ? _routesArr[p.routeId] : null; if (rec) { const aLon = +rec.load_lon, aLat = +rec.load_lat; const bLon = +rec.unload_lon, bLat = +rec.unload_lat; if (isFinite(aLon) && isFinite(aLat) && isFinite(bLon) && isFinite(bLat)) { locality = (_pc && typeof _pc.clusterDistanceMiles === "function") ? _pc.clusterDistanceMiles(aLon, aLat, bLon, bLat) : gcMiles(aLon, aLat, bLon, bLat); } } metricByRoute.set(p.routeIdx, { locality, length: len }); } } function metricForRoute(routeIdx) { return metricByRoute.get(routeIdx) || null; } function metricForRoutes(routeList) { let sL = 0, nL = 0, sD = 0, nD = 0; for (const r of routeList) { const m = metricForRoute(r); if (!m) continue; if (m.locality != null) { sL += m.locality; nL++; } sD += m.length; nD++; } if (!nD) return null; return { locality: nL ? sL / nL : null, length: sD / nD }; } const METRIC_REL_EPS = 1e-6; function tie(a, b) { return Math.abs(a - b) <= METRIC_REL_EPS * (Math.abs(a) + Math.abs(b) + 1); } // Negative => ma belongs nearer the coast than mb. function cmpMetrics(ma, mb) { if (!ma || !mb) return 0; if (ma.locality != null && mb.locality != null && !tie(ma.locality, mb.locality)) { return ma.locality - mb.locality; } if (!tie(ma.length, mb.length)) return ma.length - mb.length; return 0; } // ---- Landward direction from port connectors ---------------------- // Sum of unit vectors from each mesh node toward incident "endpoint:" // nodes. Built once; chains and groups sum over their own nodes. const portwardByNode = new Map(); for (const [, e] of edges) { const A = network.nodes.get(e.a), B = network.nodes.get(e.b); if (!A || !B) continue; let base = null, far = null; if (B.kind === "endpoint" && A.kind !== "endpoint") { base = A; far = B; } else if (A.kind === "endpoint" && B.kind !== "endpoint") { base = B; far = A; } if (!base) continue; const dx = far.x - base.x, dy = far.y - base.y; const L = Math.hypot(dx, dy); if (L < 1e-9) continue; let acc = portwardByNode.get(base.id); if (!acc) { acc = { x: 0, y: 0 }; portwardByNode.set(base.id, acc); } acc.x += dx / L; acc.y += dy / L; } // Is stored index 0 the coast side of this group? null when unknown. function coastAtLowIndexForGroup(group) { if (!group) return null; if (group.areaSide === +1) return true; if (group.areaSide === -1) return false; let sx = 0, sy = 0; for (const ek of (group.edgeKeys || [])) { const e = edges.get(ek); if (!e) continue; for (const nid of [e.a, e.b]) { const acc = portwardByNode.get(nid); if (acc) { sx += acc.x; sy += acc.y; } } } if (Math.hypot(sx, sy) < 1e-9) return null; const dot = sx * group.perpX + sy * group.perpY; if (Math.abs(dot) < 1e-9) return null; return dot < 0; } // Merge unplaced routes into an existing stored order at // locality-appropriate positions, instead of appending them to the // outermost slot. function insertUnplaced(existing, missing, group) { const lowIsCoast = coastAtLowIndexForGroup(group); if (lowIsCoast == null) { const out = existing.slice(); for (const r of missing) out.push(r); return out; } const ms = missing.slice().sort((a, b) => { const cmp = cmpMetrics(metricForRoute(a), metricForRoute(b)); if (cmp !== 0) return lowIsCoast ? cmp : -cmp; return a - b; }); const out = []; let mi = 0; for (const r of existing) { while (mi < ms.length) { const cmp = cmpMetrics(metricForRoute(ms[mi]), metricForRoute(r)); const msFirst = lowIsCoast ? (cmp < 0) : (cmp > 0); if (!msFirst) break; out.push(ms[mi++]); } out.push(r); } while (mi < ms.length) out.push(ms[mi++]); return out; } // ---- Step 1: enumerate sub-bundle chains (unchanged) ---- const chains = []; const seenChainKeys = new Set(); function findCoherentOutSpoke(node, R, incomingFromId) { if (!node || !node.spokes) return null; let unanimousSpoke = null; for (const r of R) { let routeOutSpoke = null; for (const s of node.spokes) { if (s.farId === incomingFromId) continue; if (s.routeIdxs.indexOf(r) === -1) continue; routeOutSpoke = s; break; } if (!routeOutSpoke) return null; if (unanimousSpoke === null) unanimousSpoke = routeOutSpoke; else if (unanimousSpoke !== routeOutSpoke) return null; } return unanimousSpoke; } function walkOneDirection(fromId, toId, R) { const walkNodes = [toId]; const walkEdges = []; let prevId = fromId; let curId = toId; while (true) { const cur = nodeById.get(curId); if (!cur) break; const outSpoke = findCoherentOutSpoke(cur, R, prevId); if (!outSpoke) break; const nextId = outSpoke.farId; walkNodes.push(nextId); walkEdges.push(edgeKeyFor(curId, nextId)); prevId = curId; curId = nextId; } return { walkNodes, walkEdges }; } function chainKey(chainEdges, R) { const eks = chainEdges.slice().sort(); const rs = R.slice().sort((a, b) => a - b); return eks.join(",") + "|" + rs.join(","); } for (const startNode of classifiedNodes) { for (const startSpoke of startNode.spokes) { const R0 = startSpoke.routeIdxs; // Chains describe SHARED corridors, so a single-route spoke starts // none. Routes that are alone on every spoke they use are handled by // insertUnplaced at the end. if (R0.length < 2) continue; const farId = startSpoke.farId; const ek0 = edgeKeyFor(startNode.id, farId); const fwd = walkOneDirection(startNode.id, farId, R0); const back = walkOneDirection(farId, startNode.id, R0); const nodes = []; const edgeList = []; for (let i = back.walkNodes.length - 1; i > 0; i--) { nodes.push(back.walkNodes[i]); } for (let i = back.walkEdges.length - 1; i >= 0; i--) { edgeList.push(back.walkEdges[i]); } nodes.push(startNode.id); nodes.push(farId); edgeList.push(ek0); for (let i = 1; i < fwd.walkNodes.length; i++) { nodes.push(fwd.walkNodes[i]); } for (const ek of fwd.walkEdges) edgeList.push(ek); const key = chainKey(edgeList, R0); if (seenChainKeys.has(key)) continue; seenChainKeys.add(key); chains.push({ nodes, edges: edgeList, routeIdxs: R0.slice() }); } } // ---- Frame conversion helpers (unchanged) ---- function chainForwardSign(network, fromId, toId, edge) { const A = network.nodes.get(fromId); const B = network.nodes.get(toId); if (!A || !B) return +1; const dx = B.x - A.x, dy = B.y - A.y; const dot = dy * edge.bundlePerpX + (-dx) * edge.bundlePerpY; return dot >= 0 ? +1 : -1; } function storedOrderForEdge(network, fromId, toId, edge, X) { const s = chainForwardSign(network, fromId, toId, edge); return s === +1 ? X.slice() : X.slice().reverse(); } // Does forward-CW index 0 sit on the coast side for this chain? function coastFirstForChain(chain) { let repEdge = null, repIdx = -1, bestN = -1; for (let i = 0; i < chain.edges.length; i++) { const e = edges.get(chain.edges[i]); if (!e || !e.groupKey) continue; const g = linkGroups && linkGroups.get(e.groupKey); const n = g && g.routeUnion ? g.routeUnion.length : 0; if (n > bestN) { bestN = n; repEdge = e; repIdx = i; } } if (!repEdge) return null; let coastDot = null; const g = linkGroups && linkGroups.get(repEdge.groupKey); if (g && g.areaSide) { const d = g.perpX * repEdge.bundlePerpX + g.perpY * repEdge.bundlePerpY; const sideInEdgeFrame = (Math.abs(d) > 1e-9 && d < 0) ? -g.areaSide : g.areaSide; coastDot = -sideInEdgeFrame; } if (coastDot == null) { let sx = 0, sy = 0; for (const nid of chain.nodes) { const acc = portwardByNode.get(nid); if (acc) { sx += acc.x; sy += acc.y; } } if (Math.hypot(sx, sy) > 1e-9) { const dot = sx * repEdge.bundlePerpX + sy * repEdge.bundlePerpY; if (Math.abs(dot) > 1e-9) coastDot = dot; } } if (coastDot == null) return null; const s = chainForwardSign(network, chain.nodes[repIdx], chain.nodes[repIdx + 1], repEdge); return ((coastDot < 0) === (s === +1)); } const result = new Map(); // Chain processing order: peripheral to center (route count ASC), then // edge count DESC, then first-node id. Unchanged. const sortedChains = chains.slice().sort((a, b) => { const dRoutes = a.routeIdxs.length - b.routeIdxs.length; if (dRoutes !== 0) return dRoutes; const dEdges = b.edges.length - a.edges.length; if (dEdges !== 0) return dEdges; return String(a.nodes[0]).localeCompare(String(b.nodes[0])); }); function routeDeflectionsAtSpoke(node, spoke) { const others = node && node.spokes ? node.spokes.filter(s => s !== spoke) : []; const map = new Map(); if (!spoke) return map; for (const r of spoke.routeIdxs) { let nextSpoke = null; for (const os of others) { if (os.routeIdxs.indexOf(r) !== -1) { nextSpoke = os; break; } } const defl = nextSpoke ? wrapPi(nextSpoke.angle - spoke.angle) : 0; const disp = Math.sin(defl); map.set(r, { otherSpoke: nextSpoke, defl, disp }); } return map; } function routeArrivingSpokeAt(nodeId, otherChainNodeId, routeIdx) { const n = nodeById.get(nodeId); if (!n || !n.spokes) return null; for (const sp of n.spokes) { if (sp.farId === otherChainNodeId) continue; if (sp.routeIdxs.indexOf(routeIdx) !== -1) return sp; } return null; } const chainsOut = []; for (const chain of sortedChains) { if (chain.routeIdxs.length === 0) continue; const lastIdx = chain.nodes.length - 1; const coastFirst = coastFirstForChain(chain); function prefCompareRoutes(a, b) { if (coastFirst == null) return 0; const cmp = cmpMetrics(metricForRoute(a), metricForRoute(b)); return coastFirst ? cmp : -cmp; } function prefCompareUnits(a, b) { if (coastFirst == null) return 0; const cmp = cmpMetrics(metricForRoutes(a.routes), metricForRoutes(b.routes)); return coastFirst ? cmp : -cmp; } // ---- Step 1: build units by (birthSpoke, deathSpoke) partition ---- const startNode0 = nodeById.get(chain.nodes[0]); const startSpoke0 = startNode0 ? spokeAt(startNode0, chain.nodes[1]) : null; const deflByRoute = startNode0 && startSpoke0 ? routeDeflectionsAtSpoke(startNode0, startSpoke0) : new Map(); const deathNodeId = chain.nodes[lastIdx]; const deathAdjId = chain.nodes[lastIdx - 1]; const deathNode = nodeById.get(deathNodeId); const deathOutSpoke = deathNode ? spokeAt(deathNode, deathAdjId) : null; const spokeIds = new Map(); let spokeSeq = 0; function spokeIdOf(s) { if (s == null) return "x"; let id = spokeIds.get(s); if (!id) { id = "s" + (spokeSeq++); spokeIds.set(s, id); } return id; } const classByKey = new Map(); for (const r of chain.routeIdxs) { const info = deflByRoute.get(r); const birthSpoke = info ? info.otherSpoke : null; const deathSpoke = routeArrivingSpokeAt(deathNodeId, deathAdjId, r); const key = spokeIdOf(birthSpoke) + "|" + spokeIdOf(deathSpoke); let cls = classByKey.get(key); if (!cls) { cls = { birthSpoke, deathSpoke, routes: [] }; classByKey.set(key, cls); } cls.routes.push(r); } function internalOrderForClass(classRoutes) { if (classRoutes.length <= 1) return classRoutes.slice(); const classSet = new Set(classRoutes); for (let i = 0; i < chain.edges.length; i++) { const e = edges.get(chain.edges[i]); if (!e || !e.groupKey) continue; const existing = result.get(e.groupKey); if (!existing) continue; const filtered = existing.filter(ri => classSet.has(ri)); if (filtered.length < 2) continue; const s = chainForwardSign(network, chain.nodes[i], chain.nodes[i + 1], e); return s === +1 ? filtered.slice() : filtered.slice().reverse(); } const sorted = classRoutes.slice().sort((a, b) => { const da = deflByRoute.get(a); const db = deflByRoute.get(b); const dispA = da ? da.disp : 0; const dispB = db ? db.disp : 0; if (dispB !== dispA) return dispB - dispA; const dpref = prefCompareRoutes(a, b); if (dpref !== 0) return dpref; return a - b; }); return sorted; } const units = []; for (const cls of classByKey.values()) { const info = deflByRoute.get(cls.routes[0]); const birthDisp = (cls.birthSpoke && info) ? info.disp : 0; let deathDisp = 0; if (deathOutSpoke && cls.deathSpoke) { deathDisp = Math.sin(wrapPi(cls.deathSpoke.angle - deathOutSpoke.angle)); } units.push({ routes: internalOrderForClass(cls.routes), isCluster: cls.routes.length >= 2, disp: birthDisp, deathDisp, birthSpoke: cls.birthSpoke, deathSpoke: cls.deathSpoke, }); } units.sort((a, b) => { if (b.disp !== a.disp) return b.disp - a.disp; if (a.deathDisp !== b.deathDisp) return a.deathDisp - b.deathDisp; const dpref = prefCompareUnits(a, b); if (dpref !== 0) return dpref; return Math.min(...a.routes) - Math.min(...b.routes); }); let X = []; for (const u of units) X = X.concat(u.routes); chainsOut.push({ nodes: chain.nodes.slice(), edges: chain.edges.slice(), routeIdxs: chain.routeIdxs.slice(), units: units, birthNode: chain.nodes[0], deathNode: chain.nodes[lastIdx], }); // ---- Step 2: walk each edge of the chain and convert to stored ---- const assignedGroups = new Set(); for (let i = 0; i < chain.edges.length; i++) { const e = edges.get(chain.edges[i]); if (!e || !e.groupKey) continue; if (assignedGroups.has(e.groupKey)) continue; assignedGroups.add(e.groupKey); const fromId = chain.nodes[i]; const toId = chain.nodes[i + 1]; let storedOrder = storedOrderForEdge(network, fromId, toId, e, X); const group = linkGroups && linkGroups.get(e.groupKey); const routeUnion = group && group.routeUnion ? group.routeUnion : storedOrder.slice(); const inGroup = new Set(routeUnion); storedOrder = storedOrder.filter(ri => inGroup.has(ri)); // Merge with any existing group order. AUTHORITY: the CURRENT chain // wins the relative order of the routes it carries. Chains are // processed smallest→largest, so the largest chain covering a group // has the final say. Sub-chain INTERNAL orders survive via anchor // inheritance into X. Routes in `existing` but NOT in this chain // keep their old neighbors: walk `existing` with a cursor into // `storedOrder`; shared routes emit in storedOrder's order (with // catch-up), existing-only routes emit in place. const existing = result.get(e.groupKey); if (existing) { const posIdx = new Map(); for (let k = 0; k < storedOrder.length; k++) posIdx.set(storedOrder[k], k); const merged = []; let cursor = 0; for (const r of existing) { if (posIdx.has(r)) { const idx = posIdx.get(r); if (idx < cursor) continue; while (cursor < idx) { merged.push(storedOrder[cursor]); cursor++; } merged.push(r); cursor = idx + 1; } else { merged.push(r); } } while (cursor < storedOrder.length) { merged.push(storedOrder[cursor]); cursor++; } result.set(e.groupKey, merged); } else { result.set(e.groupKey, storedOrder); } } } // Final safety net: routes present in a group's routeUnion but placed by // no chain. INSERTED at a locality-appropriate position rather than // appended to the outermost slot (see the header). if (linkGroups) { for (const [gk, group] of linkGroups) { const existing = result.get(gk); if (!existing) continue; const existingSet = new Set(existing); const missing = group.routeUnion.filter(ri => !existingSet.has(ri)); if (missing.length === 0) continue; result.set(gk, insertUnplaced(existing, missing, group)); } } return { orderings: result, chains: chainsOut }; };43:T6488,// Pure function. Given a combined path network, a node classification, // and the result of makeParallel, reorders each chain's TOP-LEVEL units // (without touching their internal locked order) to minimize a WEIGHTED // crossing count at the chain's two end junctions. // // Inputs: // network — from combinedPathNetwork // classified — from classifyPathNodes // parallelOut — { orderings, chains } from makeParallel // // Output: // Map re-derived stored orderings // // Soft dependencies (read from the notebook when present, ignored when // absent): `routes` for endpoint coordinates, `portClusters` for the // port-grouping. // // ====================================================================== // FIX — UNPLACED ROUTES NO LONGER LAND OUTERMOST // ====================================================================== // SYMPTOM: a route between two nearby port clusters draws as the // OUTERMOST strand of the coastal ribbon, outside long-haul traffic, // while other routes between the same clusters sit inshore. // // CAUSE: the safety net for routes no chain placed used to append: // // for (const ri of group.routeUnion) // if (!existingSet.has(ri)) existing.push(ri); // OLD // // push() puts the route at the END of the stored order — the OUTERMOST // slot of the bundle — every time, however local the voyage. Sorting // those routes among themselves (an earlier attempt) doesn't change where // the block lands. // // Routes drop out of chain coverage easily: makeParallel only builds // chains from spokes carrying 2+ routes, so a route alone on any spoke // along its corridor — what happens where a single strand peels toward // one berth of a port cluster — is never ordered and lands outermost. // // NOW: unplaced routes are INSERTED at a locality-appropriate position. // The existing order is walked and each unplaced route emitted before the // first route it should sit inshore of. Which end of the stored order is // coastal is derived per group (coastAtLowIndexForGroup). // // Per-group insertion can disagree with a neighbouring group, but these // routes were previously placed arbitrarily anyway, and optimizeIndex // runs enforceParallelChainConsistency afterwards, which conforms shared // sub-orders across adjacent groups. // // ====================================================================== // GRADED PREFERENCE STRENGTH // ====================================================================== // The preference used to add a flat PREF_STRENGTH per inverted unit pair. // It now scales with the LOCALITY GAP between the two units: // // strength(u,v) = MIN + (MAX - MIN) · min(1, |Δlocality| / FULL_MILES) // // so a 350-mile inter-cluster hop versus a 5,000-mile transpacific run // pushes hard, while two similar voyages stay a pure tie-break. // // PREF_STRENGTH_MAX = 0.12 sits just under W_MIN = 0.15, the cheapest // possible single-strand crossing, so no single pair inversion can buy a // crossing. In aggregate across many pairs it can outweigh one shallow // single-strand crossing — which is the intent here. Set // PREF_STRENGTH_MAX = PREF_STRENGTH_MIN to restore strict tie-break-only // behaviour. // // ====================================================================== // COAST-SIDE PREFERENCE FOR LOCAL VOYAGES // ====================================================================== // METRIC — locality first, then voyage length. Earlier attempts failed: // WAYPOINT COUNT measured mesh detail, not distance; POLYLINE LENGTH // measured the voyage but not what decides whether a route belongs // inshore, since berths within one region look like many distinct // origin/destination pairs rather than one. // // Primary key is LOCALITY: great-circle miles between the centroids of // the route's two endpoint PORT CLUSTERS (from portClusters), 0 when both // ends fall in the same cluster. All routes sharing a cluster pair score // identically, tie, and stay together as a block. Latitude-corrected // polyline length is the secondary key. Falls back to raw endpoint // great-circle distance without portClusters, and to polyline length // alone without `routes`. // // WHICH DIRECTION IS THE COAST — stored offset always increases along // +bundlePerp for every areaSide convention (+1: 0..n-1; -1: -(n-1)..0; // 0: centered), so one rule covers all three: the coast side is at LOW // stored index exactly when the landward direction dots negatively with // bundlePerp, giving // // coastFirst = ((coastDot < 0) === (forwardSign === +1)) // // Landward direction comes from areaSide when available (the walkable // area is the ocean, so land is opposite), otherwise from PORT // CONNECTORS: every route terminates at an "endpoint:" node at its port, // so the mean direction from mesh nodes toward incident endpoint nodes // points landward. Without the connector source, chains spanning only // areaSide = 0 groups got no preference at all — the common case for a // bundle running through open-water "area" hops offshore rather than // along coastline links, and the reason the preference only worked in // patches. // // ---------------------------------------------------------------------- // Crossing model, unchanged // ---------------------------------------------------------------------- // cost(O) = Σ_{pairs inverted vs birth preference} |u|·|v|·wBirth(u,v) // + Σ_{pairs inverted vs death preference} |u|·|v|·wDeath(u,v) // + preference term // // A pair inverted vs an end's preference physically crosses at that end, // and a unit-pair crossing is |u|×|v| actual strand crossings. The |u|·|v| // factor enforces "keep small divergers on the edge of a large bundle". // The shallowness weight // // w(u,v) = W_MIN + (1 - W_MIN) * (1 - |sin(θu - θv)|) // // is near-zero for perpendicular divergence spokes (a clean 90° X) and // maximal for near-parallel ones. // // Chains with ≤ MAX_EXACT_UNITS units get an exact permutation search; // larger ones seed with the cheaper end preference and run an // adjacent-transposition local-improvement pass. arrangeCrossings = function arrangeCrossings(network, classified, parallelOut) { const { edges, linkGroups } = network; const classifiedNodes = classified.nodes; const chains = parallelOut.chains.map(c => ({ ...c, units: c.units.map(u => ({ ...u, routes: u.routes.slice() })), })); const nodeById = new Map(); for (const n of classifiedNodes) nodeById.set(n.id, n); function spokeAt(node, farId) { if (!node) return null; for (const sp of node.spokes) if (sp.farId === farId) return sp; return null; } function wrapPi(a) { while (a > Math.PI) a -= 2 * Math.PI; while (a <= -Math.PI) a += 2 * Math.PI; return a; } function chainForwardSign(fromId, toId, edge) { const A = network.nodes.get(fromId); const B = network.nodes.get(toId); if (!A || !B) return +1; const dx = B.x - A.x, dy = B.y - A.y; const dot = dy * edge.bundlePerpX + (-dx) * edge.bundlePerpY; return dot >= 0 ? +1 : -1; } function storedOrderForEdge(fromId, toId, edge, X) { const s = chainForwardSign(fromId, toId, edge); return s === +1 ? X.slice() : X.slice().reverse(); } // ---- Coast-side preference: metric per route ---------------------- const MERCATOR_SCALE = 1000; // match navMesh's geoMercator().scale() const CORRECT_FOR_LATITUDE = true; // false -> raw Mercator length const R_MILES = 3958.8; const D2R = Math.PI / 180; const _routesArr = (typeof routes !== "undefined" && Array.isArray(routes)) ? routes : null; const _pc = (typeof portClusters !== "undefined" && portClusters) ? portClusters : null; function gcMiles(lonA, latA, lonB, latB) { const dLat = (latB - latA) * D2R; const dLon = (lonB - lonA) * D2R; const s = Math.sin(dLat / 2) ** 2 + Math.cos(latA * D2R) * Math.cos(latB * D2R) * Math.sin(dLon / 2) ** 2; return 2 * R_MILES * Math.asin(Math.min(1, Math.sqrt(s))); } // routeIdx -> { locality, length } const metricByRoute = new Map(); if (network.paths) { for (const p of network.paths) { const wps = p.waypoints || []; let len = 0; for (let i = 0; i < wps.length - 1; i++) { const a = wps[i], b = wps[i + 1]; let d = Math.hypot(b.x - a.x, b.y - a.y); if (CORRECT_FOR_LATITUDE && MERCATOR_SCALE > 0) { d /= Math.cosh(((a.y + b.y) / 2) / MERCATOR_SCALE); } len += d; } let locality = null; const rec = _routesArr ? _routesArr[p.routeId] : null; if (rec) { const aLon = +rec.load_lon, aLat = +rec.load_lat; const bLon = +rec.unload_lon, bLat = +rec.unload_lat; if (isFinite(aLon) && isFinite(aLat) && isFinite(bLon) && isFinite(bLat)) { locality = (_pc && typeof _pc.clusterDistanceMiles === "function") ? _pc.clusterDistanceMiles(aLon, aLat, bLon, bLat) : gcMiles(aLon, aLat, bLon, bLat); } } metricByRoute.set(p.routeIdx, { locality, length: len }); } } function metricForRoute(routeIdx) { return metricByRoute.get(routeIdx) || null; } function metricForUnit(u) { let sL = 0, nL = 0, sD = 0, nD = 0; for (const r of u.routes) { const m = metricForRoute(r); if (!m) continue; if (m.locality != null) { sL += m.locality; nL++; } sD += m.length; nD++; } if (!nD) return null; return { locality: nL ? sL / nL : null, length: sD / nD }; } const METRIC_REL_EPS = 1e-6; function tie(a, b) { return Math.abs(a - b) <= METRIC_REL_EPS * (Math.abs(a) + Math.abs(b) + 1); } // Negative => ma belongs nearer the coast than mb. function cmpMetrics(ma, mb) { if (!ma || !mb) return 0; if (ma.locality != null && mb.locality != null && !tie(ma.locality, mb.locality)) { return ma.locality - mb.locality; } if (!tie(ma.length, mb.length)) return ma.length - mb.length; return 0; } // ---- Landward direction from port connectors ---------------------- const portwardByNode = new Map(); for (const [, e] of edges) { const A = network.nodes.get(e.a), B = network.nodes.get(e.b); if (!A || !B) continue; let base = null, far = null; if (B.kind === "endpoint" && A.kind !== "endpoint") { base = A; far = B; } else if (A.kind === "endpoint" && B.kind !== "endpoint") { base = B; far = A; } if (!base) continue; const dx = far.x - base.x, dy = far.y - base.y; const L = Math.hypot(dx, dy); if (L < 1e-9) continue; let acc = portwardByNode.get(base.id); if (!acc) { acc = { x: 0, y: 0 }; portwardByNode.set(base.id, acc); } acc.x += dx / L; acc.y += dy / L; } // Is stored index 0 the coast side of this group? null when unknown. function coastAtLowIndexForGroup(group) { if (!group) return null; if (group.areaSide === +1) return true; if (group.areaSide === -1) return false; let sx = 0, sy = 0; for (const ek of (group.edgeKeys || [])) { const e = edges.get(ek); if (!e) continue; for (const nid of [e.a, e.b]) { const acc = portwardByNode.get(nid); if (acc) { sx += acc.x; sy += acc.y; } } } if (Math.hypot(sx, sy) < 1e-9) return null; const dot = sx * group.perpX + sy * group.perpY; if (Math.abs(dot) < 1e-9) return null; return dot < 0; } // Merge unplaced routes into an existing stored order at // locality-appropriate positions instead of appending them outermost. function insertUnplaced(existing, missing, group) { const lowIsCoast = coastAtLowIndexForGroup(group); if (lowIsCoast == null) { const out = existing.slice(); for (const r of missing) out.push(r); return out; } const ms = missing.slice().sort((a, b) => { const cmp = cmpMetrics(metricForRoute(a), metricForRoute(b)); if (cmp !== 0) return lowIsCoast ? cmp : -cmp; return a - b; }); const out = []; let mi = 0; for (const r of existing) { while (mi < ms.length) { const cmp = cmpMetrics(metricForRoute(ms[mi]), metricForRoute(r)); const msFirst = lowIsCoast ? (cmp < 0) : (cmp > 0); if (!msFirst) break; out.push(ms[mi++]); } out.push(r); } while (mi < ms.length) out.push(ms[mi++]); return out; } // Does forward-CW index 0 sit on the coast side for this chain? function coastFirstForChain(chain) { let repEdge = null, repIdx = -1, bestN = -1; for (let i = 0; i < chain.edges.length; i++) { const e = edges.get(chain.edges[i]); if (!e || !e.groupKey) continue; const g = linkGroups && linkGroups.get(e.groupKey); const n = g && g.routeUnion ? g.routeUnion.length : 0; if (n > bestN) { bestN = n; repEdge = e; repIdx = i; } } if (!repEdge) return null; let coastDot = null; const g = linkGroups && linkGroups.get(repEdge.groupKey); if (g && g.areaSide) { const d = g.perpX * repEdge.bundlePerpX + g.perpY * repEdge.bundlePerpY; const sideInEdgeFrame = (Math.abs(d) > 1e-9 && d < 0) ? -g.areaSide : g.areaSide; coastDot = -sideInEdgeFrame; } if (coastDot == null) { let sx = 0, sy = 0; for (const nid of chain.nodes) { const acc = portwardByNode.get(nid); if (acc) { sx += acc.x; sy += acc.y; } } if (Math.hypot(sx, sy) > 1e-9) { const dot = sx * repEdge.bundlePerpX + sy * repEdge.bundlePerpY; if (Math.abs(dot) > 1e-9) coastDot = dot; } } if (coastDot == null) return null; const s = chainForwardSign(chain.nodes[repIdx], chain.nodes[repIdx + 1], repEdge); return ((coastDot < 0) === (s === +1)); } // ---- Preference term --------------------------------------------- const PREF_STRENGTH_MIN = 0.01; const PREF_STRENGTH_MAX = 0.12; // just below W_MIN = 0.15 const LOCALITY_FULL_MILES = 1000; // gap at which strength saturates let _prefMetric = null; // Map let _prefCoastFirst = null; // boolean | null function prefStrengthFor(ma, mb) { if (!ma || !mb || ma.locality == null || mb.locality == null) return PREF_STRENGTH_MIN; const t = Math.min(1, Math.abs(ma.locality - mb.locality) / LOCALITY_FULL_MILES); return PREF_STRENGTH_MIN + (PREF_STRENGTH_MAX - PREF_STRENGTH_MIN) * t; } function prefCost(O) { if (!_prefMetric || _prefCoastFirst == null) return 0; let c = 0; for (let i = 0; i < O.length; i++) { for (let j = i + 1; j < O.length; j++) { const ma = _prefMetric.get(O[i]), mb = _prefMetric.get(O[j]); const cmp = cmpMetrics(ma, mb); if (cmp === 0) continue; const inverted = _prefCoastFirst ? (cmp > 0) : (cmp < 0); if (inverted) c += prefStrengthFor(ma, mb); } } return c; } function prefCompare(a, b) { if (!_prefMetric || _prefCoastFirst == null) return 0; const cmp = cmpMetrics(_prefMetric.get(a), _prefMetric.get(b)); return _prefCoastFirst ? cmp : -cmp; } // ---- End preference: forward-frame lateral key + spoke angle ------ // Units with EQUAL f at an end share a spoke there — they arrive or // depart bundled, so their relative order causes no crossing AT THIS // END (any needed crossing between them belongs to the neighboring // chain and is decided there). function endPreference(endNodeId, adjNodeId, units, endIsBirth) { const endNode = nodeById.get(endNodeId); const outgoingSpoke = endNode ? spokeAt(endNode, adjNodeId) : null; if (!endNode || !outgoingSpoke) { return { ok: false, f: null, angle: null }; } const f = new Map(); const angle = new Map(); for (const u of units) { const spoke = endIsBirth ? u.birthSpoke : u.deathSpoke; const defl = spoke ? wrapPi(spoke.angle - outgoingSpoke.angle) : 0; const disp = Math.sin(defl); f.set(u, endIsBirth ? disp : -disp); angle.set(u, spoke ? spoke.angle : null); } return { ok: true, f, angle }; } const W_MIN = 0.15; function crossWeight(aU, aV) { if (aU == null || aV == null) return 1; return W_MIN + (1 - W_MIN) * (1 - Math.abs(Math.sin(aU - aV))); } function pairW(u, v) { return u.routes.length * v.routes.length; } const F_EPS = 1e-9; function endCost(O, pref) { if (!pref || !pref.ok) return 0; let cost = 0; for (let i = 0; i < O.length; i++) { for (let j = i + 1; j < O.length; j++) { if (pref.f.get(O[i]) < pref.f.get(O[j]) - F_EPS) { cost += crossWeight(pref.angle.get(O[i]), pref.angle.get(O[j])) * pairW(O[i], O[j]); } } } return cost; } function totalCost(O, birth, death) { return endCost(O, birth) + endCost(O, death) + prefCost(O); } function sortUnitsBy(units, primary, secondary) { return units.slice().sort((a, b) => { const dp = primary.f.get(b) - primary.f.get(a); if (Math.abs(dp) > F_EPS) return dp; if (secondary && secondary.ok) { const ds = secondary.f.get(b) - secondary.f.get(a); if (Math.abs(ds) > F_EPS) return ds; } const dpref = prefCompare(a, b); if (dpref !== 0) return dpref; return Math.min(...a.routes) - Math.min(...b.routes); }); } function sameOrder(a, b) { if (a.length !== b.length) return false; for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false; return true; } const MAX_EXACT_UNITS = 6; function bestPermutation(units, birth, death, seedOrder, seedCost) { let best = seedOrder, bestCost = seedCost; const arr = units.slice(); const k = arr.length; const used = new Array(k).fill(false); const cur = new Array(k); (function rec(depth) { if (depth === k) { const c = totalCost(cur, birth, death); if (c < bestCost - 1e-12) { bestCost = c; best = cur.slice(); } return; } for (let i = 0; i < k; i++) { if (used[i]) continue; used[i] = true; cur[depth] = arr[i]; rec(depth + 1); used[i] = false; } })(0); return best; } function localImprove(order, birth, death) { const O = order.slice(); let cost = totalCost(O, birth, death); const MAX_PASSES = 12; for (let p = 0; p < MAX_PASSES; p++) { let improved = false; for (let i = 0; i < O.length - 1; i++) { const a = O[i], b = O[i + 1]; O[i] = b; O[i + 1] = a; const c = totalCost(O, birth, death); if (c < cost - 1e-12) { cost = c; improved = true; } else { O[i] = a; O[i + 1] = b; } } if (!improved) break; } return O; } // Direction-canonical key, used ONLY to break exact cost ties. The // crossing cost is symmetric under reversing the chain's traversal // direction, so a naive "ties → birth" rule would let the arbitrary // orientation the chain enumeration picked leak into the result. function seqKey(O) { const f = O.map(u => Math.min(...u.routes)).join(","); const r = O.slice().reverse().map(u => Math.min(...u.routes)).join(","); return f < r ? f : r; } function chooseUnitOrder(chain) { const lastIdx = chain.nodes.length - 1; if (lastIdx < 1 || chain.units.length < 2) return chain.units.slice(); _prefCoastFirst = coastFirstForChain(chain); _prefMetric = null; if (_prefCoastFirst != null) { _prefMetric = new Map(); for (const u of chain.units) _prefMetric.set(u, metricForUnit(u)); } try { const birth = endPreference(chain.nodes[0], chain.nodes[1], chain.units, true); const death = endPreference(chain.nodes[lastIdx], chain.nodes[lastIdx - 1], chain.units, false); if (!birth.ok && !death.ok) return chain.units.slice(); if (!death.ok) return sortUnitsBy(chain.units, birth, null); if (!birth.ok) return sortUnitsBy(chain.units, death, null); const candBirth = sortUnitsBy(chain.units, birth, death); const candDeath = sortUnitsBy(chain.units, death, birth); if (sameOrder(candBirth, candDeath)) return candBirth; const cb = totalCost(candBirth, birth, death); const cd = totalCost(candDeath, birth, death); let seed, seedCost; if (cb < cd - 1e-12) { seed = candBirth; seedCost = cb; } else if (cd < cb - 1e-12) { seed = candDeath; seedCost = cd; } else { seed = seqKey(candBirth) <= seqKey(candDeath) ? candBirth : candDeath; seedCost = cb; } if (chain.units.length <= MAX_EXACT_UNITS) { return bestPermutation(chain.units, birth, death, seed, seedCost); } return localImprove(seed, birth, death); } finally { _prefMetric = null; _prefCoastFirst = null; } } function sortChains(arr) { return arr.slice().sort((a, b) => { const dR = a.routeIdxs.length - b.routeIdxs.length; if (dR !== 0) return dR; const dE = b.edges.length - a.edges.length; if (dE !== 0) return dE; return String(a.nodes[0]).localeCompare(String(b.nodes[0])); }); } function buildOrderings() { const result = new Map(); const sortedChains = sortChains(chains); for (const chain of sortedChains) { if (chain.routeIdxs.length === 0) continue; let X = []; for (const u of chain.units) X = X.concat(u.routes); const assignedGroups = new Set(); for (let i = 0; i < chain.edges.length; i++) { const e = edges.get(chain.edges[i]); if (!e || !e.groupKey) continue; if (assignedGroups.has(e.groupKey)) continue; assignedGroups.add(e.groupKey); const fromId = chain.nodes[i]; const toId = chain.nodes[i + 1]; let storedOrder = storedOrderForEdge(fromId, toId, e, X); const group = linkGroups && linkGroups.get(e.groupKey); const routeUnion = group && group.routeUnion ? group.routeUnion : storedOrder.slice(); const inGroup = new Set(routeUnion); storedOrder = storedOrder.filter(ri => inGroup.has(ri)); // AUTHORITY: the CURRENT chain wins the relative order of the // routes it carries. Chains are processed smallest→largest, so the // largest chain covering a group — the one that saw the divergence // and arranged its units — has the final say. Sub-chain INTERNAL // orders survive via anchor inheritance into X. Routes in // `existing` but NOT in this chain keep their old neighbors. const existing = result.get(e.groupKey); if (existing) { const posIdx = new Map(); for (let k = 0; k < storedOrder.length; k++) posIdx.set(storedOrder[k], k); const merged = []; let cursor = 0; for (const r of existing) { if (posIdx.has(r)) { const idx = posIdx.get(r); if (idx < cursor) continue; while (cursor < idx) { merged.push(storedOrder[cursor]); cursor++; } merged.push(r); cursor = idx + 1; } else { merged.push(r); } } while (cursor < storedOrder.length) { merged.push(storedOrder[cursor]); cursor++; } result.set(e.groupKey, merged); } else { result.set(e.groupKey, storedOrder); } } } // Routes in routeUnion that no chain placed: INSERTED by locality // rather than appended to the outermost slot. if (linkGroups) { for (const [gk, group] of linkGroups) { const existing = result.get(gk); if (!existing) continue; const existingSet = new Set(existing); const missing = group.routeUnion.filter(ri => !existingSet.has(ri)); if (missing.length === 0) continue; result.set(gk, insertUnplaced(existing, missing, group)); } } return result; } function refreshSubClustersFromOrderings(orderings) { for (const chain of chains) { const chainRouteSet = new Set(chain.routeIdxs); for (let i = 0; i < chain.edges.length; i++) { const e = edges.get(chain.edges[i]); if (!e || !e.groupKey) continue; const existing = orderings.get(e.groupKey); if (!existing) continue; const filtered = existing.filter(ri => chainRouteSet.has(ri)); let clusterUnit = null; for (const u of chain.units) if (u.isCluster) { clusterUnit = u; break; } if (!clusterUnit) break; const clusterSet = new Set(clusterUnit.routes); const s = chainForwardSign(chain.nodes[i], chain.nodes[i + 1], e); const filteredFwdCW = s === +1 ? filtered.slice() : filtered.slice().reverse(); const newClusterRoutes = filteredFwdCW.filter(r => clusterSet.has(r)); if (newClusterRoutes.length === clusterUnit.routes.length) { clusterUnit.routes = newClusterRoutes; } break; } } } const MAX_ITERS = 6; let orderings = parallelOut.orderings; for (let iter = 0; iter < MAX_ITERS; iter++) { let anyChange = false; for (const chain of chains) { const chosen = chooseUnitOrder(chain); let differ = false; if (chosen.length !== chain.units.length) { differ = true; } else { for (let k = 0; k < chosen.length; k++) { if (chosen[k] !== chain.units[k]) { differ = true; break; } } } if (differ) { chain.units = chosen.slice(); anyChange = true; } } orderings = buildOrderings(); refreshSubClustersFromOrderings(orderings); if (!anyChange) break; } return orderings; };44:T24ac,// Cell: enforceParallelChainConsistency // // FINAL CONSISTENCY PASS over `orderings`. // // Invariant enforced // ------------------ // At EVERY junction, for every pair of adjacent edge groups (gkIn, // gkOut) traversed consecutively by some route, the routes that pass // through that junction TOGETHER (on both edges) must keep the same // relative order on both groups (sign-corrected for the two groups' // stored frames). A violation is a visible strand crossing at a shared // waypoint — the number one thing that must never happen — whether the // junction is a parallel pass-through or a decision node where other // routes split off. // // Why not the previous designs // ---------------------------- // * Global total-order vote per component (original): junctions of // ALL kinds glued the network into huge components, and one // canonical order — aggregated from distant groups through // arbitrarily-composed sign frames — was written onto every group. // That overrode arrangeCrossings' divergence-aware placement // (small diverging groups got pulled to the middle of big // bundles). // * Restricting links to classification === "parallel": decision // nodes lost all enforcement, so the 28 routes continuing through // a 30→(28,2) split could scramble between the inbound and // outbound groups — twists between shared waypoints. // // This version // ------------ // The constraint is a SHARED-SUBORDER constraint, not a total order: // // 1. Collect links at ALL interior waypoints. Each link (gkA, gkB) // carries sign = ±1 (whether the two stored frames agree) and the // SET of routes that actually traverse the pair together. // 2. Per connected component, pick the group with the LARGEST // routeUnion as root. Big bundles dictate; neighbors conform. // 3. BFS from the root. For each tree edge parent → child: permute // the child's shared routes WITHIN THEIR EXISTING SLOTS so their // relative order matches the parent's (sign-corrected). The // child's other routes — including a big bundle's diverger // placement when the parent doesn't carry those divergers — are // untouched. // // Deterministic, single pass, idempotent (a second run is a no-op). // Non-tree links (cycles in the group graph — physical loops) are not // re-enforced; rare, and the tree covers all connectivity. // // Inputs // network — combined path network // classified — kept for signature compatibility (unused; links are // derived directly from network.paths) // orderings — Map from optimizeIndex // // Output // The same orderings Map, mutated in place. Returned for chaining. // // Safety // Never introduces a route outside a group's routeUnion; preserves // each group's route membership exactly. Only reorders. enforceParallelChainConsistency = function enforceParallelChainConsistency(network, classified, orderings) { if (!orderings || orderings.size === 0) return orderings; if (!network || !network.edges || !network.linkGroups) return orderings; const edgeKey = (a, b) => a < b ? a + "||" + b : b + "||" + a; // ------------------------------------------------------------------- // Step 1: collect links between adjacent groups, with the set of // routes co-traversing each pair. Walk every path's waypoint triples // directly — every interior waypoint counts, decision or parallel. // ------------------------------------------------------------------- const links = new Map(); // canon "gkA|gkB" -> { a, b, sign, shared:Set } for (const p of network.paths) { const wps = p.waypoints; if (!wps || wps.length < 3) continue; for (let i = 1; i < wps.length - 1; i++) { const prev = wps[i - 1], cur = wps[i], next = wps[i + 1]; const eIn = network.edges.get(edgeKey(prev.id, cur.id)); const eOut = network.edges.get(edgeKey(cur.id, next.id)); if (!eIn || !eOut) continue; const gkIn = eIn.groupKey, gkOut = eOut.groupKey; if (!gkIn || !gkOut || gkIn === gkOut) continue; const dot = eIn.bundlePerpX * eOut.bundlePerpX + eIn.bundlePerpY * eOut.bundlePerpY; if (Math.abs(dot) < 1e-9) continue; // near-perpendicular frames: sign undefined const sign = dot >= 0 ? +1 : -1; const canon = gkIn < gkOut ? gkIn + "|" + gkOut : gkOut + "|" + gkIn; let L = links.get(canon); if (!L) { L = { a: gkIn < gkOut ? gkIn : gkOut, b: gkIn < gkOut ? gkOut : gkIn, sign, shared: new Set(), }; links.set(canon, L); } L.shared.add(p.routeIdx); } } // Adjacency over groups. const adjacency = new Map(); // gk -> [{ neighbor, sign, shared }] function addAdj(gk, entry) { let arr = adjacency.get(gk); if (!arr) { arr = []; adjacency.set(gk, arr); } arr.push(entry); } for (const L of links.values()) { addAdj(L.a, { neighbor: L.b, sign: L.sign, shared: L.shared }); addAdj(L.b, { neighbor: L.a, sign: L.sign, shared: L.shared }); } // Ensure every group with an ordering appears (isolated ones too). for (const gk of orderings.keys()) { if (!adjacency.has(gk)) adjacency.set(gk, []); } // ------------------------------------------------------------------- // Step 2: connected components. // ------------------------------------------------------------------- const compOf = new Map(); const components = []; for (const gk of adjacency.keys()) { if (compOf.has(gk)) continue; const idx = components.length; const members = []; const stack = [gk]; compOf.set(gk, idx); while (stack.length) { const cur = stack.pop(); members.push(cur); for (const { neighbor } of (adjacency.get(cur) || [])) { if (!compOf.has(neighbor)) { compOf.set(neighbor, idx); stack.push(neighbor); } } } components.push(members); } function unionSize(gk) { const g = network.linkGroups.get(gk); return g && g.routeUnion ? g.routeUnion.length : 0; } // ------------------------------------------------------------------- // Step 3: BFS tree propagation of shared-suborder constraints. // // For a tree edge parent → child with sign s and shared set S: // target = parentOrder filtered to S; reversed when s = -1 // (stored(gkB) equals stored(gkA) when s = +1, else its // reverse, for the same forward-CW arrangement). // childOrder' = childOrder with the routes of S permuted within // their existing slot positions to follow `target`. // Everything else in the child (its own divergers, singletons, other // sub-bundles) keeps its slot. // ------------------------------------------------------------------- function conformChild(childGk, parentGk, sign, shared) { const parentOrder = orderings.get(parentGk); if (!parentOrder || parentOrder.length < 2) return; const childGrp = network.linkGroups.get(childGk); const childUnion = childGrp && childGrp.routeUnion ? childGrp.routeUnion : null; let childOrder = orderings.get(childGk); if (!childOrder) { if (!childUnion) return; childOrder = childUnion.slice().sort((a, b) => a - b); } else { childOrder = childOrder.slice(); } const childSet = new Set(childOrder); // Effective shared set: co-traversing routes present in BOTH orders. const parentSet = new Set(parentOrder); const S = new Set(); for (const r of shared) { if (childSet.has(r) && parentSet.has(r)) S.add(r); } if (S.size < 2) { orderings.set(childGk, childOrder); return; } // Target sequence in the child's stored frame. let target = parentOrder.filter(r => S.has(r)); if (sign === -1) target = target.reverse(); // Rewrite the child's shared slots in target order. let k = 0; for (let i = 0; i < childOrder.length; i++) { if (S.has(childOrder[i])) childOrder[i] = target[k++]; } orderings.set(childGk, childOrder); } for (const members of components) { if (members.length < 2) continue; // Root: largest routeUnion, tie-break by groupKey for determinism. let root = members[0]; for (const gk of members) { const d = unionSize(gk) - unionSize(root); if (d > 0 || (d === 0 && gk < root)) root = gk; } // BFS from root; conform each child to its tree parent. const visited = new Set([root]); const queue = [root]; while (queue.length) { const parent = queue.shift(); const nbrs = (adjacency.get(parent) || []) .slice() // Deterministic child order: bigger groups first, then key — // so the most constrained neighbors inherit directly from the // closest-to-root authority. .sort((x, y) => { const d = unionSize(y.neighbor) - unionSize(x.neighbor); if (d !== 0) return d; return x.neighbor < y.neighbor ? -1 : x.neighbor > y.neighbor ? 1 : 0; }); for (const { neighbor, sign, shared } of nbrs) { if (visited.has(neighbor)) continue; visited.add(neighbor); conformChild(neighbor, parent, sign, shared); queue.push(neighbor); } } } return orderings; };45:T19f9,// Pure function (with intentional side effects on network.edges). // Given a combined path network (from combinedPathNetwork) and a node // classification (from classifyPathNodes), returns optimized bundle // orderings keyed by groupKey: // // Map in each group's stored frame // // AND writes final, GAP-FREE per-edge offsets into // network.edges[*].bundleOffsetByRoute (see "gap fix" below). // // ---------------------------------------------------------------------- // Pipeline // ---------------------------------------------------------------------- // For up to MAX_ITERS iterations: // 1. makeParallel(network, classified) // 2. arrangeCrossings(network, classified, parallelOut) // 3. Apply the resulting orderings to network.edges (GROUP-slot // layout — stable rank seeding for the next iteration). // 4. Stop when orderings reach a fixed point. // // Then ONE global parallel-chain consistency pass // (enforceParallelChainConsistency). This replaces the old pairwise // "walk every parallel junction and fix one mismatch per pass" // enforcer, which is subsumed by the global pass: the global pass // groups all parallel-linked groups into maximal components and // rewrites each component to a single canonical forward-CW order // (weighted pairwise vote). It's idempotent, can't oscillate, and // directly guarantees priority #1: routes never cross BETWEEN two // shared waypoints, because every group in a parallel chain carries // the same forward-CW arrangement. Dropping the legacy pass also // removes up to 16 full sweeps over every parallel junction. // // Finally, orderings are applied to network.edges with PER-EDGE // COMPACTION (the gap fix). // // ---------------------------------------------------------------------- // Gap fix (per-edge compaction) // ---------------------------------------------------------------------- // A link group spans the sub-segments a derived link is split into by // snap points. Different sub-segments carry different route subsets (a // route joins/leaves the link at its snap). The old layout assigned // each route a GLOBAL slot within the group — so an edge carrying only // routes {1, 3} of a 5-route group rendered strands at offsets 1 and 3 // with empty slots between them: the visible "gaps in edges that have // multiple paths". // // The compacted layout keeps the group's relative ORDER (so nothing // crosses) but assigns contiguous slots per edge: an edge with k // routes uses exactly k adjacent slots, anchored per the group's // areaSide convention (+1: 0..k-1 into the CCW side; -1: -(k-1)..0; // 0: centered). Strands converge/diverge smoothly where a route joins // or leaves at a snap node, which is standard metro-map behavior. // alignRoutes reads bundleOffsetByRoute afterwards, so its ea/aa/el // shifts adapt automatically. // // NOTE: if your chart cell (applyOptimizedOrderings / chartNavMesh) // RECOMPUTES offsets from the orderings Map instead of reading // e.bundleOffsetByRoute, the gap fix won't show up — have it read the // per-edge offsets this cell writes, or port the compaction loop into // the chart cell. optimizeIndex = function optimizeIndex(network, classified) { const MAX_ITERS = 8; const SPACING = 1; // unitless layout slots; ordering + rank only function orderingsEqual(a, b) { if (a === b) return true; if (!a || !b) return false; if (a.size !== b.size) return false; for (const [k, v] of a) { const w = b.get(k); if (!w || w.length !== v.length) return false; for (let i = 0; i < v.length; i++) if (v[i] !== w[i]) return false; } return true; } function slotOffset(k, n, areaSide) { if (areaSide === +1) return +k; if (areaSide === -1) return k - (n - 1); return k - (n - 1) / 2; } // Write per-group layouts to network.edges.bundleOffsetByRoute. // // compact = false — group-global slots (each route keeps one slot // across the whole group). Used during iterations so makeParallel // sees stable ranks when seeding. // compact = true — per-edge contiguous slots in the group's order // (the gap fix). Used once, at the end. function applyOrderingsToNetwork(orderings, compact) { const linkGroups = network.linkGroups; if (!linkGroups || !orderings || orderings.size === 0) return; for (const [gk, ord] of orderings) { const group = linkGroups.get(gk); if (!group) continue; const inGroup = new Set(group.routeUnion); const filtered = (Array.isArray(ord) ? ord : []).filter(r => inGroup.has(r)); for (const r of group.routeUnion) if (!filtered.includes(r)) filtered.push(r); if (!compact) { const n = filtered.length; const layout = new Map(); for (let k = 0; k < n; k++) { layout.set(filtered[k], slotOffset(k, n, group.areaSide) * SPACING); } for (const ek of group.edgeKeys) { const e = network.edges.get(ek); if (!e) continue; e.bundleOffsetByRoute = new Map(); for (const ri of e.routeIdxs) { if (layout.has(ri)) e.bundleOffsetByRoute.set(ri, layout.get(ri)); } } } else { // Per-edge compaction: same relative order, contiguous slots. for (const ek of group.edgeKeys) { const e = network.edges.get(ek); if (!e) continue; const onEdge = new Set(e.routeIdxs); const seq = filtered.filter(r => onEdge.has(r)); const n = seq.length; e.bundleOffsetByRoute = new Map(); for (let k = 0; k < n; k++) { e.bundleOffsetByRoute.set(seq[k], slotOffset(k, n, group.areaSide) * SPACING); } } } } } // --- Iterate makeParallel + arrangeCrossings to a fixed point --- let orderings = null; for (let iter = 0; iter < MAX_ITERS; iter++) { const parallelOut = makeParallel(network, classified); const next = arrangeCrossings(network, classified, parallelOut); if (orderingsEqual(orderings, next)) { orderings = next; break; } orderings = next; applyOrderingsToNetwork(orderings, false); } if (!orderings) orderings = new Map(); // --- Global parallel-chain consistency pass --- // Guarantees a single forward-CW arrangement along every maximal // parallel chain (no crossings between shared waypoints). Idempotent. enforceParallelChainConsistency(network, classified, orderings); // --- Final application: gap-free per-edge offsets --- applyOrderingsToNetwork(orderings, true); return orderings; };46:T64c7,// Pure function. Returns per-route shifts to apply at the J-end of // area-type segments meeting an edge-type segment ("ea" bias), at the // J-end of area-type segments where a route bends area→area through J at // a junction that has edge spokes ("aa with edges" bias), at the J-end of // area-type segments where the route bends area→area through a pure // type-2 (parallel) junction with no edge spokes ("aa type-2" bias), or // at the J-end of LINK-type segments where the route bends edge→link (or // link→edge) through a PARALLEL junction whose only spokes are one edge // and one link ("el" bias). // // Shift magnitudes are in MESH DISTANCE units (scaled by // configNavMesh.bundle.spacing), matching the renderer's existing // `bShft` which multiplies by `csScl`. No renderer change is needed for // this version, and the existing fan-out behaviour is preserved. // // Call it with the mesh as a fifth argument to enable the walkability // probes: // // const algn = alignRoutes(network, cls, ords, _cfgNav, navMesh.mesh); // // Without the mesh it degrades gracefully to pure geometry. // // ====================================================================== // FIX 1 — BOUNDED aa CLEARANCE (MAX_AA_CLEARANCE, see below) // ====================================================================== // SYMPTOM: a block of routes sharing one cargo type draws roughly one // bundle-width outside the ribbon, running parallel, converging back // where the geometry changes. Unaffected by bundle offset spacing, // per-edge compaction, gap retention, or ordering propagation — because // it happens in the SHIFT pathway, not in bundleOffsetByRoute. // // CAUSE: applyAaShiftFromEdges used to anchor the area cluster past the // outermost slot of the ENTIRE coastline bundle at the junction: // // for (const e of edgesAtJ) { // const { maxAbs, signOf } = edgeMaxOffsetAt(e); // if (maxAbs > maxEdgeIdx) maxEdgeIdx = maxAbs; // whole bundle // } // ... applyAaShiftWithDir(..., maxEdgeIdx + 1); // // so every area-type (open-water) segment meeting that junction started // one slot beyond the full ribbon width. A coastline link carrying 30 // routes pushed an attached area segment to slot 31 — about one // ribbon-width offshore. // // applyAaShiftWithDir then re-ranks ONLY the routes on that area segment, // compacting them into startOffset, startOffset+1, ... irrespective of // their position in the group ordering. So a set of routes that shares a // port pair — and therefore takes the same open-water hop while the rest // of the ribbon follows the coastline link — is the only set that gets // the aa treatment at that junction, and the whole set is displaced past // the ribbon together. Same cargo type, same offset, every time. // // The original intent was sound: keep the area cluster from drawing on // top of the coastline bundle. But clearing the WHOLE bundle is far more // clearance than needed — overlap can only occur near J itself, and the // cluster's own routes already have a lateral position on the coastline // edge that it should stay continuous with. // // NOW: clearance is measured against only the coastline strands lying // between the coast and THIS CLUSTER'S OWN routes. // // * If any of the area segment's routes are also on an edge spoke at J // (the normal case — the cluster peels off a bundle it belonged to), // clearance is the outermost of THEIR offsets there, so the cluster // continues from where it already was instead of jumping to the far // side of the ribbon. Same continuity principle applyEaShift uses. // * If none of its routes touch the coastline spokes at J, there is no // shared bundle to stay continuous with, so it falls back to the old // whole-bundle clearance, CLAMPED by MAX_AA_CLEARANCE. // // Offsets are read as |o| because an area-edge group is laid out 0..n-1 // (areaSide +1) or -(n-1)..0 (areaSide -1); either way |o| is the // strand's distance from the link, which is what clearance means. // // MAX_AA_CLEARANCE is the knob. Set it to Infinity to restore the exact // old behaviour; lower it to hold clusters tighter against the coast. // // ====================================================================== // FIX 2 — MESH-AUTHORITATIVE INTO-AREA DIRECTION (the land-side bug) // ====================================================================== // The into-area direction used to be reconstructed from the SIGNS of the // offsets on the incident edge (coastline) spokes: // // let maxAbs = 0, signOf = +1; // OLD // for (const off of e.bundleOffsetByRoute.values()) // if (Math.abs(off) > maxAbs) { ...; signOf = off >= 0 ? +1 : -1; } // // which silently defaulted to +1 for any edge carrying only offset-0 // routes — e.g. a single-route coastline link with areaSide = -1, whose // only offset is 0 - (n-1) = 0. The area cluster was then anchored onto // the LAND side, which is why a handful of routes out of hundreds ran // over the coast while every multi-route bundle behaved. // // 1. intoAreaSignForEdgeSeg(e) reads the authoritative // network.linkGroups.get(e.groupKey).areaSide together with the // group's canonical perpendicular, falling back to a mesh probe. // 2. maxEdgeIdx is the edge bundle's extent INTO THE AREA rather than // max |offset| (numerically identical for healthy groups). // 3. Edge spokes are route-count weighted when summing directions, so // a 30-route coastline outvotes a 1-route stub at the same junction. // 4. applyAaShiftWithDir mesh-verifies the final sign and flips it when // the chosen side is land and the other is water. // 5. applyAaShiftPureType2 prefers a mesh probe over the // exterior-bisector guess, which was an assumption about mesh shape // rather than a measurement. // 6. ea / el are computed in a first pass and aa in a second, so the // winner at a shared segment-end no longer depends on which path's // waypoint triple happened to be visited first. // // ---------------------------------------------------------------------- // ea bias // ---------------------------------------------------------------------- // sign = sign(bundlePerp_edge · bundlePerp_area) // target = oEdge * sign // shift along bundlePerp_area = (target - oNon) * SPACING // // ---------------------------------------------------------------------- // aa-with-edges bias // ---------------------------------------------------------------------- // clearance = outermost offset at J of the cluster's OWN routes on // the coastline spokes (clamped by MAX_AA_CLEARANCE) // intoAreaAtJ = Σ over edge spokes at J of // (groupPerp_e * areaSide_e * routeCount_e) // areaSign = sign(bundlePerp_area · intoAreaAtJ), then mesh-verified // Routes sorted by (oNon * areaSign) ascending get target offsets // (clearance + 1 + k) * areaSign for k = 0, 1, .... // // ---------------------------------------------------------------------- // aa type-2 bias (pure-area parallel junction) // ---------------------------------------------------------------------- // Target offsets 1, 2, 3, .... Direction from a mesh probe perpendicular // to the area segment at J; when the probe can't distinguish the sides it // falls back to the exterior bisector of the two spokes: // intoAreaAtJ = -(s1 + s2) / |s1 + s2| // Set SKIP_AA_WHEN_OPEN_WATER = true to leave such bundles CENTERED when // the mesh reports walkable area on both sides (genuine open ocean, no // coastline to hug). Default false preserves current behaviour. // // ---------------------------------------------------------------------- // el bias (edge ↔ link at parallel junction) // ---------------------------------------------------------------------- // The edge bundle is area-anchored (areaSide ±1: strand 0 on the link, // rest stepping into the area) while the link bundle is centered // (areaSide 0). Without a shift every route slides laterally by (n-1)/2 // spacings crossing J — a kink per strand. The LINK cluster is shifted so // each route's link-side offset matches its edge-side offset. Gate is // intentionally tight: 2-spoke parallel junctions whose spokes are // exactly {edge, link}. // // ---------------------------------------------------------------------- // Output shape // ---------------------------------------------------------------------- // Map<"@", { segmentKey, jNodeId, shiftByRoute }> // // Inputs // network — from combinedPathNetwork // classified — from classifyPathNodes (used to find type-2 nodes) // orderings — unused // configNavMesh — provides .bundle.spacing // mesh — OPTIONAL buildNavMesh result; enables walkability // probes and the land-side guard alignRoutes = function alignRoutes(network, classified, orderings, configNavMesh, mesh) { const SPACING = configNavMesh.bundle.spacing; const out = new Map(); // ---- Tuning knobs ------------------------------------------------- // Upper bound, in bundle slots, on how far offshore an area cluster // may be pushed to clear a coastline bundle. The old code was // effectively unbounded (the full bundle width). Infinity restores it. const MAX_AA_CLEARANCE = 3; // When true, a pure type-2 area bundle whose mesh probe reports // walkable area on BOTH sides (open ocean) is left centered rather // than anchored one-sided. Default false = preserve current look. const SKIP_AA_WHEN_OPEN_WATER = false; const haveMesh = !!(mesh && typeof mesh.pointInsideAnyFace === "function"); function edgeKey(a, b) { return a < b ? a + "||" + b : b + "||" + a; } function offsetForRouteOnEdge(e, routeIdx) { if (!e || !e.bundleOffsetByRoute) return null; const v = e.bundleOffsetByRoute.get(routeIdx); return v == null ? null : v; } function getClassifiedNode(nodeId) { if (!classified) return null; if (classified.nodes instanceof Map) return classified.nodes.get(nodeId); if (Array.isArray(classified.nodes)) return classified.nodes.find(n => n.id === nodeId) || null; if (classified instanceof Map) return classified.get(nodeId); return classified[nodeId] || null; } // ---- Mesh walkability helper ------------------------------------- // mesh.pointInsideAnyFace is disabled-aware (it returns // faces[deepest].filled, and filled = isArea && !disabled), so a // suppressed face correctly reads as NOT walkable. function walkableAt(x, y) { if (!haveMesh) return null; try { return mesh.pointInsideAnyFace(x, y) === true; } catch (_) { return null; } } // Probe both sides of a segment's perpendicular at J and report which // side is water: { sign: +1 | -1 | 0, bothOk, bothBad }. sign is 0 when // the two sides are indistinguishable. function waterSideForSegAtJ(seg, J, otherNodeId, slots) { if (!haveMesh || !seg) return { sign: 0, bothOk: false, bothBad: false }; const px = seg.bundlePerpX, py = seg.bundlePerpY; if (!isFinite(px) || !isFinite(py) || (px === 0 && py === 0)) { return { sign: 0, bothOk: false, bothBad: false }; } // Step a little along the segment away from J so the probe is not // sitting exactly on a mesh vertex, where the ray-cast parity test is // least reliable. let ux = 0, uy = 0; const O = network.nodes.get(otherNodeId); if (O) { const dx = O.x - J.x, dy = O.y - J.y; const L = Math.hypot(dx, dy); if (L > 1e-9) { ux = dx / L; uy = dy / L; } } const bx = J.x + ux * SPACING * 0.5; const by = J.y + uy * SPACING * 0.5; const width = Math.max(1, Math.abs(slots || 1)); const dists = [SPACING, SPACING * width]; let plusOk = false, plusBad = false, minusOk = false, minusBad = false; for (const d of dists) { const p = walkableAt(bx + px * d, by + py * d); const m = walkableAt(bx - px * d, by - py * d); if (p === true) plusOk = true; else if (p === false) plusBad = true; if (m === true) minusOk = true; else if (m === false) minusBad = true; } if (plusBad && !minusBad) return { sign: -1, bothOk: false, bothBad: false }; if (minusBad && !plusBad) return { sign: +1, bothOk: false, bothBad: false }; const bothBad = plusBad && minusBad; const bothOk = plusOk && minusOk && !bothBad; return { sign: 0, bothOk, bothBad }; } // ---- Authoritative into-area direction for an EDGE (coastline) seg ---- // Returns +1 / -1 as a multiplier on e.bundlePerp, or 0 when unknown. // // Priority: // 1. linkGroups[groupKey].areaSide, sign-corrected through the dot of // the group's canonical perp with this edge's perp. // combinedPathNetwork computes areaSide with a per-edge LOCAL mesh // probe, which is the correct source of truth. // 2. A direct mesh probe at the edge midpoint. // 3. Unknown (0) — the caller ignores this spoke's direction but may // still use its magnitude. function intoAreaSignForEdgeSeg(e) { if (!e) return 0; const gk = e.groupKey; const g = (gk && network.linkGroups) ? network.linkGroups.get(gk) : null; if (g && g.areaSide) { const dot = g.perpX * e.bundlePerpX + g.perpY * e.bundlePerpY; if (Math.abs(dot) > 1e-9) return dot >= 0 ? g.areaSide : -g.areaSide; return g.areaSide; } if (haveMesh) { const A = network.nodes.get(e.a), B = network.nodes.get(e.b); if (A && B) { const mx = (A.x + B.x) / 2, my = (A.y + B.y) / 2; const px = e.bundlePerpX, py = e.bundlePerpY; for (const d of [SPACING * 0.25, SPACING * 0.5, SPACING, SPACING * 2]) { const p = walkableAt(mx + px * d, my + py * d); const m = walkableAt(mx - px * d, my - py * d); if (p === true && m === false) return +1; if (m === true && p === false) return -1; } } } return 0; } // Extent of an edge bundle INTO the area, in bundle slots. // areaSide +1 -> offsets 0..n-1, sign +1 -> extent n-1 // areaSide -1 -> offsets -(n-1)..0, sign -1 -> extent n-1 // Identical to the old max-|offset| for healthy groups. function edgeExtentIntoArea(e, intoAreaSign) { let ext = 0; if (!e || !e.bundleOffsetByRoute) return ext; for (const off of e.bundleOffsetByRoute.values()) { if (off == null) continue; const v = intoAreaSign ? off * intoAreaSign : Math.abs(off); if (v > ext) ext = v; } return ext; } // Edge spokes incident to each node. const edgeSpokesAtNode = new Map(); for (const [, e] of network.edges) { if (e.spokeType !== "edge") continue; if (!edgeSpokesAtNode.has(e.a)) edgeSpokesAtNode.set(e.a, []); if (!edgeSpokesAtNode.has(e.b)) edgeSpokesAtNode.set(e.b, []); edgeSpokesAtNode.get(e.a).push(e); edgeSpokesAtNode.get(e.b).push(e); } function applyEaShift(areaSeg, edgeSeg, J, areaOtherId) { const segKey = edgeKey(areaOtherId, J.id); const outKey = segKey + "@" + J.id; if (out.has(outKey)) return; const paX = areaSeg.bundlePerpX, paY = areaSeg.bundlePerpY; const peX = edgeSeg.bundlePerpX, peY = edgeSeg.bundlePerpY; const dot = peX * paX + peY * paY; if (Math.abs(dot) < 1e-9) return; const sign = dot >= 0 ? +1 : -1; const shiftByRoute = new Map(); for (const r of (areaSeg.routeIdxs || [])) { const oNon = offsetForRouteOnEdge(areaSeg, r); const oEdge = offsetForRouteOnEdge(edgeSeg, r); if (oNon == null || oEdge == null) continue; const target = oEdge * sign; const t = (target - oNon) * SPACING; shiftByRoute.set(r, { x: t * paX, y: t * paY }); } out.set(outKey, { segmentKey: segKey, jNodeId: J.id, shiftByRoute }); } // Identical recipe to applyEaShift but the LINK side shifts. The edge // cluster stays anchored at the coastline; each route's link-side // offset is biased to equal its edge-side offset. function applyElShift(linkSeg, edgeSeg, J, linkOtherId) { const segKey = edgeKey(linkOtherId, J.id); const outKey = segKey + "@" + J.id; if (out.has(outKey)) return; const plX = linkSeg.bundlePerpX, plY = linkSeg.bundlePerpY; const peX = edgeSeg.bundlePerpX, peY = edgeSeg.bundlePerpY; const dot = peX * plX + peY * plY; if (Math.abs(dot) < 1e-9) return; const sign = dot >= 0 ? +1 : -1; const shiftByRoute = new Map(); for (const r of (linkSeg.routeIdxs || [])) { const oLink = offsetForRouteOnEdge(linkSeg, r); const oEdge = offsetForRouteOnEdge(edgeSeg, r); if (oLink == null || oEdge == null) continue; const target = oEdge * sign; const t = (target - oLink) * SPACING; shiftByRoute.set(r, { x: t * plX, y: t * plY }); } out.set(outKey, { segmentKey: segKey, jNodeId: J.id, shiftByRoute }); } // Common aa shift writer. startOffset is the slot given to the rank-0 // route; subsequent routes get startOffset + 1, + 2, ..., multiplied by // areaSign to land on the into-area side of bundlePerp_area. // // FINAL MESH GUARD: the chosen areaSign is verified against the mesh; // if the side we are about to push strands onto is NOT walkable while // the opposite side IS, the sign is flipped. This is the backstop that // stops a bundle being anchored onto land whatever the upstream // inference decided. function applyAaShiftWithDir(areaSeg, J, areaOtherId, areaSign, startOffset) { const segKey = edgeKey(areaOtherId, J.id); const outKey = segKey + "@" + J.id; if (out.has(outKey)) return false; const paX = areaSeg.bundlePerpX, paY = areaSeg.bundlePerpY; const entries = (areaSeg.routeIdxs || []) .map(r => [r, offsetForRouteOnEdge(areaSeg, r)]) .filter(([, o]) => o != null); if (entries.length === 0) return false; let sign = areaSign; if (haveMesh) { const outerSlot = startOffset + entries.length - 1; const probe = waterSideForSegAtJ(areaSeg, J, areaOtherId, outerSlot); if (probe.sign !== 0 && probe.sign !== sign) sign = probe.sign; } entries.sort((x, y) => (x[1] * sign) - (y[1] * sign)); const shiftByRoute = new Map(); entries.forEach(([r, oNon], k) => { const target = (startOffset + k) * sign; const t = (target - oNon) * SPACING; shiftByRoute.set(r, { x: t * paX, y: t * paY }); }); out.set(outKey, { segmentKey: segKey, jNodeId: J.id, shiftByRoute }); return true; } // aa-with-edges. Direction comes from the edge spokes' AUTHORITATIVE // areaSide, route-count weighted. Clearance comes from the cluster's // OWN routes on those spokes, bounded by MAX_AA_CLEARANCE — not from // the full width of the coastline bundle. function applyAaShiftFromEdges(areaSeg, J, areaOtherId) { const edgesAtJ = edgeSpokesAtNode.get(J.id); if (!edgesAtJ || edgesAtJ.length === 0) return false; let iaX = 0, iaY = 0, maxEdgeIdx = 0; for (const e of edgesAtJ) { const s = intoAreaSignForEdgeSeg(e); const w = Math.max(1, (e.routeIdxs && e.routeIdxs.length) || 1); if (s) { iaX += e.bundlePerpX * s * w; iaY += e.bundlePerpY * s * w; } const ext = edgeExtentIntoArea(e, s); // magnitude is safe even if s = 0 if (ext > maxEdgeIdx) maxEdgeIdx = ext; } const paX = areaSeg.bundlePerpX, paY = areaSeg.bundlePerpY; let areaSign = 0; if (Math.hypot(iaX, iaY) > 1e-9) { const proj = paX * iaX + paY * iaY; if (Math.abs(proj) > 1e-9) areaSign = proj >= 0 ? +1 : -1; } if (!areaSign && haveMesh) { const probe = waterSideForSegAtJ( areaSeg, J, areaOtherId, maxEdgeIdx + 1 + ((areaSeg.routeIdxs && areaSeg.routeIdxs.length) || 1) ); if (probe.sign !== 0) areaSign = probe.sign; } if (!areaSign) return false; // Clearance against only the coastline strands lying between the // coast and this cluster's own routes. |o| is the strand's distance // from the link for an area-edge group either way. const areaRoutes = new Set(areaSeg.routeIdxs || []); let clearance = 0; let sharedFound = false; for (const e of edgesAtJ) { for (const r of (e.routeIdxs || [])) { if (!areaRoutes.has(r)) continue; const o = offsetForRouteOnEdge(e, r); if (o == null) continue; sharedFound = true; const v = Math.abs(o); if (v > clearance) clearance = v; } } // No routes in common with the coastline spokes here — nothing to // stay continuous with, so clear the bundle but bounded. if (!sharedFound) clearance = maxEdgeIdx; clearance = Math.min(clearance, MAX_AA_CLEARANCE); return applyAaShiftWithDir(areaSeg, J, areaOtherId, areaSign, clearance + 1); } // aa type-2 (pure-area parallel): no edge spokes at J. Direction from a // mesh probe; the exterior-bisector heuristic is only a fallback. function applyAaShiftPureType2(areaSeg, J, areaOtherId) { const jNode = getClassifiedNode(J.id); if (!jNode || jNode.classification !== "parallel") return false; if (!jNode.spokes || jNode.spokes.length !== 2) return false; // Skip if J has any edge spokes (those go through applyAaShiftFromEdges). const edgesAtJ = edgeSpokesAtNode.get(J.id); if (edgesAtJ && edgesAtJ.length > 0) return false; const nRoutes = (areaSeg.routeIdxs && areaSeg.routeIdxs.length) || 1; if (haveMesh) { const probe = waterSideForSegAtJ(areaSeg, J, areaOtherId, nRoutes); if (probe.sign !== 0) { return applyAaShiftWithDir(areaSeg, J, areaOtherId, probe.sign, 0); } if (probe.bothOk && SKIP_AA_WHEN_OPEN_WATER) return false; // Ambiguous — fall through to the geometric heuristic. } // Outward unit vectors along the two area spokes from J. Node // positions are unambiguous and independent of the classifier's angle // sign convention. const spokeDirs = []; for (const s of jNode.spokes) { const far = network.nodes.get(s.farId); if (!far) continue; const dx = far.x - J.x, dy = far.y - J.y; const len = Math.hypot(dx, dy); if (len < 1e-9) continue; spokeDirs.push({ x: dx / len, y: dy / len }); } if (spokeDirs.length !== 2) return false; // Exterior bisector = -(s1 + s2). Undefined when the spokes are // exactly antiparallel (straight through); skip. const sumX = spokeDirs[0].x + spokeDirs[1].x; const sumY = spokeDirs[0].y + spokeDirs[1].y; const sumLen = Math.hypot(sumX, sumY); if (sumLen < 1e-6) return false; const iaX = -sumX / sumLen; const iaY = -sumY / sumLen; const paX = areaSeg.bundlePerpX, paY = areaSeg.bundlePerpY; const dot = paX * iaX + paY * iaY; if (Math.abs(dot) < 1e-9) return false; const areaSign = dot >= 0 ? +1 : -1; // No edges to clear at J; rank-0 route sits ON the area spoke, the // rest step into the area side. return applyAaShiftWithDir(areaSeg, J, areaOtherId, areaSign, 0); } // Gate for the el bias: J must be a parallel junction with exactly two // spokes, one of each type, and no third spoke of any kind. (The // parallel classification already implies both spokes carry the same // route set, so route memberships need no explicit check.) function isElGateAt(J, segAJ, segJB) { const types = new Set([segAJ.spokeType, segJB.spokeType]); if (!(types.has("edge") && types.has("link") && types.size === 2)) return false; const jNode = getClassifiedNode(J.id); if (!jNode || jNode.classification !== "parallel") return false; if (!jNode.spokes || jNode.spokes.length !== 2) return false; return true; } // ---- Collect every waypoint triple once -------------------------- // Two passes: ea/el first (they copy an already area-anchored edge // bundle, so they are the trustworthy bias), then aa. A single // interleaved pass made `out.has(outKey) -> return` decide the winner at // a shared segment-end by path iteration order. const triples = []; for (const p of network.paths) { const wps = p.waypoints; if (!wps || wps.length < 3) continue; for (let i = 0; i < wps.length - 2; i++) { const A = wps[i], J = wps[i + 1], B = wps[i + 2]; const segAJ = network.edges.get(edgeKey(A.id, J.id)); const segJB = network.edges.get(edgeKey(J.id, B.id)); if (!segAJ || !segJB) continue; triples.push({ A, J, B, segAJ, segJB }); } } // Pass 1 — ea and el. for (const { A, J, B, segAJ, segJB } of triples) { const ta = segAJ.spokeType, tb = segJB.spokeType; if (ta === "area" && tb === "edge") { applyEaShift(segAJ, segJB, J, A.id); } else if (ta === "edge" && tb === "area") { applyEaShift(segJB, segAJ, J, B.id); } else if (ta === "edge" && tb === "link") { // The link is segJB (J → B). Shift it at its J-end. if (isElGateAt(J, segAJ, segJB)) applyElShift(segJB, segAJ, J, B.id); } else if (ta === "link" && tb === "edge") { // The link is segAJ (A → J). Shift it at its J-end. if (isElGateAt(J, segAJ, segJB)) applyElShift(segAJ, segJB, J, A.id); } } // Pass 2 — aa. for (const { A, J, B, segAJ, segJB } of triples) { if (segAJ.spokeType !== "area" || segJB.spokeType !== "area") continue; // Try edge-anchored aa first; if J has no usable edge spokes, fall // back to pure type-2 (mesh probe, then exterior bisector). if (!applyAaShiftFromEdges(segAJ, J, A.id)) { applyAaShiftPureType2(segAJ, J, A.id); } if (!applyAaShiftFromEdges(segJB, J, B.id)) { applyAaShiftPureType2(segJB, J, B.id); } } return out; };47:T18a9,// Cell: buildCurvedCorner // // AXIAL JR MODEL: // // jr is measured AS A DISTANCE ALONG EACH SPOKE from the un-offset // junction center W, not as the radius of a circle around W. Every // strand on a given spoke starts its curve at the same axial distance // from W (jr units back along the spoke from posInW resp. forward // from posOutW), regardless of the strand's perpendicular offset. // // This produces metro-style alignment: all strands in a bundle begin // and end their corner curves at axially-aligned positions on each // spoke, then sweep in formation through the bend. (For concentric // fillets around a common center, the tangent points of all strands // lie on the same axial stations — so a COMMON jr across strands is // exactly the width-preserving geometry, provided the fold case below // is handled.) // // FOLD HANDLING (new): // // A strand on the INSIDE of a bend whose perpendicular offset exceeds // the bend's inner fillet radius has no valid fillet: its two offset // rails intersect at the "corner" point BEFORE the curve's endpoints // can straddle it, and the chord-based bezier folds back on itself // (a cusp/loop). Previously those loops were left in the geometry and // later collapsed — inconsistently per strand — by the polyline // self-intersection cleanup, producing strands that "jump" across // sections at the transition between folded and unfolded offsets. // // Now the fold is detected analytically: with the corner at parameter // tC along the in-rail (posInW + tC·dirIn = corner) and at vC along // the out-rail (posOutW + vC·dirOut = corner), a valid fillet needs // P0 (at -jr) strictly before the corner and P3 (at +jr) strictly // after it: // // jr + tC > 0 and jr - vC > 0. // // When either fails, the strand's corner degenerates to a PINCH: a // zero-length curve at the corner point itself (the rails' exact // intersection), so the adjacent line pieces meet there with C0 // continuity. No loop is ever emitted, so the cleanup pass has // nothing to collapse and every strand behaves consistently. The // ribbon's inner edge simply converges at the miter point on very // tight bends, which is the physically correct limit. // // Inputs: // posInW — strand's offset endpoint at W on the in-segment (offset+shift) // dirIn — UNIT vector along the in-segment, pointing toward W (A→W) // posOutW — strand's offset endpoint at W on the out-segment (offset+shift) // dirOut — UNIT vector along the out-segment, pointing away from W (W→B) // centerW — the junction waypoint W itself (un-offset). Kept for // callers that need it; not used in the axial model. // jr — axial reach along each spoke from W // maxBackIn — max back-off distance along -dirIn from posInW // maxFwdOut — same for forward along +dirOut from posOutW // // Output: // { P0, P1, P2, P3, corner } — bezier control points and the // offset-line intersection (corner) for reference. A pinched corner // additionally carries pinched: true, with all points at `corner`. // or null if the curve cannot be constructed (straight / U-turn / // caps exceeded). buildCurvedCorner = function(posInW, dirIn, posOutW, dirOut, centerW, jr, maxBackIn, maxFwdOut) { if (jr <= 0) return null; // Axial reach is jr on both sides. const tIn = jr; const sOut = jr; // Segment-length caps (preventing curve overshoot past the adjacent // waypoint). The caller is responsible for clamping jr against // spoke lengths beforehand; these are a final guard. const capIn = (typeof maxBackIn === "number" && isFinite(maxBackIn)) ? maxBackIn : Infinity; const capOut = (typeof maxFwdOut === "number" && isFinite(maxFwdOut)) ? maxFwdOut : Infinity; if (tIn > capIn + 1e-6) return null; if (sOut > capOut + 1e-6) return null; // Angle between spokes. const cosBeta = dirIn.x * dirOut.x + dirIn.y * dirOut.y; const beta = Math.acos(Math.max(-1, Math.min(1, cosBeta))); if (beta < 1e-3) return null; // effectively straight if (beta > Math.PI - 1e-3) return null; // ~180° U-turn // Offset-line intersection (the "sharp corner"), computed FIRST so // the fold test can run before any control points are built. let corner = null; let tC = 0, vC = 0; const det = dirIn.x * dirOut.y - dirIn.y * dirOut.x; if (Math.abs(det) >= 1e-6) { const rhsX = posOutW.x - posInW.x; const rhsY = posOutW.y - posInW.y; tC = (rhsX * dirOut.y - rhsY * dirOut.x) / det; corner = { x: posInW.x + tC * dirIn.x, y: posInW.y + tC * dirIn.y }; vC = (corner.x - posOutW.x) * dirOut.x + (corner.y - posOutW.y) * dirOut.y; // FOLD TEST: the fillet exists only if P0 (at -jr on the in-rail) // clears the corner and P3 (at +jr on the out-rail) clears it on // the other side — with a PROPORTIONAL margin. A curve whose // endpoints only barely straddle the rails' intersection still // produces a slightly folded bezier (a micro-loop the polyline // cleanup then trims into a corner-cutting chord), so marginal // cases pinch cleanly instead. const FOLD_MARGIN = Math.max(1e-6, 0.15 * jr); if (jr + tC <= FOLD_MARGIN || jr - vC <= FOLD_MARGIN) { return { P0: { x: corner.x, y: corner.y }, P1: { x: corner.x, y: corner.y }, P2: { x: corner.x, y: corner.y }, P3: { x: corner.x, y: corner.y }, corner, pinched: true, }; } } // P0 = posInW backed off by tIn along -dirIn (strand's perpendicular // offset preserved). P3 = posOutW forward sOut along +dirOut. const P0 = { x: posInW.x - dirIn.x * tIn, y: posInW.y - dirIn.y * tIn }; const P3 = { x: posOutW.x + dirOut.x * sOut, y: posOutW.y + dirOut.y * sOut }; // Cubic bezier handle length. Chord-based formula — same as the // circular-arc approximation, but valid for any smooth curve // between P0 and P3 with the given tangents. const chord = Math.hypot(P3.x - P0.x, P3.y - P0.y); const cb4 = Math.cos(beta / 4); const handleCap = 2 * Math.min(tIn, sOut); const h = Math.min(chord / (3 * cb4 * cb4), handleCap); const P1 = { x: P0.x + dirIn.x * h, y: P0.y + dirIn.y * h }; const P2 = { x: P3.x - dirOut.x * h, y: P3.y - dirOut.y * h }; return { P0, P1, P2, P3, corner }; }48:T1351,// Cell: routeCurvedSegments // // For one route's strand, produces an ordered list of drawable pieces // (straight lines and cubic beziers) that together render the route // with rounded corners. At each interior on-mesh waypoint, all strands // of a bundle bend AROUND the un-offset waypoint position with their // bezier endpoints sitting on the jr-circle centered at the waypoint. // Strands at different bundle-offsets get concentric arcs — inner // strands bend tighter, outer strands bend wider, but every strand // leaves and rejoins its straight portion at the same "ring" around // the junction. // // Inputs: // wps — the route's waypoint array (from network.paths[].waypoints) // posAt — function(wpIndex, neighborIndex) → {x,y} // Returns the drawn endpoint (offset + alignment-shift) // for wp[wpIndex] on the segment connecting wp[wpIndex] // and wp[neighborIndex]. |neighborIndex - wpIndex| === 1. // isEndpoint — function(wp) → boolean. True for off-mesh endpoints. // jrAt — function(wp) → number. Returns the effective junction // radius for the given (interior) waypoint. The caller is // expected to pre-clamp jr against spoke lengths at each // junction so curves fit without overrunning adjacent // segments. Return ≤ 0 to disable curving at that // waypoint. // // Output: // Array of pieces, each: // { kind: "line", segIdx, x1, y1, x2, y2 } // { kind: "curve", segIdx, wpIndex, // x1, y1, c1x, c1y, c2x, c2y, x2, y2 } // // Falls back to a straight line per segment when the corner geometry // is degenerate at a given waypoint (e.g. strand's offset exceeds jr). routeCurvedSegments = function(wps, posAt, isEndpoint, jrAt) { const n = wps.length; if (n < 2) return []; // Raw drawn endpoints for each segment (with offset + shift applied): // segEnd[i] = { atA, atB } where atA = pos at wp[i] on segment i, // atB = pos at wp[i+1] on segment i. const segEnd = new Array(n - 1); for (let i = 0; i < n - 1; i++) { segEnd[i] = { atA: posAt(i, i + 1), atB: posAt(i + 1, i) }; } // Build a curve at each interior waypoint wp[i] (1 ≤ i ≤ n-2), // using the un-offset wp[i] as the arc center. const curveAt = new Array(n); for (let i = 1; i < n - 1; i++) { if (isEndpoint(wps[i])) { curveAt[i] = null; continue; } const jrHere = jrAt(wps[i]); if (!(jrHere > 0)) { curveAt[i] = null; continue; } const inA = segEnd[i - 1].atA; // far end of in-segment (wp[i-1] side) const posInW = segEnd[i - 1].atB; // near end of in-segment (wp[i] side) const posOutW = segEnd[i].atA; // near end of out-segment (wp[i] side) const outB = segEnd[i].atB; // far end of out-segment (wp[i+1] side) // Direction along segment (i-1, i) pointing TOWARD wp[i]. let dx = posInW.x - inA.x, dy = posInW.y - inA.y; let segInLen = Math.hypot(dx, dy); if (segInLen < 1e-9) { curveAt[i] = null; continue; } const dirIn = { x: dx / segInLen, y: dy / segInLen }; // Direction along segment (i, i+1) pointing AWAY from wp[i]. dx = outB.x - posOutW.x; dy = outB.y - posOutW.y; let segOutLen = Math.hypot(dx, dy); if (segOutLen < 1e-9) { curveAt[i] = null; continue; } const dirOut = { x: dx / segOutLen, y: dy / segOutLen }; // Safety caps: curve never extends past the far waypoint of the // adjacent segment. (The caller is responsible for clamping jr // against spoke lengths to prevent adjacent curves on a shared // segment from overlapping; these caps are just a final guard // against off-by-a-shift edge cases.) curveAt[i] = buildCurvedCorner( posInW, dirIn, posOutW, dirOut, { x: wps[i].x, y: wps[i].y }, // un-offset junction center jrHere, segInLen, segOutLen ); } // Emit pieces. For each segment i: // start = curve at wp[i].P3 (if curveAt[i] exists) else segEnd[i].atA // end = curve at wp[i+1].P0 (if curveAt[i+1] exists) else segEnd[i].atB // Emit the line piece, then if curveAt[i+1] exists and i+1 is interior, // emit the curve piece tagged with the OUTGOING segment (i+1). const out = []; for (let i = 0; i < n - 1; i++) { const cIn = curveAt[i]; // curve at wp[i] const cOut = curveAt[i + 1]; // curve at wp[i+1] const start = cIn ? cIn.P3 : segEnd[i].atA; const end = cOut ? cOut.P0 : segEnd[i].atB; out.push({ kind: "line", segIdx: i, x1: start.x, y1: start.y, x2: end.x, y2: end.y, }); if (cOut) { out.push({ kind: "curve", segIdx: i + 1, wpIndex: i + 1, x1: cOut.P0.x, y1: cOut.P0.y, c1x: cOut.P1.x, c1y: cOut.P1.y, c2x: cOut.P2.x, c2y: cOut.P2.y, x2: cOut.P3.x, y2: cOut.P3.y, }); } } return out; }49:T5b6,configNavMesh = ({ navMesh: { pointFill: "rgba(0, 0, 0, 0.15)", virtualPointFill: "#fafafa", virtualPointStroke: "rgba(0, 0, 0, 0.15)", virtualPointStrokeWidth: 1.5, linkStroke: "rgba(0, 0, 0, 0.15)", linkStrokeWidth: 1, polygonFill: "rgba(0, 0, 0, 0.05)", bisectorStroke: "rgba(0, 0, 0, 0.15)", bisectorStrokeWidth: 1.5, disabledMarkerStroke: "#000", disabledMarkerStrokeWidth: 2, routePointStroke: "#fff", routePointStrokeWidth: 1, }, route: { strokeWidth: 4, junctionRadius: 40 }, palette: { routeColors: (typeof d3 !== "undefined" && d3.schemeObservable10) ? d3.schemeObservable10.filter(c => c.toLowerCase() !== "#4269d0" && c.toLowerCase() !== "#97bbf5" ) : ["#4269d0","#efb118","#ff725c","#6cc5b0","#3ca951","#ff8ab7","#a463f2","#97bbf5","#9c6b4e","#9498a0"], spokes: { link: "#b36db0", edge: "#efb118", area: "#29cce2", }, junctionPairs: { aa: "#29cce2", ee: "#efb118", ll: "#b36db0", ae: "#3ca951", al: "#4269d0", el: "#ff725c", }, }, junction: { baseRadius: 4, perRouteBump: 2, hitRadiusPadding: 2, decisionStroke: "#e0162b", decisionStrokeWidth: 2, parallelStroke: "#000", parallelStrokeWidth: 1, }, bundle: { strandWidth: 4, spacing: 6, }, });4a:Tae7d,chartNavMesh = { const initialState = { points: [ { id: 0, x: 85.1, y: 254.5 }, { id: 1, x: 220.1, y: 484.5 }, { id: 2, x: 364.1, y: 243.5 }, { id: 3, x: 487.1, y: 516.5 }, { id: 4, x: 619.1, y: 237.5 }, { id: 5, x: 796.1, y: 350.5 }, { id: 6, x: 612.1, y: 75.5 }, { id: 7, x: 485.1, y: 351.5 }, { id: 8, x: 364.1, y: 72.5 }, { id: 9, x: 213.1, y: 369.5 } ], links: [ { id: 0, a: 0, b: 1 }, { id: 1, a: 1, b: 2 }, { id: 2, a: 2, b: 3 }, { id: 3, a: 3, b: 4 }, { id: 4, a: 4, b: 5 }, { id: 5, a: 5, b: 6 }, { id: 6, a: 6, b: 7 }, { id: 7, a: 7, b: 8 }, { id: 8, a: 8, b: 9 }, { id: 9, a: 9, b: 0 } ], disabledFaceKeys: [], routes: [ { id: 0, color: "#efb118", start: { x: 853.1, y: 384.5 }, end: { x: 46.1, y: 150.5 } }, { id: 1, color: "#ff725c", start: { x: 28.1, y: 209.5 }, end: { x: 865.1, y: 464.5 } }, { id: 2, color: "#6cc5b0", start: { x: 859.1, y: 357.5 }, end: { x: 13.1, y: 243.5 } }, { id: 3, color: "#3ca951", start: { x: 553.1, y: 154.5 }, end: { x: 449.1, y: 164.5 } }, { id: 4, color: "#ff8ab7", start: { x: 526.1, y: 192.5 }, end: { x: 466.1, y: 229.5 } } ] } const width = 900; const height = 600; const container = d3.create("div") .style("font", "13px -apple-system, BlinkMacSystemFont, sans-serif") .style("font-family", "ui-monospace, 'SF Mono', Menlo, monospace") .style("position", "relative"); const controls = container.append("div") .style("display", "flex") .style("align-items", "center") .style("justify-content", "space-between") .style("gap", "8px") .style("width", width + "px") .style("box-sizing", "border-box") .style("margin-bottom", "8px") .style("font-size", "12px") .style("color", "#555"); const leftGroup = controls.append("div") .style("display", "flex").style("align-items", "center").style("gap", "8px"); const btnStyle = "padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;" + "border:1px solid #888;background:#fff;border-radius:4px;"; const saveBtn = leftGroup.append("button").attr("style", btnStyle).text("save state"); const clearBtn = leftGroup.append("button").attr("style", btnStyle).text("clear"); const toolbarStatus = leftGroup.append("span"); const rightGroup = controls.append("div") .style("display", "flex").style("align-items", "center").style("gap", "12px"); const labelStyle = "display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none;"; const colorLabel = rightGroup.append("label").attr("style", labelStyle); colorLabel.append("span").text("color"); const colorSelect = colorLabel.append("select") .attr("class", "color-mode") .style("font", "inherit").style("font-size", "12px").style("padding", "2px 4px"); colorSelect.append("option").attr("value", "paths").text("paths"); colorSelect.append("option").attr("value", "spokes").text("spokes"); colorSelect.append("option").attr("value", "junctions").text("junctions"); // Junction radius for curved corners — sourced directly from config. const jr = configNavMesh.route.junctionRadius; const modeName = "navmesh-mode-" + Math.random().toString(36).slice(2); const navLabel = rightGroup.append("label").attr("style", labelStyle) .style("margin-left", "38px"); navLabel.append("input") .attr("type", "radio").attr("name", modeName) .attr("value", "navmesh").property("checked", true).style("margin", "0"); navLabel.append("span").text("Nav mesh"); const routesLabel = rightGroup.append("label").attr("style", labelStyle); routesLabel.append("input") .attr("type", "radio").attr("name", modeName) .attr("value", "routes").style("margin", "0"); routesLabel.append("span").text("Routes"); const svg = container.append("svg") .attr("width", width).attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .style("border", "1px solid #ccc").style("background", "#fafafa").style("display", "block"); const junctionStatus = container.append("div") .style("width", width + "px").style("box-sizing", "border-box") .style("margin-top", "8px").style("padding", "6px 8px") .style("font-size", "12px").style("font-variant-numeric", "tabular-nums") .style("color", "#333").style("min-height", "80px") .style("border", "1px solid #ddd").style("background", "#fff").style("border-radius", "3px"); svg.append("style").text(` .point { fill: ${configNavMesh.navMesh.pointFill}; cursor: pointer; } .point.virtual { fill: ${configNavMesh.navMesh.virtualPointFill}; stroke: ${configNavMesh.navMesh.virtualPointStroke}; stroke-width: ${configNavMesh.navMesh.virtualPointStrokeWidth}; cursor: default; } .link { stroke: ${configNavMesh.navMesh.linkStroke}; stroke-width: ${configNavMesh.navMesh.linkStrokeWidth}; fill: none; cursor: pointer; } .link.interior { stroke-dasharray: 4 4; } .polygon { fill: ${configNavMesh.navMesh.polygonFill}; stroke: none; pointer-events: none; } .bisector { stroke: ${configNavMesh.navMesh.bisectorStroke}; stroke-width: ${configNavMesh.navMesh.bisectorStrokeWidth}; fill: none; pointer-events: none; } .pending-line { stroke-dasharray: 4 4; fill: none; pointer-events: none; } .route { stroke-width: ${configNavMesh.route.strokeWidth}; fill: none; cursor: pointer; } .route-point { cursor: pointer; stroke: ${configNavMesh.navMesh.routePointStroke}; stroke-width: ${configNavMesh.navMesh.routePointStrokeWidth}; } .disabled-marker { cursor: pointer; } .disabled-marker-hit { fill: transparent; } .disabled-marker-x { fill: none; stroke: ${configNavMesh.navMesh.disabledMarkerStroke}; stroke-width: ${configNavMesh.navMesh.disabledMarkerStrokeWidth}; stroke-linecap: round; pointer-events: none; } .junction-marker { fill: none; pointer-events: none; } .junction-marker.decision { stroke: ${configNavMesh.junction.decisionStroke}; } .junction-marker.parallel { stroke: ${configNavMesh.junction.parallelStroke}; } .junction-hit { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; } `); // ---- State ---- const ROUTE_PALETTE = configNavMesh.palette.routeColors; let mode = "navmesh"; let pointIdCounter = 0, linkIdCounter = 0, routeIdCounter = 0; const points = [], links = [], routes = []; const disabledFaces = new Set(); let pendingLink = null, pendingRoute = null, routeDrag = null; let suppressNextClick = false; let pathColorMode = "paths"; let optimizedOrderings = new Map(); let mousePos = null, mesh = null; if (initialState && typeof initialState === "object") { if (Array.isArray(initialState.points)) { for (const p of initialState.points) { if (p == null) continue; points.push({ id: +p.id, x: +p.x, y: +p.y }); if (+p.id + 1 > pointIdCounter) pointIdCounter = +p.id + 1; } } if (Array.isArray(initialState.links)) { for (const l of initialState.links) { if (l == null) continue; links.push({ id: +l.id, a: +l.a, b: +l.b }); if (+l.id + 1 > linkIdCounter) linkIdCounter = +l.id + 1; } } if (Array.isArray(initialState.disabledFaceKeys)) { for (const k of initialState.disabledFaceKeys) disabledFaces.add(k); } if (Array.isArray(initialState.routes)) { for (const r of initialState.routes) { if (r == null || !r.start || !r.end) continue; const id = +r.id; routes.push({ id, color: r.color || ROUTE_PALETTE[id % ROUTE_PALETTE.length], start: { x: +r.start.x, y: +r.start.y }, end: { x: +r.end.x, y: +r.end.y }, }); if (id + 1 > routeIdCounter) routeIdCounter = id + 1; } } } const DRAG_THRESHOLD = 3; // ---- Layers ---- const polyLayer = svg.append("g").attr("class", "polygons"); const bisectorLayer = svg.append("g").attr("class", "bisectors"); const linkLayer = svg.append("g").attr("class", "links"); const routeLayer = svg.append("g").attr("class", "routes"); const pendingLayer = svg.append("g").attr("class", "pending"); const junctionLayer = svg.append("g").attr("class", "junctions"); const virtualPointLayer = svg.append("g").attr("class", "virtual-points"); const disabledMarkerLayer = svg.append("g").attr("class", "disabled-markers"); const pointLayer = svg.append("g").attr("class", "points"); const routePointLayer = svg.append("g").attr("class", "route-points"); // ---- Event handlers ---- svg.on("mousemove", function (event) { mousePos = d3.pointer(event, svg.node()); if (mode === "routes" && routeDrag && !routeDrag.moved) { const dx = mousePos[0] - routeDrag.downX; const dy = mousePos[1] - routeDrag.downY; if (Math.hypot(dx, dy) > DRAG_THRESHOLD) { routeDrag.moved = true; pendingRoute = { id: routeDrag.id, color: routeDrag.color, start: routeDrag.start }; } } if (pendingLink || pendingRoute) renderPending(); }); svg.on("contextmenu", function (event) { event.preventDefault(); if (mode === "navmesh" && pendingLink) { pendingLink = null; renderAll(); return; } if (mode === "routes" && pendingRoute) { if (pendingRoute.id === routeIdCounter - 1) routeIdCounter--; pendingRoute = null; routeDrag = null; renderAll(); return; } const [x, y] = d3.pointer(event, svg.node()); const face = fillableFaceAt(x, y); if (face) { disabledFaces.add(face.stableKey); renderAll(); } }); svg.on("mousedown", function (event) { if (mode !== "routes") return; if (event.target !== svg.node()) return; if (event.button !== 0) return; const [x, y] = d3.pointer(event, svg.node()); if (pendingRoute) return; const id = routeIdCounter++; routeDrag = { id, color: ROUTE_PALETTE[id % ROUTE_PALETTE.length], start: { x, y }, downX: x, downY: y, moved: false }; }); function handleMouseUp(event) { if (mode !== "routes" || !routeDrag) return; if (routeDrag.moved) { const end = mousePos ? { x: mousePos[0], y: mousePos[1] } : { x: routeDrag.start.x, y: routeDrag.start.y }; routes.push({ id: routeDrag.id, color: routeDrag.color, start: routeDrag.start, end }); pendingRoute = null; routeDrag = null; suppressNextClick = true; renderAll(); } else { routeDrag = null; } } window.addEventListener("mouseup", handleMouseUp); svg.on("click", function (event) { if (suppressNextClick) { suppressNextClick = false; return; } if (event.target !== svg.node()) return; const [x, y] = d3.pointer(event, svg.node()); if (mode === "navmesh") { const id = addPoint(x, y); if (pendingLink) { const a = pendingLink.startId; if (a !== id && !linkExists(a, id)) links.push({ id: linkIdCounter++, a, b: id }); } pendingLink = { startId: id }; renderAll(); return; } if (mode === "routes") { if (!pendingRoute) { const id = routeIdCounter++; pendingRoute = { id, color: ROUTE_PALETTE[id % ROUTE_PALETTE.length], start: { x, y } }; } else { routes.push({ id: pendingRoute.id, color: pendingRoute.color, start: pendingRoute.start, end: { x, y } }); pendingRoute = null; } renderAll(); } }); container.node().addEventListener("change", function (ev) { if (!ev.target) return; const tag = ev.target.tagName; if (tag !== "INPUT" && tag !== "SELECT") return; if (ev.target.type === "radio") { mode = ev.target.value; pendingLink = null; if (pendingRoute && pendingRoute.id === routeIdCounter - 1) routeIdCounter--; pendingRoute = null; if (routeDrag && routeDrag.id === routeIdCounter - 1) routeIdCounter--; routeDrag = null; renderAll(); } else if (ev.target.tagName === "SELECT" && ev.target.classList.contains("color-mode")) { pathColorMode = ev.target.value; renderAll(); } }); // ---- State helpers ---- function addPoint(x, y) { const id = pointIdCounter++; points.push({ id, x, y }); return id; } function removePoint(id) { const idx = points.findIndex(p => p.id === id); if (idx === -1) return; points.splice(idx, 1); for (let i = links.length - 1; i >= 0; i--) { if (links[i].a === id || links[i].b === id) links.splice(i, 1); } if (pendingLink && pendingLink.startId === id) pendingLink = null; } function pointById(id) { return points.find(p => p.id === id); } function linkExists(a, b) { return links.some(l => (l.a === a && l.b === b) || (l.a === b && l.b === a)); } function fillableFaceAt(x, y) { if (!mesh) return null; let bestIdx = -1, bestDepth = -1; for (let i = 0; i < mesh.faces.length; i++) { const f = mesh.faces[i]; if (!geometry.pointInRing(x, y, mesh.ringToXY(f.ring))) continue; if (f.depth > bestDepth) { bestDepth = f.depth; bestIdx = i; } } if (bestIdx === -1) return null; const f = mesh.faces[bestIdx]; return (f.isArea && !f.disabled) ? f : null; } // ---- Render helpers ---- function dataJoin(parent, tag, cls, data, dataKey, init, update) { const sel = parent.selectAll(tag + "." + cls).data(data, dataKey); const entered = sel.enter().append(tag).attr("class", cls); if (init) init(entered); const merged = entered.merge(sel); if (update) update(merged); sel.exit().remove(); return merged; } function ringPath(ringIds) { const pts = ringIds.map(id => mesh.dPointById(id)).filter(Boolean); if (pts.length < 3) return ""; let d = `M ${pts[0].x} ${pts[0].y}`; for (let i = 1; i < pts.length; i++) d += ` L ${pts[i].x} ${pts[i].y}`; return d + " Z"; } function clusterPath(rings) { return rings.map(ringPath).filter(Boolean).join(" "); } function linkLineCoords(l) { const pa = mesh.dPointById(l.a), pb = mesh.dPointById(l.b); if (!pa || !pb) return null; return { x1: pa.x, y1: pa.y, x2: pb.x, y2: pb.y }; } function routePath(route) { const pts = pathfinding.routeWaypoints(route.start, route.end, mesh); if (pts.length === 0) return ""; let d = `M ${pts[0].x} ${pts[0].y}`; for (let i = 1; i < pts.length; i++) d += ` L ${pts[i].x} ${pts[i].y}`; return d; } const BISECTOR_LEN = 30; function polygonCornerBisectors() { const segs = [], seen = new Set(); const PROBE = 1.0; mesh.faces.forEach((f, faceIdx) => { const ring = f.ring, n = ring.length; for (let i = 0; i < n; i++) { const v = mesh.dPointById(ring[i]); const prev = mesh.dPointById(ring[(i - 1 + n) % n]); const next = mesh.dPointById(ring[(i + 1) % n]); if (!v || !prev || !next) continue; const ax = prev.x - v.x, ay = prev.y - v.y; const bx = next.x - v.x, by = next.y - v.y; const aL = Math.hypot(ax, ay) || 1; const bL = Math.hypot(bx, by) || 1; let cx = ax / aL + bx / bL, cy = ay / aL + by / bL; let cL = Math.hypot(cx, cy); if (cL < 1e-6) { cx = -ay / aL; cy = ax / aL; cL = 1; } cx /= cL; cy /= cL; const in1 = mesh.pointInsideAnyFace(v.x + cx * PROBE, v.y + cy * PROBE); const in2 = mesh.pointInsideAnyFace(v.x - cx * PROBE, v.y - cy * PROBE); let dirX, dirY; if (in1 && !in2) { dirX = cx; dirY = cy; } else if (in2 && !in1) { dirX = -cx; dirY = -cy; } else continue; const key = "face|" + faceIdx + "|" + ring[i]; if (seen.has(key)) continue; seen.add(key); segs.push({ key, x1: v.x, y1: v.y, x2: v.x + dirX * BISECTOR_LEN, y2: v.y + dirY * BISECTOR_LEN }); } }); return segs; } function junctionBisectors() { const polygonPointIds = new Set(); mesh.faces.forEach(f => f.ring.forEach(pid => polygonPointIds.add(pid))); const adjByPoint = new Map(); mesh.derivedLinks.forEach(l => { const a = mesh.dPointById(l.a), b = mesh.dPointById(l.b); if (!a || !b) return; const dx = b.x - a.x, dy = b.y - a.y; const len = Math.hypot(dx, dy) || 1; const ux = dx / len, uy = dy / len; if (!adjByPoint.has(l.a)) adjByPoint.set(l.a, []); adjByPoint.get(l.a).push({ x: ux, y: uy }); if (!adjByPoint.has(l.b)) adjByPoint.set(l.b, []); adjByPoint.get(l.b).push({ x: -ux, y: -uy }); }); const segs = [], HALF = BISECTOR_LEN / 2; adjByPoint.forEach((dirs, pid) => { if (polygonPointIds.has(pid)) return; const p = mesh.dPointById(pid); if (!p || dirs.length < 2) return; const angles = dirs.map(d => Math.atan2(d.y, d.x)).sort((a, b) => a - b); if (dirs.length === 2) { const mid = (angles[0] + angles[1]) / 2; const ux = Math.cos(mid), uy = Math.sin(mid); segs.push({ key: "pt|" + pid, x1: p.x - ux * HALF, y1: p.y - uy * HALF, x2: p.x + ux * HALF, y2: p.y + uy * HALF }); } else { for (let i = 0; i < angles.length; i++) { const a1 = angles[i], a2 = angles[(i + 1) % angles.length]; let span = a2 - a1; if (span < 0) span += Math.PI * 2; const mid = a1 + span / 2; const ux = Math.cos(mid), uy = Math.sin(mid); segs.push({ key: "pt|" + pid + "|" + i, x1: p.x, y1: p.y, x2: p.x + ux * BISECTOR_LEN, y2: p.y + uy * BISECTOR_LEN }); } } }); return segs; } // ---- Renderers ---- function renderPolygons() { const drawable = mesh.clusters.filter(c => c.rings.length > 0); dataJoin(polyLayer, "path", "polygon", drawable, d => d.key, sel => sel.attr("fill-rule", "evenodd"), sel => sel.attr("d", d => clusterPath(d.rings))); } function renderBisectors() { const segs = [...polygonCornerBisectors(), ...junctionBisectors()]; dataJoin(bisectorLayer, "line", "bisector", segs, d => d.key, null, sel => sel.attr("x1", d => d.x1).attr("y1", d => d.y1) .attr("x2", d => d.x2).attr("y2", d => d.y2)); } function renderLinks() { dataJoin(linkLayer, "line", "link", mesh.derivedLinks, d => d.id, sel => sel.on("dblclick", function (event, d) { event.stopPropagation(); if (mode !== "navmesh") return; const idx = links.findIndex(l => l.id === d.sourceLinkId); if (idx !== -1) links.splice(idx, 1); renderAll(); }), sel => sel.classed("interior", d => mesh.interiorEdges.has(mesh.edgeKeyU(d.a, d.b))) .each(function (d) { const c = linkLineCoords(d); if (!c) return; d3.select(this).attr("x1", c.x1).attr("y1", c.y1).attr("x2", c.x2).attr("y2", c.y2); })); } const SPOKE_COLORS = configNavMesh.palette.spokes; const JUNCTION_PAIR_COLORS = configNavMesh.palette.junctionPairs; function renderRoutes(network, classified) { const edgeKey = (a, b) => a < b ? a + "||" + b : b + "||" + a; const traversalByRouteIdx = new Map(); if (classified && classified.pathTraversals) { for (const t of classified.pathTraversals) traversalByRouteIdx.set(t.routeIdx, t); } const SPACING = configNavMesh.bundle.spacing; const isEndpoint = (wp) => typeof wp.id === "string" && wp.id.startsWith("endpoint:"); function bundleOffset(A, B, routeIdx) { const e = network.edges.get(edgeKey(A.id, B.id)); if (!e || !e.bundleOffsetByRoute) return { ox: 0, oy: 0 }; const frac = e.bundleOffsetByRoute.get(routeIdx); if (frac == null || frac === 0) return { ox: 0, oy: 0 }; const off = frac * SPACING; return { ox: e.bundlePerpX * off, oy: e.bundlePerpY * off }; } const alignment = alignRoutes(network, classified, optimizedOrderings, configNavMesh); function bundleShiftAtEnd(segA, segB, endpointId, routeIdx) { const segKey = edgeKey(segA.id, segB.id); const entry = alignment.get(segKey + "@" + endpointId); if (!entry) return { sx: 0, sy: 0 }; const v = entry.shiftByRoute.get(routeIdx); if (!v) return { sx: 0, sy: 0 }; return { sx: v.x, sy: v.y }; } function endpointPos(wp, otherWp, adjWp, routeIdx) { if (isEndpoint(wp)) return { x: wp.x, y: wp.y }; if (otherWp && isEndpoint(otherWp) && adjWp) { const { ox, oy } = bundleOffset(wp, adjWp, routeIdx); const sh = bundleShiftAtEnd(wp, adjWp, wp.id, routeIdx); return { x: wp.x + ox + sh.sx, y: wp.y + oy + sh.sy }; } const { ox, oy } = bundleOffset(wp, otherWp, routeIdx); const sh = bundleShiftAtEnd(wp, otherWp, wp.id, routeIdx); return { x: wp.x + ox + sh.sx, y: wp.y + oy + sh.sy }; } const data = network.paths.map(p => ({ routeId: p.routeId, routeIdx: p.routeIdx, route: routes[p.routeIdx], waypoints: p.waypoints, })); const gSel = routeLayer.selectAll("g.route-segments").data(data, d => d.routeId); const gEntered = gSel.enter().append("g") .attr("class", "route-segments") .on("dblclick", function (event, d) { event.stopPropagation(); if (mode !== "routes") return; const idx = routes.findIndex(r => r.id === d.routeId); if (idx !== -1) routes.splice(idx, 1); renderAll(); }); const gMerged = gEntered.merge(gSel); gSel.exit().remove(); // Build the snap-id set once (used by per-route filtering below). const snapIds = new Set(); for (const n of classified.nodes) { if (n.kind === "snap") snapIds.add(n.id); } gMerged.each(function (d) { const wps = d.waypoints; const trav = traversalByRouteIdx.get(d.routeIdx); // Filter snap nodes that are interior pass-throughs FOR THIS // ROUTE — i.e., snap nodes that this route's endpoint didn't // create. (A snap node is "this route's own" iff a neighbor in // wps is one of this route's endpoint waypoints.) Other routes' // snap points should pass through transparently, without // creating a junction or limiting the radius of nearby vertex // junctions. const filteredIdx = []; for (let i = 0; i < wps.length; i++) { const isInteriorSnap = i > 0 && i < wps.length - 1 && snapIds.has(wps[i].id) && !isEndpoint(wps[i - 1]) && !isEndpoint(wps[i + 1]); if (!isInteriorSnap) filteredIdx.push(i); } const filteredWps = filteredIdx.map(i => wps[i]); // Per-waypoint effective junction radius. For each interior // waypoint in filteredWps, the curve must fit within the segments // on either side. The available budget on each side is HALF the // segment length when the adjacent waypoint also has a curve // (so the two curves can share the segment without overlapping), // and the FULL segment length when the adjacent waypoint is an // endpoint (no opposing curve to share with). // // For vertex junctions on this route, "segment length" between // filtered neighbors is the centerline distance — when the path // crosses snap chains (snaps filtered out), the chain is // collinear so this is just the direct Euclidean distance. const filteredJrCaps = new Array(filteredWps.length); for (let i = 1; i < filteredWps.length - 1; i++) { const wp = filteredWps[i]; if (isEndpoint(wp)) { filteredJrCaps[i] = jr; continue; } const prev = filteredWps[i - 1]; const next = filteredWps[i + 1]; const lenBack = Math.hypot(wp.x - prev.x, wp.y - prev.y); const lenFwd = Math.hypot(wp.x - next.x, wp.y - next.y); // Halve only if the adjacent waypoint will ALSO take a curve. // Endpoints don't curve; everything else (vertex or kept snap) does. const capBack = isEndpoint(prev) ? lenBack : 0.5 * lenBack; const capFwd = isEndpoint(next) ? lenFwd : 0.5 * lenFwd; filteredJrCaps[i] = Math.min(jr, capBack, capFwd); } const filteredWpToIndex = new Map(); filteredWps.forEach((w, i) => filteredWpToIndex.set(w, i)); function jrAt(wp) { const i = filteredWpToIndex.get(wp); if (i == null) return jr; const c = filteredJrCaps[i]; return c == null ? jr : c; } // posAt(i, j) returns the drawn endpoint of filteredWps[i] on the // segment toward filteredWps[j]. The offset/shift come from the // ORIGINAL sub-edge adjacent to wps[origI] in the wps array, // which (for filtered segments spanning a snap chain) is the // first sub-edge of the chain on the origI side. function posAt(i, j) { const origI = filteredIdx[i]; const origJ = filteredIdx[j]; const step = origJ > origI ? 1 : -1; const neighborIdx = origI + step; // adjacent in original wps const adjIdx = origI - step; // on the far side of origI const adj = (adjIdx >= 0 && adjIdx < wps.length) ? wps[adjIdx] : null; return endpointPos(wps[origI], wps[neighborIdx], adj, d.routeIdx); } // Get all renderable pieces (straight lines + curves) for this route. const pieces = routeCurvedSegments(filteredWps, posAt, isEndpoint, jrAt); // Helper: map a filtered index back to its position in the // original wps array (used for downstream lookups like // bundle/spoke type and traversal pairKey). const origIdxOf = (fi) => filteredIdx[fi]; // Build draw items. Each item is a single element with its // own color. For paths/spokes mode, each piece becomes one item. // For junctions mode, straight pieces split at midpoint into two // half-items; curves stay as one item colored by the corner's // pairKey. // Each item carries `origA` and `origB`: the original-wps index // pair for the FIRST sub-edge of this collapsed segment (used // for edge lookups, color, and the mouseover handler). For // curves, segIdx refers to the OUTGOING segment at the curve's // junction, so origA/origB describe that outgoing segment. const items = []; for (let k = 0; k < pieces.length; k++) { const pc = pieces[k]; const origA = origIdxOf(pc.segIdx); const stepFwd = origIdxOf(pc.segIdx + 1) > origA ? 1 : -1; const origB = origA + stepFwd; if (pc.kind === "curve") { let stroke; if (pathColorMode === "junctions") { const origCorner = origIdxOf(pc.wpIndex); const pk = trav && trav.waypoints[origCorner] && trav.waypoints[origCorner].pairKey; stroke = JUNCTION_PAIR_COLORS[pk] || "#000"; } else if (pathColorMode === "spokes") { const A = wps[origA], B = wps[origB]; const e = network.edges.get(edgeKey(A.id, B.id)); stroke = SPOKE_COLORS[e ? e.spokeType : "area"] || "#000"; } else { stroke = d.route ? d.route.color : "#000"; } items.push({ key: d.routeId + ":p" + k, origA, origB, stroke, d: `M ${pc.x1} ${pc.y1} C ${pc.c1x} ${pc.c1y} ${pc.c2x} ${pc.c2y} ${pc.x2} ${pc.y2}`, }); } else { // Straight line piece. const { x1, y1, x2, y2 } = pc; if (pathColorMode === "junctions" && trav) { const mx = (x1 + x2) / 2, my = (y1 + y2) / 2; const pkA = trav.waypoints[origA] && trav.waypoints[origA].pairKey; const pkB = trav.waypoints[origB] && trav.waypoints[origB].pairKey; const colorA = JUNCTION_PAIR_COLORS[pkA] || "#000"; const colorB = JUNCTION_PAIR_COLORS[pkB] || "#000"; items.push({ key: d.routeId + ":p" + k + ":a", origA, origB, stroke: colorA, d: `M ${x1} ${y1} L ${mx} ${my}`, }); items.push({ key: d.routeId + ":p" + k + ":b", origA, origB, stroke: colorB, d: `M ${mx} ${my} L ${x2} ${y2}`, }); } else { let stroke; if (pathColorMode === "spokes") { const A = wps[origA], B = wps[origB]; const e = network.edges.get(edgeKey(A.id, B.id)); stroke = SPOKE_COLORS[e ? e.spokeType : "area"] || "#000"; } else { stroke = d.route ? d.route.color : "#000"; } items.push({ key: d.routeId + ":p" + k, origA, origB, stroke, d: `M ${x1} ${y1} L ${x2} ${y2}`, }); } } } const lines = d3.select(this).selectAll("path.route-seg").data(items, s => s.key); lines.enter().append("path") .attr("class", "route-seg route") .attr("fill", "none") .attr("stroke-linecap", "butt") .merge(lines) .attr("d", s => s.d) .attr("stroke", s => s.stroke) .attr("stroke-width", configNavMesh.bundle.strandWidth) .on("mouseover", function (event, s) { const A = wps[s.origA], B = wps[s.origB]; const e = network.edges.get(edgeKey(A.id, B.id)); let spokeType = null; let cw = []; if (e && e.bundleOffsetByRoute) { spokeType = e.spokeType; const dx = B.x - A.x, dy = B.y - A.y; const dot = dy * e.bundlePerpX + (-dx) * e.bundlePerpY; const aligned = dot >= 0; const entries = e.routeIdxs .map(ri => [ri, e.bundleOffsetByRoute.get(ri)]) .filter(([, off]) => off != null) .sort((x, y) => aligned ? x[1] - y[1] : y[1] - x[1]); cw = entries.map(([ri]) => routes[ri] ? routes[ri].id : ri); } junctionStatus.text(`route ${d.routeId}, ${spokeType || "?"}, [${cw.join(",")}]`); }) .on("mouseout", function () { junctionStatus.text(""); }); lines.exit().remove(); }); } function buildJunctionLabels(classified) { const labels = new Map(); const parallels = [], decisions = []; for (const n of classified.nodes) { if (n.classification === "parallel") parallels.push(n.id); else if (n.classification === "decision") decisions.push(n.id); } parallels.sort(); decisions.sort(); parallels.forEach((id, i) => labels.set(id, "p" + i)); decisions.forEach((id, i) => labels.set(id, "d" + i)); return labels; } function formatJunctionStatus(node, network, labels) { if (!node) return ""; const label = labels && labels.get(node.id); const labelPrefix = label ? label + " · " : ""; const type = node.classification === "decision" ? "decision waypoint" : "parallel waypoint"; if (!node.spokes || node.spokes.length === 0) return labelPrefix + type; const edges = network && network.edges; const nodes = network && network.nodes; function ekey(a, b) { return a < b ? a + "||" + b : b + "||" + a; } function routesCwForSpoke(s) { if (!edges) return null; const e = edges.get(ekey(node.id, s.farId)); if (!e || !e.bundleOffsetByRoute) return null; const entries = e.routeIdxs .map(ri => [ri, e.bundleOffsetByRoute.get(ri)]) .filter(([, off]) => off != null); const far = nodes && nodes.get(s.farId); let storedAlignsWithOutward = true; if (far) { const dx = far.x - node.x, dy = far.y - node.y; const dot = dy * e.bundlePerpX + (-dx) * e.bundlePerpY; storedAlignsWithOutward = dot >= 0; } entries.sort((x, y) => storedAlignsWithOutward ? x[1] - y[1] : y[1] - x[1]); return entries.map(([ri]) => routes[ri] ? routes[ri].id : ri); } const spokeLines = node.spokes.map(s => { const deg = Math.round(s.angle * 180 / Math.PI); const cw = routesCwForSpoke(s); const cwStr = cw && cw.length ? "[" + cw.join(",") + "]" : "[]"; return `${s.spokeType} ${deg}° ${cwStr}`; }); return labelPrefix + type + " · " + spokeLines.join(", "); } function renderJunctions(classifiedNodes, mesh, network, labels) { const BASE_R = configNavMesh.junction.baseRadius; const PER_ROUTE_BUMP = configNavMesh.junction.perRouteBump; const radiusFor = (n) => { let maxRoutesPerSpoke = 0; for (const s of n.spokes) { if (s.routeIdxs.length > maxRoutesPerSpoke) maxRoutesPerSpoke = s.routeIdxs.length; } return BASE_R + maxRoutesPerSpoke * PER_ROUTE_BUMP; }; function areaFaceCountAt(pointId) { let n = 0; for (const f of mesh.faces) { if (!f.isArea) continue; if (f.ring.indexOf(pointId) !== -1) n++; } return n; } function shapeFor(node) { if (node.kind === "snap") return "snap"; if (node.kind === "vertex") return areaFaceCountAt(node.id) === 1 ? "coastline" : "multiway"; return "multiway"; } function markerPath(shape, cx, cy, r) { if (shape === "snap") { return `M ${cx - r} ${cy - r} L ${cx + r} ${cy - r} L ${cx + r} ${cy + r} L ${cx - r} ${cy + r} Z`; } if (shape === "coastline") { const tr = r * 1.15, h = tr * Math.sqrt(3); const top = { x: cx, y: cy - (2 / 3) * h }; const bl = { x: cx - tr, y: cy + (1 / 3) * h }; const br = { x: cx + tr, y: cy + (1 / 3) * h }; return `M ${top.x} ${top.y} L ${br.x} ${br.y} L ${bl.x} ${bl.y} Z`; } return `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${2 * r} 0 a ${r} ${r} 0 1 0 ${-2 * r} 0 Z`; } const data = classifiedNodes.map(n => ({ key: n.id, x: n.x, y: n.y, node: n, isDecision: n.classification === "decision", r: radiusFor(n), shape: shapeFor(n), })); const HIT_R_PADDING = configNavMesh.junction.hitRadiusPadding; dataJoin(junctionLayer, "circle", "junction-hit", data, d => d.key, null, sel => sel .attr("cx", d => d.x).attr("cy", d => d.y) .attr("r", d => d.r + HIT_R_PADDING) .on("mouseover", function (event, d) { junctionStatus.text(formatJunctionStatus(d.node, network, labels)); }) .on("mouseout", function () { junctionStatus.text(""); })); dataJoin(junctionLayer, "path", "junction-marker", data, d => d.key, sel => sel, sel => sel .classed("decision", d => d.isDecision) .classed("parallel", d => !d.isDecision) .attr("stroke-width", d => d.isDecision ? configNavMesh.junction.decisionStrokeWidth : configNavMesh.junction.parallelStrokeWidth) .attr("d", d => markerPath(d.shape, d.x, d.y, d.r))); } function renderRoutePoints() { const eps = []; routes.forEach(r => { eps.push({ routeId: r.id, kind: "start", x: r.start.x, y: r.start.y, color: r.color }); eps.push({ routeId: r.id, kind: "end", x: r.end.x, y: r.end.y, color: r.color }); }); const routePointDrag = d3.drag() .on("start", function () { d3.select(this).raise(); }) .on("drag", function (event, d) { const route = routes.find(r => r.id === d.routeId); if (!route) return; const target = d.kind === "start" ? route.start : route.end; target.x = event.x; target.y = event.y; d.x = event.x; d.y = event.y; d3.select(this).attr("cx", event.x).attr("cy", event.y); renderAll(); }); dataJoin(routePointLayer, "circle", "route-point", eps, d => d.routeId + "-" + d.kind, sel => sel.attr("class", d => "route-point " + d.kind).attr("r", 8) .on("dblclick", function (event, d) { event.stopPropagation(); const idx = routes.findIndex(r => r.id === d.routeId); if (idx !== -1) routes.splice(idx, 1); renderAll(); }).call(routePointDrag), sel => sel.attr("fill", d => d.color).attr("cx", d => d.x).attr("cy", d => d.y)); } function renderVirtualPoints() { const vps = mesh.derivedPoints.filter(p => p.virtual); dataJoin(virtualPointLayer, "circle", "virtual", vps, d => d.id, sel => sel.attr("class", "point virtual").attr("r", 5).style("pointer-events", "none"), sel => sel.attr("cx", d => d.x).attr("cy", d => d.y)); } function renderDisabledMarkers() { const disabledList = []; mesh.clusters.forEach(c => { c.faces.forEach(cf => { if (cf.disabled && cf.isArea && cf.interiorPoint) { disabledList.push({ stableKey: cf.stableKey, x: cf.interiorPoint.x, y: cf.interiorPoint.y }); } }); }); const ARM = 7, HIT_R = 14; function xPath(d) { return `M ${d.x - ARM} ${d.y - ARM} L ${d.x + ARM} ${d.y + ARM} ` + `M ${d.x + ARM} ${d.y - ARM} L ${d.x - ARM} ${d.y + ARM}`; } const sel = disabledMarkerLayer.selectAll("g.disabled-marker").data(disabledList, d => d.stableKey); const entered = sel.enter().append("g").attr("class", "disabled-marker") .on("dblclick", function (event, d) { event.stopPropagation(); disabledFaces.delete(d.stableKey); renderAll(); }); entered.append("circle").attr("class", "disabled-marker-hit"); entered.append("path").attr("class", "disabled-marker-x"); const merged = entered.merge(sel); merged.select("circle.disabled-marker-hit") .attr("cx", d => d.x).attr("cy", d => d.y).attr("r", HIT_R); merged.select("path.disabled-marker-x").attr("d", xPath); sel.exit().remove(); } function renderPoints(junctionByVertexId, network, labels) { const pointDrag = d3.drag() .filter(event => !event.button) .on("start", function (event, d) { d3.select(this).raise(); d._dragMoved = false; d._dragStartX = d.x; d._dragStartY = d.y; }) .on("drag", function (event, d) { d.x = event.x; d.y = event.y; if (Math.hypot(d.x - d._dragStartX, d.y - d._dragStartY) > 2) d._dragMoved = true; d3.select(this).attr("cx", d.x).attr("cy", d.y); renderAll(); }) .on("end", function (event, d) { if (d._dragMoved) { d._lastDragEndedAt = Date.now(); return; } if (mode !== "navmesh") return; if (!pendingLink) pendingLink = { startId: d.id }; else { const a = pendingLink.startId, b = d.id; if (a !== b && !linkExists(a, b)) links.push({ id: linkIdCounter++, a, b }); pendingLink = null; } renderAll(); }); dataJoin(pointLayer, "circle", "point", points, d => d.id, sel => sel.attr("r", 6) .on("dblclick", function (event, d) { event.stopPropagation(); if (mode !== "navmesh") return; if (d._lastDragEndedAt && Date.now() - d._lastDragEndedAt < 300) return; removePoint(d.id); renderAll(); }).call(pointDrag), sel => sel.attr("cx", d => d.x).attr("cy", d => d.y) .on("mouseover", function (event, d) { const node = junctionByVertexId && junctionByVertexId.get("u" + d.id); if (node) junctionStatus.text(formatJunctionStatus(node, network, labels)); }) .on("mouseout", function (event, d) { const node = junctionByVertexId && junctionByVertexId.get("u" + d.id); if (node) junctionStatus.text(""); })); } function renderPending() { pendingLayer.selectAll("*").remove(); if (pendingLink && mousePos) { const sp = pointById(pendingLink.startId); if (sp) { pendingLayer.append("line").attr("class", "pending-line") .attr("stroke", "rgba(0, 0, 0, 0.15)").attr("stroke-width", 1) .attr("x1", sp.x).attr("y1", sp.y) .attr("x2", mousePos[0]).attr("y2", mousePos[1]); } } if (pendingRoute && mousePos) { pendingLayer.append("path").attr("class", "pending-line") .attr("stroke", pendingRoute.color).attr("stroke-width", configNavMesh.route.strokeWidth).attr("fill", "none") .attr("d", routePath({ start: pendingRoute.start, end: { x: mousePos[0], y: mousePos[1] } })); } } function applyOptimizedOrderings(network) { if (!optimizedOrderings || optimizedOrderings.size === 0) return; const linkGroups = network.linkGroups; if (!linkGroups) return; for (const [gk, entry] of optimizedOrderings) { const group = linkGroups.get(gk); if (!group) continue; const ordering = Array.isArray(entry) ? entry : []; const inGroup = new Set(group.routeUnion); const filtered = ordering.filter(r => inGroup.has(r)); for (const r of group.routeUnion) { if (!filtered.includes(r)) filtered.push(r); } const n = filtered.length; const layout = new Map(); for (let k = 0; k < n; k++) { let off; if (group.areaSide === +1) off = +k; else if (group.areaSide === -1) off = k - (n - 1); else off = k - (n - 1) / 2; layout.set(filtered[k], off); } for (const ek of group.edgeKeys) { const e = network.edges.get(ek); if (!e) continue; e.bundleOffsetByRoute = new Map(); for (const ri of e.routeIdxs) { if (layout.has(ri)) e.bundleOffsetByRoute.set(ri, layout.get(ri)); } } } } function renderAll() { mesh = buildNavMesh(points, links, disabledFaces); const liveKeys = new Set(mesh.faces.map(f => f.stableKey)); [...disabledFaces].forEach(k => { if (!liveKeys.has(k)) disabledFaces.delete(k); }); renderPolygons(); renderBisectors(); renderLinks(); const network = combinedPathNetwork(mesh, routes, pathfinding); const classified = classifyPathNodes(network); // Optimization runs as its own step on the freshly-routed network, // then its results are applied back as bundle offsets. optimizedOrderings = optimizeIndex(network, classified); applyOptimizedOrderings(network); const labels = buildJunctionLabels(classified); renderRoutes(network, classified); renderJunctions(classified.nodes, mesh, network, labels); const junctionByVertexId = new Map(); for (const n of classified.nodes) { if (n.kind === "vertex") junctionByVertexId.set(n.id, n); } renderRoutePoints(); renderVirtualPoints(); renderDisabledMarkers(); renderPoints(junctionByVertexId, network, labels); renderPending(); } if (typeof invalidation !== "undefined") { invalidation.then(() => window.removeEventListener("mouseup", handleMouseUp)); } // ---- Toolbar wiring ---- function serializeState() { const round = (n) => Math.round(n * 10) / 10; const pointLines = points.map(p => ` { id: ${p.id}, x: ${round(p.x)}, y: ${round(p.y)} }`); const linkLines = links.map(l => ` { id: ${l.id}, a: ${l.a}, b: ${l.b} }`); const disabledLines = [...disabledFaces].map(k => ` ${JSON.stringify(k)}`); const routeLines = routes.map(r => ` { id: ${r.id}, color: ${JSON.stringify(r.color)}, ` + `start: { x: ${round(r.start.x)}, y: ${round(r.start.y)} }, ` + `end: { x: ${round(r.end.x)}, y: ${round(r.end.y)} } }`); const block = (label, lines) => lines.length ? ` ${label}: [\n${lines.join(",\n")}\n ]` : ` ${label}: []`; return "{\n" + [ block("points", pointLines), block("links", linkLines), block("disabledFaceKeys", disabledLines), block("routes", routeLines), ].join(",\n") + "\n}"; } async function copyText(text) { try { await navigator.clipboard.writeText(text); return true; } catch (_) { const ta = document.createElement("textarea"); ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0"; document.body.appendChild(ta); ta.select(); let ok = false; try { ok = document.execCommand("copy"); } catch (_) {} document.body.removeChild(ta); return ok; } } function flashStatus(text) { toolbarStatus.text(text); setTimeout(() => { toolbarStatus.text(""); }, 1500); } saveBtn.on("click", async () => { const ok = await copyText(serializeState()); flashStatus(ok ? `copied ${points.length}p · ${links.length}l · ${routes.length}r` : "copy failed"); }); clearBtn.on("click", () => { points.length = 0; links.length = 0; routes.length = 0; disabledFaces.clear(); pointIdCounter = 0; linkIdCounter = 0; routeIdCounter = 0; pendingLink = null; pendingRoute = null; routeDrag = null; renderAll(); flashStatus("cleared"); }); renderAll(); return container.node(); }4b:T5328,dataNavMesh = ({ points: [ { id: 3, lon: -125.6035, lat: 39.95376 }, { id: 5, lon: -125.03519, lat: 46.2153 }, { id: 6, lon: -125.72649, lat: 48.70828 }, { id: 7, lon: -133.40932, lat: 51.71275 }, { id: 11, lon: -146.01016, lat: 59.86108 }, { id: 12, lon: -149.31076, lat: 59.02679 }, { id: 14, lon: -151.88861, lat: 56.9363 }, { id: 17, lon: -105.44968, lat: 18.03525 }, { id: 21, lon: -159.73758, lat: 16.2024 }, { id: 22, lon: -164.12922, lat: 21.27937 }, { id: 23, lon: -155.47401, lat: 18.47098 }, { id: 24, lon: -154.45942, lat: 19.90861 }, { id: 25, lon: -155.20539, lat: 20.60003 }, { id: 26, lon: -156.02397, lat: 20.29314 }, { id: 27, lon: -156.64496, lat: 19.77889 }, { id: 28, lon: -156.44101, lat: 18.95203 }, { id: 29, lon: -156.39164, lat: 20.40635 }, { id: 30, lon: -155.68313, lat: 20.75944 }, { id: 31, lon: -156.35731, lat: 21.24627 }, { id: 32, lon: -156.77304, lat: 20.94285 }, { id: 33, lon: -157.4017, lat: 21.01204 }, { id: 34, lon: -157.32589, lat: 21.27402 }, { id: 35, lon: -156.57912, lat: 21.20263 }, { id: 36, lon: -156.87396, lat: 20.98672 }, { id: 37, lon: -157.46594, lat: 21.46371 }, { id: 38, lon: -157.89809, lat: 21.98307 }, { id: 39, lon: -158.69903, lat: 21.78672 }, { id: 40, lon: -157.97352, lat: 21.05478 }, { id: 41, lon: -157.7348, lat: 21.07077 }, { id: 42, lon: -159.72496, lat: 21.82393 }, { id: 43, lon: -159.24779, lat: 21.7327 }, { id: 44, lon: -159.18969, lat: 22.29208 }, { id: 45, lon: -159.93266, lat: 22.30794 }, { id: 46, lon: -160.35363, lat: 21.72237 }, { id: 47, lon: -159.92128, lat: 21.84059 }, { id: 48, lon: -160.04701, lat: 22.07248 }, { id: 49, lon: -160.34027, lat: 22.01985 }, { id: 50, lon: -160.06606, lat: 21.97222 }, { id: 51, lon: -160.2348, lat: 21.85588 }, { id: 52, lon: -159.64693, lat: 21.93385 }, { id: 53, lon: -159.32823, lat: 21.97425 }, { id: 57, lon: -122.96397, lat: 46.23186 }, { id: 58, lon: -122.04299, lat: 45.63332 }, { id: 59, lon: -118.99126, lat: 45.92606 }, { id: 60, lon: -117.47877, lat: 46.69482 }, { id: 61, lon: -123.31789, lat: 48.21221 }, { id: 75, lon: -96.71158, lat: 26.05525 }, { id: 78, lon: -91.5957, lat: 29.2347 }, { id: 79, lon: -90.08333, lat: 28.34321 }, { id: 80, lon: -89.23179, lat: 29.17973 }, { id: 81, lon: -90.22662, lat: 29.88379 }, { id: 82, lon: -91.11325, lat: 30.19214 }, { id: 83, lon: -91.74144, lat: 31.14989 }, { id: 84, lon: -93.08502, lat: 31.6701 }, { id: 85, lon: -93.93725, lat: 33.33202 }, { id: 86, lon: -92.19547, lat: 33.06713 }, { id: 87, lon: -93.05134, lat: 34.05188 }, { id: 88, lon: -90.92396, lat: 32.3646 }, { id: 89, lon: -90.22958, lat: 33.49621 }, { id: 90, lon: -91.15319, lat: 33.81468 }, { id: 91, lon: -93.32471, lat: 35.42235 }, { id: 92, lon: -94.84806, lat: 35.38531 }, { id: 93, lon: -95.88864, lat: 36.41926 }, { id: 94, lon: -91.43696, lat: 35.53082 }, { id: 95, lon: -92.59594, lat: 36.36114 }, { id: 96, lon: -90.95706, lat: 36.2182 }, { id: 97, lon: -90.00607, lat: 35.27012 }, { id: 98, lon: -89.17462, lat: 37.06928 }, { id: 99, lon: -90.38681, lat: 38.80563 }, { id: 100, lon: -91.56432, lat: 40.14654 }, { id: 101, lon: -90.2519, lat: 42.47285 }, { id: 102, lon: -93.50363, lat: 45.40654 }, { id: 103, lon: -94.6707, lat: 39.17493 }, { id: 104, lon: -97.07638, lat: 42.79614 }, { id: 105, lon: -89.29888, lat: 41.23519 }, { id: 106, lon: -87.60481, lat: 41.83141 }, { id: 107, lon: -87.78647, lat: 43.30899 }, { id: 108, lon: -86.86562, lat: 45.49244 }, { id: 109, lon: -88.46709, lat: 44.05251 }, { id: 110, lon: -87.10525, lat: 45.58714 }, { id: 111, lon: -85.68934, lat: 45.88771 }, { id: 112, lon: -85.11129, lat: 45.83424 }, { id: 113, lon: -86.19755, lat: 44.87202 }, { id: 114, lon: -86.72561, lat: 43.65703 }, { id: 115, lon: -86.33799, lat: 42.61213 }, { id: 116, lon: -87.18573, lat: 41.85269 }, { id: 117, lon: -88.80548, lat: 28.97889 }, { id: 118, lon: -88.03595, lat: 30.09613 }, { id: 119, lon: -86.44218, lat: 30.12423 }, { id: 120, lon: -85.08015, lat: 29.37559 }, { id: 121, lon: -83.4167, lat: 28.89596 }, { id: 122, lon: -83.377, lat: 27.58417 }, { id: 123, lon: -81.92745, lat: 24.19889 }, { id: 128, lon: -80.12212, lat: 30.66045 }, { id: 129, lon: -79.90485, lat: 31.8105 }, { id: 130, lon: -74.67144, lat: 35.11129 }, { id: 131, lon: -75.49956, lat: 37.00874 }, { id: 132, lon: -74.54959, lat: 38.25733 }, { id: 133, lon: -73.32129, lat: 40.14296 }, { id: 134, lon: -71.75166, lat: 40.90344 }, { id: 141, lon: -85.51398, lat: 22.02128 }, { id: 155, lon: -67.47529, lat: 17.74859 }, { id: 156, lon: -67.48803, lat: 18.806 }, { id: 157, lon: -65.59775, lat: 18.65424 }, { id: 158, lon: -65.08593, lat: 18.22652 }, { id: 159, lon: -65.78205, lat: 17.63897 }, { id: 182, lon: -79.44973, lat: 27.10805 }, { id: 184, lon: -70.66755, lat: 42.35521 }, { id: 185, lon: -69.66234, lat: 43.32664 }, { id: 186, lon: -67.19413, lat: 44.31154 }, { id: 189, lon: -58.8012, lat: 45.91163 }, { id: 190, lon: -60.34759, lat: 47.26337 }, { id: 191, lon: -62.12275, lat: 46.6105 }, { id: 192, lon: -64.34039, lat: 47.29273 }, { id: 193, lon: -63.38269, lat: 48.981 }, { id: 194, lon: -65.51336, lat: 49.82446 }, { id: 195, lon: -68.60791, lat: 48.73747 }, { id: 196, lon: -70.91753, lat: 46.79216 }, { id: 197, lon: -74.75931, lat: 45.02744 }, { id: 198, lon: -76.51736, lat: 44.00891 }, { id: 199, lon: -120.3939, lat: 47.40526 }, { id: 200, lon: -119.68758, lat: 48.14121 }, { id: 201, lon: -118.32791, lat: 47.87091 }, { id: 202, lon: -118.08825, lat: 48.6221 }, { id: 204, lon: -84.94329, lat: 46.81456 }, { id: 205, lon: -86.02986, lat: 46.77486 }, { id: 206, lon: -86.51049, lat: 46.61012 }, { id: 207, lon: -87.59577, lat: 46.91641 }, { id: 208, lon: -87.4705, lat: 47.45243 }, { id: 209, lon: -88.04853, lat: 47.57111 }, { id: 210, lon: -90.45483, lat: 46.65467 }, { id: 211, lon: -90.3416, lat: 47.28707 }, { id: 212, lon: -90.84992, lat: 47.23591 }, { id: 213, lon: -90.85488, lat: 47.42886 }, { id: 214, lon: -89.32999, lat: 47.98341 }, { id: 215, lon: -87.89188, lat: 48.55781 }, { id: 216, lon: -86.56822, lat: 48.55747 }, { id: 217, lon: -86.13765, lat: 47.69466 }, { id: 218, lon: -85.13951, lat: 47.44311 }, { id: 219, lon: -92.02772, lat: 46.71258 }, { id: 220, lon: -88.525, lat: 48.18503 }, { id: 221, lon: -89.20355, lat: 47.92847 }, { id: 222, lon: -89.172, lat: 47.80508 }, { id: 223, lon: -88.61329, lat: 48.04172 }, { id: 224, lon: -87.75366, lat: 37.79389 }, { id: 225, lon: -86.12778, lat: 37.14628 }, { id: 226, lon: -85.19052, lat: 38.62676 }, { id: 227, lon: -82.96997, lat: 38.65528 }, { id: 228, lon: -83.98896, lat: 37.43206 }, { id: 229, lon: -82.21757, lat: 38.61452 }, { id: 230, lon: -87.89003, lat: 31.5287 }, { id: 231, lon: -88.00254, lat: 32.41338 }, { id: 232, lon: -88.23304, lat: 34.98491 }, { id: 233, lon: -88.20737, lat: 36.74759 }, { id: 237, lon: -86.19352, lat: 34.48326 }, { id: 238, lon: -83.9447, lat: 36.07598 }, { id: 239, lon: -86.54305, lat: 36.13759 }, { id: 240, lon: -84.47706, lat: 36.94847 }, { id: 241, lon: -81.85049, lat: 37.3755 }, { id: 242, lon: -81.06653, lat: 37.99818 }, { id: 243, lon: -79.50653, lat: 41.04425 }, { id: 247, lon: -76.18502, lat: 37.06396 }, { id: 248, lon: -76.38134, lat: 39.24949 }, { id: 249, lon: -75.59494, lat: 39.61808 }, { id: 250, lon: -74.73604, lat: 40.13945 }, { id: 251, lon: -72.10436, lat: 41.27056 }, { id: 252, lon: -73.59225, lat: 40.97141 }, { id: 253, lon: -74.05152, lat: 40.61002 }, { id: 254, lon: 145.11949, lat: 13.66315 }, { id: 255, lon: 128.60606, lat: 26.4465 }, { id: 256, lon: 164.27159, lat: 24.6132 }, { id: 257, lon: -178.86227, lat: 27.86053 }, { id: 258, lon: -170.59769, lat: -14.91495 }, { id: 259, lon: -174.53117, lat: -4.09281 }, { id: 260, lon: -179.01308, lat: 12.00761 }, { id: 267, lon: -84.39363, lat: 45.83123 }, { id: 268, lon: -83.0501, lat: 45.18311 }, { id: 269, lon: -83.29107, lat: 44.12757 }, { id: 270, lon: -82.72231, lat: 44.19132 }, { id: 271, lon: -82.36683, lat: 43.13074 }, { id: 272, lon: -81.85024, lat: 43.76497 }, { id: 273, lon: -81.58615, lat: 44.45728 }, { id: 274, lon: -81.93703, lat: 45.36855 }, { id: 275, lon: -83.81707, lat: 45.85475 }, { id: 276, lon: -83.95332, lat: 43.41707 }, { id: 277, lon: -79.32847, lat: 42.56769 }, { id: 278, lon: -81.72596, lat: 41.54306 }, { id: 279, lon: -82.6993, lat: 41.66938 }, { id: 280, lon: -81.15775, lat: 42.56143 }, { id: 281, lon: -80.27172, lat: 42.45497 }, { id: 282, lon: -79.25165, lat: 42.83445 }, { id: 283, lon: -83.18182, lat: 42.16113 }, { id: 284, lon: -82.45368, lat: 42.67581 }, { id: 286, lon: -73.68678, lat: 42.77176 }, { id: 287, lon: -73.21139, lat: 44.98234 }, { id: 288, lon: -79.24217, lat: 43.27676 }, { id: 289, lon: -78.32882, lat: 43.46848 }, { id: 290, lon: -76.62957, lat: 43.49759 }, { id: 291, lon: -78.87598, lat: 43.77813 }, { id: 292, lon: -79.33236, lat: 43.55656 }, { id: 295, lon: -81.30783, lat: 45.43419 }, { id: 296, lon: -80.1536, lat: 44.47144 }, { id: 297, lon: -81.59384, lat: 45.91213 }, { id: 298, lon: -84.02291, lat: 46.1502 }, { id: 299, lon: -89.1944, lat: 30.16447 }, { id: 300, lon: -90.31775, lat: 30.3035 }, { id: 301, lon: -92.33678, lat: 48.33782 }, { id: 302, lon: -95.20915, lat: 49.06219 }, { id: 303, lon: -99.17784, lat: 47.64904 }, { id: 304, lon: -99.99162, lat: 43.94186 }, { id: 305, lon: -101.84024, lat: 47.87795 }, { id: 306, lon: -110.12605, lat: 47.79351 }, { id: 310, lon: -94.56375, lat: 13.16771 }, { id: 311, lon: -90.86363, lat: 8.54683 }, { id: 314, lon: -137.5822, lat: 57.02767 }, { id: 319, lon: -96.60313, lat: 27.83926 }, { id: 322, lon: -79.16598, lat: 12.34725 }, { id: 331, lon: -73.9271, lat: 21.68967 }, { id: 332, lon: -72.19069, lat: 20.88645 }, { id: 333, lon: -73.85704, lat: 19.91573 }, { id: 334, lon: -65.26105, lat: 42.86959 }, { id: 338, lon: -79.68116, lat: 24.40892 }, { id: 339, lon: -84.33737, lat: 4.80281 }, { id: 340, lon: -80.01167, lat: 5.77149 }, { id: 344, lon: -118.30964, lat: 33.53366 }, { id: 345, lon: -121.17206, lat: 34.3499 }, { id: 346, lon: -123.00352, lat: 37.55384 }, { id: 347, lon: -115.97211, lat: 27.51519 }, { id: 348, lon: -77.41559, lat: 27.01261 }, { id: 349, lon: -79.22348, lat: 26.71697 }, { id: 350, lon: -76.79894, lat: 25.78545 }, { id: 351, lon: -152.3836, lat: 59.14584 }, { id: 352, lon: -151.44698, lat: 60.76324 }, { id: 353, lon: -149.87751, lat: 61.22352 }, { id: 354, lon: -151.88714, lat: 60.91749 }, { id: 355, lon: -153.20918, lat: 59.01966 }, { id: 356, lon: -151.46736, lat: 57.8887 }, { id: 360, lon: -126.59693, lat: 31.1161 }, { id: 361, lon: -148.19162, lat: 26.21278 }, { id: 362, lon: -160.85028, lat: 28.61525 }, { id: 365, lon: -71.41057, lat: 41.12642 }, { id: 366, lon: -68.81643, lat: 40.50235 }, { id: 367, lon: -69.89832, lat: 42.12777 }, { id: 368, lon: -111.03468, lat: 15.27473 }, { id: 369, lon: -146.81813, lat: 16.14072 }, { id: 370, lon: -71.30163, lat: 22.90301 } ], links: [ { id: 6, a: 5, b: 6 }, { id: 7, a: 6, b: 7 }, { id: 12, a: 11, b: 12 }, { id: 22, a: 21, b: 22 }, { id: 24, a: 23, b: 24 }, { id: 25, a: 24, b: 25 }, { id: 26, a: 25, b: 26 }, { id: 27, a: 26, b: 27 }, { id: 28, a: 27, b: 28 }, { id: 29, a: 28, b: 23 }, { id: 30, a: 29, b: 30 }, { id: 31, a: 30, b: 31 }, { id: 32, a: 31, b: 32 }, { id: 33, a: 32, b: 29 }, { id: 34, a: 33, b: 34 }, { id: 35, a: 34, b: 35 }, { id: 36, a: 35, b: 36 }, { id: 37, a: 36, b: 33 }, { id: 38, a: 37, b: 38 }, { id: 39, a: 38, b: 39 }, { id: 40, a: 39, b: 40 }, { id: 41, a: 40, b: 41 }, { id: 42, a: 41, b: 37 }, { id: 43, a: 42, b: 43 }, { id: 44, a: 43, b: 44 }, { id: 45, a: 44, b: 45 }, { id: 46, a: 45, b: 42 }, { id: 47, a: 46, b: 47 }, { id: 48, a: 47, b: 48 }, { id: 49, a: 48, b: 49 }, { id: 50, a: 49, b: 46 }, { id: 51, a: 50, b: 47 }, { id: 52, a: 51, b: 46 }, { id: 53, a: 42, b: 52 }, { id: 54, a: 53, b: 43 }, { id: 59, a: 5, b: 57 }, { id: 60, a: 57, b: 58 }, { id: 61, a: 58, b: 59 }, { id: 62, a: 59, b: 60 }, { id: 63, a: 6, b: 61 }, { id: 81, a: 78, b: 79 }, { id: 82, a: 80, b: 81 }, { id: 83, a: 81, b: 82 }, { id: 84, a: 82, b: 83 }, { id: 85, a: 83, b: 84 }, { id: 86, a: 84, b: 85 }, { id: 87, a: 83, b: 86 }, { id: 88, a: 86, b: 87 }, { id: 89, a: 83, b: 88 }, { id: 90, a: 88, b: 89 }, { id: 91, a: 88, b: 90 }, { id: 92, a: 90, b: 91 }, { id: 93, a: 91, b: 92 }, { id: 94, a: 92, b: 93 }, { id: 95, a: 90, b: 94 }, { id: 96, a: 94, b: 95 }, { id: 97, a: 94, b: 96 }, { id: 98, a: 90, b: 97 }, { id: 99, a: 97, b: 98 }, { id: 100, a: 98, b: 99 }, { id: 101, a: 99, b: 100 }, { id: 102, a: 100, b: 101 }, { id: 103, a: 101, b: 102 }, { id: 104, a: 99, b: 103 }, { id: 105, a: 103, b: 104 }, { id: 106, a: 99, b: 105 }, { id: 107, a: 105, b: 106 }, { id: 108, a: 106, b: 107 }, { id: 109, a: 107, b: 108 }, { id: 110, a: 108, b: 109 }, { id: 111, a: 109, b: 110 }, { id: 112, a: 110, b: 111 }, { id: 113, a: 111, b: 112 }, { id: 114, a: 112, b: 113 }, { id: 115, a: 113, b: 114 }, { id: 116, a: 114, b: 115 }, { id: 117, a: 115, b: 116 }, { id: 118, a: 116, b: 106 }, { id: 119, a: 79, b: 117 }, { id: 120, a: 117, b: 118 }, { id: 121, a: 118, b: 119 }, { id: 122, a: 119, b: 120 }, { id: 123, a: 120, b: 121 }, { id: 124, a: 121, b: 122 }, { id: 125, a: 122, b: 123 }, { id: 131, a: 128, b: 129 }, { id: 132, a: 129, b: 130 }, { id: 133, a: 130, b: 131 }, { id: 134, a: 131, b: 132 }, { id: 135, a: 132, b: 133 }, { id: 136, a: 133, b: 134 }, { id: 158, a: 155, b: 156 }, { id: 159, a: 156, b: 157 }, { id: 160, a: 157, b: 158 }, { id: 161, a: 158, b: 159 }, { id: 162, a: 159, b: 155 }, { id: 188, a: 184, b: 185 }, { id: 189, a: 185, b: 186 }, { id: 194, a: 189, b: 190 }, { id: 195, a: 190, b: 191 }, { id: 196, a: 191, b: 192 }, { id: 197, a: 192, b: 193 }, { id: 198, a: 193, b: 194 }, { id: 199, a: 194, b: 195 }, { id: 200, a: 195, b: 196 }, { id: 201, a: 196, b: 197 }, { id: 202, a: 197, b: 198 }, { id: 203, a: 59, b: 199 }, { id: 204, a: 199, b: 200 }, { id: 205, a: 200, b: 201 }, { id: 206, a: 201, b: 202 }, { id: 208, a: 204, b: 205 }, { id: 209, a: 205, b: 206 }, { id: 210, a: 206, b: 207 }, { id: 211, a: 207, b: 208 }, { id: 212, a: 208, b: 209 }, { id: 213, a: 209, b: 210 }, { id: 214, a: 210, b: 211 }, { id: 215, a: 211, b: 212 }, { id: 216, a: 212, b: 213 }, { id: 217, a: 213, b: 214 }, { id: 218, a: 214, b: 215 }, { id: 219, a: 215, b: 216 }, { id: 220, a: 216, b: 217 }, { id: 221, a: 217, b: 218 }, { id: 222, a: 218, b: 204 }, { id: 223, a: 219, b: 212 }, { id: 224, a: 220, b: 221 }, { id: 225, a: 221, b: 222 }, { id: 226, a: 222, b: 223 }, { id: 227, a: 223, b: 220 }, { id: 228, a: 98, b: 224 }, { id: 229, a: 224, b: 225 }, { id: 230, a: 224, b: 226 }, { id: 231, a: 226, b: 227 }, { id: 232, a: 226, b: 228 }, { id: 233, a: 227, b: 229 }, { id: 234, a: 118, b: 230 }, { id: 235, a: 230, b: 231 }, { id: 236, a: 231, b: 232 }, { id: 237, a: 232, b: 233 }, { id: 238, a: 233, b: 98 }, { id: 241, a: 232, b: 237 }, { id: 242, a: 237, b: 238 }, { id: 243, a: 233, b: 239 }, { id: 244, a: 239, b: 240 }, { id: 245, a: 227, b: 241 }, { id: 246, a: 229, b: 242 }, { id: 247, a: 229, b: 243 }, { id: 252, a: 141, b: 75 }, { id: 255, a: 128, b: 182 }, { id: 256, a: 131, b: 247 }, { id: 257, a: 247, b: 248 }, { id: 258, a: 132, b: 249 }, { id: 259, a: 249, b: 250 }, { id: 260, a: 134, b: 251 }, { id: 261, a: 251, b: 252 }, { id: 262, a: 133, b: 253 }, { id: 263, a: 22, b: 254 }, { id: 264, a: 254, b: 255 }, { id: 265, a: 256, b: 254 }, { id: 266, a: 257, b: 22 }, { id: 267, a: 258, b: 21 }, { id: 268, a: 259, b: 21 }, { id: 269, a: 260, b: 22 }, { id: 278, a: 267, b: 268 }, { id: 279, a: 268, b: 269 }, { id: 280, a: 269, b: 270 }, { id: 281, a: 270, b: 271 }, { id: 282, a: 271, b: 272 }, { id: 283, a: 272, b: 273 }, { id: 284, a: 273, b: 274 }, { id: 285, a: 274, b: 275 }, { id: 286, a: 275, b: 267 }, { id: 287, a: 276, b: 269 }, { id: 288, a: 277, b: 278 }, { id: 289, a: 278, b: 279 }, { id: 290, a: 279, b: 280 }, { id: 291, a: 280, b: 281 }, { id: 292, a: 281, b: 282 }, { id: 293, a: 282, b: 277 }, { id: 294, a: 279, b: 283 }, { id: 295, a: 283, b: 284 }, { id: 296, a: 284, b: 271 }, { id: 298, a: 252, b: 253 }, { id: 299, a: 253, b: 286 }, { id: 300, a: 286, b: 287 }, { id: 301, a: 288, b: 289 }, { id: 302, a: 289, b: 290 }, { id: 303, a: 290, b: 198 }, { id: 304, a: 198, b: 291 }, { id: 305, a: 291, b: 292 }, { id: 306, a: 292, b: 288 }, { id: 307, a: 290, b: 286 }, { id: 308, a: 282, b: 288 }, { id: 309, a: 274, b: 295 }, { id: 310, a: 295, b: 296 }, { id: 311, a: 295, b: 297 }, { id: 312, a: 297, b: 298 }, { id: 313, a: 298, b: 204 }, { id: 314, a: 112, b: 267 }, { id: 315, a: 275, b: 298 }, { id: 316, a: 117, b: 80 }, { id: 317, a: 117, b: 299 }, { id: 318, a: 299, b: 300 }, { id: 319, a: 299, b: 118 }, { id: 320, a: 82, b: 78 }, { id: 321, a: 214, b: 301 }, { id: 322, a: 301, b: 302 }, { id: 323, a: 104, b: 303 }, { id: 324, a: 104, b: 304 }, { id: 325, a: 304, b: 305 }, { id: 326, a: 305, b: 306 }, { id: 335, a: 310, b: 311 }, { id: 343, a: 11, b: 314 }, { id: 344, a: 314, b: 7 }, { id: 351, a: 319, b: 78 }, { id: 355, a: 3, b: 5 }, { id: 364, a: 17, b: 310 }, { id: 367, a: 331, b: 332 }, { id: 368, a: 332, b: 156 }, { id: 369, a: 322, b: 333 }, { id: 370, a: 333, b: 332 }, { id: 371, a: 331, b: 333 }, { id: 372, a: 141, b: 322 }, { id: 373, a: 322, b: 155 }, { id: 374, a: 186, b: 334 }, { id: 375, a: 334, b: 189 }, { id: 376, a: 157, b: 334 }, { id: 382, a: 123, b: 141 }, { id: 383, a: 123, b: 338 }, { id: 384, a: 338, b: 182 }, { id: 385, a: 338, b: 331 }, { id: 387, a: 75, b: 319 }, { id: 388, a: 311, b: 339 }, { id: 389, a: 339, b: 340 }, { id: 390, a: 340, b: 322 }, { id: 393, a: 344, b: 345 }, { id: 394, a: 345, b: 346 }, { id: 395, a: 346, b: 3 }, { id: 396, a: 344, b: 347 }, { id: 398, a: 348, b: 349 }, { id: 399, a: 349, b: 350 }, { id: 400, a: 350, b: 348 }, { id: 401, a: 12, b: 351 }, { id: 402, a: 351, b: 352 }, { id: 403, a: 352, b: 353 }, { id: 404, a: 353, b: 354 }, { id: 405, a: 354, b: 355 }, { id: 406, a: 355, b: 356 }, { id: 407, a: 356, b: 14 }, { id: 408, a: 347, b: 17 }, { id: 413, a: 14, b: 360 }, { id: 416, a: 361, b: 362 }, { id: 417, a: 362, b: 22 }, { id: 425, a: 362, b: 14 }, { id: 426, a: 360, b: 361 }, { id: 427, a: 134, b: 365 }, { id: 428, a: 365, b: 366 }, { id: 429, a: 366, b: 367 }, { id: 430, a: 367, b: 184 }, { id: 432, a: 360, b: 368 }, { id: 433, a: 368, b: 311 }, { id: 435, a: 361, b: 369 }, { id: 436, a: 369, b: 21 }, { id: 439, a: 248, b: 249 }, { id: 440, a: 339, b: 369 }, { id: 441, a: 156, b: 370 }, { id: 442, a: 370, b: 332 }, { id: 443, a: 331, b: 123 } ], disabledFaceKeys: [ "133,134,251,252,253:5", "274,275,295,297,298:5", "117,118,299:3", "80,81,82,83,88,89,90,97,98,117,118,230,231,232,233,299,300:19", "78,79,80,81,82,117:6", "155,156,157,158,159:5", "331,332,333:3", "155,156,322,332,333:5", "14,360,361,362:4", "134,184,185,186,189,190,191,192,193,194,195,196,197,198,251,252,253,286,287,290,334,365,366,367:25", "131,132,247,248,249:5", "98,99,105,106,112,113,114,115,116,118,119,120,121,122,123,128,129,130,131,132,133,182,224,225,226,227,228,229,230,231,232,233,237,238,239,240,241,242,243,247,248,249,250,253,267,268,269,270,271,276,277,278,279,282,283,284,286,288,289,290,338:76", "311,339,360,361,368,369:6", "156,332,370:3", "123,331,338:3", "123,141,322,331,333:5" ] })4c:Tc55f,globeNavMesh = { // ---- Optional saved nav mesh data ---- // Paste a saved state into a separate cell named `dataNavMesh` to load // points/links/disabled faces on startup. The "save nav mesh" button copies // a `dataNavMesh = (...)` assignment ready to paste into that cell. const initialNavMesh = (typeof dataNavMesh !== "undefined" && dataNavMesh) || null; // Holder lets measureContainerWidth read the wrapper without TDZ access. const wrapperRef = { el: null }; function measureContainerWidth() { if (wrapperRef.el && wrapperRef.el.isConnected) { const w = wrapperRef.el.parentElement && wrapperRef.el.parentElement.clientWidth; if (w && w > 0) return w; } const bodyW = document.body && document.body.clientWidth; if (bodyW && bodyW > 0) return bodyW; return 700; } const HEIGHT = 600; let width = measureContainerWidth(); let height = HEIGHT; // ---- Container + toolbar ---- const wrapper = htl.html`

`; wrapperRef.el = wrapper; const btnStyle = "padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;" + "border:1px solid #888;background:#fff;border-radius:4px;"; const labelStyle = "display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none;font-size:12px;color:#555;"; const toolbar = htl.html`

`; const leftGroup = htl.html`

`; const rightGroup = htl.html`

`; toolbar.appendChild(leftGroup); toolbar.appendChild(rightGroup); const saveBtn = htl.html``; const clearBtn = htl.html``; const toolbarStatus = htl.html``; leftGroup.appendChild(saveBtn); leftGroup.appendChild(clearBtn); leftGroup.appendChild(toolbarStatus); const modeName = "globe-navmesh-mode-" + Math.random().toString(36).slice(2); const navmeshRadio = htl.html``; const routesRadio = htl.html``; const navmeshLabel = htl.html`${navmeshRadio}Nav mesh`; const routesLabel = htl.html`${routesRadio}Routes`; rightGroup.appendChild(navmeshLabel); rightGroup.appendChild(routesLabel); wrapper.appendChild(toolbar); // ---- Map container (canvas + overlay SVG stacked) ---- const mapContainer = htl.html`

`; wrapper.appendChild(mapContainer); const dpr = window.devicePixelRatio || 1; const canvas = htl.html`