bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

concernement's entitées are now matter body parts AND mouseoverable & clickable

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-04-18 21:55:44 +02:00
parent a2ae70ef48
commit 440e6d9f15
4 changed files with 73 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/App.vue
View File

@ -23,12 +23,40 @@ export default {
computed: { computed: {
...mapState(UserStore,['isloggedin']), ...mapState(UserStore,['isloggedin']),
...mapState(ConcernementsStore,['concernements']), ...mapState(ConcernementsStore,['concernements']),
...mapState(ConcernementsStore,['concernementsByID']) ...mapState(ConcernementsStore,['concernementsByID']),
...mapState(ConcernementsStore,['opened'])
}, },
methods: { methods: {
...mapActions(ConcernementsStore,['loadConcernements']), ...mapActions(ConcernementsStore,['loadConcernements']),
...mapActions(ConcernementsStore,['loadContentTypeDefinition']), ...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: { components: {
MapConcernements, MapConcernements,
@ -54,11 +82,16 @@ export default {
<div id="main-content"> <div id="main-content">
<MapConcernements> <MapConcernements>
<ConcernementMapItem <ConcernementMapItem
v-for="(concernement,id) in concernementsByID" v-for="(concernement,index) in concernements"
:key="id" :key="index"
:concernement="concernement" :concernement="concernement"
:opened="concernement.opened" :opened="concernement.opened"
/> />
<!-- <ConcernementMapItem
v-if="opened"
:concernement="opened"
:opened="opened.opened"
/> -->
</MapConcernements> </MapConcernements>
<div id="content"> <div id="content">
<RouterView /> <RouterView />

48
src/components/ConcernementMapItem.vue
View File

@ -128,7 +128,7 @@ export default {
// item_type: 'entite', // item_type: 'entite',
// id: this.entites[i].id // 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', item_type: 'entite',
id: this.entites[i].entite.id, id: this.entites[i].entite.id,
isSensor: true isSensor: true
@ -292,6 +292,9 @@ export default {
}); });
Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]); 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 { } else {
// closing // closing
if(this.constraint){ if(this.constraint){
@ -334,11 +337,6 @@ export default {
this.pos = this.body.position; 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) { if (this.opened) {
// BOUSSOLE // BOUSSOLE
// exterieur circle // exterieur circle
@ -413,30 +411,26 @@ export default {
if (this.opened) { if (this.opened) {
// place all entities points // place all entities points
for (let i = 0; i < this.entites.length; i++) { // using entities array
let entite = this.entites[i]; // for (let i = 0; i < this.entites.length; i++) {
// console.log('entite', entite); // let entite = this.entites[i];
this.ctx.beginPath(); // // console.log('entite', entite);
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.beginPath();
this.ctx.strokeStyle = "#F00"; // 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.stroke(); // 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();
// 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 // concernement id @center

8
src/components/MapConcernements.vue
View File

@ -105,7 +105,7 @@ export default {
this.animate() this.animate()
}, },
methods: { methods: {
...mapActions(ConcernementsStore,['openCloseConcernement']), ...mapActions(ConcernementsStore,['openCloseConcernements']),
...mapActions(ConcernementsStore,['resetConcernementOpened']), ...mapActions(ConcernementsStore,['resetConcernementOpened']),
animate () { animate () {
this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height) this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
@ -115,7 +115,6 @@ export default {
}, },
onMouseMove (e) { onMouseMove (e) {
// check concernement item mouse over // check concernement item mouse over
// const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
let query; let query;
if (this.opened) { if (this.opened) {
// if a concernement is opened we query the opened concernement's parts (aka entitées bodies) // 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); clickedIDs.push(elmt.id);
}); });
// open/close all concernements // open/close all concernements
this.concernements.forEach((concernement, index) => { this.openCloseConcernements(clickedIDs)
this.openCloseConcernement(concernement.id, clickedIDs.indexOf(concernement.id) !== -1)
});
// if no concernement opened retrun to home (closing concernement contents opened) // if no concernement opened retrun to home (closing concernement contents opened)
// and reset the opened state in concernement store // and reset the opened state in concernement store
if (!clickedIDs.length) { if (!clickedIDs.length) {

17
src/stores/concernements.js
View File

@ -83,13 +83,16 @@ export const ConcernementsStore = defineStore({
}) })
}, },
openCloseConcernement (id, state) { openCloseConcernements (ids) {
// console.log('openCloseConcernement', id, state); var state;
this.concernementsByID[id].opened = state; this.concernements.forEach((c, i) => {
if (state) { state = ids.indexOf(c.id) !== -1;
this.opened = this.concernementsByID[id]; this.concernements[i].opened = this.concernementsByID[c.id].opened = state;
this.router.push({name: 'concernement', params: {id: id}}); if (state) {
} this.opened = c;
this.router.push({name: 'concernement', params: {id: c.id}});
}
});
}, },
resetConcernementOpened () { resetConcernementOpened () {
this.opened = null; this.opened = null;