atome 0.5.7.5.9 → 0.5.7.6.0

data/vendor/assets/src/js/third_parties/a_pianoroll.js

@@ -0,0 +1,1676 @@
+customElements.define("webaudio-pianoroll", class Pianoroll extends HTMLElement {
+    constructor() {
+        super();
+        this.noteIdCounter = 0;
+        this.editing = true
+        this.refuse = false
+        this.tool = 'create'
+    }
+
+    defineprop() {
+        const plist = this.module.properties;
+        for (let k in plist) {
+            const v = plist[k];
+            this["_" + k] = this.getAttr(k, v.value);
+            Object.defineProperty(this, k, {
+                get: () => {
+                    return this["_" + k]
+                },
+                set: (val) => {
+                    this["_" + k] = val;
+                    if (typeof (this[v.observer]) == "function")
+                        this[v.observer]();
+                }
+            });
+        }
+    }
+
+
+    marker(position, id, label) {
+        const playhead = document.createElement("div");
+        playhead.className = "marker";
+        playhead.style.position = "absolute";
+        playhead.style.left = `${(position - this.xoffset) * this.stepw + this.yruler + this.kbwidth}px`;
+
+        // Ajout de l'id et du label comme contenu de la div
+        playhead.id = id;
+        playhead.dataset.id = id;
+        playhead.dataset.label = label;
+        playhead.textContent = label;
+
+        // Création du trait rouge
+        const locator = document.createElement("div");
+        locator.style.position = "absolute";
+        locator.style.width = "2px"; // Épaisseur du trait
+        locator.style.height = "100%"; // S'étend sur toute la hauteur du conteneur
+        locator.style.backgroundColor = "red";
+        locator.style.left = '0px'; // Positionner au centre du playhead
+        locator.style.top = '0px';
+        locator.style.transform = "translateX(-50%)"; // Centrer précisément le trait
+
+        playhead.appendChild(locator);
+
+        playhead.addEventListener('click', () => {
+            console.log(`Playhead ID: ${id}`);
+        });
+
+        playhead.addEventListener('mousedown', (e) => {
+            const initialX = e.clientX;
+            const initialLeft = parseInt(playhead.style.left, 10);
+
+            const onMouseMove = (e) => {
+                const deltaX = e.clientX - initialX;
+                let newLeft = initialLeft + deltaX;
+
+                let newPosition = (newLeft - this.yruler - this.kbwidth) / this.stepw + this.xoffset;
+
+                newPosition = Math.round(newPosition / this.snap) * this.snap;
+
+                newLeft = (newPosition - this.xoffset) * this.stepw + this.yruler + this.kbwidth;
+                playhead.style.left = `${newLeft}px`;
+
+                console.log(`Playhead ${id} moved to quantized position: ${newPosition}`);
+
+                const markerEvent = this.sequence.find(ev => ev.id === id && ev.type === 'marker');
+                if (markerEvent) {
+                    markerEvent.t = newPosition;
+                    console.log(`Updated event in sequence for marker ID: ${id}, new position: ${newPosition}`);
+                }
+            };
+
+            const onMouseUp = () => {
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+            };
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        });
+
+        this.canvas.parentElement.appendChild(playhead);
+        const ev = {
+            id: id,
+            t: position,
+            n: 0,  // makers have no note info
+            g: 0,  // makers have no length
+            f: 0,  // not selected
+            type: 'marker',
+            details: {label: label, element: playhead},
+            textureApplied: false
+        };
+
+        this.sequence.push(ev);
+    }
+
+    removeMarker(id) {
+        const playhead = document.getElementById(id);
+        if (playhead) {
+            playhead.parentElement.removeChild(playhead);
+            console.log(`Playhead with ID: ${id} has been removed.`);
+        } else {
+            console.log(`Playhead with ID: ${id} does not exist.`);
+        }
+        const eventIndex = this.sequence.findIndex(ev => ev.id === id && ev.type === 'marker');
+        if (eventIndex !== -1) {
+            this.sequence.splice(eventIndex, 1);
+            console.log(`Event associated with marker ID: ${id} has been removed from the sequence.`);
+        } else {
+            console.log(`No event found in the sequence for marker ID: ${id}.`);
+        }
+    }
+
+    connectedCallback() {
+        let root;
+        root = this;
+        this.module = {
+            is: "webaudio-pianoroll",
+            properties: {
+                lowestnote: {type: Number, value: 33, observer: 'layout'},
+                highestnote: {type: Number, value: 39, observer: 'layout'},
+                width: {type: Number, value: 640, observer: 'layout'},
+                height: {type: Number, value: 320, observer: 'layout'},
+                timebase: {type: Number, value: 16, observer: 'layout'},
+                editmode: {type: String, value: "dragpoly"},
+                xrange: {type: Number, value: 16, observer: 'layout'},
+                yrange: {type: Number, value: 16, observer: 'layout'},
+                xoffset: {type: Number, value: 0, observer: 'layout'},
+                yoffset: {type: Number, value: 60, observer: 'layout'},
+                grid: {type: Number, value: 4},
+                snap: {type: Number, value: 1},
+                wheelzoom: {type: Number, value: 0},
+                wheelzoomx: {type: Number, value: 0},
+                wheelzoomy: {type: Number, value: 0},
+                xscroll: {type: Number, value: 0},
+                yscroll: {type: Number, value: 0},
+                gridnoteratio: {type: Number, value: 0.5, observer: 'updateTimer'},
+                xruler: {type: Number, value: 24, observer: 'layout'},
+                yruler: {type: Number, value: 24, observer: 'layout'},
+                octadj: {type: Number, value: -1},
+                cursor: {type: Number, value: 0, observer: 'redrawMarker'},
+                markstart: {type: Number, value: 0, observer: 'redrawMarker'},
+                markend: {type: Number, value: 8, observer: 'redrawMarker'},
+                defvelo: {type: Number, value: 100},
+                collt: {type: String, value: "#ccc"},
+                coldk: {type: String, value: "#aaa"},
+                colgrid: {type: String, value: "#666"},
+                colnote: {type: String, value: "#f22"},
+                colnotesel: {type: String, value: "#0f0"},
+                colnoteborder: {type: String, value: "#000"},
+                colnoteselborder: {type: String, value: "#fff"},
+                colrulerbg: {type: String, value: "#666"},
+                colrulerfg: {type: String, value: "#fff"},
+                colrulerborder: {type: String, value: "#000"},
+                colselarea: {type: String, value: "rgba(0,0,0,0.3)"},
+                bgsrc: {type: String, value: null, observer: 'layout'},
+                cursorsrc: {
+                    type: String,
+                    value: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCjxwYXRoIGZpbGw9InJnYmEoMjU1LDEwMCwxMDAsMC44KSIgZD0iTTAsMSAyNCwxMiAwLDIzIHoiLz4NCjwvc3ZnPg0K"
+                },
+                cursoroffset: {type: Number, value: 0},
+                markstartsrc: {
+                    type: String,
+                    value: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCjxwYXRoIGZpbGw9IiMwYzAiIGQ9Ik0wLDEgMjQsMSAwLDIzIHoiLz4NCjwvc3ZnPg0K"
+                },
+                markstartoffset: {type: Number, value: 0},
+                markendsrc: {
+                    type: String,
+                    value: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCjxwYXRoIGZpbGw9IiMwYzAiIGQ9Ik0wLDEgMjQsMSAyNCwyMyB6Ii8+DQo8L3N2Zz4NCg=="
+                },
+                markendoffset: {type: Number, value: -24},
+                kbsrc: {
+                    type: String,
+                    value: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSI0ODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8cGF0aCBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIGQ9Ik0wLDAgaDI0djQ4MGgtMjR6Ii8+CjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0wLDQwIGgxMnY0MGgtMTJ6IE0wLDEyMCBoMTJ2NDBoLTEyeiBNMCwyMDAgaDEydjQwaC0xMnogTTAsMzIwIGgxMnY0MGgtMTJ6IE0wLDQwMCBoMTJ2NDBoLTEyeiIvPgo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIGQ9Ik0wLDYwIGgyNCBNMCwxNDAgaDI0IE0wLDIyMCBoMjQgTTAsMjgwIGgyNCBNMCwzNDAgaDI0IE0wLDQyMCBoMjQiLz4KPC9zdmc+Cg==",
+                    observer: 'layout'
+                },
+                kbwidth: {type: Number, value: 40},
+                loop: {type: Number, value: 0},
+                preload: {type: Number, value: 1.0},
+                tempo: {type: Number, value: 120, observer: 'updateTimer'},
+                enable: {type: Boolean, value: true},
+            },
+        };
+        this.defineprop();
+        root.innerHTML =
+            `<style>
+.pianoroll{
+    background:#ccc;
+}
+:host {
+    user-select: none;
+    display: inline-block;
+    font-family: sans-serif;
+    font-size: 11px;
+    padding:0;
+    margin:0;
+}
+#wac-body {
+    position: relative;
+    margin:0;
+    padding:0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+#wac-pianoroll {
+    cursor: pointer;
+    margin:0;
+    padding:0;
+    width: 100%;
+    height: 100%;
+    background-size:100% calc(100%*12/16);
+    background-position:left bottom;
+}
+#wac-menu {
+    display:none;
+    position:absolute;
+    top:0;
+    left:0;
+    background:#eef;
+    color:#000;
+    padding:2px 10px;
+    border:1px solid #66f;
+    border-radius: 4px;
+    cursor:pointer;
+}
+.marker{
+    position: absolute;
+    left:0;
+    top:0;
+    cursor:ew-resize;
+}
+#wac-kb{
+    position:absolute;
+    left:0;
+    top:0;
+    width:100px;
+    height:100%;
+    background: repeat-y;
+    background-size:100% calc(100%*12/16);
+    background-position:left bottom;
+}
+</style>
+<div class="wac-body" id="wac-body" >
+<canvas id="wac-pianoroll"  tabindex="0"></canvas>
+<div id="wac-kb"></div>
+<img id="wac-markstart" class="marker" src="${this.markstartsrc}" alt=""/>
+<img id="wac-markend" class="marker" src="${this.markendsrc}" alt=""/>
+<img id="wac-cursor" class="marker" src="${this.cursorsrc}" alt=""/>
+<div id="wac-menu">Delete</div>
+</div>`;
+
+        this.sortSequence = function () {
+            this.sequence.sort((x, y) => {
+                return x.t - y.t;
+            });
+        };
+        this.findNextEv = function (tick) {
+            for (let i = 0; i < this.sequence.length; ++i) {
+                const nev = this.sequence[i];
+                if (nev.t >= this.markend)
+                    return {t1: tick, n2: this.markend, dt: this.markend - tick, i: -1};
+                if (nev.t >= tick)
+                    return {t1: tick, t2: nev.t, dt: nev.t - tick, i: i};
+            }
+            return {t1: tick, t2: this.markend, dt: this.markend - tick, i: -1};
+        };
+        this.locate = function (tick) {
+            this.cursor = tick;
+        };
+        this.updateTimer = function () {
+            this.tick2time = 4 * 60 / this.tempo / this.timebase;
+        };
+        this.play = function (playcallback, tick) {
+            if (typeof (tick) != "undefined") {
+                this.locate(tick);
+            }
+            if (this.timer != null) {
+                return;
+            }
+
+            this.playcallback = playcallback;
+            this.timestack = [];
+            this.time0 = this.time1 = performance.now() / 1000 + 0.1;
+            this.tick0 = this.tick1 = this.cursor;
+            this.tick2time = 4 * 60 / this.tempo / this.timebase;
+            const p = this.findNextEv(this.cursor);
+            this.index1 = p.i;
+            this.timestack.push([0, this.cursor, 0]);
+            this.timestack.push([this.time0, this.cursor, this.tick2time]);
+            this.time1 += p.dt * this.tick2time;
+            if (p.i < 0) {
+                this.timestack.push([this.time1, this.markstart, this.tick2time]);
+            } else {
+                this.timestack.push([this.time1, p.t1, this.tick2time]);
+            }
+
+            const frameRate = 1000 / 40; // 25ms, equivalent to 40 FPS
+            let lastTime = performance.now();
+
+
+            const playLoop = () => {
+                const currentTime = performance.now();
+                const deltaTime = currentTime - lastTime;
+
+                if (deltaTime >= frameRate) {
+                    const current = performance.now() / 1000;
+
+                    while (this.timestack.length > 1 && current >= this.timestack[1][0]) {
+                        this.timestack.shift();
+                    }
+
+                    this.cursor = this.timestack[0][1] + (current - this.timestack[0][0]) / this.timestack[0][2];
+                    this.redrawMarker();
+
+                    while (current + this.preload >= this.time1) {
+                        this.time0 = this.time1;
+                        this.tick0 = this.tick1;
+                        let e = this.sequence[this.index1];
+
+                        if (!e || e.t >= this.markend) {
+                            this.timestack.push([this.time1, this.markstart, this.tick2time]);
+                            const p = this.findNextEv(this.markstart);
+                            this.time1 += p.dt * this.tick2time;
+                            this.index1 = p.i;
+                        } else {
+                            this.tick1 = e.t;
+                            this.timestack.push([this.time1, e.t, this.tick2time]);
+                            let gmax = Math.min(e.t + e.g, this.markend) - e.t;
+
+                            if (this.editmode == "gridmono" || this.editmode == "gridpoly") {
+                                gmax *= this.gridnoteratio;
+                            }
+
+                            const cbev = {t: this.time1, g: this.time1 + gmax * this.tick2time, n: e.n};
+
+                            if (this.playcallback) {
+                                this.playcallback(cbev);
+                            }
+
+                            e = this.sequence[++this.index1];
+
+                            if (!e || e.t >= this.markend) {
+                                this.time1 += (this.markend - this.tick1) * this.tick2time;
+                                const p = this.findNextEv(this.markstart);
+                                this.timestack.push([this.time1, this.markstart, this.tick2time]);
+                                this.time1 += p.dt * this.tick2time;
+                                this.index1 = p.i;
+                            } else {
+                                this.time1 += (e.t - this.tick1) * this.tick2time;
+                            }
+                        }
+                    }
+
+                    lastTime = currentTime;
+                }
+
+                this.timer = requestAnimationFrame(playLoop);
+            };
+
+
+            this.timer = requestAnimationFrame(playLoop);
+
+            this.stop = function () {
+                if (this.timer) {
+                    cancelAnimationFrame(this.timer);
+                    this.timer = null;
+                }
+            };
+
+        };
+        this.stop = function () {
+
+            if (this.timer)
+                clearInterval(this.timer);
+            this.timer = null;
+        };
+        this.setMMLString = function (s) {
+            this.sequence = [];
+            let i, l, n, t, defo, defl, tie, evlast;
+            const parse = {s: s, i: i, tb: this.timebase};
+
+            function getNum(p) {
+                var n = 0;
+                while (p.s[p.i] >= "0" && p.s[p.i] <= "9") {
+                    n = n * 10 + parseInt(p.s[p.i]);
+                    ++p.i;
+                }
+                return n;
+            }
+
+            function getLen(p) {
+                var n = getNum(p);
+                if (n == 0)
+                    n = defl;
+                n = p.tb / n;
+                var n2 = n;
+                while (p.s[p.i] == ".") {
+                    ++p.i;
+                    n += (n2 >>= 1);
+                }
+                return n;
+            }
+
+            function getNote(p) {
+                switch (p.s[p.i]) {
+                    case "c":
+                    case "C":
+                        n = 0;
+                        break;
+                    case "d":
+                    case "D":
+                        n = 2;
+                        break;
+                    case "e":
+                    case "E":
+                        n = 4;
+                        break;
+                    case "f":
+                    case "F":
+                        n = 5;
+                        break;
+                    case "g":
+                    case "G":
+                        n = 7;
+                        break;
+                    case "a":
+                    case "A":
+                        n = 9;
+                        break;
+                    case "b":
+                    case "B":
+                        n = 11;
+                        break;
+                    default:
+                        n = -1;
+                }
+                ++p.i;
+                if (n < 0)
+                    return -1;
+                for (; ;) {
+                    switch (p.s[p.i]) {
+                        case "-":
+                            --n;
+                            break;
+                        case "+":
+                            ++n;
+                            break;
+                        case "#":
+                            ++n;
+                            break;
+                        default:
+                            return n;
+                    }
+                    ++p.i;
+                }
+            }
+
+            defo = 4;
+            defl = 8;
+            t = 0;
+            tie = 0;
+            evlast = null;
+            for (parse.i = 0; parse.i < parse.s.length;) {
+                switch (parse.s[parse.i]) {
+                    case '>':
+                        ++parse.i;
+                        ++defo;
+                        n = -1;
+                        l = 0;
+                        break;
+                    case '<':
+                        ++parse.i;
+                        --defo;
+                        n = -1;
+                        l = 0;
+                        break;
+                    case '&':
+                    case '^':
+                        ++parse.i;
+                        tie = 1;
+                        n = -1;
+                        l = 0;
+                        break;
+                    case 't':
+                    case 'T':
+                        ++parse.i;
+                        n = -1;
+                        l = 0;
+                        this.tempo = getNum(parse);
+                        break;
+                    case 'o':
+                    case 'O':
+                        ++parse.i;
+                        n = -1;
+                        l = 0;
+                        defo = getNum(parse);
+                        break;
+                    case 'l':
+                    case 'L':
+                        ++parse.i;
+                        n = -1;
+                        l = 0;
+                        defl = getNum(parse);
+                        break;
+                    case 'r':
+                    case 'R':
+                        ++parse.i;
+                        n = -1;
+                        l = getLen(parse);
+                        break;
+                    default:
+                        n = getNote(parse);
+                        if (n >= 0)
+                            l = getLen(parse);
+                        else
+                            l = 0;
+                        break;
+                }
+                if (n >= 0) {
+                    n = (defo - this.octadj) * 12 + n;
+                    if (tie && evlast && evlast.n == n) {
+                        evlast.g += l;
+                        tie = 0;
+                    } else
+                        this.sequence.push(evlast = {t: t, n: n, g: l, f: 0});
+                }
+                t += l;
+            }
+            this.redraw();
+        };
+        this.getMMLString = function () {
+            function makeNote(n, l, tb) {
+                var mmlnote = "";
+                var ltab = [
+                    [960, "1"], [840, "2.."], [720, "2."], [480, "2"],
+                    [420, "4.."], [360, "4."], [240, "4"],
+                    [210, "8.."], [180, "8."], [120, ""],
+                    [105, "16.."], [90, "16."], [60, "16"],
+                    [45, "32."], [30, "32"], [16, "60"], [15, "64"],
+                    [8, "120"], [4, "240"], [2, "480"], [1, "960"]
+                ];
+                l = l * 960 / tb;
+                while (l > 0) {
+                    for (let j = 0; j < ltab.length; ++j) {
+                        while (l >= ltab[j][0]) {
+                            l -= ltab[j][0];
+                            mmlnote += "&" + n + ltab[j][1];
+                        }
+                    }
+                }
+                return mmlnote.substring(1);
+            }
+
+            var mml = "t" + this.tempo + "o4l8";
+            var ti = 0, meas = 0, oct = 5, n;
+            var notes = ["c", "d-", "d", "e-", "e", "f", "g-", "g", "a-", "a", "b-", "b"];
+            for (let i = 0; i < this.sequence.length; ++i) {
+                var ev = this.sequence[i];
+                if (ev.t > ti) {
+                    var l = ev.t - ti;
+                    mml += makeNote("r", l, this.timebase);
+                    ti = ev.t;
+                }
+                var n = ev.n;
+                if (n < oct * 12 || n >= oct * 12 + 12) {
+                    oct = (n / 12) | 0;
+                    mml += "o" + (oct + this.octadj);
+                }
+                n = notes[n % 12];
+                var l = ev.g;
+                if (i + 1 < this.sequence.length) {
+                    var ev2 = this.sequence[i + 1];
+                    if (ev2.t < ev.t + l) {
+                        l = ev2.t - ev.t;
+                        ti = ev2.t;
+                    } else
+                        ti = ev.t + ev.g;
+                } else
+                    ti = ev.t + ev.g;
+                mml += makeNote(n, l, this.timebase);
+            }
+            return mml;
+        };
+        this.hitTest = function (pos) {
+            const ht = {t: 0, n: 0, i: -1, m: " "};
+            const l = this.sequence.length;
+            if (pos.t == this.menu) {
+                ht.m = "m";
+                return ht;
+            }
+            ht.t = (this.xoffset + (pos.x - this.yruler - this.kbwidth) / this.swidth * this.xrange);
+            ht.n = this.yoffset - (pos.y - this.height) / this.steph;
+            if (pos.y >= this.height || pos.x >= this.width) {
+                return ht;
+            }
+            if (pos.y < this.xruler) {
+                ht.m = "x";
+                return ht;
+            }
+            if (pos.x < this.yruler + this.kbwidth) {
+                ht.m = "y";
+                return ht;
+            }
+            for (let i = 0; i < l; ++i) {
+                const ev = this.sequence[i];
+                if ((ht.n | 0) == ev.n) {
+                    if (ev.f && Math.abs(ev.t - ht.t) * this.stepw < 8) {
+                        ht.m = "B";
+                        ht.i = i;
+                        return ht;
+                    }
+                    if (ev.f && Math.abs(ev.t + ev.g - ht.t) * this.stepw < 8) {
+                        ht.m = "E";
+                        ht.i = i;
+                        return ht;
+                    }
+                    if (ht.t >= ev.t && ht.t < ev.t + ev.g) {
+                        ht.i = i;
+                        if (this.sequence[i].f)
+                            ht.m = "N";
+                        else
+                            ht.m = "n";
+                        return ht;
+                    }
+                }
+            }
+            ht.m = "s";
+            return ht;
+        };
+        this.applyTexture = function (ev) {
+            if (this.noteTexture && this.noteTexture.complete) {
+                const w = ev.g * this.stepw;
+                const x = (ev.t - this.xoffset) * this.stepw + this.yruler + this.kbwidth;
+                const y = this.height - (ev.n - this.yoffset) * this.steph;
+                const x2 = (x + w) | 0;
+                const y2 = (y - this.steph) | 0;
+
+                if (ev.f) {
+                    this.ctx.fillStyle = this.colnotesel; // green if selected
+                } else {
+                    this.ctx.fillStyle = this.colnote; // red if not selected
+                }
+                this.ctx.fillRect(x, y2, x2 - x, y - y2);
+
+                this.ctx.globalAlpha = 0.5; //  texture opacity
+                this.ctx.drawImage(this.noteTexture, x, y2, x2 - x, y - y2);
+                this.ctx.globalAlpha = 1.0; // réinitialiser l'opacité
+                ev.textureApplied = true;
+            } else {
+                console.warn('noteTexture is not yet loaded or initialized.');
+            }
+        };
+
+        this.addNote = function (t, n, g, v, f, type = 'note', details = {}) {
+            if (t >= 0 && n >= 0 && n < 128) {
+                const id = this.noteIdCounter++;
+                const ev = {id: id, t: t, n: n, g: g, v: v, f: f, type: type, details: details};
+                console.log('programatic note creation  : ' + id + ' type: ' + type + ', details' + details);
+
+                if (!this.noteTexture || !this.noteTexture.complete) {
+                    this.noteTexture = new Image();
+                    this.noteTexture.src = 'medias/images/waveform.png';
+                    this.noteTexture.onload = () => {
+                        this.applyTexture(ev);
+                    };
+                } else {
+                    this.applyTexture(ev);
+                }
+
+                this.sequence.push(ev);
+                this.sortSequence();
+                this.redraw();
+                return ev;
+            }
+            return null;
+        };
+        this.selAreaNote = function (t1, t2, n1, n2) {
+            let t, i = 0, e = this.sequence[i];
+            if (n1 > n2)
+                t = n1, n1 = n2, n2 = t;
+            if (t1 > t2)
+                t = t1, t1 = t2, t2 = t;
+            while (e) {
+                if (e.t >= t1 && e.t < t2 && e.n >= n1 && e.n <= n2)
+                    e.f = 1;
+                else
+                    e.f = 0;
+                e = this.sequence[++i];
+            }
+        };
+        this.delNote = function (idx) {
+            this.sequence.splice(idx, 1);
+            this.redraw();
+        };
+        this.delAreaNote = function (t, g, n) {
+            const l = this.sequence.length;
+            for (let i = l - 1; i >= 0; --i) {
+                const ev = this.sequence[i];
+                if (typeof (n) != "undefined" && n != i) {
+                    if (t <= ev.t && t + g >= ev.t + ev.g) {
+                        this.sequence.splice(i, 1);
+                    } else if (t <= ev.t && t + g > ev.t && t + g < ev.t + ev.g) {
+                        ev.g = ev.t + ev.g - (t + g);
+                        ev.t = t + g;
+                    } else if (t >= ev.t && t < ev.t + ev.g && t + g >= ev.t + ev.g) {
+                        ev.g = t - ev.t;
+                    } else if (t > ev.t && t + g < ev.t + ev.g) {
+                        this.addNote(t + g, ev.n, ev.t + ev.g - t - g, this.defvelo);
+                        ev.g = t - ev.t;
+                    }
+                }
+            }
+        };
+        this.delSelectedNote = function () {
+            console.log('deleting note')
+            const l = this.sequence.length;
+            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) {
+                const ev = this.sequence[i];
+                if (ev.f && ev.ot + dt < 0)
+                    dt = -ev.ot;
+            }
+            for (let i = 0; i < l; ++i) {
+                const ev = this.sequence[i];
+                if (ev.f) {
+                    ev.t = (((ev.ot + dt) / this.snap + .5) | 0) * this.snap;
+                    ev.n = ev.on + dn;
+                }
+            }
+        };
+        this.clearSel = function () {
+            const l = this.sequence.length;
+            for (let i = 0; i < l; ++i) {
+                this.sequence[i].f = 0;
+            }
+        };
+        this.selectedNotes = function () {
+            let obj = [];
+            for (let i = this.sequence.length - 1; i >= 0; --i) {
+                const ev = this.sequence[i];
+                if (ev.f)
+                    obj.push({i: i, ev: ev, t: ev.t, g: ev.g});
+            }
+            return obj;
+        };
+        this.editDragDown = function (pos) {
+            const ht = this.hitTest(pos);
+            let ev;
+            if (ht.m == "N") {
+                ev = this.sequence[ht.i];
+                this.dragging = {o: "D", m: "N", i: ht.i, t: ht.t, n: ev.n, dt: ht.t - ev.t};
+                for (let i = 0, l = this.sequence.length; i < l; ++i) {
+                    ev = this.sequence[i];
+                    if (ev.f)
+                        ev.on = ev.n, ev.ot = ev.t, ev.og = ev.g;
+                }
+                this.redraw();
+            } else if (ht.m == "n") {
+                ev = this.sequence[ht.i];
+                this.clearSel();
+                ev.f = 1;
+                this.redraw();
+            } else if (ht.m == "E") {
+                this.tool = 'trim_end'
+                const ev = this.sequence[ht.i];
+                console.log('1  note end changed:');
+
+                this.dragging = {o: "D", m: "E", i: ht.i, t: ev.t, g: ev.g, ev: this.selectedNotes()};
+            } else if (ht.m == "B") {
+                this.tool = 'trim_start'
+                const ev = this.sequence[ht.i];
+                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) {
+                    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: {}};
+
+                    const ev = {
+                        id: id,
+                        t: t,
+                        n: ht.n | 0,
+                        g: 1,
+                        f: 1,
+                        type: 'note',
+                        details: details,
+                        textureApplied: false
+                    };
+                    this.sequence.push(ev);
+
+                    if (!this.noteTexture || !this.noteTexture.complete) {
+                        this.noteTexture = new Image();
+                        this.noteTexture.src = 'medias/images/waveform.png';
+                        this.noteTexture.onload = () => {
+                            this.applyTexture(ev);
+                            this.redraw();
+                        };
+                    } else {
+                        this.applyTexture(ev);
+                        this.redraw();
+                    }
+
+                    this.dragging = {
+                        o: "D",
+                        m: "E",
+                        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":
+                            console.log('open menu');
+                            this.popMenu(this.downpos);
+                            this.dragging = {o: "m"};
+                            break;
+                        default:
+                            if (this.editmode == "dragmono" || this.editmode == "dragpoly")
+                                this.dragging = {
+                                    o: "A",
+                                    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;
+                }
+
+                this.redraw();
+            }
+        };
+        this.editDragMove = function (pos) {
+            const ht = this.hitTest(pos);
+            let ev, t;
+            if (this.dragging.o == "D") {
+                switch (this.dragging.m) {
+                    case "E":
+                        if (this.dragging.ev) {
+                            const dt = ((Math.max(0, ht.t) / this.snap + 0.9) | 0) * this.snap - this.dragging.t - this.dragging.g;
+                            const list = this.dragging.ev;
+                            for (let i = list.length - 1; i >= 0; --i) {
+                                const ev = list[i].ev;
+                                ev.g = list[i].g + dt;
+
+                                if (ev.g <= 0)
+                                    ev.g = 1;
+                                if (this.editmove == "dragmono")
+                                    this.delAreaNote(ev.t, ev.g);
+                            }
+                        }
+                        this.redraw();
+                        break;
+                    case "B":
+                        if (this.dragging.ev) {
+                            const dt = ((Math.max(0, ht.t) / this.snap + 0.9) | 0) * this.snap - this.dragging.t;
+                            const list = this.dragging.ev;
+                            for (let i = list.length - 1; i >= 0; --i) {
+                                const ev = list[i].ev;
+                                ev.t = list[i].t + dt;
+                                ev.g = list[i].g - dt;
+
+                                if (ev.g <= 0)
+                                    ev.g = 1;
+                                if (this.editmove == "dragmono")
+                                    this.delAreaNote(ev.t, ev.g);
+                            }
+                        }
+                        this.redraw();
+                        break;
+
+                        ev = this.sequence[this.dragging.i];
+                        t = ((Math.max(0, ht.t) / this.snap + 0.5) | 0) * this.snap;
+                        ev.g = ev.t + ev.g - t;
+                        ev.t = t;
+                        if (ev.g < 0) {
+                            ev.t += ev.g;
+                            ev.g = -ev.g;
+                            this.dragging.m = "E";
+                        } else if (ev.g == 0) {
+                            ev.t = t - 1;
+                            ev.g = 1;
+                        }
+                        this.redraw();
+                        break;
+                    case "N":
+                        this.tool = 'drag'
+                        ev = this.sequence[this.dragging.i];
+                        console.log('4 note. dragged : ');
+                        this.moveSelectedNote((ht.t - this.dragging.t) | 0, (ht.n | 0) - this.dragging.n);
+                        this.redraw();
+                        break;
+                }
+            }
+        };
+        this.editGridDown = function (pos) {
+            const ht = this.hitTest(pos);
+            if (ht.m == "n") {
+                this.delNote(ht.i);
+                this.dragging = {o: "G", m: "0"};
+            } else if (ht.m == "s" && ht.t >= 0) {
+                const pt = Math.floor(ht.t);
+                if (this.editmode == "gridmono")
+                    this.delAreaNote(pt, 1, ht.i);
+                this.addNote(pt, ht.n | 0, 1, this.defvelo);
+                this.dragging = {o: "G", m: "1"};
+            }
+        };
+        this.editGridMove = function (pos) {
+            const ht = this.hitTest(pos);
+            if (this.dragging.o == "G") {
+                switch (this.dragging.m) {
+                    case "1":
+                        const px = Math.floor(ht.t);
+                        if (ht.m == "s") {
+                            if (this.editmode == "gridmono")
+                                this.delAreaNote(px, 1, ht.i);
+                            this.addNote(px, ht.n | 0, 1, this.defvelo);
+                        }
+                        break;
+                    case "0":
+                        if (ht.m == "n")
+                            this.delNote(ht.i);
+                        break;
+                }
+            }
+        };
+        this.setListener = function (el, mode) {
+            this.bindcontextmenu = this.contextmenu.bind(this);
+            this.bindpointermove = this.pointermove.bind(this);
+            this.bindcancel = this.cancel.bind(this);
+            el.addEventListener("mousedown", this.pointerdown.bind(this), true);
+            el.addEventListener("touchstart", this.pointerdown.bind(this), false);
+            if (mode) {
+                el.addEventListener("mouseover", this.pointerover.bind(this), false);
+                el.addEventListener("mouseout", this.pointerout.bind(this), false);
+            }
+        };
+        this.handleKeyboardClick = function (e) {
+            const kbRect = this.kb.getBoundingClientRect();
+            const clickY = e.clientY - kbRect.top;
+
+            const noteNumber = Math.floor(clickY / this.steph);
+            console.log("note to trig :", noteNumber);
+        };
+        this.ready = function () {
+            this.body = root.children[1];
+            this.elem = root.childNodes[2];
+            this.proll = this.elem.children[0];
+            this.canvas = this.elem.children[0];
+            this.kb = this.elem.children[1];
+            this.ctx = this.canvas.getContext("2d");
+            this.kbimg = this.elem.children[1];
+            this.markstartimg = this.elem.children[2];
+            this.markendimg = this.elem.children[3];
+            this.cursorimg = this.elem.children[4];
+            this.menu = this.elem.children[5];
+            this.rcMenu = {x: 0, y: 0, width: 0, height: 0};
+            this.lastx = 0;
+            this.lasty = 0;
+            this.kb.addEventListener('click', this.handleKeyboardClick.bind(this), false);
+            this.canvas.addEventListener('mousemove', this.mousemove.bind(this), false);
+            this.canvas.addEventListener('keydown', this.keydown.bind(this), false);
+            this.canvas.addEventListener('DOMMouseScroll', this.wheel.bind(this), false);
+            this.canvas.addEventListener('mousewheel', this.wheel.bind(this), false);
+            this.setListener(this.canvas, true);
+            this.setListener(this.markendimg, true);
+            this.setListener(this.markstartimg, true);
+            this.setListener(this.cursorimg, true);
+            this.setListener(this.menu, false);
+            this.sequence = [];
+            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.redraw();
+        };
+        this.setupImage = function () {
+        };
+        this.preventScroll = function (e) {
+            if (e.preventDefault)
+                e.preventDefault();
+        };
+        this.getPos = function (e) {
+            let t = null;
+            if (e) {
+                t = e.target;
+                this.lastx = e.clientX - this.rcTarget.left;
+                this.lasty = e.clientY - this.rcTarget.top;
+            }
+            if (this.lastx >= this.rcMenu.x && this.lastx < this.rcMenu.x + this.rcMenu.width
+                && this.lasty >= this.rcMenu.y && this.lasty < this.rcMenu.y + this.rcMenu.height)
+                t = this.menu;
+            return {t: t, x: this.lastx, y: this.lasty};
+        };
+        this.contextmenu = function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            window.removeEventListener("contextmenu", this.bindcontextmenu);
+            return false;
+        };
+        this.keydown = function (e) {
+            switch (e.keyCode) {
+                case 8: //delNote using backspace key
+                    this.delSelectedNote();
+                    this.redraw();
+                    break;
+            }
+        };
+        this.popMenu = function (pos) {
+            console.log('pop menu call from shortcut')
+        };
+        this.longtapcountup = function () {
+            if (++this.longtapcount >= 18) {
+                clearInterval(this.longtaptimer);
+                switch (this.downht.m) {
+                    case "N":
+                    case "B":
+                    case "E":
+                        this.popMenu(this.downpos);
+                        this.dragging = {o: "m"};
+                        break;
+                }
+            }
+        };
+        this.pointerdown = function (ev) {
+            let e;
+            if (!this.enable) {
+                console.log('here 1');
+                return;
+            }
+
+            if (ev.touches) {
+                console.log('here 2');
+
+                e = ev.touches[0];
+            } else {
+                e = ev;
+                this.rcTarget = this.canvas.getBoundingClientRect();
+                this.downpos = this.getPos(e);
+                this.downht = this.hitTest(this.downpos);
+
+                if (this.downht.i >= 0) {
+                    let clickedNote = this.sequence[this.downht.i];
+                    let noteId = clickedNote.id;
+                    console.log("Note ID :", noteId + ' note type: ' + clickedNote.type + ', note detail : ' + clickedNote.details);
+                    console.log('-- details below ---')
+                    console.log(clickedNote.details.group)
+                    console.log(clickedNote.details.in)
+                    console.log('-- end details ---')
+                }
+
+
+                this.longtapcount = 0;
+                this.longtaptimer = setInterval(this.longtapcountup.bind(this), 100);
+                window.addEventListener("touchmove", this.bindpointermove, false);
+                window.addEventListener("mousemove", this.bindpointermove, false);
+                window.addEventListener("touchend", this.bindcancel);
+                window.addEventListener("mouseup", this.bindcancel);
+                window.addEventListener("contextmenu", this.bindcontextmenu);
+
+
+                if (e.button == 2 || e.ctrlKey) {
+
+                    console.log(' open the menu now!!!')
+                    switch (this.downht.m) {
+                        case "N":
+                        case "B":
+                        case "E":
+                            console.log('open menu');
+                            this.popMenu(this.downpos);
+                            this.dragging = {o: "m"};
+                            break;
+                        default:
+                            if (this.editmode == "dragmono" || this.editmode == "dragpoly")
+                                this.dragging = {
+                                    o: "A",
+                                    p: this.downpos,
+                                    p2: this.downpos,
+                                    t1: this.downht.t,
+                                    n1: this.downht.n
+                                };
+                            break;
+                    }
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.canvas.focus();
+                    return false;
+                }
+                switch (e.target) {
+                    case this.markendimg:
+                        this.dragging = {o: "E", x: this.downpos.x, m: this.markend};
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        return false;
+                    case this.markstartimg:
+                        this.dragging = {o: "S", x: this.downpos.x, m: this.markstart};
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        return false;
+                    case this.cursorimg:
+                        this.dragging = {o: "P", x: this.downpos.x, m: this.cursor};
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        return false;
+                }
+                this.dragging = {
+                    o: null,
+                    x: this.downpos.x,
+                    y: this.downpos.y,
+                    offsx: this.xoffset,
+                    offsy: this.yoffset
+                };
+                this.canvas.focus();
+                switch (this.editmode) {
+                    case "gridpoly":
+                    case "gridmono":
+                        this.editGridDown(this.downpos);
+                        break;
+                    case "dragpoly":
+                    case "dragmono":
+                        this.editDragDown(this.downpos);
+                        break;
+                }
+                this.press = 1;
+                if (ev.preventDefault)
+                    ev.preventDefault();
+                if (ev.stopPropagation)
+                    ev.stopPropagation();
+                return false;
+            }
+        };
+        this.mousemove = function (e) {
+            if (this.dragging.o == null) {
+                this.rcTarget = this.canvas.getBoundingClientRect();
+                const pos = this.getPos(e);
+                const ht = this.hitTest(pos);
+                switch (ht.m) {
+                    case "E":
+                        this.canvas.style.cursor = "e-resize";
+                        break;
+                    case "B":
+                        this.canvas.style.cursor = "w-resize";
+                        break;
+                    case "N":
+                        this.canvas.style.cursor = "move";
+                        break;
+                    case "n":
+                        this.canvas.style.cursor = "pointer";
+                        break;
+                    case "s":
+                        this.canvas.style.cursor = "pointer";
+                        break;
+                }
+            }
+        };
+        this.pointermove = function (ev) {
+            let e;
+            this.rcTarget = this.canvas.getBoundingClientRect();
+            if (ev.touches)
+                e = ev.touches[0];
+            else
+                e = ev;
+            if (this.longtaptimer)
+                clearInterval(this.longtaptimer);
+            const pos = this.getPos(e);
+            const ht = this.hitTest(pos);
+            switch (this.dragging.o) {
+                case null:
+                    if (this.xscroll)
+                        this.xoffset = this.dragging.offsx + (this.dragging.x - pos.x) * (this.xrange / this.width);
+                    if (this.yscroll)
+                        this.yoffset = this.dragging.offsy + (pos.y - this.dragging.y) * (this.yrange / this.height);
+                    break;
+                case "m":
+                    if (ht.m == "m") {
+                        this.menu.style.background = "#ff6";
+                    } else {
+                        this.menu.style.background = "#eef";
+                    }
+                    break;
+                case "A":
+                    this.dragging.p2 = pos;
+                    this.dragging.t2 = ht.t;
+                    this.dragging.n2 = ht.n;
+                    this.redraw();
+                    break;
+                case "E":
+                    console.log('marker end')
+                    var p = Math.max(1, (this.dragging.m + (pos.x - this.dragging.x) / this.stepw + .5) | 0);
+                    if (this.markstart >= p)
+                        this.markstart = p - 1;
+                    this.markend = p;
+                    break;
+                case "S":
+                    console.log('marker start')
+                    var p = Math.max(0, (this.dragging.m + (pos.x - this.dragging.x) / this.stepw + .5) | 0);
+                    if (this.markend <= p)
+                        this.markend = p + 1;
+                    this.markstart = p;
+                    break;
+                case "P":
+                    console.log('playhead')
+                    this.cursor = Math.max(0, (this.dragging.m + (pos.x - this.dragging.x) / this.stepw + .5) | 0);
+                    break;
+            }
+            switch (this.editmode) {
+                case "gridpoly":
+                case "gridmono":
+                    this.editGridMove(pos);
+                    break;
+                case "dragpoly":
+                case "dragmono":
+                    this.editDragMove(pos);
+                    break;
+            }
+            ev.preventDefault();
+            ev.stopPropagation();
+            return false;
+        };
+        this.cancel = function (ev) {
+            let e;
+            if (ev.touches)
+                e = null;
+            else
+                e = ev;
+            if (this.longtaptimer)
+                clearInterval(this.longtaptimer);
+            const pos = this.getPos(e);
+            if (this.dragging.o == "m") {
+
+            }
+            if (this.dragging.o == "A") {
+                this.selAreaNote(this.dragging.t1, this.dragging.t2, this.dragging.n1, this.dragging.n2);
+                this.dragging = {o: null};
+                this.redraw();
+            }
+            if (this.editmode == "dragmono") {
+                for (let ii = this.sequence.length - 1; ii >= 0; --ii) {
+                    const ev = this.sequence[ii];
+                    if (ev && ev.f) {
+                        this.delAreaNote(ev.t, ev.g, ii);
+                    }
+                }
+            }
+            this.redraw();
+            this.dragging = {o: null};
+            if (this.press) {
+                this.sortSequence();
+            }
+            this.press = 0;
+            window.removeEventListener('touchstart', this.preventScroll, false);
+            window.removeEventListener("mousemove", this.bindpointermove, false);
+            window.removeEventListener("touchend", this.bindcancel, false);
+            window.removeEventListener("mouseup", this.bindcancel, false);
+            ev.preventDefault();
+            ev.stopPropagation();
+            return false;
+        };
+        this.pointerover = function (e) {
+        };
+        this.pointerout = function (e) {
+        };
+        this.wheel = function (e) {
+            let delta = 0;
+            const pos = this.getPos(e);
+            if (!e)
+                e = window.event;
+            if (e.wheelDelta)
+                delta = e.wheelDelta / 120;
+            else if (e.detail)
+                delta = -e.detail / 3;
+            const ht = this.hitTest(pos);
+            if ((this.wheelzoomx || this.wheelzoom) && ht.m == "x") {
+                if (delta > 0) {
+                    this.xoffset = ht.t - (ht.t - this.xoffset) / 1.2
+                    this.xrange /= 1.2;
+                } else {
+                    this.xoffset = ht.t - (ht.t - this.xoffset) * 1.2
+                    this.xrange *= 1.2;
+                }
+            }
+            if ((this.wheelzoomy || this.wheelzoom) && ht.m == "y") {
+                if (delta > 0) {
+                    this.yoffset = ht.n - (ht.n - this.yoffset) / 1.2
+                    this.yrange /= 1.2;
+                } else {
+                    this.yoffset = ht.n - (ht.n - this.yoffset) * 1.2
+                    this.yrange *= 1.2;
+                }
+
+            }
+            e.preventDefault();
+        };
+        this.layout = function () {
+            if (typeof (this.kbwidth) == "undefined")
+                return;
+            const proll = this.proll;
+            const bodystyle = this.body.style;
+            if (this.bgsrc)
+                proll.style.background = "url('" + this.bgsrc + "')";
+            this.kbimg.style.background = "url('" + this.kbsrc + "')";
+            if (this.width) {
+                proll.width = this.width;
+                bodystyle.width = proll.style.width = this.width + "px";
+            }
+            if (this.height) {
+                proll.height = this.height;
+                bodystyle.height = proll.style.height = this.height + "px";
+            }
+            this.swidth = proll.width - this.yruler;
+            this.swidth -= this.kbwidth;
+            this.sheight = proll.height - this.xruler;
+            this.redraw();
+        };
+        this.redrawMarker = function () {
+            if (!this.initialized)
+                return;
+            const cur = (this.cursor - this.xoffset) * this.stepw + this.yruler + this.kbwidth;
+            this.cursorimg.style.left = (cur + this.cursoroffset) + "px";
+            const start = (this.markstart - this.xoffset) * this.stepw + this.yruler + this.kbwidth;
+            this.markstartimg.style.left = (start + this.markstartoffset) + "px";
+            const end = (this.markend - this.xoffset) * this.stepw + this.yruler + this.kbwidth;
+            this.markendimg.style.left = (end + this.markendoffset) + "px";
+        };
+        this.redrawGrid = function () {
+            for (let y = 0; y < 128; ++y) {
+                if (this.semiflag[y % 12] & 1)
+                    this.ctx.fillStyle = this.coldk;
+                else
+                    this.ctx.fillStyle = this.collt;
+                let ys = this.height - (y - this.yoffset) * this.steph;
+                this.ctx.fillRect(this.yruler + this.kbwidth, ys | 0, this.swidth, -this.steph);
+                this.ctx.fillStyle = this.colgrid;
+                this.ctx.fillRect(this.yruler + this.kbwidth, ys | 0, this.swidth, 1);
+            }
+            for (let t = 0; ; t += this.grid) {
+                let x = this.stepw * (t - this.xoffset) + this.yruler + this.kbwidth;
+                this.ctx.fillRect(x | 0, this.xruler, 1, this.sheight);
+                if (x >= this.width)
+                    break;
+            }
+        };
+        this.semiflag = [6, 1, 0, 1, 0, 2, 1, 0, 1, 0, 1, 0];
+        this.redrawXRuler = function () {
+            if (this.xruler) {
+                this.ctx.textAlign = "left";
+                this.ctx.font = (this.xruler / 2) + "px 'sans-serif'";
+                this.ctx.fillStyle = this.colrulerbg;
+                this.ctx.fillRect(0, 0, this.width, this.xruler);
+                this.ctx.fillStyle = this.colrulerborder;
+                this.ctx.fillRect(0, 0, this.width, 1);
+                this.ctx.fillRect(0, 0, 1, this.xruler);
+                this.ctx.fillRect(0, this.xruler - 1, this.width, 1);
+                this.ctx.fillRect(this.width - 1, 0, 1, this.xruler);
+                this.ctx.fillStyle = this.colrulerfg;
+                for (let t = 0; ; t += this.timebase) {
+                    let x = (t - this.xoffset) * this.stepw + this.yruler + this.kbwidth;
+                    this.ctx.fillRect(x, 0, 1, this.xruler);
+                    this.ctx.fillText(t / this.timebase + 1, x + 4, this.xruler - 8);
+                    if (x >= this.width)
+                        break;
+                }
+            }
+        };
+        this.redrawYRuler = function () {
+            if (this.yruler) {
+                this.ctx.textAlign = "right";
+                this.ctx.font = (this.steph / 2) + "px 'sans-serif'";
+                this.ctx.fillStyle = this.colrulerbg;
+                this.ctx.fillRect(0, this.xruler, this.yruler, this.sheight);
+                this.ctx.fillStyle = this.colrulerborder;
+                this.ctx.fillRect(0, this.xruler, 1, this.sheight);
+                this.ctx.fillRect(this.yruler, this.xruler, 1, this.sheight);
+                this.ctx.fillRect(0, this.height - 1, this.yruler, 1);
+                this.ctx.fillStyle = this.colrulerfg;
+                for (let y = 0; y < 128; y += 12) {
+                    const ys = this.height - this.steph * (y - this.yoffset);
+                    this.ctx.fillRect(0, ys | 0, this.yruler, -1);
+                    this.ctx.fillText("C" + (((y / 12) | 0) + this.octadj), this.yruler - 4, ys - 4);
+                }
+            }
+            this.kbimg.style.top = (this.xruler) + "px";
+            this.kbimg.style.left = this.yruler + "px";
+            this.kbimg.style.width = this.kbwidth + "px";
+            this.kbimg.style.backgroundSize = "100% " + (this.steph * 12) + "px";
+            this.kbimg.style.backgroundPosition = "0px " + (this.sheight + this.steph * this.yoffset) + "px";
+        };
+        this.redrawKeyboard = function () {
+            if (this.yruler) {
+                this.ctx.textAlign = "right";
+                this.ctx.font = (this.steph / 2) + "px 'sans-serif'";
+                this.ctx.fillStyle = this.colortab.kbwh;
+                this.ctx.fillRect(1, this.xruler, this.yruler, this.sheight);
+                this.ctx.fillStyle = this.colortab.kbbk;
+                for (let y = 0; y < 128; ++y) {
+                    const ys = this.height - this.steph * (y - this.yoffset);
+                    const ysemi = y % 12;
+                    const fsemi = this.semiflag[ysemi];
+                    if (fsemi & 1) {
+                        this.ctx.fillRect(0, ys, this.yruler / 2, -this.steph);
+                        this.ctx.fillRect(0, (ys - this.steph / 2) | 0, this.yruler, -1);
+                    }
+                    if (fsemi & 2)
+                        this.ctx.fillRect(0, ys | 0, this.yruler, -1);
+                    if (fsemi & 4)
+                        this.ctx.fillText("C" + (((y / 12) | 0) + this.octadj), this.yruler - 4, ys - 4);
+                }
+                this.ctx.fillRect(this.yruler, this.xruler, 1, this.sheight);
+            }
+        };
+        this.redrawAreaSel = function () {
+            if (this.dragging && this.dragging.o == "A") {
+                this.ctx.fillStyle = this.colselarea;
+                this.ctx.fillRect(this.dragging.p.x, this.dragging.p.y, this.dragging.p2.x - this.dragging.p.x, this.dragging.p2.y - this.dragging.p.y);
+            }
+        };
+        this.redraw = function () {
+            let x, w, y;
+            if (!this.ctx) return;
+
+            this.ctx.clearRect(0, 0, this.width, this.height);
+            this.stepw = this.swidth / this.xrange;
+            this.steph = this.sheight / this.yrange;
+
+            this.redrawGrid();
+
+            const l = this.sequence.length;
+            for (let s = 0; s < l; ++s) {
+                const ev = this.sequence[s];
+                const noteHeight = this.steph;
+                console.log('tool active: ' + this.tool + ',  length : ' + ev.g + ' start: ' + ev.t)
+
+                if (ev.f) {
+                    this.ctx.fillStyle = this.colnotesel;
+                } else {
+                    this.ctx.fillStyle = this.colnote;
+                }
+
+                w = ev.g * this.stepw;
+                x = (ev.t - this.xoffset) * this.stepw + this.yruler + this.kbwidth;
+                y = this.height - (ev.n - this.yoffset) * this.steph;
+
+                this.ctx.fillRect(x, y - noteHeight, w, noteHeight);
+
+                this.applyTexture(ev);
+            }
+
+            this.redrawYRuler();
+            this.redrawXRuler();
+            this.redrawMarker();
+            this.redrawAreaSel();
+        };
+        this.ready();
+    }
+
+    getAttr(n, def) {
+        let v = this.getAttribute(n);
+        if (v == "" || v == null) return def;
+        switch (typeof (def)) {
+            case "number":
+                if (v == "true") return 1;
+                v = +v;
+                if (isNaN(v)) return 0;
+                return v;
+        }
+        return v;
+    }
+});
+
+
+/// pianoroll creator  :
+
+function aRoll(id, target, width, height) {
+    // we build the pianoroll here
+    const pianoRoll = document.createElement('webaudio-pianoroll');
+
+    pianoRoll.setAttribute('id', id);
+    pianoRoll.setAttribute('width', width);
+    pianoRoll.setAttribute('height', height);
+
+    const targetElement = document.getElementById(target);
+
+    if (targetElement) {
+        targetElement.appendChild(pianoRoll);
+    } else {
+        console.error('Target element not found');
+    }
+}
+
+/// pianoroll builder below
+
+function setTempo(id) {
+    let pianoRoll = document.getElementById(id);
+    pianoRoll.tempo = 33;
+    pianoRoll.updateTimer();
+    console.log('Tempo:', pianoRoll.tempo);
+}
+
+function changeEditMode(id, mode) {
+    document.getElementById(id).editmode = mode;
+}
+
+function AddNote(id) {
+    let sequence = document.getElementById(id);
+    sequence.addNote(
+        0, // Tick
+        66, // Note
+        2, // Duration
+        39, // velocity???
+        0, // selected or not
+        'notes' // type (group)
+    );
+}
+
+function setMarkStart(id) {
+    let sequence = document.getElementById(id);
+    sequence.markstart = (3)
+}
+
+function setMarkEnd(id) {
+    let sequence = document.getElementById(id);
+    sequence.markend = (7)
+}
+
+function playHead(id) {
+    let sequence = document.getElementById(id);
+    sequence.locate(3);
+}
+
+function menu(id) {
+    console.log('open a menu here!!!')
+}
+
+function editing(id) {
+    let sequence = document.getElementById(id);
+    if (sequence.editing) {
+        sequence.editing = false
+        sequence.tool = 'select'
+        console.log('no editing')
+    } else {
+        sequence.editing = true
+        sequence.tool = 'create'
+        console.log('editing active')
+    }
+
+}
+
+function createExtendedNote(notes) {
+    if (notes.length === 0) {
+        return null;
+    }
+
+    let selectedNotes = notes.filter(note => note.f === 1);
+
+    if (selectedNotes.length === 0) {
+        return null;
+    }
+
+    let earliestStartNote = selectedNotes.reduce((earliest, note) => note.t < earliest.t ? note : earliest, selectedNotes[0]);
+
+    let latestEndNote = selectedNotes.reduce((latest, note) => (note.t + note.g) > (latest.t + latest.g) ? note : latest, selectedNotes[0]);
+
+    let newNote = {
+        id: Math.max(...notes.map(note => note.id)) + 1,  // new id build on previous build id
+        t: earliestStartNote.t,  // start of first selected note in timecode
+        n: earliestStartNote.n,  // use the same pitch as the first seledted note
+        g: (latestEndNote.t + latestEndNote.g) - earliestStartNote.t,  // compute total length
+        f: 1  // by default select the newly created note
+    };
+
+    return newNote;
+}
+
+
+function deleteSelectedNotes(id) {
+    let pianoroll = document.getElementById(id);
+    let sequence = pianoroll.sequence;
+    if (Array.isArray(sequence)) {
+        pianoroll.sequence = sequence.filter(note => note.f !== 1);
+        if (typeof pianoroll.redraw === 'function') {
+            pianoroll.redraw();
+        }
+    }
+}
+
+function group(id) {
+    let sequence = document.getElementById(id);
+    let notes = sequence.sequence;
+    let newNote = createExtendedNote(notes)
+    let noteToDel = [];
+    notes.forEach(note => {
+        if (note.f === 1) {
+            noteToDel.push(note)
+        }
+    });
+    noteToDel.forEach(note => {
+        const index = sequence.sequence.indexOf(note);
+        if (index !== -1) {
+            sequence.sequence.splice(index, 1);
+        }
+    });
+    sequence.addNote(newNote.t, 60, newNote.g, 8, 1, 'group', {in: 0, out: 0, group: noteToDel});
+}
+
+function notes(id) {
+    let sequence = document.getElementById(id);
+    let notes = sequence.sequence;
+    console.log(notes)
+
+}
+
+function selectAll(id) {
+    let pianoroll = document.getElementById(id);
+    pianoroll.sequence.forEach(note => {
+        note.f = 1;
+    });
+    pianoroll.redraw();
+}
+
+function deSelectAll(id) {
+    let pianoroll = document.getElementById(id);
+    pianoroll.sequence.forEach(note => {
+        note.f = 0;
+    });
+    pianoroll.redraw();
+}
+
+function marker(id) {
+    const pianoRoll = document.getElementById(id);
+    pianoRoll.marker(12, 'playheadID1', 'My First Playhead');
+}
+
+function removeMarker(id) {
+    const pianoRoll = document.getElementById(id);
+    pianoRoll.removeMarker('playheadID1');
+}
+
+///
+
+function clear_now() {
+    console.clear()
+}
+