diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 3d8efec..04c72f4 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -48,6 +48,7 @@ export default { opacity: 0, tween: null, body: null, + body_parts: [], constraint: null } }, @@ -140,18 +141,19 @@ export default { // MatterAttractors.Attractors.gravityConstant = -5; // Create parts of the body : main big circle & entities - var parts = [ + this.body_parts = [ Matter.Bodies.circle(0, 0, this.ray, { item_type: 'concernement', 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 // })) - parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, { + 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, @@ -159,10 +161,12 @@ export default { isSensor: true })) } - + // Create parts of the body : besoins and responses + this.createBesoinsBodyParts(); + // create the body this.body = Matter.Body.create({ - parts: parts, + parts: this.body_parts, item_type: 'concernement', id: this.concernement.id, frictionAir: 0, @@ -200,6 +204,45 @@ export default { Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); } }, + 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++) { + if(this.concernement.besoins[i].reponses[j][res_fields[f]]){ + 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', + id: this.concernement.besoins[i].reponses[j].id, + bid: this.concernement.besoins[i].id, + cid: this.concernement.id, + isSensor: true + })); + } + } + } + } + }, getRandomPos(){ return { x: this.ray/2 + Math.random()*(this.canvas.width - this.ray), @@ -592,49 +635,29 @@ export default { } }, drawBesoins(){ - 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++) { - // TODO make besoins and reponses interactives - 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.ctx.beginPath(); - this.ctx.fillStyle = "#000"; - // this.ctx.arc(this.pos.x + x, this.pos.y + y, 2, 0, 2 * Math.PI, false); - this.drawDiamond(this.pos.x + x, this.pos.y + y, 4); - this.ctx.fill(); - - let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number - // loop through reponses - 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 - // loop through fields qui, quoi, où, avec - for (let f = 0; f < res_fields.length; f++) { - if(this.concernement.besoins[i].reponses[j][res_fields[f]]){ - 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; - + 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': + this.ctx.beginPath(); + this.ctx.fillStyle = "#000"; + this.drawDiamond(part.position.x, part.position.y, 4); + this.ctx.fill(); + break; + case 'reponse': this.ctx.beginPath(); this.ctx.fillStyle = "#eee"; this.ctx.strokeStyle = "#000"; this.ctx.lineWidth = 1; // this.ctx.arc(this.pos.x + rx, this.pos.y + ry, 2*(f+1), 0, 2 * Math.PI, false); - this.drawDiamond(this.pos.x + rx, this.pos.y + ry, 5); + this.drawDiamond(part.position.x, part.position.y, 5); this.ctx.fill(); - this.ctx.stroke(); - - } - + this.ctx.stroke(); + break; } - } - } }, drawDiamond(x,y,r){