diff --git a/src/App.vue b/src/App.vue index 97b8132..9903853 100644 --- a/src/App.vue +++ b/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 {
+
diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 9da541a..36f9807 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -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 diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 2282959..2e8b664 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -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) { diff --git a/src/stores/concernements.js b/src/stores/concernements.js index 1d2a865..099d767 100644 --- a/src/stores/concernements.js +++ b/src/stores/concernements.js @@ -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;