Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-03-10 13:09:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

save work

Browse Source
This commit is contained in:
Red Adaya 2024-04-11 14:31:34 +08:00
parent 65cab8a59a
commit c24e99e9ff
6 changed files with 73 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/app.tsx
View File

@ -153,12 +153,7 @@ class App extends React.Component<{}, {}> {
</div>
</If>
<div ref={this.mainContentRef} className="main-content">
<TermStyleBlock
scope="main"
termTheme={termTheme}
themeSrcEl={this.mainContentRef.current}
themeKey="main"
/>
<TermStyleBlock termTheme={termTheme} />
<MainSideBar parentRef={this.mainContentRef} />
<ErrorBoundary>
<PluginsView />

84
src/app/common/elements/termstyleblock.tsx
View File

@ -33,10 +33,9 @@ const VALID_CSS_VARIABLES = [
];
@mobxReact.observer
class TermStyleBlock extends React.Component<
{ scope: "main" | "session" | "screen"; themeSrcEl: HTMLElement; themeKey: string; termTheme: TermThemeType },
{ styleRules: string }
> {
class TermStyleBlock extends React.Component<{
termTheme: TermThemeType;
}> {
styleRules: OV<string> = mobx.observable.box("", { name: "StyleBlock-styleRules" });
theme: string;
@ -45,9 +44,10 @@ class TermStyleBlock extends React.Component<
}
componentDidUpdate(prevProps): void {
const { themeKey, termTheme } = this.props;
const { termTheme } = this.props;
const themeKey = GlobalModel.termThemeScope.get("themeKey");
const currTheme = termTheme[themeKey];
if (themeKey !== prevProps.themeKey || currTheme !== this.theme) {
if (themeKey !== prevProps.themeKey) {
this.loadThemeStyles();
}
}
@ -60,7 +60,6 @@ class TermStyleBlock extends React.Component<
isValidTermCSSVariable(key, value) {
const cssVarName = `--term-${key}`;
console.log("cssVarName", cssVarName, "value", value);
return VALID_CSS_VARIABLES.includes(cssVarName);
}
@ -69,41 +68,52 @@ class TermStyleBlock extends React.Component<
}
loadThemeStyles() {
const { themeKey, termTheme, scope } = this.props;
const { termTheme } = this.props;
const selector = GlobalModel.termThemeScope.get("selector");
const themeKey = GlobalModel.termThemeScope.get("themeKey");
const currTheme = termTheme[themeKey];
console.log("selector", selector);
console.log("themeKey", themeKey);
console.log("currTheme", currTheme);
console.log("this.theme", this.theme);
if (currTheme && currTheme !== this.theme && currTheme) {
const rtn = GlobalModel.getTermThemeJson(currTheme);
rtn.then((termThemeJson) => {
if (termThemeJson && typeof termThemeJson === "object") {
const styleProperties = Object.entries(termThemeJson)
.filter(([key, value]) => {
const cssVarName = `--term-${this.camelCaseToKebabCase(key)}`;
return VALID_CSS_VARIABLES.includes(cssVarName) && this.isValidCSSColor(value);
})
.map(([key, value]) => `--term-${key}: ${value};`)
.join(" ");
// if (currTheme && currTheme !== this.theme && currTheme) {
const rtn = GlobalModel.getTermThemeJson(currTheme);
rtn.then((termThemeJson) => {
if (termThemeJson && typeof termThemeJson === "object") {
const styleProperties = Object.entries(termThemeJson)
.filter(([key, value]) => {
const cssVarName = `--term-${this.camelCaseToKebabCase(key)}`;
return VALID_CSS_VARIABLES.includes(cssVarName) && this.isValidCSSColor(value);
})
.map(([key, value]) => `--term-${key}: ${value};`)
.join(" ");
mobx.action(() => {
this.styleRules.set(`:root { ${styleProperties} }`);
GlobalModel.termThemeSrcEls.set(scope, this.props.themeSrcEl);
})();
GlobalModel.bumpTermRenderVersion();
this.theme = currTheme;
} else {
console.error("termThemeJson is not an object:", termThemeJson);
}
}).catch((error) => {
mobx.action(() => {
this.styleRules.set(`:root { ${styleProperties} }`);
GlobalModel.termThemeScope.set(selector);
})();
console.log("loaded theme styles:", this.styleRules.get());
} else {
console.error("termThemeJson is not an object:", termThemeJson);
}
})
.then(() => {
GlobalModel.bumpTermRenderVersion();
this.theme = currTheme;
})
.catch((error) => {
console.error("error loading theme styles:", error);
});
} else {
mobx.action(() => {
this.styleRules.set("");
GlobalModel.termThemeSrcEls.set(scope, null);
})();
this.theme = currTheme;
GlobalModel.bumpTermRenderVersion();
}
// }
// else {
// mobx.action(() => {
// this.styleRules.set("");
// GlobalModel.termThemeScope.set(null);
// })();
// this.theme = currTheme;
// GlobalModel.bumpTermRenderVersion();
// }
}
render() {

6
src/app/workspace/screen/screenview.tsx
View File

@ -188,13 +188,13 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, {
const termRenderVersion = GlobalModel.termRenderVersion.get();
return (
<div className="screen-view" data-screenid={screen.screenId} ref={this.screenViewRef}>
<TermStyleBlock
<div className="screen-view" id={screen.screenId} data-screenid={screen.screenId} ref={this.screenViewRef}>
{/* <TermStyleBlock
scope="screen"
termTheme={termTheme}
themeSrcEl={this.screenViewRef.current}
themeKey={screen.screenId}
/>
/> */}
<ScreenWindowView
key={screen.screenId + ":" + fontSize + ":" + dprStr + ":" + termRenderVersion}
session={session}

5
src/app/workspace/workspaceview.tsx
View File

@ -145,6 +145,7 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
if (currTheme == theme) {
return;
}
GlobalModel.setTermThemeScope(screenId);
const prtn = GlobalCommandRunner.setScreenTermTheme(screenId, theme, false);
commandRtnHandler(prtn, this.errorMessage);
}
@ -239,14 +240,14 @@ class WorkspaceView extends React.Component<{}, {}> {
width: `${window.innerWidth - mainSidebarModel.getWidth()}px`,
}}
>
<If condition={session != null}>
{/* <If condition={session != null}>
<TermStyleBlock
scope="session"
themeSrcEl={this.sessionRef.current}
themeKey={session.sessionId}
termTheme={termTheme}
/>
</If>
</If> */}
<If condition={!isHidden}>
<SessionKeybindings key="keybindings"></SessionKeybindings>
</If>

25
src/models/model.ts
View File

@ -144,7 +144,7 @@ class Model {
name: "terminalThemes",
deep: false,
});
termThemeSrcEls: OMap<string, HTMLElement> = mobx.observable.map(
termThemeScope: OMap<"selector" | "themeKey", string> = mobx.observable.map(
{},
{
name: "termThemeSrcEls",
@ -217,14 +217,21 @@ class Model {
};
}
getThemeSrcElForScope() {
const scopes = ["screen", "session", "main"];
for (let scope of scopes) {
if (this.termThemeSrcEls.get(scope)) {
return this.termThemeSrcEls.get(scope);
}
}
return document.documentElement;
// getThemeSrcElForScope() {
// const scopes = ["screen", "session", "main"];
// for (let scope of scopes) {
// if (this.termThemeSrcEls.get(scope)) {
// return this.termThemeSrcEls.get(scope);
// }
// }
// return document.documentElement;
// }
setTermThemeScope(screenId: string) {
mobx.action(() => {
this.termThemeScope.set("selector", `#${screenId}`);
this.termThemeScope.set("themeKey", screenId);
})();
}
readConfigKeybindings() {

8
src/plugins/terminal/term.ts
View File

@ -51,10 +51,9 @@ type TermWrapOpts = {
onUpdateContentHeight: (termContext: RendererContext, height: number) => void;
};
function getThemeFromCSSVars(themeSrcEl: HTMLElement): ITheme {
function getThemeFromCSSVars(el: Element): ITheme {
const theme: ITheme = {};
const tse = themeSrcEl ?? document.documentElement;
let rootStyle = getComputedStyle(tse);
const rootStyle = getComputedStyle(el);
theme.foreground = rootStyle.getPropertyValue("--term-foreground");
theme.background = rootStyle.getPropertyValue("--term-background");
theme.black = rootStyle.getPropertyValue("--term-black");
@ -131,8 +130,7 @@ class TermWrap {
let cols = windowWidthToCols(opts.winSize.width, opts.fontSize);
this.termSize = { rows: opts.termOpts.rows, cols: cols };
}
const themeSrcEl = GlobalModel.getThemeSrcElForScope();
let theme = getThemeFromCSSVars(themeSrcEl);
let theme = getThemeFromCSSVars(this.connectedElem);
this.terminal = new Terminal({
rows: this.termSize.rows,
cols: this.termSize.cols,