Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-29 19:13:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4027 from Snarling/ANSIFix

Browse Source 
TERMINAL: Fix ansi display bugs
This commit is contained in:
hydroflame 2022-08-25 16:35:44 -03:00 committed by GitHub
commit e554a6ac13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/ui/React/ANSIITypography.tsx
View File

@ -3,7 +3,6 @@ import React from "react";
import makeStyles from "@mui/styles/makeStyles"; import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles"; import createStyles from "@mui/styles/createStyles";
import { Theme } from "@mui/material/styles"; import { Theme } from "@mui/material/styles";
import _ from "lodash";
// This particular eslint-disable is correct. // This particular eslint-disable is correct.
// In this super specific weird case we in fact do want a regex on an ANSII character. // In this super specific weird case we in fact do want a regex on an ANSII character.
@ -93,20 +92,9 @@ export const ANSIITypography = React.memo((props: IProps): React.ReactElement =>
} }
return ( return (
<Typography classes={{ root: lineClass(classes, props.color) }} paragraph={false}> <Typography classes={{ root: lineClass(classes, props.color) }} paragraph={false}>
{parts.map((part, index) => { {parts.map((part) => (
const spanStyle = ansiCodeStyle(part.code); <span style={ansiCodeStyle(part.code)}>{part.text}</span>
if (!_.isEmpty(spanStyle)) { ))}
// Only wrap parts with spans if the calculated spanStyle is non-empty...
return (
<Typography key={index} paragraph={false} component="span" sx={spanStyle}>
{part.text}
</Typography>
);
} else {
// ... otherwise yield the unmodified, unwrapped part.
return part.text;
}
})}
</Typography> </Typography>
); );
}); });
@ -129,14 +117,14 @@ function ansiCodeStyle(code: string | null): Record<string, any> {
7: "#ffffff", 7: "#ffffff",
}; };
const COLOR_MAP_DARK: Record<number, string> = { const COLOR_MAP_DARK: Record<number, string> = {
0: "#000000", 8: "#000000",
1: "#800000", 9: "#800000",
2: "#008000", 10: "#008000",
3: "#808000", 11: "#808000",
4: "#000080", 12: "#000080",
5: "#800080", 13: "#800080",
6: "#008080", 14: "#008080",
7: "#c0c0c0", 15: "#c0c0c0",
}; };
const ansi2rgb = (code: number): string => { const ansi2rgb = (code: number): string => {
@ -170,13 +158,13 @@ function ansiCodeStyle(code: string | null): Record<string, any> {
return "initial"; return "initial";
}; };
type styleKey = "fontWeight" | "textDecoration" | "color" | "backgroundColor" | "display"; type styleKey = "fontWeight" | "textDecoration" | "color" | "backgroundColor" | "padding";
const style: { const style: {
fontWeight?: string; fontWeight?: string;
textDecoration?: string; textDecoration?: string;
color?: string; color?: string;
backgroundColor?: string; backgroundColor?: string;
display?: string; padding?: string;
} = {}; } = {};
if (code === null || code === "0") { if (code === null || code === "0") {
@ -227,10 +215,10 @@ function ansiCodeStyle(code: string | null): Record<string, any> {
nextStyleKey = "backgroundColor"; nextStyleKey = "backgroundColor";
} }
}); });
// If a background color is set, render this as an inline block element (instead of inline) // If a background color is set, add slight padding to increase the background fill area.
// so that the background between lines (at least those that don't wrap) is uninterrupted. // This was previously display:inline-block, but that has display errors when line breaks are used.
if (style.backgroundColor !== undefined) { if (style.backgroundColor) {
style.display = "inline-block"; style.padding = "0px 1px";
} }
return style; return style;
} }