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
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/ConcernementMapItem.vue
View File

@@ -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

8
src/components/MapConcernements.vue
View File

@@ -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) {