vscode#WebviewPanel TypeScript Examples

async resolveCustomEditor(document: SoundPlayerDocument, webviewPanel: WebviewPanel): Promise<void> {
        webviewPanel.webview.options = {
            enableScripts: true
        }
        const html = await this.html
        webviewPanel.webview.html = html
        const result = await document.parseResult
        webviewPanel.webview.postMessage(result)
    }

private constructor(panel: WebviewPanel, extensionPath: string) {
        this._panel = panel;
        this._extensionPath = extensionPath;
        this.configure();
        this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
        this._panel.webview.html = this._getHtmlForWebview();
        this._panel.webview.onDidReceiveMessage(message => {
            switch (message.cmd) {
                case 'ready':
                    QueryGrid.isReady = true;
                    break;
                case 'startPolling':
                    QConnManager.current?.startPolling(message.interval, message.query);
                    break;
                case 'stopPolling':
                    QConnManager.current?.stopPolling();
                    break;
            }
        });
        this._panel.title = 'Query Grid';
        this._panel.iconPath = Uri.file(path.join(extensionPath, 'icon.png'));
    }

private constructor(panel: WebviewPanel, extensionPath: string) {
        this._panel = panel;
        this._extensionPath = extensionPath;
        this.configure();
        this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
        this._panel.webview.onDidReceiveMessage(message => {
            switch (message.cmd) {
                case 'ready':
                    QueryView.isReady = true;
                    break;
            }
        });
        this._panel.webview.html = this._getHtmlForWebview();
        this._panel.title = 'Query View';
        this._panel.iconPath = Uri.file(path.join(extensionPath, 'icon.png'));
    }

private constructor(panel: WebviewPanel, extensionPath: string, base64png: string) {
        this._panel = panel;
        this._extensionPath = extensionPath;
        this.configure();
        this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
        this._panel.webview.html = this._getHtmlForWebview(base64png);
        this._panel.title = 'Chart View';
        this._panel.iconPath = Uri.file(path.join(extensionPath, 'icon.png'));
    }

private getWebview(): WebviewPanel {
        if (!this.webview) {
            const options: WebviewOptions & WebviewPanelOptions = {
                enableFindWidget: true,
                enableScripts: true,
                enableCommandUris: true,
                retainContextWhenHidden: true,
            };

            this.webview = window.createWebviewPanel('lean4', 'Lean Documentation',
                { viewColumn: 3, preserveFocus: true }, options)
            this.webview.onDidDispose(() => this.webview = undefined);
            this.webview.webview.onDidReceiveMessage(m => this.receiveMessage(m));

            let first = true;
            this.webview.onDidChangeViewState(async () => {
                if (first) {
                    first = false;
                    // super hacky way to show both infoview and docview in a split
                    await commands.executeCommand('workbench.action.focusRightGroup');
                    await commands.executeCommand('workbench.action.moveEditorToBelowGroup');
                }
            });
        }
        return this.webview;
    }

private constructor(panel: WebviewPanel, extensionPath: string) {
        this._panel = panel;
        this._extensionPath = extensionPath;
        this._currentQCfg = null;
        this.configure();
        this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
        this._panel.webview.html = this._getHtmlForWebview();
        this._panel.webview.onDidReceiveMessage(message => {
            switch (message.cmd) {
                case 'ready':
                    AddServer.isReady = true;
                    break;
                case 'updateCfg':
                    this.updateServerCfg(message.cfg, message.overwrite);
                    break;
            }
        });
        this._panel.title = 'Add a Server';
        this._panel.iconPath = Uri.file(path.join(extensionPath, 'icon.png'));
    }

constructor(
		_constructorGuard: typeof PrivateSymbol,
		public readonly webviewPanel: WebviewPanel,
		public readonly drawioClient: CustomizedDrawioClient,
		public readonly document:
			| { kind: "text"; document: TextDocument }
			| { kind: "drawio"; document: DrawioBinaryDocument },
		public readonly config: DiagramConfig
	) {
		this._isActive = webviewPanel.active;
		this.dispose.track(
			webviewPanel.onDidChangeViewState(() => {
				this._isActive = webviewPanel.active;
			})
		);

		this.dispose.track(
			drawioClient.onFocusChanged.sub(({ hasFocus }) => {
				this._hasFocus = hasFocus;
			})
		);

		drawioClient.onInvokeCommand.sub(({ command }) => {
			if (command === "convert") {
				this.handleConvertCommand();
			} else if (command === "export") {
				this.handleExportCommand();
			} else if (command === "save") {
				this.drawioClient.triggerOnSave();
			}
		});
	}

public async createDrawioEditorInWebview(
		webviewPanel: WebviewPanel,
		document:
			| { kind: "text"; document: TextDocument }
			| { kind: "drawio"; document: DrawioBinaryDocument },
		options: DrawioClientOptions
	): Promise<DrawioEditor> {
		const instance =
			await this.drawioClientFactory.createDrawioClientInWebview(
				document.document.uri,
				webviewPanel,
				options
			);

		const config = this.config.getDiagramConfig(document.document.uri);
		const editor = new DrawioEditor(
			PrivateSymbol,
			webviewPanel,
			instance,
			document,
			config
		);

		this.openedEditors.add(editor);
		this.onEditorOpenedEmitter.emit({ editor });

		editor.webviewPanel.onDidDispose(() => {
			this.openedEditors.delete(editor);
		});

		return editor;
	}

public async resolveCustomEditor(
		document: DrawioBinaryDocument,
		webviewPanel: WebviewPanel,
		token: CancellationToken
	): Promise<void> {
		try {
			const editor =
				await this.drawioEditorService.createDrawioEditorInWebview(
					webviewPanel,
					{ kind: "drawio", document },
					{ isReadOnly: false }
				);

			document.setDrawioClient(editor.drawioClient);
		} catch (e) {
			window.showErrorMessage(`Failed to open diagram: ${e}`);
			throw e;
		}
	}

private createWebView(title: string): WebviewPanel {
    return window.createWebviewPanel(
      'text',
      title,
      { viewColumn: ViewColumn.Beside },
      {
        enableScripts: true,
        retainContextWhenHidden: true,
      },
    );
  }

/**
   * Show the comment edition panel
   *
   * @param title The title of the panel
   * @param fileName The file referenced by the comment
   * @return WebviewPanel The panel object
   */
  private showPanel(title: string, fileName: string): WebviewPanel {
    this.panel?.dispose(); // Dispose existing panel to avoid duplicates
    this.panel = this.createWebView(title);
    this.panel.webview.html = this.getWebviewContent(fileName);

    return this.panel;
  }

static create(
        webViewPanel: WebviewPanel,
        langClient: ExtendedLangClient,
        methods: Array<WebViewMethod> = [])
        : WebViewRPCHandler {
        return new WebViewRPCHandler(
            [...methods, ...getLangClientMethods(langClient), ...undoRedoMethods],
            webViewPanel);
    }

/**
     * callback when init success.
     */
    public initListener?: (viewPanel: WebviewPanel) => void;

/**
     * receive webview send message 
     */
    public receiveListener?: (viewPanel: WebviewPanel, message: any) => void;

private panel: WebviewPanel | undefined

/** Instance of the panel, if it is open. Otherwise `undefined`. */
    private webviewPanel?: WebviewPanel & {rpc: Rpc, api: InfoviewApi};

constructor(public panel: WebviewPanel, private eventEmitter: EventEmitter) { }

private async openPreview(editor: TextEditor) {
        let column = editor && editor.viewColumn ? editor.viewColumn + 1 : ViewColumn.Two;
        if (column === 4) { column = ViewColumn.Three; }
        if (this.webviewPanel) {
            this.webviewPanel.reveal(column, true);
        } else {
            const webviewPanel = window.createWebviewPanel('lean4', 'Lean Infoview',
                { viewColumn: column, preserveFocus: true },
                {
                    enableFindWidget: true,
                    retainContextWhenHidden: true,
                    enableScripts: true,
                    enableCommandUris: true,
                }) as WebviewPanel & {rpc: Rpc, api: InfoviewApi};

            // Note that an extension can send data to its webviews using webview.postMessage().
            // This method sends any JSON serializable data to the webview. The message is received
            // inside the webview through the standard message event.
            // The receiving of these messages is done inside webview\index.ts where it
            // calls window.addEventListener('message',...
            webviewPanel.rpc = new Rpc(m => {
                try {
                    void webviewPanel.webview.postMessage(m)
                } catch (e) {
                    // ignore any disposed object exceptions
                }
            });
            webviewPanel.rpc.register(this.editorApi);

            // Similarly, we can received data from the webview by listening to onDidReceiveMessage.
            webviewPanel.webview.onDidReceiveMessage(m => {
                try {
                    webviewPanel.rpc.messageReceived(m)
                } catch {
                    // ignore any disposed object exceptions
                }
            });
            webviewPanel.api = webviewPanel.rpc.getApi();
            webviewPanel.onDidDispose(() => {
                this.webviewPanel = undefined;
                this.clearNotificationHandlers();
                this.clearRpcSessions(null); // should be after `webviewPanel = undefined`
            });
            this.webviewPanel = webviewPanel;
            webviewPanel.webview.html = this.initialHtml();

            const uri = editor.document?.uri?.toString();
            const client = this.clientProvider.findClient(uri);
            await this.initInfoView(editor, client)
        }
    }

private webview?: WebviewPanel;

public static createWebviewPanel(viewOption: ViewOption): Promise<WebviewPanel> {

        return new Promise((resolve, reject) => {

            if (typeof (viewOption.singlePage) == 'undefined') { viewOption.singlePage = true }
            if (typeof (viewOption.killHidden) == 'undefined') { viewOption.killHidden = true }

            if (!viewOption.singlePage) {
                viewOption.title = viewOption.title + new Date().getTime()
            }

            const currentStatus = this.viewStatu[viewOption.title]
            if (viewOption.singlePage && currentStatus) {
                if (viewOption.killHidden && currentStatus.instance?.visible == false) {
                    currentStatus.instance.dispose()
                } else {
                    if (currentStatus.creating) {
                        currentStatus.initListener = viewOption.initListener
                    } else if (viewOption.initListener) {
                        viewOption.initListener(currentStatus.instance)
                    }
                    if (viewOption.receiveListener) { currentStatus.receiveListener = viewOption.receiveListener }
                    currentStatus.eventEmitter.removeAllListeners()
                    if (viewOption.eventHandler) {
                        viewOption.eventHandler(new Hanlder(currentStatus.instance, currentStatus.eventEmitter))
                    }
                    currentStatus.eventEmitter.emit('init')
                    return Promise.resolve(currentStatus.instance);
                }
            }
            const newStatus = { creating: true, instance: null, eventEmitter: new EventEmitter(), initListener: viewOption.initListener, receiveListener: viewOption.receiveListener }
            this.viewStatu[viewOption.title] = newStatus
            const targetPath = `${this.webviewPath}/${viewOption.path}.html`;
            fs.readFile(targetPath, 'utf8', async (err, data) => {
                if (err) {
                    Console.log(err);
                    reject(err);
                    return;
                }
                const webviewPanel = vscode.window.createWebviewPanel(
                    viewOption.title,
                    viewOption.title,
                    {
                        viewColumn: viewOption.splitView ? vscode.ViewColumn.Two : vscode.ViewColumn.One,
                        preserveFocus: true
                    },
                    { enableScripts: true, retainContextWhenHidden: true },
                );
                if (viewOption.iconPath) {
                    webviewPanel.iconPath = viewOption.iconPath
                }
                this.viewStatu[viewOption.title].instance = webviewPanel
                const contextPath = path.resolve(targetPath, "..");
                webviewPanel.webview.html = this.buildPath(data, webviewPanel.webview, contextPath);

                webviewPanel.onDidDispose(() => {
                    this.viewStatu[viewOption.title].eventEmitter.emit("dispose")
                    this.viewStatu[viewOption.title] = null
                })
                if (viewOption.eventHandler) {
                    viewOption.eventHandler(new Hanlder(webviewPanel, newStatus.eventEmitter))
                }
                webviewPanel.webview.onDidReceiveMessage((message) => {
                    newStatus.eventEmitter.emit(message.type, message.content)
                    if (message.type == 'init') {
                        newStatus.creating = false
                        if (newStatus.initListener) {
                            newStatus.initListener(webviewPanel)
                        }
                    } else if (newStatus.receiveListener) {
                        newStatus.receiveListener(webviewPanel, message)
                    }
                })
                resolve(webviewPanel);
            });

        });

    }

public panel: WebviewPanel;

private readonly _panel: WebviewPanel;

public revive(
    context: ExtensionContext,
    uri: Uri,
    webviewPanel: WebviewPanel
  ) {
    this.erdList.push(new WebviewERD(context, uri, this, webviewPanel));
  }

export function activate(context: ExtensionContext) {
  context.subscriptions.push(ERDEditorProvider.register(context));

  context.subscriptions.push(
    commands.registerCommand("vuerd.webview", (uri: any) => {
      if (uri instanceof Uri) {
        trackEvent("vuerd.webview");
        return webviewManager.add(context, uri);
      } else {
        window.showInformationMessage("Open a vuerd.json file first to show");
        return;
      }
    })
  );

  if (window.registerWebviewPanelSerializer) {
    window.registerWebviewPanelSerializer("vuerd.webview", {
      async deserializeWebviewPanel(webviewPanel: WebviewPanel, state: any) {
        const uri = state.uri as Uri;
        webviewManager.revive(context, uri, webviewPanel);
        trackEvent("vuerd.webview");
      },
    });
  }

  // Automatically preview content piped from stdin (when VSCode is already open)
  workspace.onDidOpenTextDocument((document) => {
    if (isVuerdFile(document)) {
      commands.executeCommand("vuerd.webview", document.uri);
    }
  });

  // Automaticlly preview content piped from stdin (when VSCode first starts up)
  if (window.activeTextEditor) {
    const document = window.activeTextEditor.document;
    if (isVuerdFile(document)) {
      commands.executeCommand("vuerd.webview", document.uri);
    }
  }
}

public static revive(panel: WebviewPanel, extensionPath: string): void {
        QueryView.currentPanel = new QueryView(panel, extensionPath);
    }

private readonly _panel: WebviewPanel;

public static revive(panel: WebviewPanel, extensionPath: string): void {
        QueryGrid.currentPanel = new QueryGrid(panel, extensionPath);
    }

private readonly _panel: WebviewPanel;

private readonly _panel: WebviewPanel;