From f6108abd5fa03e7c95bb197aba44d34f3c66148c Mon Sep 17 00:00:00 2001 From: nuintun Date: Tue, 1 Dec 2015 16:02:24 +0800 Subject: [PATCH] update files --- canvas.html | 61 +++++++++++++++---------------- static/js/terminal/xterm.js | 72 +++++++++++++++++++++++++++++++++++-- 2 files changed, 101 insertions(+), 32 deletions(-) diff --git a/canvas.html b/canvas.html index cad6c87..d01295d 100644 --- a/canvas.html +++ b/canvas.html @@ -63,37 +63,38 @@ xterm.debug = false; - [ - '', - '\u001b[92m\'use strict\'\u001b[39m\u001b[90m;\u001b[39m', - '\u001b[90m/*jshint browser:true */\u001b[39m', - '', - '\u001b[32mvar\u001b[39m \u001b[37mTerminal\u001b[39m \u001b[93m=\u001b[39m \u001b[37mrequire\u001b[39m\u001b[90m(\u001b[39m\u001b[92m\'./term\'\u001b[39m\u001b[90m)\u001b[39m\u001b[32m,\u001b[39m', - ' \u001b[37mthrough\u001b[39m \u001b[93m=\u001b[39m \u001b[37mrequire\u001b[39m\u001b[90m(\u001b[39m\u001b[92m\'through\'\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', - '', - '\u001b[37mmodule\u001b[39m\u001b[32m.\u001b[39m\u001b[37mexports\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37mcols\u001b[39m\u001b[32m,\u001b[39m \u001b[37mrows\u001b[39m\u001b[32m,\u001b[39m \u001b[37mhandler\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m', - ' \u001b[32mvar\u001b[39m \u001b[37mterm\u001b[39m \u001b[93m=\u001b[39m \u001b[31mnew\u001b[39m \u001b[37mTerminal\u001b[39m\u001b[90m(\u001b[39m\u001b[37mcols\u001b[39m\u001b[32m,\u001b[39m \u001b[37mrows\u001b[39m\u001b[32m,\u001b[39m \u001b[37mhandler\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', - ' \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mopen\u001b[39m\u001b[90m(\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', - ' ', - ' \u001b[32mvar\u001b[39m \u001b[37mhypernal\u001b[39m \u001b[93m=\u001b[39m \u001b[37mthrough\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m\u001b[32m.\u001b[39m\u001b[37mbind\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[90m)\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', - ' \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mappendTo\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37melem\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m', - ' \u001b[94mif\u001b[39m \u001b[90m(\u001b[39m\u001b[94mtypeof\u001b[39m \u001b[37melem\u001b[39m \u001b[93m===\u001b[39m \u001b[92m\'string\'\u001b[39m\u001b[90m)\u001b[39m \u001b[37melem\u001b[39m \u001b[93m=\u001b[39m \u001b[37mdocument\u001b[39m\u001b[32m.\u001b[39m\u001b[37mquerySelector\u001b[39m\u001b[90m(\u001b[39m\u001b[37melem\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', - '', - ' \u001b[37melem\u001b[39m\u001b[32m.\u001b[39m\u001b[37mappendChild\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37melement\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', - ' \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37melement\u001b[39m\u001b[32m.\u001b[39m\u001b[37mstyle\u001b[39m\u001b[32m.\u001b[39m\u001b[37mposition\u001b[39m \u001b[93m=\u001b[39m \u001b[92m\'relative\'\u001b[39m\u001b[90m;\u001b[39m', - ' \u001b[33m}\u001b[39m\u001b[90m;\u001b[39m', - '', - ' \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwriteln\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37mline\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m', - ' \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwriteln\u001b[39m\u001b[90m(\u001b[39m\u001b[37mline\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', - ' \u001b[33m}\u001b[39m\u001b[90m;\u001b[39m', - '', - ' \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m \u001b[93m=\u001b[39m \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m\u001b[32m.\u001b[39m\u001b[37mbind\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', - '', - ' \u001b[31mreturn\u001b[39m \u001b[37mhypernal\u001b[39m\u001b[90m;\u001b[39m', - '\u001b[33m}\u001b[39m\u001b[90m;\u001b[39m', - '' - ].forEach(function (line){ xterm.write(line + '\r\n'); }); + // [ + // '', + // '\u001b[92m\'use strict\'\u001b[39m\u001b[90m;\u001b[39m', + // '\u001b[90m/*jshint browser:true */\u001b[39m', + // '', + // '\u001b[32mvar\u001b[39m \u001b[37mTerminal\u001b[39m \u001b[93m=\u001b[39m \u001b[37mrequire\u001b[39m\u001b[90m(\u001b[39m\u001b[92m\'./term\'\u001b[39m\u001b[90m)\u001b[39m\u001b[32m,\u001b[39m', + // ' \u001b[37mthrough\u001b[39m \u001b[93m=\u001b[39m \u001b[37mrequire\u001b[39m\u001b[90m(\u001b[39m\u001b[92m\'through\'\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', + // '', + // '\u001b[37mmodule\u001b[39m\u001b[32m.\u001b[39m\u001b[37mexports\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37mcols\u001b[39m\u001b[32m,\u001b[39m \u001b[37mrows\u001b[39m\u001b[32m,\u001b[39m \u001b[37mhandler\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m', + // ' \u001b[32mvar\u001b[39m \u001b[37mterm\u001b[39m \u001b[93m=\u001b[39m \u001b[31mnew\u001b[39m \u001b[37mTerminal\u001b[39m\u001b[90m(\u001b[39m\u001b[37mcols\u001b[39m\u001b[32m,\u001b[39m \u001b[37mrows\u001b[39m\u001b[32m,\u001b[39m \u001b[37mhandler\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', + // ' \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mopen\u001b[39m\u001b[90m(\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', + // ' ', + // ' \u001b[32mvar\u001b[39m \u001b[37mhypernal\u001b[39m \u001b[93m=\u001b[39m \u001b[37mthrough\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m\u001b[32m.\u001b[39m\u001b[37mbind\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[90m)\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', + // ' \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mappendTo\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37melem\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m', + // ' \u001b[94mif\u001b[39m \u001b[90m(\u001b[39m\u001b[94mtypeof\u001b[39m \u001b[37melem\u001b[39m \u001b[93m===\u001b[39m \u001b[92m\'string\'\u001b[39m\u001b[90m)\u001b[39m \u001b[37melem\u001b[39m \u001b[93m=\u001b[39m \u001b[37mdocument\u001b[39m\u001b[32m.\u001b[39m\u001b[37mquerySelector\u001b[39m\u001b[90m(\u001b[39m\u001b[37melem\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', + // '', + // ' \u001b[37melem\u001b[39m\u001b[32m.\u001b[39m\u001b[37mappendChild\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37melement\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', + // ' \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37melement\u001b[39m\u001b[32m.\u001b[39m\u001b[37mstyle\u001b[39m\u001b[32m.\u001b[39m\u001b[37mposition\u001b[39m \u001b[93m=\u001b[39m \u001b[92m\'relative\'\u001b[39m\u001b[90m;\u001b[39m', + // ' \u001b[33m}\u001b[39m\u001b[90m;\u001b[39m', + // '', + // ' \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwriteln\u001b[39m \u001b[93m=\u001b[39m \u001b[94mfunction\u001b[39m \u001b[90m(\u001b[39m\u001b[37mline\u001b[39m\u001b[90m)\u001b[39m \u001b[33m{\u001b[39m', + // ' \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwriteln\u001b[39m\u001b[90m(\u001b[39m\u001b[37mline\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', + // ' \u001b[33m}\u001b[39m\u001b[90m;\u001b[39m', + // '', + // ' \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m \u001b[93m=\u001b[39m \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m\u001b[32m.\u001b[39m\u001b[37mbind\u001b[39m\u001b[90m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[90m)\u001b[39m\u001b[90m;\u001b[39m', + // '', + // ' \u001b[31mreturn\u001b[39m \u001b[37mhypernal\u001b[39m\u001b[90m;\u001b[39m', + // '\u001b[33m}\u001b[39m\u001b[90m;\u001b[39m', + // '' + // ].forEach(function (line){ xterm.write(line + '\r\n'); }); + xterm.write('\033[1;4;7;41;36m红底绿字\033[0m'); console.log(xterm.toString('html')); diff --git a/static/js/terminal/xterm.js b/static/js/terminal/xterm.js index 6db2f4d..64d6a79 100644 --- a/static/js/terminal/xterm.js +++ b/static/js/terminal/xterm.js @@ -1042,6 +1042,7 @@ AnsiTerminal.prototype.toString = function (type){ cell = this.screen.buffer[i].cells[j]; if (cell.c) { + console.log(cell.c, ': ', cell.getAttributes()); console.log(cell.c, ': ', getStyles(cell.attr, cell.gb, cell.width === 2)); } } @@ -2608,17 +2609,84 @@ var MAP = (function (){ return m; }()); +TChar.prototype.getAttributes = function (){ + var gb = this.gb; + var attr = this.attr; + var colorbits = attr >>> 24; + var r = attr & 65535; + var g = gb >>> 16; + var b = gb & 65535; + var bits = attr >>> 16 & 255; + var styles = { + bold: !!(bits & 1), + italic: !!(bits & 2), + underline: !!(bits & 4), + blink: !!(bits & 8), + inverse: !!(bits & 16), + conceal: !!(bits & 32), + // TODO cursor + // cursor: !!(bits & 64), + foreground: { + set: !!(colorbits & 4), + RGB: !!(colorbits & 8) + }, + background: { + set: !!(colorbits & 1), + RGB: !!(colorbits & 2) + } + }; + var foreground = styles.foreground; + var background = styles.background; + + if (foreground.set && !foreground.RGB) { + if (styles.inverse) { + if (styles.bold) { + console.log('bg: ', (attr >>> 8 & 255) | 8); + } else { + console.log('fg: ', attr >>> 8 & 255); + } + } + } + + if (background.set && !background.RGB) { + if (styles.inverse) { + console.log('fg: ', this.attr & 255); + } + } + + return { + bold: !!(bits & 1), + italic: !!(bits & 2), + underline: !!(bits & 4), + blink: !!(bits & 8), + inverse: !!(bits & 16), + conceal: !!(bits & 32), + // TODO cursor + // cursor: !!(bits & 64), + foreground: { + set: !!(colorbits & 4), + RGB: !!(colorbits & 8), + color: [r >>> 8, g >>> 8, b >>> 8] + }, + background: { + set: !!(colorbits & 1), + RGB: !!(colorbits & 2), + color: [r & 255, g & 255, b & 255] + } + } +}; + // FIXME: cleanup this ugly mess function getStyles(num, gb, fullwidth){ var fg_rgb = num & 67108864 && num & 134217728; var bg_rgb = num & 16777216 && num & 33554432; // if (not RGB) and (fg set) and (bold set) and (fg < 8) var inverse = num & 1048576; - var intense_on_bold = (!fg_rgb && num & 67108864 && num & 65536 && (num >>> 8 & 255) < 8) ? 1 : 0; + var bold = (!fg_rgb && num & 67108864 && num & 65536 && (num >>> 8 & 255) < 8) ? 1 : 0; var styles = [ MAP[num >>> 16 & 127] + ((num & 67108864 && !fg_rgb) - ? ((inverse) ? ' bg' : ' fg') + ((intense_on_bold) ? (num >>> 8 & 255) | 8 : num >>> 8 & 255) + ? ((inverse) ? ' bg' : ' fg') + ((bold) ? (num >>> 8 & 255) | 8 : num >>> 8 & 255) : '') + ((num & 16777216 && !bg_rgb) ? ((inverse) ? ' fg' : ' bg') + (num & 255) : '') ];