Diffusion Ant (master) Code

ant/examples/tui/button.js
8755416ca476master

button.js
View Options

			const ESC = '\x1b';
			const CSI = `${ESC}[`;

			const codes = {
			altScreenOn: `${CSI}?1049h`,
			altScreenOff: `${CSI}?1049l`,
			hideCursor: `${CSI}?25l`,
			showCursor: `${CSI}?25h`,
			clear: `${CSI}2J`,
			home: `${CSI}H`,
			reset: `${CSI}0m`,
			mouseOn: `${CSI}?1000h${CSI}?1003h${CSI}?1006h`,
			mouseOff: `${CSI}?1000l${CSI}?1003l${CSI}?1006l`,
			invert: `${CSI}7m`,
			fg: n => `${CSI}38;5;${n}m`,
			bg: n => `${CSI}48;5;${n}m`
			};

			const state = {
			hover: false,
			pressed: false,
			message: 'Hover or click the button'
			};

			const button = {
			label: 'Click Me',
			x: 0,
			y: 0,
			width: 0,
			height: 1
			};

			const styles = {
			normal: '',
			hover: `${codes.bg(46)}${codes.fg(16)}`,
			active: `${codes.bg(196)}${codes.fg(15)}`
			};

			function write(text) {
			process.stdout.write(text);
			}

			function centerButton(width, height) {
			button.width = button.label.length + 4;
			button.x = Math.max(0, Math.floor((width - button.width) / 2));
			button.y = Math.max(0, Math.floor((height - button.height) / 2));
			}

			function createGrid(width, height) {
			const chars = Array(height).fill(null).map(() => Array(width).fill(' '));
			const stylesGrid = Array(height).fill(null).map(() => Array(width).fill(''));
			return { chars, styles: stylesGrid };
			}

			function setCell(grid, x, y, ch, style) {
			if (y < 0 \|\| y >= grid.chars.length) return;
			if (x < 0 \|\| x >= grid.chars[y].length) return;
			grid.chars[y][x] = ch;
			grid.styles[y][x] = style;
			}

			function setText(grid, x, y, text, style) {
			for (let i = 0; i < text.length; i++) {
			setCell(grid, x + i, y, text[i], style);
			}
			}

			function drawButton(grid) {
			const fillStyle = state.pressed
			? styles.active
			: state.hover
			? styles.hover
			: styles.normal;
			for (let row = 0; row < button.height; row++) {
			for (let col = 0; col < button.width; col++) {
			setCell(grid, button.x + col, button.y + row, ' ', fillStyle);
			}
			}

			const padTotal = Math.max(0, button.width - button.label.length);
			const padLeft = Math.floor(padTotal / 2);
			const labelX = button.x + padLeft;
			const labelY = button.y + Math.floor(button.height / 2);
			setText(grid, labelX, labelY, button.label, fillStyle);
			}

			function render() {
			const width = process.stdout.columns \|\| 80;
			const height = process.stdout.rows \|\| 24;
			centerButton(width, height);

			const grid = createGrid(width, height);
			const header = ' Simple Button TUI (q to quit)';
			setText(grid, 0, 0, header.slice(0, width), '');

			const message = state.message;
			const messageLine = Math.min(height - 2, button.y + button.height + 1);
			if (messageLine >= 0 && messageLine < height) {
			setText(grid, 1, messageLine, message.slice(0, width - 2), '');
			}

			drawButton(grid);
			const rows = grid.chars.map((row, y) => {
			let line = '';
			let currentStyle = '';
			for (let x = 0; x < row.length; x++) {
			const nextStyle = grid.styles[y][x];
			if (nextStyle !== currentStyle) {
			line += nextStyle \|\| codes.reset;
			currentStyle = nextStyle;
			}
			line += row[x];
			}
			return line + codes.reset;
			});
			write(codes.home + codes.clear + rows.join('\n') + codes.reset);
			}

			function isInsideButton(x, y) {
			return (
			x >= button.x &&
			x < button.x + button.width &&
			y >= button.y &&
			y < button.y + button.height
			);
			}

			function parseMouseEvent(seq) {
			const match = seq.match(/^\x1b\[<([0-9]+);([0-9]+);([0-9]+)([mM])$/);
			if (!match) return false;

			const [, codeStr, xStr, yStr, action] = match;
			const code = Number(codeStr);
			const x = Number(xStr) - 1;
			const y = Number(yStr) - 1;
			const buttonCode = code & 3;

			const inside = isInsideButton(x, y);
			const prevHover = state.hover;
			state.hover = inside;

			if (action === 'M' && buttonCode === 0 && inside) {
			state.pressed = true;
			state.message = 'Button pressed! Release to click.';
			} else if (action === 'm') {
			if (state.pressed && inside) {
			state.message = 'Button clicked!';
			}
			state.pressed = false;
			}

			if (inside && !prevHover && action === 'M' && (code & 32)) {
			state.message = 'Hovering on the button.';
			}

			if (!inside && prevHover && action === 'M' && (code & 32)) {
			state.message = 'Hover or click the button';
			}

			return true;
			}

			function handleInput(chunk) {
			const str = chunk.toString();
			if (str === 'q' \|\| str === '\x03') {
			cleanup();
			return;
			}

			if (str.startsWith('\x1b[<')) {
			if (parseMouseEvent(str)) {
			render();
			}
			}
			}

			function cleanup() {
			if (process.stdin.isTTY) {
			process.stdin.setRawMode(false);
			}
			process.stdin.pause();
			process.stdin.removeListener('data', handleInput);
			process.stdout.removeListener('resize', render);
			write(codes.mouseOff + codes.showCursor + codes.altScreenOff);
			process.exit(0);
			}

			function start() {
			if (process.stdin.isTTY) {
			process.stdin.setRawMode(true);
			}
			process.stdin.resume();
			process.stdin.on('data', handleInput);
			process.stdout.on('resize', render);

			write(codes.altScreenOn + codes.hideCursor + codes.mouseOn);
			render();
			}

			process.on('SIGINT', cleanup);
			process.on('SIGTERM', cleanup);

			start();

Owner Packages

No Owners