pag-player
Version:
pag预览插件
78 lines (67 loc) • 2.71 kB
text/typescript
import * as vscode from 'vscode';
import * as path from 'path';
import * as fs from 'fs';
export class PreviewPanel {
public static currentPanel: PreviewPanel | undefined;
private readonly _panel: vscode.WebviewPanel;
private readonly _extensionUri: vscode.Uri;
private readonly _filePath: string;
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, filePath: string) {
this._panel = panel;
this._extensionUri = extensionUri;
this._filePath = filePath;
this._panel.webview.html = this._getHtmlForWebview();
this._panel.onDidDispose(() => this.dispose(), null);
}
public static createOrShow(extensionUri: vscode.Uri, filePath: string) {
if (PreviewPanel.currentPanel) {
PreviewPanel.currentPanel._panel.reveal();
return;
}
const panel = vscode.window.createWebviewPanel(
'pagPreview',
'PAG Preview',
vscode.ViewColumn.Beside,
{
enableScripts: true,
localResourceRoots: [extensionUri]
}
);
PreviewPanel.currentPanel = new PreviewPanel(panel, extensionUri, filePath);
}
private _getHtmlForWebview(): string {
const libpagUri = this._panel.webview.asWebviewUri(
vscode.Uri.file(path.join(this._extensionUri.fsPath, 'src', 'libpag.js'))
);
const fileContent = fs.readFileSync(this._filePath, { encoding: 'base64' });
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PAG Preview</title>
</head>
<body>
<canvas id="pag-canvas"></canvas>
<script src="${libpagUri}"></script>
<script>
const canvas = document.getElementById('pag-canvas');
const pagFile = '${fileContent}';
window.onload = async () => {
const arrayBuffer = Uint8Array.from(atob(pagFile), c => c.charCodeAt(0)).buffer;
const PAG = await window.libpag.PAGInit();
const pagFile = await PAG.PAGFile.load(arrayBuffer);
const pagView = await PAG.PAGView.init(pagFile, canvas);
await pagView.play();
};
</script>
</body>
</html>
`;
}
public dispose() {
PreviewPanel.currentPanel = undefined;
this._panel.dispose();
}
}