Load examples from Processing API

Author: Stefterv

client/src/setupSidebar.ts

@@ -1,60 +1,97 @@
+import { exec } from 'child_process';
 import { join } from 'path';
 import { ProviderResult, TreeDataProvider, TreeItem, TreeItemCollapsibleState, window } from 'vscode';
+import { state } from './extension';
+
+
+export interface Sketch {
+	type?: "sketch";
+	name: string;
+	path: string;
+	mode?: string;
+}
+
+export interface Folder {
+	type?: "folder";
+	name: string;
+	path: string;
+	mode?: string;
+	children?: Folder[];
+	sketches?: Sketch[];
+}
 
 
 
 export async function setupSidebar() {
-	const treeDataProvider = new ProcessingWindowDataProvider();
-	window.createTreeView('processingSidebarView', { treeDataProvider });
+	const examples = await new Promise<Folder[]>((resolve) => {
+		exec(`${state.selectedVersion.path} contributions examples list`, (error, stdout, stderr) => {
+			if (error) {
+				console.error(`exec error: ${error}`);
+				return;
+			}
+			console.log(`stdout: ${stdout}`);
+			resolve(JSON.parse(stdout));
+		});
+	});
 
-	{
-		const treeDataProvider = new ProcessingWindowDataProvider();
-		window.createTreeView('processingSidebarView2', { treeDataProvider });
-	}
+	const examplesProvider = new ProcessingWindowDataProvider(examples);
+	window.createTreeView('processingSidebarExamplesView', { treeDataProvider: examplesProvider });
 
 }
 
-class ProcessingTreeItem extends TreeItem {
+class FolderTreeItem extends TreeItem {
 	constructor(
-		public readonly label: string,
-		private version: string,
-		public readonly collapsibleState: TreeItemCollapsibleState,
-		public readonly path = "",
+		public readonly folder: Folder
 	) {
-		super(label, collapsibleState);
-		this.tooltip = `${this.label}-${this.version}`;
+		const label = folder.name;
+		super(label, TreeItemCollapsibleState.Collapsed);
+		this.tooltip = `${this.label}`;
 		this.iconPath = join(__dirname, "..", "..", "media/processing.svg");
 	}
+}
 
-
+class SketchTreeItem extends TreeItem {
+	constructor(
+		public readonly sketch: Sketch
+	) {
+		const label = sketch.name;
+		super(label, TreeItemCollapsibleState.None);
+		this.tooltip = `${this.label}`;
+		this.iconPath = join(__dirname, "..", "..", "media/processing.svg");
+	}
 }
 
 // TODO: Top level items: [examples, sketchbook]
 // TODO: Add examples from libraries
 // TODO: Connect to Processing and request where the sketchbook is located
 
-class ProcessingWindowDataProvider implements TreeDataProvider<ProcessingTreeItem> {
+class ProcessingWindowDataProvider implements TreeDataProvider<FolderTreeItem> {
 	constructor(
-		public readonly path = "",
+		public readonly folders: Folder[],
 	) {
-
 	}
 
-	getTreeItem(element: ProcessingTreeItem): TreeItem | Thenable<TreeItem> {
+	getTreeItem(element: FolderTreeItem): TreeItem | Thenable<TreeItem> {
 		return element;
 	}
-	getChildren(element?: ProcessingTreeItem): ProviderResult<ProcessingTreeItem[]> {
+	getChildren(element?: FolderTreeItem): ProviderResult<(FolderTreeItem | SketchTreeItem)[]> {
 		if (element === undefined) {
-			// return the examples and sketchbook items
-			return [
-				new ProcessingTreeItem('Sketchbook', '3.5.4', TreeItemCollapsibleState.Collapsed),
-				new ProcessingTreeItem('Examples', '3.5.4', TreeItemCollapsibleState.Expanded),
-			];
+			return this.folders.map((folder) => {
+				return new FolderTreeItem(folder);
+			});
 		} else {
-			// Return the 
-			return [
-				new ProcessingTreeItem('Example 1', '3.5.4', TreeItemCollapsibleState.None),
-			];
+			const sketches = element.folder.sketches?.map((sketch) => {
+				return new SketchTreeItem(sketch);
+			}) ?? [];
+			const folders = element.folder.children?.map((folder) => {
+				return new FolderTreeItem(folder);
+			}) ?? [];
+
+			// Sort sketches and folders
+			sketches.sort((a, b) => a.sketch.name.localeCompare(b.sketch.name));
+			folders.sort((a, b) => a.folder.name.localeCompare(b.folder.name));
+
+			return [...sketches, ...folders];
 		}
 	}
 }

client/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/compareversions.ts","./src/extension.ts","./src/setupcommands.ts","./src/setupdecorators.ts","./src/setuplanguageserver.ts","./src/setupselectedversion.ts","./src/setupsidebar.ts"],"version":"5.8.3"}
+{"root":["./src/compareversions.ts","./src/extension.ts","./src/setupcommands.ts","./src/setupdecorators.ts","./src/setuplanguageserver.ts","./src/setupselectedversion.ts","./src/setupsidebar.ts"],"errors":true,"version":"5.8.3"}

package.json

@@ -94,12 +94,12 @@
 		"views": {
 			"processingSidebar": [
 				{
-					"id": "processingSidebarView",
+					"id": "processingSidebarSketchbookView",
 					"name": "Sketchbook",
 					"icon": "media/processing-outline.svg"
 				},
 				{
-					"id": "processingSidebarView2",
+					"id": "processingSidebarExamplesView",
 					"name": "Examples",
 					"icon": "media/processing-outline.svg"
 				}