Add Preview Function(#132)

xuzaixian · xuzaixian · commit 7f8d3bd29ea7 · 2019-03-08T15:02:17.000+08:00
Remove unused function
Use rem instead of px
Use the VS Code embed CSS vars in Preivew Webview
Use spaces instead of tabs in package.json
Use previewProvider to manage preivew logic
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
         "onCommand:leetcode.createSession",
         "onCommand:leetcode.refreshExplorer",
         "onCommand:leetcode.showProblem",
+        "onCommand:leetcode.previewProblem",
         "onCommand:leetcode.searchProblem",
         "onCommand:leetcode.testSolution",
         "onCommand:leetcode.submitSolution",
@@ -94,7 +95,7 @@
                 "title": "Show Problem",
                 "category": "LeetCode"
             },
-			{
+            {
                 "command": "leetcode.previewProblem",
                 "title": "Preview Problem",
                 "category": "LeetCode"
@@ -170,7 +171,7 @@
                     "when": "view == leetCodeExplorer && viewItem == problem",
                     "group": "leetcode@1"
                 },
-				{
+                {
                     "command": "leetcode.previewProblem",
                     "when": "view == leetCodeExplorer && viewItem == problem",
                     "group": "leetcode@1"
diff --git a/src/commands/show.ts b/src/commands/show.ts
@@ -8,9 +8,8 @@ import { LeetCodeNode } from "../explorer/LeetCodeNode";
 import { leetCodeChannel } from "../leetCodeChannel";
 import { leetCodeExecutor } from "../leetCodeExecutor";
 import { leetCodeManager } from "../leetCodeManager";
-import { Command, IProblem, IQuickItemEx, IWebViewMessage, languages, ProblemState } from "../shared";
+import { IProblem, IQuickItemEx, languages, ProblemState } from "../shared";
 import { DialogOptions, DialogType, promptForOpenOutputChannel, promptForSignIn } from "../utils/uiUtils";
-import { renderHTML } from "../utils/webviewUtils";
 import { selectWorkspaceFolder } from "../utils/workspaceUtils";
 import * as wsl from "../utils/wslUtils";
 import * as list from "./list";
@@ -136,21 +135,3 @@ async function resolveRelativePath(value: string, node: IProblem, selectedLangua
             throw new Error(errorMsg);
     }
 }
-
-export async function previewProblem(node: IProblem): Promise<void> {
-    const panelType: string = "previewProblem";
-    const panelTitle: string = node.name;
-    const panel: vscode.WebviewPanel = vscode.window.createWebviewPanel(panelType, panelTitle, vscode.ViewColumn.Active, {
-        enableScripts: true,
-        enableCommandUris: true,
-    });
-    panel.webview.onDidReceiveMessage(async (message: IWebViewMessage) => {
-        switch (message.command) {
-            case Command.ShowProblem:
-                await showProblemInternal(node);
-                panel.dispose();
-                return;
-        }
-    });
-    panel.webview.html = await renderHTML(node);
-}
diff --git a/src/explorer/LeetCodeNode.ts b/src/explorer/LeetCodeNode.ts
@@ -58,11 +58,4 @@ export class LeetCodeNode {
         };
     }
 
-    public get selectedCommand(): Command {
-        return {
-            title: "Open Problem",
-            command: "leetcode.showProblem",
-            arguments: [this],
-        };
-    }
 }
diff --git a/src/extension.ts b/src/extension.ts
@@ -15,6 +15,7 @@ import { LeetCodeTreeDataProvider } from "./explorer/LeetCodeTreeDataProvider";
 import { leetCodeChannel } from "./leetCodeChannel";
 import { leetCodeExecutor } from "./leetCodeExecutor";
 import { leetCodeManager } from "./leetCodeManager";
+import { leetCodePreviewProvider } from "./leetCodePreviewProvider";
 import { leetCodeResultProvider } from "./leetCodeResultProvider";
 import { leetCodeStatusBarItem } from "./leetCodeStatusBarItem";
 
@@ -29,11 +30,13 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
     });
 
     const leetCodeTreeDataProvider: LeetCodeTreeDataProvider = new LeetCodeTreeDataProvider(context);
+    leetCodePreviewProvider.initialize(context);
     leetCodeResultProvider.initialize(context);
 
     context.subscriptions.push(
         leetCodeStatusBarItem,
         leetCodeChannel,
+        leetCodePreviewProvider,
         leetCodeResultProvider,
         vscode.window.registerTreeDataProvider("leetCodeExplorer", leetCodeTreeDataProvider),
         vscode.languages.registerCodeLensProvider({ scheme: "file" }, codeLensProvider),
@@ -43,7 +46,7 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
         vscode.commands.registerCommand("leetcode.signout", () => leetCodeManager.signOut()),
         vscode.commands.registerCommand("leetcode.selectSessions", () => session.selectSession()),
         vscode.commands.registerCommand("leetcode.createSession", () => session.createSession()),
-        vscode.commands.registerCommand("leetcode.previewProblem", (node: LeetCodeNode) => show.previewProblem(node)),
+        vscode.commands.registerCommand("leetcode.previewProblem", (node: LeetCodeNode) => leetCodePreviewProvider.preview(node)),
         vscode.commands.registerCommand("leetcode.showProblem", (node: LeetCodeNode) => show.showProblem(node)),
         vscode.commands.registerCommand("leetcode.searchProblem", () => show.searchProblem()),
         vscode.commands.registerCommand("leetcode.refreshExplorer", () => leetCodeTreeDataProvider.refresh()),
diff --git a/src/leetcodePreviewProvider.ts b/src/leetcodePreviewProvider.ts
@@ -0,0 +1,53 @@
+import { commands, Disposable, ExtensionContext, ViewColumn, WebviewPanel, window } from "vscode";
+import { IProblem, IWebViewMessage } from "./shared";
+import { renderHTML } from "./utils/webviewUtils";
+
+class LeetCodePreviewProvider implements Disposable {
+
+    private context: ExtensionContext;
+    private panel: WebviewPanel | undefined;
+
+    public initialize(context: ExtensionContext): void {
+        this.context = context;
+    }
+
+    public async preview(node: IProblem): Promise<void> {
+        if (!this.panel) {
+            const panelType: string = "previewProblem";
+            const panelTitle: string = node.name;
+            this.panel = window.createWebviewPanel(panelType, panelTitle, ViewColumn.Active, {
+                enableScripts: true,
+                enableCommandUris: true,
+                enableFindWidget: true,
+                retainContextWhenHidden: true,
+            });
+        }
+
+        this.panel.onDidDispose(() => {
+            this.panel = undefined;
+        }, null, this.context.subscriptions);
+
+
+        this.panel.webview.onDidReceiveMessage(async (message: IWebViewMessage) => {
+            switch (message.command) {
+                case 'ShowProblem':
+                    await commands.executeCommand("leetcode.showProblem", node);
+                    this.dispose();
+                    return;
+            }
+        });
+        this.panel.webview.html = await this.provideHtmlContent(node);
+    }
+
+    public dispose(): void {
+        if (this.panel) {
+            this.panel.dispose();
+        }
+    }
+
+    private async provideHtmlContent(node: IProblem): Promise<string> {
+        return await renderHTML(node)
+    }
+}
+
+export const leetCodePreviewProvider: LeetCodePreviewProvider = new LeetCodePreviewProvider();
diff --git a/src/shared.ts b/src/shared.ts
@@ -92,10 +92,6 @@ export enum Category {
     Favorite = "Favorite",
 }
 
-export enum Command {
-    ShowProblem = "ShowProblem",
-}
-
 export interface IWebViewMessage {
     command: string;
 }
diff --git a/src/utils/webviewUtils.ts b/src/utils/webviewUtils.ts
@@ -1,5 +1,5 @@
 import { leetCodeExecutor } from "../leetCodeExecutor";
-import { Command, IProblem } from "../shared";
+import { IProblem } from "../shared";
 
 export async function renderHTML(node: IProblem): Promise<string> {
     const description: string = await leetCodeExecutor.getDescription(node);
@@ -15,16 +15,16 @@ export async function renderHTML(node: IProblem): Promise<string> {
         <style>
             #solve {
                 position: fixed;
-                bottom: 10px;
-                right: 10px;
+                bottom: 1rem;
+                right: 1rem;
                 border: 0;
-                margin: 10px 0;
-                padding: 2px 14px;
+                margin: 1rem 0;
+                padding: 0.2rem 1rem;
                 color: white;
-                background-color: rgb(14, 99, 156);
+                background-color: var(--vscode-button-background);
             }
             #solve:hover {
-                background-color: rgb(17, 119, 187);
+                background-color: var(--vscode-button-hoverBackground);
             }
             #solve:active {
                 border: 0;
@@ -42,7 +42,7 @@ export async function renderHTML(node: IProblem): Promise<string> {
                     button.onclick = solveHandler;
                     function solveHandler() {
                         vscode.postMessage({
-                            command: '${Command.ShowProblem}',
+                            command: 'ShowProblem',
                         })
                     }
                 }())

Original file line number	Diff line number	Diff line change
`@@ -58,11 +58,4 @@ export class LeetCodeNode {`
`58`	`58`	`};`
`59`	`59`	`}`
`60`	`60`
`61`		`- public get selectedCommand(): Command {`
`62`		`- return {`
`63`		`- title: "Open Problem",`
`64`		`- command: "leetcode.showProblem",`
`65`		`- arguments: [this],`
`66`		`- };`
`67`		`- }`
`68`	`61`	`}`
Original file line number	Diff line number	Diff line change
`@@ -92,10 +92,6 @@ export enum Category {`
`92`	`92`	`Favorite = "Favorite",`
`93`	`93`	`}`
`94`	`94`
`95`		`-export enum Command {`
`96`		`- ShowProblem = "ShowProblem",`
`97`		`-}`
`98`		`-`
`99`	`95`	`export interface IWebViewMessage {`
`100`	`96`	`command: string;`
`101`	`97`	`}`