fixing and cleaning
This commit is contained in:
parent
3b1565c82f
commit
894b0219c5
14
src/App.vue
14
src/App.vue
@ -54,12 +54,14 @@ export default {
|
||||
|
||||
<div id="main-content">
|
||||
<MapConcernements>
|
||||
<ConcernementMapItem
|
||||
v-for="(concernement,index) in concernements"
|
||||
:key="index"
|
||||
:concernement="concernement"
|
||||
:is_opened="concernement.opened"
|
||||
/>
|
||||
<template v-for="(concernement,index) in concernements">
|
||||
<ConcernementMapItem
|
||||
v-if="concernement.visible"
|
||||
:key="index"
|
||||
:concernement="concernement"
|
||||
:is_opened="concernement.opened"
|
||||
/>
|
||||
</template>
|
||||
</MapConcernements>
|
||||
<div id="content">
|
||||
<RouterView />
|
||||
|
||||
@ -196,6 +196,7 @@ body{
|
||||
#map-popup{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
// outline: 1px solid red;
|
||||
// top:0;
|
||||
// left: 0;
|
||||
@ -218,6 +219,16 @@ body{
|
||||
}
|
||||
}
|
||||
}
|
||||
.reponse-map-popup{
|
||||
>div{
|
||||
margin-bottom: 0.5em;
|
||||
label{
|
||||
display: block;
|
||||
font-weight: 100;
|
||||
font-size: 0.882em;
|
||||
}
|
||||
}
|
||||
}
|
||||
h1, div{
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
|
||||
@ -38,7 +38,6 @@ export default {
|
||||
return {
|
||||
id: null,
|
||||
entities: null,
|
||||
// opened_entite_id: null,
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
pos : {
|
||||
@ -55,7 +54,7 @@ export default {
|
||||
body: null,
|
||||
body_parts: [],
|
||||
constraint: null,
|
||||
isHover: false,
|
||||
is_hover: false,
|
||||
//
|
||||
paper_objects: {}
|
||||
}
|
||||
@ -88,6 +87,8 @@ export default {
|
||||
if (this.canvasMap) {
|
||||
this.initCanvasMap()
|
||||
}
|
||||
} else {
|
||||
this.hideShowConcernement(this.concernement.id, false);
|
||||
}
|
||||
|
||||
},
|
||||
@ -121,8 +122,8 @@ export default {
|
||||
map_mode: {
|
||||
handler (n, o) {
|
||||
console.log('watch map_mode', o, n);
|
||||
if (n === 'terraindevie') {
|
||||
this.applyShuffleForces();
|
||||
if (n === 'terraindevie' && !this.opened) {
|
||||
this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
@ -131,17 +132,31 @@ export default {
|
||||
handler (n, o) {
|
||||
// console.log('watch hover_elmt', o, n);
|
||||
if (n && n.type === 'concernement' && n.id === this.id) {
|
||||
this.isHover = true;
|
||||
this.is_hover = true;
|
||||
} else {
|
||||
this.isHover = false;
|
||||
this.is_hover = false;
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
// '$route':{
|
||||
// handler (to, from) {
|
||||
// console.log('watch $route', from, to);
|
||||
// if (to.name === concernement
|
||||
// && (this.map_mode === "terraindevie" || this.map_mode === "action")
|
||||
// && to.param.id === this.id
|
||||
// && to.param.eid) {
|
||||
// this.opened_entite_id = to.param.eid;
|
||||
// }
|
||||
// },
|
||||
// deep: true,
|
||||
// immediate: true
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
...mapActions(CommonStore,['setHoverElmt']),
|
||||
...mapActions(ConcernementsStore,['openCloseConcernements']),
|
||||
...mapActions(ConcernementsStore,['hideShowConcernement']),
|
||||
parsePoints (){
|
||||
// converts data (menace/maintien, actuel/future, prise) into atcual position x,y
|
||||
for (let i = 0; i < this.entites.length; i++) {
|
||||
@ -386,7 +401,7 @@ export default {
|
||||
this.paper_objects.addChild(this.setPaperDoleanceICON());
|
||||
this.paper_objects.addChild(this.setPaperDoleanceSteps());
|
||||
}
|
||||
console.log('initPaperObjects', this.paper_objects);
|
||||
console.log(`initPaperObjects ${this.id}`, this.paper_objects);
|
||||
|
||||
this.initPaperEvents()
|
||||
},
|
||||
@ -572,7 +587,7 @@ export default {
|
||||
children: children,
|
||||
pivot: new paper.Point(this.pos),
|
||||
name: 'puissanceagir_bg',
|
||||
locked: true,
|
||||
// locked: true,
|
||||
style: {
|
||||
strokeColor: '#fff'
|
||||
}
|
||||
@ -702,7 +717,8 @@ export default {
|
||||
fillColor: '#000',
|
||||
strokeColor: '#000',
|
||||
strokeWidth: 2,
|
||||
eid: part.id
|
||||
item_id: part.id,
|
||||
item_type: 'entite'
|
||||
}))
|
||||
}
|
||||
}
|
||||
@ -1188,7 +1204,7 @@ export default {
|
||||
initPaperEvents(){
|
||||
|
||||
this.paper_objects.onMouseEnter = function(event){
|
||||
if (!this.is_opened) {
|
||||
if (!this.opened && this.isFocused()) { // only if no concernement is opened and is this focused
|
||||
this.setHoverElmt({
|
||||
type: 'concernement',
|
||||
id: this.id
|
||||
@ -1197,7 +1213,15 @@ export default {
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
this.paper_objects.onMouseLeave = function(event){
|
||||
if (!this.opened && this.isFocused()) { // only if no concernement is opened
|
||||
this.resetHoverElmt();
|
||||
document.body.style.cursor = "auto";
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
this.paper_objects.onMouseMove = function(event){
|
||||
// console.log(`onmousemove ${this.id}`);
|
||||
// TODO besoins & actions & doleances
|
||||
if (this.is_opened) {
|
||||
|
||||
@ -1216,19 +1240,15 @@ export default {
|
||||
}
|
||||
|
||||
let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point);
|
||||
|
||||
// console.log('move result', result);
|
||||
if (result) {
|
||||
console.log('move result', result);
|
||||
// console.log('move has 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":
|
||||
switch (result.item.item_type) {
|
||||
case "reponse":
|
||||
hover_elmt.bid = result.item.item_bid;
|
||||
hover_elmt.cid = result.item.item_cid;
|
||||
break;
|
||||
@ -1236,46 +1256,42 @@ export default {
|
||||
this.setHoverElmt(hover_elmt);
|
||||
document.body.style.cursor = "pointer";
|
||||
} else {
|
||||
// console.log('move no result');
|
||||
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();
|
||||
if (!this.opened) {
|
||||
console.log(`Open me ${this.id}`);
|
||||
// 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
|
||||
// debugger;
|
||||
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;
|
||||
}
|
||||
@ -1294,7 +1310,7 @@ export default {
|
||||
this.$router.push({
|
||||
name: 'concernement',
|
||||
hash: `#${this.map_mode}`,
|
||||
params: {id: this.opened.id}
|
||||
params: {id: this.id}
|
||||
});
|
||||
// reset the mousehover
|
||||
this.resetHoverElmt();
|
||||
@ -1304,6 +1320,7 @@ export default {
|
||||
|
||||
},
|
||||
resetHoverElmt(){
|
||||
// console.log('resetHoverElmt');
|
||||
setTimeout(()=>{
|
||||
this.setHoverElmt(null);
|
||||
}, 100);
|
||||
@ -1382,39 +1399,64 @@ export default {
|
||||
}
|
||||
this.tween.easing(Tween.Easing.Quadratic.InOut).start();
|
||||
},
|
||||
// ENGINE UPDATE
|
||||
onBeforeEngineUpdate (event) {
|
||||
// update the opening/closing tweening
|
||||
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
|
||||
|
||||
if (this.opened) {
|
||||
if (this.opened.id !== this.id) {
|
||||
this.pushAside()
|
||||
}
|
||||
} else {
|
||||
// apply focus forces : move unfocused on the sides and focused on the center
|
||||
if (this.map_mode === 'action'
|
||||
|| this.map_mode === 'puissancedagir'
|
||||
|| this.map_mode === 'doleancer'){
|
||||
this.applyFocusForces(); //
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// reset all matter rotation forces otherwise items will spin when colide
|
||||
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;
|
||||
this.pushAside()
|
||||
}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;
|
||||
this.bringToCenter()
|
||||
}
|
||||
// x_force = (dist > 200 ? Math.pow(dist/700,10) : 0) * dir
|
||||
},
|
||||
pushAside(){
|
||||
// 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
|
||||
let dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side
|
||||
let dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side
|
||||
let ori_pos = {x:this.canvas.width/2, y:this.body.position.y};
|
||||
let x_force = Math.pow(dist/700,10) * dir;
|
||||
|
||||
Matter.Body.applyForce(
|
||||
this.body,
|
||||
ori_pos,
|
||||
{
|
||||
x: x_force,
|
||||
y: 0
|
||||
}
|
||||
);
|
||||
},
|
||||
bringToCenter(){
|
||||
// bring to the centre
|
||||
let dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre
|
||||
let dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
|
||||
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;
|
||||
|
||||
this.body.frictionAir = 0.05;
|
||||
|
||||
Matter.Body.applyForce(
|
||||
this.body,
|
||||
ori_pos,
|
||||
@ -1434,14 +1476,14 @@ export default {
|
||||
},
|
||||
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();
|
||||
}
|
||||
// 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;
|
||||
|
||||
@ -1455,7 +1497,7 @@ export default {
|
||||
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) {
|
||||
if (this.is_hover) {
|
||||
this.paper_objects.children['contours'].strokeColor = "#01ffe2";
|
||||
}else{
|
||||
this.paper_objects.children['contours'].strokeColor = "#000";
|
||||
@ -1512,10 +1554,26 @@ 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;
|
||||
}
|
||||
|
||||
|
||||
// puissance d'agir
|
||||
if (this.concernement.has_puissancedagir) {
|
||||
if (this.map_mode === "puissancedagir") {
|
||||
|
||||
@ -29,7 +29,8 @@ export default {
|
||||
} else if (this.infos.type === 'reponse') {
|
||||
for (let i = 0; i < this.allBesoinsById[this.infos.bid].reponses.length; i++) {
|
||||
if (this.allBesoinsById[this.infos.bid].reponses[i].id === this.infos.id) {
|
||||
this.reponse = this.allBesoinsById[this.infos.bid].reponses[i][this.infos.field];
|
||||
this.reponse = this.allBesoinsById[this.infos.bid].reponses[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -53,7 +54,7 @@ export default {
|
||||
} else if(n.type === 'entite') {
|
||||
this.entite = this.allEntitesById[this.infos.id];
|
||||
} else if (n.type === 'besoin') {
|
||||
|
||||
this.besoin = this.allBesoinsById[this.infos.id];
|
||||
} else if (n.type === 'reponse') {
|
||||
|
||||
}
|
||||
@ -122,7 +123,10 @@ export default {
|
||||
<div v-html="besoin.description"></div>
|
||||
</section>
|
||||
<section v-if="infos.type === 'reponse'" class="reponse-map-popup">
|
||||
<div v-html="reponse"></div>
|
||||
<div v-if="reponse.qui"><label>Qui</label><p v-html="reponse.qui"/></div>
|
||||
<div v-if="reponse.quoi"><label>Quoi</label><p v-html="reponse.quoi"/></div>
|
||||
<div v-if="reponse.ou"><label>Où</label><p v-html="reponse.ou"/></div>
|
||||
<div v-if="reponse.avec"><label>Avec</label><p v-html="reponse.avec"/></div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -91,8 +91,17 @@ export default {
|
||||
console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
|
||||
|
||||
this.paper = paper.setup(this.canvasMap.canvas);
|
||||
// console.log('this.canvasMap.paper', this.canvasMap.paper);
|
||||
this.canvasMap.canvas.addEventListener('click', this.onCanvasClick);
|
||||
// // use the paper.view click to get back if no items is clicked
|
||||
this.paper.view.onClick = function(event) {
|
||||
console.log("view onClick", this, event.target);
|
||||
if(event.target._id === "paper-view-0") {
|
||||
this.resetConcernementOpened();
|
||||
this.$router.push({
|
||||
name: 'home',
|
||||
hash: `#${this.map_mode}`
|
||||
});
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
// MATTER
|
||||
let wall_w = 100;
|
||||
@ -122,17 +131,6 @@ export default {
|
||||
Matter.Engine.update(this.engine, 1);
|
||||
window.requestAnimationFrame(this.animate);
|
||||
},
|
||||
onCanvasClick(event){
|
||||
// console.log('onCanvasClick');
|
||||
// use the canvas click to get back if no items is mousover
|
||||
if (!this.hover_elmt) {
|
||||
this.resetConcernementOpened();
|
||||
this.$router.push({
|
||||
name: 'home',
|
||||
hash: `#${this.map_mode}`
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
},
|
||||
|
||||
@ -10,7 +10,7 @@ export const CommonStore = defineStore({
|
||||
},
|
||||
actions: {
|
||||
setHoverElmt(elmt) {
|
||||
console.log(`setHoverElmt`, elmt);
|
||||
// console.log(`setHoverElmt`, elmt);
|
||||
// mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
|
||||
this.hover_elmt = elmt;
|
||||
}
|
||||
|
||||
@ -53,6 +53,8 @@ export const ConcernementsStore = defineStore({
|
||||
|
||||
this.concernements = [];
|
||||
allconcernements.forEach(concernement => {
|
||||
concernement.visible = true;
|
||||
|
||||
concernement.entites_byid = {};
|
||||
concernement.entitesagissantes_byid = {};
|
||||
concernement.has_agissantes = false;
|
||||
@ -134,6 +136,14 @@ export const ConcernementsStore = defineStore({
|
||||
})
|
||||
|
||||
},
|
||||
hideShowConcernement (id, state) {
|
||||
console.log(`disableConcernement id: ${id}`);
|
||||
this.concernements.forEach((c, i) => {
|
||||
if (c.id === id) {
|
||||
this.concernements[i].visible = this.concernementsByID[id].visible = state;
|
||||
}
|
||||
})
|
||||
},
|
||||
openCloseConcernements (id) {
|
||||
console.log(`openCloseConcernements id: ${id}`);
|
||||
var state;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user