From b872a29fbb959d5fd84783bdff5f752f37aa6b54 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Sun, 2 Aug 2020 19:13:14 -0700 Subject: [PATCH] Add keyboard shortcuts (#7) This adds Ctrl + F (focus on search bar) and Shift + + (add new node) keyboard shortcuts. --- README.md | 8 ++++++++ loom-editor/package-lock.json | 13 +++++++++++++ loom-editor/package.json | 1 + loom-editor/src/components/App.tsx | 19 +++++++++++++------ .../src/components/NodeSearch/SearchBox.tsx | 4 ++++ loom-extension/README.md | 8 ++++++++ 6 files changed, 47 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d5c74d8..86bfd0a 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ Yarn Loom is a Visual Studio Code extension for editing [yarn files](https://yar - [Quick tag search](#quick-tag-search) - [Switching between the graph editor and a text editor](#switching-between-the-graph-editor-and-a-text-editor) - [Theme support](#theme-support) + - [Keyboard Shortcuts](#keyboard-shortcuts) - [Special Thanks](#special-thanks) ## Installing @@ -171,6 +172,13 @@ If there is a theme where something doesn't look right or is unreadable, please Demo of switching themes in Visual Studio Code +## Keyboard Shortcuts + +| Shortcut | Description | +| ------------------------------- | ------------------- | +| Ctrl + F | Focus on search bar | +| Shift + + | Add new node | + ## Special Thanks The syntax highlighting portion of this extension was copied over from the [Yarn VSCode Extension](https://github.com/YarnSpinnerTool/VSCodeExtension) and all credit for it goes to [@desplesda](https://github.com/desplesda). diff --git a/loom-editor/package-lock.json b/loom-editor/package-lock.json index d5ea508..3c450fc 100644 --- a/loom-editor/package-lock.json +++ b/loom-editor/package-lock.json @@ -6455,6 +6455,11 @@ "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==" }, + "hotkeys-js": { + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.1.tgz", + "integrity": "sha512-YlhVQtyG9f1b7GhtzdhR0Pl+cImD1ZrKI6zYUa7QLd0zuThiL7RzZ+ANJyy7z+kmcCpNYBf5PjBa3CjiQ5PFpw==" + }, "hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -10785,6 +10790,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz", "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==" }, + "react-hotkeys-hook": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-2.2.2.tgz", + "integrity": "sha512-5XBGCSleJZ7AzQ+wCoFeJj/myByIzqgR3D97xRNEQsGOsFvXLp4V8rbDbHceTqGq7WDjQmX96zegViz8U5CwMQ==", + "requires": { + "hotkeys-js": "3.8.1" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/loom-editor/package.json b/loom-editor/package.json index b3c0b6c..2aec60e 100644 --- a/loom-editor/package.json +++ b/loom-editor/package.json @@ -7,6 +7,7 @@ "d3": "^5.16.0", "loom-common": "file:../loom-common/out", "react-d3-graph": "^2.5.0", + "react-hotkeys-hook": "^2.2.2", "react-scripts": "3.4.1", "typesafe-actions": "^5.1.0" }, diff --git a/loom-editor/src/components/App.tsx b/loom-editor/src/components/App.tsx index 4fe063f..e96b401 100644 --- a/loom-editor/src/components/App.tsx +++ b/loom-editor/src/components/App.tsx @@ -1,21 +1,28 @@ /** @jsx jsx */ import { jsx, css } from "@emotion/core"; import { FunctionComponent } from "react"; +import { useHotkeys } from "react-hotkeys-hook"; import "./App.css"; import NodeGraph from "./NodeGraph"; import NodeSearch from "./NodeSearch"; +import { createNewNode } from "loom-common/EditorActions"; const appStyle = css` width: 100%; height: 100%; `; -const App: FunctionComponent = () => ( -
- - -
-); +const App: FunctionComponent = () => { + // shift and plus key add a new node (note that = is used since shift modifies it to be plus) + useHotkeys("shift+=", () => window.vsCodeApi.postMessage(createNewNode())); + + return ( +
+ + +
+ ); +}; export default App; diff --git a/loom-editor/src/components/NodeSearch/SearchBox.tsx b/loom-editor/src/components/NodeSearch/SearchBox.tsx index c03ad55..0538b19 100644 --- a/loom-editor/src/components/NodeSearch/SearchBox.tsx +++ b/loom-editor/src/components/NodeSearch/SearchBox.tsx @@ -1,6 +1,7 @@ /** @jsx jsx */ import { jsx, css } from "@emotion/core"; import { FunctionComponent, useRef } from "react"; +import { useHotkeys } from "react-hotkeys-hook"; import { ReactComponent as CaseSensitiveIcon } from "../../icons/case-sensitive.svg"; import { ReactComponent as RegExIcon } from "../../icons/regex.svg"; @@ -106,6 +107,9 @@ const SearchBox: FunctionComponent = () => { // used to focus back on the input when clicking buttons in this box const inputRef = useRef(null); + // ctrl+f focuses on the input box + useHotkeys("ctrl+f", () => inputRef.current?.focus()); + if (!state) { return null; } diff --git a/loom-extension/README.md b/loom-extension/README.md index fddd0c6..6f22f38 100644 --- a/loom-extension/README.md +++ b/loom-extension/README.md @@ -23,6 +23,7 @@ Yarn Loom is a Visual Studio Code extension for editing [yarn files](https://yar - [Quick tag search](#quick-tag-search) - [Switching between the graph editor and a text editor](#switching-between-the-graph-editor-and-a-text-editor) - [Theme support](#theme-support) + - [Keyboard Shortcuts](#keyboard-shortcuts) - [Special Thanks](#special-thanks) ## Usage @@ -162,6 +163,13 @@ If there is a theme where something doesn't look right or is unreadable, please Demo of switching themes in Visual Studio Code +## Keyboard Shortcuts + +| Shortcut | Description | +| ------------------------------- | ------------------- | +| Ctrl + F | Focus on search bar | +| Shift + + | Add new node | + ## Special Thanks The syntax highlighting portion of this extension was copied over from the [Yarn VSCode Extension](https://github.com/YarnSpinnerTool/VSCodeExtension) and all credit for it goes to [@desplesda](https://github.com/desplesda).