From fc8365264dc057db4de6b2526b0d305327366f08 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Thu, 21 Dec 2017 22:15:25 +0100 Subject: [PATCH] map is improving : drawing squares with entries and fake colors, got the hover behaviour working --- .../dist/bower/{physics.js => physics.min.js} | 0 .../assets/dist/scripts/corpus.min.js | 325 ++++++++++++++---- .../assets/dist/styles/corpus.min.css | 2 +- .../edlp_corpus/assets/scripts/corpus.js | 325 ++++++++++++++---- .../edlp_corpus/assets/styles/corpus.scss | 11 +- .../all/modules/figli/edlp_corpus/bower.json | 3 +- .../edlp_corpus/edlp_corpus.libraries.yml | 11 +- .../figli/edlp_corpus/edlp_corpus.routing.yml | 8 + .../all/modules/figli/edlp_corpus/gulpfile.js | 18 + .../src/Controller/CorpusController.php | 10 + .../edlptheme/assets/dist/styles/app.min.css | 4 +- .../custom/edlptheme/assets/styles/app.scss | 10 + .../edlptheme/assets/styles/base/_colors.scss | 21 ++ 13 files changed, 603 insertions(+), 145 deletions(-) rename sites/all/modules/figli/edlp_corpus/assets/dist/bower/{physics.js => physics.min.js} (100%) diff --git a/sites/all/modules/figli/edlp_corpus/assets/dist/bower/physics.js b/sites/all/modules/figli/edlp_corpus/assets/dist/bower/physics.min.js similarity index 100% rename from sites/all/modules/figli/edlp_corpus/assets/dist/bower/physics.js rename to sites/all/modules/figli/edlp_corpus/assets/dist/bower/physics.min.js diff --git a/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js b/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js index 6c7e8edb5..a22b263f7 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js +++ b/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js @@ -1,86 +1,289 @@ +/** + * @Author: Bachir Soussi Chiadmi + * @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 = $('').addClass('edlp-map').appendTo($container); - var canvas = $canvas[0]; - var ctx = canvas.getContext('2d'); - var physics = new Physics(); - var particules = []; + var _$container = $('body'); + var _$canvas = $('').appendTo(_$container); + var _canvas = _$canvas[0]; + var _ctx = _canvas.getContext('2d'); + var _canvas_props = { + 'margin-top':100, + 'margin-bottom':100 + }; + var _physics = new Physics(); + // var _stage = new createjs.Stage('edlp-map'); + var _nodes = []; + // var _particules = []; + var _p_radius = 6; + var _p_velocity_factor = 0.5; + var _m_pos = {x:0, y:0}; + var _node_hover_id = -1; + var _entrees_colors = { + "130":"rgb(75, 143, 126)", + "121":"rgb(134, 142, 36)", + "134":"rgb(43, 143, 47)", + "121":"rgb(58, 51, 182)", + "125":"rgb(44, 159, 87)", + "119":"rgb(196, 137, 120)", + "132":"rgb(82, 112, 187)", + "122":"rgb(251, 84, 211)", + "129":"rgb(224, 116, 131)", + "120":"rgb(101, 88, 69)", + "130":"rgb(126, 8, 104)", + "118":"rgb(14, 113, 33)", + "127":"rgb(218, 189, 66)", + "133":"rgb(3, 153, 187)", + "128":"rgb(57, 154, 28)", + "124":"rgb(112, 133, 64)", + "116":"rgb(25, 27, 255)", + "117":"rgb(39, 157, 132)", + "131":"rgb(82, 25, 171)", + "126":"rgb(212, 156, 182)", + "123":"rgb(73, 119, 21)" + }; + + // ____ _ __ + // / _/___ (_) /______ + // / // __ \/ / __/ ___/ + // _/ // / / / / /_(__ ) + // /___/_/ /_/_/\__/____/ function init(){ console.log("EdlpCorpus init()"); + // console.log("document", document); initMap(); }; function initMap(){ console.log("EdlpCorpus initMap()"); - // console.log('physics',physics); + // console.log('_physics',_physics); initCanvas(); + initEvents(); loadCorpus(); + }; + // ______ + // / ____/___ _____ _ ______ ______ + // / / / __ `/ __ \ | / / __ `/ ___/ + // / /___/ /_/ / / / / |/ / /_/ (__ ) + // \____/\__,_/_/ /_/|___/\__,_/____/ function initCanvas(){ // resize the canvas to fill browser window dynamically - window.addEventListener('resize', resizeCanvas, false); - resizeCanvas(); + window.addEventListener('resize', onResizeCanvas, false); + onResizeCanvas(); }; - function resizeCanvas() { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + function onResizeCanvas() { + _canvas.width = window.innerWidth; + _canvas.height = window.innerHeight - _canvas_props['margin-top'] - _canvas_props['margin-bottom']; + _canvas.style['margin-top'] = _canvas_props['margin-top']+"px"; + _canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px"; + }; + // ______ __ + // / ____/ _____ ____ / /______ + // / __/ | | / / _ \/ __ \/ __/ ___/ + // / /___ | |/ / __/ / / / /_(__ ) + // /_____/ |___/\___/_/ /_/\__/____/ + function initEvents(){ + _$container + .on('mousemove', function(event) { + event.preventDefault(); + // console.log("onMouseMove", event); + _m_pos.x = event.originalEvent.clientX; + _m_pos.y = event.originalEvent.clientY; + // 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) { + event.preventDefault(); + if(_node_hover_id != -1){ + console.log("click on node", _nodes[_node_hover_id]); + } + }); + }; + + // ___ _ + // / | (_)___ __ __ + // / /| | / / __ `/ |/_/ + // / ___ | / / /_/ /> < + // /_/ |_|_/ /\__,_/_/|_| + // /___/ function loadCorpus(){ // console.log('drupalSettings',drupalSettings); - console.log('window.location', window.location); + // 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); + // buildParticles(data.nodes); + buildNodes(data.nodes); startAnime(); }); }; - function buildMap(nodes){ - var x,y,p; - var mass = 8; - console.log("physics", physics); + // _ __ __ + // / | / /___ ____/ /__ _____ + // / |/ / __ \/ __ / _ \/ ___/ + // / /| / /_/ / /_/ / __(__ ) + // /_/ |_/\____/\__,_/\___/____/ + + function buildNodes(nodes){ + console.log("buildNodes", nodes); + var x,y,d; 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); + // console.log('i',i); + x = _p_radius*2 + Math.random()*(_canvas.width - _p_radius*4); + y = _p_radius*2 + Math.random()*(_canvas.height - _p_radius*4); + d = i < 1 ? true : false; + _nodes.push(new Node(i,nodes[i],x,y,d)); + // if(i==4) + // break; } }; - function render(){ - ctx.clearRect(0, 0, canvas.width, canvas.height); - var radius = 5; + function Node(i,n,x,y,d){ + this.id = i; + for(key in n) + this[key] = n[key]; - // colisions between particules - for (var p = 0, l = particules.length; p < l; p++) { - var particule = particules[p]; - // var theta = 360 / (Math.PI * radius); + this.debug = d; + this.radius = _p_radius; + this.mass = 8; + this.g = { + l : 1, // drawing line width + s : 1 // drawing space between squares + } + this.x = x; + this.y = y; + 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.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(){ + // TODO: correct waal bouncing with centered squares + if( + (this.x < 0 && this.p.velocity.x < 0) + || (this.x > _canvas.width-this.radius && this.p.velocity.x > 0) + ){ + // console.log("bounce x"); + this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75); + } + if( + (this.y < 0 && this.p.velocity.y < 0) + || (this.y > _canvas.height-this.radius && 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(){ + // TODO: get the real w and h of node (with entrees squares) + if( _m_pos.x > this.x + && _m_pos.x < this.x+this.radius + && _m_pos.y > this.y + && _m_pos.y < this.y+this.radius){ + if(_node_hover_id == -1 || _node_hover_id == this.id){ + console.log("Node hover", this.id); + this.hover = true; + _node_hover_id = this.id; + } + }else{ + this.hover = false; + if (_node_hover_id == this.id) { + _node_hover_id = -1; + } + } + }; + + Node.prototype.draw = function(){ + // TODO: center the squares around the pos + _ctx.beginPath(); + _ctx.lineWidth = this.g.l; + for (var i = 0; i < this.entrees.length; i++) { + _ctx.strokeStyle = this.hover ? "red" : _entrees_colors[this.entrees[i]]; + _ctx.strokeRect(this.x-4*i, this.y-4*i, this.radius+8*i, this.radius+8*i); + } + _ctx.closePath(); + // _ctx.beginPath(); + // _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black"; + // _ctx.fillRect(this.x, this.y, this.radius, this.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]; + var b = _particules[q]; if(!b.attracted) continue; var d = a.distanceTo(b); // apply new forces if colliding - if(d <= radius*2){ + 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); @@ -97,8 +300,8 @@ // move particles if they overlap - if (d < radius*2) { - var makeup = radius - d/2; + 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); @@ -113,44 +316,26 @@ } } } + }; - 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); - } + // ____ __ + // / __ \___ ____ ____/ /__ _____ + // / /_/ / _ \/ __ \/ __ / _ \/ ___/ + // / _, _/ __/ / / / /_/ / __/ / + // /_/ |_|\___/_/ /_/\__,_/\___/_/ + function render(){ + _ctx.clearRect(0, 0, _canvas.width, _canvas.height); - - - // 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(); + for (var i = 0; i < _nodes.length; i++) { + _nodes[i].onUpdate(); } - - }; function startAnime(){ - physics.onUpdate(render); - // render(); - - physics.play() + _physics.onUpdate(render); + _physics.play() }; - - init(); } diff --git a/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css b/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css index bbabd6b09..9480053b9 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css +++ b/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css @@ -1,4 +1,4 @@ -canvas.edlp-map { +canvas#edlp-map { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; diff --git a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js index 6c7e8edb5..a22b263f7 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js @@ -1,86 +1,289 @@ +/** + * @Author: Bachir Soussi Chiadmi + * @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 = $('').addClass('edlp-map').appendTo($container); - var canvas = $canvas[0]; - var ctx = canvas.getContext('2d'); - var physics = new Physics(); - var particules = []; + var _$container = $('body'); + var _$canvas = $('').appendTo(_$container); + var _canvas = _$canvas[0]; + var _ctx = _canvas.getContext('2d'); + var _canvas_props = { + 'margin-top':100, + 'margin-bottom':100 + }; + var _physics = new Physics(); + // var _stage = new createjs.Stage('edlp-map'); + var _nodes = []; + // var _particules = []; + var _p_radius = 6; + var _p_velocity_factor = 0.5; + var _m_pos = {x:0, y:0}; + var _node_hover_id = -1; + var _entrees_colors = { + "130":"rgb(75, 143, 126)", + "121":"rgb(134, 142, 36)", + "134":"rgb(43, 143, 47)", + "121":"rgb(58, 51, 182)", + "125":"rgb(44, 159, 87)", + "119":"rgb(196, 137, 120)", + "132":"rgb(82, 112, 187)", + "122":"rgb(251, 84, 211)", + "129":"rgb(224, 116, 131)", + "120":"rgb(101, 88, 69)", + "130":"rgb(126, 8, 104)", + "118":"rgb(14, 113, 33)", + "127":"rgb(218, 189, 66)", + "133":"rgb(3, 153, 187)", + "128":"rgb(57, 154, 28)", + "124":"rgb(112, 133, 64)", + "116":"rgb(25, 27, 255)", + "117":"rgb(39, 157, 132)", + "131":"rgb(82, 25, 171)", + "126":"rgb(212, 156, 182)", + "123":"rgb(73, 119, 21)" + }; + + // ____ _ __ + // / _/___ (_) /______ + // / // __ \/ / __/ ___/ + // _/ // / / / / /_(__ ) + // /___/_/ /_/_/\__/____/ function init(){ console.log("EdlpCorpus init()"); + // console.log("document", document); initMap(); }; function initMap(){ console.log("EdlpCorpus initMap()"); - // console.log('physics',physics); + // console.log('_physics',_physics); initCanvas(); + initEvents(); loadCorpus(); + }; + // ______ + // / ____/___ _____ _ ______ ______ + // / / / __ `/ __ \ | / / __ `/ ___/ + // / /___/ /_/ / / / / |/ / /_/ (__ ) + // \____/\__,_/_/ /_/|___/\__,_/____/ function initCanvas(){ // resize the canvas to fill browser window dynamically - window.addEventListener('resize', resizeCanvas, false); - resizeCanvas(); + window.addEventListener('resize', onResizeCanvas, false); + onResizeCanvas(); }; - function resizeCanvas() { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + function onResizeCanvas() { + _canvas.width = window.innerWidth; + _canvas.height = window.innerHeight - _canvas_props['margin-top'] - _canvas_props['margin-bottom']; + _canvas.style['margin-top'] = _canvas_props['margin-top']+"px"; + _canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px"; + }; + // ______ __ + // / ____/ _____ ____ / /______ + // / __/ | | / / _ \/ __ \/ __/ ___/ + // / /___ | |/ / __/ / / / /_(__ ) + // /_____/ |___/\___/_/ /_/\__/____/ + function initEvents(){ + _$container + .on('mousemove', function(event) { + event.preventDefault(); + // console.log("onMouseMove", event); + _m_pos.x = event.originalEvent.clientX; + _m_pos.y = event.originalEvent.clientY; + // 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) { + event.preventDefault(); + if(_node_hover_id != -1){ + console.log("click on node", _nodes[_node_hover_id]); + } + }); + }; + + // ___ _ + // / | (_)___ __ __ + // / /| | / / __ `/ |/_/ + // / ___ | / / /_/ /> < + // /_/ |_|_/ /\__,_/_/|_| + // /___/ function loadCorpus(){ // console.log('drupalSettings',drupalSettings); - console.log('window.location', window.location); + // 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); + // buildParticles(data.nodes); + buildNodes(data.nodes); startAnime(); }); }; - function buildMap(nodes){ - var x,y,p; - var mass = 8; - console.log("physics", physics); + // _ __ __ + // / | / /___ ____/ /__ _____ + // / |/ / __ \/ __ / _ \/ ___/ + // / /| / /_/ / /_/ / __(__ ) + // /_/ |_/\____/\__,_/\___/____/ + + function buildNodes(nodes){ + console.log("buildNodes", nodes); + var x,y,d; 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); + // console.log('i',i); + x = _p_radius*2 + Math.random()*(_canvas.width - _p_radius*4); + y = _p_radius*2 + Math.random()*(_canvas.height - _p_radius*4); + d = i < 1 ? true : false; + _nodes.push(new Node(i,nodes[i],x,y,d)); + // if(i==4) + // break; } }; - function render(){ - ctx.clearRect(0, 0, canvas.width, canvas.height); - var radius = 5; + function Node(i,n,x,y,d){ + this.id = i; + for(key in n) + this[key] = n[key]; - // colisions between particules - for (var p = 0, l = particules.length; p < l; p++) { - var particule = particules[p]; - // var theta = 360 / (Math.PI * radius); + this.debug = d; + this.radius = _p_radius; + this.mass = 8; + this.g = { + l : 1, // drawing line width + s : 1 // drawing space between squares + } + this.x = x; + this.y = y; + 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.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(){ + // TODO: correct waal bouncing with centered squares + if( + (this.x < 0 && this.p.velocity.x < 0) + || (this.x > _canvas.width-this.radius && this.p.velocity.x > 0) + ){ + // console.log("bounce x"); + this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75); + } + if( + (this.y < 0 && this.p.velocity.y < 0) + || (this.y > _canvas.height-this.radius && 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(){ + // TODO: get the real w and h of node (with entrees squares) + if( _m_pos.x > this.x + && _m_pos.x < this.x+this.radius + && _m_pos.y > this.y + && _m_pos.y < this.y+this.radius){ + if(_node_hover_id == -1 || _node_hover_id == this.id){ + console.log("Node hover", this.id); + this.hover = true; + _node_hover_id = this.id; + } + }else{ + this.hover = false; + if (_node_hover_id == this.id) { + _node_hover_id = -1; + } + } + }; + + Node.prototype.draw = function(){ + // TODO: center the squares around the pos + _ctx.beginPath(); + _ctx.lineWidth = this.g.l; + for (var i = 0; i < this.entrees.length; i++) { + _ctx.strokeStyle = this.hover ? "red" : _entrees_colors[this.entrees[i]]; + _ctx.strokeRect(this.x-4*i, this.y-4*i, this.radius+8*i, this.radius+8*i); + } + _ctx.closePath(); + // _ctx.beginPath(); + // _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black"; + // _ctx.fillRect(this.x, this.y, this.radius, this.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]; + var b = _particules[q]; if(!b.attracted) continue; var d = a.distanceTo(b); // apply new forces if colliding - if(d <= radius*2){ + 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); @@ -97,8 +300,8 @@ // move particles if they overlap - if (d < radius*2) { - var makeup = radius - d/2; + 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); @@ -113,44 +316,26 @@ } } } + }; - 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); - } + // ____ __ + // / __ \___ ____ ____/ /__ _____ + // / /_/ / _ \/ __ \/ __ / _ \/ ___/ + // / _, _/ __/ / / / /_/ / __/ / + // /_/ |_|\___/_/ /_/\__,_/\___/_/ + function render(){ + _ctx.clearRect(0, 0, _canvas.width, _canvas.height); - - - // 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(); + for (var i = 0; i < _nodes.length; i++) { + _nodes[i].onUpdate(); } - - }; function startAnime(){ - physics.onUpdate(render); - // render(); - - physics.play() + _physics.onUpdate(render); + _physics.play() }; - - init(); } diff --git a/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss b/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss index fc09ba790..2a4fc23d6 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss +++ b/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss @@ -1,4 +1,13 @@ -canvas.edlp-map{ +// @Author: Bachir Soussi Chiadmi +// @Date: 18-12-2017 +// @Email: bachir@figureslibres.io +// @Filename: corpus.scss +// @Last modified by: bach +// @Last modified time: 20-12-2017 +// @License: GPL-V3 + +canvas#edlp-map{ + // background-color: grey; position: absolute; box-sizing: border-box; top:0; left:0; diff --git a/sites/all/modules/figli/edlp_corpus/bower.json b/sites/all/modules/figli/edlp_corpus/bower.json index 84d39818f..6d9daca12 100644 --- a/sites/all/modules/figli/edlp_corpus/bower.json +++ b/sites/all/modules/figli/edlp_corpus/bower.json @@ -14,6 +14,7 @@ "tests" ], "dependencies": { - "physics": "latest" + "physics": "latest", + "EaselJS": "latest" } } diff --git a/sites/all/modules/figli/edlp_corpus/edlp_corpus.libraries.yml b/sites/all/modules/figli/edlp_corpus/edlp_corpus.libraries.yml index aab0b0166..6ccd3bbbe 100644 --- a/sites/all/modules/figli/edlp_corpus/edlp_corpus.libraries.yml +++ b/sites/all/modules/figli/edlp_corpus/edlp_corpus.libraries.yml @@ -1,3 +1,11 @@ +# @Author: Bachir Soussi Chiadmi +# @Date: 20-12-2017 +# @Email: bachir@figureslibres.io +# @Filename: edlp_corpus.libraries.yml +# @Last modified by: bach +# @Last modified time: 20-12-2017 +# @License: GPL-V3 + corpus: version: VERSION css: @@ -6,7 +14,8 @@ corpus: version: VERSION js: - assets/dist/bower/physics.js: { scope: footer } + assets/dist/bower/physics.min.js: { scope: footer } + # assets/dist/bower/easeljs.min.js: { scope: footer } assets/dist/scripts/corpus.min.js: { scope: footer } dependencies: - core/drupalSettings diff --git a/sites/all/modules/figli/edlp_corpus/edlp_corpus.routing.yml b/sites/all/modules/figli/edlp_corpus/edlp_corpus.routing.yml index 0fcca90ef..57e1bd8bd 100644 --- a/sites/all/modules/figli/edlp_corpus/edlp_corpus.routing.yml +++ b/sites/all/modules/figli/edlp_corpus/edlp_corpus.routing.yml @@ -1,3 +1,11 @@ +# @Author: Bachir Soussi Chiadmi +# @Date: 13-12-2017 +# @Email: bachir@figureslibres.io +# @Filename: edlp_corpus.routing.yml +# @Last modified by: bach +# @Last modified time: 20-12-2017 +# @License: GPL-V3 + edlp_corpus.corpusjson: path: '/edlp/corpus' defaults: diff --git a/sites/all/modules/figli/edlp_corpus/gulpfile.js b/sites/all/modules/figli/edlp_corpus/gulpfile.js index 5eaf0cf48..84b300409 100644 --- a/sites/all/modules/figli/edlp_corpus/gulpfile.js +++ b/sites/all/modules/figli/edlp_corpus/gulpfile.js @@ -1,3 +1,13 @@ +/** + * @Author: Bachir Soussi Chiadmi + * @Date: 20-12-2017 + * @Email: bachir@figureslibres.io + * @Filename: gulpfile.js + * @Last modified by: bach + * @Last modified time: 20-12-2017 + * @License: GPL-V3 + */ + 'use strict'; var gulp = require('gulp'); @@ -47,9 +57,17 @@ gulp.task('bower', function() { "main": [ './build/physics.js' ] + }, + "EaselJS":{ + "ignore":true + // "main": [ + // './lib/easeljs.js' + // ] } } })) + .pipe(config.production ? jsmin() : util.noop()) + .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('./assets/dist/bower/')); }); diff --git a/sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php b/sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php index 48157d134..bbc0c1296 100644 --- a/sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php +++ b/sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php @@ -61,11 +61,21 @@ class CorpusController extends ControllerBase { ); } + $query = \Drupal::entityQuery('taxonomy_term') + ->condition('vid', 'entrees'); + + $tids = $query->execute(); + // $nodes = entity_load_multiple('node', $nids); + foreach ($tids as $tid) { + $entrees[] = $tid; + } + $data = array( 'date' => time(), 'site_name' => $config->get('name'), 'count' => count($nodes), 'nodes' => $nodes_data, + 'entrees' => $entrees ); $response->setData($data); diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index 05cc89343..de88b9985 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css @@ -11,7 +11,9 @@ body, html { width: 100%; height: 100%; font-family: Georgia, serif; - font-style: normal; } + font-style: normal; + margin: 0; + padding: 0; } div.layout-container { position: relative; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index b11da1eba..e6233da19 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -1,3 +1,11 @@ +// @Author: Bachir Soussi Chiadmi +// @Date: 18-12-2017 +// @Email: bachir@figureslibres.io +// @Filename: app.scss +// @Last modified by: bach +// @Last modified time: 20-12-2017 +// @License: GPL-V3 + @import 'base/reset'; @import 'base/vars'; @@ -12,6 +20,8 @@ body, html{ height:100%; font-family: Georgia, serif; font-style: normal; + margin:0; + padding:0; } diff --git a/sites/all/themes/custom/edlptheme/assets/styles/base/_colors.scss b/sites/all/themes/custom/edlptheme/assets/styles/base/_colors.scss index e69de29bb..6d216976e 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/base/_colors.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/base/_colors.scss @@ -0,0 +1,21 @@ +$130:rgb(75, 143, 126); +$121:rgb(134, 142, 36); +$134:rgb(43, 143, 47); +$121:rgb(58, 51, 182); +$125:rgb(44, 159, 87); +$119:rgb(196, 137, 120); +$132:rgb(82, 112, 187); +$122:rgb(251, 84, 211); +$129:rgb(224, 116, 131); +$120:rgb(101, 88, 69); +$130:rgb(126, 8, 104); +$118:rgb(14, 113, 33); +$127:rgb(218, 189, 66); +$133:rgb(3, 153, 187); +$128:rgb(57, 154, 28); +$124:rgb(112, 133, 64); +$116:rgb(25, 27, 255); +$117:rgb(39, 157, 132); +$131:rgb(82, 25, 171); +$126:rgb(212, 156, 182); +$123:rgb(73, 119, 21);