more keys

index.html

@@ -34,14 +34,12 @@
       <div class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
         <a class="flex title-font font-medium items-center text-black mb-0">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-black p-2 bg-white rounded-full" viewBox="0 0 24 24">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
-            </svg>
           </svg>
           <span id="universe-viewer" class="ml-4 text-2xl text-white">Topos</span>
         </a>
         <nav class="py-0 flex flex-wrap items-center text-base absolute right-0">
-          <span id="clockviewer" class="mr-6 py-1 bg-white text-black rounded align-center text-normal px-2">Clock</span>
+          <span id="clockviewer" class="font-semibold mr-6 py-1 bg-white text-black rounded align-center text-normal px-2">Clock</span>
           <a id="play-button-1" class="mr-5">
             <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 14 16">
               <path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>

src/AppSettings.ts

@@ -90,8 +90,10 @@ export class AppSettings {
     }
   }
 
-  saveApplicationToLocalStorage(universes: Universes): void{
+  saveApplicationToLocalStorage(universes: Universes, settings: Settings): void{
     this.universes = universes;
+    this.vimMode = settings.vimMode;
+    this.font = settings.font;
     localStorage.setItem('topos', JSON.stringify(this.data))
   }
 }

src/EditorSetup.ts

@@ -104,7 +104,6 @@ export const editorSetup: Extension = (() => [
     keymap.of([
         ...closeBracketsKeymap,
         ...defaultKeymap,
-        ...searchKeymap,
         ...historyKeymap,
         ...foldKeymap,
         ...completionKeymap,

src/TransportNode.js

@@ -1,4 +1,5 @@
 import { evaluate, tryEvaluate, evaluateCommand } from "./Evaluator";
+const zeroPad = (num, places) => String(num).padStart(places, '0')
 
 export class TransportNode extends AudioWorkletNode {
 
@@ -16,7 +17,7 @@ export class TransportNode extends AudioWorkletNode {
         if (message.data === "bang") {
             let info = this.convertTimeToBarsBeats(this.context.currentTime);
             this.app.clock.time_position = { bar: info.bar, beat: info.beat, pulse: info.ppqn }
-            // this.$clock.innerHTML = `${info.bar} / ${info.beat} / ${info.ppqn}`
+            this.$clock.innerHTML = `[${info.bar} | ${info.beat} | ${zeroPad(info.ppqn, '2')}]`
             tryEvaluate( this.app, this.app.global_buffer );
         }
     };

src/main.ts

@@ -37,6 +37,7 @@ export class Editor {
   audioContext: AudioContext
   view: EditorView
   clock: Clock
+  manualPlay: boolean = false
 
   // Transport elements
   play_buttons: HTMLButtonElement[] = [
@@ -93,6 +94,9 @@ export class Editor {
     // CodeMirror Management
     // ================================================================================
 
+
+    this.userPlugins = this.settings.vimMode ? [] : [vim()]
+
     this.editorExtensions = [
       editorSetup, 
       rangeHighlighting(), 
@@ -124,20 +128,30 @@ export class Editor {
     // ================================================================================
 
     document.addEventListener('keydown', (event: KeyboardEvent) => {
+      event.preventDefault();
 
 		  // TAB should do nothing
 		  if (event.key === 'Tab') {
         event.preventDefault();
 		  }
 
+      if (event.ctrlKey && event.key === "s") {
+        event.preventDefault();
+        this.setButtonHighlighting('pause', true)
+        this.clock.pause()
+      }
+      if (event.ctrlKey && event.key === "p") {
+        event.preventDefault();
+        this.setButtonHighlighting('play', true)
+        this.clock.start()
+      }
+
       // Ctrl + Shift + V: Vim Mode
       if ((event.key === 'v' || event.key === 'V') && event.ctrlKey && event.shiftKey) {
         this.settings.vimMode = !this.settings.vimMode
         event.preventDefault();
         this.userPlugins = this.settings.vimMode ? [] : [vim()]
-        this.view.dispatch({
-          effects: dynamicPlugins.reconfigure(this.userPlugins)
-        })
+        this.view.dispatch({ effects: dynamicPlugins.reconfigure(this.userPlugins) })
       }
 
       // Ctrl + Enter or Return: Evaluate the hovered code block
@@ -166,9 +180,19 @@ export class Editor {
       }
 
       // Switch to local files
-      if (event.ctrlKey && event.key === "l") this.changeModeFromInterface('local');
-      if (event.ctrlKey && event.key === "g") this.changeModeFromInterface('global');
-      if (event.ctrlKey && event.key === "i") this.changeModeFromInterface('init');
+      if (event.ctrlKey && event.key === "l") {
+        event.preventDefault();
+        this.changeModeFromInterface('local');
+      }
+      if (event.ctrlKey && event.key === "g") {
+        event.preventDefault();
+        this.changeModeFromInterface('global');
+      }
+      if (event.ctrlKey && event.key === "i") {
+        event.preventDefault();
+        this.changeModeFromInterface('init');
+        this.changeToLocalBuffer(0)
+      }
       [112, 113, 114, 115, 116, 117, 118, 119, 120].forEach((keycode, index) => {
         if (event.keyCode === keycode) {
           event.preventDefault();
@@ -230,6 +254,7 @@ export class Editor {
     this.init_button.addEventListener('click', () => this.changeModeFromInterface('init'))
 
     this.buffer_search.addEventListener('keydown', (event) => {
+      this.changeModeFromInterface('local')
       if (event.key === "Enter") {
         let query = this.buffer_search.value
         if (query.length > 2 && query.length < 20) {
@@ -276,7 +301,6 @@ export class Editor {
       interface_buttons.forEach(button => {
         let svg = button.children[0] as HTMLElement
         if (svg.classList.contains('text-orange-300')) {
-          console.log('Fond de couleur trouvé')
           svg.classList.remove('text-orange-300')
           svg.classList.add('text-white')
         }
@@ -308,6 +332,7 @@ export class Editor {
         }
         this.currentFile.candidate = this.view.state.doc.toString() 
         changeColor(this.init_button)
+        this.changeToLocalBuffer(0)
         this.editor_mode = 'init';
         break;
     }
@@ -316,11 +341,7 @@ export class Editor {
 
 
   setButtonHighlighting(button: 'play' | 'pause' | 'clear', highlight: boolean) {
-    const possible_selectors = [
-      '[id^="play-button-"]',
-      '[id^="pause-button-"]',
-      '[id^="clear-button-"'
-    ]
+    const possible_selectors = [ '[id^="play-button-"]', '[id^="pause-button-"]', '[id^="clear-button-"]', ]
     let selector: number;
     switch (button) {
       case 'play': selector = 0; break;
@@ -505,6 +526,6 @@ window.addEventListener('beforeunload', () => {
   // Iterate over all local files and set the candidate to the committed
   app.currentFile.candidate = app.view.state.doc.toString() 
   app.currentFile.committed = app.view.state.doc.toString()
-  app.settings.saveApplicationToLocalStorage(app.universes)
+  app.settings.saveApplicationToLocalStorage(app.universes, app.settings)
   return null;
 });