From c24e99e9ff9391d1ee7a3980c2afa56a46fb41dd Mon Sep 17 00:00:00 2001 From: Red Adaya Date: Thu, 11 Apr 2024 14:31:34 +0800 Subject: [PATCH] save work --- src/app/app.tsx | 7 +- src/app/common/elements/termstyleblock.tsx | 84 ++++++++++++---------- src/app/workspace/screen/screenview.tsx | 6 +- src/app/workspace/workspaceview.tsx | 5 +- src/models/model.ts | 25 ++++--- src/plugins/terminal/term.ts | 8 +-- 6 files changed, 73 insertions(+), 62 deletions(-) diff --git a/src/app/app.tsx b/src/app/app.tsx index f6bc46f23..1fbc09ade 100644 --- a/src/app/app.tsx +++ b/src/app/app.tsx @@ -153,12 +153,7 @@ class App extends React.Component<{}, {}> {
- + diff --git a/src/app/common/elements/termstyleblock.tsx b/src/app/common/elements/termstyleblock.tsx index df458be92..7a0ed46f0 100644 --- a/src/app/common/elements/termstyleblock.tsx +++ b/src/app/common/elements/termstyleblock.tsx @@ -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 = 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() { diff --git a/src/app/workspace/screen/screenview.tsx b/src/app/workspace/screen/screenview.tsx index 1d115801c..11a1f1c47 100644 --- a/src/app/workspace/screen/screenview.tsx +++ b/src/app/workspace/screen/screenview.tsx @@ -188,13 +188,13 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, { const termRenderVersion = GlobalModel.termRenderVersion.get(); return ( -
- + {/* + /> */} { 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`, }} > - + {/* - + */} diff --git a/src/models/model.ts b/src/models/model.ts index bab0aad65..bbd68492c 100644 --- a/src/models/model.ts +++ b/src/models/model.ts @@ -144,7 +144,7 @@ class Model { name: "terminalThemes", deep: false, }); - termThemeSrcEls: OMap = 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() { diff --git a/src/plugins/terminal/term.ts b/src/plugins/terminal/term.ts index 2d5e84f70..94c0b894b 100644 --- a/src/plugins/terminal/term.ts +++ b/src/plugins/terminal/term.ts @@ -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,