update

css/documentation.css

@@ -570,17 +570,17 @@ img {
 }
 
 .diagram-container .i-port-name {
-    font-size: 16px;
+    font-size: 18px;
     padding: 3px 8px;
 }
 
 .diagram-container .o-port-name {
-    font-size: 16px;
+    font-size: 18px;
     padding: 3px 8px;
 }
 
 .diagram-container .io-port-name {
-    font-size: 16px;
+    font-size: 18px;
     padding: 3px 8px;
 
 }
@@ -605,12 +605,14 @@ img {
 
 .diagram-container .port-width-left-caption {
     position: absolute;
-    margin: -10px 35px;
+    margin: -5px 10px;
+    font-size: 14px;
 }
 
 .diagram-container .port-width-right-caption {
     position: absolute;
-    margin: -10px 10px;
+    margin: -5px 10px;
+    font-size: 14px;
 }
 
 .vscode-dark .diagram-container {

images/svg/dark/left-arrow.svg

@@ -4,7 +4,7 @@
     <g>
         <path d="M 101 21 L 25.47 21" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3"
             stroke-miterlimit="10" pointer-events="stroke" />
-        <path d="M 45.24 10 L 23.24 21 L 45.24 32" fill="none" stroke="rgb(255, 255, 255)"
+        <path d="M 35.24 13 L 23.24 21 L 35.24 29" fill="none" stroke="rgb(255, 255, 255)"
             stroke-width="3" stroke-miterlimit="10" pointer-events="all" />
     </g>
 </svg>

images/svg/dark/left-right-arrow.svg

@@ -4,9 +4,9 @@
     <g>
         <path d="M 97.53 22 L 26.47 22" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3"
             stroke-miterlimit="10" pointer-events="stroke" />
-        <path d="M 77.76 33 L 99.76 22 L 77.76 11" fill="none" stroke="rgb(255, 255, 255)"
+        <path d="M 87.76 30 L 99.76 22 L 87.76 14" fill="none" stroke="rgb(255, 255, 255)"
             stroke-width="3" stroke-miterlimit="10" pointer-events="all" />
-        <path d="M 46.24 11 L 24.24 22 L 46.24 33" fill="none" stroke="rgb(255, 255, 255)"
+        <path d="M 36.24 14 L 24.24 22 L 36.24 30" fill="none" stroke="rgb(255, 255, 255)"
             stroke-width="3" stroke-miterlimit="10" pointer-events="all" />
     </g>
 </svg>

images/svg/dark/right-arrow.svg

@@ -4,7 +4,7 @@
     <g>
         <path d="M 21 21 L 96.53 21" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3"
             stroke-miterlimit="10" pointer-events="stroke" />
-        <path d="M 76.76 32 L 98.76 21 L 76.76 10" fill="none" stroke="rgb(255, 255, 255)"
+        <path d="M 86.76 29 L 98.76 21 L 86.76 13" fill="none" stroke="rgb(255, 255, 255)"
             stroke-width="3" stroke-miterlimit="10" pointer-events="all" />
     </g>
 </svg>

images/svg/dark/right-dot-arrow.svg

@@ -4,9 +4,9 @@
     <g>
         <path d="M 22 22 L 97.53 22" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3"
             stroke-miterlimit="10" pointer-events="stroke" />
-        <path d="M 77.76 33 L 99.76 22 L 77.76 11" fill="none" stroke="rgb(255, 255, 255)"
+        <path d="M 87.76 30 L 99.76 22 L 87.76 14" fill="none" stroke="rgb(255, 255, 255)"
             stroke-width="3" stroke-miterlimit="10" pointer-events="all" />
-        <path d="M 72 32 L 52 12" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3"
+        <path d="M 67 27 L 57 17" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3"
             stroke-miterlimit="10" pointer-events="stroke" />
     </g>
 </svg>

images/svg/light/left-arrow.svg

@@ -4,7 +4,7 @@
     <g>
         <path d="M 101 21 L 25.47 21" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3"
             stroke-miterlimit="10" pointer-events="stroke" />
-        <path d="M 45.24 10 L 23.24 21 L 45.24 32" fill="none" stroke="rgb(0, 0, 0)"
+        <path d="M 35.24 13 L 23.24 21 L 35.24 29" fill="none" stroke="rgb(0, 0, 0)"
             stroke-width="3" stroke-miterlimit="10" pointer-events="all" />
     </g>
 </svg>

images/svg/light/left-right-arrow.svg

@@ -4,9 +4,9 @@
     <g>
         <path d="M 97.53 22 L 26.47 22" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3"
             stroke-miterlimit="10" pointer-events="stroke" />
-        <path d="M 77.76 33 L 99.76 22 L 77.76 11" fill="none" stroke="rgb(0, 0, 0)"
+        <path d="M 87.76 30 L 99.76 22 L 87.76 14" fill="none" stroke="rgb(0, 0, 0)"
             stroke-width="3" stroke-miterlimit="10" pointer-events="all" />
-        <path d="M 46.24 11 L 24.24 22 L 46.24 33" fill="none" stroke="rgb(0, 0, 0)"
+        <path d="M 36.24 14 L 24.24 22 L 36.24 30" fill="none" stroke="rgb(0, 0, 0)"
             stroke-width="3" stroke-miterlimit="10" pointer-events="all" />
     </g>
 </svg>

images/svg/light/right-arrow.svg

@@ -4,7 +4,7 @@
     <g>
         <path d="M 21 21 L 96.53 21" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3"
             stroke-miterlimit="10" pointer-events="stroke" />
-        <path d="M 76.76 32 L 98.76 21 L 76.76 10" fill="none" stroke="rgb(0, 0, 0)"
+        <path d="M 86.76 29 L 98.76 21 L 86.76 13" fill="none" stroke="rgb(0, 0, 0)"
             stroke-width="3" stroke-miterlimit="10" pointer-events="all" />
     </g>
 </svg>

images/svg/light/right-dot-arrow.svg

@@ -4,9 +4,9 @@
     <g>
         <path d="M 22 22 L 97.53 22" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3"
             stroke-miterlimit="10" pointer-events="stroke" />
-        <path d="M 77.76 33 L 99.76 22 L 77.76 11" fill="none" stroke="rgb(0, 0, 0)"
+        <path d="M 87.76 30 L 99.76 22 L 87.76 14" fill="none" stroke="rgb(0, 0, 0)"
             stroke-width="3" stroke-miterlimit="10" pointer-events="all" />
-        <path d="M 72 32 L 52 12" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3"
+        <path d="M 67 27 L 57 17" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3"
             stroke-miterlimit="10" pointer-events="stroke" />
     </g>
 </svg>

package.json

@@ -748,6 +748,18 @@
                 }
             ]
         },
+        "customEditors": [
+            {
+                "viewType": "digital-ide.vcd.viewer",
+                "displayName": "Digital Viewer",
+                "selector": [
+                    {
+                        "filenamePattern": "*.vcd"
+                    }
+                ],
+                "priority": "default"
+            }
+        ],
         "viewsContainers": {
             "activitybar": [
                 {

src/function/dide-viewer/index.ts

@@ -4,6 +4,18 @@ import * as fspath from 'path';
 import { hdlFile, hdlPath } from '../../hdlFs';
 import { opeParam, ReportType, WaveViewOutput } from '../../global';
 
+function getWebviewContent(panel?: vscode.WebviewPanel): string | undefined {
+    const dideviewerPath = hdlPath.join(opeParam.extensionPath, 'resources', 'dide-viewer', 'view');
+    const htmlIndexPath = hdlPath.join(dideviewerPath, 'index.html');
+    const html = hdlFile.readFile(htmlIndexPath)?.replace(/(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g, (m, $1, $2) => {
+        const absLocalPath = fspath.resolve(dideviewerPath, $2);
+        const webviewUri = panel?.webview.asWebviewUri(vscode.Uri.file(absLocalPath));
+        const replaceHref = $1 + webviewUri?.toString() + '"';
+        return replaceHref;
+    });
+    return html;
+}
+
 class WaveViewer {
     context: vscode.ExtensionContext;
     panel?: vscode.WebviewPanel;
@@ -36,7 +48,7 @@ class WaveViewer {
             console.log(message);
         }, null, this.context.subscriptions);
 
-        const previewHtml = this.getWebviewContent();
+        const previewHtml = getWebviewContent(this.panel);
         if (this.panel && previewHtml) {
             const dideviewerPath = hdlPath.join(opeParam.extensionPath, 'resources', 'dide-viewer', 'view');
             const workerAbsPath = hdlPath.join(dideviewerPath, 'worker.js');
@@ -62,18 +74,6 @@ class WaveViewer {
 
         });
     }
-
-    public getWebviewContent(): string | undefined {
-        const dideviewerPath = hdlPath.join(opeParam.extensionPath, 'resources', 'dide-viewer', 'view');
-        const htmlIndexPath = hdlPath.join(dideviewerPath, 'index.html');
-        const html = hdlFile.readFile(htmlIndexPath)?.replace(/(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g, (m, $1, $2) => {
-            const absLocalPath = fspath.resolve(dideviewerPath, $2);
-            const webviewUri = this.panel?.webview.asWebviewUri(vscode.Uri.file(absLocalPath));
-            const replaceHref = $1 + webviewUri?.toString() + '"';
-            return replaceHref;
-        });
-        return html;
-    }
 }
 
 async function openWaveViewer(context: vscode.ExtensionContext, uri: vscode.Uri) {
@@ -81,6 +81,83 @@ async function openWaveViewer(context: vscode.ExtensionContext, uri: vscode.Uri)
     viewer.open(uri);
 }
 
+class VcdViewerDocument implements vscode.CustomDocument {
+    uri: vscode.Uri;
+    constructor(uri: vscode.Uri) {
+        this.uri = uri;
+    }
+    dispose(): void {
+        
+    }
+}
+
+class VcdViewerProvider implements vscode.CustomEditorProvider {
+    private readonly _onDidChangeCustomDocument = new vscode.EventEmitter<vscode.CustomDocumentEditEvent<VcdViewerDocument>>();
+	public readonly onDidChangeCustomDocument = this._onDidChangeCustomDocument.event;
+
+    async resolveCustomEditor(document: VcdViewerDocument, webviewPanel: vscode.WebviewPanel, token: vscode.CancellationToken) {
+        webviewPanel.webview.options = {
+            enableScripts: true,
+            enableForms: true,
+        };
+
+        webviewPanel.onDidDispose(() => {
+            webviewPanel.dispose();
+        }, null);
+
+        webviewPanel.webview.onDidReceiveMessage(message => {
+            console.log(message);
+        }, null);
+        
+        const previewHtml = getWebviewContent(webviewPanel);
+        
+        if (webviewPanel && previewHtml) {
+            const dideviewerPath = hdlPath.join(opeParam.extensionPath, 'resources', 'dide-viewer', 'view');
+            const workerAbsPath = hdlPath.join(dideviewerPath, 'worker.js');
+            const webviewUri = webviewPanel.webview.asWebviewUri(document.uri);
+            const workerUri = webviewPanel.webview.asWebviewUri(vscode.Uri.file(workerAbsPath));            
+            const workerRootUri = webviewPanel.webview.asWebviewUri(vscode.Uri.file(dideviewerPath));
+
+            let preprocessHtml = previewHtml
+                .replace('test.vcd', webviewUri.toString())
+                .replace('worker.js', workerUri.toString())
+                .replace('<workerRoot>', workerRootUri.toString());
+            webviewPanel.webview.html = preprocessHtml;
+
+            const iconPath = hdlPath.join(opeParam.extensionPath, 'images', 'icon.svg');
+            webviewPanel.iconPath = vscode.Uri.file(iconPath);
+        } else {
+            WaveViewOutput.report('preview html in <WaveViewer.create> is empty', ReportType.Warn);
+        }
+    }
+
+    openCustomDocument(uri: vscode.Uri, openContext: vscode.CustomDocumentOpenContext, token: vscode.CancellationToken): VcdViewerDocument | Thenable<VcdViewerDocument> {
+        const document = new VcdViewerDocument(uri);
+        return document;
+    }
+
+    async revertCustomDocument(document: VcdViewerDocument, cancellation: vscode.CancellationToken): Promise<void> {
+        return;
+    }
+
+    async saveCustomDocument(document: VcdViewerDocument, cancellation: vscode.CancellationToken): Promise<void> {
+        
+    }
+
+
+    async saveCustomDocumentAs(document: VcdViewerDocument, destination: vscode.Uri, cancellation: vscode.CancellationToken): Promise<void> {
+        
+    }
+
+
+    async backupCustomDocument(document: VcdViewerDocument, context: vscode.CustomDocumentBackupContext, cancellation: vscode.CancellationToken): Promise<vscode.CustomDocumentBackup> {
+        
+    }
+}
+
+const vcdViewerProvider = new VcdViewerProvider();
+
 export {
-    openWaveViewer
+    openWaveViewer,
+    vcdViewerProvider
 };

src/function/hdlDoc/diagram.ts

@@ -80,8 +80,8 @@ function makeDiagramPortWrapper(ports: HdlModulePort[]): string {
     const leftPorts = ports.filter(port => port.type === HdlModulePortType.Input || port.type === HdlModulePortType.Inout);
     const rightPorts = ports.filter(port => port.type === HdlModulePortType.Output);
 
-    const leftDirection = makeLeftDirection(leftPorts);
-    const diagramPorts = makeDiagramPorts(leftPorts, rightPorts);
+    const leftDirection = makeLeftDirection(leftPorts);    
+    const diagramPorts = makeDiagramPorts(leftPorts, rightPorts);    
     const rightDirection = makeRightDirection(rightPorts);
     
     const diagramPortWrapper = `<div class="diagram-ports-wrapper">${leftDirection}${diagramPorts}${rightDirection}</div>`;
@@ -177,7 +177,7 @@ function makeDiagramPorts(leftPorts: HdlModulePort[], rightPorts: HdlModulePort[
         diagramePorts += diagramPortItem;
     }
     while (rightIndex < rightPorts.length) {
-        const rightPortName = makePortName(leftPorts[leftIndex ++]);
+        const rightPortName = makePortName(rightPorts[rightIndex ++]);        
         const diagramPortItem = `<div class="digrame-port-item"><div></div>${rightPortName}</div>`;
         diagramePorts += diagramPortItem;
     }
@@ -185,7 +185,7 @@ function makeDiagramPorts(leftPorts: HdlModulePort[], rightPorts: HdlModulePort[
 }
 
 function makeRightDirection(rightPorts: HdlModulePort[]): string {
-    let rightDirection = '';
+    let rightDirection = '';    
     for (const port of rightPorts) {
         const portCaption = makePortCaption(port, 'right');
         let portArrow = makePortArrow(port, 'right');

src/function/hdlDoc/html.ts

@@ -104,6 +104,7 @@ function makeWavedromRenderErrorHTML() {
  * @param usage in whick module is used
  */
 async function makeShowHTML(usage: 'webview' | 'pdf' | 'html' | 'markdown'): Promise<string> {
+
     // start to render the real html
     let body = '';
     const userStyle = (usage === 'webview' || usage === 'markdown') ? undefined : ThemeType.Light;
@@ -113,7 +114,7 @@ async function makeShowHTML(usage: 'webview' | 'pdf' | 'html' | 'markdown'): Pro
     if (!renderList || renderList.length === 0) {
         return '';
     }
-
+    
     for (const r of renderList) {
         const renderResult = r.render();
         if (renderResult) {

src/function/hdlDoc/markdown.ts

@@ -48,13 +48,15 @@ function selectFieldValue(obj: any, subName: string, ws: string, name: string):
 
 function makeTableFromObjArray(md: MarkdownString, array: any[], name: string, fieldNames: string[], displayNames: string[]) {
     const ws = hdlPath.toSlash(opeParam.workspacePath) + '/';
+    console.log('enter showhtml');
+    
     if (array.length === 0) {
         md.addText(`no ${name} info`);
     } else {
         const rows = [];
         for (const obj of array) {
             const data = [];
-            for (const subName of fieldNames) {
+            for (const subName of fieldNames) {                
                 const value = selectFieldValue(obj, subName, ws, name);
                 data.push(value);
             }
@@ -97,7 +99,7 @@ async function patchComment(path: AbsPath, ports: (HdlModulePort | HdlModulePara
 async function getDocsFromModule(module: HdlModule): Promise<MarkdownString> {
     const moduleName = module.name;
     const portNum = module.ports.length;
-    const paramNum = module.params.length;
+    const paramNum = module.params.length;    
     
     // add desc can optimizer in the future version
     const paramPP = patchComment(module.path, module.params);

src/function/index.ts

@@ -119,6 +119,14 @@ function registerNetlist(context: vscode.ExtensionContext) {
 
 function registerWaveViewer(context: vscode.ExtensionContext) {
     vscode.commands.registerCommand('digital-ide.waveviewer.show', uri => WaveView.openWaveViewer(context, uri));
+    vscode.window.registerCustomEditorProvider('digital-ide.vcd.viewer', WaveView.vcdViewerProvider,
+        {
+            webviewOptions: {
+                retainContextWhenHidden: true,
+            },
+            supportsMultipleEditorsPerDocument: false
+        }
+    );
 }
 
 export {

src/global/util.ts

@@ -1,4 +1,5 @@
 import * as fs from 'fs';
+import * as vscode from 'vscode';
 import * as childProcess from 'child_process';
 
 import { AbsPath } from ".";
@@ -59,10 +60,43 @@ async function easyExec(executor: string, args: string[]): Promise<ExecutorOutpu
     return p;
 }
 
+/**
+ * Tracks all webviews.
+ */
+class WebviewCollection {
+	private readonly _webviews = new Set<{
+		readonly resource: string;
+		readonly webviewPanel: vscode.WebviewPanel;
+	}>();
 
+	/**
+	 * Get all known webviews for a given uri.
+	 */
+	public *get(uri: vscode.Uri): Iterable<vscode.WebviewPanel> {
+		const key = uri.toString();
+		for (const entry of this._webviews) {
+			if (entry.resource === key) {
+				yield entry.webviewPanel;
+			}
+		}
+	}
+
+	/**
+	 * Add a new webview to the collection.
+	 */
+	public add(uri: vscode.Uri, webviewPanel: vscode.WebviewPanel) {
+		const entry = { resource: uri.toString(), webviewPanel };
+		this._webviews.add(entry);
+
+		webviewPanel.onDidDispose(() => {
+			this._webviews.delete(entry);
+		});
+	}
+}
 
 export {
     PathSet,
     isSameSet,
-    easyExec
+    easyExec,
+    WebviewCollection
 };

src/hdlParser/core.ts

@@ -477,7 +477,6 @@ class HdlModule {
     public createHdlInstance(rawHdlInstance: common.RawHdlInstance): HdlInstance {
         const instModName = rawHdlInstance.type;
         
-        
         if (this.languageId === HdlLangID.Verilog || this.languageId === HdlLangID.SystemVerilog) {
             const searchResult = this.searchInstModPath(instModName);
             const hdlInstance = new HdlInstance(rawHdlInstance.name,
@@ -525,7 +524,11 @@ class HdlModule {
         }
     }
 
-    public makeNameToInstances() {        
+    public makeNameToInstances() {
+        if (this.name === 'u_reg_cfg') {
+            console.log('[u_reg_cfg debug]');
+            console.log(this.rawInstances);
+        }    
         if (this.rawInstances !== undefined) {            
             this.nameToInstances.clear();
             for (const inst of this.rawInstances) {