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

/**
 * @Author: Bachir Soussi Chiadmi <bach>
 * @Date:   18-12-2017
 * @Email:  bachir@figureslibres.io
 * @Filename: corpus.js
 * @Last modified by:   bach
 * @Last modified time: 20-12-2017
 * @License: GPL-V3
 */

/**
  * depends on :
  *

  * physics.js : http://jonobr1.com/Physics/#
  * EaselJS : https://createjs.com/docs/easeljs/modules/EaselJS.html
  *
  */

(function($) {

  EdlpCorpus = function(){
    var _$container = $('body');
    var _$canvas = $('<canvas id="edlp-map">').appendTo(_$container);
    var _canvas = _$canvas[0];
    var _ctx = _canvas.getContext('2d');
    var _canvas_props = {
      'margin_top':100,
      'margin_right':0,
      'margin_bottom':100,
      'margin_left':0
    };
    var _physics = new Physics();
    // var _stage = new createjs.Stage('edlp-map');
    var _nodes = [];
    // var _particules = [];
    var _p_radius = 3; // nodes radius (real radius, not diametre)
    var _p_velocity_factor = 0.5;
    var _m_pos = {x:0, y:0};
    var _node_hover_id = -1;
    var _$entrees_block = $('#block-edlpentreesblock');
    var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);

    // Colors depend on edlp_vars loaded by edlptheme
    // console.log('Corpus : edlp_vars', edlp_vars);

    //     ____      _ __
    //    /  _/___  (_) /______
    //    / // __ \/ / __/ ___/
    //  _/ // / / / / /_(__  )
    // /___/_/ /_/_/\__/____/
    function init(){
      console.log("EdlpCorpus init()");
      // console.log("document", document);
      initMap();

    };

    function initMap(){
      console.log("EdlpCorpus initMap()");
      // console.log('_physics',_physics);
      initCanvas();
      loadCorpus();
    };

    //    ______
    //   / ____/___ _____ _   ______ ______
    //  / /   / __ `/ __ \ | / / __ `/ ___/
    // / /___/ /_/ / / / / |/ / /_/ (__  )
    // \____/\__,_/_/ /_/|___/\__,_/____/
    function initCanvas(){
      // resize the canvas to fill browser window dynamically
      window.addEventListener('resize', onResizeCanvas, false);
      onResizeCanvas();
    };

    function onResizeCanvas() {
      _canvas.width = window.innerWidth;
      _canvas.height = window.innerHeight;
      for (var i = 0; i < _nodes.length; i++) {
        _nodes[i].onResizeCanvas();
      }
    };

    //     ___      _
    //    /   |    (_)___ __  __
    //   / /| |   / / __ `/ |/_/
    //  / ___ |  / / /_/ />  <
    // /_/  |_|_/ /\__,_/_/|_|
    //       /___/
    function loadCorpus(){
      // console.log('drupalSettings',drupalSettings);
      // console.log('window.location', window.location);
      var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
      $.getJSON(path, {}, onCorpusLoaded);
    };

    function onCorpusLoaded(data){
      console.log('corpus loaded : data', data);
      // console.log('first node', data.nodes[0]);
      // buildParticles(data.nodes);
      buildNodes(data.nodes);
      initEvents();
      startAnime();
    };

    //     _   __          __
    //    / | / /___  ____/ /__  _____
    //   /  |/ / __ \/ __  / _ \/ ___/
    //  / /|  / /_/ / /_/ /  __(__  )
    // /_/ |_/\____/\__,_/\___/____/

    function buildNodes(nodes){
      console.log("buildNodes", nodes);
      var x,y,d;
      for (var i in nodes) {
        // console.log('i',i);
        d = i < 1 ? true : false;
        _nodes.push(new Node(i,nodes[i],d));
        // if(i==0)
        //   break;
      }
    };

    function Node(i,node,d){
      this.id = i;
      for(key in node)
        this[key] = node[key];

      this.debug = d;
      this.mass = 8;
      this.base_radius = _p_radius;
      this.g = {
        l : 1, // drawing line width
        s : 1 // drawing space between squares
      };
      this.real_radius = this.base_radius + (this.g.l+this.g.s)*this.entrees.length;
      this.wall_limits = {
        top:    _canvas_props.margin_top  +this.real_radius,
        right:  _canvas.width  -_canvas_props.margin_right  -this.real_radius,
        bottom: _canvas.height -_canvas_props.margin_bottom -this.real_radius,
        left:   _canvas_props.margin_left +this.real_radius
      }
      this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
      this.y = this.wall_limits.top  + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);

      this.hover = false;
      // physics
      this.p = _physics.makeParticle(this.mass, this.x, this.y);
      this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);


      // prototypes
      if (typeof Node.initialized == "undefined") {

        // Node.prototype.init = function(){
        //   // console.log("Node : init()", this);
        //   // this.draw();
        // };

        Node.prototype.onResizeCanvas = function(){
          this.wall_limits = {
            top:    _canvas_props.margin_top  +this.real_radius,
            right:  _canvas.width  -_canvas_props.margin_right  -this.real_radius,
            bottom: _canvas.height -_canvas_props.margin_bottom -this.real_radius,
            left:   _canvas_props.margin_left +this.real_radius
          }
          // TODO: when canvas is smaller what about nodes hors champs, they are coming back alone but it's too long
        };

        Node.prototype.onUpdate = function(){
          this.checkWallBouncing();
          this.updatePos();
          this.checkMouse();
          // if(this.debug)
          //   console.log("Node pos: ", {x:this.x, y:this.y});
          this.draw();
        };

        Node.prototype.checkWallBouncing = function(){
          if(
            (this.x < this.wall_limits.left && this.p.velocity.x < 0)
            || (this.x > this.wall_limits.right && this.p.velocity.x > 0)
          ){
            // console.log("bounce x");
            this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
          }
          if(
            (this.y < this.wall_limits.top && this.p.velocity.y < 0)
            || (this.y > this.wall_limits.bottom && this.p.velocity.y > 0)
          ){
            // console.log("bounce y");
            this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
          }
        };

        Node.prototype.updatePos = function(){
          this.x = this.p.position.x;
          this.y = this.p.position.y;
        };

        Node.prototype.checkMouse = function(){

          if( _m_pos.x > this.x - this.real_radius
           && _m_pos.x < this.x + this.real_radius
           && _m_pos.y > this.y - this.real_radius
           && _m_pos.y < this.y + this.real_radius){
            if(_node_hover_id == -1 || _node_hover_id == this.id){
              console.log("Node hover", this.id);
              this.hover = true;
              this.highlightEntries();
              _node_hover_id = this.id;
            }
          }else{
            this.hover = false;
            if (_node_hover_id == this.id) {
              _node_hover_id = -1;
              _$entrees_block_termlinks.removeClass('highlighted');
            }
          }
        };

        Node.prototype.highlightEntries = function(){
          _$entrees_block_termlinks.removeClass('highlighted');
          var entree;
          for (var i = 0; i < this.entrees.length; i++) {
            entree = this.entrees[i];
            _$entrees_block_termlinks.filter(function(){
              return $(this).attr('tid') == entree;
            }).addClass('highlighted');
          }
        }

        Node.prototype.draw = function(){
          _ctx.beginPath();
          _ctx.lineWidth = this.g.l*2;//this.hover ? this.g.l*2 : this.g.l;
          var r,d;
          for (var i = 0; i < this.entrees.length; i++) {
            // _ctx.fillStyle = i == 0 ? _entrees_colors[this.entrees[i]] : "#fff";
            // _ctx.strokeStyle = _entrees_colors[this.entrees[i]];
            _ctx.fillStyle = i == 0 ? edlp_vars['e_col_'+this.entrees[i]] : "#fff";
            _ctx.strokeStyle = edlp_vars['e_col_'+this.entrees[i]];
            r = this.base_radius + (this.g.l+this.g.s)*i; // radius
            d = r*2; // diametre
            if (i == 0) {
              _ctx.fillRect(this.x - r,this.y - r,d,d);
            }
            _ctx.strokeRect(this.x - r,this.y - r,d,d);
          }
          _ctx.closePath();
          // _ctx.beginPath();
          // _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
          // _ctx.fillRect(this.x, this.y, this.base_radius, this.base_radius);
          // _ctx.closePath();
        };

        Node.initialized = true;
      }

      // this.init();
    };

    //     ____  __               _
    //    / __ \/ /_  __  _______(_)_________
    //   / /_/ / __ \/ / / / ___/ / ___/ ___/
    //  / ____/ / / / /_/ (__  ) / /__(__  )
    // /_/   /_/ /_/\__, /____/_/\___/____/
    //             /____/
    // TODO: how to use particule collision in new OOP Node() contexte
    function checkParticulesCollisions(){
      // colisions between _particules
      for (var p = 0, l = _particules.length; p < l; p++) {
        var particule = _particules[p];
        // var theta = 360 / (Math.PI * _p_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 <= _p_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 < _p_radius*2) {
              var makeup = _p_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);

            }
          }
        }
      }
    };

    //     ______                 __
    //    / ____/   _____  ____  / /______
    //   / __/ | | / / _ \/ __ \/ __/ ___/
    //  / /___ | |/ /  __/ / / / /_(__  )
    // /_____/ |___/\___/_/ /_/\__/____/
    function initEvents(){
      _$canvas
        .on('mousemove', function(event) {
          event.preventDefault();
          console.log("onMouseMove");
          _m_pos.x = event.originalEvent.clientX;
          _m_pos.y = event.originalEvent.clientY;
          // console.log("/ _ / - / _ /");
          // console.log("Node pos: ", {x:_nodes[0].x, y:_nodes[0].y});
          // console.log("Mouse pos: ", {x:_m_pos.x, y:_m_pos.y});
        })
        .on('click', function(event) {
          if(event.target.tagName != "A" && event.target.tagName != "INPUT"){
            console.log("Corpus : click", event);
            event.preventDefault();
            if(_node_hover_id != -1){
              console.log("click on node", _nodes[_node_hover_id]);
            }
          }
        });

      _$entrees_block_termlinks.on('click', function(event) {
        event.preventDefault();
        var $li = $(this).parents('li');
        if(!$li.is('.opened')){
          _$entrees_block_termlinks.parents('li').removeClass('opened');
          $li.addClass('opened');
        }else{
          $li.removeClass('opened');
        }
        return false;
      });
    };


    //     ____                 __
    //    / __ \___  ____  ____/ /__  _____
    //   / /_/ / _ \/ __ \/ __  / _ \/ ___/
    //  / _, _/  __/ / / / /_/ /  __/ /
    // /_/ |_|\___/_/ /_/\__,_/\___/_/
    function render(){
      _ctx.clearRect(0, 0, _canvas.width, _canvas.height);

      for (var i = 0; i < _nodes.length; i++) {
        _nodes[i].onUpdate();
      }
      if(_node_hover_id != -1){
        _canvas.style.cursor = 'pointer';
      }else{
        _canvas.style.cursor = 'auto';
      }
    };

    function startAnime(){
      _physics.onUpdate(render);
      _physics.play()
    };

    init();
  }


  $(document).ready(function($) {
    var edlpcorpus = new EdlpCorpus();
  });


})(jQuery);