prevent shortcut use during user input

argarak · Dec 21, 2023 · 8e9f311 · 8e9f311
1 parent 3e037d4
commit 8e9f311
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 29 deletions.
diff --git a/components/app.js b/components/app.js
@@ -9,12 +9,12 @@ import * as Tone from "tone";
 import State from "/state.js";
 
 import Patch from "/patch.js";
-import keyHandler from "/keys.js";
 
 import * as basicPatch from "/objects/patches/basic.json";
 import * as basicSynthPatch from "/objects/patches/basic-synth.json";
 import localforage from "localforage";
 import SaveManager from "../save-manager";
+import KeyHandler, { onInputBlur, onInputFocus } from "../keys";
 
 class App extends LitElement {
     sequencer = createRef();
@@ -68,6 +68,7 @@ class App extends LitElement {
             if (!e.detail) return;
             if (e.detail.property === "projectName") {
                 this.projectName = e.detail.value;
+                document.title = `${this.projectName} | blipgrid`;
             }
         });
 
@@ -97,9 +98,13 @@ class App extends LitElement {
                     Upload
                 </button>
                 </hr>
+                <button @click=${this._onProjectClick}>
+                    <span class="material-icons">settings_applications</span>
+                    Project Settings
+                </button>
                 <button @click=${this._onWelcomeClick}>
                     <span class="material-icons">web_asset</span>
-                    Show Welcome Screen
+                    Welcome Screen
                 </button>
             </div>
        `;
@@ -110,7 +115,7 @@ class App extends LitElement {
                     <div class="headLeft">
                         <div class="dropdown" aria-haspopup="true">
                             <div class="droplabel" tabindex="0">
-                                File
+                                Action
                                 <span class="material-icons"
                                     >arrow_drop_down</span
                                 >
@@ -127,6 +132,8 @@ class App extends LitElement {
                             value="120"
                             size="3"
                             @input=${this._onBpmInput}
+                            @focus=${onInputFocus}
+                            @blur=${onInputBlur}
                         />
                         <label for="bpm">bpm</label>
                     </div>
@@ -190,6 +197,7 @@ class App extends LitElement {
         const mixer = State.mixer();
 
         this.displayWelcome();
+        KeyHandler.start();
 
         localforage.getItem("theme").then((value) => {
             State.setTheme(value);
@@ -237,7 +245,7 @@ class App extends LitElement {
 
         // FIXME currently the keys "roll", as is default OS behaviour
         // not sure whether we should deal with it somehow
-        keyHandler.registerKey("a", [], () => {
+        KeyHandler.registerKey("a", [], () => {
             let modules = this.sequencer.value.getCurrentTrack().patch.modules;
             let time = Tone.now();
             setFrequency(modules, Tone.Frequency(60, "midi"), time);
@@ -249,17 +257,17 @@ class App extends LitElement {
             trackIndex <= this.sequencer.value.numTracks;
             trackIndex++
         ) {
-            keyHandler.registerKey(`Digit${trackIndex}`, ["shift"], () => {
+            KeyHandler.registerKey(`Digit${trackIndex}`, ["shift"], () => {
                 console.debug(`muting channel ${trackIndex - 1}`);
                 mixer.toggleMute(trackIndex - 1);
             });
 
-            keyHandler.registerKey(`Digit${trackIndex}`, ["ctrl"], () => {
+            KeyHandler.registerKey(`Digit${trackIndex}`, ["ctrl"], () => {
                 console.debug(`soloing channel ${trackIndex - 1}`);
                 mixer.toggleSolo(trackIndex - 1);
             });
 
-            keyHandler.registerKey(`Digit${trackIndex}`, [], () => {
+            KeyHandler.registerKey(`Digit${trackIndex}`, [], () => {
                 console.debug(`switching to track ${trackIndex - 1}`);
                 this.sequencer.value.switchTrack(trackIndex - 1);
             });
@@ -296,6 +304,7 @@ class App extends LitElement {
     constructor() {
         super();
         this.projectName = SaveManager.projectName;
+        document.title = `${this.projectName} | blipgrid`;
     }
 }
 

diff --git a/components/project-settings-dialog.js b/components/project-settings-dialog.js
@@ -9,6 +9,8 @@ import State from "/state";
 import SaveManager from "/save-manager";
 import localforage from "localforage";
 
+import { onInputBlur, onInputFocus } from "../keys";
+
 class ProjectSettingsDialog extends LitElement {
     dialog = createRef();
 
@@ -78,6 +80,8 @@ class ProjectSettingsDialog extends LitElement {
                         type="text"
                         .value="${this.projectName}"
                         @input=${this._onNameInput}
+                        @focus=${onInputFocus}
+                        @blur=${onInputBlur}
                     />
                 </div>
 
@@ -88,6 +92,8 @@ class ProjectSettingsDialog extends LitElement {
                         type="text"
                         .value="${this.author}"
                         @input=${this._onAuthorInput}
+                        @focus=${onInputFocus}
+                        @blur=${onInputBlur}
                     />
                 </div>
 
@@ -100,6 +106,8 @@ class ProjectSettingsDialog extends LitElement {
                         rows="10"
                         .value=${this.description}
                         @input=${this._onDescriptionInput}
+                        @focus=${onInputFocus}
+                        @blur=${onInputBlur}
                     ></textarea>
                 </div>
 

diff --git a/components/sequencer.js b/components/sequencer.js
@@ -7,6 +7,7 @@ import defaultAlgorithms from "../sequence-algorithms.js";
 import util from "../util.js";
 
 import Patch from "../patch.js";
+import { onInputBlur, onInputFocus } from "../keys";
 
 /**
  * sequencer web component
@@ -107,6 +108,8 @@ class Sequencer extends LitElement {
                     .value="${length}"
                     size="2"
                     @input="${this._onStepsInput}"
+                    @focus=${onInputFocus}
+                    @blur=${onInputBlur}
                 />
                 <label for="seqSteps">steps</label>
             </div>

diff --git a/keys.js b/keys.js
@@ -1,30 +1,35 @@
-class KeyHandler {
-    constructor() {
-        this.registeredKeys = [];
-        this.paused = false;
-        document.addEventListener("keydown", e => {
+export default class KeyHandler {
+    static registeredKeys = [];
+    static paused = false;
+
+    static start() {
+        document.addEventListener("keydown", (e) => {
             this.handleKeyDown(e);
         });
     }
 
-    pause() {
+    static pause() {
+        console.debug("pausing key handler");
         this.paused = true;
     }
 
-    resume() {
+    static resume() {
+        console.debug("resuming key handler");
         this.paused = false;
     }
 
-    handleKeyDown(e) {
-        console.debug(e);
-        if (this.target !== document.body && this.paused) return;
+    static handleKeyDown(e) {
+        console.debug(e.target, this.paused);
+        if (e.target !== document.body && this.paused) return;
         let keyCombinations = this.registeredKeys.filter(
-            kp => kp.key === e.code
+            (kp) => kp.key === e.code,
         );
         for (let combination of keyCombinations) {
             let mod = 0;
-            if (combination.mod.includes("shift")) mod = e.shiftKey ? mod + 1 : mod;
-            if (combination.mod.includes("ctrl")) mod = e.ctrlKey ? mod + 1 : mod;
+            if (combination.mod.includes("shift"))
+                mod = e.shiftKey ? mod + 1 : mod;
+            if (combination.mod.includes("ctrl"))
+                mod = e.ctrlKey ? mod + 1 : mod;
             if (combination.mod.includes("alt")) mod = e.altKey ? mod + 1 : mod;
             console.debug(combination, mod);
             e.preventDefault();
@@ -35,14 +40,19 @@ class KeyHandler {
         }
     }
 
-    registerKey(key, mod, fn) {
+    static registerKey(key, mod, fn) {
         this.registeredKeys.push({
-            "key": key,
-            "mod": mod,
-            "fn": fn
+            key: key,
+            mod: mod,
+            fn: fn,
         });
     }
 }
 
-let keyHandler = new KeyHandler();
-export default keyHandler;
+export const onInputFocus = () => {
+    KeyHandler.pause();
+};
+
+export const onInputBlur = () => {
+    KeyHandler.resume();
+};
diff --git a/patch.js b/patch.js
@@ -46,6 +46,7 @@ class Patch {
             }
 
             module = new modulesTable[moduleObject.type]();
+            module.id = moduleObject.type + "_" + moduleObject.id;
 
             if (moduleObject.independent) module.independent = true;
 
@@ -102,14 +103,15 @@ class Patch {
         const state = {};
 
         for (let module of this.modules) {
+            if (!module.id) continue;
             let moduleName = module.name;
-            state[moduleName] = {};
+            state[module.id] = {};
 
             let controls =
                 moduleName in moduleControls ? moduleControls[moduleName] : [];
 
             for (let control of controls) {
-                state[moduleName][control.property] = this.getControlValue(
+                state[module.id][control.property] = this.getControlValue(
                     module,
                     control,
                 );
@@ -122,7 +124,7 @@ class Patch {
     loadControlState(state) {
         for (let module of this.modules) {
             let moduleName = module.name;
-            let controlValues = state[moduleName];
+            let controlValues = state[module.id];
 
             let controls =
                 moduleName in moduleControls ? moduleControls[moduleName] : [];