concernement's entitées are now matter body parts AND mouseoverable & clickable
This commit is contained in:
parent
a2ae70ef48
commit
440e6d9f15
41
src/App.vue
41
src/App.vue
@ -23,12 +23,40 @@ export default {
|
||||
computed: {
|
||||
...mapState(UserStore,['isloggedin']),
|
||||
...mapState(ConcernementsStore,['concernements']),
|
||||
...mapState(ConcernementsStore,['concernementsByID'])
|
||||
...mapState(ConcernementsStore,['concernementsByID']),
|
||||
...mapState(ConcernementsStore,['opened'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(ConcernementsStore,['loadConcernements']),
|
||||
...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
|
||||
...mapActions(UserStore,['checkUser'])
|
||||
...mapActions(UserStore,['checkUser']),
|
||||
// sortedConcernements () {
|
||||
// if (this.concernements.length) {
|
||||
// let cs = this.concernements;
|
||||
// cs.sort(function(a, b) {
|
||||
// if (a.opened && !b.opened) {
|
||||
// return 1;
|
||||
// }
|
||||
// if (!a.opened && b.opened) {
|
||||
// return -1;
|
||||
// }
|
||||
// return 0;
|
||||
// });
|
||||
// return cs;
|
||||
// // Object.keys(this.concernementsByID).forEach((id, i) => {
|
||||
// // console.log(id);
|
||||
// // if (!this.concernementsByID[id].opened) {
|
||||
// // console.log('not opened');
|
||||
// // cs[id] = this.concernementsByID[id];
|
||||
// // }
|
||||
|
||||
// // });
|
||||
// // console.log('filtered concernements', cs);
|
||||
// // return cs;
|
||||
// } else {
|
||||
// return null
|
||||
// }
|
||||
// }
|
||||
},
|
||||
components: {
|
||||
MapConcernements,
|
||||
@ -54,11 +82,16 @@ export default {
|
||||
<div id="main-content">
|
||||
<MapConcernements>
|
||||
<ConcernementMapItem
|
||||
v-for="(concernement,id) in concernementsByID"
|
||||
:key="id"
|
||||
v-for="(concernement,index) in concernements"
|
||||
:key="index"
|
||||
:concernement="concernement"
|
||||
:opened="concernement.opened"
|
||||
/>
|
||||
<!-- <ConcernementMapItem
|
||||
v-if="opened"
|
||||
:concernement="opened"
|
||||
:opened="opened.opened"
|
||||
/> -->
|
||||
</MapConcernements>
|
||||
<div id="content">
|
||||
<RouterView />
|
||||
|
||||
@ -128,7 +128,7 @@ export default {
|
||||
// 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, 2, {
|
||||
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,
|
||||
isSensor: true
|
||||
@ -292,6 +292,9 @@ export default {
|
||||
});
|
||||
Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
|
||||
});
|
||||
// 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){
|
||||
@ -334,11 +337,6 @@ export default {
|
||||
|
||||
this.pos = this.body.position;
|
||||
|
||||
// this.ctx.clearRect(
|
||||
// this.pos.x - this.ray*this.scale, this.pos.y - this.ray*this.scale,
|
||||
// this.ray*this.scale*2, this.ray*this.scale*2
|
||||
// );
|
||||
|
||||
if (this.opened) {
|
||||
// BOUSSOLE
|
||||
// exterieur circle
|
||||
@ -413,30 +411,26 @@ export default {
|
||||
|
||||
if (this.opened) {
|
||||
// place all entities points
|
||||
for (let i = 0; i < this.entites.length; i++) {
|
||||
let entite = this.entites[i];
|
||||
// console.log('entite', entite);
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 5, 0, 2 * Math.PI, false);
|
||||
this.ctx.strokeStyle = "#F00";
|
||||
this.ctx.stroke();
|
||||
}
|
||||
// OR
|
||||
for (let i = 0; i < this.body.parts.length; i++) {
|
||||
// let entite = this.entites[i];
|
||||
if (this.body.parts[i].item_type === 'entity') {
|
||||
let part = this.body.parts[i];
|
||||
// console.log('part', part);
|
||||
// console.log(`part pos x:${part.position.x} y:${part.position.y} || entity pos x:${this.pos.x+this.entites_byid[part.id].display.pos.x*this.scale} y:${this.pos.y+this.entites_byid[part.id].display.pos.y*this.scale}`);
|
||||
this.ctx.beginPath();
|
||||
// this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
|
||||
this.ctx.arc(this.body.parts[i].position.x, this.body.parts[i].position.y, 2*this.scale, 0, 2 * Math.PI, false);
|
||||
this.ctx.strokeStyle = "#000";
|
||||
this.ctx.stroke();
|
||||
|
||||
}
|
||||
}
|
||||
// using entities array
|
||||
// for (let i = 0; i < this.entites.length; i++) {
|
||||
// let entite = this.entites[i];
|
||||
// // console.log('entite', entite);
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 5, 0, 2 * Math.PI, false);
|
||||
// this.ctx.strokeStyle = "#F00";
|
||||
// this.ctx.stroke();
|
||||
// }
|
||||
|
||||
// OR using entitées matter bodies
|
||||
for (let i = 0; i < this.body.parts.length; i++) {
|
||||
if (this.body.parts[i].item_type === 'entite') {
|
||||
let part = this.body.parts[i];
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(this.body.parts[i].position.x, this.body.parts[i].position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
|
||||
this.ctx.fillStyle = "#000";
|
||||
this.ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// concernement id @center
|
||||
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
this.animate()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(ConcernementsStore,['openCloseConcernement']),
|
||||
...mapActions(ConcernementsStore,['openCloseConcernements']),
|
||||
...mapActions(ConcernementsStore,['resetConcernementOpened']),
|
||||
animate () {
|
||||
this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
|
||||
@ -115,7 +115,6 @@ export default {
|
||||
},
|
||||
onMouseMove (e) {
|
||||
// check concernement item mouse over
|
||||
// const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
|
||||
let query;
|
||||
if (this.opened) {
|
||||
// if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
|
||||
@ -168,9 +167,8 @@ export default {
|
||||
clickedIDs.push(elmt.id);
|
||||
});
|
||||
// open/close all concernements
|
||||
this.concernements.forEach((concernement, index) => {
|
||||
this.openCloseConcernement(concernement.id, clickedIDs.indexOf(concernement.id) !== -1)
|
||||
});
|
||||
this.openCloseConcernements(clickedIDs)
|
||||
|
||||
// if no concernement opened retrun to home (closing concernement contents opened)
|
||||
// and reset the opened state in concernement store
|
||||
if (!clickedIDs.length) {
|
||||
|
||||
@ -83,13 +83,16 @@ export const ConcernementsStore = defineStore({
|
||||
})
|
||||
|
||||
},
|
||||
openCloseConcernement (id, state) {
|
||||
// console.log('openCloseConcernement', id, state);
|
||||
this.concernementsByID[id].opened = state;
|
||||
if (state) {
|
||||
this.opened = this.concernementsByID[id];
|
||||
this.router.push({name: 'concernement', params: {id: id}});
|
||||
}
|
||||
openCloseConcernements (ids) {
|
||||
var state;
|
||||
this.concernements.forEach((c, i) => {
|
||||
state = ids.indexOf(c.id) !== -1;
|
||||
this.concernements[i].opened = this.concernementsByID[c.id].opened = state;
|
||||
if (state) {
|
||||
this.opened = c;
|
||||
this.router.push({name: 'concernement', params: {id: c.id}});
|
||||
}
|
||||
});
|
||||
},
|
||||
resetConcernementOpened () {
|
||||
this.opened = null;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user