1432 lines
48 KiB
Vue
1432 lines
48 KiB
Vue
<script>
|
|
|
|
// https://brm.io/matter-js/docs/classes/Engine.html
|
|
// import {
|
|
// // Engine,
|
|
// // Render,
|
|
// // World,
|
|
// Bodies,
|
|
// Body,
|
|
// Events,
|
|
// Composite,
|
|
// // Composites,
|
|
// // Constraint,
|
|
// // Vertices,
|
|
// // Mouse,
|
|
// // MouseConstraint,
|
|
// // Query,
|
|
// // Common
|
|
// } from "matter-js";
|
|
|
|
import Matter from "matter-js";
|
|
import MatterAttractors from "matter-attractors";
|
|
// Matter.use(MatterAttractors);
|
|
// import polydecomp from "poly-decomp";
|
|
|
|
import paper from 'paper';
|
|
|
|
// import { easeInOutQuad, easeInOutQuart } from 'easing-utils';
|
|
import Tween from "@tweenjs/tween.js";
|
|
|
|
import { mapState, mapActions } from 'pinia'
|
|
import { ConcernementsStore } from '@/stores/concernements'
|
|
import { CommonStore } from '@/stores/common'
|
|
|
|
export default {
|
|
inject: ['canvasMap', 'matterEngine'],
|
|
data() {
|
|
return {
|
|
id: null,
|
|
entities: null,
|
|
// opened_entite_id: null,
|
|
canvas: null,
|
|
ctx: null,
|
|
pos : {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
ray: 60,
|
|
time: 0,
|
|
salientPoints: [],
|
|
scale: 1,
|
|
prev_scale: 1,
|
|
opacity: 0,
|
|
tween: null,
|
|
body: null,
|
|
body_parts: [],
|
|
constraint: null,
|
|
isHover: false,
|
|
//
|
|
paper_objects: {}
|
|
}
|
|
},
|
|
props: ['concernement', 'is_opened'],
|
|
computed: {
|
|
...mapState(ConcernementsStore,['map_mode']),
|
|
...mapState(ConcernementsStore,['concernementsByID']),
|
|
...mapState(ConcernementsStore,['opened']),
|
|
...mapState(ConcernementsStore,['opened_entite_id']),
|
|
...mapState(CommonStore,['hover_elmt'])
|
|
},
|
|
created () {
|
|
// console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
|
|
this.id = this.concernement.id
|
|
this.entites = this.concernement.entites
|
|
this.entites_byid = this.concernement.entites_byid
|
|
// console.log(`ConcernementsMapItem ${this.concernement.id} $route`, this.id, this.$route);
|
|
// if (this.$route.name === 'concernement'
|
|
// && parseInt(this.$route.params.id) === this.id
|
|
// && typeof this.$route.params.eid !== "undefined") {
|
|
// // console.log("we have an entity");
|
|
// this.opened_entite_id = parseInt(this.$route.params.eid);
|
|
// }
|
|
|
|
this.parsePoints()
|
|
this.getSalientPoints()
|
|
|
|
if (this.salientPoints.length > 3) { // do not build item if it doesn't get enougth salient points
|
|
if (this.canvasMap) {
|
|
this.initCanvasMap()
|
|
}
|
|
}
|
|
|
|
},
|
|
// mounted() {
|
|
// console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas);
|
|
|
|
// },
|
|
watch: {
|
|
// canvasMap (n, o) {
|
|
// console.log("concernementItem watch canvasMap", o, n);
|
|
// }
|
|
canvasMap: {
|
|
handler (n, o){
|
|
// console.log("concernementItem watch canvasMap.ctx", typeof this.canvas, o, n);
|
|
if (!this.canvas) {
|
|
this.initCanvasMap()
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
is_opened: {
|
|
handler (n, o) {
|
|
if(n){ // opened
|
|
this.openClose(true);
|
|
}else{ // closed
|
|
this.openClose(false)
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
map_mode: {
|
|
handler (n, o) {
|
|
console.log('watch map_mode', o, n);
|
|
if (n === 'terraindevie') {
|
|
this.applyShuffleForces();
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
hover_elmt: {
|
|
handler (n, o) {
|
|
// console.log('watch hover_elmt', o, n);
|
|
if (n && n.type === 'concernement' && n.id === this.id) {
|
|
this.isHover = true;
|
|
} else {
|
|
this.isHover = false;
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(CommonStore,['setHoverElmt']),
|
|
...mapActions(ConcernementsStore,['openCloseConcernements']),
|
|
parsePoints (){
|
|
// converts data (menace/maintien, actuel/future, prise) into atcual position x,y
|
|
for (let i = 0; i < this.entites.length; i++) {
|
|
let entite = this.entites[i]
|
|
// console.log('entite', entite);
|
|
|
|
this.entites[i].display = {
|
|
alpha: null,
|
|
ray: null
|
|
}
|
|
// RAYON
|
|
// https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
|
|
// slope = (output_end - output_start) / (input_end - input_start)
|
|
// output = output_start + slope * (input - input_start)
|
|
// from range 0 -> 100 to range 0 -> this.ray
|
|
let init_max = 100
|
|
let slope = this.ray / init_max
|
|
this.entites[i].display.ray = slope * (init_max - entite.prise);
|
|
// if (this.concernement.id === 28) {
|
|
// console.log(`entity prise: ${entite.prise} | ray: ${this.entites[i].display.ray}`);
|
|
// }
|
|
|
|
|
|
// ANGLE
|
|
// -90 <= mm <= 90
|
|
if (entite.actuelfuture) {
|
|
// future en haut : 180 <= a <= 360
|
|
// from -90 -> 90 to range 180 -> 360
|
|
this.entites[i].display.alpha = entite.menacemaintien + 270
|
|
} else {
|
|
// actuel: en bas : O <= a <= 180
|
|
// from -90 -> 90 to range 180 -> 0
|
|
this.entites[i].display.alpha = -1 * entite.menacemaintien + 90
|
|
}
|
|
|
|
// POSITION X Y (par rapport au centre du concernement)
|
|
this.entites[i].display.pos = {
|
|
x: this.entites[i].display.ray * Math.cos(this.entites[i].display.alpha * (Math.PI/180)),
|
|
y: this.entites[i].display.ray * Math.sin(this.entites[i].display.alpha * (Math.PI/180))
|
|
}
|
|
|
|
this.entites_byid[entite.entite.id].display = this.entites[i].display;
|
|
}
|
|
},
|
|
getSalientPoints () {
|
|
// debugger
|
|
// console.log(this.entites);
|
|
let arc = 360/10;
|
|
// loop through arcs
|
|
// for (let i = 360/arc; i >= 0 ; i--) {
|
|
for (let i = 0; i <= 360/arc ; i++) {
|
|
// loop through entities to find the farest on the arc
|
|
let max_r = 0;
|
|
let farest = null;
|
|
for (let j = 0; j < this.entites.length; j++) {
|
|
let entite = this.entites[j];
|
|
if(arc*i <= entite.display.alpha && entite.display.alpha <= arc*i+arc) { // if entity is in arc
|
|
if (entite.display.ray > max_r) { // && entite.display.ray > this.ray/2 // and farest from minimu
|
|
// if entity is farest from precedent one
|
|
max_r = entite.display.ray;
|
|
// recalcul x & y to get a little padding between entite and contour by increasing ray
|
|
farest = {
|
|
alpha: entite.display.alpha,
|
|
ray: entite.display.ray,
|
|
pos: {
|
|
x: (entite.display.ray + 3) * Math.cos(entite.display.alpha * (Math.PI/180)),
|
|
y: (entite.display.ray + 3) * Math.sin(entite.display.alpha * (Math.PI/180))
|
|
}
|
|
};
|
|
}
|
|
}
|
|
}
|
|
if (farest) {
|
|
this.salientPoints.push(farest)
|
|
}
|
|
}
|
|
// console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
|
|
},
|
|
initCanvasMap (){
|
|
// console.log(`ConcernementsMapItem ${this.concernement.id} initCanvasMap`);
|
|
// record canvas and ctx for rendering (drawing)
|
|
this.canvas = this.canvasMap.canvas
|
|
this.ctx = this.canvasMap.ctx
|
|
// this.paper = this.canvasMap.paper
|
|
|
|
// define init position of the item
|
|
this.pos = this.getRandomPos();
|
|
//
|
|
this.initMatterBody()
|
|
//
|
|
this.initPaperObjects()
|
|
},
|
|
getRandomPos(){
|
|
let pad = 200;
|
|
return {
|
|
x: pad + this.ray/2 + Math.random()*(this.canvas.width - this.ray - pad),
|
|
y: pad + this.ray/2 + Math.random()*(this.canvas.height - this.ray - pad)
|
|
};
|
|
},
|
|
initMatterBody (){
|
|
|
|
// MATTER
|
|
// create the matter body and add it to the engine
|
|
if (!this.body) {
|
|
// console.log('concernementItem creating body');
|
|
|
|
// https://github.com/liabru/matter-attractors/issues/8
|
|
// https://github.com/liabru/matter-attractors/blob/master/index.js
|
|
// MatterAttractors.Attractors.gravityConstant = -5;
|
|
|
|
// Create parts of the body : main big circle & entities
|
|
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
|
|
// }))
|
|
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({
|
|
parts: this.body_parts,
|
|
item_type: 'concernement',
|
|
id: this.concernement.id,
|
|
frictionAir: 0,
|
|
// mass: Math.pow(3, this.entites.length),
|
|
mass: 10,
|
|
restitution: 0.15,
|
|
collisionFilter: {
|
|
group: -1
|
|
},
|
|
plugin: {
|
|
attractors: [
|
|
// there is a built in helper function for Newtonian gravity!
|
|
// you can find out how it works in index.js
|
|
MatterAttractors.Attractors.gravity
|
|
]
|
|
}
|
|
});
|
|
Matter.Body.setPosition(this.body, this.pos);
|
|
|
|
// add init velocity
|
|
this.setInitBodyVelocity()
|
|
// console.log('concernementItem mass', this.body.mass);
|
|
Matter.Composite.add(this.matterEngine.world, this.body);
|
|
// console.log('concernement body', this.body);
|
|
|
|
// // listen for animate event dispatched from parent
|
|
// this.canvas.addEventListener('animate', this.animate)
|
|
|
|
// listen for afterUpdate event from Matter.Engine object
|
|
Matter.Events.on(this.matterEngine, "beforeUpdate", this.onBeforeEngineUpdate);
|
|
Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
|
|
}
|
|
},
|
|
setInitBodyVelocity(){
|
|
let delta = 10;
|
|
Matter.Body.setVelocity(this.body, {
|
|
x: -delta + Math.random()*delta*2,
|
|
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({
|
|
pivot: new paper.Point(this.pos),
|
|
cid: this.id
|
|
});
|
|
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());
|
|
this.paper_objects.addChild(this.setPaperPuissanceagirBesoins());
|
|
}
|
|
if (this.concernement.has_agissantes) {
|
|
this.paper_objects.addChild(this.setPaperAgissantes());
|
|
}
|
|
if (this.concernement.has_doleance) {
|
|
this.paper_objects.addChild(this.setPaperDoleanceBG());
|
|
this.paper_objects.addChild(this.setPaperDoleanceICON());
|
|
this.paper_objects.addChild(this.setPaperDoleanceSteps());
|
|
}
|
|
console.log('initPaperObjects', this.paper_objects);
|
|
|
|
this.initPaperEvents()
|
|
},
|
|
setPaperBoussoleBG(){
|
|
// BOUSSOLE
|
|
let children = [];
|
|
|
|
|
|
// // exterieur circle
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y],
|
|
radius: this.ray*this.scale*0.92,
|
|
strokeWidth: 2
|
|
}));
|
|
|
|
// interieur circle
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y],
|
|
radius: this.ray/2*this.scale,
|
|
strokeWidth: 2
|
|
}));
|
|
|
|
// axes
|
|
// vertical
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x, this.pos.y - this.ray*this.scale],
|
|
to: [this.pos.x, this.pos.y + this.ray*this.scale],
|
|
strokeWidth: 2
|
|
}));
|
|
// horizontal
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - this.ray*this.scale, this.pos.y],
|
|
to: [this.pos.x + this.ray*this.scale, this.pos.y],
|
|
strokeWidth: 2
|
|
}))
|
|
|
|
// fleches
|
|
// haute
|
|
children.push(new paper.Path({
|
|
segments: [
|
|
[this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)],
|
|
[this.pos.x, this.pos.y - this.ray*this.scale*0.92],
|
|
[this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)],
|
|
],
|
|
strokeWidth: 2
|
|
}));
|
|
// milieu
|
|
children.push(new paper.Path({
|
|
segments: [
|
|
[this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)],
|
|
[this.pos.x, this.pos.y],
|
|
[this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)],
|
|
],
|
|
strokeWidth: 2
|
|
}));
|
|
|
|
|
|
// MOINS - PLUS
|
|
// PLUS
|
|
// horizontal
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale],
|
|
to: [this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale],
|
|
strokeWidth: 8
|
|
}))
|
|
// vertical
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale)],
|
|
to: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale)],
|
|
strokeWidth: 8
|
|
}))
|
|
|
|
// MOINS
|
|
// horizontal
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale],
|
|
to: [this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale],
|
|
strokeWidth: 8
|
|
}))
|
|
|
|
return new paper.Group({
|
|
children: children,
|
|
pivot: new paper.Point(this.pos),
|
|
name: 'boussole_bg',
|
|
locked: true,
|
|
style: {
|
|
strokeColor: '#fff'
|
|
}
|
|
});
|
|
|
|
},
|
|
setPaperContour(){
|
|
let gap = 1;//1.15;
|
|
let segments = [
|
|
[this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap]
|
|
];
|
|
for (let j = 1; j < this.salientPoints.length; j++) {
|
|
segments.push([this.pos.x+this.salientPoints[j].pos.x*this.scale*gap, this.pos.y+this.salientPoints[j].pos.y*this.scale*gap])
|
|
}
|
|
segments.push([this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap])
|
|
|
|
return new paper.Path({
|
|
name: 'contours',
|
|
segments: segments,
|
|
strokeColor: '#000',
|
|
strokeWidth: 1,
|
|
fillColor: 'rgba(255,255,255,0.8)',
|
|
pivot: new paper.Point(this.pos),
|
|
cid: this.id
|
|
});
|
|
},
|
|
setPaperEntites(){
|
|
let g = new paper.Group({
|
|
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];
|
|
g.addChild(new paper.Path.Circle({
|
|
center: [part.position.x, part.position.y],
|
|
radius: 0.5, //0.3
|
|
fillColor: '#000',
|
|
item_id: part.id,
|
|
item_type: 'entite'
|
|
}))
|
|
|
|
// if (part.id === this.opened_entite_id) {
|
|
// this.ctx.fillStyle = "#01ffe2";
|
|
// } else {
|
|
// this.ctx.fillStyle = "#000";
|
|
// }
|
|
}
|
|
}
|
|
return g;
|
|
},
|
|
setPaperPuissanceagirBG(){
|
|
let children = [];
|
|
|
|
for (let i = 1; i < 6; i++) {
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y],
|
|
radius: ((this.ray*this.scale)/5)*i,
|
|
strokeWidth: 0.5
|
|
}));
|
|
}
|
|
|
|
for (let j = 0; j < 4; j++) {
|
|
let a = (90 / 4) * j;
|
|
// diagonale
|
|
// https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
|
|
// https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
|
|
// radians = degrees * (pi/180)
|
|
// degrees = radians * (180/pi)
|
|
let x = Math.cos(a*(Math.PI/180)) * this.ray * this.scale;
|
|
let y = Math.sin(a*(Math.PI/180)) * this.ray * this.scale;
|
|
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x + x, this.pos.y + y],
|
|
to: [this.pos.x - x, this.pos.y - y],
|
|
strokeWidth: 1,
|
|
dashArray: [5,5]
|
|
}))
|
|
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - y, this.pos.y + x],
|
|
to: [this.pos.x + y, this.pos.y - x],
|
|
strokeWidth: 1,
|
|
dashArray: [5,5]
|
|
}))
|
|
|
|
}
|
|
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y],
|
|
radius: this.ray*this.scale,
|
|
strokeWidth: 2,
|
|
fillColor: `rgba(255,255,255,0.6)`
|
|
}));
|
|
|
|
|
|
return new paper.Group({
|
|
children: children,
|
|
pivot: new paper.Point(this.pos),
|
|
name: 'puissanceagir_bg',
|
|
locked: true,
|
|
style: {
|
|
strokeColor: '#fff'
|
|
}
|
|
});
|
|
},
|
|
setPaperPuissanceagirICON(){
|
|
let children = [];
|
|
|
|
var r = 20 * this.scale; // ray
|
|
var dr = r/2; // demi ray
|
|
var d = r*2; // diameter
|
|
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y],
|
|
radius: r
|
|
}));
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y],
|
|
radius: dr
|
|
}));
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y],
|
|
radius: 2*this.scale
|
|
}));
|
|
|
|
// axes
|
|
// vertical
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x, this.pos.y - r],
|
|
to: [this.pos.x , this.pos.y + r],
|
|
}))
|
|
// horizontal
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - r, this.pos.y],
|
|
to: [this.pos.x + r, this.pos.y],
|
|
}))
|
|
|
|
// diagonale
|
|
// https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
|
|
// https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
|
|
// radians = degrees * (pi/180)
|
|
// degrees = radians * (180/pi)
|
|
var m = Math.sin(45*(Math.PI/180)) * r;
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x + m, this.pos.y + m],
|
|
to: [this.pos.x - m, this.pos.y - m],
|
|
}))
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - m, this.pos.y + m],
|
|
to: [this.pos.x + m, this.pos.y - m],
|
|
}))
|
|
|
|
return new paper.Group({
|
|
children: children,
|
|
pivot: new paper.Point(this.pos),
|
|
name: 'puissanceagir_icon',
|
|
locked: true,
|
|
style: {
|
|
strokeColor: '#000',
|
|
strokeWidth: 1
|
|
}
|
|
});
|
|
},
|
|
setPaperPuissanceagirBesoins(){
|
|
let g = new paper.Group({
|
|
pivot: new paper.Point(this.pos),
|
|
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':
|
|
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),
|
|
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_type: 'reponse'
|
|
})
|
|
)
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return g;
|
|
},
|
|
getDiamondSegments(x,y,r){
|
|
return [
|
|
[x, y - r],
|
|
[x + r, y],
|
|
[x, y + r],
|
|
[x - r, y],
|
|
[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.5, //0.3
|
|
fillColor: '#000',
|
|
strokeColor: '#000',
|
|
strokeWidth: 2,
|
|
eid: part.id
|
|
}))
|
|
}
|
|
}
|
|
return g;
|
|
},
|
|
setPaperDoleanceBG(){
|
|
let children = [];
|
|
|
|
var r = this.ray * this.scale * 0.8; // ray
|
|
var dr = r/2; // demi ray
|
|
var d = r*2; // diameter
|
|
var pcr = 2*this.scale; // petits cercle rayon
|
|
|
|
// https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
|
|
// https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
|
|
// radians = degrees * (pi/180)
|
|
// degrees = radians * (180/pi)
|
|
// Points for 45° axes
|
|
let m,n;
|
|
m = Math.sin(45*(Math.PI/180)) * r; // x = y for rayon
|
|
n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon
|
|
// console.log('m', m);
|
|
|
|
// points for legende arcs
|
|
var lar = r*1.1; // legendes arcs rayon
|
|
let o = Math.cos(22.5*(Math.PI/180)) * lar; // x @ 22.5° for legende arc rayon
|
|
let p = Math.sin(22.5*(Math.PI/180)) * lar; // y @ 22.5° for legende arc rayon
|
|
let q = Math.sin(45*(Math.PI/180)) * lar; // x = y @ 45° for legende arc rayon
|
|
|
|
var ltr = lar + 4; // legendes texts rayon
|
|
let o_t = Math.cos(22.5*(Math.PI/180)) * ltr; // x @ 22.5° for legende text rayon
|
|
let p_t = Math.sin(22.5*(Math.PI/180)) * ltr; // y @ 22.5° for legende text rayon
|
|
let q_t = Math.sin(45*(Math.PI/180)) * ltr; // x = y @ 45° for legende text rayon
|
|
|
|
let style = {
|
|
strokeColor: '#fff',
|
|
strokeWidth: 1
|
|
}
|
|
|
|
let legende_style = {
|
|
strokeColor: '#000',
|
|
strokeWidth: 1
|
|
}
|
|
|
|
let fontsize = 2.1;
|
|
|
|
// arcs exterieur
|
|
// haut gauche
|
|
children.push(new paper.Path.Arc({
|
|
from: [this.pos.x - r, this.pos.y - pcr],
|
|
through: [this.pos.x - m, this.pos.y - m],
|
|
to: [this.pos.x - pcr, this.pos.y - r],
|
|
style: style
|
|
}));
|
|
// haut droite
|
|
children.push(new paper.Path.Arc({
|
|
from: [this.pos.x + pcr, this.pos.y - r],
|
|
through: [this.pos.x + m, this.pos.y - m],
|
|
to: [this.pos.x + r, this.pos.y - pcr],
|
|
style: style
|
|
}));
|
|
// bas droite
|
|
children.push(new paper.Path.Arc({
|
|
from: [this.pos.x + r, this.pos.y + pcr],
|
|
through: [this.pos.x + m, this.pos.y + m],
|
|
to: [this.pos.x + pcr, this.pos.y + r],
|
|
style: style
|
|
}));
|
|
// bas gauche
|
|
children.push(new paper.Path.Arc({
|
|
from: [this.pos.x - pcr, this.pos.y + r],
|
|
through: [this.pos.x - m, this.pos.y + m],
|
|
to: [this.pos.x - r, this.pos.y + pcr],
|
|
style: style
|
|
}));
|
|
|
|
// legendes
|
|
// ARC bas gauche 1
|
|
children.push(new paper.Path.Arc({
|
|
from: [this.pos.x - pcr, this.pos.y + lar],
|
|
through: [this.pos.x - p, this.pos.y + o],
|
|
to: [this.pos.x - q + pcr/2, this.pos.y + q + pcr/2],
|
|
style: legende_style
|
|
}));
|
|
children.push(new paper.PointText({
|
|
point: [this.pos.x - p_t, this.pos.y + o_t],
|
|
content: "Enquête menée\nsur le terrain de vie",
|
|
fontSize: fontsize,
|
|
justification: 'right'
|
|
}));
|
|
|
|
// ARC bas gauche 2
|
|
children.push(new paper.Path.Arc({
|
|
from: [this.pos.x - q - pcr/2, this.pos.y + q - pcr/2],
|
|
through: [this.pos.x - o, this.pos.y + p],
|
|
to: [this.pos.x - lar, this.pos.y + pcr],
|
|
style: legende_style
|
|
}));
|
|
children.push(new paper.PointText({
|
|
point: [this.pos.x - o_t, this.pos.y + p_t],
|
|
content: "Construction de groupes d'intérets\navec qui composer la doléance",
|
|
fontSize: fontsize,
|
|
justification: 'right'
|
|
}));
|
|
|
|
// ARC haut gauche
|
|
children.push(new paper.Path.Arc({
|
|
from: [this.pos.x - lar, this.pos.y - pcr],
|
|
through: [this.pos.x - q, this.pos.y - q],
|
|
to: [this.pos.x - pcr, this.pos.y - lar],
|
|
style: legende_style
|
|
}));
|
|
children.push(new paper.PointText({
|
|
point: [this.pos.x - q_t, this.pos.y - q_t],
|
|
content: "Réception et traitement\nde la doléance",
|
|
fontSize: fontsize,
|
|
justification: 'right'
|
|
}));
|
|
|
|
// ARC haut droite
|
|
children.push(new paper.Path.Arc({
|
|
from: [this.pos.x + pcr, this.pos.y - lar],
|
|
through: [this.pos.x + q, this.pos.y - q],
|
|
to: [this.pos.x + lar, this.pos.y - pcr],
|
|
style: legende_style
|
|
}));
|
|
children.push(new paper.PointText({
|
|
point: [this.pos.x + q_t, this.pos.y - q_t],
|
|
content: "Mise-en-œuvre\nde la décision",
|
|
fontSize: fontsize,
|
|
justification: 'left'
|
|
}));
|
|
|
|
// ARC bas droite 1
|
|
children.push(new paper.Path.Arc({
|
|
from: [this.pos.x + lar, this.pos.y + pcr],
|
|
through: [this.pos.x + o, this.pos.y + p],
|
|
to: [this.pos.x + q + pcr/2, this.pos.y + q - pcr/2],
|
|
style: legende_style
|
|
}));
|
|
children.push(new paper.PointText({
|
|
point: [this.pos.x + o_t, this.pos.y + p_t],
|
|
content: "Réception et application\nde la décision",
|
|
fontSize: fontsize,
|
|
justification: 'left'
|
|
}));
|
|
|
|
// ARC bas droite 2
|
|
children.push(new paper.Path.Arc({
|
|
from: [this.pos.x + q - pcr/2, this.pos.y + q + pcr/2],
|
|
through: [this.pos.x + p, this.pos.y + o],
|
|
to: [this.pos.x + pcr, this.pos.y + lar],
|
|
style: legende_style
|
|
}));
|
|
children.push(new paper.PointText({
|
|
point: [this.pos.x + p_t, this.pos.y + o_t],
|
|
content: "Réussite / échec / reprise\ndu cercle politique",
|
|
fontSize: fontsize,
|
|
justification: 'left'
|
|
}));
|
|
|
|
|
|
// cercle interieur
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y],
|
|
radius: dr,
|
|
style: style
|
|
}));
|
|
|
|
// petit cercles
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y -r],
|
|
radius: pcr,
|
|
style: style
|
|
}));
|
|
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y + r],
|
|
radius: pcr,
|
|
style: style
|
|
}));
|
|
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x + r, this.pos.y],
|
|
radius: pcr,
|
|
style: style
|
|
}));
|
|
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x -r, this.pos.y],
|
|
radius: pcr,
|
|
style: style
|
|
}));
|
|
|
|
// axes
|
|
// vertical
|
|
// haut
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x, this.pos.y - r + pcr],
|
|
to: [this.pos.x , this.pos.y - dr],
|
|
style: style
|
|
}));
|
|
// bas
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x, this.pos.y + r - pcr],
|
|
to: [this.pos.x , this.pos.y + dr],
|
|
style: style
|
|
}));
|
|
|
|
// horizontal
|
|
// gauche
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - r + pcr, this.pos.y],
|
|
to: [this.pos.x - dr, this.pos.y],
|
|
style: style
|
|
}));
|
|
// droite
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x + r - pcr, this.pos.y],
|
|
to: [this.pos.x + dr, this.pos.y],
|
|
style: style
|
|
}));
|
|
|
|
// diagonales
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x + m, this.pos.y + m],
|
|
to: [this.pos.x + n, this.pos.y + n],
|
|
style: style
|
|
}));
|
|
//
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - m, this.pos.y + m],
|
|
to: [this.pos.x - n, this.pos.y + n],
|
|
style: style
|
|
}));
|
|
//
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x + m, this.pos.y - m],
|
|
to: [this.pos.x + n, this.pos.y - n],
|
|
style: style
|
|
}));
|
|
//
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - m, this.pos.y - m],
|
|
to: [this.pos.x - n, this.pos.y - n],
|
|
style: style
|
|
}));
|
|
|
|
return new paper.Group({
|
|
children: children,
|
|
pivot: new paper.Point(this.pos),
|
|
name: 'doleance_bg',
|
|
locked: true
|
|
});
|
|
},
|
|
setPaperDoleanceICON(){
|
|
let children = [];
|
|
|
|
var r = 20 * this.scale; // ray
|
|
var dr = r/2; // demi ray
|
|
var d = r*2; // diameter
|
|
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y],
|
|
radius: r
|
|
}));
|
|
|
|
children.push(new paper.Path.Circle({
|
|
center: [this.pos.x, this.pos.y],
|
|
radius: dr
|
|
}));
|
|
|
|
|
|
// axes
|
|
// vertical
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x, this.pos.y - r],
|
|
to: [this.pos.x , this.pos.y - dr],
|
|
}));
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x, this.pos.y + r],
|
|
to: [this.pos.x , this.pos.y + dr],
|
|
}));
|
|
|
|
// horizontal
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - r, this.pos.y],
|
|
to: [this.pos.x - dr, this.pos.y],
|
|
}));
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x + r, this.pos.y],
|
|
to: [this.pos.x + dr, this.pos.y],
|
|
}));
|
|
|
|
// diagonale
|
|
// https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
|
|
// https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
|
|
// radians = degrees * (pi/180)
|
|
// degrees = radians * (180/pi)
|
|
let m,n;
|
|
m = Math.sin(45*(Math.PI/180)) * r;
|
|
n = Math.sin(45*(Math.PI/180)) * r/2;
|
|
// console.log('m', m);
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x + m, this.pos.y + m],
|
|
to: [this.pos.x + n, this.pos.y + n],
|
|
}));
|
|
//
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - m, this.pos.y + m],
|
|
to: [this.pos.x - n, this.pos.y + n],
|
|
}));
|
|
//
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x + m, this.pos.y - m],
|
|
to: [this.pos.x + n, this.pos.y - n],
|
|
}));
|
|
//
|
|
children.push(new paper.Path.Line({
|
|
from: [this.pos.x - m, this.pos.y - m],
|
|
to: [this.pos.x - n, this.pos.y - n],
|
|
}));
|
|
|
|
return new paper.Group({
|
|
children: children,
|
|
pivot: new paper.Point(this.pos),
|
|
name: 'doleance_icon',
|
|
locked: true,
|
|
style: {
|
|
strokeColor: '#000',
|
|
strokeWidth: 1
|
|
}
|
|
});
|
|
},
|
|
setPaperDoleanceSteps(){
|
|
|
|
},
|
|
// PAPER EVENTS
|
|
initPaperEvents(){
|
|
|
|
this.paper_objects.onMouseEnter = function(event){
|
|
if (!this.is_opened) {
|
|
this.setHoverElmt({
|
|
type: 'concernement',
|
|
id: this.id
|
|
});
|
|
document.body.style.cursor = "pointer";
|
|
}
|
|
}.bind(this);
|
|
|
|
this.paper_objects.onMouseMove = function(event){
|
|
// TODO besoins & actions & doleances
|
|
if (this.is_opened) {
|
|
|
|
// lets define some options regarding the map_mode
|
|
let paper_group_tohit;
|
|
switch (this.map_mode) {
|
|
case "terraindevie":
|
|
paper_group_tohit = 'entites';
|
|
break;
|
|
case "action":
|
|
paper_group_tohit = 'agissantes';
|
|
break;
|
|
case "puissancedagir":
|
|
paper_group_tohit = 'puissanceagir_besoins';
|
|
break;
|
|
}
|
|
|
|
let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point);
|
|
|
|
if (result) {
|
|
console.log('move result', result);
|
|
let hover_elmt = {
|
|
type: result.item.item_type,
|
|
id: result.item.item_id
|
|
};
|
|
switch (this.map_mode) {
|
|
// case "terraindevie":
|
|
// break;
|
|
// case "action":
|
|
// break;
|
|
case "puissancedagir":
|
|
hover_elmt.bid = result.item.item_bid;
|
|
hover_elmt.cid = result.item.item_cid;
|
|
break;
|
|
}
|
|
this.setHoverElmt(hover_elmt);
|
|
document.body.style.cursor = "pointer";
|
|
} else {
|
|
this.resetHoverElmt();
|
|
document.body.style.cursor = "auto";
|
|
}
|
|
}
|
|
}.bind(this);
|
|
|
|
this.paper_objects.onMouseLeave = function(event){
|
|
if (!this.is_opened) {
|
|
this.resetHoverElmt();
|
|
document.body.style.cursor = "auto";
|
|
}
|
|
}.bind(this);
|
|
|
|
this.paper_objects.onClick = function(event){
|
|
console.log('paper concernement onClick');
|
|
if (!this.is_opened) {
|
|
// open/close all concernements
|
|
this.openCloseConcernements(this.id)
|
|
// push route (keep the hash for map_mode)
|
|
this.$router.push({
|
|
name: 'concernement',
|
|
hash: `#${this.map_mode}`,
|
|
params: {id: this.id}
|
|
});
|
|
// reset the mousehover
|
|
this.resetHoverElmt();
|
|
} else {
|
|
// lets define some options regarding the map_mode
|
|
let op;
|
|
switch (this.map_mode) {
|
|
case "terraindevie":
|
|
op = {
|
|
pg: 'entites', // paper group to hittest
|
|
// id: 'eid' // id prop on paper item
|
|
}
|
|
break;
|
|
case "action":
|
|
op = {
|
|
pg: 'agissantes', // paper group to hittest
|
|
// id: 'eid' // id prop on paper item
|
|
}
|
|
break;
|
|
}
|
|
|
|
let result = this.paper_objects.children[op.pg].hitTest(event.point);
|
|
// console.log('click result', result);
|
|
if (result) {
|
|
// we have clicked on an entite
|
|
this.$router.push({
|
|
name: 'concernement',
|
|
hash: `#${this.map_mode}`,
|
|
params: {id: this.opened.id, eid: result.item.item_id}
|
|
});
|
|
} else {
|
|
// otherwise we close the entite and come back to the concernement
|
|
this.$router.push({
|
|
name: 'concernement',
|
|
hash: `#${this.map_mode}`,
|
|
params: {id: this.opened.id}
|
|
});
|
|
// reset the mousehover
|
|
this.resetHoverElmt();
|
|
}
|
|
}
|
|
}.bind(this);
|
|
|
|
},
|
|
resetHoverElmt(){
|
|
setTimeout(()=>{
|
|
this.setHoverElmt(null);
|
|
}, 100);
|
|
},
|
|
openClose(open) {
|
|
// console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
|
|
if (this.tween) {
|
|
this.tween.stop();
|
|
}
|
|
if (open) {
|
|
// paper bring to front
|
|
this.paper_objects.bringToFront();
|
|
// opening tweening
|
|
this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0})
|
|
.to({
|
|
s: 7,
|
|
x: (this.canvas.width - 450) / 2,
|
|
y: this.canvas.height / 2 + 50,
|
|
o: 0.8
|
|
}, 800)
|
|
.onUpdate((obj) => {
|
|
// https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
|
|
// revert to the original size (by reverting the previous scale)
|
|
Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
|
|
this.paper_objects.scale(1 / this.scale);
|
|
// then scale again to new scale
|
|
Matter.Body.scale(this.body, obj.s, obj.s)
|
|
this.paper_objects.scale(obj.s);
|
|
|
|
// record new scale
|
|
this.prev_scale = this.scale;
|
|
this.scale = obj.s;
|
|
this.opacity = obj.o;
|
|
|
|
Matter.Body.setPosition(this.body, {x:obj.x, y:obj.y});
|
|
this.pos = {x:obj.x, y:obj.y};
|
|
})
|
|
.onComplete((obj) => {
|
|
this.constraint = Matter.Constraint.create({
|
|
pointA: this.pos,
|
|
bodyB: this.body,
|
|
stiffness: 1,
|
|
damping: 0,
|
|
length: 0
|
|
});
|
|
Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
|
|
this.prev_scale = this.scale;
|
|
});
|
|
// recreate the matter engine event to get it a the end of the events stack
|
|
Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
|
|
Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
|
|
} else {
|
|
// closing
|
|
if(this.constraint){
|
|
Matter.Composite.remove(this.matterEngine.world, this.constraint);
|
|
}
|
|
this.tween = new Tween.Tween({s: this.scale, o: 1})
|
|
.to({s: 1, o: 0}, 500)
|
|
.onUpdate((obj) => {
|
|
// https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
|
|
// revert to the original size (by reverting the previous scale)
|
|
Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
|
|
this.paper_objects.scale(1 / this.scale);
|
|
// then scale again to new scale
|
|
Matter.Body.scale(this.body, obj.s, obj.s)
|
|
this.paper_objects.scale(obj.s);
|
|
|
|
// record new scale
|
|
this.prev_scale = this.scale;
|
|
this.scale = obj.s;
|
|
this.opacity = obj.o;
|
|
})
|
|
.onComplete((obj) => {
|
|
this.prev_scale = this.scale = 1;
|
|
});
|
|
}
|
|
this.tween.easing(Tween.Easing.Quadratic.InOut).start();
|
|
},
|
|
onBeforeEngineUpdate (event) {
|
|
if (this.tween) {
|
|
this.tween.update();
|
|
}
|
|
if (this.map_mode === 'action' || this.map_mode === 'puissancedagir'){
|
|
this.applyFocusForces();
|
|
// TODO apply a little force to check the map when returning to terrain de vie
|
|
}
|
|
Matter.Body.setAngle(this.body, 0);
|
|
Matter.Body.setAngularSpeed(this.body, 0);
|
|
},
|
|
applyFocusForces(){
|
|
// map_mode action
|
|
var dist, dir, ori_pos;
|
|
var x_force = 0;
|
|
if(!this.isFocused()) {
|
|
// does not has actions -> take a side
|
|
// apply a force in direction of one side or an other depending of the start position
|
|
// the force is exponentialy proportional to the distance from the side
|
|
dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side
|
|
dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side
|
|
ori_pos = {x:this.canvas.width/2, y:this.body.position.y};
|
|
x_force = Math.pow(dist/700,10) * dir;
|
|
}else{
|
|
// has action, get to the centre
|
|
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
|
|
ori_pos = dir < 0 ? {x:this.canvas.width, y:this.body.position.y} : {x:0, y:this.body.position.y}
|
|
x_force = Math.pow(dist/800,10) * dir;
|
|
|
|
this.body.frictionAir = 0.05;
|
|
}
|
|
// x_force = (dist > 200 ? Math.pow(dist/700,10) : 0) * dir
|
|
Matter.Body.applyForce(
|
|
this.body,
|
|
ori_pos,
|
|
{
|
|
x: x_force,
|
|
y: 0
|
|
}
|
|
);
|
|
},
|
|
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;
|
|
|
|
Matter.Body.setVelocity(this.body, {x: x_velocity, y: 0});
|
|
},
|
|
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){
|
|
this.pos = this.getRandomPos()
|
|
Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
|
|
this.setInitBodyVelocity();
|
|
}
|
|
|
|
this.paper_objects.position = this.pos = this.body.position;
|
|
|
|
// this.draw()
|
|
this.handlePaperVisibility()
|
|
},
|
|
// PAPER VISIBILITY
|
|
handlePaperVisibility(){
|
|
// contours focused
|
|
if (!this.isFocused()){
|
|
this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.3)";
|
|
}else{
|
|
this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.8)";
|
|
if (this.isHover) {
|
|
this.paper_objects.children['contours'].strokeColor = "#01ffe2";
|
|
}else{
|
|
this.paper_objects.children['contours'].strokeColor = "#000";
|
|
}
|
|
}
|
|
|
|
// contours visibility
|
|
if (!this.is_opened
|
|
|| (this.is_opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
|
|
this.paper_objects.children['contours'].visible = true;
|
|
} else {
|
|
this.paper_objects.children['contours'].visible = false;
|
|
}
|
|
|
|
// backgrounds
|
|
if (this.is_opened) {
|
|
// hide all bgs
|
|
this.paper_objects.children.boussole_bg.visible = false;
|
|
if (this.concernement.has_puissancedagir) {
|
|
this.paper_objects.children.puissanceagir_bg.visible = false;
|
|
}
|
|
if (this.concernement.has_doleance) {
|
|
this.paper_objects.children.doleance_bg.visible = false;
|
|
}
|
|
// choose wich one to show, if one
|
|
switch (this.map_mode) {
|
|
case 'terraindevie':
|
|
this.paper_objects.children.boussole_bg.visible = true;
|
|
break;
|
|
case 'puissancedagir':
|
|
if (this.concernement.has_puissancedagir) {
|
|
this.paper_objects.children.puissanceagir_bg.visible = true;
|
|
}
|
|
break;
|
|
case 'doleancer':
|
|
if (this.concernement.has_doleance) {
|
|
this.paper_objects.children.doleance_bg.visible = true;
|
|
}
|
|
break;
|
|
}
|
|
}else{
|
|
this.paper_objects.children.boussole_bg.visible = false;
|
|
if (this.concernement.has_puissancedagir) {
|
|
this.paper_objects.children.puissanceagir_bg.visible = false;
|
|
}
|
|
if (this.concernement.has_doleance) {
|
|
this.paper_objects.children.doleance_bg.visible = false;
|
|
}
|
|
}
|
|
|
|
// entites
|
|
if (this.is_opened
|
|
&& this.map_mode !== 'puissancedagir'
|
|
&& this.map_mode !== 'doleancer'
|
|
&& this.map_mode !== 'action' ) {
|
|
this.paper_objects.children.entites.visible = true;
|
|
} else {
|
|
this.paper_objects.children.entites.visible = false;
|
|
}
|
|
|
|
// puissance d'agir
|
|
if (this.concernement.has_puissancedagir) {
|
|
if (this.map_mode === "puissancedagir") {
|
|
if (!this.is_opened) {
|
|
this.paper_objects.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone
|
|
this.paper_objects.children.puissanceagir_besoins.visible = false;
|
|
} else {
|
|
this.paper_objects.children.puissanceagir_icon.visible = false;
|
|
this.paper_objects.children.puissanceagir_besoins.visible = true;
|
|
// this.drawBesoins();
|
|
}
|
|
} else {
|
|
this.paper_objects.children.puissanceagir_icon.visible = false;
|
|
this.paper_objects.children.puissanceagir_besoins.visible = false;
|
|
}
|
|
}
|
|
|
|
// agissantes
|
|
// console.log('this.concernement.has_agissantes', this.concernement.has_agissantes);
|
|
if (this.concernement.has_agissantes) {
|
|
if (this.map_mode === "action") {
|
|
this.paper_objects.children.agissantes.visible = true;
|
|
} else {
|
|
this.paper_objects.children.agissantes.visible = false;
|
|
}
|
|
}
|
|
|
|
// doleance
|
|
if (this.concernement.has_doleance) {
|
|
if (this.map_mode === "doleancer") {
|
|
if (!this.is_opened) {
|
|
this.paper_objects.children.doleance_icon.visible = true;
|
|
// this.paper_objects.children.doleance_steps.visible = false;
|
|
} else {
|
|
this.paper_objects.children.doleance_icon.visible = false;
|
|
// this.paper_objects.children.doleance_steps.visible = true;
|
|
// this.drawBesoins();
|
|
}
|
|
} else {
|
|
this.paper_objects.children.doleance_icon.visible = false;
|
|
// this.paper_objects.children.doleance_steps.visible = false;
|
|
}
|
|
}
|
|
|
|
},
|
|
isFocused(){
|
|
return this.map_mode === 'terraindevie'
|
|
|| (this.map_mode === 'action' && this.concernement.has_agissantes)
|
|
|| (this.map_mode === 'puissancedagir' && this.concernement.has_puissancedagir)
|
|
|| (this.map_mode === 'doleancer' && this.concernement.has_doleance);
|
|
},
|
|
},
|
|
render() {
|
|
// console.log('render()', this.ctx);
|
|
},
|
|
}
|
|
|
|
</script> |