pengyejiatu/IC-Coder-Plugin
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:surfer替换vcdroom

Browse Source
This commit is contained in:
Roe-xin
2026-01-07 17:30:34 +08:00
parent 226bb46094
commit b1dd2442b8
18 changed files with 5634 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
media/surfer/index.html Normal file
View File

@ -0,0 +1,200 @@
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Disable zooming: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<head>
<!-- change this to your project name -->
<title>Surfer</title>
<!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
<script type="module">
import init from '/surfer.js';
await init({module_or_path: '/surfer_bg.wasm'});
import {WebHandle, inject_message, id_of_name, draw_text_arrow} from '/surfer.js';
window.inject_message = inject_message;
window.id_of_name = id_of_name;
window.draw_text_arrow = draw_text_arrow;
/*SURFER_SETUP_HOOKS*/
</script>
<!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
<base href="/" />
<script>
function on_surfer_error(msg) {
console.log("Setting error message")
document.getElementById("error_message").innerHTML = msg
document.getElementById("error_container").style.display = "block"
}
window.on_surfer_error = on_surfer_error;
</script>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040">
<style>
html {
/* Remove touch delay: */
touch-action: manipulation;
}
body {
/* Light mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #909090;
}
@media (prefers-color-scheme: dark) {
body {
/* Dark mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
}
}
/* Allow canvas to fill entire web page: */
html,
body {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
height: 100%;
width: 100%;
}
/* Make canvas fill entire document: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.centered {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f0f0f0;
font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif;
text-align: center;
}
/* ---------------------------------------------- */
/* Loading animation from https://loading.io/css/ */
.lds-dual-ring {
display: inline-block;
width: 24px;
height: 24px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 0px;
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#error_container {
padding: 1em;
border-radius: 0.5em;
margin: 0px auto;
max-width: 980px;
color: #ffffff;
background-color: black;
position: relative;
height: 90%;
overflow: scroll;
}
#error_container a {
color: #ff9999;
}
#error_message {
overflow: scroll;
white-space: break-spaces;
}
</style>
<link rel="modulepreload" href="/surfer.js" crossorigin="anonymous" integrity="sha384-s5jcnzgSMjwjfa1Jq5kr3vQVXGQ7D+ZdMsCBdbbcmKefqvRKw652YAYaaHZJQob6"><link rel="preload" href="/surfer_bg.wasm" crossorigin="anonymous" integrity="sha384-YzYZZQJDXiKIAVpyBMziailnMHJ/sxzBq0VNMP854yLbTd2lneCR5ZgcvB4cYMFc" as="fetch" type="application/wasm"></head>
<body>
<!-- The WASM code will resize the canvas dynamically -->
<!-- the id is hardcoded in main.rs . so, make sure both match. -->
<canvas id="the_canvas_id"></canvas>
<div id="error_container" style="display: none;">
<h1>Sorry, Surfer crashed 🔥</h1>
<p>
Something caused Surfer to crash. Please report the error on
<a href="https://gitlab.com/surfer-project/surfer/-/issues/new">
gitlab
</a>
</p>
<p>
Any report is appreciated, but it is extra helpful if you can attach the waveform that caused
the crash and/or the steps to reproduce the crash.
</p>
<h3>
Backtrace:
</h3>
<div class="error_container">
<!-- This is filled in by javascript -->
<code id="error_message"></code>
</div>
</div>
<!-- Register the message listener system -->
<script src="integration.js"></script>
<script>
register_message_listener()
</script>
<!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
<!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files -->
<script>
// We disable caching during development so that we always view the latest version.
if ('serviceWorker' in navigator && window.location.hash !== "#dev") {
window.addEventListener('load', function () {
navigator.serviceWorker.register('sw.js');
});
}
</script>
</body>
</html>
<!-- Powered by egui: https://github.com/emilk/egui/ -->

65
media/surfer/integration.js Normal file
View File

@ -0,0 +1,65 @@
// Web apps which integrate Surfer as an iframe can give commands to surfer via
// the .postMessage [1] function on the iframe.
//
// For example, to tell Surfer to load waveforms from a URL, use
// `.postMessage({command: "LoadUrl", url: "https://app.surfer-project.org/picorv32.vcd"})`
//
// For more complex functionality, one can also inject any `Message` defined
// in `surfer::Message` in surfer/main.rs. However, the API of these messages
// is not stable and may change at any time. If you add functionality via
// these, make sure to test the new functionality when changing Surfer version.
//
// [1] https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
function register_message_listener() {
window.addEventListener("message", (event) => {
// JSON decode the message
const decoded = event.data
switch (decoded.command) {
// Load a waveform from a URL. The format is inferred from the data.
// Example: `{command: "LoadUrl", url: "https://app.surfer-project.org/picorv32.vcd"}`
case 'LoadUrl': {
const msg = {
LoadWaveformFileFromUrl: [
decoded.url,
"Clear"
]
}
inject_message(JSON.stringify(msg))
break;
}
case 'ToggleMenu': {
const msg = "ToggleMenu"
inject_message(JSON.stringify(msg))
break;
}
// Load waveform data directly from string content
case 'LoadData': {
const msg = {
LoadFromData: [
decoded.content,
decoded.fileName || "waveform.vcd",
"Clear"
]
}
inject_message(JSON.stringify(msg))
break;
}
// Inject any other message supported by Surfer in the surfer::Message enum.
// NOTE: The API of these is unstable.
case 'InjectMessage': {
inject_message(decoded.message);
break
}
default:
console.log(`Unknown message.command ${decoded.command}`)
break;
}
});
}

10
media/surfer/manifest.json Normal file
View File

@ -0,0 +1,10 @@
{
"background_color": "white",
"display": "standalone",
"id": "/index.html",
"lang": "en-US",
"name": "Surfer",
"short_name": "surfer",
"start_url": "./index.html",
"theme_color": "white"
}

2227
media/surfer/surfer.js Normal file
View File

File diff suppressed because it is too large Load Diff

200
media/surfer/surfer/index.html Normal file
View File

@ -0,0 +1,200 @@
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Disable zooming: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<head>
<!-- change this to your project name -->
<title>Surfer</title>
<!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
<script type="module">
import init from '/surfer.js';
await init({module_or_path: '/surfer_bg.wasm'});
import {WebHandle, inject_message, id_of_name, draw_text_arrow} from '/surfer.js';
window.inject_message = inject_message;
window.id_of_name = id_of_name;
window.draw_text_arrow = draw_text_arrow;
/*SURFER_SETUP_HOOKS*/
</script>
<!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
<base href="/" />
<script>
function on_surfer_error(msg) {
console.log("Setting error message")
document.getElementById("error_message").innerHTML = msg
document.getElementById("error_container").style.display = "block"
}
window.on_surfer_error = on_surfer_error;
</script>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040">
<style>
html {
/* Remove touch delay: */
touch-action: manipulation;
}
body {
/* Light mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #909090;
}
@media (prefers-color-scheme: dark) {
body {
/* Dark mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
}
}
/* Allow canvas to fill entire web page: */
html,
body {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
height: 100%;
width: 100%;
}
/* Make canvas fill entire document: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.centered {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f0f0f0;
font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif;
text-align: center;
}
/* ---------------------------------------------- */
/* Loading animation from https://loading.io/css/ */
.lds-dual-ring {
display: inline-block;
width: 24px;
height: 24px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 0px;
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#error_container {
padding: 1em;
border-radius: 0.5em;
margin: 0px auto;
max-width: 980px;
color: #ffffff;
background-color: black;
position: relative;
height: 90%;
overflow: scroll;
}
#error_container a {
color: #ff9999;
}
#error_message {
overflow: scroll;
white-space: break-spaces;
}
</style>
<link rel="modulepreload" href="/surfer.js" crossorigin="anonymous" integrity="sha384-s5jcnzgSMjwjfa1Jq5kr3vQVXGQ7D+ZdMsCBdbbcmKefqvRKw652YAYaaHZJQob6"><link rel="preload" href="/surfer_bg.wasm" crossorigin="anonymous" integrity="sha384-YzYZZQJDXiKIAVpyBMziailnMHJ/sxzBq0VNMP854yLbTd2lneCR5ZgcvB4cYMFc" as="fetch" type="application/wasm"></head>
<body>
<!-- The WASM code will resize the canvas dynamically -->
<!-- the id is hardcoded in main.rs . so, make sure both match. -->
<canvas id="the_canvas_id"></canvas>
<div id="error_container" style="display: none;">
<h1>Sorry, Surfer crashed 🔥</h1>
<p>
Something caused Surfer to crash. Please report the error on
<a href="https://gitlab.com/surfer-project/surfer/-/issues/new">
gitlab
</a>
</p>
<p>
Any report is appreciated, but it is extra helpful if you can attach the waveform that caused
the crash and/or the steps to reproduce the crash.
</p>
<h3>
Backtrace:
</h3>
<div class="error_container">
<!-- This is filled in by javascript -->
<code id="error_message"></code>
</div>
</div>
<!-- Register the message listener system -->
<script src="integration.js"></script>
<script>
register_message_listener()
</script>
<!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
<!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files -->
<script>
// We disable caching during development so that we always view the latest version.
if ('serviceWorker' in navigator && window.location.hash !== "#dev") {
window.addEventListener('load', function () {
navigator.serviceWorker.register('sw.js');
});
}
</script>
</body>
</html>
<!-- Powered by egui: https://github.com/emilk/egui/ -->

52
media/surfer/surfer/integration.js Normal file
View File

@ -0,0 +1,52 @@
// Web apps which integrate Surfer as an iframe can give commands to surfer via
// the .postMessage [1] function on the iframe.
//
// For example, to tell Surfer to load waveforms from a URL, use
// `.postMessage({command: "LoadUrl", url: "https://app.surfer-project.org/picorv32.vcd"})`
//
// For more complex functionality, one can also inject any `Message` defined
// in `surfer::Message` in surfer/main.rs. However, the API of these messages
// is not stable and may change at any time. If you add functionality via
// these, make sure to test the new functionality when changing Surfer version.
//
// [1] https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
function register_message_listener() {
window.addEventListener("message", (event) => {
// JSON decode the message
const decoded = event.data
switch (decoded.command) {
// Load a waveform from a URL. The format is inferred from the data.
// Example: `{command: "LoadUrl", url: "https://app.surfer-project.org/picorv32.vcd"}`
case 'LoadUrl': {
const msg = {
LoadWaveformFileFromUrl: [
decoded.url,
"Clear"
]
}
inject_message(JSON.stringify(msg))
break;
}
case 'ToggleMenu': {
const msg = "ToggleMenu"
inject_message(JSON.stringify(msg))
break;
}
// Inject any other message supported by Surfer in the surfer::Message enum.
// NOTE: The API of these is unstable.
case 'InjectMessage': {
inject_message(decoded.message);
break
}
default:
console.log(`Unknown message.command ${decoded.command}`)
break;
}
});
}

10
media/surfer/surfer/manifest.json Normal file
View File

@ -0,0 +1,10 @@
{
"background_color": "white",
"display": "standalone",
"id": "/index.html",
"lang": "en-US",
"name": "Surfer",
"short_name": "surfer",
"start_url": "./index.html",
"theme_color": "white"
}

2227
media/surfer/surfer/surfer.js Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
media/surfer/surfer/surfer_bg.wasm Normal file
View File

Binary file not shown.

37
media/surfer/surfer/sw.js Normal file
View File

@ -0,0 +1,37 @@
self.addEventListener("install", function () {
self.skipWaiting();
});
self.addEventListener("activate", (event) => {
event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", function (event) {
if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
return;
}
event.respondWith(
fetch(event.request)
.then(function (response) {
// It seems like we only need to set the headers for index.html
// If you want to be on the safe side, comment this out
// if (!response.url.includes("index.html")) return response;
const newHeaders = new Headers(response.headers);
newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");
const moddedResponse = new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders,
});
return moddedResponse;
})
.catch(function (e) {
console.error(e);
})
);
});

BIN
media/surfer/surfer_bg.wasm Normal file
View File

Binary file not shown.

37
media/surfer/sw.js Normal file
View File

@ -0,0 +1,37 @@
self.addEventListener("install", function () {
self.skipWaiting();
});
self.addEventListener("activate", (event) => {
event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", function (event) {
if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
return;
}
event.respondWith(
fetch(event.request)
.then(function (response) {
// It seems like we only need to set the headers for index.html
// If you want to be on the safe side, comment this out
// if (!response.url.includes("index.html")) return response;
const newHeaders = new Headers(response.headers);
newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");
const moddedResponse = new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders,
});
return moddedResponse;
})
.catch(function (e) {
console.error(e);
})
);
});

12
package.json
View File

@ -70,6 +70,18 @@
"id": "iccoder",
"label": "IC Coder"
}
],
"customEditors": [
{
"viewType": "ic-coder.vcdViewer",
"displayName": "VCD 波形查看器",
"selector": [
{
"filenamePattern": "*.vcd"
}
],
"priority": "default"
}
]
},
"scripts": {

BIN
rustup-init.exe Normal file
View File

Binary file not shown.

24
src/extension.ts
View File

@ -1,13 +1,27 @@
import * as vscode from "vscode";
import { ICViewProvider } from "./views/ICViewProvider";
import { showICHelperPanel } from "./panels/ICHelperPanel";
import { VCDViewerPanel } from "./panels/VCDViewerPanel";
import { VCDViewerPanel, VCDViewerEditorProvider } from "./panels/VCDViewerPanel";
import { ChatHistoryManager } from "./utils/chatHistoryManager";
import { ICCoderAuthenticationProvider } from "./services/icCoderAuthProvider";
import { VCDFileServer } from "./services/vcdFileServer";
export function activate(context: vscode.ExtensionContext) {
console.log("🎉 IC Coder 插件已激活！");
// 初始化 VCD 文件服务器
const vcdFileServer = new VCDFileServer();
vcdFileServer.start().then((port) => {
console.log(`VCD 文件服务器已启动，端口: ${port}`);
}).catch((error) => {
console.error("启动 VCD 文件服务器失败:", error);
});
// 在插件停用时关闭服务器
context.subscriptions.push({
dispose: () => vcdFileServer.stop()
});
// 注册 Authentication Provider
const authProvider = new ICCoderAuthenticationProvider(context);
context.subscriptions.push(
@ -68,7 +82,7 @@ export function activate(context: vscode.ExtensionContext) {
}
}
VCDViewerPanel.createOrShow(context.extensionUri, vcdFilePath);
VCDViewerPanel.createOrShow(context.extensionUri, vcdFilePath, vcdFileServer);
}
);
@ -160,6 +174,9 @@ export function activate(context: vscode.ExtensionContext) {
viewProvider
);
// 注册 VCD 自定义编辑器
const vcdEditorProvider = VCDViewerEditorProvider.register(context);
// 添加到订阅
context.subscriptions.push(
openPanelCommand,
@ -174,7 +191,8 @@ export function activate(context: vscode.ExtensionContext) {
// deleteSessionCommand,
// clearHistoryCommand,
// searchSessionCommand,
viewRegistration
viewRegistration,
vcdEditorProvider
);
}

547
src/panels/VCDViewerPanel.ts
View File

@ -1,19 +1,73 @@
import * as vscode from "vscode";
import * as path from "path";
import * as fs from "fs";
import { VCDFileServer } from "../services/vcdFileServer";
/**
* VCD 波形查看器面板
* VCD 波形查看器自定义编辑器提供者
*/
export class VCDViewerEditorProvider implements vscode.CustomReadonlyEditorProvider {
public static register(context: vscode.ExtensionContext): vscode.Disposable {
const provider = new VCDViewerEditorProvider(context);
const providerRegistration = vscode.window.registerCustomEditorProvider(
"ic-coder.vcdViewer",
provider,
{
webviewOptions: {
retainContextWhenHidden: true,
},
}
);
return providerRegistration;
}
constructor(private readonly context: vscode.ExtensionContext) {}
async openCustomDocument(
uri: vscode.Uri,
openContext: vscode.CustomDocumentOpenContext,
token: vscode.CancellationToken
): Promise<vscode.CustomDocument> {
return {
uri,
dispose: () => {},
};
}
async resolveCustomEditor(
document: vscode.CustomDocument,
webviewPanel: vscode.WebviewPanel,
token: vscode.CancellationToken
): Promise<void> {
webviewPanel.webview.options = {
enableScripts: true,
localResourceRoots: [this.context.extensionUri],
};
// 使用公共工厂方法创建 VCD 查看器实例
VCDViewerPanel.createFromWebviewPanel(
webviewPanel,
this.context.extensionUri,
document.uri.fsPath
);
}
}
/**
* VCD 波形查看器面板 (使用 Surfer)
*/
export class VCDViewerPanel {
public static currentPanel: VCDViewerPanel | undefined;
private readonly _panel: vscode.WebviewPanel;
private readonly _extensionUri: vscode.Uri;
private _disposables: vscode.Disposable[] = [];
private _currentVcdPath: string | undefined;
private _vcdFileServer: VCDFileServer | undefined;
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, vcdFileServer?: VCDFileServer) {
this._panel = panel;
this._extensionUri = extensionUri;
this._vcdFileServer = vcdFileServer;
// 设置初始 HTML 内容
this._panel.webview.html = this._getLoadingHtml();
@ -24,12 +78,20 @@ export class VCDViewerPanel {
// 监听来自 webview 的消息
this._panel.webview.onDidReceiveMessage(
(message) => {
console.log("[VCDViewerPanel] 收到消息:", message);
switch (message.command) {
case "loadVCD":
if (message.filePath) {
this.loadVCDFile(message.filePath);
}
break;
case "loaded":
// Surfer iframe 加载完成，发送 VCD 文件
console.log("[VCDViewerPanel] Surfer 已加载，当前 VCD 路径:", this._currentVcdPath);
if (this._currentVcdPath) {
this.sendVcdToSurfer(this._currentVcdPath);
}
break;
}
},
null,
@ -40,7 +102,7 @@ export class VCDViewerPanel {
/**
* 创建或显示 VCD 查看器面板
*/
public static createOrShow(extensionUri: vscode.Uri, vcdFilePath?: string) {
public static createOrShow(extensionUri: vscode.Uri, vcdFilePath?: string, vcdFileServer?: VCDFileServer) {
const column = vscode.ViewColumn.One;
// 如果已经有面板打开，则显示它
@ -64,7 +126,7 @@ export class VCDViewerPanel {
}
);
VCDViewerPanel.currentPanel = new VCDViewerPanel(panel, extensionUri);
VCDViewerPanel.currentPanel = new VCDViewerPanel(panel, extensionUri, vcdFileServer);
// 如果提供了 VCD 文件路径，加载它
if (vcdFilePath) {
@ -72,23 +134,43 @@ export class VCDViewerPanel {
}
}
/**
* 从已有的 webview panel 创建 VCD 查看器（用于自定义编辑器）
*/
public static createFromWebviewPanel(
panel: vscode.WebviewPanel,
extensionUri: vscode.Uri,
vcdFilePath: string
) {
const viewer = new VCDViewerPanel(panel, extensionUri);
viewer.loadVCDFile(vcdFilePath);
return viewer;
}
/**
* 加载 VCD 文件
*/
public loadVCDFile(vcdFilePath: string) {
try {
console.log("[VCDViewerPanel] 开始加载 VCD 文件:", vcdFilePath);
// 检查文件是否存在
if (!fs.existsSync(vcdFilePath)) {
vscode.window.showErrorMessage(`VCD 文件不存在: ${vcdFilePath}`);
return;
}
// 保存当前 VCD 路径
this._currentVcdPath = vcdFilePath;
console.log("[VCDViewerPanel] VCD 路径已保存:", this._currentVcdPath);
// 更新面板标题
const fileName = path.basename(vcdFilePath);
this._panel.title = `VCD 波形查看器 - ${fileName}`;
this._panel.title = `Surfer 波形查看器 - ${fileName}`;
// 设置 HTML 内容
this._panel.webview.html = this._getWebviewContent(vcdFilePath);
this._panel.webview.html = this._getWebviewContent();
console.log("[VCDViewerPanel] Webview HTML 已设置");
} catch (error) {
vscode.window.showErrorMessage(
`加载 VCD 文件失败: ${error instanceof Error ? error.message : "未知错误"}`
@ -96,6 +178,104 @@ export class VCDViewerPanel {
}
}
/**
* 解析 VCD 文件获取根模块及其直接子模块名称
*/
private parseVcdRootScope(vcdFilePath: string): string[] {
try {
// 读取 VCD 文件
const buffer = fs.readFileSync(vcdFilePath, { encoding: 'utf8' });
const lines = buffer.split('\n');
const scopeNames: string[] = [];
let scopeDepth = 0;
const scopeStack: string[] = [];
for (const line of lines) {
const trimmed = line.trim();
// 遇到 $enddefinitions 就停止解析
if (trimmed.startsWith('$enddefinitions')) {
break;
}
// 查找 $scope 定义
const scopeMatch = trimmed.match(/^\$scope\s+(\w+)\s+(\w+)/);
if (scopeMatch) {
const scopeType = scopeMatch[1];
const scopeName = scopeMatch[2];
// 记录顶层 module (depth = 0)
if (scopeDepth === 0 && scopeType === 'module') {
scopeStack.push(scopeName);
console.log("[VCDViewerPanel] 找到顶层作用域:", scopeName);
}
// 记录顶层下的直接子模块 (depth = 1)
else if (scopeDepth === 1 && scopeType === 'module') {
const fullPath = [...scopeStack, scopeName];
scopeNames.push(fullPath.join('.'));
console.log("[VCDViewerPanel] 找到子模块:", fullPath.join('.'));
}
scopeDepth++;
}
// 遇到 $upscope 减少深度
if (trimmed.startsWith('$upscope')) {
scopeDepth--;
if (scopeDepth === 0) {
scopeStack.pop();
}
}
}
return scopeNames;
} catch (error) {
console.error("[VCDViewerPanel] 解析 VCD 文件失败:", error);
return [];
}
}
/**
* 发送 VCD 文件到 Surfer
*/
private sendVcdToSurfer(vcdFilePath: string) {
try {
console.log("[VCDViewerPanel] 准备发送 VCD 到 Surfer:", vcdFilePath);
if (!this._vcdFileServer) {
throw new Error("VCD 文件服务器未初始化");
}
// 解析 VCD 文件获取根模块名称
const scopeNames = this.parseVcdRootScope(vcdFilePath);
console.log("[VCDViewerPanel] 解析到的作用域名称:", scopeNames);
// 注册文件到 HTTP 服务器
const fileId = this._vcdFileServer.registerFile(vcdFilePath);
const httpUrl = this._vcdFileServer.getFileUrl(fileId);
const fileName = path.basename(vcdFilePath);
console.log("[VCDViewerPanel] 文件名:", fileName);
console.log("[VCDViewerPanel] HTTP URL:", httpUrl);
// 使用 LoadUrl 命令通过 HTTP 加载文件
this._panel.webview.postMessage({
command: "loadVcdUrl",
url: httpUrl,
fileName: fileName,
scopeNames: scopeNames, // 传递解析到的作用域名称
});
console.log("[VCDViewerPanel] 已发送 loadVcdUrl 消息到 webview");
} catch (error) {
console.error("[VCDViewerPanel] 发送 VCD 数据失败:", error);
vscode.window.showErrorMessage(
`发送 VCD 数据失败: ${error instanceof Error ? error.message : "未知错误"}`
);
}
}
/**
* 清理资源
*/
@ -163,188 +343,239 @@ export class VCDViewerPanel {
/**
* 获取 Webview 的 HTML 内容
*/
private _getWebviewContent(vcdFilePath: string): string {
// 获取资源 URI
const vcdromJsUri = this._panel.webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "vcdrom", "vcdrom.js")
private _getWebviewContent(): string {
// 获取 surfer 资源 URI
const surferJsUri = this._panel.webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "surfer", "surfer.js")
);
const vcdWasmUri = this._panel.webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "vcdrom", "vcd.wasm")
const surferWasmUri = this._panel.webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "surfer", "surfer_bg.wasm")
);
const fontRegularUri = this._panel.webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "vcdrom", "IosevkaDrom-Regular.woff2")
const integrationJsUri = this._panel.webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "surfer", "integration.js")
);
const fontObliqueUri = this._panel.webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "vcdrom", "IosevkaDrom-Oblique.woff2")
);
const fontItalicUri = this._panel.webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "vcdrom", "IosevkaDrom-Italic.woff2")
);
// 读取 VCD 文件内容并转换为 base64
const vcdContent = fs.readFileSync(vcdFilePath, "utf-8");
const vcdBase64 = Buffer.from(vcdContent).toString("base64");
return `<!DOCTYPE html>
<html lang="zh-CN">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${this._panel.webview.cspSource}; style-src 'unsafe-inline' ${this._panel.webview.cspSource}; script-src 'unsafe-inline' 'unsafe-eval' ${this._panel.webview.cspSource}; img-src ${this._panel.webview.cspSource} data:; connect-src ${this._panel.webview.cspSource};">
<title>VCD 波形查看器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline' 'unsafe-eval' ${this._panel.webview.cspSource}; worker-src blob:; connect-src ${this._panel.webview.cspSource} blob: http://127.0.0.1:*;">
<title>Surfer 波形查看器</title>
<script>
// 获取 VS Code API（只能调用一次）
const vscode = acquireVsCodeApi();
window.vscode = vscode;
window.surferReady = false;
window.pendingVcdData = null;
function on_surfer_error(msg) {
console.log("Surfer error:", msg);
document.getElementById("error_message").innerHTML = msg;
document.getElementById("error_container").style.display = "block";
}
window.on_surfer_error = on_surfer_error;
// 加载 VCD URL 的函数
function loadVcdUrl(data) {
try {
console.log('[Webview] ========== 开始加载 VCD URL ==========');
console.log('[Webview] URL:', data.url);
console.log('[Webview] Scope names from VCD:', data.scopeNames);
// 使用 setTimeout 确保 Surfer 完全准备好
setTimeout(() => {
console.log('[Webview] 通过 postMessage 发送 LoadUrl 命令');
// 使用 integration.js 提供的标准 LoadUrl 命令
window.postMessage({
command: 'LoadUrl',
url: data.url
}, '*');
console.log('[Webview] ✅ 已发送 LoadUrl 命令');
// 等待文件加载完成后，自动添加所有信号
setTimeout(async () => {
try {
console.log('[Webview] Attempting to add all signals automatically');
// 使用从 VCD 文件解析出来的作用域名称
let scopeNamesToTry = [];
if (data.scopeNames && data.scopeNames.length > 0) {
// 使用解析出来的实际子模块路径（例如 "tb.dut"）
scopeNamesToTry = data.scopeNames.map(path => path.split('.'));
console.log('[Webview] Using parsed scope names:', scopeNamesToTry);
} else {
// 回退到常见的根作用域名称
scopeNamesToTry = [
['top'],
['testbench'],
['tb'],
['test'],
['dut']
];
console.log('[Webview] Using fallback scope names');
}
for (let i = 0; i < scopeNamesToTry.length; i++) {
const scopeName = scopeNamesToTry[i];
try {
const addScopeMsg = {
"AddScope": [
{
"strs": scopeName,
"id": {"Wellen": i + 1}
},
true // 递归添加子模块的所有信号
]
};
window.inject_message(JSON.stringify(addScopeMsg));
console.log('[Webview] Sent AddScope for: ' + scopeName.join('.') + ' (recursive)');
} catch (e) {
console.log('[Webview] Failed for scope: ' + scopeName.join('.'), e);
}
}
// 等待信号加载完成后，自动缩放到全部时间范围
setTimeout(() => {
try {
window.inject_message(JSON.stringify("ZoomToFit"));
console.log('[Webview] Sent ZoomToFit command');
} catch (e) {
console.log('[Webview] ZoomToFit failed:', e);
}
}, 500);
} catch (e) {
console.error('[Webview] Failed to add signals:', e);
}
}, 1500);
}, 100);
} catch (error) {
console.error('[Webview] ❌ 加载 VCD 失败:', error);
on_surfer_error(error.message + '\\n' + error.stack);
}
}
window.loadVcdUrl = loadVcdUrl;
</script>
<script type="module">
console.log('[Webview] 开始初始化 Surfer...');
import init from '${surferJsUri}';
await init({module_or_path: '${surferWasmUri}'});
console.log('[Webview] Surfer WASM 已加载');
import {WebHandle, inject_message, id_of_name, draw_text_arrow} from '${surferJsUri}';
window.inject_message = inject_message;
window.id_of_name = id_of_name;
window.draw_text_arrow = draw_text_arrow;
console.log('[Webview] Surfer 函数已导入，inject_message 类型:', typeof window.inject_message);
// 等待一小段时间确保 Surfer 完全初始化
await new Promise(resolve => setTimeout(resolve, 100));
window.surferReady = true;
console.log('[Webview] Surfer 已完全初始化并准备就绪');
// 关闭 Surfer 的日志面板（如果打开的话）
try {
window.inject_message(JSON.stringify("ToggleLogs"));
console.log('[Webview] 已发送关闭日志面板命令');
} catch (e) {
console.log('[Webview] 关闭日志面板失败:', e);
}
// 如果有待处理的 VCD 数据，现在加载它
if (window.pendingVcdData) {
console.log('[Webview] 发现待处理的 VCD 数据，立即加载');
loadVcdUrl(window.pendingVcdData);
window.pendingVcdData = null;
} else {
console.log('[Webview] 没有待处理的 VCD 数据');
}
// 通知 VS Code surfer 已加载完成
console.log('[Webview] 发送 loaded 消息到 VS Code');
window.vscode.postMessage({ command: 'loaded' });
</script>
<style>
@font-face {
font-family: 'Iosevka Drom Web';
font-display: swap;
font-weight: 400;
font-stretch: normal;
font-style: normal;
src: url('${fontRegularUri}') format('woff2');
}
@font-face {
font-family: 'Iosevka Drom Web';
font-display: swap;
font-weight: 400;
font-stretch: normal;
font-style: oblique;
src: url('${fontObliqueUri}') format('woff2');
}
@font-face {
font-family: 'Iosevka Drom Web';
font-display: swap;
font-weight: 400;
font-stretch: normal;
font-style: italic;
src: url('${fontItalicUri}') format('woff2');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Iosevka Drom Web', monospace;
color: var(--vscode-foreground);
background-color: var(--vscode-editor-background);
html, body {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
height: 100%;
width: 100%;
background: var(--vscode-editor-background);
}
#waveform-container {
width: 100vw;
height: 100vh;
overflow: auto;
}
#waveform1 {
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
.spinner {
border: 4px solid var(--vscode-progressBar-background);
border-top: 4px solid var(--vscode-progressBar-foreground);
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error-message {
padding: 20px;
#error_container {
padding: 1em;
border-radius: 0.5em;
margin: 0px auto;
max-width: 980px;
color: var(--vscode-errorForeground);
background-color: var(--vscode-inputValidation-errorBackground);
border: 1px solid var(--vscode-inputValidation-errorBorder);
border-radius: 4px;
margin: 20px;
position: relative;
height: 90%;
overflow: scroll;
}
#error_message {
overflow: scroll;
white-space: break-spaces;
}
</style>
<script src="${vcdromJsUri}"></script>
</head>
<body>
<div id="waveform-container">
<div class="loading">
<div class="spinner"></div>
<p>正在加载 VCD 波形...</p>
</div>
<div id="waveform1"></div>
<canvas id="the_canvas_id"></canvas>
<div id="error_container" style="display: none;">
<h3>❌ Surfer 加载失败</h3>
<code id="error_message"></code>
</div>
<script src="${integrationJsUri}"></script>
<script>
(async function() {
try {
// 设置 WASM 文件路径
window.wasmBinaryFile = '${vcdWasmUri}';
register_message_listener();
// 解码 base64 VCD 内容
const vcdBase64 = '${vcdBase64}';
const vcdContent = atob(vcdBase64);
console.log('[Webview] 注册 VS Code 消息监听器');
// 监听来自 VS Code 扩展的消息（使用 vscode API）
window.addEventListener('message', event => {
const message = event.data;
// 隐藏加载提示
document.querySelector('.loading').style.display = 'none';
// 检查是否来自 VS Code
if (message.command === 'loadVcdUrl') {
console.log('[Webview] 收到 VS Code 消息，命令:', message.command);
console.log('[Webview] Surfer 就绪状态:', window.surferReady);
// 创建一个函数来提供 VCD 数据流
const vcdProvider = async (handler) => {
// 将 VCD 内容转换为 Uint8Array
const encoder = new TextEncoder();
const vcdData = encoder.encode(vcdContent);
// 创建一个 ReadableStream reader
const stream = new ReadableStream({
start(controller) {
controller.enqueue(vcdData);
controller.close();
}
});
const reader = stream.getReader();
// 调用 handler 并传递 reader
await handler([{
key: 'local',
value: 'waveform.vcd',
format: 'raw',
baseName: 'waveform.vcd',
ext: 'vcd',
reader: reader
}]);
};
// 初始化 VCDrom，使用函数回调方式
if (typeof VCDrom === 'function') {
await VCDrom('waveform1', vcdProvider);
if (window.surferReady) {
// Surfer 已就绪，立即加载
loadVcdUrl(message);
} else {
throw new Error('VCDrom 未正确加载');
// Surfer 未就绪，保存数据等待加载
console.log('[Webview] Surfer 未就绪，保存数据待加载');
window.pendingVcdData = message;
}
} catch (error) {
console.error('加载 VCD 波形失败:', error);
document.getElementById('waveform-container').innerHTML =
'<div class="error-message">' +
'<h3>❌ 加载 VCD 波形失败</h3>' +
'<p>' + error.message + '</p>' +
'<p style="margin-top: 10px;">请确保 VCD 文件格式正确。</p>' +
'<pre style="margin-top: 10px; padding: 10px; background: rgba(0,0,0,0.1); overflow: auto;">' + error.stack + '</pre>' +
'</div>';
}
})();
}, true); // 使用捕获阶段，优先于 integration.js 的监听器
</script>
</body>
</html>`;

145
src/services/vcdFileServer.ts Normal file
View File

@ -0,0 +1,145 @@
import * as http from "http";
import * as fs from "fs";
import * as path from "path";
/**
* VCD 文件 HTTP 服务器
* 用于为 Surfer 波形查看器提供 VCD 文件访问
*/
export class VCDFileServer {
private server: http.Server | null = null;
private port: number = 0;
private vcdFiles: Map<string, string> = new Map(); // fileId -> filePath
/**
* 启动服务器
*/
public async start(): Promise<number> {
if (this.server) {
return this.port;
}
return new Promise((resolve, reject) => {
this.server = http.createServer((req, res) => {
this.handleRequest(req, res);
});
// 监听随机端口
this.server.listen(0, "127.0.0.1", () => {
const address = this.server!.address();
if (address && typeof address === "object") {
this.port = address.port;
console.log(`[VCDFileServer] 服务器已启动，端口: ${this.port}`);
resolve(this.port);
} else {
reject(new Error("无法获取服务器端口"));
}
});
this.server.on("error", (error) => {
console.error("[VCDFileServer] 服务器错误:", error);
reject(error);
});
});
}
/**
* 停止服务器
*/
public stop(): void {
if (this.server) {
this.server.close();
this.server = null;
this.port = 0;
this.vcdFiles.clear();
console.log("[VCDFileServer] 服务器已停止");
}
}
/**
* 注册 VCD 文件
*/
public registerFile(filePath: string): string {
const fileId = this.generateFileId(filePath);
this.vcdFiles.set(fileId, filePath);
console.log(`[VCDFileServer] 注册文件: ${fileId} -> ${filePath}`);
return fileId;
}
/**
* 获取文件 URL
*/
public getFileUrl(fileId: string): string {
return `http://127.0.0.1:${this.port}/vcd/${fileId}`;
}
/**
* 生成文件 ID
*/
private generateFileId(filePath: string): string {
const timestamp = Date.now();
const fileName = path.basename(filePath);
return `${timestamp}-${fileName}`;
}
/**
* 处理 HTTP 请求
*/
private handleRequest(req: http.IncomingMessage, res: http.ServerResponse): void {
const url = req.url || "";
console.log(`[VCDFileServer] 收到请求: ${url}`);
// 设置 CORS 头
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
// 处理 OPTIONS 请求
if (req.method === "OPTIONS") {
res.writeHead(200);
res.end();
return;
}
// 解析 URL，提取文件 ID
const match = url.match(/^\/vcd\/(.+)$/);
if (!match) {
res.writeHead(404, { "Content-Type": "text/plain" });
res.end("Not Found");
return;
}
const fileId = match[1];
const filePath = this.vcdFiles.get(fileId);
if (!filePath) {
console.error(`[VCDFileServer] 文件 ID 不存在: ${fileId}`);
res.writeHead(404, { "Content-Type": "text/plain" });
res.end("File Not Found");
return;
}
// 检查文件是否存在
if (!fs.existsSync(filePath)) {
console.error(`[VCDFileServer] 文件不存在: ${filePath}`);
res.writeHead(404, { "Content-Type": "text/plain" });
res.end("File Not Found");
return;
}
// 读取并发送文件
try {
const fileContent = fs.readFileSync(filePath);
res.writeHead(200, {
"Content-Type": "text/plain",
"Content-Length": fileContent.length,
});
res.end(fileContent);
console.log(`[VCDFileServer] 成功发送文件: ${filePath}`);
} catch (error) {
console.error(`[VCDFileServer] 读取文件失败:`, error);
res.writeHead(500, { "Content-Type": "text/plain" });
res.end("Internal Server Error");
}
}
}

3
src/types/api.ts
View File

@ -59,7 +59,8 @@ export type SSEEventType =
| 'error' // 错误
| 'warning' // 警告
| 'notification' // 通知
| 'depth_update'; // 深度更新
| 'depth_update' // 深度更新
| 'heartbeat'; // 心跳事件
/** text_delta 事件数据 */
export interface TextDeltaEvent {