diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 0c24c75..f797a24 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -335,24 +335,6 @@ export default { id: this.concernement.id, }) ]; - - // Create parts of the body : entities - for (let i = 0; i < this.entites.length; i++) { - // parts.push(Matter.Bodies.circle(this.pos.x+this.entites[i].display.pos.x, this.pos.y+this.entites[i].display.pos.y, 15, { - // item_type: 'entite', - // id: this.entites[i].id - // })) - this.body_parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, { - item_type: 'entite', - id: this.entites[i].entite.id, - cid: this.concernement.id, - agissante: this.entites[i].entite.agissante, - isSensor: true - })) - } - - // Create parts of the body : besoins and responses - this.createBesoinsBodyParts(); // create the body this.body = Matter.Body.create({ @@ -397,49 +379,6 @@ export default { y: -delta + Math.random()*delta*2 }); }, - createBesoinsBodyParts(){ - let res_fields = ['qui','quoi','ou','avec']; - let arc = (360 / 16); // unit arc - let r = (this.ray * this.scale)/5; // unit ray - let br = r - r/3; // besoin ray - - for (let i = 0; i < this.concernement.besoins.length; i++) { - let start_a = arc * i; // angle depart (for reponses) - let center_a = start_a + arc/2; // angle central - let x = Math.cos(center_a*(Math.PI/180)) * br; - let y = Math.sin(center_a*(Math.PI/180)) * br; - - this.body_parts.push(Matter.Bodies.circle(x, y, 0.8, { - item_type: 'besoin', - id: this.concernement.besoins[i].id, - cid: this.concernement.id, - isSensor: true - })); - - let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number - for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) { - let res_a = start_a + res_arc * (j+1); // angle for response line - for (let f = 0; f < res_fields.length; f++) { // loop through all 4 fields, keep only the last one filled - if( this.concernement.besoins[i].reponses[j][res_fields[f]] // if field filled - && (f === res_fields.length -1 || !this.concernement.besoins[i].reponses[j][res_fields[f+1]]) // and is last field or last field filled - ){ - let rr = this.ray * this.scale - r*f - r/2; // reponse field ray - let rx = Math.cos(res_a*(Math.PI/180)) * rr; - let ry = Math.sin(res_a*(Math.PI/180)) * rr; - - this.body_parts.push(Matter.Bodies.circle(rx, ry, 0.8, { - item_type: 'reponse', - // field: res_fields[f], - id: this.concernement.besoins[i].reponses[j].id, - bid: this.concernement.besoins[i].id, - cid: this.concernement.id, - isSensor: true - })); - } - } - } - } - }, // PAPER OBJECTS initPaperObjects(){ this.paper_objects = new paper.Group({ @@ -449,6 +388,7 @@ export default { this.paper_objects.addChild(this.setPaperBoussoleBG()); this.paper_objects.addChild(this.setPaperContour()); this.paper_objects.addChild(this.setPaperEntites()); + if (this.concernement.has_puissancedagir) { this.paper_objects.addChild(this.setPaperPuissanceagirBG()); this.paper_objects.addChild(this.setPaperPuissanceagirICON()); @@ -709,16 +649,36 @@ export default { pivot: new paper.Point(this.pos), name: 'entites' }); - for (let i = 0; i < this.body.parts.length; i++) { - if (this.body.parts[i].item_type === 'entite') { - let part = this.body.parts[i]; + for (let i = 0; i < this.entites.length; i++) { + g.addChild(new paper.Path.Circle({ + pivot: new paper.Point(this.pos), + center: [this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y], + radius: 0.5, //0.3 + fillColor: '#000', + item_id: this.entites[i].entite.id, + item_type: 'entite' + })) + } + return g; + }, + setPaperAgissantes(){ + let g = new paper.Group({ + pivot: new paper.Point(this.pos), + name: 'agissantes' + }); + for (let i = 0; i < this.entites.length; i++) { + if (this.entites[i].entite.agissante) { g.addChild(new paper.Path.Circle({ - center: [part.position.x, part.position.y], + pivot: new paper.Point(this.pos), + center: [this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y], radius: 0.5, //0.3 fillColor: '#000', - item_id: part.id, + strokeColor: '#000', + strokeWidth: 3, + item_id: this.entites[i].entite.id, item_type: 'entite' })) + } } return g; @@ -803,37 +763,53 @@ export default { name: 'puissanceagir_besoins' }); - for (let i = 0; i < this.body.parts.length; i++) { - if (this.body.parts[i].item_type === 'besoin' || this.body.parts[i].item_type === 'reponse') { - let part = this.body.parts[i]; - - switch (part.item_type) { - case 'besoin': + let res_fields = ['qui','quoi','ou','avec']; + let arc = (360 / 16); // unit arc + let r = (this.ray * this.scale)/5; // unit ray + let br = r - r/3; // besoin ray + + for (let i = 0; i < this.concernement.besoins.length; i++) { + let start_a = arc * i; // angle depart (for reponses) + let center_a = start_a + arc/2; // angle central + let x = Math.cos(center_a*(Math.PI/180)) * br; + let y = Math.sin(center_a*(Math.PI/180)) * br; + + g.addChild( + new paper.Path({ + pivot: new paper.Point(this.pos), + segments: this.getDiamondSegments(this.pos.x + x, this.pos.y + y, 1), + fillColor: '#000', + item_id: this.concernement.besoins[i].id, + item_cid: this.concernement.id, + item_type: 'besoin' + }) + ) + + let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number + for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) { + let res_a = start_a + res_arc * (j+1); // angle for response line + for (let f = 0; f < res_fields.length; f++) { // loop through all 4 fields, keep only the last one filled + if( this.concernement.besoins[i].reponses[j][res_fields[f]] // if field filled + && (f === res_fields.length -1 || !this.concernement.besoins[i].reponses[j][res_fields[f+1]]) // and is last field or last field filled + ){ + let rr = this.ray * this.scale - r*f - r/2; // reponse field ray + let rx = Math.cos(res_a*(Math.PI/180)) * rr; + let ry = Math.sin(res_a*(Math.PI/180)) * rr; + g.addChild( new paper.Path({ - segments: this.getDiamondSegments(part.position.x, part.position.y, 1), - fillColor: '#000', pivot: new paper.Point(this.pos), - item_id: part.id, - item_type: 'besoin' - }) - ) - break; - case 'reponse': - g.addChild( - new paper.Path({ - segments: this.getDiamondSegments(part.position.x, part.position.y, 1), + segments: this.getDiamondSegments(this.pos.x + rx, this.pos.y + ry, 1), fillColor: '#eee', strokeColor: "#000", strokeWidth: 1, - pivot: new paper.Point(this.pos), - item_id: part.id, - item_bid: part.bid, - item_cid: part.cid, + item_id: this.concernement.besoins[i].reponses[j].id, + item_bid: this.concernement.besoins[i].id, + item_cid: this.concernement.id, item_type: 'reponse' }) ) - break; + } } } } @@ -849,27 +825,6 @@ export default { [x, y - r] ]; }, - setPaperAgissantes(){ - let g = new paper.Group({ - pivot: new paper.Point(this.pos), - name: 'agissantes' - }); - for (let i = 0; i < this.body.parts.length; i++) { - if (this.body.parts[i].item_type === 'entite' && this.body.parts[i].agissante) { - let part = this.body.parts[i]; - g.addChild(new paper.Path.Circle({ - center: [part.position.x, part.position.y], - radius: 0.3, //0.3 - fillColor: '#000', - strokeColor: '#000', - strokeWidth: 3, - item_id: part.id, - item_type: 'entite' - })) - } - } - return g; - }, setPaperDoleanceBG(){ var r = this.ray * this.scale * 0.8; // ray var dr = r/2; // demi ray @@ -1803,7 +1758,7 @@ export default { : this.canvas.width - pseudo_center_x; // max and min force let minf = 0; - let maxf = 10; + let maxf = 6; // scale factor let scale = (maxf-minf) / (maxp-minp); // get the inversed distance @@ -1840,7 +1795,7 @@ export default { : pseudo_center_x; // max and min force let minf = 0; - let maxf = 2; + let maxf = 1; // scale factor let scale = (maxf-minf) / (maxp-minp); // get the inversed distance from the side @@ -1867,19 +1822,46 @@ export default { ); }, applyShuffleForces() { - var dist, dir, x_velocity; - dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre - dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side - x_velocity = Math.pow(dist/650,10) * dir; + // var dist, dir, x_velocity; + // dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre + // dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side + // x_velocity = Math.pow(dist/650,10) * dir; + let pseudo_center_x = (this.canvas.width - this.cartouch_width) / 2; + // get the direction to the centre + let dir = this.pos.x > pseudo_center_x + ? -1 // to left + : 1; // to right + // max & min item position + let minp = 0; + let maxp = dir < 0 + ? this.canvas.width - pseudo_center_x + : pseudo_center_x; + // max and min force + let minf = 0; + let maxf = 10; + // scale factor + let scale = (maxf-minf) / (maxp-minp); + // get the inversed distance from the side + let dist = dir < 0 + ? this.pos.x - pseudo_center_x + : pseudo_center_x - this.pos.x; - Matter.Body.setVelocity(this.body, {x: x_velocity, y: 0}); + let x_velocity = Math.exp(minf + scale*(dist-minp)); + + let y_velocity = -10 + Math.random() * 10; + // let ori_pos = dir < 0 + // ? {x:this.canvas.width, y:this.body.position.y} + // : {x:0, y:this.body.position.y}; + // let x_force = Math.pow(dist/800,10) * dir; + + Matter.Body.setVelocity(this.body, {x: x_velocity, y: y_velocity}); }, onAfterEngineUpdate (event) { // respawn element if outside screen - // if(this.pos.x < 0 - // || this.pos.x > this.canvas.width - // || this.pos.y < 0 - // || this.pos.y > this.canvas.height){ + // if(this.pos.x <= 0 + // || this.pos.x >= this.canvas.width + // || this.pos.y <= 0 + // || this.pos.y >= this.canvas.height){ // this.pos = this.getRandomPos() // Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}); // this.setInitBodyVelocity(); @@ -1956,34 +1938,8 @@ export default { && this.map_mode !== 'doleancer' && this.map_mode !== 'action' ) { this.paper_objects.children.entites.visible = true; - // if (this.opened_entite_id) { - // // console.log('this.paper_objects.children.entites', this.paper_objects.children.entites); - // this.paper_objects.children.entites.children.forEach((entite) => { - // // console.log('entite', entite); - // if (entite.item_id === this.opened_entite_id) { - // entite.style.fillColor = '#01ffe2'; - // } else { - // entite.style.fillColor = '#000'; - // } - // }); - // } else { - // this.paper_objects.children.entites.children.forEach((entite) => { - // entite.style.fillColor = '#000'; - // }) - // } } else { this.paper_objects.children.entites.visible = false; - // if(this.map_mode === 'puissancedagir' - // || this.map_mode === 'doleancer' - // || this.map_mode === 'action' ){ - // this.paper_objects.children.entites.visible = false; - // }else{ - // this.paper_objects.children.entites.visible = true; - // // this.paper_objects.children.entites.children.forEach((entite) => { - // // // entite.style.strokeWidth = 2; - // // // entite.style.strokeColor = "#fff"; - // // }) - // } }