feat(configureView(new), status, xmake): Add new view (#304)

Cateds · waruqi · web-flow · commit db7eb750faa3 · 2025-07-21T08:14:42.000+08:00
* ✨ feat(configureView(new), status, xmake): Add new view Based on the current status management, a tree display page of project configuration has been added to the Activity Bar section. Since there is no decoupling of Status and StatusBarItem, try to read the information by adding a getter while reflesh when calling the setter to keep the data in sync. #303 * Update xmake.ts --------- Co-authored-by: ruki <waruqi@gmail.com>
diff --git a/package.json b/package.json
@@ -275,8 +275,7 @@
       {
         "command": "xmake.setTargetToolchain",
         "title": "toolchain",
-        "category": "XMake",
-        "enablement": "view == xmakeExplorer"
+        "category": "XMake"
       },
       {
         "command": "xmakeExplorer.rebuild",
@@ -750,6 +749,14 @@
     },
     "views": {
       "xmake-explorer": [
+        {
+          "type": "tree",
+          "id": "xmakeConfigureView",
+          "name": "Configure",
+          "icon": "res/logo-mono.svg",
+          "contextualTitle": "XMake Configure",
+          "when": "xmakeEnabled"
+        },
         {
           "type": "tree",
           "id": "xmakeExplorer",
diff --git a/src/configureView.ts b/src/configureView.ts
@@ -0,0 +1,200 @@
+
+'use strict';
+
+// This file implements the TreeView for XMake configuration in VS Code.
+// It defines the data structure, item types, and data provider for the configuration view.
+
+import * as vscode from 'vscode';
+import { Status } from './status';
+
+
+// Enum for item types in the configuration view: folder or entry
+enum XMakeConfigureViewItemType {
+    FOLDER,
+    ENTRY
+}
+
+
+// Folder item info type
+type XMakeConfigureViewFolderInfo = {
+    type: XMakeConfigureViewItemType.FOLDER;
+    name: string;
+}
+
+
+// Entry item info type (leaf node)
+type XMakeConfigureViewEntryInfo = {
+    type: XMakeConfigureViewItemType.ENTRY;
+    name: string;
+    value: string;
+}
+
+
+// Map entry names to their corresponding command and title
+const XMakeCommandMap: Record<string, { command: string, title: string }> = {
+    "Name": { command: "setProjectRoot", title: "Change Project Name" },
+    "Platform": { command: "setTargetPlat", title: "Change Platform" },
+    "Architecture": { command: "setTargetArch", title: "Change Architecture" },
+    "Toolchain": { command: "setTargetToolchain", title: "Change Toolchain" },
+    "Mode": { command: "setBuildMode", title: "Change Mode" },
+    "Target": { command: "setDefaultTarget", title: "Change Target" }
+};
+
+
+// TreeItem for the XMake configuration view
+class XMakeConfigureViewItem extends vscode.TreeItem {
+    info: XMakeConfigureViewFolderInfo | XMakeConfigureViewEntryInfo;
+
+    /**
+     * Construct a TreeItem for either a folder or an entry.
+     * @param info Folder or entry info
+     */
+    constructor(info: XMakeConfigureViewFolderInfo | XMakeConfigureViewEntryInfo) {
+        let label: string;
+        let collapsibleState: vscode.TreeItemCollapsibleState;
+        let description: string | undefined = undefined;
+
+        if (info.type === XMakeConfigureViewItemType.FOLDER) {
+            label = info.name;
+            collapsibleState = vscode.TreeItemCollapsibleState.Expanded;
+        } else {
+            label = info.name;
+            description = info.value;
+            collapsibleState = vscode.TreeItemCollapsibleState.None;
+        }
+        super(label, collapsibleState);
+        this.info = info;
+        // Assign command for entry items so they are clickable
+        if (info.type === XMakeConfigureViewItemType.ENTRY) {
+            this.command = {
+                command: `xmake.${XMakeCommandMap[info.name].command}`,
+                title: XMakeCommandMap[info.name].title,
+            }
+            // For debug: log command registration
+            console.log(`Command registered: ${this.command.command} with title: ${this.command.title}`);
+        }
+        if (description) {
+            this.description = description;
+        }
+    }
+}
+
+
+// The root structure of the configuration view: folders and their children
+const ROOT_STRUCTURE = [
+    { type: XMakeConfigureViewItemType.FOLDER, name: "Project", children: ["Name"] },
+    { type: XMakeConfigureViewItemType.FOLDER, name: "Configure", children: ["Platform", "Architecture", "Toolchain", "Mode"] },
+    { type: XMakeConfigureViewItemType.FOLDER, name: "Build", children: ["Target"] }
+];
+
+
+// Map entry names to Status property keys
+const XMakeStatusMap: Record<string, string> = {
+    "Name": "project",
+    "Platform": "plat",
+    "Architecture": "arch",
+    "Toolchain": "toolchain",
+    "Mode": "mode",
+    "Target": "target"
+};
+
+
+// Data provider for the XMake configuration TreeView
+class XMakeConfigureViewDataProvider implements vscode.TreeDataProvider<XMakeConfigureViewItem> {
+    private status: Status;
+    private _onDidChangeTreeData:
+        vscode.EventEmitter<XMakeConfigureViewItem | undefined | void> =
+        new vscode.EventEmitter();
+    readonly onDidChangeTreeData:
+        vscode.Event<XMakeConfigureViewItem | undefined | void> =
+        this._onDidChangeTreeData.event;
+
+    /**
+     * Refresh the tree view by firing the change event.
+     */
+    refresh(): void {
+        this._onDidChangeTreeData.fire();
+    }
+
+    /**
+     * @param status The Status instance for current configuration
+     */
+    constructor(status?: Status) {
+        this.status = status;
+    }
+
+    /**
+     * Get the TreeItem for a given element.
+     */
+    getTreeItem(element: XMakeConfigureViewItem): XMakeConfigureViewItem {
+        return element;
+    }
+
+    /**
+     * Get the children for a given element (or root folders if no element).
+     */
+    getChildren(element?: XMakeConfigureViewItem): vscode.ProviderResult<XMakeConfigureViewItem[]> {
+        if (!element) {
+            // Return root folders
+            return ROOT_STRUCTURE.map(folder =>
+                new XMakeConfigureViewItem({
+                    type: XMakeConfigureViewItemType.FOLDER,
+                    name: folder.name
+                })
+            );
+        }
+        if (element.info.type === XMakeConfigureViewItemType.FOLDER) {
+            // Return entries under the folder
+            const folder = ROOT_STRUCTURE.find(f => f.name === element.info.name);
+            if (!folder) return [];
+            return folder.children.map(childName => {
+                let value = "unknown";
+                if (this.status && typeof this.status === 'object') {
+                    const key = XMakeStatusMap[childName];
+                    value = this.status[key] ?? "unknown";
+                }
+                return new XMakeConfigureViewItem({
+                    type: XMakeConfigureViewItemType.ENTRY,
+                    name: childName,
+                    value: value
+                });
+            });
+        }
+        return [];
+    }
+}
+
+
+/**
+ * Controller class for the XMake configuration TreeView.
+ * Handles data provider, refresh, and disposal.
+ */
+export class XMakeConfigureView implements vscode.Disposable {
+    private _dataProvider: XMakeConfigureViewDataProvider;
+    private _treeView: vscode.TreeView<vscode.TreeItem>;
+
+    /**
+     * @param status The Status instance for current configuration
+     */
+    constructor(status: Status) {
+        this._dataProvider = new XMakeConfigureViewDataProvider(status);
+        this._treeView = vscode.window.createTreeView(
+            "xmakeConfigureView",
+            { treeDataProvider: this._dataProvider }
+        )
+    }
+
+    /**
+     * Refresh the configuration view.
+     */
+    refresh(): void {
+        this._dataProvider.refresh();
+    }
+
+    /**
+     * Dispose the tree view and its resources.
+     */
+    dispose() {
+        this._treeView.dispose();
+    }
+}
diff --git a/src/status.ts b/src/status.ts
@@ -2,8 +2,8 @@
 
 // imports
 import * as vscode from 'vscode';
-import {log} from './log';
-import {config} from './config';
+import { log } from './log';
+import { config } from './config';
 
 // the status class
 export class Status implements vscode.Disposable {
@@ -110,33 +110,33 @@ export class Status implements vscode.Disposable {
     public dispose() {
 
         for (const item of [this._projectButton,
-                            this._platButton,
-                            this._archButton,
-                            this._modeButton,
-                            this._buildButton,
-                            this._targetButton,
-                            this._runButton,
-                            this._debugButton,
-                            this._macroRecordButton,
-                            this._macroPlaybackButton,
-                            this._toolChainButton]) {
+        this._platButton,
+        this._archButton,
+        this._modeButton,
+        this._buildButton,
+        this._targetButton,
+        this._runButton,
+        this._debugButton,
+        this._macroRecordButton,
+        this._macroPlaybackButton,
+        this._toolChainButton]) {
             item.dispose();
         }
     }
 
     // update visibility
     private updateVisibility() {
         for (const item of [this._projectButton,
-                            this._platButton,
-                            this._archButton,
-                            this._modeButton,
-                            this._buildButton,
-                            this._targetButton,
-                            this._runButton,
-                            this._debugButton,
-                            this._macroRecordButton,
-                            this._macroPlaybackButton,
-                            this._toolChainButton]) {
+        this._platButton,
+        this._archButton,
+        this._modeButton,
+        this._buildButton,
+        this._targetButton,
+        this._runButton,
+        this._debugButton,
+        this._macroRecordButton,
+        this._macroPlaybackButton,
+        this._toolChainButton]) {
             if (this.visible && !!item.text) {
                 item.show();
             } else {
@@ -161,31 +161,61 @@ export class Status implements vscode.Disposable {
         this._projectButton.text = `XMake: ${value}`;
     }
 
+    // get the project root
+    public get project(): string {
+        return this._projectButton.text.replace('XMake: ', '');
+    }
+
     // set the target platform
     public set plat(value: string) {
         this._platButton.text = value;
     }
 
+    // get the target platform
+    public get plat(): string {
+        return this._platButton.text;
+    }
+
     // set the toolchain
     public set toolchain(value: string) {
         this._toolChainButton.text = value;
     }
 
+    // get the toolchain
+    public get toolchain(): string {
+        return this._toolChainButton.text;
+    }
+
     // set the target architecture
     public set arch(value: string) {
         this._archButton.text = value;
     }
 
+    // get the target architecture
+    public get arch(): string {
+        return this._archButton.text;
+    }
+
     // set the build mode
     public set mode(value: string) {
         this._modeButton.text = value;
     }
 
+    // get the build mode
+    public get mode(): string {
+        return this._modeButton.text;
+    }
+
     // set the default target
     public set target(value: string) {
         this._targetButton.text = value;
     }
 
+    // get the default target
+    public get target(): string {
+        return this._targetButton.text;
+    }
+
     // start to record
     public startRecord() {
         this._macroRecordButton.command = 'xmake.onMacroEnd';
diff --git a/src/xmake.ts b/src/xmake.ts
