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

enites as matter body and popup display on mouse over entites

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-04-18 17:16:33 +02:00
parent a940012b6e
commit a2ae70ef48
5 changed files with 173 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/main.scss
View File

@ -104,7 +104,7 @@ body{
} }
} }
#concernement-map-popup{ #map-popup{
position: absolute; position: absolute;
// top:0; // top:0;
// left: 0; // left: 0;

105
src/components/ConcernementMapItem.vue
View File

@ -32,6 +32,7 @@ export default {
inject: ['canvasMap', 'matterEngine'], inject: ['canvasMap', 'matterEngine'],
data() { data() {
return { return {
entities: null,
// concernement: null, // concernement: null,
canvas: null, canvas: null,
ctx: null, ctx: null,
@ -58,6 +59,7 @@ export default {
created () { created () {
// console.log("ConcernementsMapItem concernement", this.canvasMap, this.matterEngine); // console.log("ConcernementsMapItem concernement", this.canvasMap, this.matterEngine);
this.entites = this.concernement.entites this.entites = this.concernement.entites
this.entites_byid = this.concernement.entites_byid
this.parsePoints() this.parsePoints()
this.getSalientPoints() this.getSalientPoints()
}, },
@ -82,16 +84,11 @@ export default {
}, },
opened: { opened: {
handler (n, o) { handler (n, o) {
if(n){ if(n){ // opened
console.log('concernement item opened');
// opened
this.openClose(true); this.openClose(true);
}else{ }else{ // closed
console.log('concernement item closed');
// closed
this.openClose(false) this.openClose(false)
} }
console.log(`watch opened ${this.concernement.id}`, n, o, this.anim);
}, },
deep: true deep: true
} }
@ -105,6 +102,10 @@ export default {
// define init position of the item // define init position of the item
this.pos = this.getRandomPos(); this.pos = this.getRandomPos();
//
this.initMatterBody()
},
initMatterBody (){
// MATTER // MATTER
// create the matter body and add it to the engine // create the matter body and add it to the engine
@ -114,12 +115,38 @@ export default {
// https://github.com/liabru/matter-attractors/issues/8 // https://github.com/liabru/matter-attractors/issues/8
// https://github.com/liabru/matter-attractors/blob/master/index.js // https://github.com/liabru/matter-attractors/blob/master/index.js
// MatterAttractors.Attractors.gravityConstant = -5; // MatterAttractors.Attractors.gravityConstant = -5;
this.body = Matter.Bodies.circle(this.pos.x, this.pos.y, this.ray, {
// Create parts of the body : main big circle & entities
var parts = [
Matter.Bodies.circle(0, 0, this.ray, {
item_type: 'concernement',
id: this.concernement.id,
})
];
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
// }))
parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 2, {
item_type: 'entite',
id: this.entites[i].entite.id,
isSensor: true
}))
}
// create the body
this.body = Matter.Body.create({
parts: parts,
item_type: 'concernement',
id: this.concernement.id,
frictionAir: 0, frictionAir: 0,
// mass: Math.pow(3, this.entites.length), // mass: Math.pow(3, this.entites.length),
mass: 10, mass: 10,
restitution: 0.4, restitution: 0.4,
id: this.concernement.id, collisionFilter: {
group: -1
},
plugin: { plugin: {
attractors: [ attractors: [
// there is a built in helper function for Newtonian gravity! // there is a built in helper function for Newtonian gravity!
@ -128,8 +155,10 @@ export default {
] ]
} }
}); });
let delta = 10; Matter.Body.setPosition(this.body, this.pos);
// add init velocity // add init velocity
let delta = 10;
Matter.Body.setVelocity(this.body, { Matter.Body.setVelocity(this.body, {
x: -delta + Math.random()*delta*2, x: -delta + Math.random()*delta*2,
y: -delta + Math.random()*delta*2 y: -delta + Math.random()*delta*2
@ -137,14 +166,14 @@ export default {
// console.log('concernementItem mass', this.body.mass); // console.log('concernementItem mass', this.body.mass);
Matter.Composite.add(this.matterEngine.world, this.body); Matter.Composite.add(this.matterEngine.world, this.body);
// console.log('concernement body', 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);
} }
// // 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);
}, },
getRandomPos(){ getRandomPos(){
return { return {
@ -167,8 +196,13 @@ export default {
// slope = (output_end - output_start) / (input_end - input_start) // slope = (output_end - output_start) / (input_end - input_start)
// output = output_start + slope * (input - input_start) // output = output_start + slope * (input - input_start)
// from range 0 -> 100 to range 0 -> this.ray // from range 0 -> 100 to range 0 -> this.ray
let slope = this.ray / 100 let init_max = 100
this.entites[i].display.ray = slope * (100 - entite.prise); 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 // ANGLE
// -90 <= mm <= 90 // -90 <= mm <= 90
@ -187,6 +221,8 @@ export default {
x: this.entites[i].display.ray * Math.cos(this.entites[i].display.alpha * (Math.PI/180)), 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)) 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 () { getSalientPoints () {
@ -309,7 +345,8 @@ export default {
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.lineWidth = 2; this.ctx.lineWidth = 2;
this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`; this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;
this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false); // external circle is %8 less than max ray = (*0.92)
this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale*0.92, 0, 2 * Math.PI, false);
// this.ctx.stroke(); // this.ctx.stroke();
// interieur circle // interieur circle
@ -327,9 +364,9 @@ export default {
// fleches // fleches
// haute // haute
this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale)); this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale));
this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale); this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale*0.92);
this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale)); this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale));
// milieu // milieu
this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)); this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale));
this.ctx.lineTo(this.pos.x, this.pos.y); this.ctx.lineTo(this.pos.x, this.pos.y);
@ -380,10 +417,26 @@ export default {
let entite = this.entites[i]; let entite = this.entites[i];
// console.log('entite', entite); // console.log('entite', entite);
this.ctx.beginPath(); 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.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.fillStyle = "#000"; this.ctx.strokeStyle = "#F00";
this.ctx.fill(); 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();
}
} }
} }
// concernement id @center // concernement id @center

41
src/components/ConcernementMapPopup.vue
View File

@ -7,28 +7,48 @@ import { ConcernementsStore } from '@/stores/concernements'
export default { export default {
name: 'concernementMapPopup', name: 'concernementMapPopup',
props: ['id'], props: ['infos'],
data() { data() {
return { return {
dom: null, dom: null,
concernement: null type: null,
concernement: null,
entite: null
} }
}, },
created () { created () {
this.concernement = this.concernementsByID[this.id]; // console.log(`popup created type: ${this.infos.type}`);
if (this.infos.type === 'concernement') {
this.concernement = this.concernementsByID[this.infos.id];
} else {
this.entite = this.allEntitesById[this.infos.id];
}
}, },
mounted () { mounted () {
// console.log('APP onMounted') // console.log('APP onMounted')
this.dom = this.$refs['concernement-map-popup']; this.dom = this.$refs['map-popup'];
window.addEventListener('mousemove', this.onMousemove); window.addEventListener('mousemove', this.onMousemove);
}, },
computed: { computed: {
...mapState(ConcernementsStore,['concernements']), ...mapState(ConcernementsStore,['concernements']),
...mapState(ConcernementsStore,['concernementsByID']) ...mapState(ConcernementsStore,['concernementsByID']),
...mapState(ConcernementsStore,['allEntitesById'])
},
watch: {
infos: {
handler (n, o){
if (n.type === 'concernement') {
this.concernement = this.concernementsByID[n.id];
} else {
this.entite = this.allEntitesById[n.id];
}
},
deep: true
},
}, },
methods: { methods: {
onMousemove(e){ onMousemove(e){
// console.log('popup mousemove', e, this.dom); // console.log(`popup move type: ${this.infos.type}`);
this.dom.style.left = `${e.clientX + 5}px`; this.dom.style.left = `${e.clientX + 5}px`;
this.dom.style.top = `${e.clientY - this.dom.clientHeight - 5}px`; this.dom.style.top = `${e.clientY - this.dom.clientHeight - 5}px`;
} }
@ -40,8 +60,13 @@ export default {
</script> </script>
<template> <template>
<div id="concernement-map-popup" ref="concernement-map-popup"> <div id="map-popup" ref="map-popup">
<h1>{{ concernement.title }}</h1> <section v-if="infos.type === 'concernement'" class="concernement-map-popup">
<h1>{{ concernement.title }}</h1>
</section>
<section v-if="infos.type === 'entite'" class="entite-map-popup">
<h1>alors ? {{ entite.entite.title }}</h1>
</section>
</div> </div>
</template> </template>

59
src/components/MapConcernements.vue
View File

@ -46,7 +46,7 @@ export default {
world: null, world: null,
// render: null, // render: null,
mouse: null, mouse: null,
concernementpopupid: null mapPopupData: null,
} }
}, },
provide() { provide() {
@ -59,7 +59,8 @@ export default {
}, },
computed: { computed: {
...mapState(ConcernementsStore,['concernements']), ...mapState(ConcernementsStore,['concernements']),
...mapState(ConcernementsStore,['concernementsByID']) ...mapState(ConcernementsStore,['concernementsByID']),
...mapState(ConcernementsStore,['opened'])
}, },
created() { created() {
// MATTER // MATTER
@ -105,6 +106,7 @@ export default {
}, },
methods: { methods: {
...mapActions(ConcernementsStore,['openCloseConcernement']), ...mapActions(ConcernementsStore,['openCloseConcernement']),
...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)
// this.canvasMap.canvas.dispatchEvent(this.animateEvent) // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
@ -113,16 +115,45 @@ 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) // const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
// console.log('mousemove query', query); let query;
if (query.length) { if (this.opened) {
if (typeof this.concernementsByID[query[0].id] !== "undefined" && !this.concernementsByID[query[0].id].opened) { // if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
this.concernementpopupid = query[0].id; const bodies = Matter.Composite.allBodies(this.world);
} else { for (let body of bodies) {
this.concernementpopupid = null; if (body.item_type === "concernement" && body.id === this.opened.id) {
query = Matter.Query.point(body.parts, this.mouse.position);
break;
}
} }
}else{ } else {
this.concernementpopupid = null; // if no concernement opened we query concernements
query = Matter.Query.point(this.world.bodies, this.mouse.position)
}
this.mapPopupData = null;
if (query && query.length) {
// if we have a results
for (let body of query) {
if (!this.opened // if no concernement is opened
&& body.item_type === "concernement" // if it is a concernement
&& typeof this.concernementsByID[body.id] !== "undefined" // if the id exists
&& !this.concernementsByID[body.id].opened) { // if the concernement is not opened
this.mapPopupData = {
type: 'concernement',
id: body.id
};
}
if (body.item_type === "entite" // if it is an entite
&& this.opened // if a concernement is opened
&& typeof this.opened.entites_byid[body.id] !== "undefined") { // if the entity exists
this.mapPopupData = {
type: 'entite',
id: body.id
};
}
}
// console.log(`this.mapPopupData type: ${this.mapPopupData.type}, id: ${this.mapPopupData.id}`);
} }
}, },
onClick (e) { onClick (e) {
@ -141,7 +172,9 @@ export default {
this.openCloseConcernement(concernement.id, clickedIDs.indexOf(concernement.id) !== -1) 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
if (!clickedIDs.length) { if (!clickedIDs.length) {
this.resetConcernementOpened();
this.$router.push({name: 'home'}); this.$router.push({name: 'home'});
} }
} }
@ -190,8 +223,8 @@ export default {
</ul> </ul>
</nav> </nav>
<ConcernementMapPopup <ConcernementMapPopup
v-if="concernementpopupid" v-if="mapPopupData"
:id="concernementpopupid" :infos="mapPopupData"
/> />
</template> </template>

16
src/stores/concernements.js
View File

@ -18,6 +18,7 @@ export const ConcernementsStore = defineStore({
state: () => ({ state: () => ({
concernements: [], concernements: [],
concernementsByID: {}, concernementsByID: {},
allEntitesById: {},
opened: false, opened: false,
ct_concernement: {} ct_concernement: {}
}), }),
@ -39,9 +40,17 @@ export const ConcernementsStore = defineStore({
GQL.post('', { query: print(ast) }) GQL.post('', { query: print(ast) })
.then(({ data : { data : { allconcernements } } }) => { .then(({ data : { data : { allconcernements } } }) => {
console.log('loadconcernements loaded', allconcernements) console.log('loadconcernements loaded', allconcernements)
this.concernements = allconcernements
this.concernements = [];
allconcernements.forEach(concernement => { allconcernements.forEach(concernement => {
this.concernementsByID[concernement.id] = concernement concernement.entites_byid = {};
concernement.entites.forEach(entite => {
concernement.entites_byid[entite.entite.id] = entite;
// record a flat list of all entités of all concernement for map-popup
this.allEntitesById[entite.entite.id] = entite;
});
this.concernements.push(concernement);
this.concernementsByID[concernement.id] = concernement;
}); });
}) })
.catch(error => { .catch(error => {
@ -81,6 +90,9 @@ export const ConcernementsStore = defineStore({
this.opened = this.concernementsByID[id]; this.opened = this.concernementsByID[id];
this.router.push({name: 'concernement', params: {id: id}}); this.router.push({name: 'concernement', params: {id: id}});
} }
},
resetConcernementOpened () {
this.opened = null;
} }
} }
}) })