From 75703ddf461c50de3f4c296ff276e7873c54f227 Mon Sep 17 00:00:00 2001 From: Jonathan Carter Date: Sun, 8 Mar 2020 11:25:39 -0700 Subject: [PATCH] Adding keybindings --- CHANGELOG.md | 7 ++++++- README.md | 15 +++++++++++++-- package.json | 19 ++++++++++++++++--- src/store/index.ts | 6 +++++- src/tree/index.ts | 38 +++++++++++++++++++++----------------- src/tree/nodes.ts | 11 +++++++++++ 6 files changed, 72 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c3a08e..33b7e91 100644 --- a/CHANGELOG.md +++ b/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 🎉 \ No newline at end of file +- Initial release 🎉 diff --git a/README.md b/README.md index c02261a..170a9ca 100644 --- a/README.md +++ b/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. @@ -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. +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. + + + 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 diff --git a/package.json b/package.json index b37da5a..50debe5 100644 --- a/package.json +++ b/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": { diff --git a/src/store/index.ts b/src/store/index.ts index 94e6bd5..90e2bc5 100644 --- a/src/store/index.ts +++ b/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) + ); } }); diff --git a/src/tree/index.ts b/src/tree/index.ts index 010668c..b6b853f 100644 --- a/src/tree/index.ts +++ b/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, Disposable { private _disposables: Disposable[] = []; @@ -38,24 +38,28 @@ class CodeTourTreeProvider implements TreeDataProvider, Disposable { async getChildren(element?: TreeItem): Promise { 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")]; diff --git a/src/tree/nodes.ts b/src/tree/nodes.ts index 5bfbafb..cf0802e 100644 --- a/src/tree/nodes.ts +++ b/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" + }; + } +}