Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f4d7fbd

Browse files
bug fixed
1 parent d508645 commit f4d7fbd

File tree

4 files changed

+22
-59
lines changed

4 files changed

+22
-59
lines changed

‎public/favicon.ico‎

416 Bytes
Binary file not shown.

‎src/components/editorBar/EditorBar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import styles from "./EditorBar.module.css";
55

66
const EditorBar = () => {
77
const { editorState, setEditorState } = useContext(AppContext);
8-
const handleCloseTab = ()=>(e: React.MouseEvent<HTMLDivElement>) => {
8+
const handleCloseTab = (e: React.MouseEvent<HTMLDivElement>) => {
99
e.stopPropagation();
1010
const filename = (e.target as HTMLDivElement).parentElement!.innerText;
1111
if (e.isTrusted) {
@@ -18,7 +18,7 @@ const EditorBar = () => {
1818
}
1919
};
2020

21-
const handleTabClick = ()=>(e: React.MouseEvent<HTMLDivElement>) => {
21+
const handleTabClick = (e: React.MouseEvent<HTMLDivElement>) => {
2222
const filename = (e.target as HTMLDivElement).innerText;
2323
if (e.isTrusted) {
2424
setEditorState((prev) => ({ ...prev, activeTab: filename }));

‎src/components/xTerminal/XTerminal.module.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
display: flex;
33
flex-direction: column;
44
height: 100%;
5-
/* background: #0cceff; */
65
padding-bottom: 30px;
76
background: #002b36;
87
overflow: hidden;
@@ -24,11 +23,6 @@
2423
.terminal {
2524
width: 100%;
2625
height: 100%;
27-
28-
/* background: #00a5ce; */
29-
/* background: #002b36; */
30-
/* border: solid 50px red; */
31-
/* border: solid 10px #002b36; */
3226
}
3327

3428
.terminal__wrapper {

‎src/components/xTerminal/XTerminal.tsx‎

Lines changed: 20 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,20 @@ import React, { useEffect, useRef, useContext } from "react";
22
import { Terminal, ITerminalOptions } from "xterm";
33
import { FitAddon } from "xterm-addon-fit";
44
import { ITerminalColor } from "../../utils/types";
5-
import styles from "./XTerminal.module.css";
6-
import "xterm/css/xterm.css";
75
import { AppContext } from "../context";
86
import debounce from "../../utils/debounce";
9-
10-
let term: Terminal;
11-
let fitAddon: FitAddon;
7+
import styles from "./XTerminal.module.css";
8+
import "xterm/css/xterm.css";
129

1310
const XTerminal: React.FC = () => {
1411
const { username, io } = useContext(AppContext);
1512
const validCommmands = ["ls", "cat", "whoami"];
13+
const command = useRef<string>("");
14+
const terminalEl = useRef() as React.MutableRefObject<HTMLInputElement>;
15+
const terminalRef = useRef() as React.MutableRefObject<HTMLDivElement>;
1616

17-
const promptValue = `${
18-
ITerminalColor.Cyan + username + ITerminalColor.Purple
19-
}@ProdexOne${ITerminalColor.Reset} $ `;
17+
let term: Terminal;
18+
let fitAddon: FitAddon;
2019

2120
const TerminalOptions: ITerminalOptions = {
2221
fontFamily: "Consolas",
@@ -26,24 +25,20 @@ const XTerminal: React.FC = () => {
2625
cursorStyle: "bar",
2726
theme: { background: "#002B36" },
2827
};
29-
const command = useRef<string>("");
30-
// const Size = useRef<number>();
31-
let terminalEl = useRef() as React.MutableRefObject<HTMLInputElement>; // as React.MutableRefObject<HTMLInputElement>
28+
29+
const promptValue = `${
30+
ITerminalColor.Cyan + username + ITerminalColor.Purple
31+
}@ProdexOne${ITerminalColor.Reset} $ `;
32+
3233
function prompt() {
3334
term.write(promptValue);
3435
}
35-
// init func
3636

3737
const initTerminal = () => {
3838
term = new Terminal(TerminalOptions);
3939
fitAddon = new FitAddon();
4040
term.loadAddon(fitAddon);
41-
4241
term.open(terminalEl.current);
43-
// setInterval(() => {
44-
// console.log("DS");
45-
// fitAddon.fit();
46-
// }, 3000);
4742
fitAddon.fit();
4843
term.writeln(
4944
"Welcome to " +
@@ -59,31 +54,24 @@ const XTerminal: React.FC = () => {
5954
term.writeln("Type some keys and commands to play around.\n");
6055
prompt();
6156

62-
// term.write("Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ");
63-
// term.onResize((e) => console.log("Resize : ", e));
6457
term.onKey((e) => {
65-
// console.log(e);
66-
6758
switch (e.domEvent.key) {
6859
case "Enter":
6960
term.writeln("");
7061
if (!command.current) return prompt();
71-
//send data
7262
io.current?.emit("command", command.current);
73-
7463
command.current = "";
75-
7664
break;
65+
7766
case "Backspace":
7867
if (command.current) {
7968
term.write("\b \b");
8069
command.current = command.current.slice(0, -1);
8170
}
8271
break;
72+
8373
default:
8474
command.current += e.key;
85-
// console.log(command);
86-
// term.write(e.key);
8775
if (validCommmands.includes(command.current)) {
8876
term.write(
8977
"\b \b".repeat(command.current.length - 1) +
@@ -96,63 +84,44 @@ const XTerminal: React.FC = () => {
9684
}
9785
}
9886
});
99-
100-
// var printable = !ev!!.altKey && !ev!!.ctrlKey && !ev!!.metaKey;
10187
};
10288

103-
// const [height, setHeight] = useState();
104-
const tref = useRef() as React.MutableRefObject<HTMLDivElement>;
105-
// const fnd = (fn, time) => {
106-
// let tm;
107-
// clearTimeout(tm);
108-
// tm = setTimeout(() => {
109-
// fn();
110-
// }, time);
111-
// };
11289
useEffect(() => {
11390
initTerminal();
114-
// @ts-ignore
115-
io?.current.on("command_response", (res) => {
91+
io?.current!.on("command_response", (res) => {
11692
term.writeln(res);
11793
prompt();
11894
});
11995
// eslint-disable-next-line react-hooks/exhaustive-deps
12096
}, []);
121-
useEffect(() => {
122-
const observeEl = tref.current;
12397

98+
useEffect(() => {
99+
const observeEl = terminalRef.current;
124100
const resizeObserver = new ResizeObserver(
125101
debounce(
126102
() => {
127-
if (tref.current) fitAddon.fit();
128-
// console.log("el", observeEl, "----", tref.current);
103+
if (terminalRef.current) fitAddon.fit();
129104
},
130105
500,
131106
null
132107
)
133108
);
109+
134110
resizeObserver.observe(observeEl);
135111

136112
return () => {
137113
resizeObserver.unobserve(observeEl);
138-
console.log("unobs");
139114
};
140115
// eslint-disable-next-line react-hooks/exhaustive-deps
141116
}, []);
142-
// useEffect(() => {
143-
// console.log(fitAddon);
144-
// fitAddon?.fit();
145-
// eslint-disable-next-line react-hooks/exhaustive-deps
146-
// }, [dimensions]);
147117

148118
return (
149119
<div className={styles.terminal__container}>
150120
<div className={styles.terminal__bar}>
151121
<div className="t-left">Terminal Session of {username}</div>
152-
153122
<div className="t-right">🚀</div>
154123
</div>
155-
<div className={styles.terminal__wrapper} ref={tref}>
124+
<div className={styles.terminal__wrapper} ref={terminalRef}>
156125
<div className={styles.terminal} ref={terminalEl}></div>
157126
</div>
158127
</div>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /