a_pianoroll.js in atome-0.5.7.6.5

- old
+ new

@@ -1,14 +1,32 @@
 customElements.define("webaudio-pianoroll", class Pianoroll extends HTMLElement {
     constructor() {
         super();
         this.noteIdCounter = 0;
         this.editing = true
-        this.refuse = false
         this.tool = 'create'
     }
 
+    clearSequence() {
+        this.removeAllMarkers()
+        this.sequence = [];
+        this.redraw();
+        console.log("Sequence cleared and view refreshed.");
+    }
+
+    setSequence(newSequence) {
+        if (Array.isArray(newSequence)) {
+            this.sequence = newSequence;
+            this.noteIdCounter = newSequence.length > 0 ? Math.max(...newSequence.map(note => note.id)) + 1 : 0;
+            this.sortSequence();
+            this.redraw();
+            console.log("Sequence replaced and view refreshed.");
+        } else {
+            console.error("Invalid sequence format. Please provide an array.");
+        }
+    }
+
     defineprop() {
         const plist = this.module.properties;
         for (let k in plist) {
             const v = plist[k];
             this["_" + k] = this.getAttr(k, v.value);
@@ -100,10 +118,22 @@
         };
 
         this.sequence.push(ev);
     }
 
+    removeAllMarkers() {
+        // Itérer sur this.sequence pour trouver tous les événements de type 'marker'
+        const markers = this.sequence.filter(ev => ev.type === 'marker');
+
+        // Appeler removeMarker(id) pour chaque marker trouvé
+        markers.forEach(marker => {
+            this.removeMarker(marker.id);
+        });
+
+        console.log(`${markers.length} markers removed from sequence.`);
+    }
+
     removeMarker(id) {
         const playhead = document.getElementById(id);
         if (playhead) {
             playhead.parentElement.removeChild(playhead);
             console.log(`Playhead with ID: ${id} has been removed.`);
@@ -726,11 +756,10 @@
             for (let i = l - 1; i >= 0; --i) {
                 const ev = this.sequence[i];
                 if (ev.f)
                     this.sequence.splice(i, 1);
             }
-            this.refuse = true // to prevent any new note creation when clicking to delete
         };
         this.moveSelectedNote = function (dt, dn) {
             console.log('moving note')
             const l = this.sequence.length;
             for (let i = 0; i < l; ++i) {
@@ -790,12 +819,11 @@
                 console.log('2 note start changed:');
 
                 this.dragging = {o: "D", m: "B", i: ht.i, t: ev.t, g: ev.g, ev: this.selectedNotes()};
             } else if (ht.m == "s" && ht.t >= 0) {
                 this.clearSel();
-
-                if (this.editing === true && !this.refuse) {
+                if (this.editing === true || this.tool === !'select') {
                     var t = ((ht.t / this.snap) | 0) * this.snap;
                     const id = this.noteIdCounter++;
                     console.log('visual note creation  : ' + id);
                     var details = {in: 0, out: 0, group: {}};
 
@@ -829,11 +857,10 @@
                         i: this.sequence.length - 1,
                         t: t,
                         g: 1,
                         ev: [{t: t, g: 1, ev: this.sequence[this.sequence.length - 1]}]
                     };
-                    this.refuse = false;
                 } else {
                     switch (this.downht.m) {
                         case "N":
                         case "B":
                         case "E":
@@ -848,12 +875,10 @@
                                     p: this.downpos,
                                     p2: this.downpos,
                                     t1: this.downht.t,
                                     n1: this.downht.n
                                 };
-                            this.refuse = false
-                            console.log('===> accept/refuse' + this.refuse)
                             break;
                     }
                     this.canvas.focus();
                     return false;
                 }
@@ -1003,10 +1028,45 @@
             this.dragging = {o: null};
             this.kbimg.style.height = this.sheight + "px";
             this.kbimg.style.backgroundSize = (this.steph * 12) + "px";
             this.layout();
             this.initialized = 1;
+
+            this.canvas.addEventListener('wheel', function(e) {
+                const scrollSpeedFactor = 10; // Ajoutez cette ligne pour définir le facteur de réduction
+
+                if (!this.lockedDirection) {
+                    const absDeltaY = Math.abs(e.deltaY);
+                    const absDeltaX = Math.abs(e.deltaX);
+
+                    if (absDeltaY > absDeltaX) {
+                        this.lockedDirection = 'vertical';
+                    } else {
+                        this.lockedDirection = 'horizontal';
+                    }
+                }
+
+                if (this.lockedDirection === 'vertical' && e.deltaY !== 0) {
+                    const newYOffset = this.yoffset + e.deltaY / scrollSpeedFactor; // Divisez e.deltaY par le facteur de réduction
+                    this.yoffset = Math.max(0, Math.min(newYOffset, 112));
+                    console.log(`Scroll vertical de ${this.yoffset} pixels`);
+                }
+
+                if (this.lockedDirection === 'horizontal' && e.deltaX !== 0) {
+                    const newXOffset = this.xoffset + e.deltaX / scrollSpeedFactor; // Divisez e.deltaX par le facteur de réduction
+                    this.xoffset = Math.max(0, Math.min(newXOffset, 500000));
+                    console.log(`Scroll horizontal de ${this.xoffset} pixels`);
+                }
+
+                clearTimeout(this.resetScrollTimeout);
+                this.resetScrollTimeout = setTimeout(() => {
+                    this.lockedDirection = null;
+                }, 200);
+
+                e.preventDefault();
+            }.bind(this), { passive: false });
+
             this.redraw();
         };
         this.setupImage = function () {
         };
         this.preventScroll = function (e) {
@@ -1520,13 +1580,13 @@
     }
 }
 
 /// pianoroll builder below
 
-function setTempo(id) {
+function setTempo(id, tempo) {
     let pianoRoll = document.getElementById(id);
-    pianoRoll.tempo = 33;
+    pianoRoll.tempo = tempo;
     pianoRoll.updateTimer();
     console.log('Tempo:', pianoRoll.tempo);
 }
 
 function changeEditMode(id, mode) {
@@ -1636,10 +1696,11 @@
 }
 
 function notes(id) {
     let sequence = document.getElementById(id);
     let notes = sequence.sequence;
+    console.log('note found : '+notes)
     console.log(notes)
 
 }
 
 function selectAll(id) {
@@ -1666,11 +1727,21 @@
 function removeMarker(id) {
     const pianoRoll = document.getElementById(id);
     pianoRoll.removeMarker('playheadID1');
 }
 
-///
+function removeAllMarkers(id) {
+    const pianoRoll = document.getElementById(id);
+    pianoRoll.removeAllMarkers('playheadID1');
+}
 
-function clear_now() {
-    console.clear()
+
+
+function clear_sequence(id) {
+    const pianoRoll = document.getElementById(id);
+    pianoRoll.clearSequence();
 }
 
+function fill_sequence(id, seq) {
+    const pianoRoll = document.getElementById(id);
+    pianoRoll.setSequence(seq);
+}