diff -r eff9460bd4f2 -r e944c017b8c8 annot-server/static/js/pianoroll.js --- a/annot-server/static/js/pianoroll.js Tue Jan 13 10:46:05 2015 +0100 +++ b/annot-server/static/js/pianoroll.js Tue Jan 13 14:03:31 2015 +0100 @@ -52,8 +52,8 @@ // Init containers var containerList = []; -containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg, lineColor, lineInterval)); -containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg, lineColor, lineInterval)); +containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight1 / 128)); +containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight2 / 128)); // Line between two containers var graphics = new PIXI.Graphics(); @@ -211,7 +211,7 @@ var PIXI = require('pixi'); var randomColor = require('randomColor'); -function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval){ +function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, noteHeight){ var _this = this; this.container = new PIXI.DisplayObjectContainer(); this.container.position.x = xInit; @@ -226,11 +226,17 @@ this.colorsReg = colorsReg || {}; this.lineColor = lineColor; this.lineInterval = lineInterval; + this.offsetMusic = offsetMusic || 0; + this.noteHeight = noteHeight; this.addNote = function(note, startTime, duration, velocity, canal){ //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight); - var beginX = (offsetMusic + startTime) * this.pixelsPerSecond / 1000; + var beginX = (this.offsetMusic + startTime) * this.pixelsPerSecond / 1000; var width = duration * this.pixelsPerSecond / 1000; + if((beginX+width) < Math.abs(this.container.x) - this.width) { + // not visible. do nothing + return; + } // We draw the rectangle var graphics = new PIXI.Graphics(); //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity); @@ -281,20 +287,25 @@ this.removePassedObjets = function(){ var nbChilds = _this.container.children.length; - var i = 0, childIsNowDisplayed = false; + var i = 0, childIsNowDisplayed = false, childrenToRemove = []; while(i