ui(post-configuration-panel): synchronize the webview ui theme to vscode active color schema

laggage · laggage · commit 448391627734 · 2022-04-01T18:49:20.000+08:00
diff --git a/src/commands/posts-list/modify-post-settings.ts b/src/commands/posts-list/modify-post-settings.ts
@@ -38,23 +38,21 @@ export const modifyPostSettings = async (input: Post | Uri) => {
     }
     const postEditDto = editDto.post;
     const localFilePath = PostFileMapManager.getFilePath(postId);
-    await postConfigurationPanel.open(
-        {
-            panelTitle: '',
-            breadcrumbs: ['更新博文设置', editDto.post.title],
-            post: postEditDto,
-            localFileUri: localFilePath ? Uri.file(localFilePath) : undefined,
-        },
-        () => {
+    await postConfigurationPanel.open({
+        panelTitle: '',
+        breadcrumbs: ['更新博文设置', editDto.post.title],
+        post: postEditDto,
+        localFileUri: localFilePath ? Uri.file(localFilePath) : undefined,
+        successCallback: () => {
             AlertService.info('博文已更新');
         },
-        async post => {
+        beforeUpdate: async post => {
             if (localFilePath && fs.existsSync(localFilePath)) {
                 await saveFilePendingChanges(localFilePath);
                 const content = await new LocalFileService(localFilePath).readAllText();
                 post.postBody = content;
             }
             return true;
-        }
-    );
+        },
+    });
 };
diff --git a/src/commands/posts-list/open-post-file.ts b/src/commands/posts-list/open-post-file.ts
@@ -1,9 +1,9 @@
-import { commands, Uri } from 'vscode';
+import { commands, TextDocumentShowOptions, Uri } from 'vscode';
 import { Post } from '../../models/post';
 import { LocalFileService } from '../../services/local-draft.service';
 import { PostFileMapManager } from '../../services/post-file-map';
 
-export const openPostFile = async (post: LocalFileService | Post | string) => {
+export const openPostFile = async (post: LocalFileService | Post | string, options?: TextDocumentShowOptions) => {
     let filePath = '';
     if (post instanceof LocalFileService) {
         filePath = post.filePath;
@@ -15,7 +15,9 @@ export const openPostFile = async (post: LocalFileService | Post | string) => {
     if (!filePath) {
         return;
     }
-    await commands.executeCommand('vscode.open', Uri.file(filePath), {
-        preview: false,
-    });
+    await commands.executeCommand(
+        'vscode.open',
+        Uri.file(filePath),
+        Object.assign({ preview: false } as TextDocumentShowOptions, options ?? {})
+    );
 };
diff --git a/src/commands/posts-list/save-post.ts b/src/commands/posts-list/save-post.ts
@@ -98,20 +98,18 @@ export const saveLocalDraftToCnblogs = async (localDraft: LocalFileService) => {
     post.title = localDraft.fileNameWithoutExt;
     post.isMarkdown = true;
     post.categoryIds ??= [];
-    void postConfigurationPanel.open(
-        {
-            panelTitle: '',
-            breadcrumbs: ['新建博文', '博文设置', post.title],
-            post,
-        },
-        async savedPost => {
+    void postConfigurationPanel.open({
+        panelTitle: '',
+        breadcrumbs: ['新建博文', '博文设置', post.title],
+        post,
+        successCallback: async savedPost => {
             await refreshPostsList();
             await PostFileMapManager.updateOrCreate(savedPost.id, localDraft.filePath);
             postsDataProvider.fireTreeDataChangedEvent(undefined);
             await openPostFile(localDraft);
             AlertService.info('博文已创建');
         },
-        async (postToSave, panel) => {
+        beforeUpdate: async (postToSave, panel) => {
             await saveFilePendingChanges(localDraft.filePath);
             // 本地文件已经被删除了
             if (!localDraft.exist && panel) {
@@ -121,8 +119,8 @@ export const saveLocalDraftToCnblogs = async (localDraft: LocalFileService) => {
             const content = await localDraft.readAllText();
             postToSave.postBody = content;
             return true;
-        }
-    );
+        },
+    });
 };
 
 export const savePostToCnblogs = async (input: Post | PostEditDto | undefined, isNewPost = false) => {
diff --git a/src/models/webview-command.ts b/src/models/webview-command.ts
@@ -5,6 +5,7 @@ export namespace webviewCommand {
         updateBreadcrumbs = 'updateBreadcrumbs',
         updateImageUploadStatus = 'updateImageUploadStatus',
         setFluentIconBaseUrl = 'setFluentIconBaseUrl',
+        changeTheme = 'changeTheme',
     }
 
     export enum ExtensionCommands {
diff --git a/src/models/webview-message.ts b/src/models/webview-message.ts
@@ -12,6 +12,14 @@ export namespace webviewMessage {
         command: webviewCommand.UiCommands | webviewCommand.ExtensionCommands;
     }
 
+    /**
+     * messages which post from the extension to the webview
+     *
+     * @export
+     * @interface IUiMessage
+     */
+    export interface IUiMessage {}
+
     export interface EditPostConfigurationMessage extends Message {
         post: Post;
         activeTheme: ColorThemeKind;
@@ -25,24 +33,28 @@ export namespace webviewMessage {
         post: Post;
     }
 
-    export interface ShowErrorResponseMessage extends Message {
+    export interface ShowErrorResponseMessage extends Message, IUiMessage {
         errorResponse: ErrorResponse;
     }
 
-    export interface UpdateBreadcrumbsMessage extends Message {
+    export interface UpdateBreadcrumbsMessage extends Message, IUiMessage {
         breadcrumbs?: string[];
     }
 
     export interface UploadImageMessage extends Message {
         imageId: string;
     }
 
-    export interface UpdateImageUpdateStatusMessage extends Message {
+    export interface UpdateImageUpdateStatusMessage extends Message, IUiMessage {
         imageId: string;
         status: ImageUploadStatus;
     }
 
-    export interface SetFluentIconBaseUrlMessage extends Message {
+    export interface SetFluentIconBaseUrlMessage extends Message, IUiMessage {
         baseUrl: string;
     }
+
+    export interface ChangeThemeMessage extends Message, IUiMessage {
+        colorThemeKind: ColorThemeKind;
+    }
 }
diff --git a/src/services/post-configuration-panel.service.ts b/src/services/post-configuration-panel.service.ts
@@ -1,7 +1,6 @@
 import { cloneDeep } from 'lodash';
 import vscode, { Uri } from 'vscode';
 import path from 'path';
-import fs from 'fs';
 import { Post } from '../models/post';
 import { globalState } from './global-state';
 import { postCategoryService } from './post-category.service';
@@ -13,6 +12,7 @@ import { webviewMessage } from '../models/webview-message';
 import { webviewCommand } from '../models/webview-command';
 import { uploadImage } from '../commands/upload-image/upload-image';
 import { ImageUploadStatusId } from '../models/image-upload-status';
+import { openPostFile } from '../commands/posts-list/open-post-file';
 
 const panels: Map<string, vscode.WebviewPanel> = new Map();
 
@@ -23,6 +23,8 @@ export namespace postConfigurationPanel {
         panelTitle?: string;
         localFileUri?: Uri;
         breadcrumbs?: string[];
+        successCallback: (post: Post) => any;
+        beforeUpdate?: (postToUpdate: Post, panel: vscode.WebviewPanel) => Promise<boolean>;
     }
     const resourceRootUri = () =>
         vscode.Uri.file(path.join(globalState.extensionContext!.extensionPath, 'dist', 'assets'));
@@ -37,29 +39,19 @@ export namespace postConfigurationPanel {
     };
 
     export const buildPanelId = (postId: number, postTitle: string): string => `${postId}-${postTitle}`;
-    export const findPanel = (panelId: string) => panels.get(panelId);
-
-    export const open = async (
-        option: PostConfigurationPanelOpenOption,
-        successCallback: (post: Post) => any,
-        beforeUpdate?: (postToUpdate: Post, panel: vscode.WebviewPanel) => Promise<boolean>
-    ) => {
-        let { post, panelTitle, localFileUri, breadcrumbs } = option;
-        const { extensionContext } = globalState;
-        if (!panelTitle) {
-            panelTitle = `博文设置 - ${post.title}`;
-        }
-        if (localFileUri && fs.existsSync(localFileUri.fsPath)) {
-            await vscode.commands.executeCommand('vscode.open', localFileUri, {
-                preview: false,
-                viewColumn: vscode.ViewColumn.One,
-            } as vscode.TextDocumentShowOptions);
-        }
+    export const findPanelById = (panelId: string) => panels.get(panelId);
+    export const open = async (option: PostConfigurationPanelOpenOption) => {
+        let { post, panelTitle, breadcrumbs } = option;
+        panelTitle = panelTitle ? panelTitle : `博文设置 - ${post.title}`;
+        await openPostFile(post, {
+            viewColumn: vscode.ViewColumn.One,
+        });
         const panelId = buildPanelId(post.id, post.title);
-        let panel = findPanel(panelId);
-        if (revealPanel(panel, option)) {
+        let panel = tryRevealPanel(panelId, option);
+        if (panel) {
             return;
         }
+        let disposables: (vscode.Disposable | undefined)[] = [];
         panel = await createPanel(panelTitle, post);
         const { webview } = panel;
         await webview.postMessage({
@@ -75,63 +67,23 @@ export namespace postConfigurationPanel {
             tags: cloneDeep(await postTagService.fetchTags()),
             breadcrumbs,
         } as webviewMessage.EditPostConfigurationMessage);
-        webview.onDidReceiveMessage(
-            async message => {
-                const { command } = (message ?? {}) as webviewMessage.Message;
-                switch (command) {
-                    case webviewCommand.ExtensionCommands.savePost:
-                        try {
-                            if (!panel) {
-                                return;
-                            }
-                            const { post: postToUpdate } = message as webviewMessage.SavePostMessage;
-                            if (beforeUpdate) {
-                                if (!(await beforeUpdate(postToUpdate, panel))) {
-                                    panel.dispose();
-                                    return;
-                                }
-                            }
-                            const postSavedModel = await postService.updatePost(postToUpdate);
-                            panel.dispose();
-                            successCallback(Object.assign({}, postToUpdate, postSavedModel));
-                        } catch (err) {
-                            if (isErrorResponse(err)) {
-                                await webview.postMessage({
-                                    command: webviewCommand.UiCommands.showErrorResponse,
-                                    errorResponse: err,
-                                } as webviewMessage.ShowErrorResponseMessage);
-                            } else {
-                                throw err;
-                            }
-                        }
-                        break;
-                    case webviewCommand.ExtensionCommands.disposePanel:
-                        panel?.dispose();
-                        break;
-                    case webviewCommand.ExtensionCommands.uploadImage:
-                        await handleUploadImageCommand(panel, message as any);
-                        break;
-                }
-            },
-            undefined,
-            globalState.extensionContext?.subscriptions
-        );
-        panel.onDidDispose(
-            () => {
-                panels.delete(panelId);
-                panel = undefined;
-            },
-            undefined,
-            extensionContext!.subscriptions
+        disposables.push(
+            observeWebviewMessages(panel, option),
+            observeActiveColorSchemaChange(panel),
+            observerPanelDisposeEvent(panel, disposables)
         );
     };
 
-    const revealPanel = (
-        panel: vscode.WebviewPanel | null | undefined,
+    const tryRevealPanel = (
+        panelId: string | undefined,
         options: PostConfigurationPanelOpenOption
-    ): panel is vscode.WebviewPanel => {
+    ): vscode.WebviewPanel | undefined => {
+        if (!panelId) {
+            return;
+        }
+        const panel = findPanelById(panelId);
         if (!panel) {
-            return false;
+            return;
         }
         try {
             const { breadcrumbs } = options;
@@ -141,10 +93,11 @@ export namespace postConfigurationPanel {
                 breadcrumbs,
             } as webviewMessage.UpdateBreadcrumbsMessage);
             panel.reveal();
-            return true;
         } catch {
-            return false;
+            return undefined;
         }
+
+        return panel;
     };
 
     const createPanel = async (panelTitle: string, post: Post): Promise<vscode.WebviewPanel> => {
@@ -160,7 +113,7 @@ export namespace postConfigurationPanel {
         return panel;
     };
 
-    const handleUploadImageCommand = async (
+    const onUploadImageCommand = async (
         panel: vscode.WebviewPanel | undefined,
         message: webviewMessage.UploadImageMessage
     ) => {
@@ -197,4 +150,83 @@ export namespace postConfigurationPanel {
             }
         }
     };
+
+    const observeActiveColorSchemaChange = (panel: vscode.WebviewPanel | undefined): vscode.Disposable | undefined => {
+        if (!panel) {
+            return;
+        }
+        const { webview } = panel;
+        return vscode.window.onDidChangeActiveColorTheme(async theme => {
+            await webview.postMessage({
+                command: webviewCommand.UiCommands.changeTheme,
+                colorThemeKind: theme.kind,
+            } as webviewMessage.ChangeThemeMessage);
+        });
+    };
+
+    const observeWebviewMessages = (
+        panel: vscode.WebviewPanel | undefined,
+        options: PostConfigurationPanelOpenOption
+    ): vscode.Disposable | undefined => {
+        if (!panel) {
+            return;
+        }
+        const { webview } = panel;
+        const { beforeUpdate, successCallback } = options;
+        return webview.onDidReceiveMessage(async message => {
+            const { command } = (message ?? {}) as webviewMessage.Message;
+            switch (command) {
+                case webviewCommand.ExtensionCommands.savePost:
+                    try {
+                        if (!panel) {
+                            return;
+                        }
+                        const { post: postToUpdate } = message as webviewMessage.SavePostMessage;
+                        if (beforeUpdate) {
+                            if (!(await beforeUpdate(postToUpdate, panel))) {
+                                panel.dispose();
+                                return;
+                            }
+                        }
+                        const postSavedModel = await postService.updatePost(postToUpdate);
+                        panel.dispose();
+                        successCallback(Object.assign({}, postToUpdate, postSavedModel));
+                    } catch (err) {
+                        if (isErrorResponse(err)) {
+                            await webview.postMessage({
+                                command: webviewCommand.UiCommands.showErrorResponse,
+                                errorResponse: err,
+                            } as webviewMessage.ShowErrorResponseMessage);
+                        } else {
+                            throw err;
+                        }
+                    }
+                    break;
+                case webviewCommand.ExtensionCommands.disposePanel:
+                    panel?.dispose();
+                    break;
+                case webviewCommand.ExtensionCommands.uploadImage:
+                    await onUploadImageCommand(panel, message as any);
+                    break;
+            }
+        });
+    };
+
+    const observerPanelDisposeEvent = (
+        panel: vscode.WebviewPanel | undefined,
+        disposables: (vscode.Disposable | undefined)[]
+    ): vscode.Disposable | undefined => {
+        if (!panel) {
+            return;
+        }
+
+        return panel.onDidDispose(() => {
+            if (panel) {
+                const panelId = panel.viewType;
+                panels.delete(panelId);
+                panel = undefined;
+                disposables.forEach(disposable => disposable?.dispose());
+            }
+        });
+    };
 }
diff --git a/ui/post-configuration/App.tsx b/ui/post-configuration/App.tsx
diff --git a/ui/post-configuration/models/theme.ts b/ui/post-configuration/models/theme.ts

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ export namespace webviewCommand {`
`5`	`5`	`updateBreadcrumbs = 'updateBreadcrumbs',`
`6`	`6`	`updateImageUploadStatus = 'updateImageUploadStatus',`
`7`	`7`	`setFluentIconBaseUrl = 'setFluentIconBaseUrl',`
	`8`	`+ changeTheme = 'changeTheme',`
`8`	`9`	`}`
`9`	`10`
`10`	`11`	`export enum ExtensionCommands {`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,14 @@ export namespace webviewMessage {`
`12`	`12`	`command: webviewCommand.UiCommands \| webviewCommand.ExtensionCommands;`
`13`	`13`	`}`
`14`	`14`
	`15`	`+ /**`
	`16`	`+ * messages which post from the extension to the webview`
	`17`	`+ *`
	`18`	`+ * @export`
	`19`	`+ * @interface IUiMessage`
	`20`	`+ */`
	`21`	`+ export interface IUiMessage {}`
	`22`	`+`
`15`	`23`	`export interface EditPostConfigurationMessage extends Message {`
`16`	`24`	`post: Post;`
`17`	`25`	`activeTheme: ColorThemeKind;`
`@@ -25,24 +33,28 @@ export namespace webviewMessage {`
`25`	`33`	`post: Post;`
`26`	`34`	`}`
`27`	`35`
`28`		`- export interface ShowErrorResponseMessage extends Message {`
	`36`	`+ export interface ShowErrorResponseMessage extends Message, IUiMessage {`
`29`	`37`	`errorResponse: ErrorResponse;`
`30`	`38`	`}`
`31`	`39`
`32`		`- export interface UpdateBreadcrumbsMessage extends Message {`
	`40`	`+ export interface UpdateBreadcrumbsMessage extends Message, IUiMessage {`
`33`	`41`	`breadcrumbs?: string[];`
`34`	`42`	`}`
`35`	`43`
`36`	`44`	`export interface UploadImageMessage extends Message {`
`37`	`45`	`imageId: string;`
`38`	`46`	`}`
`39`	`47`
`40`		`- export interface UpdateImageUpdateStatusMessage extends Message {`
	`48`	`+ export interface UpdateImageUpdateStatusMessage extends Message, IUiMessage {`
`41`	`49`	`imageId: string;`
`42`	`50`	`status: ImageUploadStatus;`
`43`	`51`	`}`
`44`	`52`
`45`		`- export interface SetFluentIconBaseUrlMessage extends Message {`
	`53`	`+ export interface SetFluentIconBaseUrlMessage extends Message, IUiMessage {`
`46`	`54`	`baseUrl: string;`
`47`	`55`	`}`
	`56`	`+`
	`57`	`+ export interface ChangeThemeMessage extends Message, IUiMessage {`
	`58`	`+ colorThemeKind: ColorThemeKind;`
	`59`	`+ }`
`48`	`60`	`}`