Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

add theme support

Browse Source
This commit is contained in:
sawka 2024-12-03 10:56:38 -08:00
parent d6bd277384
commit 90354cc3db
1 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/app/element/termelem/termelem.tsx
View File

@ -2,11 +2,13 @@
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
import { PLATFORM } from "@/store/global"; import { PLATFORM } from "@/store/global";
import { useAtomValueSafe } from "@/util/util";
import { SerializeAddon } from "@xterm/addon-serialize"; import { SerializeAddon } from "@xterm/addon-serialize";
import { WebLinksAddon } from "@xterm/addon-web-links"; import { WebLinksAddon } from "@xterm/addon-web-links";
import { WebglAddon } from "@xterm/addon-webgl"; import { WebglAddon } from "@xterm/addon-webgl";
import * as TermTypes from "@xterm/xterm"; import * as TermTypes from "@xterm/xterm";
import { Terminal } from "@xterm/xterm"; import { Terminal } from "@xterm/xterm";
import { Atom } from "jotai";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { debounce } from "throttle-debounce"; import { debounce } from "throttle-debounce";
import { FitAddon } from "./fitaddon"; import { FitAddon } from "./fitaddon";
@ -33,6 +35,7 @@ export type TermWrapOptions = {
useWebGl?: boolean; useWebGl?: boolean;
useWebLinksAddon?: boolean; useWebLinksAddon?: boolean;
useSerializeAddon?: boolean; useSerializeAddon?: boolean;
termTheme: Atom<TermTypes.ITheme>;
onOpenLink?: (uri: string) => void; onOpenLink?: (uri: string) => void;
onCwdChange?: (newCwd: string) => void; onCwdChange?: (newCwd: string) => void;
handleInputData?: (data: string) => void; handleInputData?: (data: string) => void;
@ -209,8 +212,18 @@ export class TermWrap {
export const TermElem = (props: { termOpts: TermWrapOptions }) => { export const TermElem = (props: { termOpts: TermWrapOptions }) => {
const connectElemRef = useRef<HTMLDivElement>(null); const connectElemRef = useRef<HTMLDivElement>(null);
const termWrapRef = useRef<TermWrap>(null); const termWrapRef = useRef<TermWrap>(null);
const termTheme = useAtomValueSafe(props.termOpts.termTheme);
useEffect(() => {
if (termWrapRef.current == null || termTheme == null) {
return;
}
termWrapRef.current.terminal.options.theme = termTheme;
}, [termTheme]);
useEffect(() => { useEffect(() => {
termWrapRef.current = new TermWrap(props.termOpts); termWrapRef.current = new TermWrap(props.termOpts);
if (termTheme != null) {
termWrapRef.current.terminal.options.theme = termTheme;
}
termWrapRef.current.initTerminal(connectElemRef.current); termWrapRef.current.initTerminal(connectElemRef.current);
return () => { return () => {
termWrapRef.current.dispose(); termWrapRef.current.dispose();