fix: wrong page breaks

src/views/editor/AllPages.vue

@@ -34,11 +34,13 @@ onMounted(() => {
 
         // of parent
         const parentBottom: number =
-            firstParent?.getBoundingClientRect().bottom ?? 0;
+            firstParent?.getBoundingClientRect().height ?? 0;
 
         // get page
         const page = Math.ceil(bottom / parentBottom) - 1;
 
+        console.log(page, bottom, parentBottom);
+
         // if page is not in pages
         if (!newPages[page]) {
             // add page

src/views/learn/index.vue

@@ -4,7 +4,7 @@ import ScaleFinder from "./ScaleFinder.vue";
 import ChordProgressions from "./ChordProgressions.vue";
 
 import { useRoute } from "vue-router";
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 
 const route = useRoute();
 
@@ -18,6 +18,35 @@ const activeTab = computed(() => {
     const tab = route.path.split("/").pop() as keyof typeof tabs;
     return tabs[tab];
 });
+
+const onClick = async () => {
+    //const device = await navigator.hid.requestDevice({ filters: [] });
+    let devices = await navigator.hid.getDevices();
+    devices.forEach(async (device) => {
+        console.log("HID: Device", device);
+
+        console.log("HID: Open device", device.collections[0]);
+
+        device.addEventListener("inputreport", (event) => {
+            const { data, device, reportId } = event;
+
+            console.log("HID: Input report", data, device, reportId);
+        });
+        const arrBuffer = new ArrayBuffer(61 - 3);
+        const arr = [0x81, Array(61 - 3).fill(0x00)];
+        const arrBufferView = new Uint8Array(arrBuffer);
+        arrBufferView.set(arr as any);
+        try {
+            await device.open();
+        } catch (error) {
+            console.log("HID: Error opening device", error);
+        }
+        console.log("HID: Device opened", device);
+        device.sendReport(129, arrBufferView);
+        device.sendReport(128, arrBufferView);
+        console.log("HID: Report sent");
+    });
+};
 </script>
 <template>
     <div class="learn">
@@ -42,7 +71,10 @@ const activeTab = computed(() => {
                     v-if="activeTab"
                     :is="activeTab"
                 />
-                <div v-else>Somewhat else</div>
+                <div v-else>
+                    Somewhat else
+                    <button @click="onClick">Click me</button>
+                </div>
             </main>
         </div>
     </div>

src/views/learn/inputListener.ts

@@ -17,6 +17,8 @@ export const activeMidiNotes = ref<ActiveNote>({});
 function onMIDIMessage(evt: Event) {
     const event = evt as MIDIMessageEvent;
 
+    console.log(event.data);
+
     if ([144, 128].includes(event.data[0])) {
         const note = event.data[1];
         const velocity = event.data[2];