HAXY

▄▀▀▀ ▄ ▄▀▀▀▀▀▀▄ ▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▀ ▄▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀ ▄▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▄▀▀▀ ▀▀▀▀▀▄▀▀▀▀ ▀ ▀▀▀▀▀▀▄▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▄ ▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀▀▀ ▀▀ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▄▄▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▄ ▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▄▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀▀ ▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀ ▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀ ▀▀▀▀ ▀▀▀▀▀▀▀▀▀ ▀▀▀▀▄▀▀▀▀▀▀ ▀ ▀▀ ▀▀▀▀▀▀▀▀▀ ▀▀▀▄▀▀▀▀▀▀▀ ▀ ▀▀ ▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀ ▀▄ ▀▀ ▀▀▀▀▀▀ ▀▀▀▀▀▀▀ ▀▀ ▀▀▀ ▀▀▀▀▀▀ ▀▀▀▀▀▀▄ ▀▀ ▀▀ ▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀ ▀ ▀▀▀ ▀▀▀▀▀▀▄▀ ▀▀▀▀▀▀▀ ▀ ▀▀▀ ▄▀▀▀▀▀▄▄ ▀▀▀▀▄▄▀▀ ▀ ▀▀▀ ▀▀▀▀▀▀▀▀▄ ▀▀▀▄▀▀▀ ▀▀ ▀▀▀ ▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▄▀ ▀▀▀▀▀▀▀▀▄ ▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀ ▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▄▀▀▀▀▀ ▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀ ▀▄ ▄▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▄▀▀▀▄▀▀▀▀ ▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀ ▀▀▀

╭─────────────╮ │scroll to top│ ╰─────────────╯ ╭ script.js ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯

╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯

.. ansi/ index.html ╭─────────────────────────────────╮ │script.js │ ╰─────────────────────────────────╯ term.ttf

279 } else if (bottom > container.scrollTop + container.clientHeight) { 280 container.scrollTop = bottom - container.clientHeight; 281 } 282 // horizontal-only scrolls are rows of controls, so reveal either 283 // edge. other scrolls reveal only the row's start; chasing varying 284 // right edges while moving vertically would yank their view sideways. 285 if (left < container.scrollLeft) { 286 container.scrollLeft = left; 287 } else if (container.dataset.scrollDirection === "horiz" && right > container.scrollLeft + container.clientWidth) { 288 container.scrollLeft = right - container.clientWidth; 289 } 290 }, 291 }, 292 }; 293 294 function sendTextInputValue(focusId, value) { 295 const bytes = encoder.encode(value); 296 const ptr = wasmInstance.exports._alloc(bytes.length); 297 // an empty allocation's pointer lies outside the buffer, so a view onto it 298 // would throw and leave the wasm holding the old value 299 if (bytes.length > 0) { 300 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, bytes.length).set(bytes); 301 } 302 wasmInstance.exports._setTextInputValue(focusId, ptr, bytes.length); 303 wasmInstance.exports._tick(minRows(), maxCols()); 304 } 305 306 // upload as soon as the file dialog returns, so attaching is one click. the 307 // file is the whole request body, so its name travels in a header. 308 document.addEventListener("change", (event) => { 309 const t = event.target; 310 if (!t || t.tagName !== "INPUT" || t.type !== "file" || !t.dataset.action) return; 311 const file = t.files[0]; 312 if (!file) return; 313 fetch(t.dataset.action, { 314 method: "POST", 315 headers: { "x-attachment-name": encodeURIComponent(file.name) }, 316 body: file, 317 }).then((res) => { 318 if (res.ok) window.location.reload(); 319 else res.text().then((message) => console.error("upload failed:", message)); 320 }); 321 }); 322 323 WebAssembly.instantiateStreaming(fetch("/haxy.wasm"), importObject).then(async (result) => { 324 wasmInstance = result.instance; 325 326 // wait for the @font-face to load before measuring cell width, otherwise 327 // we get the fallback font's metrics. 328 if (document.fonts && document.fonts.ready) { 329 await document.fonts.ready; 330 } 331 332 // the page is embedded as raw json in a script tag. 333 // encode to utf-8 bytes and hand it to the wasm. 334 const jsonBytes = encoder.encode(pageJson); 335 const ptr = wasmInstance.exports._alloc(jsonBytes.length); 336 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, jsonBytes.length).set(jsonBytes); 337 wasmInstance.exports._init(ptr, jsonBytes.length, minRows(), maxCols()); 338 339 document.addEventListener("keydown", (event) => { 340 // let the browser handle modifier combos. the TUI only uses unmodified keys, 341 // so intercepting these would just break normal browser navigation. 342 if (event.altKey || event.ctrlKey || event.metaKey) return; 343 // when a form element (text input or submit button) owns focus, the 344 // browser handles typing and Tab natively (and Enter on the button 345 // submits). we only forward keys into the TUI when focus is elsewhere. 346 // exception: arrow up/down on an input unfocuses it and forwards 347 // the event so the TUI can move focus between widgets. 348 if (document.activeElement) { 349 const tag = document.activeElement.tagName; 350 const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown" || 351 event.key === "ArrowLeft" || event.key === "ArrowRight"; 352 // a file picker is an input but behaves like a button: every key 353 // but an arrow is native (enter opens its dialog), and an arrow 354 // navigates away from it 355 if (tag === "INPUT" && document.activeElement.type === "file") { 356 if (!isArrow) return; 357 document.activeElement.blur(); 358 } else if (tag === "INPUT" && document.activeElement.readOnly && 359 ["Enter", "ArrowLeft", "ArrowRight"].includes(event.key)) { 360 event.preventDefault(); 361 if (event.key === "Enter") { 362 document.activeElement.select(); 363 return; 364 } 365 wasmInstance.exports._onKeyDown(event.keyCode); 366 wasmInstance.exports._tick(minRows(), maxCols()); 367 return; 368 } else if (tag === "INPUT" && event.key === "Enter") { 369 // enter in a form's text input never submits it; only the 370 // submit button does. an input outside a form has no submit 371 // button, so the TUI handles its enter instead. 372 event.preventDefault(); 373 if (!document.activeElement.form) { 374 wasmInstance.exports._onKeyDown(event.keyCode); 375 wasmInstance.exports._tick(minRows(), maxCols()); 376 } 377 return; 378 } else if (tag === "INPUT" && (event.key === "ArrowUp" || event.key === "ArrowDown")) { 379 // up/down moves between widgets; left/right stay in the input 380 document.activeElement.blur(); 381 } else if (tag === "BUTTON" && isArrow) { 382 // arrows navigate away from a focused submit button 383 document.activeElement.blur(); 384 } else if (tag === "INPUT" || tag === "BUTTON" || tag === "TEXTAREA") { 385 // Enter (submit / newline), typing, Tab, and a textarea's 386 // arrows — handled natively by the browser 387 return; 388 } 389 } 390 if ((event.key === "ArrowUp" || event.key === "ArrowDown") && scrollFocusedWidget(event.key === "ArrowDown")) { 391 event.preventDefault(); 392 return; 393 } 394 if ((event.key === "PageUp" || event.key === "PageDown") && pageFocusedScroll(event.key === "PageDown")) { 395 event.preventDefault(); 396 return; 397 } 398 if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) { 399 event.preventDefault(); 400 } 401 wasmInstance.exports._onKeyDown(event.keyCode); 402 wasmInstance.exports._tick(minRows(), maxCols()); 403 }); 404 405 // delegated listeners survive cell-layer replacement. the controls 406 // themselves are retained inside #grid. 407 document.addEventListener("input", (event) => { 408 const t = event.target; 409 if (!t || (t.tagName !== "INPUT" && t.tagName !== "TEXTAREA") || !t.dataset.focusId) return; 410 sendTextInputValue(Number(t.dataset.focusId), t.value); 411 }); 412 413 document.addEventListener("focusin", (event) => { 414 const t = event.target; 415 if (!t || !t.dataset || !t.dataset.focusId) return; 416 // sync the wasm focus to wherever the browser moved focus 417 wasmInstance.exports._setFocus(Number(t.dataset.focusId)); 418 // keyed controls survive a redraw before click. cell links live in the 419 // replaceable backdrop, so their click handler redraws after activation. 420 if (nodeKey(t)?.startsWith("control:")) wasmInstance.exports._tick(minRows(), maxCols()); 421 }); 422 423 grid.addEventListener("click", (event) => { 424 if (event.target.matches("input[readonly]")) { 425 wasmInstance.exports._tick(minRows(), maxCols()); 426 return; 427 } 428 const span = event.target.closest(".clickable"); 429 if (!span) return; 430 // leave modified / non-left clicks (open-in-new-tab, etc.) to the browser 431 if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; 432 // wasm routes the click: an in-page link updates focus and re-renders, 433 // a cross-page one calls _navigate. suppress the <a>'s own navigation so 434 // an in-page link doesn't also trigger a redundant full page load. 435 event.preventDefault(); 436 const focusId = Number(span.dataset.focusId); 437 wasmInstance.exports._onMouseClick(focusId); 438 wasmInstance.exports._tick(minRows(), maxCols()); 439 }); 440 441 let resizeTimer = null; 442 window.addEventListener("resize", () => { 443 clearTimeout(resizeTimer); 444 resizeTimer = setTimeout(() => { 445 wasmInstance.exports._tick(minRows(), maxCols()); 446 }, 100); 447 }); 448 }); 449