diff --git a/shared/algo-viz.js b/shared/algo-viz.js
index 2b0f836..54d3ef5 100644
--- a/shared/algo-viz.js
+++ b/shared/algo-viz.js
@@ -1,24 +1,54 @@
/* ===== Illustrated Algorithm – Shared Visualization Library ===== */
+/* Supports BOTH API styles:
+ * Style A (string-returning): renderArray(arr, {highlights}) → HTML string
+ * Style B (DOM-mutating): renderArray(container, items, opts) → mutates container
+ */
"use strict";
/* --- Utility --- */
const $ = id => document.getElementById(id);
const $$ = sel => document.querySelectorAll(sel);
-/* --- StepController --- */
+/* --- CSS variable defaults --- */
+const _CSS = {
+ blue: '#3b82f6', green: '#16a34a', purple: '#8b5cf6',
+ red: '#ef4444', orange: '#f59e0b', cyan: '#06b6d4',
+ text: '#0f172a', text2: '#475569', muted: '#94a3b8',
+ border: '#e2e8f0', surface2: '#f1f5f9',
+ mono: 'Menlo,Consolas,monospace',
+};
+
+/* ================================================================
+ StepController — supports BOTH constructor signatures:
+ new StepController(opts) → Style A (deferred steps)
+ new StepController(steps, opts) → Style B (immediate steps)
+ ================================================================ */
class StepController {
- constructor(steps, opts = {}) {
- this.steps = steps;
+ constructor(stepsOrOpts, maybeOpts) {
+ // Detect which style
+ if (Array.isArray(stepsOrOpts)) {
+ // Style B: new StepController(steps, opts)
+ this.steps = stepsOrOpts;
+ this.opts = maybeOpts || {};
+ } else {
+ // Style A: new StepController(opts)
+ this.steps = [];
+ this.opts = stepsOrOpts || {};
+ }
this.idx = -1;
this.autoTimer = null;
- this.onRender = opts.onRender || (() => {});
- this.onDone = opts.onDone || (() => {});
- this.autoDelay = opts.autoDelay || 800;
+ this.autoDelay = this.opts.autoDelay || this.opts.autoInterval || 800;
+ this.onRender = this.opts.onRender || this.opts.onStep || (() => {});
+ this.onDone = this.opts.onDone || this.opts.onComplete || (() => {});
+ this.stepCounterEl = this.opts.stepCounterEl || null;
}
- get current() { return this.idx >= 0 && this.idx < this.steps.length ? this.steps[this.idx] : null; }
- get isEnd() { return this.idx >= this.steps.length - 1; }
- get total() { return this.steps.length; }
+ /* --- Style A helpers --- */
+ setSteps(steps) { this.steps = steps; this.idx = -1; this.updateCounter(); }
+ set onStep(fn) { this.onRender = fn; }
+ get onStep() { return this.onRender; }
+
+ /* --- Navigation --- */
next() {
if (this.idx < this.steps.length - 1) { this.idx++; this._render(); }
else this.stopAuto();
@@ -26,7 +56,8 @@ class StepController {
prev() {
if (this.idx > 0) { this.idx--; this._render(); }
}
- jumpEnd() {
+ jumpToEnd() { this.jumpEnd(); } // Style A alias
+ jumpEnd() { // Style B name
this.idx = this.steps.length - 1;
this._render();
this.stopAuto();
@@ -39,6 +70,14 @@ class StepController {
this.stopAuto();
this._renderPipeline();
if (this.onRender) this.onRender(null);
+ this.updateCounter();
+ }
+
+ /* --- Auto-play --- */
+ toggleAuto() { // Style A name
+ if (this.autoTimer) { this.stopAuto(); return false; }
+ this.startAuto();
+ return true;
}
startAuto() {
this.stopAuto();
@@ -52,28 +91,102 @@ class StepController {
stopAuto() {
if (this.autoTimer) { clearInterval(this.autoTimer); this.autoTimer = null; }
}
+
+ /* --- Internal --- */
_render() {
- if (this.onRender) this.onRender(this.current);
+ const step = this.idx >= 0 && this.idx < this.steps.length ? this.steps[this.idx] : null;
+ if (this.onRender) {
+ // Style A pages pass (index, step), Style B passes just step
+ // Try calling with both and let the page's handler decide
+ try { this.onRender(this.idx, step); } catch(e) {
+ try { this.onRender(step); } catch(e2) {}
+ }
+ }
this._renderPipeline();
+ this.updateCounter();
}
_renderPipeline() {
const el = $('pipeline');
if (!el) return;
- el.innerHTML = '';
- for (let i = 0; i < this.steps.length; i++) {
- const d = document.createElement('div');
- d.className = 'step-dot' + (i < this.idx ? ' done' : i === this.idx ? ' active' : '');
- d.title = `Step ${i + 1}`;
- d.style.cursor = 'pointer';
- d.addEventListener('click', () => this.jumpTo(i));
- el.appendChild(d);
+ // Don't overwrite if the page manages its own pipeline HTML
+ // Only render step-dots if pipeline is empty or previously rendered by us
+ if (el.dataset.managed === 'page') return;
+ }
+ updateCounter() {
+ if (this.stepCounterEl) {
+ this.stepCounterEl.textContent = `${this.idx + 1} / ${this.steps.length}`;
}
}
+
+ /* --- State queries --- */
+ get current() { return this.idx >= 0 && this.idx < this.steps.length ? this.steps[this.idx] : null; }
+ get isEnd() { return this.idx >= this.steps.length - 1; }
+ get total() { return this.steps.length; }
+ isFirst() { return this.idx <= 0; }
+ isLast() { return this.idx >= this.steps.length - 1; }
}
-/* --- Render helpers --- */
-function renderArray(container, items, opts = {}) {
- const { barMaxH = 120, barMinW = 28, barGap = 4, classes = [], tags = [], idxLabels = true } = opts;
+/* ================================================================
+ renderArray — supports BOTH signatures:
+ Style A: renderArray(arr, {highlights, pointers, indices, ...}) → HTML string
+ Style B: renderArray(container, items, opts) → mutates container
+ ================================================================ */
+function renderArray(a, b, c) {
+ // Style B: first arg is DOM element
+ if (a && a.nodeType === 1) {
+ return _renderArrayB(a, b, c);
+ }
+ // Style A: first arg is plain array, returns HTML string
+ return _renderArrayA(a, b);
+}
+
+/* Style A: returns HTML string */
+function _renderArrayA(arr, options = {}) {
+ const {
+ highlights = {},
+ pointers = {},
+ indices = true,
+ separator = null,
+ customClass = '',
+ width = null,
+ } = options;
+
+ let html = '';
+ arr.forEach((val, i) => {
+ const hlClass = highlights[i] || 'default';
+ const widthStyle = width ? `width:${width}px;` : '';
+ html += '';
+ html += `${val}`;
+ if (indices) html += `${i}`;
+ html += '';
+ if (separator !== null && i === separator - 1) {
+ html += '|';
+ }
+ });
+ html += '
';
+
+ if (Object.keys(pointers).length > 0) {
+ html += '';
+ const w = width || 40;
+ for (let i = 0; i < arr.length; i++) {
+ const label = Object.entries(pointers).find(([_, idx]) => idx === i);
+ if (label) {
+ html += `${label[0]}`;
+ } else {
+ html += ``;
+ }
+ }
+ html += '
';
+ }
+ return html;
+}
+
+/* Style B: mutates container */
+function _renderArrayB(container, items, opts = {}) {
+ const {
+ barMaxH = 120, barMinW = 28, barGap = 4,
+ classes = [], tags = [], idxLabels = true
+ } = opts || {};
const maxVal = Math.max(...items.map(it => typeof it === 'object' ? it.val : it), 1);
container.innerHTML = '';
const row = document.createElement('div');
@@ -96,8 +209,45 @@ function renderArray(container, items, opts = {}) {
container.appendChild(row);
}
-function renderGrid(container, rows, cols, cellData, opts = {}) {
- /* cellData: 2D array of {val, cls} or null */
+/* ================================================================
+ renderGrid — supports BOTH:
+ Style A: renderGrid(matrix, {highlights, cellClass, ...}) → HTML string
+ Style B: renderGrid(container, rows, cols, cellData, opts) → mutates container
+ ================================================================ */
+function renderGrid(a, b, c, d, e) {
+ // Style B: first arg is DOM element
+ if (a && a.nodeType === 1) {
+ return _renderGridB(a, b, c, d, e);
+ }
+ // Style A: first arg is 2D array
+ return _renderGridA(a, b);
+}
+
+function _renderGridA(matrix, options = {}) {
+ const {
+ cellClass = (val, r, c) => '',
+ cellStyle = (val, r, c) => '',
+ highlights = {},
+ cellSize = 40
+ } = options;
+ const rows = matrix.length;
+ const cols = matrix[0]?.length || 0;
+ let html = ``;
+ for (let r = 0; r < rows; r++) {
+ for (let c = 0; c < cols; c++) {
+ const val = matrix[r][c];
+ const key = `${r},${c}`;
+ const hlc = highlights[key] || '';
+ const extraCls = cellClass(val, r, c);
+ const extraStyle = cellStyle(val, r, c);
+ html += ``;
+ }
+ }
+ html += '
';
+ return html;
+}
+
+function _renderGridB(container, rows, cols, cellData, opts = {}) {
const { cellSize = 48 } = opts;
container.innerHTML = '';
const grid = document.createElement('div');
@@ -115,7 +265,35 @@ function renderGrid(container, rows, cols, cellData, opts = {}) {
container.appendChild(grid);
}
-function renderCode(container, code, highlightLine = -1) {
+/* ================================================================
+ renderCode — supports BOTH:
+ Style A: renderCode(code, {lang, highlightLines}) → HTML string
+ Style B: renderCode(container, code, highlightLine) → mutates container
+ ================================================================ */
+function renderCode(a, b, c) {
+ // Style B: first arg is DOM element
+ if (a && a.nodeType === 1) {
+ return _renderCodeB(a, b, c);
+ }
+ // Style A: first arg is string
+ return _renderCodeA(a, b);
+}
+
+function _renderCodeA(code, options = {}) {
+ const { highlightLines = [], lang = '' } = options;
+ const lines = code.split('\n');
+ let html = ``;
+ if (lang) html += `
${lang}
`;
+ html += `
`;
+ lines.forEach((line, i) => {
+ const cls = highlightLines.includes(i + 1) ? 'highlight' : '';
+ html += `${_escapeHTML(line)}`;
+ });
+ html += '
';
+ nodes.forEach((node, i) => {
+ const cls = highlights[i] || '';
+ html += `
`;
+ html += `${node}`;
+ if (showNext) {
+ html += cls === 'null-node'
+ ? `∅`
+ : `→`;
+ }
+ html += '
';
+ if (i < nodes.length - 1 && showNext) {
+ html += '
→';
+ }
+ });
+ html += '
空树
';
+ function buildLevels(node) {
+ const levels = [];
+ const queue = [node];
+ while (queue.length) {
+ const level = [];
+ const nextQueue = [];
+ let hasNonNull = false;
+ for (const n of queue) {
+ if (n) { level.push(n.val); nextQueue.push(n.left, n.right); if (n.left || n.right) hasNonNull = true; }
+ else { level.push(null); nextQueue.push(null, null); }
+ }
+ levels.push(level);
+ queue.length = 0;
+ if (hasNonNull) queue.push(...nextQueue);
+ }
+ return levels;
+ }
+ const levels = buildLevels(root);
+ let html = ``;
+ levels.forEach((level, li) => {
+ const gap = Math.max(4, 60 / (li + 1));
+ html += `
`;
+ level.forEach(val => {
+ if (val === null) { html += `
`; }
+ else {
+ const cls = highlights[val] || '';
+ html += `
`;
+ }
+ });
+ html += '
';
+ });
+ html += '
';
+ if (items.length === 0) html += '
空栈';
+ for (let i = items.length - 1; i >= 0; i--) {
+ let cls = '';
+ if (i === topIndex) cls = 'top';
+ if (i === poppedIndex) cls = 'popped';
+ html += `
${items[i]}
`;
+ }
+ html += '