corpus ajax loaded and displayed as physics map

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

@@ -1,12 +1,12 @@
 (function($) {
 
-
   EdlpCorpus = function(){
-    var $container = $('body>div.layout-container');
+    var $container = $('body');
     var $canvas = $('<canvas>').addClass('edlp-map').appendTo($container);
     var canvas = $canvas[0];
     var ctx = canvas.getContext('2d');
     var physics = new Physics();
+    var particules = [];
 
     function init(){
       console.log("EdlpCorpus init()");
@@ -15,8 +15,141 @@
 
     function initMap(){
       console.log("EdlpCorpus initMap()");
-      console.log('physics',physics);
+      // console.log('physics',physics);
+      initCanvas();
+      loadCorpus();
+    };
+
+    function initCanvas(){
+      // resize the canvas to fill browser window dynamically
+      window.addEventListener('resize', resizeCanvas, false);
+      resizeCanvas();
+    };
+
+    function resizeCanvas() {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+
+    function loadCorpus(){
+      // console.log('drupalSettings',drupalSettings);
+      console.log('window.location', window.location);
+      var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
+      $.getJSON(path, {}, function(data){
+        console.log('corpus loaded : data', data);
+        // console.log('first node', data.nodes[0]);
+        buildMap(data.nodes);
+        startAnime();
+      });
+    };
+
+    function buildMap(nodes){
+      var x,y,p;
+      var mass = 8;
+      console.log("physics", physics);
+      for (var i in nodes) {
+        // console.log(nodes[i]);
+        x = Math.random()*canvas.width;
+        y = Math.random()*canvas.height;
+        p = physics.makeParticle(mass, x, y);
+        p.velocity = new Physics.Vector((Math.random()-0.5)*0.10, (Math.random()-0.5)*0.10);
+        // if(particules.length){
+          // for (var i = 0; i < particules.length; i++) {
+          //   physics.makeAttraction(p, particules[i], strength, minDistance);
+          // }
+        // }
+        particules.push(p);
       }
+    };
+
+    function render(){
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      var radius = 5;
+
+      // colisions between particules
+      for (var p = 0, l = particules.length; p < l; p++) {
+        var particule = particules[p];
+        // var theta = 360 / (Math.PI * radius);
+        if(!particule.attracted) continue;
+        for (var q = 0; q < p; q++) {
+          if(q==p) continue;
+
+          var a = particule;
+          var b = particules[q];
+          if(!b.attracted) continue;
+          var d = a.distanceTo(b);
+
+          // apply new forces if colliding
+          if(d <= radius*2){
+
+            var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass);
+            var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass);
+            var newVelX2 = (b.velocity.x * (b.mass - a.mass) + (2 * a.mass * a.velocity.x)) / (a.mass + b.mass);
+            var newVelY2 = (b.velocity.y * (b.mass - a.mass) + (2 * a.mass * a.velocity.y)) / (a.mass + b.mass);
+
+            a.velocity.x = newVelX1;
+            a.velocity.y = newVelY1;
+            b.velocity.x = newVelX2;
+            b.velocity.y = newVelY2;
+
+            a.velocity.multiplyScalar(0.75);
+            b.velocity.multiplyScalar(0.75);
+
+
+            // move particles if they overlap
+            if (d < radius*2) {
+              var makeup = radius - d/2;
+              var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x);
+
+              b.position.x += makeup * Math.cos(angle);
+              b.position.y += makeup * Math.sin(angle);
+
+              angle += Math.PI;
+
+              a.position.x += makeup * Math.cos(angle);
+              a.position.y += makeup * Math.sin(angle);
+
+            }
+          }
+        }
+      }
+
+      for (var i = 0; i < particules.length; i++) {
+        var p = particules[i];
+        // wall boucing
+        if(p.position.x < 0+radius || p.position.x > canvas.width-radius){
+          // console.log("bounce x");
+          p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
+        }
+        if(p.position.y < 0+radius || p.position.y > canvas.height-radius){
+          // console.log("bounce y");
+          p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
+        }
+
+
+
+        // draw the ball
+        ctx.beginPath();
+        ctx.fillRect(p.position.x, p.position.y, 8, 8);
+        if(p.attracted){
+          ctx.fillStyle = "red";
+        }else{
+          ctx.fillStyle = "black";
+        }
+        ctx.fill();
+      }
+
+
+    };
+
+    function startAnime(){
+      physics.onUpdate(render);
+      // render();
+
+      physics.play()
+    };
+
+
 
     init();
   }

sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css

@@ -0,0 +1,7 @@
+canvas.edlp-map {
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  z-index: 0; }

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

@@ -1,12 +1,12 @@
 (function($) {
 
-
   EdlpCorpus = function(){
-    var $container = $('body>div.layout-container');
+    var $container = $('body');
     var $canvas = $('<canvas>').addClass('edlp-map').appendTo($container);
     var canvas = $canvas[0];
     var ctx = canvas.getContext('2d');
     var physics = new Physics();
+    var particules = [];
 
     function init(){
       console.log("EdlpCorpus init()");
@@ -15,8 +15,141 @@
 
     function initMap(){
       console.log("EdlpCorpus initMap()");
-      console.log('physics',physics);
+      // console.log('physics',physics);
+      initCanvas();
+      loadCorpus();
+    };
+
+    function initCanvas(){
+      // resize the canvas to fill browser window dynamically
+      window.addEventListener('resize', resizeCanvas, false);
+      resizeCanvas();
+    };
+
+    function resizeCanvas() {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+
+    function loadCorpus(){
+      // console.log('drupalSettings',drupalSettings);
+      console.log('window.location', window.location);
+      var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
+      $.getJSON(path, {}, function(data){
+        console.log('corpus loaded : data', data);
+        // console.log('first node', data.nodes[0]);
+        buildMap(data.nodes);
+        startAnime();
+      });
+    };
+
+    function buildMap(nodes){
+      var x,y,p;
+      var mass = 8;
+      console.log("physics", physics);
+      for (var i in nodes) {
+        // console.log(nodes[i]);
+        x = Math.random()*canvas.width;
+        y = Math.random()*canvas.height;
+        p = physics.makeParticle(mass, x, y);
+        p.velocity = new Physics.Vector((Math.random()-0.5)*0.10, (Math.random()-0.5)*0.10);
+        // if(particules.length){
+          // for (var i = 0; i < particules.length; i++) {
+          //   physics.makeAttraction(p, particules[i], strength, minDistance);
+          // }
+        // }
+        particules.push(p);
       }
+    };
+
+    function render(){
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      var radius = 5;
+
+      // colisions between particules
+      for (var p = 0, l = particules.length; p < l; p++) {
+        var particule = particules[p];
+        // var theta = 360 / (Math.PI * radius);
+        if(!particule.attracted) continue;
+        for (var q = 0; q < p; q++) {
+          if(q==p) continue;
+
+          var a = particule;
+          var b = particules[q];
+          if(!b.attracted) continue;
+          var d = a.distanceTo(b);
+
+          // apply new forces if colliding
+          if(d <= radius*2){
+
+            var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass);
+            var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass);
+            var newVelX2 = (b.velocity.x * (b.mass - a.mass) + (2 * a.mass * a.velocity.x)) / (a.mass + b.mass);
+            var newVelY2 = (b.velocity.y * (b.mass - a.mass) + (2 * a.mass * a.velocity.y)) / (a.mass + b.mass);
+
+            a.velocity.x = newVelX1;
+            a.velocity.y = newVelY1;
+            b.velocity.x = newVelX2;
+            b.velocity.y = newVelY2;
+
+            a.velocity.multiplyScalar(0.75);
+            b.velocity.multiplyScalar(0.75);
+
+
+            // move particles if they overlap
+            if (d < radius*2) {
+              var makeup = radius - d/2;
+              var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x);
+
+              b.position.x += makeup * Math.cos(angle);
+              b.position.y += makeup * Math.sin(angle);
+
+              angle += Math.PI;
+
+              a.position.x += makeup * Math.cos(angle);
+              a.position.y += makeup * Math.sin(angle);
+
+            }
+          }
+        }
+      }
+
+      for (var i = 0; i < particules.length; i++) {
+        var p = particules[i];
+        // wall boucing
+        if(p.position.x < 0+radius || p.position.x > canvas.width-radius){
+          // console.log("bounce x");
+          p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
+        }
+        if(p.position.y < 0+radius || p.position.y > canvas.height-radius){
+          // console.log("bounce y");
+          p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
+        }
+
+
+
+        // draw the ball
+        ctx.beginPath();
+        ctx.fillRect(p.position.x, p.position.y, 8, 8);
+        if(p.attracted){
+          ctx.fillStyle = "red";
+        }else{
+          ctx.fillStyle = "black";
+        }
+        ctx.fill();
+      }
+
+
+    };
+
+    function startAnime(){
+      physics.onUpdate(render);
+      // render();
+
+      physics.play()
+    };
+
+
 
     init();
   }

sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss

@@ -0,0 +1,7 @@
+canvas.edlp-map{
+  position: absolute;
+  box-sizing: border-box;
+  top:0; left:0;
+  // width:100%; height:100%;
+  z-index:0;
+}

sites/all/modules/figli/edlp_corpus/bower.json

@@ -14,6 +14,6 @@
     "tests"
   ],
   "dependencies": {
-    "PhysicsJS": "latest"
+    "physics": "latest"
   }
 }

sites/all/modules/figli/edlp_corpus/edlp_corpus.libraries.yml

@@ -6,7 +6,8 @@ corpus:
 
   version: VERSION
   js:
-    assets/dist/bower/physicsjs-full.js: { scope: footer }
+    assets/dist/bower/physics.js: { scope: footer }
     assets/dist/scripts/corpus.min.js: { scope: footer }
   dependencies:
+    - core/drupalSettings
     - core/jquery

sites/all/modules/figli/edlp_corpus/edlp_corpus.module

@@ -6,6 +6,10 @@
  */
 function edlp_corpus_page_attachments(array &$attachments) {
   //add here any conditions if you need to limit the pages
-
+  if (\Drupal::service('path.matcher')->isFrontPage()) {
     $attachments['#attached']['library'][] = 'edlp_corpus/corpus';
+    $attachments['#attached']['drupalSettings']['basepath'] = base_path();
+    // $attachments['#attached']['drupalSettings']['pathtoedlpcorpus'] = base_path() . drupal_get_path('module', 'edlp_corpus');
+    // $attachments['#attached']['drupalSettings']['pathtotfiles'] = PublicStream::basePath();
+  }
 }

sites/all/modules/figli/edlp_corpus/edlp_corpus.routing.yml

@@ -1,7 +1,7 @@
-edlp_corpus.content:
+edlp_corpus.corpusjson:
   path: '/edlp/corpus'
   defaults:
-    _controller: '\Drupal\edlp_corpus\Controller\CorpusController::content'
+    _controller: '\Drupal\edlp_corpus\Controller\CorpusController::contentjson'
     _title: 'Corpus'
   requirements:
     _permission: 'access content'

sites/all/modules/figli/edlp_corpus/gulpfile.js

@@ -42,6 +42,11 @@ gulp.task('bower', function() {
       "overrides":{
         "jquery":{
           "ignore":true
+        },
+        "physics": {
+          "main": [
+            './build/physics.js'
+          ]
         }
       }
     }))

sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php

@@ -3,19 +3,74 @@
 namespace Drupal\edlp_corpus\Controller;
 
 use Drupal\Core\Controller\ControllerBase;
+use Drupal\File\Entity\File;
+use Symfony\Component\HttpFoundation\JsonResponse;
+
 
 class CorpusController extends ControllerBase {
 
+
   /**
    * Display the markup.
    *
    * @return array
    */
-  public function content() {
+  public function contentjson() {
-    return array(
+
-      '#type' => 'markup',
+    // @see https://www.droptica.com/blog/drupal-8-restjson-integration-simple-javascript-application/
-      '#markup' => $this->t('Hello, Edlp Corpus!'),
+    // @see https://www.sitepoint.com/drupal-8-version-entityfieldquery/
+    // @see https://www.frobiovox.com/posts/2016/03/28/simplify-drupal-8-field-value-calls.html
+    // @see https://chromatichq.com/blog/dependency-injection-drupal-8-plugins
+
+    // Get a node storage object.
+    // $file_storage = \Drupal::entityManager()->getStorage('node')
+
+    $response = new JsonResponse();
+
+    $config = \Drupal::config('system.site');
+
+    $query = \Drupal::entityQuery('node')
+      ->condition('status', 1)
+      ->condition('type', 'enregistrement');
+
+    $nids = $query->execute();
+    $nodes = entity_load_multiple('node', $nids);
+
+    $nodes_data = [];
+    foreach ($nodes as $node) {
+
+      $entrees = [];
+      foreach ($node->get('field_entrees')->getValue() as $key => $term) {
+        $entrees[] = $term['target_id'];
+      }
+      $son_fid = $node->get('field_son')->getValue();
+      // TODO: how to get this fucking file uri, fuck !!
+      // $son_file = $file_storage->load($fid);
+      // $son_file = File::load($son_fid);
+      // $son_uri = $son_file->url();
+      // $son_uri = \Drupal\file\Entity\File::load($son_fid);//->getFileUri();
+      // $son_uri = file_create_url($node->get('field_son')->entity->getFileUri());
+
+      $nodes_data[] = array(
+        "nid" => $node->get('nid')->getString(),
+        "title" => $node->get('title')->getString(),
+        "description" => $node->get('field_description')->getString(),
+        "son_fid" => $son_fid,
+        // "son" => $son_file,
+        "entrees" => $entrees,
       );
     }
 
+    $data = array(
+      'date' => time(),
+      'site_name' => $config->get('name'),
+      'count' => count($nodes),
+      'nodes' => $nodes_data,
+    );
+
+    $response->setData($data);
+
+    return $response;
+  }
+
 }

sites/all/themes/custom/edlptheme/.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .npm-debug-log
+package-lock.json
 bower_components/

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -19,7 +19,8 @@ div.layout-container {
   height: 100%;
   padding: 1em;
   -webkit-box-sizing: border-box;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+  z-index: 1; }
 
 header[role="banner"] {
   outline: 1px solid blue; }

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -20,6 +20,7 @@ div.layout-container{
   width:100%; height:100%;
   padding:1em;
   box-sizing: border-box;
+  z-index: 1;
 }
 
 header[role="banner"]{