vscode#ViewColumn TypeScript Examples

export async function showDocAndHidePicker(
  uris: Uri[],
  picker: DendronQuickPickerV2
) {
  const ctx = "showDocAndHidePicker";
  const maybeSplitSelection = _.find(picker.buttons, (ent: DendronBtn) => {
    return getButtonCategory(ent) === "split" && ent.pressed;
  });
  let viewColumn = ViewColumn.Active;
  if (maybeSplitSelection) {
    const splitType = (maybeSplitSelection as DendronBtn).type;
    if (splitType === "horizontal") {
      viewColumn = ViewColumn.Beside;
    } else {
      // TODO: close current button
      // await commands.executeCommand("workbench.action.splitEditorDown");
    }
  }

  await Promise.all(
    uris.map(async (uri) => {
      return window.showTextDocument(uri, { viewColumn }).then(
        () => {
          Logger.info({ ctx, msg: "showTextDocument", fsPath: uri.fsPath });
          picker.hide();
          return;
        },
        (err) => {
          Logger.error({ ctx, error: err, msg: "exit" });
          throw err;
        }
      );
    })
  );
  return uris;
}

async showPreview(operations: RenameOperation[]) {
    let content = [
      "# Refactor Preview",
      "",
      "## The following files will be renamed",
    ];
    content = content.concat(
      _.map(
        _.groupBy(operations, "vault.fsPath"),
        (ops: RenameOperation[], k: string) => {
          const out = [`${k}`].concat("\n||||\n|-|-|-|"); //create table of changes
          return out
            .concat(
              ops.map(({ oldUri, newUri }) => {
                return `| ${path.basename(oldUri.fsPath)} |-->| ${path.basename(
                  newUri.fsPath
                )} |`;
              })
            )
            .join("\n");
        }
      )
    );
    const panel = window.createWebviewPanel(
      "refactorPreview", // Identifies the type of the webview. Used internally
      "Refactor Preview", // Title of the panel displayed to the user
      ViewColumn.One, // Editor column to show the new webview panel in.
      {} // Webview options. More on these later.
    );
    panel.webview.html = md.render(content.join("\n"));
  }

private async example(file: string) {
        const uri = Uri.parse(file)
        if (uri.scheme === 'http' || uri.scheme === 'https') {
            const data = await this.httpGet(uri);
            void this.tryIt('-- example \n' + data);
        } else {
            const doc = await workspace.openTextDocument(Uri.parse(file));
            void languages.setTextDocumentLanguage(doc, 'lean4')
            await window.showTextDocument(doc, ViewColumn.One);
        }
    }

private async tryIt(code: string) {
        let replace = false
        if (this.tryItDoc == null) {
            this.tryItDoc = await workspace.openTextDocument({language: 'lean4', content: code});
        } else  {
            // reuse the editor that is already open so we don't end up with a million tabs.
            replace = true;
        }
        const editor = await window.showTextDocument(this.tryItDoc, ViewColumn.One);
        if (replace && editor) {
            await editor.edit(edit => {
                // append the new code to the end of the document.
                const end = new Position(editor.document.lineCount, 0)
                edit.replace(new Range(end, end), code);
            });
        }
    }

public static createOrShow(): QueryView {
        if (QueryView.extensionPath === '') {
            window.showWarningMessage('Failed to Create Query View');
        }
        const extensionPath = QueryView.extensionPath;

        if (QueryView.currentPanel) {
            return QueryView.currentPanel;
        }

        const panel = window.createWebviewPanel(
            QueryView.viewType,
            'Query View',
            {
                viewColumn: ViewColumn.Two,
                preserveFocus: true,
            },
            {
                // Enable javascript in the webview
                enableScripts: true,
                retainContextWhenHidden: true,
                // And restrict the webview to only loading content from assets directory.
                localResourceRoots: [Uri.file(path.join(extensionPath, 'assets'))]
            }
        );
        QueryView.currentPanel = new QueryView(panel, extensionPath);
        QueryView.isReady = false;
        return QueryView.currentPanel;
    }

public static createOrShow(): QueryGrid {
        if (QueryGrid.extensionPath === '') {
            window.showWarningMessage('Failed to Create Query Grid');
        }
        const extensionPath = QueryGrid.extensionPath;

        if (QueryGrid.currentPanel) {
            return QueryGrid.currentPanel;
        }

        const panel = window.createWebviewPanel(
            QueryGrid.viewType,
            'Query Grid',
            {
                viewColumn: ViewColumn.Two,
                preserveFocus: true,
            },
            {
                // Enable javascript in the webview
                enableScripts: true,
                retainContextWhenHidden: true,
                // And restrict the webview to only loading content from assets directory.
                localResourceRoots: [Uri.file(path.join(extensionPath, 'assets'))]
            }
        );
        QueryGrid.currentPanel = new QueryGrid(panel, extensionPath);
        QueryGrid.isReady = false;
        return QueryGrid.currentPanel;
    }

public static Create(bytes: number[]): void {
        if (ChartView.extensionPath === '') {
            window.showWarningMessage('Failed to Open Chart View');
        }

        if (ChartView.current) {
            ChartView.current.dispose();
        }

        const extensionPath = ChartView.extensionPath;

        const panel = window.createWebviewPanel(
            ChartView.viewType,
            'Chart View',
            {
                viewColumn: ViewColumn.Two,
                preserveFocus: true,
            },
            {
                // Enable javascript in the webview
                enableScripts: true,
                retainContextWhenHidden: true,
                // And restrict the webview to only loading content from assets directory.
                localResourceRoots: [Uri.file(path.join(extensionPath, 'assets'))]
            }
        );

        const buff = Buffer.from(bytes);
        const base64png = buff.toString('base64');

        ChartView.current = new ChartView(panel, extensionPath, base64png);
    }

public static createOrShow(): AddServer {
        if (AddServer.extensionPath === '') {
            window.showWarningMessage('Failed to Open Add Server View');
        }
        const extensionPath = AddServer.extensionPath;
        // const column = window.activeTextEditor ? window.activeTextEditor.viewColumn : undefined;
        if (AddServer.currentPanel) {
            AddServer.currentPanel._panel.reveal();
            return AddServer.currentPanel;
        }

        const panel = window.createWebviewPanel(
            AddServer.viewType,
            'Add a Server',
            {
                viewColumn: ViewColumn.One,
                preserveFocus: true,
            },
            {
                // Enable javascript in the webview
                enableScripts: true,
                retainContextWhenHidden: true,
                // And restrict the webview to only loading content from assets directory.
                localResourceRoots: [Uri.file(path.join(extensionPath, 'assets'))]
            }
        );
        AddServer.currentPanel = new AddServer(panel, extensionPath);
        AddServer.isReady = false;
        return AddServer.currentPanel;
    }

getColumnFromPane = (pane: string | void): ViewColumn => {
  switch (pane) {
    case "Active":
      return ViewColumn.Active;
    case "Beside":
      return ViewColumn.Beside;
    case "One":
      return ViewColumn.One;
    case "Two":
      return ViewColumn.Two;
    case "Three":
      return ViewColumn.Three;
    case "Four":
      return ViewColumn.Four;
    case "Five":
      return ViewColumn.Five;
    case "Six":
      return ViewColumn.Six;
    case "Seven":
      return ViewColumn.Seven;
    case "Eight":
      return ViewColumn.Eight;
    case "Nine":
      return ViewColumn.Nine;
    default:
      return ViewColumn.Beside;
  }
}

/** Opens the view given in "view". The paremeter view maps to the view launch paramter in package.json
	 * TODO: Make the ViewColumn an option.
	*/
	private async openView(view: string) {

		if (view === "LED Matrix")
			{VenusLedMatrixUI.getInstance().show(ViewColumn.Two);}
		else if (view === "Robot")
			{VenusRobotUI.getInstance().show(ViewColumn.Two);}
		else if (view === "Seven Segment Board")
			{VenusSevenSegBoardUI.getInstance().show(ViewColumn.Two);}
		else if (view === "Assembly")
			{AssemblyView.getInstance().show(ViewColumn.Two);}

	}

export function getViewColumn(): ViewColumn {
  const activeEditor = window.activeTextEditor;
  if (!activeEditor) {
    return ViewColumn.One;
  }

  switch (activeEditor.viewColumn) {
    case ViewColumn.One:
      return ViewColumn.Two;
    case ViewColumn.Two:
      return ViewColumn.Three;
  }

  return activeEditor.viewColumn as any;
}

private async revealSelection(
		pos: DeserializedCodePosition
	): Promise<void> {
		if (pos.range) {
			const d = await workspace.openTextDocument(pos.uri);
			const e = await window.showTextDocument(d, {
				viewColumn: ViewColumn.One,
				preserveFocus: true,
			});
			e.revealRange(pos.range, TextEditorRevealType.Default);

			const highlightDecorationType =
				window.createTextEditorDecorationType({
					backgroundColor: new ThemeColor(
						"editor.stackFrameHighlightBackground"
					),
				});

			if (this.lastDecorationType) {
				e.setDecorations(this.lastDecorationType, []);
			}
			this.lastDecorationType = highlightDecorationType;

			e.setDecorations(highlightDecorationType, [pos.range]);
			wait(1000).then(() => {
				e.setDecorations(highlightDecorationType, []);
			});
		} else {
			await commands.executeCommand("vscode.open", pos.uri, {
				viewColumn: ViewColumn.One,
				preserveFocus: true,
			});
		}
	}

export function activate(context: ExtensionContext) {
  context.subscriptions.push(commands.registerCommand(`${PREFIX}.open`, (uri?: Uri) => {
    uri ??= vscodeWindow.activeTextEditor?.document.uri;
    commands.executeCommand(
      'vscode.openWith',
      uri,
      VIEW_TYPE,
      ViewColumn.Beside,
    );
  }));
  const markmapEditor = new MarkmapEditor(context);
  context.subscriptions.push(vscodeWindow.registerCustomEditorProvider(
    VIEW_TYPE,
    markmapEditor,
    { webviewOptions: { retainContextWhenHidden: true } },
  ));
}

private async revealEditorSelection(uri: Uri, selection?: Range) {
        let editor: TextEditor | undefined;
        for (const e of window.visibleTextEditors) {
            if (e.document.uri.toString() === uri.toString()) {
                editor = e;
                break;
            }
        }
        if (!editor) {
            const c = window.activeTextEditor ? window.activeTextEditor.viewColumn : ViewColumn.One;
            editor = await window.showTextDocument(uri, { viewColumn: c, preserveFocus: false });
        }
        if (selection !== undefined) {
            editor.revealRange(selection, TextEditorRevealType.InCenterIfOutsideViewport);
            editor.selection = new Selection(selection.start, selection.end);
            // ensure the text document has the keyboard focus.
            await window.showTextDocument(editor.document, { viewColumn: editor.viewColumn, preserveFocus: false });
        }
    }

function addCompilePreviewCommand(getLS: () => LanguageClient, context: ExtensionContext) {
    const compiledCodeContentProvider = new CompiledCodeContentProvider(getLS);

    context.subscriptions.push(
        workspace.registerTextDocumentContentProvider(
            CompiledCodeContentProvider.scheme,
            compiledCodeContentProvider
        ),
        compiledCodeContentProvider
    );

    context.subscriptions.push(
        commands.registerTextEditorCommand('svelte.showCompiledCodeToSide', async (editor) => {
            if (editor?.document?.languageId !== 'svelte') {
                return;
            }

            const uri = editor.document.uri;
            const svelteUri = CompiledCodeContentProvider.toSvelteSchemeUri(uri);
            window.withProgress(
                { location: ProgressLocation.Window, title: 'Compiling..' },
                async () => {
                    return await window.showTextDocument(svelteUri, {
                        preview: true,
                        viewColumn: ViewColumn.Beside
                    });
                }
            );
        })
    );
}

async showError(operations: RenameOperation[]) {
    const content = [
      "# Error - Refactoring would overwrite files",
      "",
      "### The following files would be overwritten",
    ]
      .concat("\n||||\n|-|-|-|")
      .concat(
        operations.map(({ oldUri, newUri }) => {
          return `| ${path.basename(oldUri.fsPath)} |-->| ${path.basename(
            newUri.fsPath
          )} |`;
        })
      )
      .join("\n");
    const panel = window.createWebviewPanel(
      "refactorPreview", // Identifies the type of the webview. Used internally
      "Refactor Preview", // Title of the panel displayed to the user
      ViewColumn.One, // Editor column to show the new webview panel in.
      {} // Webview options. More on these later.
    );
    panel.webview.html = md.render(content);
  }

private static _getPanel(title: string, type: WebviewType) {
    const panel = window.createWebviewPanel(
      "Cloudmusic",
      title,
      ViewColumn.One,
      { enableScripts: true, retainContextWhenHidden: true }
    );
    panel.iconPath = Uri.joinPath(this.extUri, "media", "icon.ico");
    const css = panel.webview
      .asWebviewUri(Uri.joinPath(this.extUri, "dist", "style.css"))
      .toString();
    const js = panel.webview
      .asWebviewUri(Uri.joinPath(this.extUri, "dist", `${type}.js`))
      .toString();
    return {
      panel,
      setHtml: () => (panel.webview.html = this._layout(title, css, js)),
    };
  }

function openBallerinaFile(construct: ConstructIdentifier) {
    if (construct.filePath && (construct.kind === PROJECT_KIND.FUNCTION || construct.kind === PROJECT_KIND.RESOURCE)) {
        const showOptions: TextDocumentShowOptions = {
            preserveFocus: false,
            preview: false,
            viewColumn: ViewColumn.Active,
            selection: new Range(construct.startLine!, construct.startColumn!, construct.startLine!, construct.startColumn!)
        };
        const status = commands.executeCommand('vscode.open', Uri.file(construct.filePath), showOptions);
        if (!status) {
            throw new Error(`Unable to open ${construct.filePath}`);
        }
    }
}

async showMissingNotePreview(candidates: NoteProps[]) {
    let content = [
      "# Create Missing Linked Notes Preview",
      "",
      `## The following files will be created`,
    ];
    _.forEach(_.sortBy(candidates, ["vault.fsPath"]), (candidate) => {
      content = content.concat(
        `- ${candidate.vault.fsPath}/${candidate.fname}\n`
      );
    });

    const panel = window.createWebviewPanel(
      "doctorCreateMissingLinkedNotesPreview",
      "Create MissingLinked Notes Preview",
      ViewColumn.One,
      {}
    );
    panel.webview.html = md.render(content.join("\n"));
  }

async execute() {
    const title = "Dendron Configuration";

    const panel = window.createWebviewPanel(
      "dendronIframe", // Identifies the type of the webview. Used internally
      title, // Title of the panel displayed to the user
      ViewColumn.One, // Editor column to show the new webview panel in.
      {
        enableScripts: true,
        enableCommandUris: true,
        enableFindWidget: true,
        localResourceRoots: [],
      }
    );

    let resp: string;
    if (getStage() === "dev") {
      resp = await WebViewUtils.genHTMLForWebView({
        title: "Dendron Config",
        view: DendronEditorViewKey.CONFIGURE,
      });
    } else {
      resp = await getWebviewContent2({ title });
    }
    panel.webview.html = resp;
  }

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

private async showMultiMovePreview(moves: RenameNoteOpts[]) {
    // All the moves when doing bulk-move will have the same destination vault.
    const destVault = moves[0].newLoc.vaultName;

    const contentLines = [
      "# Move notes preview",
      "",
      `## The following files will be moved to vault: ${destVault}`,
    ];

    const necessaryMoves = moves.filter((m) => isMoveNecessary(m));
    const movesBySourceVaultName = _.groupBy(
      necessaryMoves,
      "oldLoc.vaultName"
    );

    function formatRowFileName(move: RenameNoteOpts) {
      return `| ${path.basename(move.oldLoc.fname)} |`;
    }

    _.forEach(
      movesBySourceVaultName,
      (moves: RenameNoteOpts[], sourceVault: string) => {
        contentLines.push(`| From vault: ${sourceVault} to ${destVault} |`);
        contentLines.push(`|------------------------|`);
        moves.forEach((move) => {
          contentLines.push(formatRowFileName(move));
        });
        contentLines.push("---");
      }
    );

    // When we are doing multi select move we don't support renaming file name
    // functionality hence the files that do not require a move must have
    // been attempted to be moved into the vault that they are already are.
    const sameVaultMoves = moves.filter((m) => !isMoveNecessary(m));
    if (sameVaultMoves.length) {
      contentLines.push(`|The following are already in vault: ${destVault}|`);
      contentLines.push(`|-----------------------------------------------|`);
      sameVaultMoves.forEach((m) => {
        contentLines.push(formatRowFileName(m));
      });
    }

    const panel = window.createWebviewPanel(
      "noteMovePreview", // Identifies the type of the webview. Used internally
      "Move Notes Preview", // Title of the panel displayed to the user
      ViewColumn.One, // Editor column to show the new webview panel in.
      {} // Webview options. More on these later.
    );
    panel.webview.html = md.render(contentLines.join("\n"));
  }

function showExamples(context: ExtensionContext, langClient: ExtendedLangClient): void {
    if (examplesPanel) {
        examplesPanel.reveal();
        return;
    }
    // Create and show a new webview
    examplesPanel = window.createWebviewPanel(
        'ballerinaExamples',
        "Ballerina Examples",
        { viewColumn: ViewColumn.One, preserveFocus: false },
        getCommonWebViewOptions()
    );
    const remoteMethods: WebViewMethod[] = [
        {
            methodName: "openExample",
            handler: (args: any[]): Thenable<any> => {
                const url = args[0];
                const ballerinaHome = ballerinaExtInstance.getBallerinaHome();
                if (ballerinaHome) {
                    const folderPath = path.join(ballerinaHome, 'examples', url);
                    const filePath = path.join(folderPath, exampleMaps.has(url) ? exampleMaps.get(url)! : `${url.replace(/-/g, '_')}.bal`);
                    workspace.openTextDocument(Uri.file(filePath)).then(doc => {
                        window.showTextDocument(doc);
                    }, (err: Error) => {
                        window.showErrorMessage(err.message);
                        sendTelemetryException(ballerinaExtInstance, err, CMP_EXAMPLES_VIEW);
                    });
                }
                return Promise.resolve();
            }
        }
    ];
    WebViewRPCHandler.create(examplesPanel, langClient, remoteMethods);
    const html = render(context, langClient);
    if (examplesPanel && html) {
        examplesPanel.webview.html = html;
    }
    examplesPanel.onDidDispose(() => {
        examplesPanel = undefined;
    });
}

function showDiagramEditor(context: ExtensionContext, langClient: ExtendedLangClient): void {
	const didChangeDisposable = workspace.onDidChangeTextDocument(
		_.debounce((e: TextDocumentChangeEvent) => {
			if (activeEditor && (e.document === activeEditor.document) &&
				e.document.fileName.endsWith('.bal')) {
				if (preventDiagramUpdate) {
					return;
				}
				updateWebView(e.document.uri);
			}
		}, DEBOUNCE_WAIT));

	const changeActiveEditorDisposable = window.onDidChangeActiveTextEditor(
		(activatedEditor: TextEditor | undefined) => {
			if (window.activeTextEditor && activatedEditor
				&& (activatedEditor.document === window.activeTextEditor.document)
				&& activatedEditor.document.fileName.endsWith('.bal')) {
				activeEditor = window.activeTextEditor;
				updateWebView(activatedEditor.document.uri);
			}
		});

	if (diagramViewPanel) {
		diagramViewPanel.reveal(ViewColumn.Two, true);
		return;
	}
	// Create and show a new webview
	diagramViewPanel = window.createWebviewPanel(
		'ballerinaDiagram',
		"Ballerina Diagram",
		{ viewColumn: ViewColumn.Two, preserveFocus: true },
		getCommonWebViewOptions()
	);

	diagramViewPanel.iconPath = {
		light: Uri.file(join(context.extensionPath, 'resources/images/icons/design-view.svg')),
		dark: Uri.file(join(context.extensionPath, 'resources/images/icons/design-view-inverse.svg'))
	};

	const editor = window.activeTextEditor;
	if (!editor) {
		return;
	}
	activeEditor = editor;
	rpcHandler = WebViewRPCHandler.create(diagramViewPanel, langClient);
	const html = render(editor.document.uri);
	if (diagramViewPanel && html) {
		diagramViewPanel.webview.html = html;
	}

	diagramViewPanel.onDidDispose(() => {
		diagramViewPanel = undefined;
		didChangeDisposable.dispose();
		changeActiveEditorDisposable.dispose();
	});
}

openFile(uri: Uri, column: ViewColumn = ViewColumn.Active) {
        this.dispose();
        vscode.workspace
            .openTextDocument(uri)
            .then((doc) => vscode.window.showTextDocument(doc, column));
    }

private defaultOpenOptions(): TextDocumentShowOptions {
        const options: TextDocumentShowOptions = {
            viewColumn: ViewColumn.Active,
            preview: false
        }
        return options;
    }

private showPreview(outputFile: string) {
    const panel = window.createWebviewPanel('text', 'Code Review HTML Report', ViewColumn.Beside, {
      enableScripts: true,
    });
    panel.webview.html = fs.readFileSync(outputFile, 'utf8');
  }

private openFile(outputFile: string) {
    const document: Uri = Uri.parse(outputFile);
    workspace.openTextDocument(document).then((openedDocument: TextDocument) => {
      window.showTextDocument(openedDocument, { viewColumn: ViewColumn.Beside });
    });
  }

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)
        }
    }