Adding keybindings

CHANGELOG.md

@@ -1,3 +1,8 @@
+## v0.0.2 (03/07/202)
+
+- Added keyboard shortcuts for navigating an active code tour
+- Changed the `Code Tours` view to always display, even if the current workspace doesn't have any tours. That way, there's a simple entry point for recording new tours
+
 ## v0.0.1 (03/07/202)
 
-- Initial release 🎉
+- Initial release 🎉

README.md

@@ -27,7 +27,7 @@ Once you've started a tour, the comment UI will guide you, and includes navigati
 - `Next` - Navigate to the next step in the current tour
 - `End Tour` - End the current tour and remove the comment UI
 
-When you're actively in a code tour, the status bar will also display the title and current step of the tour. If you navigate away from the active tour step, you can click on the status bar item and resume the tour at any time.
+Additionally, you can use the `ctrl+right` / `ctrl+left` (Windows/Linux) and `cmd+right` / `cmd+left` (macOS) keyboard shortcuts to move forwards and backwards in the tour. When you're actively in a code tour, the status bar will also display the title and current step of the tour. If you navigate away from the active tour step, you can click on the status bar item and resume the tour at any time.
 
 <img width="500px" src="https://user-images.githubusercontent.com/116461/76151723-ca00b580-606c-11ea-9bd5-81c1d9352cef.png" />
 
@@ -35,10 +35,14 @@ When you're actively in a code tour, the status bar will also display the title
 
 If you'd like to create a code tour for your codebase, you can simply click the `+` button in the `Code Tours` tree view and/or run the `Code Tour: Record Tour` command. This will start the "tour recorder", which allows you to begin opening files, clicking the "comment bar" for the line you want to annotate, and then adding the respective description (including markdown!). Add as many steps as you want, and then when done, click the save icon in the comment UI to write the tour to the current project.
 
-While you're recording, the `Code Tours` [tree view](#tree-view) will display the currently recorded tour, and it's current set of steps. You can tell which tour is being recorded because it will have a microphone icon to the left of its name. 
+While you're recording, the `Code Tours` [tree view](#tree-view) will display the currently recorded tour, and it's current set of steps. You can tell which tour is being recorded because it will have a microphone icon to the left of its name.
 
 <img width="800px" src="https://user-images.githubusercontent.com/116461/76165260-c6c00500-6112-11ea-9cda-0a6cb9b72e8f.gif" />
 
+If you need to edit or delete a step while recording, click the `...` menu next to the step's description, and select the appropriate action.
+
+<img width="500px" src="https://user-images.githubusercontent.com/116461/76168548-1f50cb80-612e-11ea-9aca-8598b9e1c730.png" />
+
 Behind the scenes, the tour will be written as a JSON file to the `.vscode/tours` directory of the current workspace. This file is pretty simple and can be hand-edited if you'd like. Additionally, you can manually create tour files, by following the [tour schema](#tour-schema). You can then store these files to the `.vscode/tours` directory, or you can also create a tour at any of the following locations:
 
 - `codetour.json`
@@ -89,3 +93,10 @@ In addition to the `Code Tours` tree view and the status bar item, the Code Tour
 - `Code Tour: Refresh Tours` - Refreshes the `Code Tours` view, which can be handy if you'd created/modified/deleted tour files on disk.
 
 - `Code Tour: Resume Current Tour` - Resumse the current tour by navigating to the file/line number that's associated with the current step.
+
+## Keybdings
+
+In addition to the available commands, the Code Tour extension also contributes the following commands, which are active while you're currently taking a tour:
+
+- `ctrl+right` (Windows/Linux), `cmd+right` (macOS) - Move to the next step in the tour
+- `ctrl+left` (Windows/Linux) `cmd+left` (macOS) - Move to the previous step in the tour

package.json

@@ -3,7 +3,7 @@
   "displayName": "Code Tour",
   "description": "VS Code extension that allows you to record and playback guided tours of codebases, directly within the editor",
   "publisher": "vsls-contrib",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/vsls-contrib/code-tour"
@@ -202,8 +202,7 @@
       "explorer": [
         {
           "id": "codetour.tours",
-          "name": "Code Tours",
-          "when": "codetour:hasTours"
+          "name": "Code Tours"
         }
       ]
     },
@@ -212,6 +211,20 @@
         "fileMatch": "(code)?tour.json",
         "url": "https://cdn.jsdelivr.net/gh/vsls-contrib/code-tour/schema.json"
       }
+    ],
+    "keybindings": [
+      {
+        "command": "codetour.previousTourStep",
+        "when": "codetour:inTour && !textInputFocus && !terminalFocus",
+        "key": "ctrl+left",
+        "mac": "cmd+left"
+      },
+      {
+        "command": "codetour.nextTourStep",
+        "when": "codetour:inTour && !textInputFocus && !terminalFocus",
+        "key": "ctrl+right",
+        "mac": "cmd+right"
+      }
     ]
   },
   "dependencies": {

src/store/index.ts

@@ -29,6 +29,10 @@ export const store: Store = observable({
   currentStep: 0,
   isRecording: false,
   get hasTours() {
-    return !!this.mainTour || this.subTours.length > 0;
+    return (
+      !!this.mainTour ||
+      this.subTours.length > 0 ||
+      (this.isRecording && this.currentTour)
+    );
   }
 });

src/tree/index.ts

@@ -8,7 +8,7 @@ import {
   window
 } from "vscode";
 import { store } from "../store";
-import { CodeTourNode, CodeTourStepNode } from "./nodes";
+import { CodeTourNode, CodeTourStepNode, RecordTourNode } from "./nodes";
 
 class CodeTourTreeProvider implements TreeDataProvider<TreeItem>, Disposable {
   private _disposables: Disposable[] = [];
@@ -38,24 +38,28 @@ class CodeTourTreeProvider implements TreeDataProvider<TreeItem>, Disposable {
 
   async getChildren(element?: TreeItem): Promise<TreeItem[] | undefined> {
     if (!element) {
-      const tours = store.subTours.map(
-        tour => new CodeTourNode(tour, this.extensionPath, false)
-      );
-      if (store.mainTour) {
-        tours.unshift(
-          new CodeTourNode(store.mainTour, this.extensionPath, false)
+      if (!store.hasTours) {
+        return [new RecordTourNode()];
+      } else {
+        const tours = store.subTours.map(
+          tour => new CodeTourNode(tour, this.extensionPath, false)
         );
+        if (store.mainTour) {
+          tours.unshift(
+            new CodeTourNode(store.mainTour, this.extensionPath, false)
+          );
+        }
+        if (
+          store.isRecording &&
+          store.currentTour &&
+          !tours.find(tour => tour.tour.title === store.currentTour!.title)
+        ) {
+          tours.unshift(
+            new CodeTourNode(store.currentTour!, this.extensionPath, true)
+          );
+        }
+        return tours;
       }
-      if (
-        store.isRecording &&
-        store.currentTour &&
-        !tours.find(tour => tour.tour.title === store.currentTour!.title)
-      ) {
-        tours.unshift(
-          new CodeTourNode(store.currentTour!, this.extensionPath, true)
-        );
-      }
-      return tours;
     } else if (element instanceof CodeTourNode) {
       if (element.tour.steps.length === 0) {
         return [new TreeItem("No steps recorded yet")];

src/tree/nodes.ts

@@ -61,3 +61,14 @@ export class CodeTourStepNode extends TreeItem {
     this.iconPath = ThemeIcon.File;
   }
 }
+
+export class RecordTourNode extends TreeItem {
+  constructor() {
+    super("Record new tour...");
+
+    this.command = {
+      command: `${EXTENSION_NAME}.recordTour`,
+      title: "Record Tour"
+    };
+  }
+}