/* * Author : OBKoro1 * Date : 2019-12-26 13:49:02 * LastEditors : OBKoro1 * LastEditTime : 2019-12-26 15:24:08 * FilePath : /autoCommit/src/models/WebView.ts * Description : 创建webview * https://github.com/OBKoro1 */ import * as vscode from 'vscode'; import * as path from 'path'; import * as fs from 'fs'; import { showMessage } from '../util/vscodeUtil'; import { webviewMsg } from '../util/dataStatement' // webview 设置 interface WebviewPanelOption { type: string; // webview type title: string; // webview title fileName: string; // webview 加载的资源 } class WebView { private currentPanel!: vscode.WebviewPanel; public readonly context: vscode.ExtensionContext; public MessageCallBack: Function; // webview消息回调 public constructor(context: vscode.ExtensionContext, callBack: Function) { this.context = context; this.MessageCallBack = callBack; } public create( WebviewPanelOption: WebviewPanelOption, column: vscode.ViewColumn = vscode.ViewColumn.One ) { // 获取资源地址 // TODO: 打包 const srcPath = process.env.NODE_ENV !== 'production' ? 'src' : 'dist'; this.currentPanel = vscode.window.createWebviewPanel( WebviewPanelOption.type, WebviewPanelOption.title, column, { // 只允许webview加载我们插件的`src/assets`目录下的资源 localResourceRoots: [ vscode.Uri.file( path.join(this.context.extensionPath, `${srcPath}/assets`) ) ], // 启用javascript enableScripts: true, retainContextWhenHidden: true // 隐藏保存状态 } ); const htmlPath = path.join( this.context.extensionPath, `${srcPath}/views/${WebviewPanelOption.fileName}.html` ); this.currentPanel.webview.html = this.getWebViewContent(htmlPath); // 接收webview的消息回调 this.currentPanel.webview.onDidReceiveMessage( this.handleMessage.bind(this), undefined, this.context.subscriptions ); } /** * 获取html模板内容 * @param templatePath 模板文件路径 * @param content 模板内容 */ private getWebViewContent(templatePath: string, content?: string): string { const dirPath = path.dirname(templatePath); content = content || fs.readFileSync(templatePath, 'utf-8'); content = content.replace( /( { return `${$1}${vscode.Uri.file(path.resolve(dirPath, $2)) .with({ scheme: 'vscode-resource' }) .toString()}"`; } ); return content; } /** * 关闭webview */ public close() { const panel = this.currentPanel; if (!panel) return; panel.dispose(); } // webview消息回调 public handleMessage(message: webviewMsg) { const { command, data } = message; if (command === 'event') { this.MessageCallBack(message); return; } showMessage(data, command); } } export default WebView;