Files
90-RED-ComfyUI-LinkRouter/web/state.js
T
90-RED 8246479bee v1.2.0 — Adaptive drag modes, Heavy Deferred, large-workflow performance
Major features:
- Adaptive drag mode with 5 fixed modes (Normal, Freeze+Check, Freeze, Hide, Heavy Deferred)
- Heavy Deferred for lag-free dragging in large workflows (250+ nodes)
- Three drag phases: moving → held → released, with priority-based re-routing during pause
- Node hard-obstacle avoidance — links can never pass through nodes

Performance:
- Progressive routing with frame-budgeted progressive batches
- Fast graph signature for geometry-change detection
- OVG rebuild deferred during large drags
- Collision re-check limited to affected links only

Fixes:
- Hover no longer triggers full-workflow redraw
- Krea2 / Ultimate SD Upscale link disappearance during drag
- Stale sticky paths now validated before reuse
- Drag-endpoint dogleg for straight-line links

New modules: adaptive-policy, drag-policy, draw-policy, profiler, progressive, ui-policy
Tests: 39 automated tests covering routing, adaptive, drag, profiler
Floating bar: Adaptive 🧠 toggle, 5 fixed-mode buttons, debug row, Nodes 2.0 switch
2026-07-13 03:34:42 +08:00

160 lines
4.3 KiB
JavaScript

// state.js — shared mutable state for LinkRouter.
//
// All cross-module variables live in `M`. Other modules import `M` and
// read/write via `M.xxx` — no ES live-binding reassignment issues.
// state.js depends only on router.js and app.js (no other local deps).
import { OrthoRouter } from "./router.js";
import { app } from "../../scripts/app.js";
export const M = {
// --- localStorage key ---
LS_KEY: "linkrouter.state",
// --- floating-bar persisted state ---
barState: (() => {
try {
return Object.assign(
{
debug: false,
debugPanel: false,
lastFlowMode: "animated",
lastCornerMode: "per-line",
lastManualDragMode: "freeze-others",
btnX: null,
btnY: null,
},
JSON.parse(localStorage.getItem("linkrouter.state") || "{}"),
);
} catch {
return {
debug: false,
debugPanel: false,
lastFlowMode: "animated",
lastCornerMode: "per-line",
lastManualDragMode: "freeze-others",
btnX: null,
btnY: null,
};
}
})(),
saveBarState() {
localStorage.setItem("linkrouter.state", JSON.stringify(this.barState));
},
// --- settings cache (filled initially by settings.js) ---
S: {},
ROUTER_KEYS: new Set([
"margin", "marginL", "marginR", "marginT", "marginB",
"marginMode", "bendPenalty",
]),
// --- execution state ---
running: false,
// --- routing state ---
router: null,
graphSig: "",
routeFastSig: "",
routeGraph: null,
routeResults: null,
routeBatch: null,
routeBatchRaf: 0,
_deferredGraphBuild: false,
routeCostByLink: new Map(),
routeCostAverage: NaN,
prevRects: new Map(),
pathCache: new Map(), // linkId -> {ends, pts, sticky, segs, total}
bounding: new Float32Array(4),
settleTimer: null,
_dragMovedIds: null,
_dragAdaptiveMode: null,
_dragHeavyActive: null,
_dragLastFastSig: "",
_dragHiddenLinkIds: new Set(),
_dragAffectedLinkIds: new Set(),
_dragPauseActive: false,
_dragPausePending: false,
_dragPauseQueue: null,
_dragPauseCleanupLinkIds: new Set(),
_dragPauseAttemptedLinkIds: new Set(),
_dragPauseCompletedLinkIds: new Set(),
_dragInterruptedBatch: false,
_lastDragSettle: null,
_lastDragMode: "none",
_pointerDown: false,
_nodeDragActive: false,
// --- animation state ---
animActive: false,
rafId: 0,
lastFrame: 0,
// --- hover tracking ---
mouseClient: null, // {x, y} in client space
// --- floating bar DOM refs ---
uiBox: null, // DOM element
barRefs: null, // floating-bar controls used by refreshBar()
// --- pure helpers (depend only on M.S) ---
currentMargin() {
if (this.S.marginMode === "uniform") return +this.S.margin || 16;
return {
l: +this.S.marginL || 16,
r: +this.S.marginR || 16,
t: +this.S.marginT || 16,
b: +this.S.marginB || 16,
};
},
resetRouter() {
if (this.routeBatchRaf) {
const cancel = globalThis.cancelAnimationFrame || globalThis.clearTimeout;
cancel?.(this.routeBatchRaf);
}
this.router = new OrthoRouter({
margin: this.currentMargin(),
bendPenalty: +this.S.bendPenalty || 40,
});
this.graphSig = "";
this.routeFastSig = "";
this.routeGraph = null;
this.routeResults = null;
this.routeBatch = null;
this.routeBatchRaf = 0;
this._deferredGraphBuild = false;
this.routeCostByLink.clear();
this.routeCostAverage = NaN;
this.prevRects = new Map();
this.pathCache.clear();
this._dragAdaptiveMode = null;
this._dragHeavyActive = null;
this._dragLastFastSig = "";
this._dragHiddenLinkIds.clear();
this._dragAffectedLinkIds.clear();
this._dragPauseActive = false;
this._dragPausePending = false;
this._dragPauseQueue = null;
this._dragPauseCleanupLinkIds.clear();
this._dragPauseAttemptedLinkIds.clear();
this._dragPauseCompletedLinkIds.clear();
this._dragInterruptedBatch = false;
this._lastDragSettle = null;
this._nodeDragActive = false;
app.canvas?.setDirty(true, true);
},
animEnabledNow() {
if (this.running && this.S.animDuringRun === "off") return false;
return true;
},
currentFPS() {
if (this.running && this.S.animDuringRun === "low") return 10;
return +this.S.animFPS || 30;
},
};