Как слушать события в TreeDataProvider vscode? - PullRequest
Новая
       10

Как слушать события в TreeDataProvider vscode?

0 голосов
/ 11 июня 2018

Я играю с созданием расширения vscode, используя API TreeDataProvider.У меня есть список того, что показывает, каждый TreeItem представляет собой составленную строку метки, все отлично работает.

Мне не хватает способа реагирования на события нажатия на любом из элементов.VSCode выбирает элемент, когда вы нажимаете на него, но я бы хотел послушать это событие, получить рассматриваемый элемент и т. Д. Для меня это не очевидно из документов.

В общем, настройкаTreeItem остро не хватает, например, возможность раскрасить метку или передать более гибкий компонент пользовательского интерфейса, а не просто строку ... Может быть, я что-то упустил?

1 Ответ

0 голосов
/ 12 июня 2018

VSCode выбирает элемент, когда вы нажимаете на него, но я бы хотел прослушать это событие, получить рассматриваемый элемент и т. Д. *

Вы можете использовать TreeItem.command выполнить некоторую команду, когда выбран элемент дерева, а затем зарегистрировать обратный вызов для этой команды.Вот простой пример, который отслеживает метку элемента дерева на консоли: 

'use strict';
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    vscode.window.registerTreeDataProvider("exampleTreeView", new ExampleTreeProvider());
    vscode.commands.registerCommand("exampleTreeView.selectNode", (item:vscode.TreeItem) => {
        console.log(item.label);
    });
}

export class ExampleTreeProvider implements vscode.TreeDataProvider<vscode.TreeItem> {
    getTreeItem(element: vscode.TreeItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
        return element;
    }

    getChildren(element?: vscode.TreeItem): vscode.ProviderResult<vscode.TreeItem[]> {
        if (element == null) {
            var item = new vscode.TreeItem("Foo");
            item.command = {
                command: "exampleTreeView.selectNode",
                title: "Select Node",
                arguments: [item]
            };
            return [item];
        }
        return null;
    }
}

"contributes": {
    "views": {
        "explorer": [
            {
                "id": "exampleTreeView",
                "name": "Example Tree View"
            }
        ]
    }
},

command может быть любой произвольной строкой, но мне нравится «охватывать» ее, добавляя префикс представленияЯ БЫ.Очень важно передать сам элемент через arguments, если вы хотите получить доступ к любому из его свойств в обратном вызове.

В общем, настройка TreeItem крайне отсутствует, например, возможность раскрасить меткуили передать более гибкий компонент пользовательского интерфейса вместо строки ...

Звучит как точная оценка, API в некотором смысле немного ограничивает.Если вам нужна большая свобода, недавно представленный Webview API может быть хорошей альтернативой.Обратите внимание, что это будет означать реализацию собственного представления дерева с нуля с использованием HTML / CSS / JS.

...