pre rendering each node in owne virtual canvas, then just move this canvas into the main scene

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -229,6 +229,12 @@
 
       this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
 
+      this.wall_bouncing_elasticity = 0.75;
+
+      this.canvas = document.createElement('canvas');
+      this.canvas_ctx = this.canvas.getContext('2d');
+
+      // node states
       this.hover = false;
       this.opened = false;
       this.faded = false;
@@ -236,7 +242,6 @@
       this.aside = false;
       this.scrambling = false;
 
-      this.wall_bouncing_elasticity = 0.75;
       // this.n_repulses = {};
 
       // prototypes
@@ -251,10 +256,48 @@
           this.ori_pos = {x:this.x,y:this.y};
           // TODO: don't forget to move ori_pos on window resize
 
+          this.draw();
           this.initPhysics();
 
         };
 
+        Node.prototype.draw = function(){
+          this.canvas.width = this.r*2;
+          this.canvas.height = this.r*2;
+          _ctx.clearRect(0, 0, this.r*2, this.r*2);
+          // carre plein
+          // clouleur aléatoire ds les entrees
+          // 3 tailles :
+          // - 1 entree : petit carre 5px
+          // - 2-3 entrees : moyen 7.5px
+          // - >3 entrees : grand 10px
+          // actif entouré de rouge
+
+          this.canvas_ctx.beginPath();
+          this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1;
+          // carre plein
+          // this.canvas_ctx.fillStyle = _ecolors[this.e_color];
+          // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+          // ou carre contour
+          this.canvas_ctx.lineWidth = 1.5;
+          this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
+          this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
+          this.canvas_ctx.strokeStyle = _ecolors[this.e_color];
+          this.canvas_ctx.strokeRect(0,0,this.r*2,this.r*2);
+
+          if(this.opened){
+            // carre plein
+            // this.canvas_ctx.lineWidth = '1px';
+            // this.canvas_ctx.strokeStyle = 'rgb(255,0,0)';
+            // this.canvas_ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
+            // ou carre contour
+            this.canvas_ctx.fillStyle = _ecolors[this.e_color];
+            this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
+          }
+          // this.canvas_ctx.globalAlpha = 1;
+          this.canvas_ctx.closePath();
+        };
+
         Node.prototype.initPhysics = function(){
           // particule
           this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -317,7 +360,7 @@
 
           // if(this.debug)
           //   console.log("Node pos: ", {x:this.x, y:this.y});
-          this.draw();
+          this.move();
         };
 
         Node.prototype.checkVelocityThreshold = function(){
@@ -395,16 +438,20 @@
         Node.prototype.open = function(){
           this.opened = true;
           _node_opened_id = this.id;
+          this.draw();
         };
         Node.prototype.close = function(){
           this.opened = false;
+          this.draw();
         };
 
         Node.prototype.fade = function(){
           this.faded = true;
+          this.draw();
         };
         Node.prototype.unFade = function(){
           this.faded = false;
+          this.draw();
         };
 
         Node.prototype.setCenteredOnEntree = function(tid){
@@ -417,6 +464,7 @@
           this.stopScrambling();
           this.unsetAside();
           this.attract.on = true;
+          this.draw();
         }
         Node.prototype.unsetCentered = function(){
           this.center = false;
@@ -483,7 +531,7 @@
           // this.scramble_CL.on = false;
         }
 
-        Node.prototype.draw = function(){
+        Node.prototype.move = function(){
           // carre plein
           // clouleur aléatoire ds les entrees
           // 3 tailles :
@@ -492,29 +540,31 @@
           // - >3 entrees : grand 10px
           // actif entouré de rouge
 
-          _ctx.beginPath();
-          _ctx.globalAlpha = this.faded ? 0.15 : 1;
+          // _ctx.beginPath();
+          // _ctx.globalAlpha = this.faded ? 0.15 : 1;
           // carre plein
           // _ctx.fillStyle = _ecolors[this.e_color];
           // _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
           // ou carre contour
-          _ctx.lineWidth = 1.5;
-          _ctx.fillStyle = 'rgb(255,255,255)';
-          _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          _ctx.strokeStyle = _ecolors[this.e_color];
-          _ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+          // _ctx.lineWidth = 1.5;
+          // _ctx.fillStyle = 'rgb(255,255,255)';
+          // _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+          // _ctx.strokeStyle = _ecolors[this.e_color];
+          // _ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+          //
+          // if(this.opened){
+          //   // carre plein
+          //   // _ctx.lineWidth = '1px';
+          //   // _ctx.strokeStyle = 'rgb(255,0,0)';
+          //   // _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
+          //   // ou carre contour
+          //   _ctx.fillStyle = _ecolors[this.e_color];
+          //   _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+          // }
+          // _ctx.globalAlpha = 1;
+          // _ctx.closePath();
 
-          if(this.opened){
-            // carre plein
-            // _ctx.lineWidth = '1px';
-            // _ctx.strokeStyle = 'rgb(255,0,0)';
-            // _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
-            // ou carre contour
-            _ctx.fillStyle = _ecolors[this.e_color];
-            _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          }
-          _ctx.globalAlpha = 1;
-          _ctx.closePath();
+          _ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r);
         };
 
         Node.initialized = true;

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -229,6 +229,12 @@
 
       this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
 
+      this.wall_bouncing_elasticity = 0.75;
+
+      this.canvas = document.createElement('canvas');
+      this.canvas_ctx = this.canvas.getContext('2d');
+
+      // node states
       this.hover = false;
       this.opened = false;
       this.faded = false;
@@ -236,7 +242,6 @@
       this.aside = false;
       this.scrambling = false;
 
-      this.wall_bouncing_elasticity = 0.75;
       // this.n_repulses = {};
 
       // prototypes
@@ -251,10 +256,48 @@
           this.ori_pos = {x:this.x,y:this.y};
           // TODO: don't forget to move ori_pos on window resize
 
+          this.draw();
           this.initPhysics();
 
         };
 
+        Node.prototype.draw = function(){
+          this.canvas.width = this.r*2;
+          this.canvas.height = this.r*2;
+          _ctx.clearRect(0, 0, this.r*2, this.r*2);
+          // carre plein
+          // clouleur aléatoire ds les entrees
+          // 3 tailles :
+          // - 1 entree : petit carre 5px
+          // - 2-3 entrees : moyen 7.5px
+          // - >3 entrees : grand 10px
+          // actif entouré de rouge
+
+          this.canvas_ctx.beginPath();
+          this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1;
+          // carre plein
+          // this.canvas_ctx.fillStyle = _ecolors[this.e_color];
+          // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+          // ou carre contour
+          this.canvas_ctx.lineWidth = 1.5;
+          this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
+          this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
+          this.canvas_ctx.strokeStyle = _ecolors[this.e_color];
+          this.canvas_ctx.strokeRect(0,0,this.r*2,this.r*2);
+
+          if(this.opened){
+            // carre plein
+            // this.canvas_ctx.lineWidth = '1px';
+            // this.canvas_ctx.strokeStyle = 'rgb(255,0,0)';
+            // this.canvas_ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
+            // ou carre contour
+            this.canvas_ctx.fillStyle = _ecolors[this.e_color];
+            this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
+          }
+          // this.canvas_ctx.globalAlpha = 1;
+          this.canvas_ctx.closePath();
+        };
+
         Node.prototype.initPhysics = function(){
           // particule
           this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -317,7 +360,7 @@
 
           // if(this.debug)
           //   console.log("Node pos: ", {x:this.x, y:this.y});
-          this.draw();
+          this.move();
         };
 
         Node.prototype.checkVelocityThreshold = function(){
@@ -395,16 +438,20 @@
         Node.prototype.open = function(){
           this.opened = true;
           _node_opened_id = this.id;
+          this.draw();
         };
         Node.prototype.close = function(){
           this.opened = false;
+          this.draw();
         };
 
         Node.prototype.fade = function(){
           this.faded = true;
+          this.draw();
         };
         Node.prototype.unFade = function(){
           this.faded = false;
+          this.draw();
         };
 
         Node.prototype.setCenteredOnEntree = function(tid){
@@ -417,6 +464,7 @@
           this.stopScrambling();
           this.unsetAside();
           this.attract.on = true;
+          this.draw();
         }
         Node.prototype.unsetCentered = function(){
           this.center = false;
@@ -483,7 +531,7 @@
           // this.scramble_CL.on = false;
         }
 
-        Node.prototype.draw = function(){
+        Node.prototype.move = function(){
           // carre plein
           // clouleur aléatoire ds les entrees
           // 3 tailles :
@@ -492,29 +540,31 @@
           // - >3 entrees : grand 10px
           // actif entouré de rouge
 
-          _ctx.beginPath();
-          _ctx.globalAlpha = this.faded ? 0.15 : 1;
+          // _ctx.beginPath();
+          // _ctx.globalAlpha = this.faded ? 0.15 : 1;
           // carre plein
           // _ctx.fillStyle = _ecolors[this.e_color];
           // _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
           // ou carre contour
-          _ctx.lineWidth = 1.5;
-          _ctx.fillStyle = 'rgb(255,255,255)';
-          _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          _ctx.strokeStyle = _ecolors[this.e_color];
-          _ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+          // _ctx.lineWidth = 1.5;
+          // _ctx.fillStyle = 'rgb(255,255,255)';
+          // _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+          // _ctx.strokeStyle = _ecolors[this.e_color];
+          // _ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+          //
+          // if(this.opened){
+          //   // carre plein
+          //   // _ctx.lineWidth = '1px';
+          //   // _ctx.strokeStyle = 'rgb(255,0,0)';
+          //   // _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
+          //   // ou carre contour
+          //   _ctx.fillStyle = _ecolors[this.e_color];
+          //   _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+          // }
+          // _ctx.globalAlpha = 1;
+          // _ctx.closePath();
 
-          if(this.opened){
-            // carre plein
-            // _ctx.lineWidth = '1px';
-            // _ctx.strokeStyle = 'rgb(255,0,0)';
-            // _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
-            // ou carre contour
-            _ctx.fillStyle = _ecolors[this.e_color];
-            _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          }
-          _ctx.globalAlpha = 1;
-          _ctx.closePath();
+          _ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r);
         };
 
         Node.initialized = true;

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -753,7 +753,8 @@
         // console.log('AudioPlayer openDocument', node);
         if(typeof node == 'undefined'
           || typeof node.nid ==  'undefined'
-          || typeof node.audio_url == 'undfined'){
+          || typeof node.audio_url == 'undfined'
+          || typeof node.document_url == 'undfined'){
           console.warn('AudioPlayer openDocument() node is malformed', node);
           return false;
         }
@@ -766,9 +767,14 @@
 
           // add the document opening to history to be able to share and play audio from any where
           if(caller != "history_first_load"){
-            state = {
+            var state = {
               audio:true,
-              node:node,
+              node:{
+                nid:node.nid,
+                audio_url:node.audio_url,
+                document_url:node.document_url,
+                title:node.title || null,
+              },
               historic_index : this.currentHistoricIndex,
             };
 

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -753,7 +753,8 @@
         // console.log('AudioPlayer openDocument', node);
         if(typeof node == 'undefined'
           || typeof node.nid ==  'undefined'
-          || typeof node.audio_url == 'undfined'){
+          || typeof node.audio_url == 'undfined'
+          || typeof node.document_url == 'undfined'){
           console.warn('AudioPlayer openDocument() node is malformed', node);
           return false;
         }
@@ -766,9 +767,14 @@
 
           // add the document opening to history to be able to share and play audio from any where
           if(caller != "history_first_load"){
-            state = {
+            var state = {
               audio:true,
-              node:node,
+              node:{
+                nid:node.nid,
+                audio_url:node.audio_url,
+                document_url:node.document_url,
+                title:node.title || null,
+              },
               historic_index : this.currentHistoricIndex,
             };